diff --git a/index.html b/index.html
index 7bc4c1c..9895267 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,10 @@
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
         <!-- 나중에 로고 만들면 파비콘도 변경해야 함 -->
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, user-scalable=no"
+        />
 
         <title>말랑플레이스</title>
         <meta name="title" content="말랑플레이스" />
@@ -57,7 +60,7 @@
 
         <script
             type="text/javascript"
-            src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_API_KEY%"
+            src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_API_KEY%&libraries=services,drawing,clusterer"
         ></script>
     </head>
 
diff --git a/public/fonts/Ownglyph-PDH.ttf b/public/fonts/Ownglyph-PDH.ttf
new file mode 100644
index 0000000..6d95c10
Binary files /dev/null and b/public/fonts/Ownglyph-PDH.ttf differ
diff --git a/public/images/cursor.png b/public/images/cursor.png
new file mode 100644
index 0000000..cac0e4d
Binary files /dev/null and b/public/images/cursor.png differ
diff --git a/router.jsx b/router.jsx
index 7d73de7..d24c671 100644
--- a/router.jsx
+++ b/router.jsx
@@ -1,5 +1,9 @@
 import BaseLayout from './src/components/layout/BaseLayout';
 import MainPage from './src/pages/MainPage';
+import ErrorPage from './src/pages/ErrorPage';
+import LoginPage from './src/pages/LoginPage';
+import RegisterPage from './src/pages/RegisterPage';
+import ComponentMuseum from './src/pages/ComponentMuseum';
 
 export const routesConfig = [
     {
@@ -18,6 +22,22 @@ export const routesConfig = [
                 path: '/missing',
                 element: <>Oh No</>,
             },
+            {
+                path: '/museum',
+                element: <ComponentMuseum />,
+            },
         ],
     },
+    {
+        path: '/login',
+        element: <LoginPage />,
+    },
+    {
+        path: '/register',
+        element: <RegisterPage />,
+    },
+    {
+        path: '/*',
+        element: <ErrorPage />,
+    },
 ];
diff --git a/src/assets/stylesheets/abstracts/_keyframes.scss b/src/assets/stylesheets/abstracts/_keyframes.scss
index 48ca3d1..ad87ba1 100644
--- a/src/assets/stylesheets/abstracts/_keyframes.scss
+++ b/src/assets/stylesheets/abstracts/_keyframes.scss
@@ -1,6 +1,7 @@
 /* _keyframes.scss */
 
-@keyframes rotate-conic { // 회전하는 conic-gradient
+@keyframes rotate-conic {
+    // 회전하는 conic-gradient
     from {
         --conic-range: 0deg;
     }
@@ -10,7 +11,8 @@
     }
 }
 
-@keyframes blink { // 순서대로 깜빡이는 말줄임표
+@keyframes blink {
+    // 순서대로 깜빡이는 말줄임표
     from {
         opacity: 0;
     }
@@ -20,9 +22,10 @@
     }
 }
 
-@keyframes burger-toggle { // 햄버거 버튼
+@keyframes burger-toggle {
+    // 햄부기 버튼
     40% {
-        height: .1rem;
+        height: 0.1rem;
         inset-inline-start: var(--burger-self-start);
         inset-inline-end: var(--burger-self-end);
     }
@@ -45,9 +48,40 @@
     100% {
         inset-inline-start: 0;
         inset-inline-end: 0;
-        height: .8rem;
+        height: 0.8rem;
         rotate: var(--burger-self-rotate) 0 0;
     }
 }
 
-/* _keyframes.scss */
\ No newline at end of file
+@keyframes pop-up-message {
+    // 파핑 메시지
+    from {
+        scale: 0;
+    }
+
+    45% {
+        scale: 1.2;
+    }
+
+    55% {
+        scale: 0.75;
+    }
+
+    70% {
+        scale: 1.1;
+    }
+
+    90% {
+        scale: 0.9;
+    }
+
+    95% {
+        scale: 1.05;
+    }
+
+    to {
+        scale: 1;
+    }
+}
+
+/* _keyframes.scss */
diff --git a/src/assets/stylesheets/base/_default.scss b/src/assets/stylesheets/base/_default.scss
index 0a683e3..2098434 100644
--- a/src/assets/stylesheets/base/_default.scss
+++ b/src/assets/stylesheets/base/_default.scss
@@ -10,6 +10,16 @@
     font-display: swap;
 }
 
+@font-face {
+    font-family: 'Ownglyph_PDH';
+    src:
+        local('온글잎 박다현체'),
+        url('/fonts/Ownglyph-PDH.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
 :root {
     font-family: 'SUIT', sans-serif;
     font-size: clamp(12px, 5vmin, 20px); // Reactive REM
@@ -35,7 +45,7 @@
     --ff-serif-kr: 'MaruBuri', serif;
     --ff-serif-en: '';
     --ff-cursive: '';
-
+    --ff-dingbat: 'Ownglyph_PDH', sans-serif;
     --rad-full: 25rem;
     --rad-xl: 0.8rem;
     --rad-lg: 0.4rem;
@@ -69,6 +79,9 @@ body {
     font-size: var(--fnt-md);
     word-break: keep-all;
     transition: background-color 0.25s;
+    cursor:
+        url('/images/cursor.png') 8 8,
+        auto;
 
     &.prevent-scroll {
         // 모달 등을 사용할 때 <body>에 클래스를 부여하여 스크롤 방지
diff --git a/src/assets/stylesheets/components/_areaInfoPanel.scss b/src/assets/stylesheets/components/_areaInfoPanel.scss
index f311270..e99f14d 100644
--- a/src/assets/stylesheets/components/_areaInfoPanel.scss
+++ b/src/assets/stylesheets/components/_areaInfoPanel.scss
@@ -4,7 +4,7 @@
     display: grid;
     place-items: center;
     position: fixed;
-    inset-block-start: 4.8rem;
+    inset-block-start: 5.2rem;
     inset-inline-start: 15.6rem;
     width: 2.4rem;
     height: 2.4rem;
@@ -13,16 +13,18 @@
     box-shadow: var(--shd-100);
     color: rgb(var(--clr-text-on-tint));
     transition:
-        inset-inline-start 0.25s 0.1s,
+        inset-block-start 0.25s 0.25s,
+        inset-inline-start 0.25s,
         background-color 0.25s;
     z-index: 501;
 
     > .remix {
-        rotate: -180deg;
+        rotate: 180deg;
         transition: rotate 0.5s 0.1s;
     }
 
     &.on {
+        inset-block-start: 4rem;
         inset-inline-start: 0.8rem;
         background-color: rgb(var(--clr-notify));
 
diff --git a/src/assets/stylesheets/components/_articleItem.scss b/src/assets/stylesheets/components/_articleItem.scss
new file mode 100644
index 0000000..d6a8544
--- /dev/null
+++ b/src/assets/stylesheets/components/_articleItem.scss
@@ -0,0 +1,69 @@
+/* _articleItem.scss */
+
+.article-item {
+    display: flex;
+    gap: 0.8rem;
+
+    &:has(input:checked) {
+        > .article-item-descriptions {
+            background-color: rgb(var(--clr-tint-20) / 0.05);
+            outline: 0.2rem solid rgb(var(--clr-info) / 0.25);
+        }
+    }
+
+    &:not(:has(input:checked)):hover {
+        > .article-item-descriptions {
+            background-color: rgb(var(--clr-tint-20) / 0.05);
+        }
+    }
+}
+
+.article-item-checkbox-wrapper {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    height: 2.4rem;
+}
+
+.article-item-descriptions {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.4rem;
+    flex: 1;
+    padding: 0.8rem;
+    border-radius: var(--rad-lg);
+}
+
+@mixin sub-descriptions {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    font-size: var(--fnt-sm);
+    font-weight: 200;
+}
+
+.article-item-title {
+    @include sub-descriptions();
+}
+
+.article-item-title-text {
+    font-size: var(--fnt-md);
+    font-weight: 900;
+}
+
+.article-replies-counter {
+    font-weight: 400;
+    opacity: 0.5;
+}
+
+.article-item-category {
+    @include sub-descriptions();
+}
+
+.article-item-datetime {
+    @include sub-descriptions();
+
+    opacity: 0.5;
+}
+
+/* _articleItem.scss */
diff --git a/src/assets/stylesheets/components/_chatItem.scss b/src/assets/stylesheets/components/_chatItem.scss
new file mode 100644
index 0000000..e34521a
--- /dev/null
+++ b/src/assets/stylesheets/components/_chatItem.scss
@@ -0,0 +1,89 @@
+/* _chatItem.scss */
+
+.chat-item {
+    display: flex;
+    gap: 0.4rem;
+
+    .chat-content-container {
+        animation: pop-up-message 0.25s ease-in forwards 1;
+    }
+
+    &.opposite {
+        .chat-content-container {
+            border-top-left-radius: 0;
+            background-color: rgb(var(--clr-surface-100));
+            transform-origin: top left;
+        }
+
+        .chat-datetime-container {
+            justify-content: flex-end;
+        }
+    }
+
+    &.my {
+        justify-content: flex-end;
+
+        .chat-content-container {
+            justify-self: flex-end;
+            border-bottom-right-radius: 0;
+            background-color: rgb(var(--clr-info));
+            color: rgb(var(--clr-text-on-tint));
+            transform-origin: bottom right;
+        }
+    }
+}
+
+.chat-user-image-container {
+    flex-shrink: 0;
+    position: relative;
+    width: 1.8rem;
+    height: 1.8rem;
+    border: 1px solid rgb(var(--clr-text) / 0.15);
+    border-radius: var(--rad-full);
+    background-color: rgb(var(--clr-gray));
+    color: rgb(var(--clr-white));
+    overflow: clip;
+
+    > .remix {
+        position: absolute;
+        inset: 0;
+        margin-block-start: 0.4rem;
+        width: 100%;
+        height: 100%;
+        opacity: 0.5;
+    }
+}
+
+.chat-user-image {
+    position: absolute;
+    inset: 0;
+}
+
+.chat-body {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.2rem;
+}
+
+.chat-user-name {
+    font-size: var(--fnt-sm);
+    font-weight: 700;
+    opacity: 0.5;
+}
+
+.chat-content-container {
+    padding: 0.4rem 0.6rem;
+    max-width: 14rem;
+    border-radius: var(--rad-lg);
+    line-height: 1.4;
+}
+
+.chat-datetime-container {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    font-size: var(--fnt-sm);
+    opacity: 0.5;
+}
+
+/* _chatItem.scss */
diff --git a/src/assets/stylesheets/components/_dropdown.scss b/src/assets/stylesheets/components/_dropDownSelector.scss
similarity index 100%
rename from src/assets/stylesheets/components/_dropdown.scss
rename to src/assets/stylesheets/components/_dropDownSelector.scss
diff --git a/src/assets/stylesheets/components/_formElements.scss b/src/assets/stylesheets/components/_formElements.scss
index 766961d..4637246 100644
--- a/src/assets/stylesheets/components/_formElements.scss
+++ b/src/assets/stylesheets/components/_formElements.scss
@@ -4,33 +4,30 @@
     // 입력 요소 공통사항
     padding-inline: 0.4rem;
     height: 1.6rem;
-    border: 1px solid rgb(var(--clr-theme) / 0.25);
-    border-radius: 0.2rem;
-    background-color: rgb(var(--clr-min) / 0.25);
+    border: 1px solid rgb(var(--clr-text) / 0.15);
+    border-radius: var(--rad-sm);
+    background-color: rgb(var(--clr-white) / 0.25);
     backdrop-filter: blur(0.4rem);
     color: rgb(var(--clr-text));
-    transition: 0.25s;
 
     &:hover {
-        border-color: rgb(var(--clr-theme) / 0.6);
-        background-color: rgb(var(--clr-min) / 0.5);
+        border-color: rgb(var(--clr-text) / 0.5);
+        background-color: rgb(var(--clr-white) / 0.5);
+        outline: 0.2rem solid rgb(var(--clr-info) / 0.25);
     }
 
     &:focus {
-        border-color: rgb(var(--clr-theme) / 0.75);
-        background-color: rgb(var(--clr-min));
-        outline: 0.2rem solid rgb(var(--clr-tint-0) / 0.25);
+        border-color: rgb(var(--clr-text) / 0.75);
+        background-color: rgb(var(--clr-white));
+        outline: 0.2rem solid rgb(var(--clr-info) / 0.5);
     }
 
-    &.need-recognize:valid {
-        // 특정 형식의 입력 요소에서 입력 값이 올바를 때의 조건
-        // 일반 입력 요소에 모두 통일되어 적용되므로, 반드시 필요한 경우에만 .need-recognize 클래스를 붙여 사용한다.
-
+    &.need-recognized:user-valid {
         border-color: rgb(var(--clr-clear) / 0.75);
-        background-color: rgb(var(--clr-clear) / 0.5);
+        outline: 0.2rem solid rgb(var(--clr-clear) / 0.25);
     }
 
-    &:invalid {
+    &.need-recognized:user-invalid {
         border-color: rgb(var(--clr-alert));
         outline: 0.2rem solid rgb(var(--clr-alert) / 0.25);
     }
@@ -102,60 +99,68 @@ select:not(.exclude) {
         align-items: center;
         gap: 0.4rem;
         position: relative;
+
         cursor: pointer;
 
         > .toggles-indicator {
             display: grid;
             place-items: center;
-            width: 1rem;
-            height: 1rem;
-            border: 1px solid rgb(var(--clr-theme) / 0.25);
-            background-color: rgb(var(--clr-min) / 0.25);
+            width: 0.8rem;
+            height: 0.8rem;
+            border: 1px solid rgb(var(--clr-text) / 0.15);
+            background-color: rgb(var(--clr-white) / 0.25);
             backdrop-filter: blur(0.4rem);
             color: rgb(var(--clr-text));
         }
 
         > .toggles-label {
-            font-weight: 200;
-            opacity: 0.75;
+            font-size: var(--fnt-sm);
+            opacity: 0.5;
         }
     }
 
     &:checked + label {
         > .toggles-indicator {
-            border: 1px solid rgb(var(--clr-theme));
-            background-color: rgb(var(--clr-tint-0) / 0.15);
-            color: rgb(var(--clr-tint-100));
+            border: 1px solid rgb(var(--clr-text) / 0.5);
+            background-color: rgb(var(--clr-text));
+            color: rgb(var(--clr-text-on-tint));
         }
 
         > .toggles-label {
-            font-weight: 900;
+            font-weight: 700;
+            opacity: 1;
         }
     }
 
     & + label:hover {
         > .toggles-indicator {
-            border-color: rgb(var(--clr-theme) / 0.6);
-            background-color: rgb(var(--clr-min) / 0.5);
+            outline: 0.2rem solid rgb(var(--clr-info) / 0.25);
+        }
+    }
+
+    &:not(:checked) + label:hover {
+        > .toggles-indicator {
+            border-color: rgb(var(--clr-text) / 0.5);
+            background-color: rgb(var(--clr-background) / 0.25);
         }
     }
 
     &:focus + label {
         > .toggles-indicator {
-            border-color: rgb(var(--clr-theme) / 0.75);
-            background-color: rgb(var(--clr-min));
-            outline: 0.2rem solid rgb(var(--clr-tint-0) / 0.25);
+            border-color: rgb(var(--clr-text) / 0.75);
+            background-color: rgb(var(--clr-background));
+            outline: 0.2rem solid rgb(var(--clr-info) / 0.5);
         }
     }
 
     &:disabled + label {
-        color: rgb(var(--clr-surface-60));
+        color: rgb(var(--clr-text-disable));
         text-shadow: 1px 1px 0 rgb(255 255 255 / 0.25);
         cursor: no-drop;
 
         > .toggles-indicator {
-            border-color: rgb(var(--clr-surface-60));
-            background-color: rgb(var(--clr-surface-0));
+            border-color: rgb(var(--clr-black) / 0.15);
+            background-color: rgb(var(--clr-gray));
         }
     }
 }
@@ -176,7 +181,7 @@ input[type='radio'] {
 
     & + label {
         > .toggles-indicator {
-            border-radius: 25rem;
+            border-radius: var(--rad-full);
 
             &::before {
                 display: block;
@@ -219,11 +224,9 @@ input[type='checkbox']:not([data-checkbox-type='toggle']) {
 
     & + label {
         > .toggles-indicator {
-            border-radius: 0.2rem;
+            border-radius: var(--rad-sm);
 
             .remix {
-                width: 0.8rem;
-                height: 0.8rem;
                 opacity: 0;
             }
         }
diff --git a/src/assets/stylesheets/components/_mainModal.scss b/src/assets/stylesheets/components/_mainModal.scss
index b60d8b3..d57137e 100644
--- a/src/assets/stylesheets/components/_mainModal.scss
+++ b/src/assets/stylesheets/components/_mainModal.scss
@@ -19,12 +19,18 @@
     background-color: rgb(var(--clr-white));
     box-shadow: var(--shd-100);
     overflow: hidden;
+
+    &:has(.cover-signature-image-container) {
+        #main-modal-side-menu {
+            margin-block-start: 2.8rem;
+        }
+    }
 }
 
 #main-modal-body {
     flex: 1;
     display: flex;
-    z-index: 2;
+    overflow: hidden;
 }
 
 #main-modal-sidebar {
@@ -38,22 +44,242 @@
     );
 }
 
-#main-modal-signature-image {
-    position: relative;
-    margin-block-start: -3.2rem;
-    margin-inline: auto;
-    padding: 0.2rem;
-    width: 6.4rem;
-    height: 6.4rem;
-    border-radius: var(--rad-full);
-    background-color: rgb(var(--clr-background));
+#main-modal-side-menu {
+    padding-block: 0.8rem;
+}
+
+.side-menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-inline: 0.8rem;
+    height: 1.8rem;
+    font-size: var(--fnt-sm);
+    font-weight: 200;
+
+    > .remix {
+        opacity: 0.5;
+    }
+
+    &:not(.on):hover {
+        background-color: rgb(var(--clr-theme) / 0.3);
+    }
+
+    &.on {
+        background-color: rgb(var(--clr-theme));
+        font-weight: 900;
+
+        > .remix {
+            opacity: 1;
+        }
+    }
+}
+
+#main-modal-content-container {
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+}
+
+#main-modal-navigation {
+    flex-shrink: 0;
+    display: flex;
+    padding-inline: 0.4rem;
+    height: 2.4rem;
+    background-image: linear-gradient(
+        to top,
+        rgb(var(--clr-text) / 0.15) 1px,
+        transparent 1px
+    );
+
+    > ul {
+        display: contents;
+    }
+}
+
+.modal-tab-navigation-item {
+    --selected: 0;
+
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    padding-inline: 0.8rem;
+    background-image: linear-gradient(
+        to top,
+        rgb(var(--clr-theme)),
+        rgb(var(--clr-theme)) var(--selected),
+        transparent var(--selected)
+    );
+    font-size: var(--fnt-sm);
+    font-weight: 200;
+
+    &.on {
+        --selected: 0.2rem;
+
+        font-weight: 900;
+    }
+}
+
+#main-modal-content {
+    flex: 1;
+    overflow-y: auto;
+}
+
+/* 모달 외부에서 사용할 확률이 적은 컴포넌트들 */
+
+/* 모달 섹션 타이틀 */
+
+.modal-section-title {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+    padding-inline: 0.8rem;
+    height: 2.4rem;
+    border-block-end: 1px solid rgb(var(--clr-text) / 0.15);
+
+    > .remix {
+        opacity: 0.5;
+    }
+
+    > p {
+        font-size: var(--fnt-sm);
+        font-weight: 900;
+    }
+}
+
+/* 날짜 분단선 */
+
+.modal-date-separator {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    font-size: var(--fnt-xs);
+
+    > hr {
+        flex: 1;
+    }
+
+    > span {
+        flex-shrink: 0;
+        opacity: 0.5;
+    }
+}
+
+/* 모달 인스트럭션 */
+
+.main-modal-instruction {
+    padding: 1.2rem 0.8rem;
+    border-radius: var(--rad-lg);
+    background-color: rgb(var(--clr-tint-100) / 0.05);
+
+    > p {
+        flex-flow: row wrap;
+        font-size: var(--fnt-sm);
+        text-align: center;
+        line-height: 1.4;
+        text-wrap: balance;
+    }
+
+    span:not(.instruction-emoji) {
+        opacity: 0.75;
+    }
+
+    .instruction-headline {
+        margin-inline: 0.2rem;
+        font-weight: 900;
+        opacity: 1;
+    }
+}
+
+/* 리뷰 종합 섹션 */
+
+#review-total-score {
+    display: flex;
+    gap: 1.2rem;
+    position: sticky;
+    inset-block: 0;
+    border-block-end: 1px solid rgb(var(--clr-text) / 0.15);
+    background-color: rgb(var(--clr-white));
+    z-index: 2;
+}
+
+.review-score-wrapper {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.6rem;
+    padding: 0.8rem;
+}
+
+.review-score-target {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    font-size: var(--fnt-sm);
+}
+
+.review-score-target-name {
+    font-weight: 900;
+}
+
+.review-score-everage {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    font-weight: 900;
+
+    > svg {
+        // 나중에 생각나면 색깔이랑 애니메이션 바꿔보기
+        color: rgb(var(--clr-text));
+    }
+}
+
+.review-score-total-count {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    padding: 0.2rem 0.6rem;
+    width: fit-content;
+    border: 1px solid rgb(var(--clr-text) / 0.15);
+    border-radius: var(--rad-sm);
+    font-size: var(--fnt-sm);
+}
+
+.review-ai-summary {
+    // 몰래 넣어놔야지 히히
+    flex: 1;
+    margin: 0.8rem;
+    padding: 0.8rem;
+    border-radius: var(--rad-lg);
+    background-color: rgb(var(--clr-info) / 0.05);
+    font-size: var(--fnt-sm);
+}
+
+.ai-summary-title {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    margin-block-end: 0.6rem;
+    width: fit-content;
+    background-image: linear-gradient(to right, blue, red, gold);
+    color: transparent;
+    font-weight: 900;
+    background-clip: text;
+
+    > .remix {
+        color: slateblue;
+    }
+}
+
+.ai-summary-content {
+    line-height: 1.4;
+    word-break: break-all;
+
+    &::before {
+        content: '“';
+    }
 
-    > div {
-        width: 100%;
-        height: 100%;
-        border-radius: var(--rad-full);
-        background-color: rgb(var(--clr-gray));
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    &::after {
+        content: '”';
     }
 }
 
diff --git a/src/assets/stylesheets/components/_mainModalCover.scss b/src/assets/stylesheets/components/_mainModalCover.scss
index a222938..85ec1cd 100644
--- a/src/assets/stylesheets/components/_mainModalCover.scss
+++ b/src/assets/stylesheets/components/_mainModalCover.scss
@@ -1,6 +1,7 @@
 /* _mainModalCover.scss */
 
 #main-modal-cover {
+    flex-shrink: 0;
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-end;
@@ -8,7 +9,6 @@
     height: 12rem;
     background-color: rgb(var(--clr-gray));
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23666666' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-    overflow: clip;
 
     &::before {
         position: absolute;
@@ -50,11 +50,36 @@
     color: rgb(var(--clr-text-on-tint));
 }
 
+.cover-signature-image-container {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-end;
+    width: 9rem;
+}
+
+#main-modal-signature-image {
+    position: relative;
+    margin-block-end: -3.2rem;
+    margin-inline: auto;
+    padding: 0.2rem;
+    width: 6.4rem;
+    height: 6.4rem;
+    border-radius: var(--rad-full);
+    background-color: rgb(var(--clr-background));
+
+    > div {
+        width: 100%;
+        height: 100%;
+        border-radius: var(--rad-full);
+        background-color: rgb(var(--clr-gray));
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    }
+}
+
 .cover-descriptions-container {
     display: flex;
     flex: 1;
     padding: 0.8rem;
-    margin-inline-start: 10rem;
     height: 100%;
     color: rgb(var(--clr-white));
     z-index: 2;
diff --git a/src/assets/stylesheets/components/_mallangsItem.scss b/src/assets/stylesheets/components/_mallangsItem.scss
index c1d4103..7c7135f 100644
--- a/src/assets/stylesheets/components/_mallangsItem.scss
+++ b/src/assets/stylesheets/components/_mallangsItem.scss
@@ -3,7 +3,7 @@
 .mallang-item {
     display: flex;
     align-items: center;
-    gap: 0.6rem;
+    gap: 0.8rem;
     padding: 0.8rem;
 }
 
@@ -28,48 +28,52 @@
         width: 100%;
         height: 100%;
 
-        &.not-exist {
+        &.non-exist {
             width: 2rem;
+            height: auto;
             rotate: -15deg;
+            opacity: 0.5;
         }
     }
 }
 
-.mallang-descriptions {
+.mallang-item-descriptions {
+    flex: 1;
     width: 100%;
+}
 
-    > dt {
-        display: flex;
-        align-items: center;
-        gap: 0.4rem;
-        margin-block-end: 0.2rem;
-        width: 100%;
-
-        > .mallang-main-indicator {
-            flex-shrink: 0;
-            padding: 0.2rem 0.4rem;
-            border-radius: var(--rad-full);
-            background-color: rgb(var(--clr-point));
-            font-size: var(--fnt-xs);
-            font-weight: 700;
-        }
+.mallang-item-name-container {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-block-end: 0.2rem;
+    width: 100%;
 
-        > .mallang-name {
-            font-weight: 900;
-            word-break: break-all;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
+    > .mallang-main-indicator {
+        flex-shrink: 0;
+        padding: 0.2rem 0.4rem;
+        border-radius: var(--rad-full);
+        background-color: rgb(var(--clr-point));
+        font-size: var(--fnt-xs);
+        font-weight: 700;
     }
 
-    > dd {
-        display: flex;
-        align-items: center;
-        gap: 0.2rem;
-        color: rgb(var(--clr-text) / 0.5);
-        font-size: var(--fnt-sm);
+    > .mallang-name {
+        flex: 1;
+        font-weight: 900;
+        word-break: break-all;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
     }
 }
 
+.mallang-item-summary {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    color: rgb(var(--clr-text) / 0.5);
+    font-size: var(--fnt-sm);
+}
+
 /* _mallangsItem.scss */
diff --git a/src/assets/stylesheets/components/_markerCategory.scss b/src/assets/stylesheets/components/_markerCategory.scss
new file mode 100644
index 0000000..538f9e4
--- /dev/null
+++ b/src/assets/stylesheets/components/_markerCategory.scss
@@ -0,0 +1,41 @@
+/* _markerCategory */
+
+#marker-category-container {
+    display: flex;
+    gap: 0.4rem;
+    position: fixed;
+    inset-block: 4rem;
+    inset-inline: 0;
+    margin-inline: auto;
+    width: fit-content;
+    height: fit-content;
+    color: rgb(var(--clr-tint-100));
+    font-size: var(--fnt-sm);
+    font-weight: 200;
+    z-index: 2;
+}
+
+.marker-category-item {
+    display: grid;
+    place-items: center;
+    height: 1.8rem;
+    padding-inline: 0.8rem;
+    border: 0.1rem solid rgb(var(--clr-white) / 0.9);
+    border-radius: var(--rad-full);
+    background-color: rgb(var(--clr-white) / 0.75);
+    backdrop-filter: blur(1.8rem);
+    box-shadow:
+        inset 0 0.6rem 1.2rem -0.4rem rgb(var(--clr-tint-0) / 0.1),
+        var(--shd-100);
+    transition: background-color 0.15s;
+    cursor: pointer;
+
+    &.on {
+        border-color: rgb(var(--clr-if-40));
+        background-color: rgb(var(--clr-theme));
+        color: rgb(var(--clr-text));
+        font-weight: 900;
+    }
+}
+
+/* _markerCategory */
diff --git a/src/assets/stylesheets/components/_modalFormInput.scss b/src/assets/stylesheets/components/_modalFormInput.scss
new file mode 100644
index 0000000..bcd6bf1
--- /dev/null
+++ b/src/assets/stylesheets/components/_modalFormInput.scss
@@ -0,0 +1,84 @@
+/* _modalFormInput.scss */
+
+#modal-form-input-container {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.4rem;
+    padding: 0.8rem;
+}
+
+.modal-form-file-uploader {
+}
+
+#modal-form-file {
+    display: none;
+
+    & + label {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        font-size: var(--fnt-sm);
+
+        > .modal-form-upload-button {
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            padding-inline: 0.6rem;
+            height: 1.6rem;
+            border-radius: var(--rad-sm);
+            background-color: rgb(var(--clr-text));
+            color: rgb(var(--clr-text-on-tint));
+            font-weight: 700;
+            transition: background-color 0.15s;
+            cursor: pointer;
+
+            &:hover {
+                background-color: rgb(var(--clr-theme));
+                color: rgb(var(--clr-text));
+            }
+        }
+
+        > span {
+            flex: 1;
+            display: block;
+            opacity: 0.5;
+            user-select: none;
+            pointer-events: none;
+        }
+    }
+}
+
+#modal-form-textarea {
+    min-height: 3.6rem;
+    resize: vertical;
+}
+
+.modal-form-controls {
+    display: flex;
+    align-items: center;
+
+    > p {
+        font-size: var(--fnt-sm);
+        opacity: 0.5;
+
+        &.overflow {
+            color: rgb(var(--clr-alert));
+            font-weight: 900;
+        }
+    }
+}
+
+#button-modal-form-submit {
+    --button-surface-color: var(--clr-theme); // 버튼 배경 컬러
+    --button-outline-color: 0 0 0 / 0; // 버튼 테두리 컬러
+    --button-text-color: var(--clr-text); // 버튼 텍스트 컬러
+    --button-hover-color: var(--clr-if-40);
+    --button-hover-text-color: var(--clr-text);
+
+    flex-shrink: 0;
+    justify-content: center;
+    margin-inline-start: auto;
+    width: 3.2rem;
+}
+
+/* _modalFormInput.scss */
diff --git a/src/assets/stylesheets/components/_nametag.scss b/src/assets/stylesheets/components/_nametag.scss
index 84664c5..193bdae 100644
--- a/src/assets/stylesheets/components/_nametag.scss
+++ b/src/assets/stylesheets/components/_nametag.scss
@@ -1,10 +1,11 @@
+/* _nameTag.scss */
+
 .nametag-content {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 0.4rem;
     position: relative;
-    width: 3.5rem;
-    height: 1.25rem;
 
     &-icon {
         display: flex;
@@ -13,16 +14,30 @@
         width: 1.2rem;
         height: 1.2rem;
         background: rgb(var(--clr-gray));
-        border: 0.05rem solid rgba(0, 0, 0, 0.15);
+        border: 1px solid rgb(var(--clr-text) / 0.15);
         border-radius: var(--rad-full);
         position: relative;
+        overflow: clip;
+
+        > .remix {
+            color: rgb(var(--clr-white) / 0.5);
+            margin-block-start: 0.4rem;
+        }
+    }
+
+    &-user-image {
+        position: absolute;
+        inset: 0;
     }
 
     &-username {
+        max-width: 8rem;
         color: rgb(var(--clr-text));
-        overflow: hidden;
         font-size: var(--fnt-md);
         font-weight: 700;
-        max-width: 6rem;
+        text-overflow: ellipsis;
+        overflow: hidden;
     }
 }
+
+/* _nameTag.scss */
diff --git a/src/assets/stylesheets/components/_notificationCard.scss b/src/assets/stylesheets/components/_notificationCard.scss
index 305dd76..5d0c9ea 100644
--- a/src/assets/stylesheets/components/_notificationCard.scss
+++ b/src/assets/stylesheets/components/_notificationCard.scss
@@ -3,7 +3,7 @@
 #notification-card {
     position: fixed;
     inset-block-start: 4rem;
-    inset-inline-end: 0.8rem;
+    inset-inline-end: 3.2rem;
     margin: auto;
     width: 16rem;
     height: fit-content;
@@ -105,7 +105,9 @@
     }
 
     &:not(.unread):hover {
-        background-color: rgb(var(--clr-text) / 0.1);
+        border-color: rgb(var(--clr-info) / 0.5);
+        background-color: rgb(var(--clr-tint-20) / 0.05);
+        outline: 0.2rem solid rgb(var(--clr-info) / 0.25);
     }
 
     &.unread {
@@ -144,7 +146,9 @@
 
     &:not(.unread):hover {
         > .notification-message-descriptions {
-            background-color: rgb(var(--clr-text) / 0.1);
+            border-color: rgb(var(--clr-info) / 0.5);
+            background-color: rgb(var(--clr-tint-20) / 0.05);
+            outline: 0.2rem solid rgb(var(--clr-info) / 0.25);
         }
     }
 
@@ -211,24 +215,30 @@
 }
 
 .notification-clear-button-wrapper {
+    display: flex;
+    align-items: center;
     position: relative;
     width: 100%;
+    transition: background-color 0.5s;
     overflow: clip;
 
     &::before {
         position: absolute;
-        inset: 0;
-        margin: auto;
+        top: var(--object-y);
+        left: var(--object-x);
         width: 4.8rem;
         height: 4.8rem;
         border-radius: var(--rad-full);
         background-color: rgb(var(--clr-if-100));
         opacity: 0;
-        transition: opacity 0.25s;
+        translate: -50% -50%;
+        transition: opacity 0.5s;
         content: '';
     }
 
     &:hover {
+        background-color: rgb(var(--clr-alert));
+
         &::before {
             opacity: 1;
         }
@@ -243,8 +253,26 @@
     padding-inline: 0.8rem;
     width: 100%;
     height: 2.4rem;
-    background-color: rgb(var(--clr-white) / 0.75);
+    background-color: rgb(var(--clr-white) / 0.5);
     backdrop-filter: blur(1.8rem);
+    color: rgb(var(--clr-alert));
+    font-size: var(--fnt-sm);
+    font-weight: 700;
+}
+
+#button-notification-card-close {
+    flex-shrink: 0;
+    display: grid;
+    place-items: center;
+    height: 2.4rem;
+    aspect-ratio: 1 / 1;
+    background-color: rgb(var(--clr-white) / 0.5);
+    backdrop-filter: blur(1.8rem);
+
+    &:hover {
+        background-color: rgb(var(--clr-alert));
+        color: rgb(var(--clr-white));
+    }
 }
 
 /* _notificationCard.scss */
diff --git a/src/assets/stylesheets/components/_replyItem.scss b/src/assets/stylesheets/components/_replyItem.scss
new file mode 100644
index 0000000..bf0f710
--- /dev/null
+++ b/src/assets/stylesheets/components/_replyItem.scss
@@ -0,0 +1,89 @@
+/* _replyItem.scss */
+
+.reply-item {
+    display: flex;
+    gap: 0.8rem;
+
+    &:has(input:checked) {
+        > .reply-item-body {
+            background-color: rgb(var(--clr-tint-20) / 0.05);
+            outline: 0.2rem solid rgb(var(--clr-info) / 0.25);
+        }
+    }
+
+    &:not(:has(input:checked)):hover {
+        > .reply-item-body {
+            background-color: rgb(var(--clr-tint-20) / 0.05);
+        }
+    }
+}
+
+.reply-item-checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    height: 2.8rem;
+}
+
+.reply-item-body {
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.4rem;
+    padding: 0.8rem;
+    border-radius: var(--rad-lg);
+}
+
+.reply-item-user {
+    display: flex;
+    align-items: center;
+}
+
+.reply-item-user-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-inline-start: auto;
+}
+
+.reply-content-wrapper {
+    display: flex;
+    gap: 0.4rem;
+}
+
+.reply-depth-indicator {
+    flex-shrink: 0;
+    width: 1.2rem;
+
+    &::before {
+        display: block;
+        margin-inline-start: auto;
+        width: 55%;
+        height: 0.5rem;
+        border-bottom-left-radius: var(--rad-sm);
+        border-block-end: 1px solid rgb(var(--clr-text) / 0.25);
+        border-inline-start: 1px solid rgb(var(--clr-text) / 0.25);
+        content: '';
+    }
+}
+
+.reply-content-container {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.4rem;
+}
+
+.reply-content-text {
+    line-height: 1.4;
+}
+
+.reply-item-datetime {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: var(--fnt-sm);
+    font-weight: 200;
+    opacity: 0.5rem;
+}
+
+/* _replyItem.scss */
diff --git a/src/assets/stylesheets/components/_reviewItem.scss b/src/assets/stylesheets/components/_reviewItem.scss
new file mode 100644
index 0000000..a3cbb08
--- /dev/null
+++ b/src/assets/stylesheets/components/_reviewItem.scss
@@ -0,0 +1,50 @@
+/* _reviewItem.scss */
+
+.review-item {
+    display: flex;
+    gap: 0.8rem;
+
+    &:has(input:checked) {
+        > .review-item-descriptions {
+            background-color: rgb(var(--clr-tint-20) / 0.05);
+            outline: 0.2rem solid rgb(var(--clr-info) / 0.25);
+        }
+    }
+
+    &:not(:has(input:checked)):hover {
+        > .review-item-descriptions {
+            background-color: rgb(var(--clr-tint-20) / 0.05);
+        }
+    }
+}
+
+.review-item-checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    height: 2.8rem;
+}
+
+.review-item-descriptions {
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.4rem;
+    padding: 0.8rem;
+    border-radius: var(--rad-lg);
+}
+
+.review-item-author {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.review-item-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--fnt-sm);
+}
+
+/* _reviewItem.scss */
diff --git a/src/assets/stylesheets/components/_starRating.scss b/src/assets/stylesheets/components/_starRating.scss
index 97927e7..7ab6a10 100644
--- a/src/assets/stylesheets/components/_starRating.scss
+++ b/src/assets/stylesheets/components/_starRating.scss
@@ -1,17 +1,52 @@
-.star-container {
+/* _starRating.scss */
+
+.star-point-wrapper {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 0.4rem;
 
-    &-rating {
-        display: flex;
-        align-items: center;
-        &-element {
-            cursor: pointer;
-        }
+    &.unclickable {
+        pointer-events: none;
     }
+}
+
+.star-point-container {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+}
+
+.star-point-item {
+    --star-size: 0.8rem;
+    --star-outline: var(--clr-gray);
+    --star-color: var(--clr-text) / 0.15;
 
-    &-score {
-        color: rgb(var(--clr-text));
+    flex-shrink: 0;
+    display: grid;
+    place-items: center;
+    width: var(--star-size);
+    height: var(--star-size);
+    color: rgb(var(--star-color));
+    cursor: pointer;
+
+    > svg {
+        width: 100%;
+        height: 100%;
+        stroke-width: 2px;
+        stroke: rgb(var(--star-outline));
+    }
+
+    &.on {
+        --star-outline: var(--clr-if-100);
+        --star-color: var(--clr-if-40);
     }
 }
+
+.star-point-score {
+    font-size: var(--fnt-sm);
+    font-weight: 700;
+    opacity: 0.5;
+}
+
+/* _starRating.scss */
diff --git a/src/assets/stylesheets/components/_totalSearch.scss b/src/assets/stylesheets/components/_totalSearch.scss
new file mode 100644
index 0000000..d13b2cc
--- /dev/null
+++ b/src/assets/stylesheets/components/_totalSearch.scss
@@ -0,0 +1,30 @@
+/* _totalSearch.scss */
+
+#total-search-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgb(var(--clr-background) / 0.75);
+    z-index: 50001;
+
+    > .inner-wrapper {
+        display: flex;
+        flex-flow: column nowrap;
+        position: absolute;
+        inset: 0;
+        margin-block: auto;
+        height: fit-content;
+    }
+}
+
+.total-search-input-container {
+    display: flex;
+    align-items: center;
+    height: 3.2rem;
+    border-radius: var(--rad-full);
+    background-color: rgb(var(--clr-white) / 0.75);
+    backdrop-filter: blur(1.8rem);
+    box-shadow: inset 0 -0.2rem 0.2rem rgb(var(--clr-text) / 0.1);
+    outline: 0.2rem solid rgb(var(--clr-if-0) / 0.5);
+}
+
+/* _totalSearch.scss */
diff --git a/src/assets/stylesheets/layouts/_commons.scss b/src/assets/stylesheets/layouts/_commons.scss
index 4a25822..e652555 100644
--- a/src/assets/stylesheets/layouts/_commons.scss
+++ b/src/assets/stylesheets/layouts/_commons.scss
@@ -8,6 +8,13 @@
     position: relative;
 }
 
+#full-page-wrapper {
+    // 전체 화면 위치 조정용 래퍼
+    position: fixed;
+    inset: 0;
+    background-color: rgb(var(--clr-background));
+}
+
 #contentView {
     // 컨텐츠 컨테이너
     flex: 1;
@@ -43,6 +50,37 @@
     fill: currentColor;
 }
 
+/* 로그인, 회원가입 공통 레이아웃 요소 */
+
+.service-container-wrapper {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.8rem;
+    position: absolute;
+    inset: 0;
+    margin-inline: auto;
+    width: min(100% - 1.6rem, 20rem);
+}
+
+.service-container {
+    border-radius: 0 0 var(--rad-xl) var(--rad-xl);
+    background-color: rgb(var(--clr-white));
+    box-shadow: 0 -2.4rem 4.8rem 0.8rem rgb(var(--clr-alert) / 0.25);
+    overflow: clip;
+}
+
+.service-logo-container {
+    height: 12rem;
+}
+
+.service-copyright {
+    margin-block-start: auto;
+    padding-block: 0.8rem;
+    font-size: var(--fnt-sm);
+    text-align: center;
+    opacity: 0.5;
+}
+
 .modal-outside {
     // 팝업 창의 외부 영역
     display: none;
diff --git a/src/assets/stylesheets/layouts/_footers.scss b/src/assets/stylesheets/layouts/_footers.scss
index 22564cb..9a1d0f7 100644
--- a/src/assets/stylesheets/layouts/_footers.scss
+++ b/src/assets/stylesheets/layouts/_footers.scss
@@ -33,6 +33,7 @@
     align-items: center;
     gap: 0.4rem;
     height: 1.8rem;
+    font-family: var(--ff-dingbat);
     font-size: var(--fnt-lg);
     font-weight: 700;
 }
@@ -61,6 +62,7 @@
 .footer-table-disclaimer {
     padding-block: 0.6rem;
     color: rgb(var(--clr-tint-40) / 0.5);
+    line-height: 1.4;
 
     &::before {
         content: '* ';
diff --git a/src/assets/stylesheets/layouts/_headers.scss b/src/assets/stylesheets/layouts/_headers.scss
index 7d744b9..f60274a 100644
--- a/src/assets/stylesheets/layouts/_headers.scss
+++ b/src/assets/stylesheets/layouts/_headers.scss
@@ -63,7 +63,7 @@
     margin-inline-start: auto;
 }
 
-#total-search {
+#total-search-toggler {
     display: flex;
     align-items: center;
     justify-content: space-between;
diff --git a/src/assets/stylesheets/pages/_loginPage.scss b/src/assets/stylesheets/pages/_loginPage.scss
index 07bb442..eb9a322 100644
--- a/src/assets/stylesheets/pages/_loginPage.scss
+++ b/src/assets/stylesheets/pages/_loginPage.scss
@@ -1,3 +1,10 @@
 /* _loginPage.scss */
 
+#form-login {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 1.2rem;
+    padding: 1.2rem 0.8rem;
+}
+
 /* _loginPage.scss */
diff --git a/src/assets/stylesheets/pages/_registerPage.scss b/src/assets/stylesheets/pages/_registerPage.scss
index 42084fd..47771ea 100644
--- a/src/assets/stylesheets/pages/_registerPage.scss
+++ b/src/assets/stylesheets/pages/_registerPage.scss
@@ -1,2 +1,123 @@
 /* _registerPage.scss */
+
+:where(#register-form-container) .service-logo-container {
+    height: 8rem;
+}
+
+#form-register {
+    --current-register-screen: 1;
+
+    overflow: hidden;
+}
+
+.current-register-state {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    gap: 0.2rem;
+    padding-inline: 0.8rem;
+}
+
+.register-state-item {
+    flex: 1;
+    font-size: var(--fnt-sm);
+
+    &.current {
+        & ~ * {
+            > .step-indicator {
+                background-color: rgb(var(--clr-gray) / 0.25);
+                box-shadow: none;
+                outline: 0;
+            }
+        }
+    }
+}
+
+.step-name {
+    margin-block-end: 0.4rem;
+    text-align: center;
+}
+
+.step-indicator {
+    width: 100%;
+    height: 0.4rem;
+    border: 1px solid rgb(var(--clr-text) / 0.15);
+    border-radius: var(--rad-full);
+    background-color: rgb(var(--clr-theme));
+    box-shadow: inset 0 0 0.1rem 0.1rem rgb(var(--clr-if-100) / 0.25);
+    outline: 0.2rem solid rgb(var(--clr-theme) / 0.25);
+    transition:
+        background-color 0.15s,
+        box-shadow 0.15s;
+}
+
+#register-state-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    margin-inline-start: calc((var(--current-register-screen) * -100%) + 100%);
+    width: calc(100% * var(--total-register-steps));
+    transition: margin-inline-start 0.3s;
+
+    > div {
+        padding: 1.2rem 0.8rem;
+        width: 100%;
+    }
+}
+
+.register-state-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#terms-of-service {
+    // 이용약관 전용 스타일
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.5em;
+    margin-inline: auto;
+    padding: 0.4rem 0.8rem;
+    max-height: 16rem;
+    border: 1px solid rgb(var(--clr-text) / 0.15);
+    border-radius: var(--rad-sm);
+    font-size: var(--fnt-sm);
+    line-height: 1.4;
+    overflow-y: auto;
+    user-select: text;
+
+    h2 {
+        font-size: var(--fnt-title-md);
+        font-weight: 900;
+    }
+
+    h3 {
+        font-size: var(--fnt-title-sm);
+        font-weight: 700;
+    }
+
+    ol {
+        counter-set: numbs;
+
+        li {
+            counter-increment: numbs;
+        }
+
+        &.circle-numbs {
+            li {
+                &::before {
+                    content: counter(numbs) '. ';
+                }
+            }
+        }
+
+        &.big-numbs {
+            li {
+                &::before {
+                    content: '(' counter(numbs) ') ';
+                }
+            }
+        }
+    }
+}
+
 /* _registerPage.scss */
diff --git a/src/assets/stylesheets/style.css b/src/assets/stylesheets/style.css
index 02131a7..7a66338 100644
--- a/src/assets/stylesheets/style.css
+++ b/src/assets/stylesheets/style.css
@@ -260,6 +260,13 @@ summary {
   font-style: normal;
   font-display: swap;
 }
+@font-face {
+  font-family: "Ownglyph_PDH";
+  src: local("온글잎 박다현체"), url("/fonts/Ownglyph-PDH.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
 :root {
   font-family: "SUIT", sans-serif;
   font-size: clamp(12px, 5vmin, 20px);
@@ -282,6 +289,7 @@ summary {
   --ff-serif-kr: "MaruBuri", serif;
   --ff-serif-en: "";
   --ff-cursive: "";
+  --ff-dingbat: "Ownglyph_PDH", sans-serif;
   --rad-full: 25rem;
   --rad-xl: 0.8rem;
   --rad-lg: 0.4rem;
@@ -313,6 +321,7 @@ body {
   font-size: var(--fnt-md);
   word-break: keep-all;
   transition: background-color 0.25s;
+  cursor: url("/images/cursor.png") 8 8, auto;
   overflow: overlay;
 }
 body.prevent-scroll {
@@ -450,6 +459,29 @@ a, a:visited {
     rotate: var(--burger-self-rotate) 0 0;
   }
 }
+@keyframes pop-up-message {
+  from {
+    scale: 0;
+  }
+  45% {
+    scale: 1.2;
+  }
+  55% {
+    scale: 0.75;
+  }
+  70% {
+    scale: 1.1;
+  }
+  90% {
+    scale: 0.9;
+  }
+  95% {
+    scale: 1.05;
+  }
+  to {
+    scale: 1;
+  }
+}
 /* _keyframes.scss */
 /* _utils.scss */
 @property --conic-range {
@@ -674,6 +706,12 @@ a, a:visited {
   position: relative;
 }
 
+#full-page-wrapper {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(var(--clr-background));
+}
+
 #contentView {
   flex: 1;
   min-height: 100vh;
@@ -704,6 +742,36 @@ a, a:visited {
   fill: currentColor;
 }
 
+/* 로그인, 회원가입 공통 레이아웃 요소 */
+.service-container-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.8rem;
+  position: absolute;
+  inset: 0;
+  margin-inline: auto;
+  width: min(100% - 1.6rem, 20rem);
+}
+
+.service-container {
+  border-radius: 0 0 var(--rad-xl) var(--rad-xl);
+  background-color: rgb(var(--clr-white));
+  box-shadow: 0 -2.4rem 4.8rem 0.8rem rgb(var(--clr-alert)/0.25);
+  overflow: clip;
+}
+
+.service-logo-container {
+  height: 12rem;
+}
+
+.service-copyright {
+  margin-block-start: auto;
+  padding-block: 0.8rem;
+  font-size: var(--fnt-sm);
+  text-align: center;
+  opacity: 0.5;
+}
+
 .modal-outside {
   display: none;
   position: fixed;
@@ -771,7 +839,7 @@ a, a:visited {
   margin-inline-start: auto;
 }
 
-#total-search {
+#total-search-toggler {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -934,6 +1002,7 @@ a, a:visited {
   align-items: center;
   gap: 0.4rem;
   height: 1.8rem;
+  font-family: var(--ff-dingbat);
   font-size: var(--fnt-lg);
   font-weight: 700;
 }
@@ -962,6 +1031,7 @@ a, a:visited {
 .footer-table-disclaimer {
   padding-block: 0.6rem;
   color: rgb(var(--clr-tint-40)/0.5);
+  line-height: 1.4;
 }
 .footer-table-disclaimer::before {
   content: "* ";
@@ -995,8 +1065,113 @@ a, a:visited {
 @container main-container (max-width: 640px) {}
 /* _mainPage.scss */
 /* _registerPage.scss */
+:where(#register-form-container) .service-logo-container {
+  height: 8rem;
+}
+
+#form-register {
+  --current-register-screen: 1;
+  overflow: hidden;
+}
+
+.current-register-state {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 0.2rem;
+  padding-inline: 0.8rem;
+}
+
+.register-state-item {
+  flex: 1;
+  font-size: var(--fnt-sm);
+}
+.register-state-item.current ~ * > .step-indicator {
+  background-color: rgb(var(--clr-gray)/0.25);
+  box-shadow: none;
+  outline: 0;
+}
+
+.step-name {
+  margin-block-end: 0.4rem;
+  text-align: center;
+}
+
+.step-indicator {
+  width: 100%;
+  height: 0.4rem;
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-theme));
+  box-shadow: inset 0 0 0.1rem 0.1rem rgb(var(--clr-if-100)/0.25);
+  outline: 0.2rem solid rgb(var(--clr-theme)/0.25);
+  transition: background-color 0.15s, box-shadow 0.15s;
+}
+
+#register-state-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  margin-inline-start: calc(var(--current-register-screen) * -100% + 100%);
+  width: calc(100% * var(--total-register-steps));
+  transition: margin-inline-start 0.3s;
+}
+#register-state-wrapper > div {
+  padding: 1.2rem 0.8rem;
+  width: 100%;
+}
+
+.register-state-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#terms-of-service {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5em;
+  margin-inline: auto;
+  padding: 0.4rem 0.8rem;
+  max-height: 16rem;
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  border-radius: var(--rad-sm);
+  font-size: var(--fnt-sm);
+  line-height: 1.4;
+  overflow-y: auto;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
+#terms-of-service h2 {
+  font-size: var(--fnt-title-md);
+  font-weight: 900;
+}
+#terms-of-service h3 {
+  font-size: var(--fnt-title-sm);
+  font-weight: 700;
+}
+#terms-of-service ol {
+  counter-set: numbs;
+}
+#terms-of-service ol li {
+  counter-increment: numbs;
+}
+#terms-of-service ol.circle-numbs li::before {
+  content: counter(numbs) ". ";
+}
+#terms-of-service ol.big-numbs li::before {
+  content: "(" counter(numbs) ") ";
+}
+
 /* _registerPage.scss */
 /* _loginPage.scss */
+#form-login {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1.2rem;
+  padding: 1.2rem 0.8rem;
+}
+
 /* _loginPage.scss */
 /* _myPage.scss */
 /* _myPage.scss */
@@ -1223,28 +1398,28 @@ button {
 input:not(.exclude)[type=text], input:not(.exclude)[type=number], input:not(.exclude)[type=email], input:not(.exclude)[type=tel], input:not(.exclude)[type=email], input:not(.exclude)[type=url], input:not(.exclude)[type=password], input:not(.exclude)[type=datetime-local], input:not(.exclude)[type=date], input:not(.exclude)[type=month], input:not(.exclude)[type=week], input:not(.exclude)[type=time], input:not(.exclude)[type=search] {
   padding-inline: 0.4rem;
   height: 1.6rem;
-  border: 1px solid rgb(var(--clr-theme)/0.25);
-  border-radius: 0.2rem;
-  background-color: rgb(var(--clr-min)/0.25);
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  border-radius: var(--rad-sm);
+  background-color: rgb(var(--clr-white)/0.25);
   -webkit-backdrop-filter: blur(0.4rem);
           backdrop-filter: blur(0.4rem);
   color: rgb(var(--clr-text));
-  transition: 0.25s;
 }
 input:not(.exclude)[type=text]:hover, input:not(.exclude)[type=number]:hover, input:not(.exclude)[type=email]:hover, input:not(.exclude)[type=tel]:hover, input:not(.exclude)[type=email]:hover, input:not(.exclude)[type=url]:hover, input:not(.exclude)[type=password]:hover, input:not(.exclude)[type=datetime-local]:hover, input:not(.exclude)[type=date]:hover, input:not(.exclude)[type=month]:hover, input:not(.exclude)[type=week]:hover, input:not(.exclude)[type=time]:hover, input:not(.exclude)[type=search]:hover {
-  border-color: rgb(var(--clr-theme)/0.6);
-  background-color: rgb(var(--clr-min)/0.5);
+  border-color: rgb(var(--clr-text)/0.5);
+  background-color: rgb(var(--clr-white)/0.5);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
 }
 input:not(.exclude)[type=text]:focus, input:not(.exclude)[type=number]:focus, input:not(.exclude)[type=email]:focus, input:not(.exclude)[type=tel]:focus, input:not(.exclude)[type=email]:focus, input:not(.exclude)[type=url]:focus, input:not(.exclude)[type=password]:focus, input:not(.exclude)[type=datetime-local]:focus, input:not(.exclude)[type=date]:focus, input:not(.exclude)[type=month]:focus, input:not(.exclude)[type=week]:focus, input:not(.exclude)[type=time]:focus, input:not(.exclude)[type=search]:focus {
-  border-color: rgb(var(--clr-theme)/0.75);
-  background-color: rgb(var(--clr-min));
-  outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25);
+  border-color: rgb(var(--clr-text)/0.75);
+  background-color: rgb(var(--clr-white));
+  outline: 0.2rem solid rgb(var(--clr-info)/0.5);
 }
-input:not(.exclude)[type=text].need-recognize:valid, input:not(.exclude)[type=number].need-recognize:valid, input:not(.exclude)[type=email].need-recognize:valid, input:not(.exclude)[type=tel].need-recognize:valid, input:not(.exclude)[type=email].need-recognize:valid, input:not(.exclude)[type=url].need-recognize:valid, input:not(.exclude)[type=password].need-recognize:valid, input:not(.exclude)[type=datetime-local].need-recognize:valid, input:not(.exclude)[type=date].need-recognize:valid, input:not(.exclude)[type=month].need-recognize:valid, input:not(.exclude)[type=week].need-recognize:valid, input:not(.exclude)[type=time].need-recognize:valid, input:not(.exclude)[type=search].need-recognize:valid {
+input:not(.exclude)[type=text].need-recognized:user-valid, input:not(.exclude)[type=number].need-recognized:user-valid, input:not(.exclude)[type=email].need-recognized:user-valid, input:not(.exclude)[type=tel].need-recognized:user-valid, input:not(.exclude)[type=email].need-recognized:user-valid, input:not(.exclude)[type=url].need-recognized:user-valid, input:not(.exclude)[type=password].need-recognized:user-valid, input:not(.exclude)[type=datetime-local].need-recognized:user-valid, input:not(.exclude)[type=date].need-recognized:user-valid, input:not(.exclude)[type=month].need-recognized:user-valid, input:not(.exclude)[type=week].need-recognized:user-valid, input:not(.exclude)[type=time].need-recognized:user-valid, input:not(.exclude)[type=search].need-recognized:user-valid {
   border-color: rgb(var(--clr-clear)/0.75);
-  background-color: rgb(var(--clr-clear)/0.5);
+  outline: 0.2rem solid rgb(var(--clr-clear)/0.25);
 }
-input:not(.exclude)[type=text]:invalid, input:not(.exclude)[type=number]:invalid, input:not(.exclude)[type=email]:invalid, input:not(.exclude)[type=tel]:invalid, input:not(.exclude)[type=email]:invalid, input:not(.exclude)[type=url]:invalid, input:not(.exclude)[type=password]:invalid, input:not(.exclude)[type=datetime-local]:invalid, input:not(.exclude)[type=date]:invalid, input:not(.exclude)[type=month]:invalid, input:not(.exclude)[type=week]:invalid, input:not(.exclude)[type=time]:invalid, input:not(.exclude)[type=search]:invalid {
+input:not(.exclude)[type=text].need-recognized:user-invalid, input:not(.exclude)[type=number].need-recognized:user-invalid, input:not(.exclude)[type=email].need-recognized:user-invalid, input:not(.exclude)[type=tel].need-recognized:user-invalid, input:not(.exclude)[type=email].need-recognized:user-invalid, input:not(.exclude)[type=url].need-recognized:user-invalid, input:not(.exclude)[type=password].need-recognized:user-invalid, input:not(.exclude)[type=datetime-local].need-recognized:user-invalid, input:not(.exclude)[type=date].need-recognized:user-invalid, input:not(.exclude)[type=month].need-recognized:user-invalid, input:not(.exclude)[type=week].need-recognized:user-invalid, input:not(.exclude)[type=time].need-recognized:user-invalid, input:not(.exclude)[type=search].need-recognized:user-invalid {
   border-color: rgb(var(--clr-alert));
   outline: 0.2rem solid rgb(var(--clr-alert)/0.25);
 }
@@ -1259,29 +1434,29 @@ input:not(.exclude)[type=text]:disabled, input:not(.exclude)[type=number]:disabl
 textarea:not(.exclude) {
   padding-inline: 0.4rem;
   height: 1.6rem;
-  border: 1px solid rgb(var(--clr-theme)/0.25);
-  border-radius: 0.2rem;
-  background-color: rgb(var(--clr-min)/0.25);
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  border-radius: var(--rad-sm);
+  background-color: rgb(var(--clr-white)/0.25);
   -webkit-backdrop-filter: blur(0.4rem);
           backdrop-filter: blur(0.4rem);
   color: rgb(var(--clr-text));
-  transition: 0.25s;
   padding-block: 0.4rem;
 }
 textarea:not(.exclude):hover {
-  border-color: rgb(var(--clr-theme)/0.6);
-  background-color: rgb(var(--clr-min)/0.5);
+  border-color: rgb(var(--clr-text)/0.5);
+  background-color: rgb(var(--clr-white)/0.5);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
 }
 textarea:not(.exclude):focus {
-  border-color: rgb(var(--clr-theme)/0.75);
-  background-color: rgb(var(--clr-min));
-  outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25);
+  border-color: rgb(var(--clr-text)/0.75);
+  background-color: rgb(var(--clr-white));
+  outline: 0.2rem solid rgb(var(--clr-info)/0.5);
 }
-textarea:not(.exclude).need-recognize:valid {
+textarea:not(.exclude).need-recognized:user-valid {
   border-color: rgb(var(--clr-clear)/0.75);
-  background-color: rgb(var(--clr-clear)/0.5);
+  outline: 0.2rem solid rgb(var(--clr-clear)/0.25);
 }
-textarea:not(.exclude):invalid {
+textarea:not(.exclude).need-recognized:user-invalid {
   border-color: rgb(var(--clr-alert));
   outline: 0.2rem solid rgb(var(--clr-alert)/0.25);
 }
@@ -1296,13 +1471,12 @@ textarea:not(.exclude):disabled {
 select:not(.exclude) {
   padding-inline: 0.4rem;
   height: 1.6rem;
-  border: 1px solid rgb(var(--clr-theme)/0.25);
-  border-radius: 0.2rem;
-  background-color: rgb(var(--clr-min)/0.25);
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  border-radius: var(--rad-sm);
+  background-color: rgb(var(--clr-white)/0.25);
   -webkit-backdrop-filter: blur(0.4rem);
           backdrop-filter: blur(0.4rem);
   color: rgb(var(--clr-text));
-  transition: 0.25s;
   padding-inline-end: 1.6rem;
   min-width: 3.6rem;
   background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray"%3E%3Cpath d="M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"%3E%3C/path%3E%3C/svg%3E');
@@ -1314,19 +1488,20 @@ select:not(.exclude) {
           appearance: none;
 }
 select:not(.exclude):hover {
-  border-color: rgb(var(--clr-theme)/0.6);
-  background-color: rgb(var(--clr-min)/0.5);
+  border-color: rgb(var(--clr-text)/0.5);
+  background-color: rgb(var(--clr-white)/0.5);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
 }
 select:not(.exclude):focus {
-  border-color: rgb(var(--clr-theme)/0.75);
-  background-color: rgb(var(--clr-min));
-  outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25);
+  border-color: rgb(var(--clr-text)/0.75);
+  background-color: rgb(var(--clr-white));
+  outline: 0.2rem solid rgb(var(--clr-info)/0.5);
 }
-select:not(.exclude).need-recognize:valid {
+select:not(.exclude).need-recognized:user-valid {
   border-color: rgb(var(--clr-clear)/0.75);
-  background-color: rgb(var(--clr-clear)/0.5);
+  outline: 0.2rem solid rgb(var(--clr-clear)/0.25);
 }
-select:not(.exclude):invalid {
+select:not(.exclude).need-recognized:user-invalid {
   border-color: rgb(var(--clr-alert));
   outline: 0.2rem solid rgb(var(--clr-alert)/0.25);
 }
@@ -1363,46 +1538,50 @@ input[type=radio] + label {
 input[type=radio] + label > .toggles-indicator {
   display: grid;
   place-items: center;
-  width: 1rem;
-  height: 1rem;
-  border: 1px solid rgb(var(--clr-theme)/0.25);
-  background-color: rgb(var(--clr-min)/0.25);
+  width: 0.8rem;
+  height: 0.8rem;
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  background-color: rgb(var(--clr-white)/0.25);
   -webkit-backdrop-filter: blur(0.4rem);
           backdrop-filter: blur(0.4rem);
   color: rgb(var(--clr-text));
 }
 input[type=radio] + label > .toggles-label {
-  font-weight: 200;
-  opacity: 0.75;
+  font-size: var(--fnt-sm);
+  opacity: 0.5;
 }
 input[type=radio]:checked + label > .toggles-indicator {
-  border: 1px solid rgb(var(--clr-theme));
-  background-color: rgb(var(--clr-tint-0)/0.15);
-  color: rgb(var(--clr-tint-100));
+  border: 1px solid rgb(var(--clr-text)/0.5);
+  background-color: rgb(var(--clr-text));
+  color: rgb(var(--clr-text-on-tint));
 }
 input[type=radio]:checked + label > .toggles-label {
-  font-weight: 900;
+  font-weight: 700;
+  opacity: 1;
 }
 input[type=radio] + label:hover > .toggles-indicator {
-  border-color: rgb(var(--clr-theme)/0.6);
-  background-color: rgb(var(--clr-min)/0.5);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
+}
+input[type=radio]:not(:checked) + label:hover > .toggles-indicator {
+  border-color: rgb(var(--clr-text)/0.5);
+  background-color: rgb(var(--clr-background)/0.25);
 }
 input[type=radio]:focus + label > .toggles-indicator {
-  border-color: rgb(var(--clr-theme)/0.75);
-  background-color: rgb(var(--clr-min));
-  outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25);
+  border-color: rgb(var(--clr-text)/0.75);
+  background-color: rgb(var(--clr-background));
+  outline: 0.2rem solid rgb(var(--clr-info)/0.5);
 }
 input[type=radio]:disabled + label {
-  color: rgb(var(--clr-surface-60));
+  color: rgb(var(--clr-text-disable));
   text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
   cursor: no-drop;
 }
 input[type=radio]:disabled + label > .toggles-indicator {
-  border-color: rgb(var(--clr-surface-60));
-  background-color: rgb(var(--clr-surface-0));
+  border-color: rgb(var(--clr-black)/0.15);
+  background-color: rgb(var(--clr-gray));
 }
 input[type=radio] + label > .toggles-indicator {
-  border-radius: 25rem;
+  border-radius: var(--rad-full);
 }
 input[type=radio] + label > .toggles-indicator::before {
   display: block;
@@ -1443,50 +1622,52 @@ input[type=checkbox]:not([data-checkbox-type=toggle]) + label {
 input[type=checkbox]:not([data-checkbox-type=toggle]) + label > .toggles-indicator {
   display: grid;
   place-items: center;
-  width: 1rem;
-  height: 1rem;
-  border: 1px solid rgb(var(--clr-theme)/0.25);
-  background-color: rgb(var(--clr-min)/0.25);
+  width: 0.8rem;
+  height: 0.8rem;
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  background-color: rgb(var(--clr-white)/0.25);
   -webkit-backdrop-filter: blur(0.4rem);
           backdrop-filter: blur(0.4rem);
   color: rgb(var(--clr-text));
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]) + label > .toggles-label {
-  font-weight: 200;
-  opacity: 0.75;
+  font-size: var(--fnt-sm);
+  opacity: 0.5;
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]):checked + label > .toggles-indicator {
-  border: 1px solid rgb(var(--clr-theme));
-  background-color: rgb(var(--clr-tint-0)/0.15);
-  color: rgb(var(--clr-tint-100));
+  border: 1px solid rgb(var(--clr-text)/0.5);
+  background-color: rgb(var(--clr-text));
+  color: rgb(var(--clr-text-on-tint));
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]):checked + label > .toggles-label {
-  font-weight: 900;
+  font-weight: 700;
+  opacity: 1;
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]) + label:hover > .toggles-indicator {
-  border-color: rgb(var(--clr-theme)/0.6);
-  background-color: rgb(var(--clr-min)/0.5);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
+}
+input[type=checkbox]:not([data-checkbox-type=toggle]):not(:checked) + label:hover > .toggles-indicator {
+  border-color: rgb(var(--clr-text)/0.5);
+  background-color: rgb(var(--clr-background)/0.25);
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]):focus + label > .toggles-indicator {
-  border-color: rgb(var(--clr-theme)/0.75);
-  background-color: rgb(var(--clr-min));
-  outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25);
+  border-color: rgb(var(--clr-text)/0.75);
+  background-color: rgb(var(--clr-background));
+  outline: 0.2rem solid rgb(var(--clr-info)/0.5);
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]):disabled + label {
-  color: rgb(var(--clr-surface-60));
+  color: rgb(var(--clr-text-disable));
   text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
   cursor: no-drop;
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]):disabled + label > .toggles-indicator {
-  border-color: rgb(var(--clr-surface-60));
-  background-color: rgb(var(--clr-surface-0));
+  border-color: rgb(var(--clr-black)/0.15);
+  background-color: rgb(var(--clr-gray));
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]) + label > .toggles-indicator {
-  border-radius: 0.2rem;
+  border-radius: var(--rad-sm);
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]) + label > .toggles-indicator .remix {
-  width: 0.8rem;
-  height: 0.8rem;
   opacity: 0;
 }
 input[type=checkbox]:not([data-checkbox-type=toggle]):checked + label > .toggles-indicator .remix {
@@ -1738,67 +1919,249 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
 }
 
 /* _emptyList.scss */
-/* _notificationCard.scss */
-#notification-card {
-  position: fixed;
-  inset-block-start: 4rem;
-  inset-inline-end: 0.8rem;
-  margin: auto;
-  width: 16rem;
-  height: -moz-fit-content;
-  height: fit-content;
-  border-radius: var(--rad-lg);
-  background-color: rgb(var(--clr-white));
-  box-shadow: var(--shd-100);
-  translate: 0 -8rem;
-  opacity: 0;
-  transition: translate 0.25s, opacity 0.15s;
-  overflow: clip;
-  z-index: 500;
-}
-#notification-card.on {
-  translate: 0;
-  opacity: 1;
-}
-
-.notification-tab-container {
+/* _dropDownSelector.scss */
+.dropdown-container {
   position: relative;
-  display: flex;
-  height: 2.4rem;
-}
-.notification-tab-container::before {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
-  margin-inline: 0 auto;
-  width: 50%;
-  height: 0.2rem;
-  background-color: rgb(var(--clr-theme));
-  transition: translate 0.25s;
-  content: "";
-}
-.notification-tab-container:has(.messages.on)::before {
-  translate: 100% 0;
+  width: -moz-fit-content;
+  width: fit-content;
+  font-size: var(--fnt-sm);
 }
 
-.notification-tab-button {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding-inline: 0.8rem;
-  font-weight: 200;
-}
-.notification-tab-button > .button-label {
+.dropdown-selected-label {
   display: flex;
   align-items: center;
-  gap: 0.2rem;
-  margin-inline: auto;
+  height: 1.6rem;
+  border: 1px solid rgb(var(--clr-white));
+  border-radius: var(--rad-sm);
+  background-color: rgb(var(--clr-white)/0.75);
+  -webkit-backdrop-filter: blur(1.8rem);
+          backdrop-filter: blur(1.8rem);
+  box-shadow: var(--shd-100);
+  font-weight: 700;
+  cursor: pointer;
 }
-.notification-tab-button > .button-label > .button-label-text {
-  opacity: 0.5;
+.dropdown-selected-label > span {
+  width: 1px;
+  height: 100%;
+  background-color: rgb(var(--clr-text)/0.15);
 }
-.notification-tab-button > .button-label > .button-label-value {
-  font-size: var(--fnt-sm);
+.dropdown-selected-label:hover {
+  outline: 0.2rem solid rgb(var(--clr-info)/0.5);
+}
+.dropdown-selected-label.on {
+  outline: 0.2rem solid rgb(var(--clr-info));
+}
+.dropdown-selected-label.on > .dropdown-arrow-button {
+  background-color: rgb(var(--clr-black)/0.1);
+}
+.dropdown-selected-label.on > .dropdown-arrow-button > .remix {
+  color: rgb(var(--clr-white));
+  rotate: -180deg;
+}
+
+.selected-label-text {
+  display: flex;
+  padding-inline: 0.4rem;
+  min-width: 3.2rem;
+}
+
+.dropdown-arrow-button {
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  height: 100%;
+  aspect-ratio: 1/1;
+}
+.dropdown-arrow-button > .remix {
+  transition: rotate 0.15s;
+}
+
+.dropdown-menu {
+  position: absolute;
+  inset-block-start: calc(100% + 0.4rem);
+  inset-inline: 0;
+  max-height: 6rem;
+  border-radius: var(--rad-sm);
+  background-color: rgb(var(--clr-white));
+  box-shadow: var(--shd-100);
+  opacity: 1;
+  overflow: clip;
+  overflow-y: auto;
+}
+@starting-style {
+  .dropdown-menu {
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+}
+
+.dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: 0.4rem;
+  height: 1.6rem;
+  font-weight: 200;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.dropdown-menu-item:hover {
+  background-color: rgb(var(--clr-info)/0.15);
+}
+.dropdown-menu-item.selected {
+  background-color: rgb(var(--clr-info));
+  color: rgb(var(--clr-text-on-tint));
+  font-weight: 700;
+}
+
+/* _dropDownSelector.scss */
+/* _starRating.scss */
+.star-point-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.star-point-wrapper.unclickable {
+  pointer-events: none;
+}
+
+.star-point-container {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+}
+
+.star-point-item {
+  --star-size: 0.8rem;
+  --star-outline: var(--clr-gray);
+  --star-color: var(--clr-text) / 0.15;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  width: var(--star-size);
+  height: var(--star-size);
+  color: rgb(var(--star-color));
+  cursor: pointer;
+}
+.star-point-item > svg {
+  width: 100%;
+  height: 100%;
+  stroke-width: 2px;
+  stroke: rgb(var(--star-outline));
+}
+.star-point-item.on {
+  --star-outline: var(--clr-if-100);
+  --star-color: var(--clr-if-40);
+}
+
+.star-point-score {
+  font-size: var(--fnt-sm);
+  font-weight: 700;
+  opacity: 0.5;
+}
+
+/* _starRating.scss */
+/* _nameTag.scss */
+.nametag-content {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  position: relative;
+}
+.nametag-content-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1.2rem;
+  height: 1.2rem;
+  background: rgb(var(--clr-gray));
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  border-radius: var(--rad-full);
+  position: relative;
+  overflow: clip;
+}
+.nametag-content-icon > .remix {
+  color: rgb(var(--clr-white)/0.5);
+  margin-block-start: 0.4rem;
+}
+.nametag-content-user-image {
+  position: absolute;
+  inset: 0;
+}
+.nametag-content-username {
+  max-width: 8rem;
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-md);
+  font-weight: 700;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+/* _nameTag.scss */
+/* _notificationCard.scss */
+#notification-card {
+  position: fixed;
+  inset-block-start: 4rem;
+  inset-inline-end: 3.2rem;
+  margin: auto;
+  width: 16rem;
+  height: -moz-fit-content;
+  height: fit-content;
+  border-radius: var(--rad-lg);
+  background-color: rgb(var(--clr-white));
+  box-shadow: var(--shd-100);
+  translate: 0 -8rem;
+  opacity: 0;
+  transition: translate 0.25s, opacity 0.15s;
+  overflow: clip;
+  z-index: 500;
+}
+#notification-card.on {
+  translate: 0;
+  opacity: 1;
+}
+
+.notification-tab-container {
+  position: relative;
+  display: flex;
+  height: 2.4rem;
+}
+.notification-tab-container::before {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  margin-inline: 0 auto;
+  width: 50%;
+  height: 0.2rem;
+  background-color: rgb(var(--clr-theme));
+  transition: translate 0.25s;
+  content: "";
+}
+.notification-tab-container:has(.messages.on)::before {
+  translate: 100% 0;
+}
+
+.notification-tab-button {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding-inline: 0.8rem;
+  font-weight: 200;
+}
+.notification-tab-button > .button-label {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  margin-inline: auto;
+}
+.notification-tab-button > .button-label > .button-label-text {
+  opacity: 0.5;
+}
+.notification-tab-button > .button-label > .button-label-value {
+  font-size: var(--fnt-sm);
 }
 .notification-tab-button.on > .button-label > .button-label-text {
   font-weight: 700;
@@ -1826,7 +2189,9 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   opacity: 0.5;
 }
 .notification-reply-item:not(.unread):hover {
-  background-color: rgb(var(--clr-text)/0.1);
+  border-color: rgb(var(--clr-info)/0.5);
+  background-color: rgb(var(--clr-tint-20)/0.05);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
 }
 .notification-reply-item.unread {
   background-color: rgb(var(--clr-theme));
@@ -1858,7 +2223,9 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   gap: 0.4rem;
 }
 .notification-message-item:not(.unread):hover > .notification-message-descriptions {
-  background-color: rgb(var(--clr-text)/0.1);
+  border-color: rgb(var(--clr-info)/0.5);
+  background-color: rgb(var(--clr-tint-20)/0.05);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
 }
 .notification-message-item.unread > .notification-message-descriptions {
   background-color: rgb(var(--clr-theme));
@@ -1920,22 +2287,29 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
 }
 
 .notification-clear-button-wrapper {
+  display: flex;
+  align-items: center;
   position: relative;
   width: 100%;
+  transition: background-color 0.5s;
   overflow: clip;
 }
 .notification-clear-button-wrapper::before {
   position: absolute;
-  inset: 0;
-  margin: auto;
+  top: var(--object-y);
+  left: var(--object-x);
   width: 4.8rem;
   height: 4.8rem;
   border-radius: var(--rad-full);
   background-color: rgb(var(--clr-if-100));
   opacity: 0;
-  transition: opacity 0.25s;
+  translate: -50% -50%;
+  transition: opacity 0.5s;
   content: "";
 }
+.notification-clear-button-wrapper:hover {
+  background-color: rgb(var(--clr-alert));
+}
 .notification-clear-button-wrapper:hover::before {
   opacity: 1;
 }
@@ -1948,10 +2322,28 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   padding-inline: 0.8rem;
   width: 100%;
   height: 2.4rem;
-  background-color: rgb(var(--clr-white)/0.75);
+  background-color: rgb(var(--clr-white)/0.5);
+  -webkit-backdrop-filter: blur(1.8rem);
+          backdrop-filter: blur(1.8rem);
+  color: rgb(var(--clr-alert));
+  font-size: var(--fnt-sm);
+  font-weight: 700;
+}
+
+#button-notification-card-close {
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  height: 2.4rem;
+  aspect-ratio: 1/1;
+  background-color: rgb(var(--clr-white)/0.5);
   -webkit-backdrop-filter: blur(1.8rem);
           backdrop-filter: blur(1.8rem);
 }
+#button-notification-card-close:hover {
+  background-color: rgb(var(--clr-alert));
+  color: rgb(var(--clr-white));
+}
 
 /* _notificationCard.scss */
 /* _userProfileCard.scss */
@@ -2032,7 +2424,7 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   display: grid;
   place-items: center;
   position: fixed;
-  inset-block-start: 4.8rem;
+  inset-block-start: 5.2rem;
   inset-inline-start: 15.6rem;
   width: 2.4rem;
   height: 2.4rem;
@@ -2040,14 +2432,15 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   background-color: rgb(var(--clr-text));
   box-shadow: var(--shd-100);
   color: rgb(var(--clr-text-on-tint));
-  transition: inset-inline-start 0.25s 0.1s, background-color 0.25s;
+  transition: inset-block-start 0.25s 0.25s, inset-inline-start 0.25s, background-color 0.25s;
   z-index: 501;
 }
 #button-toggle-area-info > .remix {
-  rotate: -180deg;
+  rotate: 180deg;
   transition: rotate 0.5s 0.1s;
 }
 #button-toggle-area-info.on {
+  inset-block-start: 4rem;
   inset-inline-start: 0.8rem;
   background-color: rgb(var(--clr-notify));
 }
@@ -2245,6 +2638,7 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
 /* _areaInfoPanel.scss */
 /* _mainModalCover.scss */
 #main-modal-cover {
+  flex-shrink: 0;
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-end;
@@ -2252,9 +2646,7 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   height: 12rem;
   background-color: rgb(var(--clr-gray));
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23666666' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  overflow: clip;
 }
-
 #main-modal-cover::before {
   position: absolute;
   inset: 0;
@@ -2291,11 +2683,35 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   color: rgb(var(--clr-text-on-tint));
 }
 
+.cover-signature-image-container {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+  width: 9rem;
+}
+
+#main-modal-signature-image {
+  position: relative;
+  margin-block-end: -3.2rem;
+  margin-inline: auto;
+  padding: 0.2rem;
+  width: 6.4rem;
+  height: 6.4rem;
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-background));
+}
+#main-modal-signature-image > div {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-gray));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+
 .cover-descriptions-container {
   display: flex;
   flex: 1;
   padding: 0.8rem;
-  margin-inline-start: 10rem;
   height: 100%;
   color: rgb(var(--clr-white));
   z-index: 2;
@@ -2349,11 +2765,14 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   box-shadow: var(--shd-100);
   overflow: hidden;
 }
+#main-modal:has(.cover-signature-image-container) #main-modal-side-menu {
+  margin-block-start: 2.8rem;
+}
 
 #main-modal-body {
   flex: 1;
   display: flex;
-  z-index: 2;
+  overflow: hidden;
 }
 
 #main-modal-sidebar {
@@ -2362,33 +2781,222 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   background-image: linear-gradient(to left, rgb(var(--clr-text)/0.15), rgb(var(--clr-text)/0.15) 1px, transparent 1px);
 }
 
-#main-modal-signature-image {
-  position: relative;
-  margin-block-start: -3.2rem;
-  margin-inline: auto;
-  padding: 0.2rem;
-  width: 6.4rem;
-  height: 6.4rem;
-  border-radius: var(--rad-full);
-  background-color: rgb(var(--clr-background));
-}
-#main-modal-signature-image > div {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--rad-full);
-  background-color: rgb(var(--clr-gray));
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+#main-modal-side-menu {
+  padding-block: 0.8rem;
 }
 
-/* _mainModal.scss */
-/* _mallangsItem.scss */
-.mallang-item {
+.side-menu-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-inline: 0.8rem;
+  height: 1.8rem;
+  font-size: var(--fnt-sm);
+  font-weight: 200;
+}
+.side-menu-item > .remix {
+  opacity: 0.5;
+}
+.side-menu-item:not(.on):hover {
+  background-color: rgb(var(--clr-theme)/0.3);
+}
+.side-menu-item.on {
+  background-color: rgb(var(--clr-theme));
+  font-weight: 900;
+}
+.side-menu-item.on > .remix {
+  opacity: 1;
+}
+
+#main-modal-content-container {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+#main-modal-navigation {
+  flex-shrink: 0;
+  display: flex;
+  padding-inline: 0.4rem;
+  height: 2.4rem;
+  background-image: linear-gradient(to top, rgb(var(--clr-text)/0.15) 1px, transparent 1px);
+}
+#main-modal-navigation > ul {
+  display: contents;
+}
+
+.modal-tab-navigation-item {
+  --selected: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding-inline: 0.8rem;
+  background-image: linear-gradient(to top, rgb(var(--clr-theme)), rgb(var(--clr-theme)) var(--selected), transparent var(--selected));
+  font-size: var(--fnt-sm);
+  font-weight: 200;
+}
+.modal-tab-navigation-item.on {
+  --selected: 0.2rem;
+  font-weight: 900;
+}
+
+#main-modal-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* 모달 외부에서 사용할 확률이 적은 컴포넌트들 */
+/* 모달 섹션 타이틀 */
+.modal-section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
+  padding-inline: 0.8rem;
+  height: 2.4rem;
+  border-block-end: 1px solid rgb(var(--clr-text)/0.15);
+}
+.modal-section-title > .remix {
+  opacity: 0.5;
+}
+.modal-section-title > p {
+  font-size: var(--fnt-sm);
+  font-weight: 900;
+}
+
+/* 날짜 분단선 */
+.modal-date-separator {
   display: flex;
   align-items: center;
+  gap: 0.8rem;
+  font-size: var(--fnt-xs);
+}
+.modal-date-separator > hr {
+  flex: 1;
+}
+.modal-date-separator > span {
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+/* 모달 인스트럭션 */
+.main-modal-instruction {
+  padding: 1.2rem 0.8rem;
+  border-radius: var(--rad-lg);
+  background-color: rgb(var(--clr-tint-100)/0.05);
+}
+.main-modal-instruction > p {
+  flex-flow: row wrap;
+  font-size: var(--fnt-sm);
+  text-align: center;
+  line-height: 1.4;
+  text-wrap: balance;
+}
+.main-modal-instruction span:not(.instruction-emoji) {
+  opacity: 0.75;
+}
+.main-modal-instruction .instruction-headline {
+  margin-inline: 0.2rem;
+  font-weight: 900;
+  opacity: 1;
+}
+
+/* 리뷰 종합 섹션 */
+#review-total-score {
+  display: flex;
+  gap: 1.2rem;
+  position: sticky;
+  inset-block: 0;
+  border-block-end: 1px solid rgb(var(--clr-text)/0.15);
+  background-color: rgb(var(--clr-white));
+  z-index: 2;
+}
+
+.review-score-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
   gap: 0.6rem;
   padding: 0.8rem;
 }
 
+.review-score-target {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  font-size: var(--fnt-sm);
+}
+
+.review-score-target-name {
+  font-weight: 900;
+}
+
+.review-score-everage {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  font-weight: 900;
+}
+.review-score-everage > svg {
+  color: rgb(var(--clr-text));
+}
+
+.review-score-total-count {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.2rem 0.6rem;
+  width: -moz-fit-content;
+  width: fit-content;
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  border-radius: var(--rad-sm);
+  font-size: var(--fnt-sm);
+}
+
+.review-ai-summary {
+  flex: 1;
+  margin: 0.8rem;
+  padding: 0.8rem;
+  border-radius: var(--rad-lg);
+  background-color: rgb(var(--clr-info)/0.05);
+  font-size: var(--fnt-sm);
+}
+
+.ai-summary-title {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  margin-block-end: 0.6rem;
+  width: -moz-fit-content;
+  width: fit-content;
+  background-image: linear-gradient(to right, blue, red, gold);
+  color: transparent;
+  font-weight: 900;
+  -webkit-background-clip: text;
+          background-clip: text;
+}
+.ai-summary-title > .remix {
+  color: slateblue;
+}
+
+.ai-summary-content {
+  line-height: 1.4;
+  word-break: break-all;
+}
+.ai-summary-content::before {
+  content: "“";
+}
+.ai-summary-content::after {
+  content: "”";
+}
+
+/* _mainModal.scss */
+/* _mallangsItem.scss */
+.mallang-item {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.8rem;
+}
+
 .mallang-image-container {
   flex-shrink: 0;
   position: relative;
@@ -2411,22 +3019,26 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   width: 100%;
   height: 100%;
 }
-.mallang-image-container > .mallang-image.not-exist {
+.mallang-image-container > .mallang-image.non-exist {
   width: 2rem;
+  height: auto;
   rotate: -15deg;
+  opacity: 0.5;
 }
 
-.mallang-descriptions {
+.mallang-item-descriptions {
+  flex: 1;
   width: 100%;
 }
-.mallang-descriptions > dt {
+
+.mallang-item-name-container {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   margin-block-end: 0.2rem;
   width: 100%;
 }
-.mallang-descriptions > dt > .mallang-main-indicator {
+.mallang-item-name-container > .mallang-main-indicator {
   flex-shrink: 0;
   padding: 0.2rem 0.4rem;
   border-radius: var(--rad-full);
@@ -2434,14 +3046,16 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   font-size: var(--fnt-xs);
   font-weight: 700;
 }
-.mallang-descriptions > dt > .mallang-name {
+.mallang-item-name-container > .mallang-name {
+  flex: 1;
   font-weight: 900;
   word-break: break-all;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.mallang-descriptions > dd {
+
+.mallang-item-summary {
   display: flex;
   align-items: center;
   gap: 0.2rem;
@@ -2450,426 +3064,476 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
 }
 
 /* _mallangsItem.scss */
-/* _dropDownSelector.scss */
-.dropdown-container {
-  position: relative;
-  width: -moz-fit-content;
-  width: fit-content;
-  font-size: var(--fnt-sm);
+/* _reviewItem.scss */
+.review-item {
+  display: flex;
+  gap: 0.8rem;
+}
+.review-item:has(input:checked) > .review-item-descriptions {
+  background-color: rgb(var(--clr-tint-20)/0.05);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
+}
+.review-item:not(:has(input:checked)):hover > .review-item-descriptions {
+  background-color: rgb(var(--clr-tint-20)/0.05);
 }
 
-.dropdown-selected-label {
+.review-item-checkbox-wrapper {
   display: flex;
   align-items: center;
-  height: 1.6rem;
-  border: 1px solid rgb(var(--clr-white));
-  border-radius: var(--rad-sm);
-  background-color: rgb(var(--clr-white)/0.75);
-  -webkit-backdrop-filter: blur(1.8rem);
-          backdrop-filter: blur(1.8rem);
-  box-shadow: var(--shd-100);
-  font-weight: 700;
-  cursor: pointer;
+  flex-shrink: 0;
+  height: 2.8rem;
 }
-.dropdown-selected-label > span {
-  width: 1px;
-  height: 100%;
-  background-color: rgb(var(--clr-text)/0.15);
+
+.review-item-descriptions {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.4rem;
+  padding: 0.8rem;
+  border-radius: var(--rad-lg);
 }
-.dropdown-selected-label:hover {
-  outline: 0.2rem solid rgb(var(--clr-info)/0.5);
+
+.review-item-author {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.dropdown-selected-label.on {
-  outline: 0.2rem solid rgb(var(--clr-info));
+
+.review-item-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--fnt-sm);
 }
-.dropdown-selected-label.on > .dropdown-arrow-button {
-  background-color: rgb(var(--clr-black)/0.1);
+
+/* _reviewItem.scss */
+/* _articleItem.scss */
+.article-item {
+  display: flex;
+  gap: 0.8rem;
 }
-.dropdown-selected-label.on > .dropdown-arrow-button > .remix {
-  color: rgb(var(--clr-white));
-  rotate: -180deg;
+.article-item:has(input:checked) > .article-item-descriptions {
+  background-color: rgb(var(--clr-tint-20)/0.05);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
+}
+.article-item:not(:has(input:checked)):hover > .article-item-descriptions {
+  background-color: rgb(var(--clr-tint-20)/0.05);
 }
 
-.selected-label-text {
+.article-item-checkbox-wrapper {
+  flex-shrink: 0;
   display: flex;
-  padding-inline: 0.4rem;
-  min-width: 3.2rem;
+  align-items: center;
+  height: 2.4rem;
 }
 
-.dropdown-arrow-button {
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  height: 100%;
-  aspect-ratio: 1/1;
+.article-item-descriptions {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.4rem;
+  flex: 1;
+  padding: 0.8rem;
+  border-radius: var(--rad-lg);
 }
-.dropdown-arrow-button > .remix {
-  transition: rotate 0.15s;
+
+.article-item-title {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  font-size: var(--fnt-sm);
+  font-weight: 200;
 }
 
-.dropdown-menu {
-  position: absolute;
-  inset-block-start: calc(100% + 0.4rem);
-  inset-inline: 0;
-  max-height: 6rem;
-  border-radius: var(--rad-sm);
-  background-color: rgb(var(--clr-white));
-  box-shadow: var(--shd-100);
-  opacity: 1;
-  overflow: clip;
-  overflow-y: auto;
+.article-item-title-text {
+  font-size: var(--fnt-md);
+  font-weight: 900;
 }
-@starting-style {
-  .dropdown-menu {
-    opacity: 0;
-    transition: opacity 0.15s;
-  }
+
+.article-replies-counter {
+  font-weight: 400;
+  opacity: 0.5;
 }
 
-.dropdown-menu-item {
+.article-item-category {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding-inline: 0.4rem;
-  height: 1.6rem;
+  gap: 0.2rem;
+  font-size: var(--fnt-sm);
   font-weight: 200;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-.dropdown-menu-item:hover {
-  background-color: rgb(var(--clr-info)/0.15);
-}
-.dropdown-menu-item.selected {
-  background-color: rgb(var(--clr-info));
-  color: rgb(var(--clr-text-on-tint));
-  font-weight: 700;
 }
 
-/* _dropDownSelector.scss */
-.chat-item {
+.article-item-datetime {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 8px;
-  position: relative;
-  width: 508px;
-  height: 65px;
-  left: 36px;
-  top: 399px;
-}
-.chat-item-profile {
-.dropdown-container {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
   align-items: center;
-  position: relative;
-  width: 100px;
-  height: 2rem;
-  left: 343px;
-  top: 237px;
-  background: rgba(255, 255, 255, 0.75);
-  border: 1px solid #ffffff;
-  box-shadow: 0px 16px 24px -12px rgba(0, 0, 0, 0.25);
-  -webkit-backdrop-filter: blur(18px);
-          backdrop-filter: blur(18px);
-  border-radius: 4px;
+  gap: 0.2rem;
+  font-size: var(--fnt-sm);
+  font-weight: 200;
+  opacity: 0.5;
 }
-.dropdown-container .option-item {
+
+/* _articleItem.scss */
+/* _replyItem.scss */
+.reply-item {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 16px;
-  height: 32px;
-  align-self: stretch;
-  font-family: "SUIT Variable";
-  font-style: normal;
-  color: #302825;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 15px;
+  gap: 0.8rem;
 }
-.dropdown-container .option-item .separator-line {
-  width: 1px;
-  height: 32px;
-  background: #302825;
-  opacity: 0.15;
-  order: 1;
-  z-index: 1;
+.reply-item:has(input:checked) > .reply-item-body {
+  background-color: rgb(var(--clr-tint-20)/0.05);
+  outline: 0.2rem solid rgb(var(--clr-info)/0.25);
+}
+.reply-item:not(:has(input:checked)):hover > .reply-item-body {
+  background-color: rgb(var(--clr-tint-20)/0.05);
 }
-.dropdown-container .option-item .arrow-button {
+
+.reply-item-checkbox-wrapper {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
   align-items: center;
-  width: 0.75rem;
-  height: 0.75rem;
   flex-shrink: 0;
-  order: 2;
-  z-index: 2;
+  height: 2.8rem;
 }
-.dropdown-container .dropdown-menu {
+
+.reply-item-body {
+  flex: 1;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  position: absolute;
-  height: 96px;
-  top: 45px;
-  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  box-shadow: 0px 16px 24px -12px rgba(0, 0, 0, 0.25);
-  border-radius: 4px;
-  order: 3;
-  z-index: 3;
+  flex-flow: column nowrap;
+  gap: 0.4rem;
+  padding: 0.8rem;
+  border-radius: var(--rad-lg);
 }
-.dropdown-container .dropdown-menu .dropdown-menu-item {
+
+.reply-item-user {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
   align-items: center;
-  padding: 0px 8px;
-  gap: 10px;
-  width: 100px;
-  height: 32px;
-  align-self: stretch;
 }
-.dropdown-container .dropdown-menu .dropdown-menu-item.active {
-  background: #5960e8;
-}
-.dropdown-container .dropdown-menu .dropdown-menu-item.active .menu-item-label {
-  color: #ffffff;
+
+.reply-item-user-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-inline-start: auto;
 }
-.dropdown-container .dropdown-menu .dropdown-menu-item.active .icon-checked {
-  opacity: 1;
+
+.reply-content-wrapper {
+  display: flex;
+  gap: 0.4rem;
 }
-.dropdown-container .dropdown-menu .dropdown-menu-item .menu-item-label {
-  margin: 0 auto;
-  width: 35px;
-  height: 15px;
-  font-family: "SUIT Variable";
-  font-style: normal;
-  font-weight: 200;
-  font-size: 12px;
-  line-height: 15px;
-  color: #000000;
+
+.reply-depth-indicator {
+  flex-shrink: 0;
+  width: 1.2rem;
 }
-.dropdown-container .dropdown-menu .dropdown-menu-item .icon-checked {
-  margin: 0 auto;
-  width: 16px;
-  height: 16px;
-  order: 1;
+.reply-depth-indicator::before {
+  display: block;
+  margin-inline-start: auto;
+  width: 55%;
+  height: 0.5rem;
+  border-bottom-left-radius: var(--rad-sm);
+  border-block-end: 1px solid rgb(var(--clr-text)/0.25);
+  border-inline-start: 1px solid rgb(var(--clr-text)/0.25);
+  content: "";
 }
 
-.receive-chat-item {
+.reply-content-container {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 0.5rem;
-  position: relative;
-  width: 100%;
-  height: 100%;
+  flex-flow: column nowrap;
+  gap: 0.4rem;
 }
-.receive-chat-item-profile {
-  box-sizing: border-box;
+
+.reply-content-text {
+  line-height: 1.4;
+}
+
+.reply-item-datetime {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
   align-items: center;
-  isolation: isolate;
-  width: 36px;
-  height: 36px;
-  background: #808080;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 500px;
+  gap: 0.4rem;
+  font-size: var(--fnt-sm);
+  font-weight: 200;
+  opacity: 0.5rem;
 }
-.chat-item-profile-icon {
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  top: 7px;
+
+/* _replyItem.scss */
+/* _chatItem.scss */
+.chat-item {
+  display: flex;
+  gap: 0.4rem;
 }
-.chat-item-profile-icon::before {
-  position: absolute;
-  left: 16.67%;
-  right: 16.67%;
-  top: 4.17%;
-  bottom: 8.33%;
-  background: #ffffff;
+.chat-item .chat-content-container {
+  animation: pop-up-message 0.25s ease-in forwards 1;
 }
-.chat-item-content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  width: 169px;
-  max-width: 360px;
-  height: 65px;
-  order: 1;
+.chat-item.opposite .chat-content-container {
+  border-top-left-radius: 0;
+  background-color: rgb(var(--clr-surface-100));
+  transform-origin: top left;
 }
-.chat-item-username {
-  width: 27px;
-  height: 12px;
-  font-family: "SUIT Variable";
-  font-style: normal;
-  font-weight: 700;
-  font-size: 10px;
-  line-height: 12px;
-  color: #302825;
-  opacity: 0.5;
+.chat-item.opposite .chat-datetime-container {
+  justify-content: flex-end;
 }
-.chat-item-bubble {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 169px;
-  padding: 0.5rem 0.75rem;
-  max-width: 360px;
-  height: 33px;
-  background: #ffe4ac;
-  border-radius: 0 8px 8px 8px;
-  align-self: stretch;
+.chat-item.my {
+  justify-content: flex-end;
+}
+.chat-item.my .chat-content-container {
+  justify-self: flex-end;
+  border-bottom-right-radius: 0;
+  background-color: rgb(var(--clr-info));
+  color: rgb(var(--clr-text-on-tint));
+  transform-origin: bottom right;
+}
+
+.chat-user-image-container {
+  flex-shrink: 0;
+  position: relative;
   width: 1.8rem;
   height: 1.8rem;
-  background: rgb(var(--clr-gray));
-  border: 0.05rem solid rgba(0, 0, 0, 0.15);
-  border-radius: 25rem;
-  flex: none;
-  order: 0;
-  position: relative;
-}
-.receive-chat-item-message-container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.2rem;
-  max-width: 18rem;
-  height: 3.25rem;
-  order: 1;
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-gray));
+  color: rgb(var(--clr-white));
+  overflow: clip;
 }
-.receive-chat-item-message-container-username {
+.chat-user-image-container > .remix {
+  position: absolute;
+  inset: 0;
+  margin-block-start: 0.4rem;
   width: 100%;
-  height: 0.6rem;
-  font-family: "SUIT Variable";
-  font-style: normal;
-  font-weight: 700;
-  font-size: var(--fnt-xs);
-  line-height: 0.6rem;
-  color: rgb(var(--clr-text));
+  height: 100%;
   opacity: 0.5;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
 }
-.receive-chat-item-message-container-content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.2rem;
-  width: auto;
-  height: auto;
-  order: 1;
-  flex-grow: 0;
+
+.chat-user-image {
+  position: absolute;
+  inset: 0;
 }
-.receive-chat-item-message-container-content-bubble {
+
+.chat-body {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: 0.4rem 0.6rem;
-  max-width: 18rem;
-  height: auto;
-  background: rgb(var(--clr-surface-100));
-  border-radius: 0 0.4rem 0.4rem 0.4rem;
-  order: 0;
-  align-self: stretch;
-  flex-grow: 1;
+  flex-flow: column nowrap;
+  gap: 0.2rem;
 }
-.receive-chat-item-message-container-content-bubble-text {
-  width: 100%;
-  font-family: "SUIT Variable";
-  font-style: normal;
-  font-weight: 400;
-  font-size: var(--fnt-md);
-  line-height: 17px;
-  color: #302825;
-  width: 145px;
-  height: 17px;
+
+.chat-user-name {
+  font-size: var(--fnt-sm);
+  font-weight: 700;
+  opacity: 0.5;
 }
-.chat-item-time {
-  color: rgb(var(--clr-text));
-  order: 0;
-  word-break: break-word;
+
+.chat-content-container {
+  padding: 0.4rem 0.6rem;
+  max-width: 14rem;
+  border-radius: var(--rad-lg);
+  line-height: 1.4;
 }
-.receive-chat-item-message-container-content-datetime {
+
+.chat-datetime-container {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
   align-items: center;
-  gap: 4px;
-  width: 169px;
-  height: 12px;
-  order: 1;
-  align-self: stretch;
-  font-family: "SUIT Variable";
-  font-style: normal;
-  font-weight: 200;
-  font-size: 10px;
-  line-height: 12px;
-  text-align: right;
-  color: #302825;
+  gap: 0.2rem;
+  font-size: var(--fnt-sm);
   opacity: 0.5;
-  width: 38px;
-  height: 12px;
-  flex: none;
 }
 
-.chat-message-container {
+/* _chatItem.scss */
+/* _modalFormInput.scss */
+#modal-form-input-container {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.25rem;
-  width: 169px;
-  max-width: 22.5rem;
-  height: 49px;
+  flex-flow: column nowrap;
+  gap: 0.4rem;
+  padding: 0.8rem;
 }
 
-.chat-content-container {
+#modal-form-file {
+  display: none;
+}
+#modal-form-file + label {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.25rem;
-  width: 169px;
-  height: 49px;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: var(--fnt-sm);
 }
-
-.chat-text-bubble {
+#modal-form-file + label > .modal-form-upload-button {
   display: flex;
-  max-width: 22.5rem;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: flex-start;
-  padding: 0.5rem 0.75rem;
-  height: 33px;
-  background: var(----clr-info, #5960e8);
-  border-radius: var(----rad-lg, 0.5rem) var(----rad-lg, 0.5rem) 0rem var(----rad-lg, 0.5rem);
-  align-self: stretch;
+  align-items: center;
+  gap: 0.4rem;
+  padding-inline: 0.6rem;
+  height: 1.6rem;
+  border-radius: var(--rad-sm);
+  background-color: rgb(var(--clr-text));
+  color: rgb(var(--clr-text-on-tint));
+  font-weight: 700;
+  transition: background-color 0.15s;
+  cursor: pointer;
+}
+#modal-form-file + label > .modal-form-upload-button:hover {
+  background-color: rgb(var(--clr-theme));
+  color: rgb(var(--clr-text));
+}
+#modal-form-file + label > span {
+  flex: 1;
+  display: block;
+  opacity: 0.5;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
 }
 
-.chat-text {
-  width: 145px;
-  height: 17px;
+#modal-form-textarea {
+  min-height: 3.6rem;
+  resize: vertical;
+}
+
+.modal-form-controls {
+  display: flex;
+  align-items: center;
+}
+.modal-form-controls > p {
+  font-size: var(--fnt-sm);
+  opacity: 0.5;
+}
+.modal-form-controls > p.overflow {
+  color: rgb(var(--clr-alert));
+  font-weight: 900;
+}
+
+#button-modal-form-submit {
+  --button-surface-color: var(--clr-theme);
+  --button-outline-color: 0 0 0 / 0;
+  --button-text-color: var(--clr-text);
+  --button-hover-color: var(--clr-if-40);
+  --button-hover-text-color: var(--clr-text);
+  flex-shrink: 0;
+  justify-content: center;
+  margin-inline-start: auto;
+  width: 3.2rem;
+}
+
+/* _modalFormInput.scss */
+/* _markerCategory */
+#marker-category-container {
+  display: flex;
+  gap: 0.4rem;
+  position: fixed;
+  inset-block: 4rem;
+  inset-inline: 0;
+  margin-inline: auto;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  color: rgb(var(--clr-tint-100));
+  font-size: var(--fnt-sm);
+  font-weight: 200;
+  z-index: 2;
+}
+
+.marker-category-item {
+  display: grid;
+  place-items: center;
+  height: 1.8rem;
+  padding-inline: 0.8rem;
+  border: 0.1rem solid rgb(var(--clr-white)/0.9);
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-white)/0.75);
+  -webkit-backdrop-filter: blur(1.8rem);
+          backdrop-filter: blur(1.8rem);
+  box-shadow: inset 0 0.6rem 1.2rem -0.4rem rgb(var(--clr-tint-0)/0.1), var(--shd-100);
+  transition: background-color 0.15s;
+  cursor: pointer;
+}
+.marker-category-item.on {
+  border-color: rgb(var(--clr-if-40));
+  background-color: rgb(var(--clr-theme));
+  color: rgb(var(--clr-text));
+  font-weight: 900;
+}
+
+/* _markerCategory */
+.receive-chat-item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0.5rem;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.receive-chat-item-profile {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  isolation: isolate;
+  width: 1.8rem;
+  height: 1.8rem;
+  background: rgb(var(--clr-gray));
+  border: 0.05rem solid rgba(0, 0, 0, 0.15);
+  border-radius: 25rem;
+  flex: none;
+  order: 0;
+  position: relative;
+}
+.receive-chat-item-message-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+  max-width: 18rem;
+  height: 3.25rem;
+  order: 1;
+}
+.receive-chat-item-message-container-username {
+  width: 100%;
+  height: 0.6rem;
+  font-family: "SUIT Variable";
+  font-style: normal;
+  font-weight: 700;
+  font-size: var(--fnt-xs);
+  line-height: 0.6rem;
+  color: rgb(var(--clr-text));
+  opacity: 0.5;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+}
+.receive-chat-item-message-container-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+  width: auto;
+  height: auto;
+  order: 1;
+  flex-grow: 0;
+}
+.receive-chat-item-message-container-content-bubble {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0.4rem 0.6rem;
+  max-width: 18rem;
+  height: auto;
+  background: rgb(var(--clr-surface-100));
+  border-radius: 0 0.4rem 0.4rem 0.4rem;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 1;
+}
+.receive-chat-item-message-container-content-bubble-text {
+  width: 100%;
   font-family: "SUIT Variable";
   font-style: normal;
   font-weight: 400;
-  font-size: var(----fnt-md, 0.875rem);
-  line-height: 17px;
-  color: var(----clr-white, #fff);
+  font-size: var(--fnt-md);
+  color: rgb(var(--clr-text));
+  order: 0;
+  word-break: break-word;
 }
-
-.chat-time-container {
-=======
+.receive-chat-item-message-container-content-datetime {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
   gap: 0.2rem;
   width: 100%;
   height: 0.75rem;
@@ -2951,4 +3615,659 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
-}
\ No newline at end of file
+  gap: 0.2rem;
+  width: 100%;
+  height: 0.75rem;
+  order: 1;
+  align-self: stretch;
+  flex-grow: 1;
+}
+.send-chat-item-message-container-content-datetime-time {
+  width: 1.9rem;
+  height: 0.6rem;
+  font-family: "SUIT Variable";
+  font-style: normal;
+  font-weight: 200;
+  font-size: var(--fnt-xs);
+  line-height: 0.6rem;
+  text-align: right;
+  color: rgb(var(--clr-text));
+  opacity: 0.5;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+}
+
+.setting-mallangs {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  max-width: 20rem;
+  margin: 0 auto;
+}
+.setting-mallangs .add-mallang-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 0.8rem;
+  width: 100%;
+}
+.setting-mallangs .large-text-input {
+  display: flex;
+  align-items: center;
+  height: 2.4rem;
+  width: 100%;
+  border-bottom: 0.1rem solid rgba(47, 40, 36, 0.15);
+  padding: 0 0.4rem;
+}
+.setting-mallangs .large-text-input .name-input {
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-title-sm);
+  opacity: 0.5;
+  width: 100%;
+  text-align: center;
+  font-weight: 900;
+}
+.setting-mallangs .large-text-input input:focus {
+  outline: none;
+}
+.setting-mallangs .mallang-select-container {
+  width: 100%;
+}
+.setting-mallangs .mallang-select-container .label-type {
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-sm);
+  opacity: 0.5;
+  margin-bottom: 0.4rem;
+}
+.setting-mallangs .mallang-select-container .mallang-type-selector {
+  display: flex;
+  gap: 0.4rem;
+}
+.setting-mallangs .mallang-select-container .mallang-type-selector .filter-label-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.6rem;
+  padding: 0 0.8rem;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-white));
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.setting-mallangs .mallang-select-container .mallang-type-selector .filter-label-wrapper.active {
+  background-color: rgb(var(--clr-black));
+}
+.setting-mallangs .mallang-select-container .mallang-type-selector .filter-label-wrapper.active > div {
+  color: rgb(var(--clr-white));
+}
+.setting-mallangs .mallang-select-container .mallang-type-selector .filter-label-wrapper > div {
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-sm);
+  font-weight: 400;
+}
+.setting-mallangs .block-label {
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-sm);
+  font-weight: 200;
+  opacity: 0.5;
+  margin-bottom: 0.2rem;
+}
+.setting-mallangs .birthday-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 1.6rem;
+  border: 1px solid rgba(47, 40, 36, 0.15);
+  border-radius: var(--rad-xs);
+  padding: 0 0.4rem;
+}
+.setting-mallangs .birthday-container .birthday-wrapper {
+  flex-grow: 1;
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-md);
+  opacity: 0.5;
+}
+.setting-mallangs .birthday-container .birthday-selector {
+  display: flex;
+  align-items: center;
+}
+.setting-mallangs .killogram {
+  display: flex;
+  align-items: center;
+  height: 1.6rem;
+  border: 0.05rem solid rgba(47, 40, 36, 0.15);
+  border-radius: var(--rad-xs);
+  padding: 0 0.4rem;
+}
+.setting-mallangs .killogram input::-webkit-outer-spin-button,
+.setting-mallangs .killogram input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.setting-mallangs .killogram .killogram-input {
+  flex-grow: 1;
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-md);
+  opacity: 0.5;
+}
+.setting-mallangs .killogram input:focus {
+  outline: none;
+}
+.setting-mallangs .killogram .killogram-kg {
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-md);
+  opacity: 0.5;
+  margin-left: 0.2rem;
+}
+.setting-mallangs .checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.setting-mallangs .checkbox-wrapper .checkbox-group {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.setting-mallangs .checkbox-wrapper .checkbox-group .frame {
+  align-items: center;
+  background-color: rgb(var(--clr-white));
+  border-radius: var(--rad-full);
+  display: flex;
+  flex-direction: column;
+  height: 1.6rem;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 1.6rem;
+  border: 0.05rem solid rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+.setting-mallangs .checkbox-wrapper .checkbox-group .frame svg {
+  height: 0.8rem;
+  width: 0.8rem;
+  opacity: 0.5;
+}
+.setting-mallangs .checkbox-wrapper .checkbox-group.active .frame {
+  background-color: rgb(var(--clr-if-0));
+}
+.setting-mallangs .checkbox-wrapper .checkbox-group.active .frame svg {
+  opacity: 1;
+}
+.setting-mallangs .checkbox-wrapper .checkbox-group-label {
+  color: rgb(var(--clr-black));
+  font-size: var(--fnt-sm);
+  font-weight: 700;
+  margin-left: 0.2rem;
+}
+.setting-mallangs .toggle-div {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.setting-mallangs .toggle-div .toggle-container {
+  width: 1.2rem;
+  height: 0.8rem;
+  border: 0.05rem solid rgba(47, 40, 36, 0.1490196078);
+  border-radius: var(--rad-full);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0.1rem;
+  position: relative;
+  transition: all 0.3s ease;
+  align-items: flex-start;
+  background-color: rgb(var(--clr-background));
+}
+.setting-mallangs .toggle-div .toggle-container.on {
+  align-items: flex-end;
+  background-color: rgb(var(--clr-clear));
+}
+.setting-mallangs .toggle-div .toggle-container .toggle-button {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-white));
+  border: 0.05rem solid rgba(47, 40, 36, 0.15);
+  box-shadow: 0px 0.05rem 0px rgba(0, 0, 0, 0.05);
+  transition: transform 0.3s ease;
+}
+.setting-mallangs .toggle-div .toggle-label {
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-sm);
+  font-weight: 700;
+}
+.setting-mallangs .chip-number-div {
+  display: flex;
+  align-items: center;
+  height: 1.6rem;
+  border: 0.05rem solid rgba(47, 40, 36, 0.15);
+  border-radius: var(--rad-xs);
+  padding: 0 0.4rem;
+}
+.setting-mallangs .chip-number-div .chip-number {
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-md);
+  opacity: 0.5;
+}
+.setting-mallangs .chip-number-div input::-webkit-outer-spin-button,
+.setting-mallangs .chip-number-div input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.setting-mallangs .chip-number-div input:focus {
+  outline: none;
+}
+.setting-mallangs .info {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  margin-top: 0.2rem;
+}
+.setting-mallangs .info .info-icon {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+.setting-mallangs .info .help-text {
+  color: var(--clr-info);
+  font-size: var(--fnt-sm);
+  font-weight: 200;
+  white-space: nowrap;
+}
+
+.search-container {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  gap: 0.8rem;
+  position: relative;
+  width: 27rem;
+  margin: 0 auto;
+  padding: 0.8rem;
+  overflow: hidden;
+}
+.search-container,
+.search-container * {
+  box-sizing: border-box;
+}
+.search-container input,
+.search-container select,
+.search-container textarea,
+.search-container button {
+  outline: 0;
+}
+.search-container .search-input-container {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  gap: 0.2rem;
+  position: relative;
+  overflow: hidden;
+}
+.search-container .search-input-container .text-input {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  gap: 0.2rem;
+  position: relative;
+  height: 1.6rem;
+  padding: 0 0.4rem 0 0.4rem;
+  background: rgb(var(--clr-white));
+  border: 1px solid rgba(47, 40, 36, 0.15);
+  z-index: 1;
+  overflow: hidden;
+  border-radius: var(--rad-xs);
+}
+.search-container .search-input-container .text-input .input {
+  flex-shrink: 0;
+  position: absolute;
+  width: 16.6rem;
+  height: 1.6rem;
+  top: -0.05rem;
+  left: -0.05rem;
+  background: transparent;
+  border: none;
+  z-index: 3;
+  outline: none;
+}
+.search-container .search-input-container .button-search-keyword {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  gap: 0.2rem;
+  position: relative;
+  width: 45px;
+  height: 32px;
+  padding: 0 0.6rem 0 0.6rem;
+  cursor: pointer;
+  background: rgb(var(--clr-if-0));
+  border: none;
+  z-index: 4;
+  overflow: hidden;
+  border-radius: var(--rad-sm);
+}
+.search-container .search-input-container .button-search-keyword .button-label {
+  flex-shrink: 0;
+  flex-basis: auto;
+  position: relative;
+  height: 15px;
+  color: #2f2824;
+  font-size: var(--fnt-sm);
+  font-weight: 700;
+  line-height: 14.976px;
+  text-align: left;
+  white-space: nowrap;
+  z-index: 5;
+}
+.search-container .search-input-container .button-search-location {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  gap: 0.2rem;
+  position: relative;
+  width: 123px;
+  height: 32px;
+  padding: 0 12px 0 12px;
+  cursor: pointer;
+  background: rgb(var(--clr-if-0));
+  border: none;
+  z-index: 6;
+  overflow: hidden;
+  border-radius: var(--rad-sm);
+}
+.search-container .search-input-container .button-search-location .icon-focus {
+  flex-shrink: 0;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  z-index: 7;
+  overflow: hidden;
+}
+.search-container .search-input-container .button-search-location .button-label {
+  flex-shrink: 0;
+  flex-basis: auto;
+  position: relative;
+  height: 15px;
+  color: rgb(var(--clr-text));
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 14.976px;
+  text-align: left;
+  white-space: nowrap;
+  z-index: 9;
+}
+.search-container .search-result-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+  overflow: hidden;
+}
+.search-container .search-result-list .search-result-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  position: relative;
+  width: 508px;
+  height: 49px;
+  padding: 16px 0 16px 0;
+  z-index: 11;
+  overflow: hidden;
+  border-radius: var(--rad-xs);
+}
+.search-container .search-result-list .search-result-row .search-result-titlebar {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  gap: 0.4rem;
+  position: relative;
+  width: 77px;
+  z-index: 12;
+  overflow: hidden;
+}
+.search-container .search-result-list .search-result-row .search-result-titlebar .button-set-my-town {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  position: relative;
+  width: 32px;
+  height: 32px;
+  background: rgb(var(--clr-white));
+  border: 1px solid rgba(47, 40, 36, 0.15);
+  z-index: 13;
+  overflow: hidden;
+  border-radius: var(--rad-sm);
+}
+.search-container .search-result-list .search-result-row .search-result-titlebar .button-set-my-town .icon-home {
+  flex-shrink: 0;
+  position: relative;
+  width: 0.8rem;
+  height: 0.8rem;
+  opacity: 0.5;
+  z-index: 14;
+  overflow: hidden;
+}
+.search-container .search-result-list .search-result-row .search-result-titlebar .town-name {
+  flex-shrink: 0;
+  flex-basis: auto;
+  position: relative;
+  height: 17px;
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-md);
+  font-weight: 700;
+  line-height: 17px;
+  text-align: left;
+  white-space: nowrap;
+  z-index: 16;
+}
+.search-container .search-result-list .search-result-row .city-province {
+  flex-shrink: 0;
+  flex-basis: auto;
+  position: relative;
+  height: 15px;
+  color: rgb(var(--clr-text));
+  font-size: 12px;
+  font-weight: 200;
+  line-height: 14.976px;
+  text-align: left;
+  white-space: nowrap;
+  z-index: 17;
+}
+.search-container .search-result-list .block-separator {
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+  height: 1px;
+  background: rgba(47, 40, 36, 0.15);
+  z-index: 18;
+  border-radius: 500px;
+}
+
+.user-location-container * {
+  box-sizing: border-box;
+}
+
+.user-location-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 36rem;
+  height: 100%;
+  margin: 0 auto;
+  border-radius: var(--rad-lg);
+  box-shadow: 0 0.8rem 1.2rem 0 rgba(0, 0, 0, 0.25);
+}
+.user-location-container .section-titlebar {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  gap: 0.2rem;
+  position: relative;
+  height: 2.4rem;
+  padding: 0 0.8rem 0 0.8rem;
+  border-top: 0.05rem solid rgba(47, 40, 36, 0.15);
+}
+.user-location-container .section-titlebar .icon-hashtag {
+  flex-shrink: 0;
+  position: relative;
+  width: 0.8rem;
+  height: 0.8rem;
+  opacity: 0.5;
+}
+.user-location-container .section-titlebar .section-search-label {
+  flex-shrink: 0;
+  flex-basis: auto;
+  position: relative;
+  height: 0.75rem;
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-sm);
+  font-weight: 900;
+  line-height: 0.75rem;
+  text-align: left;
+  white-space: nowrap;
+}
+.user-location-container #user-location-map-container {
+  position: relative;
+  width: 100%;
+  height: 28rem;
+}
+.user-location-container #user-location-map {
+  width: 100%;
+  height: 100%;
+}
+.user-location-container .map-bottom-content {
+  width: 100%;
+  background: rgb(var(--clr-surface-0));
+  border-radius: 0 0 var(--rad-lg) var(--rad-lg);
+}
+.user-location-container .map-bottom-content .notification-map-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  gap: 0.2rem;
+  position: relative;
+  padding: 0.8rem;
+  border-top: 0.05rem solid rgba(47, 40, 36, 0.15);
+  border-bottom: 0.05rem solid rgba(47, 40, 36, 0.15);
+}
+.user-location-container .map-bottom-content .notification-map-content .icon-location-area {
+  flex-shrink: 0;
+  position: relative;
+  width: 0.8rem;
+  height: 0.8rem;
+  opacity: 0.5;
+}
+.user-location-container .map-bottom-content .notification-map-content .map-marker {
+  flex-shrink: 0;
+  flex-basis: auto;
+  position: relative;
+  height: 0.75rem;
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-sm);
+  font-weight: 200;
+  line-height: 0.75rem;
+  text-align: left;
+  white-space: nowrap;
+}
+.user-location-container .map-bottom-content .button-map-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  gap: 0.4rem;
+  position: relative;
+  padding: 0.8rem;
+}
+.user-location-container .map-bottom-content .button-map-content .button-selection-submit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  gap: 0.4rem;
+  position: relative;
+  height: 2.4rem;
+  padding: 0 1.2rem 0 1.2rem;
+  cursor: pointer;
+  background: rgb(var(--clr-if-0));
+  border: none;
+  border-radius: var(--rad-lg);
+}
+.user-location-container .map-bottom-content .button-map-content .icon-check {
+  flex-shrink: 0;
+  position: relative;
+  width: 0.8rem;
+  height: 0.8rem;
+}
+.user-location-container .map-bottom-content .button-map-content .button-map-label {
+  flex-shrink: 0;
+  flex-basis: auto;
+  position: relative;
+  height: 0.75rem;
+  color: rgb(var(--clr-text));
+  font-size: var(--fnt-sm);
+  font-weight: 700;
+  line-height: 0.75rem;
+  text-align: left;
+}
+
+/* _totalSearch.scss */
+#total-search-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(var(--clr-background)/0.75);
+  z-index: 50001;
+}
+#total-search-backdrop > .inner-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  position: absolute;
+  inset: 0;
+  margin-block: auto;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.total-search-input-container {
+  display: flex;
+  align-items: center;
+  height: 3.2rem;
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-white)/0.75);
+  -webkit-backdrop-filter: blur(1.8rem);
+          backdrop-filter: blur(1.8rem);
+  box-shadow: inset 0 -0.2rem 0.2rem rgb(var(--clr-text)/0.1);
+  outline: 0.2rem solid rgb(var(--clr-if-0)/0.5);
+}
+
+/* _totalSearch.scss */
\ No newline at end of file
diff --git a/src/assets/stylesheets/style.scss b/src/assets/stylesheets/style.scss
index aaaea76..0b71366 100644
--- a/src/assets/stylesheets/style.scss
+++ b/src/assets/stylesheets/style.scss
@@ -1,48 +1,55 @@
-@use "sass:list";
-@use "sass:math";
+@use 'sass:list';
+@use 'sass:math';
 
 // 0. Reset
-@import "vendors/normalize";
+@import 'vendors/normalize';
 
 // 1. Base
-@import "base/default" // Default
+@import 'base/default' // Default
 ;
 
 // 2. Abstracts
-@import "abstracts/variables",
+@import 'abstracts/variables',
     // Global Variables
-    "abstracts/functions",
+    'abstracts/functions',
     // SASS Functions
-    "abstracts/keyframes" // Animations
+    'abstracts/keyframes' // Animations
 ;
 
 // 3. Helpers
-@import "helpers/utils";
+@import 'helpers/utils';
 
 // 4. Themes
-@import "themes/lightScheme",
+@import 'themes/lightScheme',
     // Prefered Scheme - Light (Not In Use)
-    "themes/darkScheme",
+    'themes/darkScheme',
     // Prefered Scheme - Dark (Not In Use)
-    "themes/defaultColor" // Default Color
+    'themes/defaultColor' // Default Color
 ;
 
 // 5. Layouts
-@import "layouts/commons",
+@import 'layouts/commons',
     // Commons
-    "layouts/headers",
+    'layouts/headers',
     // Headers
-    "layouts/footers",
+    'layouts/footers',
     // Footers
-    "layouts/mainPage" // Main Page Layout
+    'layouts/mainPage' // Main Page Layout
 ;
 
 // 6. Pages
-@import "pages/registerPage", "pages/loginPage", "pages/myPage", "pages/mallangMap";
+@import 'pages/registerPage', 'pages/loginPage', 'pages/myPage',
+    'pages/mallangMap';
 
 // 7. Components
-@import "components/buttons", "components/formElements", "components/spinLoader", "components/customAlert",
-    "components/emptyList", "components/notificationCard", "components/userProfileCard", "components/areaInfoPanel",
-    "components/mainModalCover", "components/mainModal", "components/mallangsItem", "components/dropdown",
-    "components/receiveChat", "components/sendChat", "components/starRating", "components/nametag",
-    "components/settingMallangs", "components/searchUserLocation", "components/userLocationMap";
+@import 'components/buttons', 'components/formElements', 'components/spinLoader',
+    'components/customAlert', 'components/emptyList',
+    'components/dropDownSelector', 'components/starRating', 'components/nameTag',
+    'components/notificationCard', 'components/userProfileCard',
+    'components/areaInfoPanel', 'components/mainModalCover',
+    'components/mainModal', 'components/mallangsItem', 'components/reviewItem',
+    'components/articleItem', 'components/replyItem', 'components/chatItem',
+    'components/modalFormInput', 'components/markerCategory',
+    'components/receiveChat', 'components/sendChat',
+    'components/settingMallangs', 'components/searchUserLocation',
+    'components/userLocationMap', 'components/totalSearch';
diff --git a/src/components/MainModal.jsx b/src/components/MainModal.jsx
index c8a244c..def8db0 100644
--- a/src/components/MainModal.jsx
+++ b/src/components/MainModal.jsx
@@ -1,38 +1,62 @@
 import { useRef, useState } from 'react';
 import MainModalCover from './common/MainModalCover';
+import Remix from './common/Remix';
 
-const MainModal = () => {
-    const [modalStatus, setModalStatus] = useState({ isOpened: true });
+const MainModal = ({ isActive, onShow, children }) => {
+    const [modalStatus, setModalStatus] = useState(false);
     const modalBackdrop = useRef(null);
 
-    if (modalStatus.isOpened)
+    if (isActive)
         return (
             <div
                 id="main-modal-backdrop"
                 ref={modalBackdrop}
                 onClick={(e) => {
-                    if (e.target === modalBackdrop.current)
-                        setModalStatus(false);
+                    if (e.target === modalBackdrop.current) onShow(0);
                 }}
             >
                 <div id="main-modal">
-                    <MainModalCover />
+                    <MainModalCover onClose={() => onShow(0)} />
 
                     <section id="main-modal-body">
                         <div id="main-modal-sidebar">
-                            <div id="main-modal-signature-image">
-                                <div></div>
-                            </div>
+                            <ul id="main-modal-side-menu">
+                                <li className="side-menu-item">
+                                    <Remix iconName={'subtract-line'} />
 
-                            <ul>
-                                <li>멘유</li>
+                                    <span>오늘 아침 메뉴</span>
+                                </li>
+
+                                <li className="side-menu-item">
+                                    <Remix iconName={'subtract-line'} />
+
+                                    <span>오늘 점심 메뉴</span>
+                                </li>
+
+                                <li className="side-menu-item on">
+                                    <Remix iconName={'arrow-right-s-line'} />
+
+                                    <span>오늘 저녁 메뉴</span>
+                                </li>
                             </ul>
                         </div>
 
                         <div id="main-modal-content-container">
-                            <nav id="main-modal-navigation"></nav>
+                            <nav id="main-modal-navigation">
+                                <ul>
+                                    <li className="modal-tab-navigation-item">
+                                        <span>메뉴명</span>
+                                    </li>
+
+                                    <li className="modal-tab-navigation-item on">
+                                        <span>메뉴명</span>
+
+                                        <span>(2)</span>
+                                    </li>
+                                </ul>
+                            </nav>
 
-                            <div id="main-modal-content"></div>
+                            <div id="main-modal-content">{children}</div>
                         </div>
                     </section>
                 </div>
diff --git a/src/components/MallangMap.jsx b/src/components/MallangMap.jsx
index 83974a9..cbb93e9 100644
--- a/src/components/MallangMap.jsx
+++ b/src/components/MallangMap.jsx
@@ -1,14 +1,11 @@
-import { useKakaoLoader, Map, MapMarker } from 'react-kakao-maps-sdk';
-import MainModal from './MainModal';
+import { Map, MapMarker } from 'react-kakao-maps-sdk';
+import MarkerCategory from './layout/MarkerCategory';
 
 const MallangMap = () => {
-    useKakaoLoader({
-        appkey: import.meta.env.VITE_KAKAO_APP_KEY,
-        libraries: ['drawing'],
-    });
-
     return (
         <div id="mallang-map-container">
+            <MarkerCategory />
+
             <Map
                 id="mallang-map"
                 center={{ lat: 35.183749, lng: 129.042256 }}
@@ -18,8 +15,6 @@ const MallangMap = () => {
                     <div className="temp-marker">안에 사람들이 있잖아</div>
                 </MapMarker>
             </Map>
-
-            <MainModal />
         </div>
     );
 };
diff --git a/src/components/common/ArticleItem.jsx b/src/components/common/ArticleItem.jsx
new file mode 100644
index 0000000..690a52d
--- /dev/null
+++ b/src/components/common/ArticleItem.jsx
@@ -0,0 +1,59 @@
+import Remix from './Remix';
+import dateFormat from '../../utils/dateFormat';
+import hourFormat from '../../utils/hourFormat';
+
+const ArticleItem = ({
+    index = 0,
+    articleTitle = '제목 없음',
+    repliesCount = 0,
+    boardFrom = '게시판 없음',
+    categoryFrom = '분류 없음',
+    writtenDate = '1970-01-01',
+    isEditMode = false,
+}) => {
+    return (
+        <article className="article-item">
+            {isEditMode && (
+                <div className="article-item-checkbox-wrapper">
+                    <input type="checkbox" id={`chkArticleItem${index}`} />
+
+                    <label htmlFor={`chkArticleItem${index}`}>
+                        <div className="toggles-indicator">
+                            <Remix iconName={'check-line'} iconSize={0.6} />
+                        </div>
+                    </label>
+                </div>
+            )}
+
+            <dl className="article-item-descriptions">
+                <dt className="article-item-title">
+                    <span className="article-item-title-text">
+                        {articleTitle}
+                    </span>
+
+                    <span className="article-replies-counter">
+                        [{repliesCount.toLocaleString('ko-KR')}]
+                    </span>
+                </dt>
+
+                <dd className="article-item-category">
+                    <span>{boardFrom}</span>
+
+                    <span>·</span>
+
+                    <span>{categoryFrom}</span>
+                </dd>
+
+                <dd className="article-item-datetime">
+                    <span>{dateFormat(writtenDate)}</span>
+
+                    <span>·</span>
+
+                    <span>{hourFormat(writtenDate)}</span>
+                </dd>
+            </dl>
+        </article>
+    );
+};
+
+export default ArticleItem;
diff --git a/src/components/common/ChatItem.jsx b/src/components/common/ChatItem.jsx
new file mode 100644
index 0000000..3b6a961
--- /dev/null
+++ b/src/components/common/ChatItem.jsx
@@ -0,0 +1,77 @@
+import Remix from './Remix';
+import dateFormat from '../../utils/dateFormat';
+import hourFormat from '../../utils/hourFormat';
+
+const ChatItem = ({
+    chatFrom = 'my',
+    chatUser = { userID: 0, userImage: null, userName: '대화 상대' },
+    chatContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas laboriosam, debitis veniam nobis eligendi sequi modi deleniti repellat harum aliquid possimus, repellendus, quisquam voluptatem! Exercitationem voluptas dolorem natus architecto laborum.',
+    dateTime = '1970-01-01',
+    isRead = true,
+}) => {
+    return (
+        <article className={`chat-item ${chatFrom}`}>
+            {chatFrom === 'opposite' && (
+                <div className="chat-user-image-container">
+                    {chatUser.userImage ? (
+                        <img
+                            className="chat=user-image"
+                            src={chatUser.userImage}
+                            alt="사용자 프로필 이미지"
+                        />
+                    ) : (
+                        <Remix iconName={'user-fill'} />
+                    )}
+                </div>
+            )}
+
+            <dl className="chat-body">
+                {chatFrom === 'opposite' && (
+                    <dd className="chat-user-name">
+                        <span>{chatUser.userName}</span>
+                    </dd>
+                )}
+
+                <dt className="chat-content-container">
+                    <span>{chatContent}</span>
+                </dt>
+
+                <dd className="chat-datetime-container">
+                    <span>{dateFormat(dateTime)}</span>
+
+                    <span>·</span>
+
+                    <span>{hourFormat(dateTime)}</span>
+
+                    {chatFrom === 'my' && (
+                        <>
+                            <span>·</span>
+
+                            {isRead ? (
+                                <span>읽음</span>
+                            ) : (
+                                <>
+                                    <span>읽지 않음</span>
+
+                                    <span
+                                        style={{
+                                            display: 'inline-block',
+                                            width: '.4rem',
+                                            height: '.4rem',
+                                            borderRadius: 'var(--rad-full)',
+                                            backgroundColor:
+                                                'rgb(var(--clr-notify))',
+                                            verticalAlign: 'middle',
+                                        }}
+                                    ></span>
+                                </>
+                            )}
+                        </>
+                    )}
+                </dd>
+            </dl>
+        </article>
+    );
+};
+
+export default ChatItem;
diff --git a/src/components/common/EmptyList.jsx b/src/components/common/EmptyList.jsx
index ad5a09b..5d47c53 100644
--- a/src/components/common/EmptyList.jsx
+++ b/src/components/common/EmptyList.jsx
@@ -11,7 +11,7 @@ const EmptyList = ({ placeHolderText = '아직은 표시할 내용이 없어요.
                     <path
                         id="Vector"
                         d="M2.11279 49.5137C2.11279 49.5137 3.69328 49.8921 6.46098 50.456"
-                        stroke="#302825"
+                        stroke="currentColor"
                         strokeWidth="4"
                         strokeLinecap="round"
                         strokeLinejoin="round"
@@ -19,7 +19,7 @@ const EmptyList = ({ placeHolderText = '아직은 표시할 내용이 없어요.
                     <path
                         id="Vector_2"
                         d="M15.0312 52.058C42.7751 56.7847 105.252 63.1214 101.557 23.4238C101.557 23.4238 98.5966 0.0281817 72.8117 2.26164C47.0342 4.49509 50.5365 30.651 50.5365 30.651C50.5365 30.651 55.5154 62.7059 110.996 56.1465"
-                        stroke="#302825"
+                        stroke="currentColor"
                         strokeWidth="4"
                         strokeLinecap="round"
                         strokeLinejoin="round"
@@ -28,7 +28,7 @@ const EmptyList = ({ placeHolderText = '아직은 표시할 내용이 없어요.
                     <path
                         id="Vector_3"
                         d="M115.336 55.5756C116.769 55.3604 118.238 55.1304 119.737 54.8633"
-                        stroke="#302825"
+                        stroke="currentColor"
                         strokeWidth="4"
                         strokeLinecap="round"
                         strokeLinejoin="round"
@@ -36,7 +36,7 @@ const EmptyList = ({ placeHolderText = '아직은 표시할 내용이 없어요.
                     <path
                         id="Vector_4"
                         d="M125.094 42.479C125.094 42.479 128.381 31.6456 141.448 35.0663C154.515 38.4869 159.887 43.4139 159.887 43.4139C159.887 43.4139 150.026 55.5606 138.747 54.3957C138.747 54.3957 122.712 53.7353 125.087 42.4715L125.094 42.479Z"
-                        stroke="#302825"
+                        stroke="currentColor"
                         strokeWidth="4"
                         strokeLinecap="round"
                         strokeLinejoin="round"
@@ -44,7 +44,7 @@ const EmptyList = ({ placeHolderText = '아직은 표시할 내용이 없어요.
                     <path
                         id="Vector_5"
                         d="M117.867 41.7891C117.867 41.7891 126.801 41.4552 135.801 43.8741"
-                        stroke="#302825"
+                        stroke="currentColor"
                         strokeWidth="4"
                         strokeLinecap="round"
                         strokeLinejoin="round"
diff --git a/src/components/common/MainModalCover.jsx b/src/components/common/MainModalCover.jsx
index dadfaaf..ec2cc82 100644
--- a/src/components/common/MainModalCover.jsx
+++ b/src/components/common/MainModalCover.jsx
@@ -2,7 +2,7 @@ import Remix from './Remix';
 import DropdownSelector from './DropdownSelector';
 import tempOptionList from '../../datas/temp-options-list.json'; // 임시 드롭다운 옵션 데이터
 
-const MainModalCover = () => {
+const MainModalCover = ({ onClose }) => {
     return (
         <section id="main-modal-cover">
             <div className="cover-controls">
@@ -27,11 +27,22 @@ const MainModalCover = () => {
                     </button>
                 </div>
 
-                <button type="button" id="button-close-modal">
+                <button
+                    type="button"
+                    id="button-close-modal"
+                    title="창 닫기"
+                    onClick={onClose}
+                >
                     <Remix iconName={'close-line'} />
                 </button>
             </div>
 
+            <div className="cover-signature-image-container">
+                <div id="main-modal-signature-image">
+                    <div></div>
+                </div>
+            </div>
+
             <div className="cover-descriptions-container">
                 <dl className="cover-descriptions">
                     <dt className="thread-title-container">
diff --git a/src/components/common/MallangItem.jsx b/src/components/common/MallangItem.jsx
index bcbf202..ab2a842 100644
--- a/src/components/common/MallangItem.jsx
+++ b/src/components/common/MallangItem.jsx
@@ -1,6 +1,16 @@
 import Remix from './Remix';
 
-const MallangItem = ({ mallangObject, isEditMode = false }) => {
+const MallangItem = ({
+    mallangObject = {
+        petImage: null,
+        isMain: false,
+        petName: '이름 없음',
+        petType: '알 수 없음',
+        petAge: 0,
+        petGender: '알 수 없음',
+    },
+    isEditMode = false,
+}) => {
     return (
         <div className="mallang-item">
             <div className="mallang-image-container">
@@ -19,8 +29,8 @@ const MallangItem = ({ mallangObject, isEditMode = false }) => {
                 )}
             </div>
 
-            <dl className="mallang-descriptions">
-                <dt>
+            <dl className="mallang-item-descriptions">
+                <dt className="mallang-item-name-container">
                     {mallangObject.isMain && (
                         <p className="mallang-main-indicator">
                             {mallangObject.isMain && '대표'}
@@ -40,7 +50,7 @@ const MallangItem = ({ mallangObject, isEditMode = false }) => {
                     )}
                 </dt>
 
-                <dd>
+                <dd className="mallang-item-summary">
                     <Remix iconName={'search-eye-line'} />
                     <p>{mallangObject.petType}</p>
                     <span>·</span>
diff --git a/src/components/common/ModalDateSeparator.jsx b/src/components/common/ModalDateSeparator.jsx
new file mode 100644
index 0000000..6efbd5d
--- /dev/null
+++ b/src/components/common/ModalDateSeparator.jsx
@@ -0,0 +1,13 @@
+import dateFormat from '../../utils/dateFormat';
+
+const ModalDateSeparator = ({ dateString = '1970-01-01' }) => {
+    return (
+        <div className="modal-date-separator">
+            <hr />
+            <span>{dateFormat(dateString)}</span>
+            <hr />
+        </div>
+    );
+};
+
+export default ModalDateSeparator;
diff --git a/src/components/common/ModalFormInput.jsx b/src/components/common/ModalFormInput.jsx
new file mode 100644
index 0000000..d05e50e
--- /dev/null
+++ b/src/components/common/ModalFormInput.jsx
@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import Remix from './Remix';
+
+const ModalFormInput = ({
+    isIncludeImage = true,
+    placeHolder = '내용을 입력하세요.',
+    maxLength = 200,
+}) => {
+    const [formText, setText] = useState('');
+    const [uploadImage, setImage] = useState(null);
+
+    const handleInputText = (e) => {
+        setText(e.target.value);
+    };
+
+    const handleInputFile = (e) => {
+        setImage(e.target.value);
+    };
+
+    const handleFormData = (e) => {
+        e.preventDefault();
+
+        console.log({ formText, uploadImage });
+    };
+
+    return (
+        <form id="modal-form-input-container">
+            {isIncludeImage && (
+                <div className="modal-form-file-uploader">
+                    <input
+                        type="file"
+                        id="modal-form-file"
+                        accept="image/jpg, image/png, image/gif"
+                        onChange={handleInputFile}
+                    />
+
+                    <label htmlFor="modal-form-file">
+                        <div className="modal-form-upload-button">
+                            <Remix iconName={'share-2-line'} />
+
+                            <span>이미지 업로드</span>
+                        </div>
+
+                        <span>
+                            {uploadImage ? uploadImage : '선택된 파일 없음'}
+                        </span>
+                    </label>
+                </div>
+            )}
+
+            <textarea
+                id="modal-form-textarea"
+                minLength={10}
+                maxLength={maxLength}
+                placeholder={`${placeHolder} (최대 ${maxLength} 자)`}
+                onInput={handleInputText}
+            ></textarea>
+
+            <div className="modal-form-controls">
+                <p className={formText.length >= maxLength ? 'overflow' : ''}>
+                    <span>{formText.length}</span>
+                    <span> / </span>
+                    <span>{maxLength} 자</span>
+                </p>
+
+                <button
+                    type="submit"
+                    id="button-modal-form-submit"
+                    className="buttons"
+                    title="입력 내용 전송"
+                    onClick={handleFormData}
+                >
+                    <span>전송</span>
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default ModalFormInput;
diff --git a/src/components/common/ModalInstruction.jsx b/src/components/common/ModalInstruction.jsx
new file mode 100644
index 0000000..4249a25
--- /dev/null
+++ b/src/components/common/ModalInstruction.jsx
@@ -0,0 +1,19 @@
+const ModalInstruction = ({
+    instEmoji = '🚨',
+    instHeadline = '인스트럭션 강조 대상',
+    instContent = '인스트럭션 텍스트',
+}) => {
+    return (
+        <section className="main-modal-instruction">
+            <p>
+                <span className="instruction-emoji">{instEmoji}</span>
+
+                <span className="instruction-headline">{instHeadline}</span>
+
+                <span className="instruction-content">{instContent}</span>
+            </p>
+        </section>
+    );
+};
+
+export default ModalInstruction;
diff --git a/src/components/common/ModalSectionTitle.jsx b/src/components/common/ModalSectionTitle.jsx
new file mode 100644
index 0000000..55df0d1
--- /dev/null
+++ b/src/components/common/ModalSectionTitle.jsx
@@ -0,0 +1,13 @@
+import Remix from './Remix';
+
+const ModalSectionTitle = ({ sectionTitle = '섹션 제목' }) => {
+    return (
+        <div className="modal-section-title">
+            <Remix iconName={'hashtag'} />
+
+            <p>{sectionTitle}</p>
+        </div>
+    );
+};
+
+export default ModalSectionTitle;
diff --git a/src/components/common/NameTag.jsx b/src/components/common/NameTag.jsx
index 0f92a28..5f41020 100644
--- a/src/components/common/NameTag.jsx
+++ b/src/components/common/NameTag.jsx
@@ -1,12 +1,24 @@
-import UserNametagIcon from '../../assets/images/icon-user-nametag.svg?react';
+import Remix from './Remix';
 
-const NameTag = ({ name = '홍길동' }) => {
+const NameTag = ({
+    userObject = { userID: 0, userImage: null, userName: '홍길동' },
+}) => {
     return (
         <div className="nametag-content">
             <div className="nametag-content-icon">
-                <UserNametagIcon />
+                <Remix iconName={'user-fill'} iconSize={1} />
+
+                {userObject.userImage && (
+                    <img
+                        className="user-image"
+                        src={userObject.userImage}
+                    ></img>
+                )}
+            </div>
+
+            <div className="nametag-content-username">
+                {userObject.userName}
             </div>
-            <div className="nametag-content-username">{name}</div>
         </div>
     );
 };
diff --git a/src/components/common/ReplyItem.jsx b/src/components/common/ReplyItem.jsx
new file mode 100644
index 0000000..6c6e644
--- /dev/null
+++ b/src/components/common/ReplyItem.jsx
@@ -0,0 +1,59 @@
+import dateFormat from '../../utils/dateFormat';
+import hourFormat from '../../utils/hourFormat';
+import NameTag from './NameTag';
+import Remix from './Remix';
+
+const ReplyItem = ({
+    index = 0,
+    userObject = { userID: 0, userImage: null, userName: '홍길동' },
+    replyContent = '작성된 내용이 없어요.',
+    writtenDateTime = '1970-01-01',
+    isMyReply = false,
+    isEditMode = false,
+}) => {
+    return (
+        <article className="reply-item">
+            {isEditMode && (
+                <div className="reply-item-checkbox-wrapper">
+                    <input type="checkbox" id={`chkReplyItem${index}`} />
+
+                    <label htmlFor={`chkReplyItem${index}`}>
+                        <div className="toggles-indicator">
+                            <Remix iconName={'check-line'} iconSize={0.6} />
+                        </div>
+                    </label>
+                </div>
+            )}
+
+            <div className="reply-item-body">
+                <div className="reply-item-user">
+                    <NameTag userObject={userObject} />
+
+                    {isMyReply && (
+                        <div className="reply-item-user-controls">
+                            <span>수정</span>
+                            <span>·</span>
+                            <span>삭제</span>
+                        </div>
+                    )}
+                </div>
+
+                <div className="reply-content-wrapper">
+                    <div className="reply-depth-indicator"></div>
+
+                    <div className="reply-content-container">
+                        <div className="reply-content-text">{replyContent}</div>
+
+                        <div className="reply-item-datetime">
+                            <span>{dateFormat(writtenDateTime)}</span>
+                            <span>·</span>
+                            <span>{hourFormat(writtenDateTime)}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export default ReplyItem;
diff --git a/src/components/common/ReviewItem.jsx b/src/components/common/ReviewItem.jsx
new file mode 100644
index 0000000..b10fc95
--- /dev/null
+++ b/src/components/common/ReviewItem.jsx
@@ -0,0 +1,49 @@
+import Remix from './Remix';
+import NameTag from './NameTag';
+import StarRating from './StarRating';
+import dateFormat from '../../utils/dateFormat';
+
+const ReviewItem = ({
+    index = 0,
+    userObject = { userID: 0, userImage: null, userName: '홍길동' },
+    reviewContent = '내용 없음',
+    starPoint = 0,
+    writtenDate = '1970-01-01',
+    isEditMode = false,
+}) => {
+    return (
+        <article className="review-item">
+            {isEditMode && (
+                <div className="review-item-checkbox-wrapper">
+                    <input type="checkbox" id={`chkReviewItem${index}`} />
+
+                    <label htmlFor={`chkReviewItem${index}`}>
+                        <div className="toggles-indicator">
+                            <Remix iconName={'check-line'} iconSize={0.6} />
+                        </div>
+                    </label>
+                </div>
+            )}
+
+            <dl className="review-item-descriptions">
+                <dt className="review-item-author">
+                    <NameTag userObject={userObject} />
+                </dt>
+
+                <dd className="review-item-content">
+                    <div>{reviewContent}</div>
+                </dd>
+
+                <hr />
+
+                <dd className="review-item-summary">
+                    <StarRating currentPoint={starPoint} isClickable={false} />
+
+                    {dateFormat(writtenDate)}
+                </dd>
+            </dl>
+        </article>
+    );
+};
+
+export default ReviewItem;
diff --git a/src/components/common/ReviewTotalScore.jsx b/src/components/common/ReviewTotalScore.jsx
new file mode 100644
index 0000000..d0d61e8
--- /dev/null
+++ b/src/components/common/ReviewTotalScore.jsx
@@ -0,0 +1,68 @@
+import Remix from './Remix';
+
+const ReviewTotalScore = ({
+    reviewTarget = '리뷰 대상',
+    reviewScoreEverage = null,
+    reviewCount = 0,
+    reviewSummary = '아직 요약할 수 있는 리뷰가 작성되지 않았어요.',
+    areYouSure = false,
+}) => {
+    return (
+        <section id="review-total-score">
+            <div className="review-score-wrapper">
+                <p className="review-score-target">
+                    <span className="review-score-target-name">
+                        {reviewTarget}
+                    </span>
+
+                    <span>평점</span>
+                </p>
+
+                <div className="review-score-everage">
+                    <svg
+                        width="32"
+                        height="31"
+                        viewBox="0 0 32 31"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M14.3503 1.40717C15.1447 0.24803 16.8553 0.248029 17.6497 1.40717L21.946 7.67597C22.2061 8.05543 22.589 8.33364 23.0303 8.46371L30.3199 10.6126C31.6678 11.0099 32.1964 12.6368 31.3395 13.7506L26.7051 19.7737C26.4246 20.1383 26.2783 20.5885 26.291 21.0483L26.4999 28.6452C26.5385 30.0499 25.1546 31.0554 23.8306 30.5846L16.6701 28.0383C16.2367 27.8842 15.7633 27.8842 15.3299 28.0383L8.16944 30.5846C6.84542 31.0554 5.46146 30.0499 5.5001 28.6452L5.70904 21.0483C5.72168 20.5885 5.57542 20.1383 5.29489 19.7737L0.660544 13.7506C-0.196381 12.6368 0.33224 11.0099 1.68014 10.6126L8.96974 8.46371C9.41099 8.33364 9.79391 8.05543 10.054 7.67597L14.3503 1.40717Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+
+                    <h5 className="review-score-label">
+                        <span className="review-score-label-text">
+                            {reviewScoreEverage ?? '-'}
+                        </span>
+
+                        <span> 점</span>
+                    </h5>
+                </div>
+
+                <p className="review-score-total-count">
+                    <span>총</span>
+
+                    <span>{reviewCount.toLocaleString('ko-KR')}</span>
+
+                    <span>개의 리뷰</span>
+                </p>
+            </div>
+
+            {areYouSure && (
+                <div className="review-ai-summary">
+                    <p className="ai-summary-title">
+                        <Remix iconName={'bard-fill'} iconSize={0.6} />
+
+                        <span>A.I 리뷰 요약</span>
+                    </p>
+
+                    <p className="ai-summary-content">{reviewSummary}</p>
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default ReviewTotalScore;
diff --git a/src/components/common/SendChatItem.jsx b/src/components/common/SendChatItem.jsx
index 0db5a6c..c4161c8 100644
--- a/src/components/common/SendChatItem.jsx
+++ b/src/components/common/SendChatItem.jsx
@@ -1,5 +1,3 @@
-import ProfileImage from '../../assets/images/icon-user.svg?react';
-
 const SendChatItem = ({
     message = '그렇구나 이것은 답변',
     time = '12:34:58',
diff --git a/src/components/common/SignatureImage.jsx b/src/components/common/SignatureImage.jsx
new file mode 100644
index 0000000..34bd5b2
--- /dev/null
+++ b/src/components/common/SignatureImage.jsx
@@ -0,0 +1,11 @@
+const SignatureImage = ({ signMode, existData }) => {
+    return (
+        <div className="cover-signature-image-container">
+            <div id="main-modal-signature-image">
+                <div></div>
+            </div>
+        </div>
+    );
+};
+
+export default SignatureImage;
diff --git a/src/components/common/StarRating.jsx b/src/components/common/StarRating.jsx
index fe75a65..e15eedf 100644
--- a/src/components/common/StarRating.jsx
+++ b/src/components/common/StarRating.jsx
@@ -1,34 +1,47 @@
 import { useState } from 'react';
-import Emptystar from '../../assets/images/element-empty-star.svg?react';
-import Fullstar from '../../assets/images/element-full-star.svg?react';
 
-const StarRating = () => {
-    const [selectedStar, setSelectedStar] = useState(0);
+const StarRating = ({
+    starSize = 0.8,
+    currentPoint = 0,
+    isClickable = true,
+}) => {
+    const [selectedStar, setSelectedStar] = useState(currentPoint);
 
-    const handleStarClick = (index) => {
-        setSelectedStar(index);
+    const handleStarClick = (point) => {
+        isClickable && setSelectedStar(point);
     };
+
     return (
-        <div className="star-container">
-            <div className="star-container-rating">
-                {Array(5)
-                    .fill(null)
-                    .map((_, index) => (
+        <div
+            className={`star-point-wrapper ${isClickable ? '' : 'unclickable'}`}
+        >
+            <div className="star-point-container">
+                {[1, 2, 3, 4, 5].map((item, index) => {
+                    return (
                         <div
+                            className={`star-point-item ${item <= selectedStar ? 'on' : ''}`}
+                            style={{ '--star-size': starSize + 'rem' }}
                             key={index}
-                            className="star-container-rating-element"
-                            onClick={() => handleStarClick(index)}
+                            onClick={() => handleStarClick(item)}
                         >
-                            {index <= selectedStar ? (
-                                <Fullstar />
-                            ) : (
-                                <Emptystar />
-                            )}
+                            <svg
+                                width="32"
+                                height="31"
+                                viewBox="0 0 32 31"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M14.3503 1.40717C15.1447 0.24803 16.8553 0.248029 17.6497 1.40717L21.946 7.67597C22.2061 8.05543 22.589 8.33364 23.0303 8.46371L30.3199 10.6126C31.6678 11.0099 32.1964 12.6368 31.3395 13.7506L26.7051 19.7737C26.4246 20.1383 26.2783 20.5885 26.291 21.0483L26.4999 28.6452C26.5385 30.0499 25.1546 31.0554 23.8306 30.5846L16.6701 28.0383C16.2367 27.8842 15.7633 27.8842 15.3299 28.0383L8.16944 30.5846C6.84542 31.0554 5.46146 30.0499 5.5001 28.6452L5.70904 21.0483C5.72168 20.5885 5.57542 20.1383 5.29489 19.7737L0.660544 13.7506C-0.196381 12.6368 0.33224 11.0099 1.68014 10.6126L8.96974 8.46371C9.41099 8.33364 9.79391 8.05543 10.054 7.67597L14.3503 1.40717Z"
+                                    fill="currentColor"
+                                />
+                            </svg>
                         </div>
-                    ))}
+                    );
+                })}
             </div>
 
-            <p className="star-container-score">{selectedStar + 1}점</p>
+            <p className="star-point-score">{selectedStar.toFixed(1)}점</p>
         </div>
     );
 };
diff --git a/src/components/layout/AreaInfoPanel.jsx b/src/components/layout/AreaInfoPanel.jsx
index d1de4b8..bdb9edb 100644
--- a/src/components/layout/AreaInfoPanel.jsx
+++ b/src/components/layout/AreaInfoPanel.jsx
@@ -77,6 +77,7 @@ const AreaInfoPanel = ({ isActive, onShow }) => {
                         onClick={callSwalDemo}
                     >
                         <Remix iconName={'home-heart-fill'} />
+
                         <span>지역 커뮤니티 보기</span>
                     </button>
                 </div>
@@ -88,8 +89,11 @@ const AreaInfoPanel = ({ isActive, onShow }) => {
 
                     <dd className="area-city-province-name">
                         <Remix iconName={'map-pin-range-fill'} iconSize={0.6} />
+
                         <p>{tempTown.townCity}</p>
+
                         <span>·</span>
+
                         <p>{tempTown.townProvince}</p>
                     </dd>
 
@@ -122,6 +126,7 @@ const AreaInfoPanel = ({ isActive, onShow }) => {
                                           'ko-KR',
                                       )}
                             </span>
+
                             <span>마리의 말랑이들이 있어요.</span>
                         </p>
                     </dd>
@@ -130,6 +135,7 @@ const AreaInfoPanel = ({ isActive, onShow }) => {
                 <div>
                     <div className="area-section-title">
                         <Remix iconName={'chat-thread-fill'} />
+
                         <p>현재 지역에서 진행 중인 글타래</p>
                     </div>
 
diff --git a/src/components/layout/BaseLayout.jsx b/src/components/layout/BaseLayout.jsx
index f0a8ef5..ee2baf7 100644
--- a/src/components/layout/BaseLayout.jsx
+++ b/src/components/layout/BaseLayout.jsx
@@ -5,9 +5,11 @@ import NotificationCard from './NotificationCard';
 import UserProfileCard from './UserProfileCard';
 import AreaInfoPanel from './AreaInfoPanel';
 import Footer from './Footer';
+import MainModal from '../MainModal';
+import TotalSearch from './TotalSearch';
 
 const BaseLayout = () => {
-    const [currentPanelID, setCurrentPanel] = useState(3);
+    const [currentPanelID, setCurrentPanel] = useState(0);
     const [notiStatus, setNotiStatus] = useState(0);
     const location = useLocation();
 
@@ -40,6 +42,17 @@ const BaseLayout = () => {
             <Outlet />
 
             <Footer />
+
+            {/* <TotalSearch /> */}
+
+            <MainModal
+                isActive={currentPanelID === 99}
+                onShow={setCurrentPanel}
+            >
+                <div style={{ padding: '.8rem' }}>
+                    그렇다... 내용을 슬롯으로 집어넣는 것이다
+                </div>
+            </MainModal>
         </>
     );
 };
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index fe1221e..e2419ce 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -107,15 +107,21 @@ const Header = ({ notiCount, onShow }) => {
                     </li>
 
                     <li className="nav-item primary">
-                        <NavLink to="missing">
+                        <NavLink to="/missing">
                             <span>실종신고</span>
                         </NavLink>
                     </li>
+
+                    <li className="nav-item primary">
+                        <NavLink to="/museum">
+                            <span>컴포넌트 박물관</span>
+                        </NavLink>
+                    </li>
                 </ul>
             </nav>
 
             <div id="head-controls">
-                <div id="total-search">
+                <div id="total-search-toggler">
                     <span>키워드 검색</span>
 
                     <Remix iconName={'search-2-line'} iconSize={0.8} />
diff --git a/src/components/layout/MarkerCategory.jsx b/src/components/layout/MarkerCategory.jsx
new file mode 100644
index 0000000..70f86c7
--- /dev/null
+++ b/src/components/layout/MarkerCategory.jsx
@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+const MarkerCategory = () => {
+    const [currentCategory, setCategoryIndex] = useState(0);
+
+    const categoryList = [
+        { label: '전체' },
+        { label: '시설 / 업체' },
+        { label: '실종신고' },
+        { label: '구조요청' },
+    ];
+
+    return (
+        <ul id="marker-category-container">
+            {categoryList.map((item, index) => {
+                return (
+                    <li
+                        className={`marker-category-item ${currentCategory === index && 'on'}`}
+                        key={index}
+                        onClick={() => setCategoryIndex(index)}
+                    >
+                        <span>{item.label}</span>
+                    </li>
+                );
+            })}
+        </ul>
+    );
+};
+
+export default MarkerCategory;
diff --git a/src/components/layout/NotificationCard.jsx b/src/components/layout/NotificationCard.jsx
index 687096e..7b36328 100644
--- a/src/components/layout/NotificationCard.jsx
+++ b/src/components/layout/NotificationCard.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import Remix from '../common/Remix';
 import EmptyList from '../common/EmptyList';
 import tempReplies from '../../datas/temp-notification-replies.json'; // 임시 댓글 데이터
@@ -92,6 +92,15 @@ const NotificationCard = ({ isActive, onShow, onAlarm }) => {
     const unReadReplies = tempReplies.filter((item) => !item.isRead); // 읽지 않은 댓글 알림
     const unReadMessages = tempMessages.filter((item) => item.unReadCount > 0); // 읽지 않은 메시지 알림
 
+    const bgElement = useRef(null);
+
+    const handleMouseHover = (e) => {
+        const trueX = e.nativeEvent.layerX;
+        const trueY = e.nativeEvent.layerY;
+
+        bgElement.current.style.cssText = `--object-x: ${trueX}px; --object-y: ${trueY}px;`;
+    };
+
     if (unReadReplies.length > 0 || unReadMessages.length > 0)
         onAlarm(unReadReplies.length + unReadMessages.length); // 읽지 않은 알림이 1개 이상이면 상위 요소인 BaseLayout으로 해당 내용을 올려보냄
 
@@ -99,6 +108,7 @@ const NotificationCard = ({ isActive, onShow, onAlarm }) => {
         <aside id="notification-card" className={isActive ? 'on' : null}>
             <div className="notification-tab-container">
                 <button
+                    type="button"
                     className={`notification-tab-button replies ${currentTabID === 0 && 'on'}`}
                     title={`${unReadReplies.length}개의 새 댓글이 있어요.`}
                     onClick={() => setCurrentTab(0)}
@@ -116,6 +126,7 @@ const NotificationCard = ({ isActive, onShow, onAlarm }) => {
                 </button>
 
                 <button
+                    type="button"
                     className={`notification-tab-button messages ${currentTabID === 1 && 'on'}`}
                     title={`${unReadMessages.length}개의 새 메시지가 있어요.`}
                     onClick={() => setCurrentTab(1)}
@@ -142,7 +153,11 @@ const NotificationCard = ({ isActive, onShow, onAlarm }) => {
 
             <hr />
 
-            <div className="notification-clear-button-wrapper">
+            <div
+                className="notification-clear-button-wrapper"
+                ref={bgElement}
+                onMouseMove={handleMouseHover}
+            >
                 <button
                     type="button"
                     id="button-clear-notifications"
@@ -152,6 +167,15 @@ const NotificationCard = ({ isActive, onShow, onAlarm }) => {
 
                     <span>확인한 알림 모두 지우기</span>
                 </button>
+
+                <button
+                    type="button"
+                    id="button-notification-card-close"
+                    title="알림 창 닫기"
+                    onClick={() => onShow(0)}
+                >
+                    <Remix iconName={'close-line'} iconSize={1} />
+                </button>
             </div>
         </aside>
     );
diff --git a/src/components/layout/TotalSearch.jsx b/src/components/layout/TotalSearch.jsx
index d72118d..47047e0 100644
--- a/src/components/layout/TotalSearch.jsx
+++ b/src/components/layout/TotalSearch.jsx
@@ -1,7 +1,11 @@
 const TotalSearch = () => {
     return (
-        <div>
-            <div>통합검색 ㄱㄱ</div>
+        <div id="total-search-backdrop">
+            <div className="inner-wrapper">
+                <div className="total-search-input-container">
+                    jpgoawrejgporjg
+                </div>
+            </div>
         </div>
     );
 };
diff --git a/src/components/layout/UserProfileCard.jsx b/src/components/layout/UserProfileCard.jsx
index 77468e2..c616959 100644
--- a/src/components/layout/UserProfileCard.jsx
+++ b/src/components/layout/UserProfileCard.jsx
@@ -17,11 +17,13 @@ const UserProfileCard = ({ isActive, onShow }) => {
         <aside id="user-profile-card" className={isActive ? 'on' : null}>
             <div className="profile-card-title-bar">
                 <Remix iconName={'user-fill'} />
+
                 <p>대표 말랑이</p>
 
                 <button
                     type="button"
                     id="button-profile-card-close"
+                    title="대표 말랑이 창 닫기"
                     onClick={() => onShow(0)}
                 >
                     <Remix iconName={'close-line'} iconSize={1} />
@@ -39,10 +41,13 @@ const UserProfileCard = ({ isActive, onShow }) => {
                     type="button"
                     id="button-show-profile"
                     className="profile-card-buttons"
+                    onClick={() => onShow(99)}
                 >
                     <Remix iconName={'information-2-fill'} />
+
                     <span>프로필</span>
                 </button>
+
                 <button
                     type="button"
                     id="button-edit-profile"
diff --git a/src/pages/ComponentMuseum.jsx b/src/pages/ComponentMuseum.jsx
new file mode 100644
index 0000000..1a4fdfa
--- /dev/null
+++ b/src/pages/ComponentMuseum.jsx
@@ -0,0 +1,108 @@
+import { Link } from 'react-router-dom';
+import ReviewItem from '../components/common/ReviewItem';
+import MallangItem from '../components/common/MallangItem';
+import ArticleItem from '../components/common/ArticleItem';
+import ModalInstruction from '../components/common/ModalInstruction';
+import ReviewTotalScore from '../components/common/ReviewTotalScore';
+import ModalSectionTitle from '../components/common/ModalSectionTitle';
+import ModalDateSeparator from '../components/common/ModalDateSeparator';
+import ModalFormInput from '../components/common/ModalFormInput';
+import ReplyItem from '../components/common/ReplyItem';
+import StarRating from '../components/common/StarRating';
+import ChatItem from '../components/common/ChatItem';
+
+const ComponentMuseum = () => {
+    return (
+        <aside
+            className="inner-wrapper"
+            style={{
+                marginBlockStart: '6.4rem',
+            }}
+        >
+            <p style={{ paddingBlock: '4rem' }}>
+                이곳은 공용 컴포넌트의 박물관... 원하는 것을 골라 쓰시오...
+            </p>
+
+            <p>
+                <Link to="/login">로그인 테스트 페이지</Link>
+            </p>
+
+            <p style={{ marginBlock: '1.2rem' }}>
+                <Link to="/register">회원가입 테스트 페이지</Link>
+            </p>
+
+            <p>
+                <Link to="/whatthehellisgoingonhere">에러 테스트 페이지</Link>
+            </p>
+
+            <div
+                style={{
+                    display: 'flex',
+                    flexFlow: 'column nowrap',
+                    gap: '.8rem',
+                }}
+            >
+                <ChatItem chatContent="맘에 없는 그런 말하고 돌아서면 더 힘들지 그런 건 너무 가슴이 아파 아무 말도 할 수 없는 오늘은 길었던 하루가 다 지나도 뭘 했는지도 모르겠어 그래 이런 건 너무 마음이 아파 아무 것도 할 수 없는 오늘은 있잖아 내가 만약에 내가 너에게 가슴 아픈 말을 했다면 잊어줘 미안해 내가 그러려던 건 아니었는데 하고 전화를 할까 말까" />
+                <ChatItem
+                    chatFrom="opposite"
+                    chatContent="요즘 drowning 이라는 노래를 하루에 10000번 듣고 있음. 그거랑 이호광의 롤라,, 마약이야 진짜,, 롤~~~라~~~~ ㅋㅋㅋㅋㅋㅋ 개웃김 진짜ㅠㅠ"
+                />
+            </div>
+
+            <StarRating />
+            <StarRating currentPoint={5} isClickable={false} />
+
+            <ModalFormInput />
+            <ModalDateSeparator />
+            <ModalSectionTitle />
+            <ReviewTotalScore
+                reviewTarget="김씨마구로"
+                reviewScoreEverage={4.3}
+                reviewCount={12345}
+            />
+            <div>
+                <div
+                    style={{
+                        display: 'flex',
+                        flexFlow: 'column nowrap',
+                        gap: '.8rem',
+                    }}
+                >
+                    <ModalInstruction
+                        index={0}
+                        instEmoji="⚠️"
+                        instHeadline="앗!"
+                        instContent="무언가 신묘한 기분이 든다"
+                    />
+                    <ReplyItem />
+                    <ReplyItem
+                        index={1}
+                        replyContent="이것이 나의 진심 댓글이다"
+                        writtenDateTime="2024-12-24 21:31"
+                        isMyReply={true}
+                        isEditMode={true}
+                    />
+                    <MallangItem />
+                    <MallangItem isEditMode={true} />
+                    <ReviewItem index={1} />
+                    <ReviewItem
+                        index={2}
+                        isEditMode={true}
+                        userObject={{
+                            userID: 2,
+                            userImage: 'https://picsum.photos/24/24?random=1',
+                            userName: '정발산기슭곰발냄새타령부인사잘해',
+                        }}
+                        reviewContent={'인사자뢔'}
+                        starPoint={4.2}
+                        writtenDate="2024-12-24 21:31"
+                    />
+                    <ArticleItem index={1} />
+                    <ArticleItem index={2} isEditMode={true} />
+                </div>
+            </div>
+        </aside>
+    );
+};
+
+export default ComponentMuseum;
diff --git a/src/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx
new file mode 100644
index 0000000..bf3d374
--- /dev/null
+++ b/src/pages/ErrorPage.jsx
@@ -0,0 +1,29 @@
+import { useNavigate } from 'react-router-dom';
+
+const ErrorPage = ({
+    errorCode = 404,
+    errorMessage = '페이지를 찾을 수 없어요.',
+}) => {
+    const navigate = useNavigate();
+
+    return (
+        <section id="full-page-wrapper">
+            <div className="service-container-wrapper">
+                <h1
+                    style={{
+                        fontFamily: 'var(--ff-dingbat)',
+                        fontSize: 'var(--fnt-title-xl)',
+                    }}
+                >
+                    {errorCode} ♤ ♧ † £ ¢
+                </h1>
+
+                <p>{errorMessage}</p>
+
+                <button onClick={() => navigate(-1)}>돌아가기</button>
+            </div>
+        </section>
+    );
+};
+
+export default ErrorPage;
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
new file mode 100644
index 0000000..279f721
--- /dev/null
+++ b/src/pages/LoginPage.jsx
@@ -0,0 +1,64 @@
+import { useNavigate } from 'react-router-dom';
+import Remix from '../components/common/Remix';
+
+const LoginlPage = () => {
+    const navigate = useNavigate();
+    const thisYear = new Date().getFullYear();
+
+    return (
+        <section id="full-page-wrapper">
+            <div className="service-container-wrapper">
+                <div id="login-form-container" className="service-container">
+                    <div className="service-logo-container">
+                        <button onClick={() => navigate(-1)}>뒤로</button>
+
+                        <p>대충 로고</p>
+                    </div>
+
+                    <form id="form-login">
+                        <input
+                            type="text"
+                            id="input-login-account"
+                            placeholder="ID 입력..."
+                        />
+
+                        <input
+                            type="password"
+                            id="input-login-password"
+                            placeholder="비밀번호 입력..."
+                        />
+
+                        <input
+                            type="checkbox"
+                            name="check-something"
+                            id="checkbox-login-constant"
+                        />
+
+                        <label htmlFor="checkbox-login-constant">
+                            <div className="toggles-indicator">
+                                <Remix iconName={'check-line'} iconSize={0.6} />
+                            </div>
+
+                            <span className="toggles-label">ID 기억하기</span>
+                        </label>
+
+                        <button>로그인</button>
+                    </form>
+                </div>
+
+                <div>
+                    <button>회원가입</button>
+
+                    <button>ID / 비밀번호 찾기</button>
+                </div>
+
+                <div className="service-copyright">
+                    Copyright © {thisYear} MallangPlace Inc. All Rights
+                    Reserved.
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default LoginlPage;
diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx
new file mode 100644
index 0000000..fadd9f0
--- /dev/null
+++ b/src/pages/RegisterPage.jsx
@@ -0,0 +1,1479 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Swal from 'sweetalert2';
+
+const RegisterPage = () => {
+    const [currentStep, setStep] = useState(1); // 회원 가입 현재 단계
+    const navigate = useNavigate();
+    const MAX_STEPS = [
+        // 회원 가입 최대 단계
+        { step: 1, label: '이용약관' },
+        { step: 2, label: '기본정보' },
+        { step: 3, label: '동네 설정' },
+        { step: 4, label: '말랑이 설정' },
+        { step: 5, label: '가입완료' },
+    ];
+    const thisYear = new Date().getFullYear();
+
+    const handleRegisterState = (stateMover) => {
+        // 회원 가입 단계 이동 - 이후 무결성 검사시 form data 객체를 여기서 단계별로 검사한다.
+        if (currentStep === MAX_STEPS.length && stateMover === 1) return;
+
+        if (currentStep === 1 && stateMover === -1) return;
+
+        setStep(currentStep + stateMover * 1);
+
+        console.log(currentStep);
+    };
+
+    return (
+        <section id="full-page-wrapper">
+            <div
+                id="register-form-wrapper"
+                className="service-container-wrapper"
+            >
+                <div id="register-form-container" className="service-container">
+                    <div className="service-logo-container">
+                        <button onClick={() => navigate(-1)}>뒤로</button>
+
+                        <p>대충 로고</p>
+                    </div>
+
+                    <form
+                        id="form-register"
+                        style={{ '--total-register-steps': MAX_STEPS.length }}
+                    >
+                        {/** 회원 가입 단계에 따라 form 내부 컨테이너를 이동시킨다. */}
+
+                        <ul
+                            className="current-register-state"
+                            style={{ '--current-step': currentStep }}
+                        >
+                            <span></span>
+                            {MAX_STEPS.map((item, index) => {
+                                return (
+                                    <li
+                                        key={index}
+                                        className={`register-state-item ${item.step === currentStep && 'current'}`}
+                                    >
+                                        <p className="step-name">
+                                            {item.label}
+                                        </p>
+
+                                        <div className="step-indicator"></div>
+                                    </li>
+                                );
+                            })}
+                        </ul>
+
+                        <aside
+                            id="register-state-wrapper"
+                            style={{
+                                '--current-register-screen': currentStep,
+                            }}
+                        >
+                            <div
+                                className={`state-container ${currentStep && 'show'}`}
+                                data-index={1}
+                            >
+                                <div id="terms-of-service">
+                                    <h2>제1장 총 칙</h2>
+
+                                    <h3>제1조 (목적)</h3>
+                                    <p>
+                                        이 약관(이하 “약관”이라 합니다)은
+                                        주식회사 말랑스(이하 “회사”라 합니다)와
+                                        이용 고객(이하 “회원”이라 합니다)간에
+                                        회사가 제공하는 서비스(이하 “서비스”라
+                                        합니다)를 이용함에 있어 회원과 회사간의
+                                        권리, 의무 및 책임사항, 이용조건 및 절차
+                                        등 기본적인 사항을 규정함을 목적으로
+                                        합니다.
+                                    </p>
+
+                                    <h3>제2조 (용어의 정의)</h3>
+                                    <p>
+                                        본 약관에서 사용되는 용어의 정의는
+                                        다음과 같습니다.
+                                    </p>
+
+                                    <ol className="big-numbs">
+                                        <li>
+                                            “서비스” : 회사가 제공하는
+                                            수중레져(투어∙체험∙교육∙커뮤니티
+                                            등으로 이에 한정되지 않음) 관련
+                                            상품∙용역∙서비스 등(이하
+                                            “상품등”이라 합니다)에 대한
+                                            예약∙구매∙정보제공∙추천 등을 위한
+                                            온라인 플랫폼 서비스를 의미합니다.
+                                            서비스는 구현되는 장치나 단말기(PC,
+                                            휴대형 단말기 등의 각종 유무선
+                                            장치를 포함하며 이에 한정되지
+                                            않음)와 상관 없이 말랑플레이스 및
+                                            말랑플레이스 관련 웹(Web)∙앱(App)
+                                            등의 제반 서비스를 의미하며, 회사가
+                                            공개한 API를 이용하여 제3자가 개발
+                                            또는 구축한 프로그램이나 서비스를
+                                            통하여 이용자에게 제공되는 경우를
+                                            포함합니다. 서비스는 수중레져 문화가
+                                            변하고 기술이 발전함에 따라
+                                            지속적으로 함께 변화∙성장해
+                                            나갑니다.
+                                        </li>
+                                        <li>
+                                            “회원” : 서비스에 접속하여 본 약관에
+                                            따라 회사와 이용계약을 체결하고
+                                            회사가 제공하는 서비스를 이용하는
+                                            고객을 말하며, 회원계정(ID/PW)을
+                                            생성하지 않은 일반 고객(일명 비회원
+                                            고객)도 포함됩니다.
+                                        </li>
+                                        <li>
+                                            “판매자” : 회사가 제공하는 서비스를
+                                            이용하여 자신의 상품∙용역∙서비스
+                                            등을 판매하는 자를 의미하며,
+                                            회사로부터 예약∙판매 대행, 광고
+                                            서비스 등을 제공받는 자를 말합니다.
+                                        </li>
+                                        <li>
+                                            “게시물” : 회원 및 이용 고객이
+                                            서비스에 게시 또는 등록하는 부호(URL
+                                            포함), 문자, 음성, 음향, 영상(동영상
+                                            포함), 이미지(사진 포함), 파일 등을
+                                            말합니다.
+                                        </li>
+                                        <li>
+                                            “쿠폰” : 회원이 서비스를 이용할 때
+                                            표시된 금액 또는 비율만큼 이용
+                                            금액을 할인 받을 수 있는
+                                            할인권∙우대권
+                                            등(온라인∙모바일∙오프라인 등 형태를
+                                            불문)를 말합니다. 쿠폰의 종류 및
+                                            내용은 회사의 정책에 따라 달라질 수
+                                            있습니다.
+                                        </li>
+                                        <li>
+                                            “포인트” : 회사가 회원의 서비스
+                                            이용에 따른 혜택 또는 서비스 이용상
+                                            편의를 위해 회원에게 제공하는
+                                            것으로서 서비스 내 상품 등 결제시
+                                            활용할 수 있는 수치화 된 가상의
+                                            데이터를 말합니다. 구체적인 이용
+                                            방법, 그 명칭(예: 마일리지 등) 및
+                                            현금 환급가능성 등은 회사의 정책에
+                                            따라 달라질 수 있습니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제3조 (약관의 효력 및 변경)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            본 약관은 서비스를 이용하고자 하는
+                                            모든 회원에 대하여 그 효력을
+                                            발생합니다. 단, 일부 특정 서비스'의
+                                            경우 본 약관이 아닌 회사에 해당
+                                            서비스를 제공하는 사업자의 약관이
+                                            적용됩니다(자세한 안내는 각 서비스
+                                            영역에 별도 표시).
+                                        </li>
+                                        <li>
+                                            본 약관은 회원이 서비스 가입 시 열람
+                                            할 수 있으며, 회사는 회원이 원할 때
+                                            언제든지 약관을 열람 할 수 있도록
+                                            회사 홈페이지 또는 앱 내에
+                                            게시합니다.
+                                        </li>
+                                        <li>
+                                            회사는 『약관의 규제에 관한 법률』,
+                                            『전자상거래 등에서의 소비자보호에
+                                            관한 법률』, 『정보통신망 이용촉진
+                                            및 정보보호(이하 “정보통신망법”이라
+                                            합니다)』, , 『소비자기본법』,
+                                            『전자문서 및 전자거래 기본법』 등
+                                            관련법에 위배되지 않는 범위 내에서
+                                            본 약관을 개정할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회사가 약관을 변경할 경우에는
+                                            적용일자, 변경사유를 명시하여
+                                            적용일로부터 7일 이전부터
+                                            공지합니다. 다만, 회원에게 불리한
+                                            약관 변경인 경우에는 그 적용일로부터
+                                            30일전부터 위와 같은 방법으로
+                                            공지하고, E-mail, 알림톡 등으로
+                                            회원에게 개별 통지합니다. 단, 회원의
+                                            연락처 미기재, 변경 후 미수정 등으로
+                                            인하여 개별 통지가 어려운 경우
+                                            공지를 개별 통지로 간주합니다.
+                                        </li>
+                                        <li>
+                                            회사가 제4항에 따라 개정약관을 공지
+                                            또는 통지하면서, 회원에게 약관 변경
+                                            적용일 까지 거부의사를 표시하지
+                                            않으면 약관의 변경에 동의한 것으로
+                                            간주한다는 내용을 공지 또는
+                                            통지하였음에도 회원이 명시적으로
+                                            약관 변경에 대한 거부의사를 표시하지
+                                            아니하는 경우 회원이 개정약관에
+                                            동의한 것으로 간주합니다.
+                                        </li>
+                                        <li>
+                                            회원은 변경된 약관에 동의하지
+                                            아니하는 경우 서비스의 이용을
+                                            중단하고 이용계약을 해지할 수
+                                            있습니다.
+                                        </li>
+                                        <li>
+                                            회원은 약관 변경에 대하여 주의의무를
+                                            다하여야 하며, 변경된 약관의 부지로
+                                            인한 회원의 피해는 회사가 책임지지
+                                            않습니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>
+                                        제4조 (약관 외 준칙 및 관련법령과의
+                                        관계)
+                                    </h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            본 약관 또는 개별약관에서 정하지
+                                            않은 사항은 『전기통신사업법』,
+                                            『전자문서 및 전자거래 기본법』,
+                                            『정보통신망 이용촉진 및 정보보호
+                                            등에 관한 법률』, 『전자상거래
+                                            등에서의 소비자보호에 관한 법률』,
+                                            『개인정보보호법』 등 관련 법의 규정
+                                            및 회사가 정한 서비스의 세부이용지침
+                                            등의 규정에 따릅니다. 또한 본
+                                            약관에서 정한 회사의 책임 제한
+                                            규정은 관련 법령이 허용하는
+                                            최대한도의 범위 내에서 적용됩니다.
+                                        </li>
+                                        <li>
+                                            회사는 필요한 경우 서비스 내의
+                                            개별항목에 대하여 개별약관 또는
+                                            운영원칙을 정할 수 있으며, 본 약관과
+                                            개별약관 또는 운영원칙의 내용이
+                                            상충되는 경우에는 개별약관 또는
+                                            운영원칙을 의 내용이 우선
+                                            적용됩니다.
+                                        </li>
+                                    </ol>
+
+                                    <h2>제2장 이용계약의 체결</h2>
+
+                                    <h3>제5조 (이용계약의 성립)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            이용계약은 회원이 되고자 하는
+                                            자(이하 “가입신청자”)가 약관의
+                                            내용에 동의를 하고, 회사가 정한 가입
+                                            양식에 따라 회원정보를 기입하여
+                                            회원가입신청을 하고 회사가 이러한
+                                            신청에 대하여 승인함으로써
+                                            체결됩니다.
+                                        </li>
+                                        <li>
+                                            회원은 다수의 아이디(ID)를 생성하여
+                                            사용할 수 있으나, 본인인증이 필요한
+                                            일부 서비스의 경우에는 최초
+                                            본인인증된 1개 아이디(ID)로만 이용이
+                                            가능합니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제6조 (이용계약의 유보 및 거절)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회사는 다음 각 호에 해당하는 신청에
+                                            대하여는 승인 하지 않거나 사후에
+                                            이용계약을 해지할 수 있습니다.
+                                            <ol className="big-numbs">
+                                                <li>
+                                                    가입신청서의 내용을 허위로
+                                                    기재하거나 기재누락∙오기가
+                                                    있는 경우
+                                                </li>
+                                                <li>
+                                                    다른 사람의 명의, E-mail,
+                                                    연락처 등을 이용한 경우
+                                                </li>
+                                                <li>
+                                                    관계법령에 위배되거나 사회의
+                                                    안녕질서 또는 미풍양속을
+                                                    저해할 목적으로 신청한 경우
+                                                </li>
+                                                <li>
+                                                    가입신청자가 본 약관에
+                                                    의하여 이전에 회원자격을
+                                                    상실한 적이 있는 경우, 단
+                                                    회사의 사전재가입 승낙을
+                                                    얻은 경우에는 예외로 함
+                                                </li>
+                                                <li>
+                                                    회원의 귀책사유로 인하여
+                                                    승인이 불가능한 경우
+                                                </li>
+                                                <li>
+                                                    이미 가입된 회원과
+                                                    전화번호나 E-mail 정보가
+                                                    동일한 경우
+                                                </li>
+                                                <li>
+                                                    부정한 용도 또는 영리를
+                                                    추구할 목적으로 본 서비스를
+                                                    이용하고자 하는 경우
+                                                </li>
+                                                <li>
+                                                    기타 본 약관에 위배되거나
+                                                    위법 또는 부당한
+                                                    이용신청임이 확인된 경우 및
+                                                    회사가 합리적인 판단에
+                                                    의하여 필요하다고 인정하는
+                                                    경우
+                                                </li>
+                                                <li>
+                                                    만 14세 미만의 아동이 신청할
+                                                    경우
+                                                </li>
+                                            </ol>
+                                        </li>
+                                        <li>
+                                            제1항에 따른 신청에 있어 회사는
+                                            전문기관을 통한 휴대전화번호 인증
+                                            내지 실명확인을 통한 본인인증을
+                                            요청할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회사는 아래 각 호에 해당하는
+                                            경우에는 회원등록의 승낙을 유보할 수
+                                            있습니다.
+                                            <ol className="big-numbs">
+                                                <li>
+                                                    제공서비스 설비용량에
+                                                    현실적인 여유가 없는 경우
+                                                </li>
+                                                <li>
+                                                    서비스를 제공하기에는
+                                                    기술적으로 문제가 있다고
+                                                    판단되는 경우
+                                                </li>
+                                                <li>
+                                                    회사가 재정적, 기술적으로
+                                                    필요하다고 인정하는 경우
+                                                </li>
+                                                <li>
+                                                    제2항에 따른 실명확인 및
+                                                    본인인증 절차를 진행 중인
+                                                    경우
+                                                </li>
+                                            </ol>
+                                        </li>
+                                        <li>
+                                            제1항과 제3항에 따라 회원가입신청의
+                                            승낙을 하지 아니하거나 유보한 경우,
+                                            회사는 승낙거절 또는 유보 사실을
+                                            가입신청자에게 회사가 정하는 방법에
+                                            따라 통지합니다.
+                                        </li>
+                                        <li>
+                                            이용계약의 성립 시기는 회사가
+                                            ‘가입완료’ 사실을 신청절차 상에
+                                            표시하거나 별도로 통지한 시점으로
+                                            합니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제7조 (회원 정보의 관리)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회원은 웹사이트 또는 앱 내에 구비된
+                                            정보수정 기능 내지 고객센터 등을
+                                            통해 개인정보를 열람∙변경∙수정 할 수
+                                            있습니다. 다만, 일부 개인정보의 경우
+                                            본인인증 절차가 필요할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회원은 등록한 E-mail 주소 또는
+                                            연락처가 변경된 경우 회원정보의
+                                            최신성 유지를 위해 제1항에 따라
+                                            변경해야 하며 이를 변경하지 않아
+                                            발생 할 수 있는 모든 불이익은 회원이
+                                            부담합니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제8조 (계정정보의 관리책임)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            아이디, 비밀번호 등 계정정보의
+                                            관리책임은 회원에게 있으며, 회원은
+                                            계정정보를 타인에게 양도 내지 대여할
+                                            수 없습니다.
+                                        </li>
+                                        <li>
+                                            회사는 회사의 귀책사유로 인한 경우를
+                                            제외하고 계정정보의 유출, 양도,
+                                            대여, 공유 등으로 인한 손실이나
+                                            손해에 대하여 아무런 책임을 지지
+                                            않습니다.
+                                        </li>
+                                        <li>
+                                            회원은 제3자가 본인의 계정을
+                                            사용하고 있음(대여 포함)을 인지한
+                                            경우에는 즉시 비밀번호를 수정하는
+                                            등의 조치를 취하고 이를 회사에
+                                            통보하여야 합니다. 회원이 본항에
+                                            따른 통지를 하지 아니하여 발생하는
+                                            모든 불이익에 대한 책임은 회원에게
+                                            있습니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제9조 (회원정보의 수집과 보호)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회사는 서비스를 제공함에 있어
+                                            개인정보 관련 법령을 준수하고 그에
+                                            따라 회원 정보를
+                                            수집∙이용∙보관∙제공합니다.
+                                        </li>
+                                        <li>
+                                            회사는 회원이 서비스 이용 과정에서
+                                            직접 제공한 정보 외에도 개인정보
+                                            보호 등 관련 법령에서 정한 절차에
+                                            따라 그밖의 정보를 수집 및 이용 또는
+                                            제3자에게 제공할 수 있습니다. 이
+                                            경우 회사는 관련 법령에 따라
+                                            회원으로부터 필요한 동의를 받거나
+                                            관련 법령에서 정한 절차를
+                                            준수합니다.
+                                        </li>
+                                        <li>
+                                            회사는 개인정보 보호 관련 법령이
+                                            정하는 바에 따라 회원의 개인정보를
+                                            보호하기 위해 노력하며, 회사의
+                                            개인정보 처리에 관한 자세한 사항은
+                                            개인정보처리방침을 통해 언제든지
+                                            확인할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회사의 공식 사이트 또는 앱 이외에
+                                            링크된 사이트에서는 회사의
+                                            개인정보처리방침이 적용되지
+                                            않습니다. 링크된 사이트 및 서비스를
+                                            제공하는 제3자의 개인정보 처리에
+                                            대해서는 해당 사이트 및 제3자의
+                                            개인정보처리방침을 확인할 책임이
+                                            회원에게 있으며, 회사는 이에 대하여
+                                            책임을 부담하지 않습니다.
+                                        </li>
+                                    </ol>
+
+                                    <h2>제3장 서비스 이용</h2>
+
+                                    <h3>제10조 (서비스의 이용 개시)</h3>
+                                    <p>
+                                        회원은 회사가 이용신청을 승낙한 때부터
+                                        서비스를 사용할 수 있고 회사는 위 승낙한
+                                        때부터 본약관에 따라 서비스를
+                                        제공합니다.
+                                    </p>
+                                    <p>
+                                        강사, 리조트의 권한이 필요한 기능에
+                                        대해서는 별도의 계약을 통해 권한이
+                                        주어집니다.
+                                    </p>
+
+                                    <h3>제11조 (서비스의 이용시간)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            서비스는 회사의 업무상 또는 기술상
+                                            특별한 사유가 없는 한 연중무휴 1일
+                                            24시간 제공함을 원칙으로 합니다.
+                                            회사는 서비스를 일정범위로 분할하여
+                                            각 범위 별로 이용가능시간을 별도로
+                                            지정할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회사는 서비스의 제공에 필요한 경우
+                                            정기점검 내지 수시점검을 실시할 수
+                                            있으며, 정기점검 내지 수시점검
+                                            시간은 서비스제공화면에 공지한 바에
+                                            따릅니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제12조 (서비스의 내용)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            서비스는 제2조 제1호에서 정의한 바에
+                                            따라 회사가 회원에게 제공하는 여가
+                                            관련 온라인 플랫폼 서비스를
+                                            말합니다. 서비스는 현재 제공되는
+                                            상품등에 한정되지 않으며, 향후
+                                            추가로 개발되거나 다른 회사와의 제휴
+                                            등을 통해 추가∙변경∙수정될 수 있고,
+                                            이 과정에서 일부 서비스의 경우 본인
+                                            인증 절차를 요구할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회사는 회원 감소 등으로 인한 원활한
+                                            서비스 제공의 곤란 및 수익성 악화,
+                                            기술 진보에 따른 차세대 서비스로의
+                                            전환 필요성, 서비스 제공과 관련한
+                                            회사 정책의 변경 등 기타 상당한
+                                            이유가 있는 경우에 운영상, 기술상의
+                                            필요에 따라 제공하고 있는 전부 또는
+                                            일부 서비스를 변경 또는 중단할 수
+                                            있습니다.
+                                        </li>
+                                        <li>
+                                            서비스의 내용, 이용방법, 이용시간에
+                                            대하여 변경 또는 서비스 중단이 있는
+                                            경우에는 변경 또는 중단될 서비스의
+                                            내용 및 사유와 일자 등은 그 변경
+                                            또는 중단 전에 회사 홈페이지 또는
+                                            서비스 내 "공지사항" 화면 등 회원이
+                                            충분히 인지할 수 있는 방법으로
+                                            30일의 기간을 두고 사전에
+                                            공지합니다.
+                                        </li>
+                                        <li>
+                                            무료로 제공되는 서비스의 특성상
+                                            본조에 따른 서비스의 전부 또는 일부
+                                            종료 시 관련법령에서 특별히 정하지
+                                            않는 한 회원에게 별도의 보상을 하지
+                                            않습니다.
+                                        </li>
+                                        <li>
+                                            서비스 이용에 관한 개별 안내,
+                                            상품등에 대한 정보, 예약시 유의사항,
+                                            취소∙환불정책 등은 개별 서비스
+                                            이용안내∙소개 등을 통해 제공하고
+                                            있습니다.
+                                        </li>
+                                        <li>
+                                            회원은 전항의 안내∙소개 등을 충분히
+                                            숙지하고 서비스를 이용하여야 합니다.
+                                            회사는 통신판매중개자로서 통신판매의
+                                            당사자가 아니고, 판매자가 상품등
+                                            이용에 관한 이용정책이나 예약에 관한
+                                            취소∙환불정책을 별도로 운영하는
+                                            경우가 있을 수 있으므로, 회원은
+                                            상품등 이용 또는 예약시 반드시 그
+                                            내용을 확인해야 합니다. 회원이 이
+                                            내용을 제대로 숙지하지 못해 발생한
+                                            피해에 대해서는 회사가 책임을
+                                            부담하지 않습니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제13조 (서비스의 변경 및 중지)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회사는 변경될 서비스의 내용 및
+                                            제공일자를 본 약관 제22조에서 정한
+                                            방법으로 회원에게 고지하고 서비스를
+                                            변경하여 제공할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회사는 다음 각 호에 해당하는 경우
+                                            서비스의 전부 또는 일부를 제한하거나
+                                            중지할 수 있습니다.
+                                            <ol className="big-numbs">
+                                                <li>
+                                                    일부 서비스를 이용함에 있어
+                                                    요구되는 본인인증 절차를
+                                                    거치지 않거나, 본인인증
+                                                    정보가 위조·변조·허위의
+                                                    정보임이 확인된 경우
+                                                </li>
+                                                <li>
+                                                    회원이 회사의 영업활동을
+                                                    방해하는 경우
+                                                </li>
+                                                <li>
+                                                    시스템 정기점검, 서버의 증설
+                                                    및 교체, 네트워크의 불안정
+                                                    등의 시스템 운영상 필요한
+                                                    경우
+                                                </li>
+                                                <li>
+                                                    정전, 서비스 설비의 장애,
+                                                    서비스 이용폭주,
+                                                    기간통신사업자의 설비 보수
+                                                    또는 점검∙중지 등으로 인하여
+                                                    정상적인 서비스 제공이
+                                                    불가능한 경우
+                                                </li>
+                                                <li>
+                                                    기타 중대한 사유로 인하여
+                                                    회사가 서비스 제공을
+                                                    지속하는 것이 부적당하다고
+                                                    인정하는 경우
+                                                </li>
+                                                <li>
+                                                    기타 천재지변, 국가비상사태
+                                                    등 불가항력적 사유가 있는
+                                                    경우
+                                                </li>
+                                            </ol>
+                                        </li>
+                                        <li>
+                                            제2항에 의한 서비스 중단의 경우
+                                            회사는 제22조에서 정한 방법으로
+                                            회원에게 통지합니다. 다만, 회사가
+                                            통제할 수 없는 사유로 인한 서비스의
+                                            중단(운영자의 고의∙과실이 없는 장애,
+                                            시스템다운 등)으로 인하여 사전
+                                            통지가 불가능한 경우에는 그러하지
+                                            아니합니다.
+                                        </li>
+                                        <li>
+                                            회사는 제2항에 따른 서비스의 변경,
+                                            중지로 발생하는 문제에 대해서 어떠한
+                                            책임도 지지 않습니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제14조 (정보 제공 및 광고의 게재)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회사가 회원에게 서비스를 제공할 수
+                                            있는 서비스 투자기반의 일부는 광고
+                                            게재를 통한 수익으로부터 나옵니다.
+                                            이에 회원은 서비스 이용 시 서비스
+                                            화면 상 노출되는 광고 게재에 대해
+                                            동의합니다.
+                                        </li>
+                                        <li>
+                                            회사는 회원의 게시물 내용, 검색 내용
+                                            뿐만 아니라 언어, 쿠키 및 기기정보,
+                                            IP 주소, 브라우저 유형, 운영체제 및
+                                            요청 일시와 같은 표준 로그 정보 등을
+                                            활용한 맞춤광고를 제공합니다. 이에
+                                            대한 자세한 사항은
+                                            "개인정보처리방침"을 참고하시기
+                                            바랍니다.
+                                        </li>
+                                        <li>
+                                            회원이 서비스상에 게재되어 있는
+                                            광고를 이용하거나 서비스를 통한
+                                            광고주의 판촉활동에 다른 상품등을
+                                            이용하는 경우, 이는 전적으로 회원과
+                                            광고주 간의 법률관계이므로, 그로
+                                            인해 발생한 회원과 광고주간 분쟁 등
+                                            제반 문제는 회원과 광고주간에 직접
+                                            해결하여야 하며, 이와 관련하여
+                                            회사는 어떠한 책임도 지지 않습니다.
+                                        </li>
+                                        <li>
+                                            회사는 회원으로부터 수집한
+                                            개인정보를 통해 회원의 서비스 이용
+                                            중 필요하다고 판단되는 다양한 마케팅
+                                            정보를 SMS(LMS), 카카오알림톡,
+                                            스마트폰 알림 (Push 알림), E-mail
+                                            등을 활용하여 발송할 수 있으며,
+                                            회원은 이에 동의합니다. 다만, 회원은
+                                            거래관련정보 및 고객문의 등에 대한
+                                            답변을 제외하고 관련법에 따라
+                                            언제든지 마케팅 수신 동의를 철회하실
+                                            수 있으며, 이 경우 회사는 전단의
+                                            마케팅 정보 등을 제공하는 행위를
+                                            중단합니다(단, 시스템 반영에 시차가
+                                            있을 수 있음).
+                                        </li>
+                                    </ol>
+
+                                    <h3>제15조 (게시물에 대한 권리)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            게시물의 저작권은 회원에게 있습니다.
+                                            다만 회사는 게시∙전달∙공유 목적으로
+                                            회원이 작성한 게시물을
+                                            이용∙편집∙수정하여 이용할 수 있고,
+                                            회사의 다른 서비스 또는
+                                            연동채널∙판매채널에 이를 게재하거나
+                                            활용할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회사가 서비스 내 게재 이외의
+                                            목적으로 게시물을 사용할 경우
+                                            게시물에 대한 게시자를 반드시
+                                            명시해야 합니다. 단, 게시자를 알 수
+                                            없는 익명 게시물이나 비영리적인
+                                            경우에는 그러하지 아니합니다.
+                                        </li>
+                                        <li>
+                                            회원은 게시물을 작성할 때 타인의
+                                            저작권 등 지식재산권을 포함하여 여타
+                                            권리를 침해하지 않아야 하고, 회사는
+                                            그에 대한 어떠한 책임도 부담하지
+                                            않습니다. 만일 회원이 타인의 권리
+                                            등을 침해하였음을 이유로 타인이
+                                            회사를 상대로 이의신청,
+                                            손해배상청구, 삭제요청 등을 제기한
+                                            경우 회사는 그에 필요한 조치를 취할
+                                            수 있으며, 그에 따른 모든 비용이나
+                                            손해배상책임은 회원이 부담합니다.
+                                        </li>
+                                        <li>
+                                            회사는 회원이 이용계약을 해지하고
+                                            사이트를 탈퇴하거나 적법한 사유로
+                                            해지된 경우 해당 회원이 게시하였던
+                                            게시물을 삭제할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회원이 작성한 게시물에 대한 모든
+                                            권리 및 책임은 이를 게시한 회원에게
+                                            있으며, 회사는 회원이 게시하거나
+                                            등록한 게시물이 다음 각 호에
+                                            해당한다고 판단되는 경우에 사전통지
+                                            없이 삭제 또는 임시조치할 수 있고,
+                                            이에 대하여 회사는 어떠한 책임도
+                                            지지 않습니다.
+                                            <ol className="big-numbs">
+                                                <li>
+                                                    다른 회원 또는 제3자를
+                                                    비방하거나 명예를 손상시키는
+                                                    내용인 경우
+                                                </li>
+                                                <li>
+                                                    공공질서 및 미풍양속에
+                                                    위반되는 내용을 유포하거나
+                                                    링크시키는 경우
+                                                </li>
+                                                <li>
+                                                    불법복제 또는 해킹을
+                                                    조장하는 내용인 경우
+                                                </li>
+                                                <li>
+                                                    회사로부터 사전 승인 받지
+                                                    않고 상업광고, 판촉 내용을
+                                                    게시하는 경우
+                                                </li>
+                                                <li>
+                                                    개인 간 금전거래를 요하는
+                                                    경우
+                                                </li>
+                                                <li>
+                                                    범죄적 행위에 결부된다고
+                                                    인정되는 경우
+                                                </li>
+                                                <li>
+                                                    회사의 저작권, 제3자의
+                                                    저작권 등 기타 권리를
+                                                    침해하는 내용인 경우
+                                                </li>
+                                                <li>
+                                                    타인의 계정정보, 성명 등을
+                                                    무단으로 도용하여 작성한
+                                                    내용이거나, 타인이 입력한
+                                                    정보를 무단으로 위변조한
+                                                    내용인 경우
+                                                </li>
+                                                <li>
+                                                    사적인 정치적 판단이나
+                                                    종교적 견해의 내용으로
+                                                    회사가 서비스 성격에
+                                                    부합하지 않는다고 판단하는
+                                                    경우
+                                                </li>
+                                                <li>
+                                                    동일한 내용을 중복하여 다수
+                                                    게시하는 등 게시의 목적에
+                                                    어긋나는 경우
+                                                </li>
+                                                <li>
+                                                    회사에서 규정한 게시물
+                                                    원칙에 어긋나거나, 게시물을
+                                                    작성하는 위치에 부여된
+                                                    성격에 부합하지 않는 경우
+                                                </li>
+                                                <li>
+                                                    사업주 변경 또는 인테리어
+                                                    공사 등에 따른
+                                                    권리자(사업주)의 게시물 중단
+                                                    또는 삭제 요청이 있는 경우
+                                                </li>
+                                                <li>
+                                                    기타 관계법령에 위배된다고
+                                                    판단되는 경우
+                                                </li>
+                                            </ol>
+                                        </li>
+                                        <li>
+                                            회원의 게시물이 정보통신망법 및
+                                            저작권법 등 관련법에 위반되는 내용을
+                                            포함하는 경우, 권리자는 관련법이
+                                            정한 절차에 따라 해당 게시물의
+                                            게시중단 및 삭제 등을 요청할 수
+                                            있으며, 회사는 관련법에 따라 조치를
+                                            취하여야 합니다.
+                                        </li>
+                                        <li>
+                                            회사는 본조 제2항에 따른 권리자의
+                                            요청이 없는 경우라도 권리침해가
+                                            인정될 만한 사유가 있거나 기타 회사
+                                            정책 및 관련법에 위반되는 경우에는
+                                            관련법에 따라 해당 "게시물"에 대해
+                                            임시조치 등을 취할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            본 조에 따른 세부절차는 정보통신망법
+                                            및 저작권법이 규정한 범위 내에서
+                                            회사가 정한 게시중단요청서비스에
+                                            따릅니다.
+                                        </li>
+                                    </ol>
+
+                                    <p>
+                                        - 게시중단요청 : divechannel79@naver.com
+                                    </p>
+
+                                    <h3>제16조 (권리의 귀속)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            서비스에 대한 저작권 및 지식재산권은
+                                            회사에 귀속됩니다. 단, 게시물 및
+                                            제휴계약에 따라 제공된 저작물 등은
+                                            제외합니다.
+                                        </li>
+                                        <li>
+                                            회사가 제공하는 서비스의 디자인,
+                                            회사가 만든 텍스트,
+                                            스크립트(script), 그래픽, 회원
+                                            상호간 전송 기능 등 회사가 제공하는
+                                            서비스에 관련된 모든 상표, 서비스
+                                            마크, 로고 등에 관한 저작권 기타
+                                            지적재산권은 대한민국 및 외국의
+                                            법령에 기하여 회사가 보유하고 있거나
+                                            회사에게 소유권 또는 사용권이
+                                            있습니다.
+                                        </li>
+                                        <li>
+                                            회원은 본 이용약관으로 인하여
+                                            서비스를 소유하거나 서비스에 관한
+                                            저작권을 보유하게 되는 것이 아니라,
+                                            회사로부터 서비스의 이용을 허락 받게
+                                            되는바, 서비스는 정보취득 또는
+                                            개인용도로만 제공되는 형태로 회원이
+                                            이용할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회원은 명시적으로 허락된 내용을
+                                            제외하고는 서비스를 통해 얻어지는
+                                            회원 상태정보를 영리 목적으로 사용,
+                                            복사, 유통하는 것을 포함하여 회사가
+                                            만든 텍스트, 스크립트, 그래픽의 회원
+                                            상호간 전송기능 등을 복사하거나
+                                            유통할 수 없습니다.
+                                        </li>
+                                        <li>
+                                            회사는 서비스와 관련하여 회원에게
+                                            회사가 정한 이용조건에 따라 계정,
+                                            ID, 콘텐츠 등을 이용할 수 있는
+                                            이용권만을 부여하며, 회원은 이를
+                                            양도, 판매, 담보제공 등의 처분행위를
+                                            할 수 없습니다.
+                                        </li>
+                                        <li>
+                                            회원은 서비스를 이용하는 과정에서
+                                            얻은 정보를 회사의 사전 승낙 없이
+                                            복제, 송신, 출판, 배포, 방송, 편집,
+                                            재가공 등 기타 방법에 의하여 영리
+                                            목적으로 이용하거나 제3자에게
+                                            이용하게 하여서는 안됩니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제17조 (포인트)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            포인트는 회사의 정책에 따라 회원에게
+                                            부여되며, 포인트별 적립기준,
+                                            사용방법, 사용기한 및 제한에 관한
+                                            사항은 별도로 공지하거나 통지합니다.
+                                            단, 포인트 사용기한에 대해 별도로
+                                            안내하지 않은 경우에는 1년으로
+                                            봅니다.
+                                        </li>
+                                        <li>
+                                            포인트는 사용기한 동안 사용되지
+                                            않거나 회원 탈퇴 또는 자격상실
+                                            사유가 발생한 경우 자동으로
+                                            소멸됩니다. 회원 탈퇴 내지
+                                            자격상실로 포인트가 소멸된 경우
+                                            재가입하더라도 소멸된 포인트는
+                                            복구되지 않습니다.
+                                        </li>
+                                        <li>
+                                            회원은 회사가 별도로 명시한 경우를
+                                            제외하고는 포인트를 제3자에게 양도
+                                            할 수 없습니다. 만일 회원이 회사가
+                                            승인하지 않은 방법으로 포인트
+                                            획득/이용한 사실이 확인될 경우
+                                            회사는 포인트를 사용한 예약 신청을
+                                            취소하거나 회원 자격을 정지 또는
+                                            해지할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            포인트 관련 회사의 정책은 회사의
+                                            영업정책에 따라 변동될 수 있습니다.
+                                            회원에게 불리한 변경인 경우에는
+                                            제3조의 규정에 따라 공지 또는
+                                            통지하며 서비스 계속 이용시 동의한
+                                            것으로 간주됩니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제18조 (쿠폰)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            쿠폰은 회사가 유상 또는 무상으로
+                                            발행하는 쿠폰으로 발행대상,
+                                            발행경로, 사용대상 등에 따라 구분될
+                                            수 있으며, 쿠폰의 세부구분,
+                                            할인금액(할인율), 사용방법, 사용기간
+                                            및 제한에 대한 사항은 쿠폰 또는
+                                            서비스 화면에 표시됩니다. 쿠폰의
+                                            종류 및 내용과 발급여부에 관하여는
+                                            회사의 영업정책에 따라 달라질 수
+                                            있습니다.
+                                        </li>
+                                        <li>
+                                            쿠폰은 현금으로 출금될 수 없으며,
+                                            쿠폰에 표시된 사용기간이 만료되거나
+                                            이용계약이 종료되면 소멸합니다.
+                                        </li>
+                                        <li>
+                                            예약거래가 취소될 경우 예약에 이용된
+                                            쿠폰은 회사의 정책에 따라 환원
+                                            여부가 결정되며 자세한 사항은 유선
+                                            고지 내지 예약서비스 화면을 통해
+                                            안내됩니다.
+                                        </li>
+                                        <li>
+                                            회원은 회사가 별도로 명시한 경우를
+                                            제외하고는 쿠폰을 제3자에게 또는
+                                            다른 아이디로 양도 할 수 없으며
+                                            유상으로 거래하거나 현금으로 전환 할
+                                            수 없습니다. 만일 회원이 회사가
+                                            승인하지 않은 방법으로 부정한
+                                            방법으로 쿠폰을 획득/이용한 사실이
+                                            확인될 경우 회사는 회원의 쿠폰을
+                                            사용한 예약 신청을 취소하거나 회원
+                                            자격을 정지 또는 해지할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            쿠폰 관련 회사의 정책은 회사의
+                                            영업정책에 따라 변동될 수 있습니다.
+                                            회원에게 불리한 변경인 경우에는
+                                            제3조의 규정에 따라 공지 또는
+                                            통지하며 서비스 계속 이용시 동의한
+                                            것으로 간주됩니다.
+                                        </li>
+                                    </ol>
+
+                                    <h2>제4장 계약당사자의 의무</h2>
+
+                                    <h3>제20조 (회사의 의무)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회사는 관련법과 본 약관이 금지하거나
+                                            미풍양속에 반하는 행위를 하지
+                                            않으며, 계속적이고 안정적으로
+                                            서비스를 제공하기 위하여 최선을
+                                            다하여 노력합니다.
+                                        </li>
+                                        <li>
+                                            회사는 회원이 안전하게 서비스를
+                                            이용할 수 있도록 개인정보보호를 위해
+                                            보안시스템을 갖추어야 하며
+                                            개인정보처리방침을 공시하고
+                                            준수하며, 회원의 개인정보를 본인의
+                                            승낙 없이 제3자에게 누설, 배포하지
+                                            않고, 이를 보호하기 위하여
+                                            노력합니다.
+                                        </li>
+                                        <li>
+                                            회사는 서비스이용과 관련하여
+                                            회원으로부터 제기된 의견이나 불만이
+                                            정당하다고 인정할 경우에는 그에
+                                            필요한 조치를 취하여야 합니다.
+                                        </li>
+                                        <li>
+                                            회사가 제공하는 서비스로 인하여
+                                            회원에게 손해가 발생한 경우 그러한
+                                            손해가 회사의 고의나 과실에 의해
+                                            발생한 경우에 한하여 회사에서 책임을
+                                            부담하며, 그 책임의 범위는
+                                            통상손해에 한합니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제21조 (회원의 의무)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회원은 기타 관계 법령, 본 약관의
+                                            규정, 이용안내 및 서비스상에 공지한
+                                            주의사항, 회사가 통지하는 사항 등을
+                                            준수하여야 하며, 기타 회사의 업무에
+                                            방해되는 행위를 하여서는 아니
+                                            됩니다.
+                                        </li>
+                                        <li>
+                                            회원은 서비스의 이용권한, 기타
+                                            서비스 이용계약상의 지위를 타인에게
+                                            양도, 증여할 수 없으며 이를 담보로
+                                            제공할 수 없습니다.
+                                        </li>
+                                        <li>
+                                            회원은 서비스 이용과 관련하여 다음
+                                            각 호의 행위를 하여서는 안됩니다.
+                                            <ol className="big-numbs">
+                                                <li>
+                                                    서비스 신청 변경, 본인인증
+                                                    등 서비스 이용과정에서
+                                                    허위내용을 기재·등록·전송
+                                                    등을 하는 행위
+                                                </li>
+                                                <li>
+                                                    다른 회원의 아이디 및
+                                                    비밀번호를 도용하여 부당하게
+                                                    서비스를 이용하거나, 정보를
+                                                    도용하는 행위
+                                                </li>
+                                                <li>
+                                                    타인의 계좌번호 및
+                                                    신용카드번호 등 타인의 허락
+                                                    없이 타인의 결제정보를
+                                                    이용하여 회사의 유료서비스를
+                                                    이용하는 행위
+                                                </li>
+                                                <li>
+                                                    정당한 사유 없이 당사의
+                                                    영업을 방해하는 내용을
+                                                    기재하는 행위
+                                                </li>
+                                                <li>
+                                                    회사가 게시한 정보를
+                                                    변경하는 행위
+                                                </li>
+                                                <li>
+                                                    회사가 정한 정보 이외의
+                                                    정보(컴퓨터 프로그램 등)
+                                                    등을 송신 또는 게시하는 행위
+                                                </li>
+                                                <li>
+                                                    회사와 기타 제3자의 저작권
+                                                    등 지적재산권을 침해하는
+                                                    행위
+                                                </li>
+                                                <li>
+                                                    회사 및 기타 제3자의 명예를
+                                                    손상시키거나 업무를 방해하는
+                                                    행위
+                                                </li>
+                                                <li>
+                                                    외설 또는 폭력적인 메시지,
+                                                    화상, 음성 기타 공공질서
+                                                    미풍양속에 반하는 정보를
+                                                    공개 또는 게시하는 행위
+                                                </li>
+                                                <li>
+                                                    회사의 동의 없이 영리를
+                                                    목적으로 서비스를 사용하는
+                                                    행위
+                                                </li>
+                                                <li>
+                                                    회사의 직원이나 서비스의
+                                                    관리자를 가장하거나 사칭하여
+                                                    또는 타인의 명의를 도용하여
+                                                    글을 게시하거나 메일을
+                                                    발송하는 행위
+                                                </li>
+                                                <li>
+                                                    서비스와 관련된 설비의
+                                                    오동작이나 정보 등의 파괴 및
+                                                    혼란을 유발시키는 컴퓨터
+                                                    바이러스, 기타 다른 컴퓨터
+                                                    코드, 파일, 프로그램 자료를
+                                                    등록 또는 유포하는 행위
+                                                </li>
+                                                <li>
+                                                    회사가 제공하는 소프트웨어
+                                                    등을 개작하거나 리버스
+                                                    엔지니어링, 디컴파일,
+                                                    디스어셈블 및 기타 일체의
+                                                    가공행위를 통하여 서비스를
+                                                    복제, 분해 또는 모방 기타
+                                                    변형하는 행위
+                                                </li>
+                                                <li>
+                                                    자동 접속 프로그램 등을
+                                                    사용하는 등 정상적인 용법과
+                                                    다른 방법으로 서비스를
+                                                    이용하여 회사의 서버에
+                                                    부하를 일으켜 회사의
+                                                    정상적인 서비스를 방해하는
+                                                    행위
+                                                </li>
+                                                <li>
+                                                    다른 회원의 개인정보를 그
+                                                    동의 없이 수집, 저장,
+                                                    공개하는 행위
+                                                </li>
+                                                <li>
+                                                    기타 불법적이거나 회사에서
+                                                    정한 규정을 위반하는 행위
+                                                </li>
+                                            </ol>
+                                        </li>
+                                        <li>
+                                            회사는 회원이 제1항의 행위를 하는
+                                            경우 해당 게시물 등을 삭제 또는 임시
+                                            삭제할 수 있으며 서비스의 이용을
+                                            제한하거나 일방적으로 본 계약을
+                                            해지할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회원은 회원정보, 계정정보에 변경이
+                                            있는 경우 제7조에 따라 이를 즉시
+                                            변경하여야 하며, 더불어 비밀번호를
+                                            철저히 관리하여야 합니다. 회원의
+                                            귀책으로 말미암은 관리소홀, 부정사용
+                                            등에 의하여 발생하는 모든 결과에
+                                            대한 책임은 회원 본인이 부담하며,
+                                            회사는 이에 대한 어떠한 책임도
+                                            부담하지 않습니다.
+                                        </li>
+                                        <li>
+                                            민법상 미성년자인 회원이 유료
+                                            서비스를 이용 할 경우 미성년자인
+                                            회원은 결제 전 법정대리인의 동의를
+                                            얻어야 하며, 만 14세 미만 아동의
+                                            경우 본 서비스를 이용할 수 없습니다.
+                                        </li>
+                                        <li>
+                                            회원은 회사에서 공식적으로 인정한
+                                            경우를 제외하고는 서비스를 이용하여
+                                            상품을 판매하는 영업 활동을 할 수
+                                            없으며, 특히 해킹, 광고를 통한 수익,
+                                            음란사이트를 통한 상업행위,
+                                            상용소프트웨어 불법배포 등을 할 수
+                                            없습니다. 이를 위반하여 발생한 영업
+                                            활동의 결과 및 손실, 관계기관에 의한
+                                            구속 등 법적 조치 등에 관해서는
+                                            회사가 책임을 지지 않으며, 회원은
+                                            이와 같은 행위와 관련하여 회사에
+                                            대하여 손해배상 의무를 집니다.
+                                        </li>
+                                        <li>
+                                            회원은 직접 본인의 정보로 본인인증을
+                                            하여야 하고 이를 타인으로 하여금
+                                            하게 하거나 인증번호 등의 정보를
+                                            노출하여서는 안됩니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제22조 (회원에 대한 통지)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회사가 회원에 대한 통지를 하는 경우
+                                            본 약관에 별도 규정이 없는 한 회원이
+                                            기재한 E-mail로 할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회사는 불특정 다수 회원에 대한
+                                            통지의 경우 서비스 게시판 등에
+                                            게시함으로써 개별 통지에 갈음할 수
+                                            있습니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제23조 (서비스 이용 해지)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회원이 이용계약을 해지하고자 하는
+                                            때에는 사이트 또는 앱을 통해 안내된
+                                            해지방법에 따라 해지를 신청할 수
+                                            있습니다.
+                                        </li>
+                                        <li>
+                                            회사는 등록 해지신청이 접수되면
+                                            회원이 원하는 시점에 해당 회원의
+                                            서비스 이용을 해지하여야 합니다.
+                                        </li>
+                                        <li>
+                                            회원이 계약을 해지할 경우, 관련법 및
+                                            개인정보처리방침에 따라 회사가
+                                            회원정보를 보유할 수 있는 경우를
+                                            제외하고 회원의 개인정보는 해지 즉시
+                                            삭제됩니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제24조 (서비스 이용 제한)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회사는 이용제한정책에서 정하는 바에
+                                            따라 회원이 본 약관상 의무를
+                                            위반하거나 서비스의 정상적인 운영을
+                                            방해한 경우, 경고∙일시적
+                                            이용정지∙영구적 이용정지 등의 단계로
+                                            서비스 이용을 제한하거나 이용계약을
+                                            해지할 수 있습니다. 단, 회원에게
+                                            제6조 제1항의 사유가 있음이
+                                            확인되거나 회원이 서비스 이용과
+                                            관련하여 불법행위를 하거나
+                                            조장∙방조한 경우에는 즉시 영구적
+                                            이용정지 조치 또는 이용계약 해지를
+                                            할 수 있습니다.
+                                        </li>
+                                        <li>
+                                            회사는 회원이 계속해서 1년 이상
+                                            서비스를 이용하지 않은 경우에는,
+                                            정보통신망법에 따라 필요한 조치를
+                                            취할 수 있고, 회원정보의 보호 및
+                                            운영의 효율성을 위해 이용을 제한할
+                                            수 있습니다. ③ 본 조에 따라 서비스
+                                            이용을 제한하거나 계약을 해지하는
+                                            경우에는 회사는 제22조에 따라
+                                            회원에게 통지합니다.
+                                        </li>
+                                        <li>
+                                            회원은 본조에 따른 서비스 이용정지
+                                            기타 서비스 이용과 관련된 이용제한에
+                                            대해 회사가 정한 절차에 따라
+                                            이의신청을 할 수 있으며, 회사는
+                                            회원의 이의신청이 정당하다고
+                                            판단되는 경우 즉시 서비스 이용을
+                                            재개합니다.
+                                        </li>
+                                    </ol>
+
+                                    <h2>제5장 기타</h2>
+
+                                    <h3>제25조 (손해 배상)</h3>
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회원이 본 약관의 규정을 위반함으로
+                                            인하여 회사에 손해가 발생하게 되는
+                                            경우, 본 약관을 위반한 회원은 회사에
+                                            발생하는 모든 손해를 배상하여야
+                                            합니다.
+                                        </li>
+                                        <li>
+                                            회원이 서비스를 이용하는 과정에서
+                                            행한 불법행위나 본 약관 위반행위로
+                                            인하여 회사가 당해 회원 이외의
+                                            제3자로부터 손해배상 청구 또는
+                                            소송을 비롯한 각종 이의제기를 받는
+                                            경우 당해 회원은 자신의 책임과
+                                            비용으로 회사를 면책 시켜야 하며,
+                                            회사가 면책되지 못한 경우 당해
+                                            회원은 그로 인하여 회사에 발생한
+                                            모든 손해를 배상하여야 합니다.
+                                        </li>
+                                    </ol>
+
+                                    <h3>제26조 (면책사항)</h3>
+
+                                    <ol className="circle-numbs">
+                                        <li>
+                                            회사는 천재지변 또는 이에 준하는
+                                            불가항력으로 인하여 서비스를 제공할
+                                            수 없는 경우에는 서비스 제공에 관한
+                                            책임이 면책됩니다.
+                                        </li>
+                                        <li>
+                                            회사는 회원의 귀책사유로 인한
+                                            서비스의 이용장애에 대하여 책임을
+                                            지지 않습니다. ③ 회사는 회원이
+                                            서비스를 이용하여 기대하는 수익을
+                                            상실한 것에 대하여 책임을 지지
+                                            않으며 그 밖에 서비스를 통하여 얻은
+                                            자료로 인한 손해 등에 대하여도
+                                            책임을 지지 않습니다. 회사는 회원이
+                                            게재한 게시물(이용후기, 숙소평가 등
+                                            포함)의 정확성 등 내용에 대하여는
+                                            책임을 지지 않습니다.
+                                        </li>
+                                        <li>
+                                            회사는 회원 상호간 또는 회원과 제3자
+                                            상호간에 서비스를 매개로 발생한
+                                            분쟁에 대해서는 개입할 의무가 없으며
+                                            이로 인한 손해를 배상할 책임도
+                                            없습니다.
+                                        </li>
+                                        <li>
+                                            상품등은 판매자의 책임 하에
+                                            관리∙운영되고, 회사는
+                                            통신판매중개자로서 서비스 운영 상의
+                                            문제를 제외한 상품등의 하자∙부실
+                                            등으로 인한 책임은 판매자에게
+                                            귀속되며 회사는 어떠한 책임도
+                                            부담하지 않습니다.
+                                        </li>
+                                        <li>
+                                            회사는 제3자가 서비스 내 화면 또는
+                                            링크된 웹사이트를 통하여 광고한 제품
+                                            또는 서비스의 내용과 품질에 대하여
+                                            감시할 의무가 없으며 그로 인한
+                                            어떠한 책임도 지지 아니합니다.
+                                        </li>
+                                        <li>
+                                            회사는 회사 및 회사의 임직원 그리고
+                                            회사 대리인의 고의 또는 중대한
+                                            과실이 없는 한 다음 각 호의
+                                            사항으로부터 발생하는 손해에 대해
+                                            책임을 지지 아니합니다.
+                                            <ol className="big-numbs">
+                                                <li>
+                                                    회원정보 등의 허위 또는
+                                                    부정확성에 기인하는 손해
+                                                </li>
+                                                <li>
+                                                    서비스에 대한 접속 및
+                                                    서비스의 이용과정에서
+                                                    발생하는 개인적인 손해
+                                                </li>
+                                                <li>
+                                                    서버에 대한 제3자의 모든
+                                                    불법적인 접속 또는 서버의
+                                                    불법적인 이용으로부터
+                                                    발생하는 손해
+                                                </li>
+                                                <li>
+                                                    서버에 대한 전송 또는
+                                                    서버로부터의 전송에 대한
+                                                    제3자의 모든 불법적인 방해
+                                                    또는 중단행위로부터 발생하는
+                                                    손해
+                                                </li>
+                                                <li>
+                                                    제3자가 서비스를 이용하여
+                                                    불법적으로 전송, 유포하거나
+                                                    또는 전송, 유포되도록 한
+                                                    모든 바이러스, 스파이웨어 및
+                                                    기타 악성 프로그램으로 인한
+                                                    손해
+                                                </li>
+                                                <li>
+                                                    전송된 데이터의 오류 및
+                                                    생략, 누락, 파괴 등으로
+                                                    발생되는 손해
+                                                </li>
+                                                <li>
+                                                    회원간의 회원 상태정보 등록
+                                                    및 서비스 이용 과정에서
+                                                    발생하는 명예훼손 기타
+                                                    불법행위로 인한 각종
+                                                    민∙형사상 책임
+                                                </li>
+                                            </ol>
+                                        </li>
+                                    </ol>
+
+                                    <h3>제27조 (분쟁 조정 및 관할법원)</h3>
+                                    <p>
+                                        본 약관과 회사와 회원간에 발생한 분쟁
+                                        등에 관하여는 대한민국 법령이 적용되며,
+                                        회사의 주소지를 관할하는 법원을
+                                        관할법원으로 합니다.
+                                    </p>
+
+                                    <h2>부칙</h2>
+
+                                    <h3>제1조 시행일</h3>
+                                    <p>
+                                        이 약관은 2024년 12월 1일부터 시행하며,
+                                        종전의 약관은 이 약관으로 대체합니다.
+                                    </p>
+                                </div>
+                                이용 약관이 이렇고 저렇고 어쩌고 저쩌고 동의함?
+                                ㅇㅇ 동의
+                            </div>
+
+                            <div className="state-container" data-index={2}>
+                                계정, 비밀번호, 비밀번호 확인, 이름, 기타 등등
+                            </div>
+
+                            <div className="state-container" data-index={3}>
+                                내가 사는 동네 찾기
+                            </div>
+
+                            <div className="state-container" data-index={4}>
+                                말랑이 추가하기 / 대표 말랑이 설정 (선택
+                                입력사항)
+                            </div>
+
+                            <div className="state-container" data-index={5}>
+                                회원 가입 완료
+                            </div>
+                        </aside>
+                    </form>
+                </div>
+
+                <div className="register-state-controls">
+                    {currentStep !== 1 ? (
+                        <button
+                            className="buttons"
+                            onClick={() => handleRegisterState(-1)}
+                        >
+                            <span>이전</span>
+                        </button>
+                    ) : (
+                        <button
+                            className="buttons"
+                            onClick={() =>
+                                Swal.fire({
+                                    icon: 'question',
+                                    title: '아외',
+                                    showCancelButton: true,
+                                    cancelButtonText: '아랏서 가입할게',
+                                    confirmButtonText: '그냥',
+                                }).then((result) => {
+                                    if (result.isConfirmed) navigate(-1);
+                                })
+                            }
+                        >
+                            <span>가입 취소</span>
+                        </button>
+                    )}
+
+                    {currentStep !== MAX_STEPS.length ? (
+                        <button
+                            className="buttons"
+                            onClick={() => handleRegisterState(1)}
+                        >
+                            <span>다음</span>
+                        </button>
+                    ) : (
+                        <button
+                            className="buttons"
+                            onClick={() =>
+                                Swal.fire({
+                                    icon: 'success',
+                                    title: '가입 축하욤',
+                                })
+                            }
+                        >
+                            <span>가입완료</span>
+                        </button>
+                    )}
+                </div>
+
+                <div className="service-copyright">
+                    Copyright © {thisYear} MallangPlace Inc. All Rights
+                    Reserved.
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default RegisterPage;