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
+
-
+
+
-
-
-
+
+
@Body
-
+
+
+
+
+
+
+ @* *@
+ @* *@
+ @*
*@
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;
+}