.page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .top-row { position: fixed; top: 0; left: 0; right: 0; height: 3.5rem; display: flex; align-items: center; background-color: #f7f7f7; border-bottom: 1px solid #ddd; z-index: 100; padding: 0 1rem; } .top-title { width: 250px; font-weight: bold; } .top-menu { flex: 1; display: flex; justify-content: flex-end; gap: 1rem; } /* 본문 구조 */ main { display: flex; flex: 1; margin-top: 3.5rem; overflow: hidden; /*height: calc(100vh - 3.5rem);*/ } .side-menu { width: 250px; background: linear-gradient(180deg, rgb(5, 39, 103), #3a0647); color: white; padding: 1rem; overflow-y: auto; flex-shrink: 0; } .content { flex: 1; padding: 1.5rem; overflow-y: auto; background-color: #fff; } /* ✅ 모바일 대응 */ @media (max-width: 768px) { .top-row { flex-direction: row; justify-content: space-between; } .top-title { width: auto; font-size: 1rem; } .top-menu { justify-content: flex-end; } main { flex-direction: column; height: calc(100vh - 3.5rem); } .side-menu { display: flex; flex-direction: row; overflow-x: auto; width: 100%; white-space: nowrap; padding: 0.5rem 1rem; } .content { flex: 1; padding: 1rem; } }