@charset "utf-8";

.left-header {padding:20px 30px; text-align:center; border-bottom:1px solid var(--layout-min-lv3); background:var(--layout-max-lv3)}
.main-view .scroll-area {height:calc(100dvh - 185px);}
.logo-txt {font-size:1.7rem; font-weight:800; letter-spacing:2px; background:var(--color-main-lv1); -webkit-background-clip:text; -webkit-text-fill-color:transparent}

.layout-container {display:grid; grid-template-columns:var(--left-w) 1fr var(--right-w); gap:var(--gap); padding:var(--gap); height:100dvh; max-width:1920px; margin:0 auto; transition:grid-template-columns var(--motion-duration) var(--motion), gap var(--motion-duration) var(--motion)}
.layout-container.is-left-collapsed {--left-w:0px; transition-delay:100ms, 100ms}
.layout-container.is-right-collapsed {--right-w:0px; transition-delay:100ms, 100ms}
.layout-container:not(.is-left-collapsed):not(.is-right-collapsed) {transition-delay:0ms, 0ms}

.glass-panel {position:relative; backdrop-filter:var(--layout-blur); -webkit-backdrop-filter:var(--layout-blur); box-shadow:var(--layout-shadow), inset 0 1px 0 var(--layout-max-lv3); border:solid 1px var(--layout-max-lv2); border-radius:var(--panel-radius); display:flex; flex-direction:column; overflow:hidden; transition:var(--motion-all)}
.left-panel, .right-panel {min-width:300px; background:var(--layout-max-lv1); opacity:1; transform:translateX(0); transition:transform var(--motion-duration) var(--motion), opacity 220ms ease; will-change:transform, opacity}
.left-panel .scroll-area {padding-bottom:80px}
.layout-container.is-left-collapsed .left-panel {transform:translateX(calc(-1 * (var(--left-w) + var(--gap)))); opacity:0; pointer-events:none}
.layout-container.is-right-collapsed .right-panel {transform:translateX(calc(var(--right-w) + var(--gap))); opacity:0; pointer-events:none}
.main-panel {background:var(--layout-max-lv3)}
.main-panel > .scroll-area {display:flex; flex-direction:column; height:100lvh; padding-top:60px}
.main-content {display:flex; flex:1; flex-direction:column}

/* List Items */
.list-item {display:flex; align-items:center; padding:9px 25px; cursor:pointer; transition:background var(--motion-duration) var(--motion)}
.list-item:hover {background:var(--layout-max-lv1)}
.list-icon {width:20px; height:20px; border-radius:10px; margin-right:12px; display:flex; align-items:center; justify-content:center; color:var(--color-white); font-size:0.6rem; box-shadow:var(--dark-shadow-lv2)}
.list-info {flex:1; min-width:0; margin-right:10px}
.list-info h4 {font-size:0.9rem; font-weight:600; margin-bottom:2px}
.list-info p {font-size:0.75rem; color:var(--text-lv2)}
.list-info h4 .badge {display:inline-block; font-size:0.7rem; padding:2px 6px; border-radius:6px; margin-right:4px; vertical-align:middle}
.list-info h4 .badge.red {background:var(--layout-min-lv1); color:var(--color-rank01)}
.list-sub-header {font-size:0.75rem; font-weight:700; color:var(--text-lv2); margin:4px 24px 8px 24px}

/* Rank & Notices */
.rank-badge {margin-left:auto; font-size:.7rem; font-weight:bold; color:var(--text-lv3)}
.rank-badge.gold {color:var(--color-rank02); font-size:1.1rem}
.rank-badge.silver {color:var(--color-rank09); font-size:1.1rem}
.rank-badge.bronze {color:var(--color-rank11); font-size:1.1rem}
.rank-badge.up {color:var(--color-rank01)}
.rank-badge.down {color:var(--color-rank06)}
.notice-icon.urgent {background:var(--color-rank01)}
.notice-icon.update {background:var(--color-rank06)}
.notice-icon.event {background:var(--color-rank08)}
.notice-icon.normal {background:var(--color-rank09)}

/* Profile Card (Slim) */
.profile-card.new-style.slim {padding:20px 30px; background:var(--layout-max-lv3); border-bottom:1px solid var(--layout-min-lv3)}
.profile-header-slim {display:flex; align-items:center; gap:15px; margin-bottom:18px}
.avatar-container-slim {position:relative; width:60px; height:60px; flex-shrink:0}
.avatar-img-slim {width:100%; height:100%; border-radius:50px; object-fit:cover; background:var(--color-white); box-shadow:var(--dark-shadow-lv2); transition:filter var(--motion-duration) var(--motion)}
.status-indicator {position:absolute; bottom:0; right:0; width:14px; height:14px; background:var(--color-rank08); border:2px solid var(--color-white); border-radius:50%; animation:pulse-green 2s infinite}
.profile-info-slim {flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center}
.user-name-slim {font-size:1rem; margin-bottom:6px; display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.verified-icon {color:var(--color-rank06); font-size:0.9rem}
.exp-track-slim {width:100%; height:6px; background:var(--layout-min-lv3); border-radius:3px; overflow:hidden; margin-bottom:4px}
.exp-bar-slim { height: 100%; background: linear-gradient(90deg, var(--color-rank06), var(--color-main-lv1)); border-radius: 3px; animation: loadProgress 1.5s var(--motion) forwards; }
.exp-text-slim {display:flex; justify-content:space-between; font-size:0.7rem; color:var(--text-lv2); font-weight:600}
.exp-text-slim .percent {color:var(--color-main-lv1)}
.action-grid-slim {display:flex; gap:7px; margin-top:10px;}
.action-grid-slim .btn {flex:1;}
.profile-card a[data-sys-modal='profile'] {color:var(--color-rank04);}
.profile-card a[data-sys-modal='config'] {color:var(--color-rank06);}
.profile-card a[data-sys-modal='credit'] {color:var(--color-rank02);}
.profile-card .logout {color:var(--color-rank03);}

/* Users List */
.user-item {cursor:pointer}
.user-avatar {width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--color-white); font-weight:700; font-size:0.9rem; text-shadow:var(--dark-shadow-lv2); position:relative; flex-shrink:0; margin-right:12px; box-shadow:var(--dark-shadow-lv2)}
.user-avatar img {width:100%; height:100%; border-radius:50%; object-fit:cover}
.user-avatar.grayscale {filter:grayscale(100%); opacity:0.7}
.status-dot {position:absolute; bottom:0; right:0; width:12px; height:12px; border:2px solid var(--color-white); border-radius:50%; box-shadow:var(--dark-shadow-lv2)}
.status-dot.online {background:var(--color-rank07)}
.status-dot.idle {background:var(--color-rank02)}
.status-dot.mobile {background:var(--color-rank06)}
.status-dot.offline {background:var(--color-rank09)}
.status-dot.online::after {content:''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; border-radius:50%; border:2px solid var(--color-rank07); opacity:0; animation:pulse-ring 2s infinite}

/* Alarms */
.alarm-item {display:flex; align-items:flex-start; padding:12px; border-bottom:1px solid var(--layout-min-lv3); transition:background var(--motion-duration) var(--motion)}
.alarm-item:last-child {border-bottom:none}
.alarm-item:hover {background:var(--layout-max-lv1)}
.alarm-item.unread {background:var(--layout-max-lv1); border-left:3px solid var(--color-main-lv1)}
.alarm-icon {width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:var(--color-white); margin-right:12px; flex-shrink:0; box-shadow:var(--dark-shadow-lv2)}
.alarm-icon.like {background:linear-gradient(135deg, #fecfef, #ff9a9e)}
.alarm-icon.comment {background:linear-gradient(135deg, #fbc2eb, #a18cd1)}
.alarm-icon.system {background:linear-gradient(135deg, #84fab0, #8fd3f4)}
.alarm-info {flex:1; min-width:0}
.alarm-info h4 {font-size:0.85rem; font-weight:600; margin-bottom:2px}
.alarm-info p {font-size:0.75rem; color:var(--text-lv2); line-height:1.3}
.time-stamp {font-size:0.7rem; color:var(--text-lv3); white-space:nowrap; margin-left:8px}
.read-all-btn {text-align:center; padding:12px; margin-top:10px; font-size:0.8rem; color:var(--color-rank09); cursor:pointer}
.read-all-btn:hover {color:var(--color-main-lv1); font-weight:700}

/* Footer */
.moa-footer {position:relative; padding:0 20px 20px 20px; flex-shrink:0; margin-top:0}
.footer-glass {display:flex; justify-content:space-between; align-items:center; padding:15px 30px; background:var(--layout-max-lv3); border:1px solid var(--layout-max-lv3); border-radius:20px; box-shadow:var(--dark-shadow-lv1); transition:var(--motion-all)}
.footer-glass:hover {background:var(--layout-max-lv1);}
.footer-glass:hover .sns-link {color:var(--text-lv2)}
.footer-info {font-size:0.8rem; color:var(--text-lv2); display:flex; align-items:center; gap:10px}
.copyright {font-weight:500}
.divider {color:var(--layout-min-lv1); font-size:0.7rem}
.footer-link {color:var(--text-lv2); text-decoration:none; transition:color var(--motion-duration) var(--motion)}
.footer-link:hover {text-decoration:underline}
.footer-sns {display:flex; gap:12px}
.sns-link {width:32px; height:32px; border-radius:50%; background:var(--layout-max-lv1); display:flex; align-items:center; justify-content:center; color:var(--text-lv3); text-decoration:none; transition:var(--motion-all)}
.sns-link i {font-size:1rem;}
.sns-link:active {box-shadow: 0 0 0 transparent, inset 0 2px 7px var(--layout-min-lv1);}
.sns-link:hover {background:var(--color-main-lv1); color:var(--color-white) !important; box-shadow:var(--color-shadow-lv1), var(--color-shadow-lv2)}