폰트 변경

src/main/java/com/eactive/apim/portal/config/PortalConfigMessageSource.java

@@ -24,6 +24,7 @@ public class PortalConfigMessageSource {
     @Bean
     public ReloadableResourceBundleMessageSource messageSource() {
         PortalReloadableResourceBundleMessageSource reloadableResourceBundleMessageSource = new PortalReloadableResourceBundleMessageSource();
+        reloadableResourceBundleMessageSource.setDefaultEncoding("UTF-8");
         reloadableResourceBundleMessageSource.setEgovBaseNames(Arrays.asList("classpath*:message/**/*"));
         return reloadableResourceBundleMessageSource;
     }

src/main/resources/message/apim/message_en.properties

@@ -1,4 +1,4 @@
-title.html=Developer Portal
+title.html=KJBank API Portal Portal
 password.not.match=Password is not matched
 authnumber.not.match=Auth number is not matched.
 apim.route.register.file=File

src/main/resources/message/apim/message_ko.properties

@@ -1,4 +1,4 @@
-title.html=KJbank API Portal
+title.html=\uAD11\uC8FC\uC740\uD589 API Portal
 apim.route.register.file=\uCCA8\uBD80\uD30C\uC77C
 field.required=\uD544\uC218 \uC785\uB825\uD56D\uBAA9\uC785\uB2C8\uB2E4.
 companyName=\uD68C\uC0AC\uBA85

src/main/resources/static/css/main.css

@@ -1,4 +1,9 @@
 @charset "UTF-8";
+:root {
+  --font-weight-primary-regular: 400;
+  --font-weight-primary-bold: 700;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -13,7 +18,7 @@ html {
 }
 
 body {
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   line-height: 1.6;
   color: #1A1A2E;
   background-color: #FFFFFF;
@@ -557,6 +562,44 @@ hr {
   transform: translateX(200%) rotate(45deg);
 }
 
+@font-face {
+  font-family: "Spoqa Han Sans Neo";
+  font-weight: 700;
+  src: local("Spoqa Han Sans Neo Bold"), url("/static/font/kjb/SpoqaHanSansNeo-Bold.woff2") format("woff2"), url("/static/font/kjb/SpoqaHanSansNeo-Bold.woff") format("woff"), url("/static/font/kjb/SpoqaHanSansNeo-Bold.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Spoqa Han Sans Neo";
+  font-weight: 400;
+  src: local("Spoqa Han Sans Neo Regular"), url("/static/font/kjb/SpoqaHanSansNeo-Regular.woff2") format("woff2"), url("/static/font/kjb/SpoqaHanSansNeo-Regular.woff") format("woff"), url("/static/font/kjb/SpoqaHanSansNeo-Regular.ttf") format("truetype");
+}
+@font-face {}
+/* SpoqaHanSans */
+@font-face {
+  font-family: "SpoqaHanSans";
+  font-weight: 400;
+  src: url("/static/font/kjb/SpoqaHanSansRegular.woff") format("woff"), url("/static/font/kjb/SpoqaHanSansRegular.woff2") format("woff2"), url("/static/font/kjb/SpoqaHanSansRegular.ttf") format("truetype");
+}
+@font-face {
+  font-family: "SpoqaHanSansBold";
+  font-weight: 700;
+  src: url("/static/font/kjb/SpoqaHanSansBold.woff") format("woff"), url("/static/font/kjb/SpoqaHanSansBold.woff2") format("woff2"), url("/static/font/kjb/SpoqaHanSansBold.ttf") format("truetype");
+}
+/* HGGGothicssi */
+@font-face {
+  font-family: "HGGGothicssi";
+  font-weight: 300;
+  src: url("/static/font/kjb/HGGGothicssi40g.woff") format("woff"), url("/static/font/kjb/HGGGothicssi40g.woff2") format("woff2"), url("/static/font/kjb/HGGGothicssi40g.ttf") format("truetype");
+}
+@font-face {
+  font-family: "HGGGothicssi";
+  font-weight: 400;
+  src: url("/static/font/kjb/HGGGothicssi60g.woff") format("woff"), url("/static/font/kjb/HGGGothicssi60g.woff2") format("woff2"), url("/static/font/kjb/HGGGothicssi60g.ttf") format("truetype");
+}
+@font-face {
+  font-family: "HGGGothicssi";
+  font-weight: 700;
+  src: url("/static/font/kjb/HGGGothicssi80g.woff") format("woff"), url("/static/font/kjb/HGGGothicssi80g.woff2") format("woff2"), url("/static/font/kjb/HGGGothicssi80g.ttf") format("truetype");
+}
 :root {
   --primary-blue: #4B9BFF;
   --secondary-blue: #2E7FF7;
@@ -3121,7 +3164,7 @@ body {
   }
 }
 .common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 28px;
   font-weight: 700;
   color: #1A1A2E;
@@ -3165,7 +3208,7 @@ body {
   justify-content: center;
   padding: 5px 14px;
   border-radius: 40px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 13px;
   font-weight: 700;
   color: #FFFFFF;
@@ -3276,14 +3319,14 @@ body {
   opacity: 0.5;
 }
 .apikey-empty-state h3, .app-list-empty h3, .empty-state h3, .empty-api-state h3 {
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 24px;
   font-weight: 700;
   color: #1A1A2E;
   margin: 0 0 16px;
 }
 .apikey-empty-state p, .app-list-empty p, .empty-state p, .empty-api-state p {
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 16px;
   color: #6e7780;
   margin: 0;
@@ -3297,7 +3340,7 @@ body {
   height: 60px;
   border: none;
   border-radius: 12px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 18px;
   font-weight: 700;
   cursor: pointer;
@@ -3589,7 +3632,7 @@ body {
   width: 100%;
   padding: 12px 16px;
   font-size: 16px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   color: #1A1A2E;
   background: #FFFFFF;
   border: 2px solid #E2E8F0;
@@ -4156,7 +4199,7 @@ select.form-control {
   padding: 0 44px 0 16px;
   border: none;
   background: transparent;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 14px;
   font-weight: 400;
   color: #1A1A2E;
@@ -4477,7 +4520,7 @@ select.form-control {
   border: 1px solid #E2E8F0;
   border-radius: 8px;
   font-size: 14px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   transition: all 0.3s ease;
   box-sizing: border-box;
 }
@@ -4801,7 +4844,7 @@ select.form-control {
   text-decoration: none;
   border: 1px solid #212529;
   border-radius: 6px;
-  font-family: "Noto Sans CJK KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Noto Sans CJK KR", "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-weight: 700;
   font-size: 16px;
   background: transparent;
@@ -4826,7 +4869,7 @@ select.form-control {
   border-radius: 50px;
   cursor: pointer;
   transition: all 0.3s ease;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 14px;
 }
 .user-profile-dropdown .user-profile-btn .user-name {
@@ -5336,9 +5379,10 @@ select.form-control {
   align-items: center;
   justify-content: center;
   padding: 8px 16px;
-  font-size: 18px;
+  font-size: 16px;
   color: #515151;
   text-align: center;
+  white-space: nowrap;
 }
 @media (max-width: 1024px) {
   .list-table .list-table-row .row-cell {
@@ -5420,7 +5464,6 @@ select.form-control {
   justify-content: center;
   padding: 8px 16px;
   height: 40px;
-  white-space: nowrap;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 400;
@@ -6155,7 +6198,7 @@ select.form-control {
   justify-content: center;
   min-width: 10px;
   height: 21px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 18px;
   font-weight: 400;
   color: #5f666c;
@@ -12449,7 +12492,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 }
 
 .app-list-title {
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 28px;
   font-weight: 700;
   color: #1A1A2E;
@@ -12536,7 +12579,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 }
 
 .app-list-name {
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 22px;
   font-weight: 700;
   color: #1A1A2E;
@@ -12549,7 +12592,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 }
 
 .app-list-description {
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 16px;
   font-weight: 400;
   color: #6e7780;
@@ -12800,7 +12843,7 @@ input[type=checkbox]:checked + .custom-checkbox {
   background: #E5E7EB;
   border: none;
   border-radius: 12px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 18px;
   font-weight: 700;
   color: #5F666C;
@@ -13338,7 +13381,7 @@ input[type=checkbox]:checked + .custom-checkbox {
   background: #E5E7EB;
   border: none;
   border-radius: 12px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 18px;
   font-weight: 700;
   color: #5F666C;
@@ -13368,7 +13411,7 @@ input[type=checkbox]:checked + .custom-checkbox {
   background: #0049b4;
   border: none;
   border-radius: 12px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 18px;
   font-weight: 700;
   color: #FFFFFF;
@@ -13398,7 +13441,7 @@ input[type=checkbox]:checked + .custom-checkbox {
   background: #DC3545;
   border: none;
   border-radius: 12px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 18px;
   font-weight: 700;
   color: #FFFFFF;
@@ -13459,7 +13502,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 }
 .file-upload-inline .file-display-text {
   flex: 1;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 16px;
   color: #94A3B8;
   overflow: hidden;
@@ -13502,7 +13545,7 @@ input[type=checkbox]:checked + .custom-checkbox {
   background: #3ba4ed;
   border: none;
   border-radius: 12px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   font-size: 18px;
   font-weight: 700;
   color: #FFFFFF;
@@ -14125,7 +14168,7 @@ input[type=checkbox]:checked + .custom-checkbox {
   border: 1px solid #E2E8F0;
   border-radius: 8px;
   font-size: 16px;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
   resize: vertical;
   transition: all 0.3s ease;
 }
@@ -16193,399 +16236,6 @@ body.commission-print-page .btn-primary:hover {
   background: #c3dfea;
 }
 
-.api-statistics-page {
-  min-height: calc(100vh - 112px);
-  padding-bottom: 48px;
-}
-
-.statistics-section {
-  background-color: #F6F9FB;
-  padding: 32px;
-  border-radius: 12px;
-}
-
-.visually-hidden, .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.statistics-title-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 32px;
-  background-color: #F6F9FB;
-  border-radius: 12px;
-  height: 70px;
-  margin-top: 24px;
-  padding: 0 32px;
-}
-.statistics-title-bar .page-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: #1A1A2E;
-  margin: 0;
-}
-
-.date-range-picker {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.date-input-group {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: #FFFFFF;
-  border: 1px solid #E2E8F0;
-  border-radius: 50px;
-  padding: 8px 24px;
-}
-
-.date-input {
-  border: none;
-  background: transparent;
-  font-size: 14px;
-  color: #1A1A2E;
-  padding: 0;
-  width: 110px;
-}
-.date-input:focus {
-  outline: none;
-}
-
-.date-separator {
-  color: #64748B;
-  font-size: 14px;
-}
-
-.btn-search-circle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: #0049b4;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.btn-search-circle svg {
-  stroke: #FFFFFF;
-}
-.btn-search-circle:hover {
-  background: rgb(0, 52.3166666667, 129);
-}
-
-.statistics-summary-section {
-  display: flex;
-  gap: 32px;
-  margin-bottom: 32px;
-}
-@media (max-width: 1024px) {
-  .statistics-summary-section {
-    flex-direction: column;
-  }
-}
-
-.summary-left-card {
-  background: #FFFFFF;
-  border-radius: 12px;
-  padding: 32px;
-  min-width: 280px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.statistics-tabs {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 24px;
-}
-
-.tab-btn {
-  padding: 8px 24px;
-  border: none;
-  border-radius: 50px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  background: #E5E7EB;
-  color: #64748B;
-}
-.tab-btn:hover {
-  background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
-}
-.tab-btn.active {
-  background: #0049b4;
-  color: #FFFFFF;
-}
-
-.total-api-text {
-  font-size: 16px;
-  color: #1A1A2E;
-  margin-bottom: 24px;
-}
-.total-api-text .highlight-count {
-  color: #0049b4;
-  font-size: 24px;
-  font-weight: 700;
-}
-
-.summary-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.stat-item .stat-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.stat-item .stat-label {
-  font-size: 14px;
-  color: #64748B;
-  min-width: 32px;
-}
-.stat-item .stat-value {
-  font-size: 18px;
-  font-weight: 700;
-  color: #1A1A2E;
-}
-.stat-item .stat-percent {
-  font-size: 14px;
-  color: #64748B;
-}
-
-.summary-chart-card {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32px;
-}
-
-.donut-chart-container {
-  position: relative;
-  width: 220px;
-  height: 220px;
-}
-
-.donut-chart-svg {
-  width: 100%;
-  height: 100%;
-}
-
-.donut-labels {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.donut-labels .donut-label-success {
-  font-size: 12px;
-  color: #5B9BD5;
-  font-weight: 500;
-}
-.donut-labels .donut-label-failed {
-  font-size: 12px;
-  color: #FFB6C1;
-  font-weight: 500;
-}
-
-.summary-rate-card {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 24px;
-  padding: 32px;
-}
-
-.rate-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.rate-item .rate-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-.rate-item .rate-dot.success {
-  background: #5B9BD5;
-}
-.rate-item .rate-dot.fail {
-  background: #FFB6C1;
-}
-.rate-item .rate-label {
-  font-size: 14px;
-  color: #64748B;
-  min-width: 40px;
-}
-.rate-item .rate-value {
-  font-size: 32px;
-  font-weight: 700;
-}
-.rate-item .rate-value .rate-unit {
-  font-size: 20px;
-}
-.rate-item.success-rate .rate-value {
-  color: #5B9BD5;
-}
-.rate-item.fail-rate .rate-value {
-  color: #FFB6C1;
-}
-
-.api-stats-table-section {
-  background: #D6EAF8;
-  border-radius: 12px;
-  padding: 32px;
-}
-
-.table-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.table-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.table-title h3 {
-  font-size: 18px;
-  font-weight: 600;
-  color: #1A1A2E;
-  margin: 0;
-}
-
-.btn-download {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 16px;
-  background: #4A5568;
-  border: none;
-  border-radius: 8px;
-  font-size: 14px;
-  color: #FFFFFF;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.btn-download svg {
-  stroke: #FFFFFF;
-}
-.btn-download:hover {
-  background: rgb(52.797752809, 60.6460674157, 74.202247191);
-}
-
-.api-stats-table-wrapper {
-  overflow-x: auto;
-}
-
-.api-stats-table {
-  width: 100%;
-  border-collapse: collapse;
-  background: transparent;
-}
-.api-stats-table th, .api-stats-table td {
-  padding: 16px 24px;
-  text-align: left;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-}
-.api-stats-table th {
-  font-size: 14px;
-  font-weight: 500;
-  color: #64748B;
-  background: transparent;
-}
-.api-stats-table td {
-  font-size: 14px;
-  color: #1A1A2E;
-  background: #FFFFFF;
-}
-.api-stats-table tbody tr:first-child td:first-child {
-  border-radius: 8px 0 0 0;
-}
-.api-stats-table tbody tr:first-child td:last-child {
-  border-radius: 0 8px 0 0;
-}
-.api-stats-table tbody tr:last-child td {
-  border-bottom: none;
-}
-.api-stats-table .total-row td {
-  background: #E8F4FD;
-  font-weight: 500;
-}
-.api-stats-table .total-row td:first-child {
-  border-radius: 0 0 0 8px;
-}
-.api-stats-table .total-row td:last-child {
-  border-radius: 0 0 8px 0;
-}
-
-.api-name {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 500;
-}
-.api-name .api-icon {
-  flex-shrink: 0;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.stats-bar {
-  min-width: 200px;
-}
-
-.stacked-bar {
-  display: flex;
-  height: 12px;
-  border-radius: 50px;
-  overflow: hidden;
-  background: #E5E7EB;
-}
-.stacked-bar .bar-success {
-  background: #5B9BD5;
-  height: 100%;
-}
-.stacked-bar .bar-fail {
-  background: #C9A227;
-  height: 100%;
-}
-
-.total-row .stacked-bar .bar-success {
-  background: #5B9BD5;
-}
-.total-row .stacked-bar .bar-fail {
-  background: #E5E7EB;
-}
-
 .container {
   max-width: 1280px;
   margin: 0 auto;

src/main/resources/static/sass/abstracts/_variables.scss

@@ -35,7 +35,7 @@ $shadow-lg: 0 8px 24px rgba(75, 155, 255, 0.15);
 $shadow-xl: 0 16px 40px rgba(75, 155, 255, 0.2);
 
 // Typography
-$font-family-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
+$font-family-primary: 'Spoqa Han Sans Neo', 'SpoqaHanSans', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
 $font-family-mono: 'Fira Code', 'Courier New', monospace;
 
 // Font sizes

src/main/resources/static/sass/base/_kjb-font.scss

@@ -0,0 +1,66 @@
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-weight: 700;
+  src: local('Spoqa Han Sans Neo Bold'),
+    url('/static/font/kjb/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
+    url('/static/font/kjb/SpoqaHanSansNeo-Bold.woff') format('woff'),
+    url('/static/font/kjb/SpoqaHanSansNeo-Bold.ttf') format('truetype')
+  ;
+  //unicode-range: U+AC00-D7AF, U+0000-0040, U+005B-0060, U+007B-007F
+}
+
+@font-face {
+  font-family: 'Spoqa Han Sans Neo';
+  font-weight: 400;
+  src: local('Spoqa Han Sans Neo Regular'),
+    url('/static/font/kjb/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
+    url('/static/font/kjb/SpoqaHanSansNeo-Regular.woff') format('woff'),
+    url('/static/font/kjb/SpoqaHanSansNeo-Regular.ttf') format('truetype')
+  ;
+  //unicode-range: U+AC00-D7AF, U+0000-0040, U+005B-0060, U+007B-007F
+}
+
+@font-face {
+
+}
+
+
+// KJB PIB
+/* SpoqaHanSans */
+@font-face {
+  font-family:'SpoqaHanSans';
+  font-weight: 400;
+  src:url('/static/font/kjb/SpoqaHanSansRegular.woff') format('woff'),
+  url('/static/font/kjb/SpoqaHanSansRegular.woff2') format('woff2'),
+  url('/static/font/kjb/SpoqaHanSansRegular.ttf') format('truetype');
+}
+@font-face {
+  font-family:'SpoqaHanSansBold';
+  font-weight: 700;
+  src:url('/static/font/kjb/SpoqaHanSansBold.woff') format('woff'),
+  url('/static/font/kjb/SpoqaHanSansBold.woff2') format('woff2'),
+  url('/static/font/kjb/SpoqaHanSansBold.ttf') format('truetype');
+}
+
+/* HGGGothicssi */
+@font-face {
+  font-family:'HGGGothicssi';
+  font-weight: 300;
+  src:url('/static/font/kjb/HGGGothicssi40g.woff') format('woff'),
+  url('/static/font/kjb/HGGGothicssi40g.woff2') format('woff2'),
+  url('/static/font/kjb/HGGGothicssi40g.ttf') format('truetype');
+}
+@font-face {
+  font-family:'HGGGothicssi';
+  font-weight: 400;
+  src:url('/static/font/kjb/HGGGothicssi60g.woff') format('woff'),
+  url('/static/font/kjb/HGGGothicssi60g.woff2') format('woff2'),
+  url('/static/font/kjb/HGGGothicssi60g.ttf') format('truetype');
+}
+@font-face {
+  font-family:'HGGGothicssi';
+  font-weight: 700;
+  src:url('/static/font/kjb/HGGGothicssi80g.woff') format('woff'),
+  url('/static/font/kjb/HGGGothicssi80g.woff2') format('woff2'),
+  url('/static/font/kjb/HGGGothicssi80g.ttf') format('truetype');
+}

src/main/resources/static/sass/base/_reset.scss

@@ -2,6 +2,11 @@
 // Reset and normalize styles
 // -----------------------------------------------------------------------------
 
+:root {
+  --font-weight-primary-regular: 400;
+  --font-weight-primary-bold: 700;
+}
+
 * {
   margin: 0;
   padding: 0;

src/main/resources/static/sass/components/_tables.scss

@@ -349,9 +349,10 @@
       align-items: center;
       justify-content: center;
       padding: $spacing-sm $spacing-md;
-      font-size: 18px;
+      font-size: 16px;
       color: #515151;
       text-align: center;
+      white-space: nowrap;
 
       @media (max-width: $breakpoint-md) {
         font-size: $font-size-sm;

src/main/resources/static/sass/main.scss

@@ -13,6 +13,7 @@
 @import 'base/reset';
 @import 'base/typography';
 @import 'base/animations';
+@import "base/kjb-font";
 
 // 3. Layout
 @import 'layout/header';
@@ -58,7 +59,7 @@
 @import 'pages/user-management';
 @import 'pages/commission';
 @import 'pages/terms-agreements';
-@import 'pages/api-statistics';
+//@import 'pages/api-statistics';
 
 // 6. Themes
 @import 'themes/dark';

src/main/resources/static/sass/pages/_index.scss

@@ -864,6 +864,7 @@
     transition: all 0.3s ease;
     height: 40px;
     width: 135px;
+    white-space: nowrap;
 
     @include respond-to('md') {
       position: static;