diff --git a/Program/Layout/MainLayout.razor b/Program/Layout/MainLayout.razor index 1d07228..0064939 100644 --- a/Program/Layout/MainLayout.razor +++ b/Program/Layout/MainLayout.razor @@ -1,24 +1,26 @@ @inherits LayoutComponentBase +
- diff --git a/Program/Layout/MainLayout.razor.css b/Program/Layout/MainLayout.razor.css index 74ffa3a..162d7e9 100644 --- a/Program/Layout/MainLayout.razor.css +++ b/Program/Layout/MainLayout.razor.css @@ -1,93 +1,48 @@ +/* 전체 페이지 wrapper */ .page { - display: flex; - flex-direction: column; - height: 100vh; - overflow: hidden; + position: relative; + min-height: 100vh; + overflow-x: hidden; } -.top-row { +/* TopNav를 화면 위에 떠 있게 설정 */ +.top-nav { position: fixed; top: 0; left: 0; - right: 0; - height: 3.5rem; + width: 100%; + padding: 1.5rem 2rem; + background-color: rgba(255, 255, 255, 0.95); /* 반투명 배경 */ + z-index: 1000; display: flex; + justify-content: space-between; align-items: center; - background-color: #f7f7f7; - border-bottom: 1px solid #ddd; - z-index: 100; - padding: 0 1rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); } -.top-title { - width: 250px; +/* 타이틀 텍스트 */ +.prj-title { + font-size: 1.5rem; font-weight: bold; + margin: 0; + color: var(--text-title); } +/* 메뉴 영역 */ .top-menu { - flex: 1; display: flex; - justify-content: flex-end; - gap: 1rem; + gap: 1.5rem; } -/* 본문 구조 */ -main { +.bottom-left-btn { + position: fixed; + z-index: 1000; + left: 40px; + width: 100%; + background-color: rgba(255, 255, 255, 0.95); /* 반투명 배경 */ + z-index: 1000; 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; - } -} + justify-content: space-between; + align-items: center; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); +} \ No newline at end of file diff --git a/wwwroot/css/app.css b/wwwroot/css/app.css index 54a8aa3..e7b8602 100644 --- a/wwwroot/css/app.css +++ b/wwwroot/css/app.css @@ -101,3 +101,50 @@ a, .btn-link { code { color: #c02d76; } + + +:root { + /* Disable */ + --disable-light: #F8F8F8; + --disable-normal: #B8B9B4; + --disable-dark: #8A8B87; + --disable-darker: #40413F; + + /* Information */ + --information-light: #F7FBF8; + --information-normal: #B2DBBB; + --information-dark: #86A48C; + --information-darker: #3E4D41; + + /* Point */ + --point-light: #F9FBFF; + --point-normal: #C2D6FA; + --point-dark: #92A1BC; + --point-darker: #444B58; + + /* Second */ + --second-light: #F2F0ED; + --second-normal: #79654E; + --second-dark: #5D4C3B; + --second-darker: #2A231B; + + /* Normal */ + --normal-light: #FDFCFB; + --normal-normal: #EBDFD2; + --normal-dark: #B0A79E; + --normal-darker: #524E4A; + + /* Danger */ + --danger-light: #FFF9F9; + --danger-normal: #FDC6C3; + --danger-dark: #BE9592; + --danger-darker: #594544; + + /* 기타 텍스트 및 상태 */ + --text-title: #1D1D1D; + --text-detail: #545454; + --text-disabled: #8E8E8E; + --text-white: #FFFFFF; + --text-black: #000000; + --text-border: #C6C6C6; +}