.menu-area { flex: 1; padding: 20px 20px 24px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.menu-section { margin-bottom: 28px; }
.menu-section:last-child { margin-bottom: 0; }
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.section-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.icon-myclass { background: linear-gradient(45deg, #ffecd2, #fcb69f); } .icon-story { background: linear-gradient(45deg, #4facfe, #00f2fe); } .icon-academy { background: linear-gradient(45deg, #43e97b, #38f9d7); } .icon-curriculum { background: linear-gradient(45deg, #fa709a, #fee140); }
/* 4개 가로 배치 그리드 (영비스토리용) */ .grid-horizontal-4 { display: flex; gap: 6px; }
.story-card-horizontal { flex: 1; background: white; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 16px 4px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: #333; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.04); position: relative; overflow: hidden; min-height: 72px; }
.story-card-horizontal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); transform: translateX(-100%); transition: transform 0.3s ease; }
.story-card-horizontal:hover::before { transform: translateX(0); }
.story-card-horizontal:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: #4facfe; }
.story-card-horizontal-icon { font-size: 22px; margin-bottom: 8px; }
.story-card-horizontal-text { font-size: 14px; font-weight: 600; line-height: 1.2; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
/* 가로 배치 그리드 (3개 메뉴용) */ .grid-horizontal { display: flex; gap: 8px; }
.horizontal-card { flex: 1; background: white; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: #333; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.04); min-height: 70px; }
.horizontal-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: #ff9500; }
.horizontal-card-icon { font-size: 18px; margin-bottom: 8px; }
.horizontal-card-text { font-size: 14px; font-weight: 500; line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; }

/* 애니메이션 */
@keyframes slideUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
.menu-section { animation: slideUp 0.5s ease forwards; opacity: 0; }
.menu-section:nth-child(1) { animation-delay: 0.1s; }
.menu-section:nth-child(2) { animation-delay: 0.2s; }
.menu-section:nth-child(3) { animation-delay: 0.3s; }
.menu-section:nth-child(4) { animation-delay: 0.4s; }

/* 스크롤바 스타일 */
.menu-area::-webkit-scrollbar { width: 4px; }
.menu-area::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
.menu-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }