/* student.css 파일 전체 내용 */

:root {
    --student-bg: #E2F0CB; 
    --student-nav: #8fc79a;
}
body { background-color: #f4f7f6; margin: 0; padding: 0; font-family: 'Jua', sans-serif; }

/* 로그인 화면 */
#login-screen {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    height: 100vh; background-color: var(--student-bg);
}
.login-box {
    background: white; padding: 40px; border-radius: 30px; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    text-align: center; width: 80%; max-width: 400px; border: 4px solid #fff;
}

/* 학생 포털 레이아웃 */
#student-portal { display: none; height: 100vh; flex-direction: row; background: #f4f7f6; }
.student-sidebar {
    width: 250px; background: white; border-right: 2px solid #eee; display: flex; flex-direction: column;
    padding: 20px 0; box-shadow: 2px 0 10px rgba(0,0,0,0.05); z-index: 10;
    
    /* 아래 두 줄을 추가해 주세요! */
    position: relative; /* 버튼이 사이드바에 붙어있도록 기준점 설정 */
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 부드러운 슬라이딩 효과 */
}
.student-profile-mini { text-align: center; padding-bottom: 20px; border-bottom: 2px dashed #eee; margin-bottom: 20px; }
.student-menu-item {
    padding: 15px 30px; font-size: 18px; color: #555; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; gap: 10px;
}
.student-menu-item:hover { background: #f9fbf9; color: var(--student-nav); }
.student-menu-item.active { background: var(--student-nav); color: white; font-weight: bold; }
.student-main { flex: 1; padding: 30px; overflow-y: auto; }

/* 아바타 피팅룸 */
.fitting-room-container { display: flex; gap: 20px; background: white; padding: 20px; border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.avatar-display-area {
    width: 300px; 
    height: 400px; 
    /* background: #e0f7fa;  <-- 제거 */
    /* border: 4px solid #b2ebf2; <-- 제거 */
    border-radius: 15px; 
    position: relative;
    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    overflow: hidden;
}
.avatar-layer { position: absolute; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.category-tabs { display: flex; flex-direction: column; gap: 10px; width: 100px; }
.cat-btn, .store-cat-btn { padding: 10px; border: none; border-radius: 10px; background: #f0f0f0; cursor: pointer; font-family: 'Jua'; }
.cat-btn.active, .store-cat-btn.active { background: #3b82f6; color: white; }

/* 아이템 그리드 */
.item-grid, #storeGrid {
    flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px;
    align-content: start; background: #f9fbf9; padding: 15px; border-radius: 15px; border: 2px dashed #ddd;
}
.inventory-item, .shop-item {
    background: white; border: 2px solid #eee; border-radius: 10px; padding: 10px; cursor: pointer; text-align: center; transition: 0.2s;
}
.inventory-item:hover, .shop-item:hover { border-color: #3b82f6; transform: translateY(-3px); }
.inventory-item.equipped { border-color: #4CAF50; background: #e8f5e9; }

/* =======================================
   학생용 포털 전용 스타일시트 (student.css)
   ======================================= */

:root {
    --student-bg: #E2F0CB; 
    --student-nav: #8fc79a;
}

/* 🌟 교사용 style.css의 영향을 무시하고 화면을 꽉 채우도록 강제 설정 */
body { 
    display: block !important; 
    width: 100% !important;
    height: 100vh !important;
    background-color: #f4f7f6; 
    margin: 0 !important; 
    padding: 0 !important; 
    font-family: 'Jua', sans-serif; 
}

/* 로그인 화면 */
#login-screen {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    height: 100vh; width: 100%; background-color: var(--student-bg);
}
.login-box {
    background: white; padding: 40px; border-radius: 30px; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    text-align: center; width: 80%; max-width: 400px; border: 4px solid #fff;
}

/* 학생 포털 레이아웃 (🌟 width: 100% 추가) */
#student-portal { display: none; width: 100%; height: 100vh; flex-direction: row; background: #f4f7f6; }
.student-sidebar {
    width: 250px; background: white; border-right: 2px solid #eee; display: flex; flex-direction: column;
    padding: 20px 0; box-shadow: 2px 0 10px rgba(0,0,0,0.05); z-index: 10;
}
.student-profile-mini { text-align: center; padding-bottom: 20px; border-bottom: 2px dashed #eee; margin-bottom: 20px; }
.student-menu-item {
    padding: 15px 30px; font-size: 18px; color: #555; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; gap: 10px;
}
.student-menu-item:hover { background: #f9fbf9; color: var(--student-nav); }
.student-menu-item.active { background: var(--student-nav); color: white; font-weight: bold; }
.student-main { flex: 1; padding: 30px; overflow-y: auto; }

/* 아바타 피팅룸 */
.fitting-room-container { display: flex; gap: 20px; background: white; padding: 20px; border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.avatar-display-area {
    width: 300px; 
    height: 400px; 
    /* background: #e0f7fa;  <-- 제거 */
    /* border: 4px solid #b2ebf2; <-- 제거 */
    border-radius: 15px; 
    position: relative;
    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    overflow: hidden;
}
.avatar-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: contain; pointer-events: none; }
.category-tabs { display: flex; flex-direction: column; gap: 10px; width: 100px; }
.cat-btn, .store-cat-btn { padding: 10px; border: none; border-radius: 10px; background: #f0f0f0; cursor: pointer; font-family: 'Jua'; }
.cat-btn.active, .store-cat-btn.active { background: #3b82f6; color: white; }

/* 아이템 그리드 */
.item-grid, #storeGrid {
    flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px;
    align-content: start; background: #f9fbf9; padding: 15px; border-radius: 15px; border: 2px dashed #ddd;
}
.inventory-item, .shop-item {
    background: white; border: 2px solid #eee; border-radius: 10px; padding: 10px; cursor: pointer; text-align: center; transition: 0.2s;
}
.inventory-item:hover, .shop-item:hover { border-color: #3b82f6; transform: translateY(-3px); }
.inventory-item.equipped { border-color: #4CAF50; background: #e8f5e9; }

/* 사이드바가 접혔을 때 (너비인 250px만큼 왼쪽으로 숨김) */
.student-sidebar.collapsed {
    margin-left: -250px; 
}

/* 튀어나온 토글(접기/펴기) 버튼 디자인 */
.student-sidebar-toggle {
    position: absolute;
    
    /* 🌟 이 두 줄이 수정되었습니다! */
    top: 30px; /* 기존 50% 대신 위에서부터 30px 띄웁니다 (원하는 만큼 숫자 조절 가능!) */
    transform: none; /* 기존에 중앙 정렬을 위해 썼던 translateY 속성을 지워줍니다. */
    
    right: -24px;
    width: 24px;
    height: 60px;
    background: var(--student-nav);
    color: white;
    border: none;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 3px 0 5px rgba(0,0,0,0.1);
    font-size: 12px;
    transition: background 0.2s;
    z-index: 101;
}

.student-sidebar-toggle:hover {
    background: #7bb588; /* 마우스 올렸을 때 조금 더 진한 초록색 */
}