.

public/css/mobile/document.css

@@ -1,3 +1,11 @@
-#document h4{margin-bottom:0}#document blockquote{text-align:justify;word-break:break-all}#document blockquote img{max-width:100%;height:100%}-width: 100%;
+#document h4 {
+  margin-bottom: 0;
+}
+#document blockquote {
+  text-align: justify;
+  word-break: break-all;
+}
+#document blockquote img {
+  max-width: 100%;
   height: 100%;
 }

public/css/mobile/main.css

@@ -1,95 +1,4 @@
-@charset "UTF-8";
-#main {
-  padding: 0;
-}
-
-#banners {
-  position: relative;
-  min-height: 420px;
-  max-height: 300px;
-  --swiper-navigation-color: #fff;
-  --swiper-pagination-color: #fff;
-}
-#banners .swiper-wrapper {
-  min-height: inherit;
-  max-height: inherit;
-}
-#banners .swiper-wrapper .swiper-slide {
-  min-height: inherit;
-  max-height: inherit;
-  border-bottom: 1px solid #333;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-#banners .swiper-wrapper .swiper-slide .swiper-cover {
-  min-height: inherit;
-  max-height: inherit;
-  color: #F5F5F5;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  padding: 5% 12%;
-}
-#banners .swiper-wrapper .swiper-slide .swiper-cover .title {
-  font-size: 2em;
-  font-weight: bold;
-}
-#banners .swiper-wrapper .swiper-slide .swiper-cover .subtitle {
-  font-size: 1.2em;
-  font-weight: 500;
-  margin-bottom: 10px;
-}
-#banners .swiper-wrapper .swiper-slide .swiper-cover img {
-  width: 100%;
-  max-width: 220px;
-}
-
-#notice h5,
-#review h5 {
-  margin-bottom: 0;
-}
-#notice a,
-#review a {
-  text-decoration: none;
-}
-#notice a:hover, #notice a:focus,
-#review a:hover,
-#review a:focus {
-  text-decoration: underline;
-}
-#notice table tr td span,
-#review table tr td span {
-  font-size: 14px;
-  color: #a5a5a5;
-  padding-right: 5px;
-}
-#notice table tr td a,
-#review table tr td a {
-  font-size: 13px;
-}
-#notice table tr td a:hover, #notice table tr td a:focus,
-#review table tr td a:hover,
-#review table tr td a:focus {
-  text-decoration: underline;
-}
-#notice table tr td small,
-#review table tr td small {
-  font-size: 13px;
-  color: #bbbbbb;
-}
-
-#trending .ratio-2x3 {
-  --bs-aspect-ratio: 150%;
-}
-#trending .ratio-2x3 img {
-  -o-object-fit: cover;
-     object-fit: cover;
+#main{padding:0}#banners{position:relative;min-height:420px;max-height:300px;--swiper-navigation-color: #fff;--swiper-pagination-color: #fff}#banners .swiper-wrapper{min-height:inherit;max-height:inherit}#banners .swiper-wrapper .swiper-slide{min-height:inherit;max-height:inherit;border-bottom:1px solid #333;background-size:cover;background-repeat:no-repeat}#banners .swiper-wrapper .swiper-slide .swiper-cover{min-height:inherit;max-height:inherit;color:#f5f5f5;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:5% 12%}#banners .swiper-wrapper .swiper-slide .swiper-cover .title{font-size:2em;font-weight:bold}#banners .swiper-wrapper .swiper-slide .swiper-cover .subtitle{font-size:1.2em;font-weight:500;margin-bottom:10px}#banners .swiper-wrapper .swiper-slide .swiper-cover img{width:100%;max-width:220px}#notice h5,#review h5{margin-bottom:0}#notice a,#review a{text-decoration:none}#notice a:hover,#notice a:focus,#review a:hover,#review a:focus{text-decoration:underline}#notice table tr td span,#review table tr td span{font-size:14px;color:#a5a5a5;padding-right:5px}#notice table tr td a,#review table tr td a{font-size:13px}#notice table tr td a:hover,#notice table tr td a:focus,#review table tr td a:hover,#review table tr td a:focus{text-decoration:underline}#notice table tr td small,#review table tr td small{font-size:13px;color:#bbb}#trending .ratio-2x3{--bs-aspect-ratio: 150%}#trending .ratio-2x3 img{-o-object-fit:cover;object-fit:cover;border:1px solid #4d0404}#trending .ratio-2x3 img:hover,#trending .ratio-2x3 img:focus{-webkit-transform:scale(1.02);transform:scale(1.02)}#trending var{padding:1px 0}#trendingModal .modal-body dl dt{color:#fff;font-weight:bold;margin-bottom:15px}#trendingModal .modal-body dl dd{color:#f1f1f1}ct-fit: cover;
   border: 1px solid #4d0404;
 }
 #trending .ratio-2x3 img:hover, #trending .ratio-2x3 img:focus {

resources/css/app.css

@@ -13,4 +13,4 @@
 @import 'photoswipe/dist/photoswipe.css';
 
 /* Prism */
-@import 'prismjs/themes/prism-okaidia.css';
+@import 'prismjs/themes/prism-okaidia.css';

resources/sass/_variables.scss

@@ -1,6 +1,13 @@
 
 @use 'sass:meta' as meta; 
 
+// app.scss (select2 import 전에!)
+$border-color: #333 !default; // Bootstrap의 Sass 변수 (필요 시)
+$input-border-color: #4c4c4c !default;
+
+// select2-bootstrap-5-theme가 참조하는 변수가 있다면 그걸 hex로 오버라이드
+$select2-border-color: #4c4c4c !default; // (패키지 변수명 확인 필요)
+
 $bootstrap-settings: (
     // Body
     body-color: #f1f1f1,
@@ -105,4 +112,23 @@ $bootstrap-settings: (
     dropdown-link-active-bg: #eee
 );
 
+$grid-breakpoints: (
+   xs: 0,
+   xxs: 420px,
+   sm: 576px,
+   md: 768px,
+   lg: 992px,
+   xl: 1200px,
+   xxl: 1400px
+);
+
+$container-max-widths: (
+   xxs: 420px,
+   sm: 540px,
+   md: 720px,
+   lg: 960px,
+   xl: 1140px,
+   xxl: 1320px
+);
+
 @include meta.load-css('bootstrap/scss/bootstrap', $with: $bootstrap-settings);

resources/sass/admin.scss

@@ -1,17 +1,32 @@
 @charset "utf-8";
 
-// Font
-@use 'common/font';
+// Fonts
+@import url('https://fonts.bunny.net/css?family=Nunito');
+@import "common/font";
+
+// Variables
+// Body
+$font-family-base: "Nanum-Square-Neo-Regular";
+
+// Typography
+$font-family-sans-serif: "Nanum-Square-Neo-Regular";
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
+$link-color: #2293e3;
+$link-hover-color: #00558c;
+$link-decoration: none;
+
+// input
+$input-border-color: #ced4da;
 
 // Bootstrap
-@use 'bootstrap/scss/bootstrap';
+@import 'bootstrap/scss/bootstrap';
 
 // Common
-@use 'common/reset';
+@import 'common/reset';
 
 // CSS 파일도 함께
-@import url('../css/app.css');
-@import url('https://fonts.googleapis.com/css?family=Nunito');
+@import '../css/app.css';
 
 html {
     position: relative;
@@ -31,7 +46,7 @@ body {
     flex-wrap: nowrap;
     flex-grow: 1;
     width: 20%;
-    min-width: 230px;
+    min-width: 200px;
     max-width: 230px;
     height: 100vh;
     overflow-y: auto;
@@ -124,14 +139,13 @@ body {
     height: 100vh;
     padding: 20px 10px;
     overflow-y: auto;
-    color: #333333;
 }
 
 
 .table {
-    .table-responsive & {
-        min-width: 860px;
-    }
+    // .table-responsive & {
+    //     min-width: 860px;
+    // }
 
     caption {
         caption-side: top;

resources/sass/app.scss

@@ -1,18 +1,19 @@
-// Fonts
-@use 'common/font';
+@charset "utf-8";
+
+@import "common/font";
 
 // Variables
-@use 'variables';
+@import 'variables';
 
 // Bootstrap
-@use 'bootstrap/scss/bootstrap';
+@import 'bootstrap/scss/bootstrap';
 
 // Select2 - bootstrap-5
-@use 'select2/src/scss/core';
+@import "select2/src/scss/core";
+@import "select2-bootstrap-5-theme/src/select2-bootstrap-5-theme";
 
 // Common
-@use 'common/reset';
+@import 'common/reset';
 
 // CSS 파일도 함께
-@import url('select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css');
-@import url('../css/app.css');
+@import '../css/app.css';

resources/sass/common/font.scss

@@ -3,18 +3,7 @@
  100: Thin, 200: Extra Light, 300: Light, 400: Normal,
  500: Medium, 600: Semi Bold, 700: Bold, 800: Extra Bold, 900: Black(Heavy)
  */
-
-// Font Awesome
-@use '@fortawesome/fontawesome-free/scss/variables' with (
-    $font-path: '../fonts/fontawesome',
-);
-
-@use '@fortawesome/fontawesome-free/scss/fontawesome';
-@use '@fortawesome/fontawesome-free/scss/regular';
-@use '@fortawesome/fontawesome-free/scss/solid';
-@use '@fortawesome/fontawesome-free/scss/brands';
-
-// Familiy Fonts
+// Fonts
 @font-face {
     font-family: "Open-Sans-Extrabold";
     src: url("/public/fonts/OpenSansExtrabold/Open-Sans-Extrabold.ttf.woff") format("woff"),
@@ -58,4 +47,5 @@
     url("/public/fonts/NaverNanumSquareNeo/Webfont/eot/NanumSquareNeo-Variable.eot") format("eot");
 }
 
+// Fonts
 @import url('https://fonts.bunny.net/css?family=Nunito');