로고 및 스타일 변경 반영:

- 로고 사이즈 수정 (114px → 144px) 및 레이아웃 조정
- 컬러 및 폰트 스타일 Figma 가이드 기준 업데이트
- 버튼/배경 스타일 효과 개선 (글래스, 알약 태그 등)

package-lock.json

@@ -8,6 +8,9 @@
       "name": "eapim-portal",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "playwright": "^1.61.1"
+      },
       "devDependencies": {
         "sass": "^1.69.5"
       }
@@ -349,6 +352,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/immutable": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
@@ -403,6 +420,36 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/readdirp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",

package.json

@@ -13,5 +13,8 @@
     "sass": "^1.69.5"
   },
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "playwright": "^1.61.1"
+  }
 }

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

@@ -748,12 +748,13 @@ body.design-survey-active .global-header {
   position: relative;
   background-color: #ffffff;
   z-index: 350;
-  height: 112px;
+  height: 110px;
   transition: all 0.3s ease;
   border-bottom: 1px solid #dddddd;
 }
 .global-header.index-header {
-  background-color: #E5F8FF;
+  background-color: #FFFFFF;
+  border-bottom: none;
 }
 .global-header .container {
   height: 100%;
@@ -809,10 +810,10 @@ body.design-survey-active .global-header {
 }
 
 .logo-text {
-  font-size: 22px;
+  font-size: 23px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 32px;
-  color: var(--text-dark);
+  color: #000000;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
@@ -1463,8 +1464,8 @@ body.design-survey-active .global-header {
   align-items: center;
   gap: 6px;
   text-decoration: none;
-  color: var(--text-dark);
+  color: #212529;
-  font-weight: 500;
+  font-weight: 700;
   font-size: 20px;
   padding: 8px 16px;
   border-radius: 8px;
@@ -1655,7 +1656,7 @@ body.design-survey-active .global-header {
   gap: 16px;
 }
 .footer-left .footer-logo {
-  width: 114px;
+  width: 144px;
   height: auto;
   object-fit: contain;
 }
@@ -1667,7 +1668,7 @@ body.design-survey-active .global-header {
 .footer-left .footer-links .footer-link {
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 16px;
-  font-weight: 400;
+  font-weight: 700;
   color: #5F666C;
   text-decoration: none;
   transition: color 0.3s ease;
@@ -1677,7 +1678,7 @@ body.design-survey-active .global-header {
   text-decoration: underline;
 }
 .footer-left .footer-links .footer-separator {
-  color: #D1D5DB;
+  color: #5F666C;
   font-size: 16px;
   user-select: none;
 }
@@ -1685,7 +1686,7 @@ body.design-survey-active .global-header {
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 14px;
   font-weight: 400;
-  color: #9CA3AF;
+  color: #5F666C;
   margin: 0;
   line-height: 1.5;
 }
@@ -1711,8 +1712,8 @@ body.design-survey-active .global-header {
   font-weight: 400;
   color: #5F666C;
   background: #FFFFFF;
-  border: 1px solid #D1D5DB;
+  border: 1px solid #5F666C;
-  border-radius: 6px;
+  border-radius: 4px;
   cursor: pointer;
   transition: all 0.3s ease;
   appearance: none;
@@ -1736,15 +1737,15 @@ body.design-survey-active .global-header {
 }
 .footer-right .footer-contact {
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 18px;
+  font-size: 30px;
   font-weight: 700;
-  color: #1F2937;
+  color: #5F666C;
   margin: 0;
   line-height: 1.2;
 }
 @media (max-width: 1024px) {
   .footer-right .footer-contact {
-    font-size: 16px;
+    font-size: 22px;
   }
 }
 
@@ -5073,20 +5074,20 @@ select.form-control {
   transition: all 0.3s ease;
 }
 .login-btn-box {
-  height: 32px;
+  height: 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 4px;
-  padding: 6px 16px;
+  padding: 6px 16px 6px 12px;
-  color: #212529;
+  color: #0046FF;
   text-decoration: none;
-  border: none;
+  border: 1px solid #0046FF;
-  border-radius: 6px;
+  border-radius: 20px;
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-weight: 600;
+  font-weight: 400;
-  font-size: 16px;
+  font-size: 19px;
-  background: transparent;
+  background: #F2F5F7;
   transition: all 0.3s ease;
 }
 .login-btn-box .user-icon {
@@ -5094,6 +5095,9 @@ select.form-control {
   height: 18px;
   flex-shrink: 0;
 }
+.login-btn-box:hover {
+  background: #E9EDF2;
+}
 
 .user-profile-dropdown {
   position: relative;
@@ -6973,6 +6977,26 @@ button.djb-comment-submit:disabled {
   font-size: 13px;
 }
 
+.landing-top {
+  position: relative;
+  background-color: #D4F0FC;
+  background-image: url("/img/bg_landing_top.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: top center;
+}
+.landing-top .hero-carousel-section,
+.landing-top .hero-carousel-container,
+.landing-top .hero-slide,
+.landing-top .api-search-section,
+.landing-top .api-showcase {
+  background: transparent !important;
+}
+.landing-top .showcase-background,
+.landing-top .search-background {
+  display: none !important;
+}
+
 .hero-carousel-section {
   position: relative;
   width: 100%;
@@ -6984,7 +7008,7 @@ button.djb-comment-submit:disabled {
   width: 100%;
   height: 580px;
   overflow: hidden;
-  background-color: #E9F9FF;
+  background: linear-gradient(180deg, #BAF5FA 0%, #76D4FC 100%);
 }
 @media (max-width: 1024px) {
   .hero-carousel-container {
@@ -7027,13 +7051,13 @@ button.djb-comment-submit:disabled {
   visibility: visible;
 }
 .hero-slide[data-slide="0"] {
-  background: #E9F9FF;
+  background: transparent;
 }
 .hero-slide[data-slide="1"] {
-  background: #E9F9FF;
+  background: transparent;
 }
 .hero-slide[data-slide="2"] {
-  background: #E9F9FF;
+  background: transparent;
 }
 
 .hero-slide-content {
@@ -7142,7 +7166,7 @@ button.djb-comment-submit:disabled {
   width: 178px;
   height: 60px;
   padding: 10px;
-  background: #0049B4;
+  background: #2A69DE;
   color: #FFFFFF;
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 20px;
@@ -7152,9 +7176,9 @@ button.djb-comment-submit:disabled {
   transition: all 0.3s ease;
 }
 .btn-hero-signup:hover {
-  background: rgb(0, 65.7, 162);
+  background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 73, 180, 0.3);
+  box-shadow: 0 4px 12px rgba(42, 105, 222, 0.3);
 }
 .btn-hero-signup:active {
   transform: translateY(0);
@@ -7369,10 +7393,14 @@ button.djb-comment-submit:disabled {
 
 .api-search-section {
   position: relative;
-  padding: 0;
+  padding: 56px 20px 64px;
-  overflow: hidden;
+  overflow: visible;
   background: #e9f9ff;
-  height: 314px;
+}
+@media (max-width: 768px) {
+  .api-search-section {
+    padding: 28px 16px 32px;
+  }
 }
 .api-search-section .search-background {
   position: absolute;
@@ -7383,70 +7411,52 @@ button.djb-comment-submit:disabled {
   background-repeat: no-repeat;
   pointer-events: none;
 }
-.api-search-section .search-content-wrapper {
+.api-search-section .search-card {
   position: relative;
+  z-index: 1;
+  max-width: 1308px;
+  margin: 0 auto;
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 56px;
-  gap: 40px;
+  padding: 40px 56px;
-  z-index: 1;
+  border-radius: 30px;
+  background: rgba(255, 255, 255, 0.45);
+  border: 1px solid #FFFFFF;
+  box-shadow: 0 10px 24px rgba(141, 155, 185, 0.25);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
 }
 @media (max-width: 1024px) {
-  .api-search-section .search-content-wrapper {
+  .api-search-section .search-card {
     flex-direction: column;
+    align-items: flex-start;
     gap: 24px;
-    padding-top: 40px;
+    padding: 32px;
   }
 }
 @media (max-width: 768px) {
-  .api-search-section .search-content-wrapper {
+  .api-search-section .search-card {
-    flex-direction: row;
+    gap: 16px;
-    flex-wrap: wrap;
+    padding: 20px;
-    gap: 8px;
+    border-radius: 20px;
-    padding-top: 20px;
-    justify-content: center;
   }
 }
-.api-search-section .search-character {
+.api-search-section .search-text-content {
-  width: 154px;
-  height: 148px;
   flex-shrink: 0;
 }
-.api-search-section .search-character img {
+@media (max-width: 1024px) {
+  .api-search-section .search-text-content {
     width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-@media (max-width: 1024px) {
-  .api-search-section .search-character {
-    width: 120px;
-    height: 115px;
-  }
-}
-@media (max-width: 768px) {
-  .api-search-section .search-character {
-    width: 68px;
-    height: 65px;
-  }
-}
-.api-search-section .search-text-content {
-  text-align: left;
-}
-@media (max-width: 1024px) {
-  .api-search-section .search-text-content {
-    text-align: center;
-  }
-}
-@media (max-width: 768px) {
-  .api-search-section .search-text-content {
-    text-align: left;
   }
 }
 .api-search-section .search-title {
   font-size: 36px;
-  line-height: 1.3;
+  font-weight: 500;
+  line-height: 1.25;
   color: #000000;
   margin: 0;
+  white-space: nowrap;
 }
 @media (max-width: 1024px) {
   .api-search-section .search-title {
@@ -7456,31 +7466,93 @@ button.djb-comment-submit:disabled {
 @media (max-width: 768px) {
   .api-search-section .search-title {
     font-size: 16px;
-    line-height: 1.4;
+    line-height: 1.3;
+    color: #212529;
+    white-space: normal;
+  }
+}
+.api-search-section .search-main {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+@media (max-width: 768px) {
+  .api-search-section .search-main {
+    gap: 12px;
+  }
+}
+.api-search-section .hashtag-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+  .api-search-section .hashtag-section {
+    gap: 8px;
+  }
+}
+.api-search-section .hashtag-label {
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  color: #000000;
+  white-space: nowrap;
+}
+@media (max-width: 768px) {
+  .api-search-section .hashtag-label {
+    font-size: 12px;
     color: #212529;
   }
 }
-.api-search-section .search-input-wrapper {
+.api-search-section .hashtag-list {
-  position: relative;
   display: flex;
-  justify-content: center;
+  align-items: center;
-  padding: 0px 0 30px;
+  gap: 10px;
-  z-index: 1;
+  flex-wrap: wrap;
-}
-@media (max-width: 1024px) {
-  .api-search-section .search-input-wrapper {
-    padding: 30px 20px 20px;
-  }
 }
 @media (max-width: 768px) {
-  .api-search-section .search-input-wrapper {
+  .api-search-section .hashtag-list {
-    justify-content: flex-start;
+    gap: 6px;
-    padding: 0px 28px 12px 27px;
   }
 }
+.api-search-section .hashtag-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 16px;
+  background: #4546CE;
+  color: #FFFFFF;
+  border-radius: 999px;
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+.api-search-section .hashtag-link:hover {
+  background: rgb(52.7531914894, 53.829787234, 200.2468085106);
+  transform: translateY(-1px);
+  text-decoration: none;
+}
+@media (max-width: 768px) {
+  .api-search-section .hashtag-link {
+    padding: 4px 10px;
+    font-size: 11px;
+  }
+}
+.api-search-section .hashtag-separator {
+  display: none;
+}
+.api-search-section .search-input-wrapper {
+  width: 100%;
+}
 .api-search-section .search-form {
   width: 100%;
-  max-width: 816px;
 }
 .api-search-section .search-box {
   position: relative;
@@ -7495,16 +7567,16 @@ button.djb-comment-submit:disabled {
 }
 @media (max-width: 1024px) {
   .api-search-section .search-box {
-    height: 60px;
+    height: 64px;
-    border: 4px solid #0049B4;
+    border-width: 4px;
     padding: 0 16px;
   }
 }
 @media (max-width: 768px) {
   .api-search-section .search-box {
-    height: 36px;
+    height: 44px;
-    border: 3px solid #0049B4;
+    border-width: 3px;
-    border-radius: 18px;
+    border-radius: 22px;
     padding: 0 12px;
   }
 }
@@ -7519,7 +7591,7 @@ button.djb-comment-submit:disabled {
   font-size: 17px;
   font-weight: 500;
   color: #000000;
-  padding: 0 20px;
+  padding: 0 12px;
 }
 .api-search-section .search-input::placeholder {
   color: #B3B3B3;
@@ -7528,18 +7600,14 @@ button.djb-comment-submit:disabled {
 @media (max-width: 1024px) {
   .api-search-section .search-input {
     font-size: 15px;
-    padding: 0 12px;
   }
 }
 @media (max-width: 768px) {
   .api-search-section .search-input {
-    font-size: 11px;
+    font-size: 12px;
-    font-weight: 500;
-    padding: 0 8px;
   }
   .api-search-section .search-input::placeholder {
     color: #8C959F;
-    font-weight: 500;
   }
 }
 .api-search-section .search-icon-button {
@@ -7573,116 +7641,14 @@ button.djb-comment-submit:disabled {
 }
 @media (max-width: 768px) {
   .api-search-section .search-icon-button svg {
-    width: 16px;
+    width: 18px;
-    height: 16px;
+    height: 18px;
   }
 }
 @media (max-width: 768px) {
   .api-search-section .search-icon-button {
-    width: 20px;
+    width: 24px;
-    height: 20px;
+    height: 24px;
-  }
-}
-.api-search-section .hashtag-section {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 0 20px 0px;
-  z-index: 1;
-}
-@media (max-width: 1024px) {
-  .api-search-section .hashtag-section {
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 0 20px 30px;
-  }
-}
-@media (max-width: 768px) {
-  .api-search-section .hashtag-section {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 12px;
-    padding: 0 20px 20px;
-    justify-content: center;
-  }
-}
-.api-search-section .hashtag-label {
-  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 16px;
-  font-weight: 700;
-  color: #000000;
-  white-space: nowrap;
-}
-@media (max-width: 768px) {
-  .api-search-section .hashtag-label {
-    font-size: 12px;
-    color: #212529;
-  }
-}
-.api-search-section .hashtag-list {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  flex-wrap: wrap;
-}
-@media (max-width: 1024px) {
-  .api-search-section .hashtag-list {
-    justify-content: center;
-    gap: 10px;
-  }
-}
-@media (max-width: 768px) {
-  .api-search-section .hashtag-list {
-    gap: 8px;
-    justify-content: left;
-  }
-}
-.api-search-section .hashtag-link {
-  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  color: #000000;
-  text-decoration: none;
-  white-space: nowrap;
-  transition: color 0.3s ease;
-}
-.api-search-section .hashtag-link:hover {
-  color: #0049B4;
-  text-decoration: underline;
-}
-@media (max-width: 1024px) {
-  .api-search-section .hashtag-link {
-    font-size: 14px;
-  }
-}
-@media (max-width: 768px) {
-  .api-search-section .hashtag-link {
-    font-size: 12px;
-    color: #212529;
-  }
-}
-.api-search-section .hashtag-separator {
-  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 16px;
-  color: #000000;
-  user-select: none;
-}
-@media (max-width: 1024px) {
-  .api-search-section .hashtag-separator {
-    font-size: 14px;
-  }
-}
-@media (max-width: 768px) {
-  .api-search-section .hashtag-separator {
-    font-size: 10px;
-    color: #212529;
-    display: flex;
-    align-items: center;
-    height: 10px;
   }
 }
 
@@ -7786,7 +7752,7 @@ button.djb-comment-submit:disabled {
   font-size: 15px;
   font-weight: 500;
   color: #FFFFFF;
-  background: #008ae2;
+  background: #2A69DE;
   text-decoration: none;
   border-radius: 10px;
   transition: all 0.3s ease;
@@ -7832,7 +7798,7 @@ button.djb-comment-submit:disabled {
   }
 }
 .api-showcase .btn-all-apis:hover {
-  background: rgb(0, 124.2, 203.4);
+  background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
 }
 .api-showcase .btn-all-apis:hover svg {
   transform: translateX(4px);
@@ -7867,14 +7833,41 @@ button.djb-comment-submit:disabled {
   flex-direction: column;
   align-items: flex-start;
   position: relative;
-  transition: all 0.3s ease;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   gap: 0px;
   cursor: pointer;
 }
+.api-showcase .api-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(180deg, #50CAFF 0%, #2088FF 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 0;
+}
+.api-showcase .api-card > * {
+  position: relative;
+  z-index: 1;
+}
+.api-showcase .api-card .card-title,
+.api-showcase .api-card .card-description {
+  transition: color 0.3s ease;
+}
 .api-showcase .api-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  border-color: transparent;
-  border-color: #008ae2;
+  box-shadow: 0 10px 28px rgba(0, 14, 27, 0.22);
+}
+.api-showcase .api-card:hover::before {
+  opacity: 1;
+}
+.api-showcase .api-card:hover .card-title,
+.api-showcase .api-card:hover .card-description {
+  color: #FFFFFF;
 }
 @media (max-width: 1024px) {
   .api-showcase .api-card {
@@ -7964,12 +7957,26 @@ button.djb-comment-submit:disabled {
 }
 .info-section .info-background {
   position: absolute;
-  inset: 0;
+  top: 0;
-  background-image: url("/img/bg_api_intro.svg");
+  bottom: 0;
-  background-size: cover;
+  left: 0;
-  background-position: center;
+  width: 54%;
+  background-image: url("/img/bg_diff_card.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: left top;
   pointer-events: none;
 }
+@media (max-width: 1024px) {
+  .info-section .info-background {
+    width: 100%;
+  }
+}
+@media (max-width: 768px) {
+  .info-section .info-background {
+    display: none;
+  }
+}
 .info-section .container {
   position: relative;
   z-index: 1;
@@ -8022,7 +8029,7 @@ button.djb-comment-submit:disabled {
 .info-section .info-title {
   font-size: 28px;
   line-height: 1.4;
-  color: #000000;
+  color: #FFFFFF;
   margin: 0 0 24px 0;
 }
 @media (max-width: 1024px) {
@@ -8044,7 +8051,7 @@ button.djb-comment-submit:disabled {
 }
 .info-section .info-title .title-highlight {
   font-weight: 700;
-  color: #0049B4;
+  color: #0FDBFF;
   font-size: 36px;
 }
 @media (max-width: 768px) {
@@ -8060,7 +8067,7 @@ button.djb-comment-submit:disabled {
   font-size: 20px;
   font-weight: 400;
   line-height: 1.6;
-  color: #000000;
+  color: #FFFFFF;
   margin: 0 0 48px 0;
 }
 @media (max-width: 1024px) {
@@ -8098,17 +8105,17 @@ button.djb-comment-submit:disabled {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 18px 52px;
+  padding: 0 28px;
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 24px;
+  font-size: 18px;
   font-weight: 700;
-  line-height: 56px;
+  line-height: 1.2;
-  border-radius: 20px;
+  border-radius: 14px;
   text-decoration: none;
   white-space: nowrap;
   transition: all 0.3s ease;
-  min-width: 310px;
+  min-width: 0;
-  height: 128px;
+  height: 60px;
 }
 @media (max-width: 768px) {
   .info-section .action-btn {
@@ -8137,22 +8144,24 @@ button.djb-comment-submit:disabled {
   transform: translateY(0);
 }
 .info-section .action-btn-primary {
-  background: #0049B4;
+  background: #D5EFFF;
-  color: #FFFFFF;
+  color: #211894;
 }
 .info-section .action-btn-primary:hover {
-  background: rgb(0, 65.7, 162);
+  background: rgb(175.56, 224.7371428571, 255);
 }
 .info-section .action-btn-secondary {
-  background: #00ACDD;
+  background: #0046FF;
   color: #FFFFFF;
+  border: none;
 }
 .info-section .action-btn-secondary:hover {
-  background: rgb(0, 154.8, 198.9);
+  background: #FFFFFF;
+  color: #0046FF;
 }
 .info-section .info-image {
-  flex: 1;
+  flex: 0 1 460px;
-  max-width: 560px;
+  max-width: 460px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8199,6 +8208,7 @@ button.djb-comment-submit:disabled {
   }
 }
 .support-center .support-background {
+  display: none;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -8547,13 +8557,15 @@ button.djb-comment-submit:disabled {
   }
 }
 .support-center .support-card--faq {
-  background: #DAF0FF;
+  background: #CAEAFF;
+  border: 1px solid #97D5FF;
 }
 .support-center .support-card--faq .card-content h3 {
   color: #212529;
 }
 .support-center .support-card--qna {
-  background: #D9F6F8;
+  background: #C7F6F9;
+  border: 1px solid #99E0CC;
 }
 .support-center .support-card--qna .card-content h3 {
   color: #212529;
@@ -8893,7 +8905,7 @@ button.djb-comment-submit:disabled {
   padding: 10px;
   min-height: 60px;
   width: 178px;
-  background: #008ae2;
+  background: #4685EF;
   color: #FFFFFF;
   font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 20px;
@@ -8903,9 +8915,9 @@ button.djb-comment-submit:disabled {
   transition: all 0.3s ease;
 }
 .signup-cta-section .btn-signup-cta:hover {
-  background: rgb(0, 124.2, 203.4);
+  background: rgb(41.5597014925, 114.2447761194, 236.5402985075);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 138, 226, 0.3);
+  box-shadow: 0 4px 12px rgba(70, 133, 239, 0.3);
 }
 .signup-cta-section .btn-signup-cta:active {
   transform: translateY(0);
@@ -8921,6 +8933,27 @@ button.djb-comment-submit:disabled {
     line-height: 16px;
   }
 }
+.signup-cta-section .cta-character {
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  height: auto;
+  pointer-events: none;
+  user-select: none;
+}
+@media (max-width: 1024px) {
+  .signup-cta-section .cta-character {
+    display: none;
+  }
+}
+.signup-cta-section .cta-character-left {
+  left: 0;
+  width: clamp(180px, 21.6vw, 416px);
+}
+.signup-cta-section .cta-character-right {
+  right: 0;
+  width: clamp(180px, 21.1vw, 406px);
+}
 .signup-cta-section .cta-divider {
   position: absolute;
   bottom: 0;

src/main/resources/static/sass/components/_header-auth.scss

@@ -35,22 +35,22 @@
   font-size: $font-size-sm;
   transition: $transition-base;
 
-  // Box style for Figma design (node-id: 721-1489)
+  // Figma GNB 로그인 버튼: pill (#F2F5F7 배경 / #0046FF 보더·텍스트 / radius 20px)
   &-box {
-    height: 32px;
+    height: 34px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 6px; // 아이콘-텍스트 간격
+    gap: 4px; // 아이콘-텍스트 간격 (Figma)
-    padding: 6px 16px;
+    padding: 6px 16px 6px 12px;
-    color: #212529; // 강조 텍스트 색상
+    color: #0046FF; // Figma 로그인 텍스트 블루
     text-decoration: none;
-    border: none;
+    border: 1px solid #0046FF;
-    border-radius: 6px;
+    border-radius: 20px;
     font-family: $font-family-primary;
-    font-weight: $font-weight-semibold; // 600
+    font-weight: $font-weight-regular; // 400 (Figma)
-    font-size: 16px;
+    font-size: 19px;
-    background: transparent;
+    background: #F2F5F7; // Figma 그레이2 pill 배경
     transition: $transition-base;
 
     .user-icon {
@@ -58,6 +58,10 @@
       height: 18px;
       flex-shrink: 0;
     }
+
+    &:hover {
+      background: #E9EDF2;
+    }
   }
 }
 

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

@@ -40,7 +40,7 @@
   gap: 16px;
 
   .footer-logo {
-    width: 114px;
+    width: 144px; // Figma: 제주은행 로고 144x34
     height: auto;
     object-fit: contain;
   }
@@ -53,7 +53,7 @@
     .footer-link {
       font-family: $font-family-primary;
       font-size: 16px;
-      font-weight: 400;
+      font-weight: 700; // Figma: 링크 Bold
       color: #5F666C;
       text-decoration: none;
       transition: color 0.3s ease;
@@ -65,7 +65,7 @@
     }
 
     .footer-separator {
-      color: #D1D5DB;
+      color: #5F666C; // Figma 구분자
       font-size: 16px;
       user-select: none;
     }
@@ -75,7 +75,7 @@
     font-family: $font-family-primary;
     font-size: 14px;
     font-weight: 400;
-    color: #9CA3AF;
+    color: #5F666C; // Figma: 저작권 그레이
     margin: 0;
     line-height: 1.5;
   }
@@ -103,8 +103,8 @@
       font-weight: 400;
       color: #5F666C;
       background: #FFFFFF;
-      border: 1px solid #D1D5DB;
+      border: 1px solid #5F666C; // Figma: 관련사이트 박스 보더
-      border-radius: 6px;
+      border-radius: 4px;
       cursor: pointer;
       transition: all 0.3s ease;
       appearance: none;
@@ -131,14 +131,14 @@
 
   .footer-contact {
     font-family: $font-family-primary;
-    font-size: 18px;
+    font-size: 30px; // Figma: 고객센터 30px Bold
     font-weight: 700;
-    color: #1F2937;
+    color: #5F666C; // Figma 그레이
     margin: 0;
     line-height: 1.2;
 
     @include respond-to('md') {
-      font-size: 16px;
+      font-size: 22px;
     }
   }
 }

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

@@ -127,13 +127,14 @@ body.design-survey-active {
   position: relative;
   background-color: #ffffff;
   z-index: $z-index-header;
-  height: 112px;
+  height: 110px; // Figma GNB 높이
   transition: all 0.3s ease;
   border-bottom: 1px solid #dddddd;
 
-  // Index page header with light blue background
+  // Figma GNB: 흰색 바 (히어로 시안 그라데이션과 분리)
   &.index-header {
-    background-color: #E5F8FF;
+    background-color: #FFFFFF;
+    border-bottom: none;
   }
   .container {
     height: 100%;
@@ -201,10 +202,10 @@ body.design-survey-active {
 }
 
 .logo-text {
-  font-size: 22px;
+  font-size: 23px; // Figma: API Portal 23px Medium
-  font-weight: 600;
+  font-weight: 500;
   line-height: 32px;
-  color: var(--text-dark);
+  color: #000000;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
@@ -984,8 +985,8 @@ body.design-survey-active {
   align-items: center;
   gap: 6px;
   text-decoration: none;
-  color: var(--text-dark);
+  color: #212529; // Figma 강조텍스트
-  font-weight: 500;
+  font-weight: 700; // Figma: 네비 Bold
   font-size: 20px;
   padding: 8px 16px;
   border-radius: 8px;

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

@@ -2,6 +2,36 @@
 @use '../abstracts/color-functions' as *;
 @use '../abstracts/mixins' as *;
 
+// -----------------------------------------------------------------------------
+// 캐러셀 + 검색 + 추천: 이어지는 단일 배경 (Figma 연속 배경)
+//  - 상단 시안 그라데이션(히어로) → 연한 시안(#CFF3FF)으로 흐른 뒤
+//  - 하단에 파도/버블 이미지(추천)가 같은 #CFF3FF 상단색으로 이음새 없이 연결
+// -----------------------------------------------------------------------------
+.landing-top {
+  position: relative;
+  // Figma에서 추출한 단일 연속 배경 이미지 (히어로 그라데이션 + 곡선 + 추천 파도/버블)
+  background-color: #D4F0FC;
+  background-image: url('/img/bg_landing_top.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: top center;
+
+  // 하위 섹션 배경 투명 — wrapper 배경이 끊김 없이 이어지도록
+  .hero-carousel-section,
+  .hero-carousel-container,
+  .hero-slide,
+  .api-search-section,
+  .api-showcase {
+    background: transparent !important;
+  }
+
+  // 개별 섹션 배경 레이어 제거 (wrapper로 통합)
+  .showcase-background,
+  .search-background {
+    display: none !important;
+  }
+}
+
 // -----------------------------------------------------------------------------
 // Hero Carousel Section - Figma Design
 // -----------------------------------------------------------------------------
@@ -17,7 +47,8 @@
   width: 100%;
   height: 580px;
   overflow: hidden;
-  background-color: #E9F9FF;
+  // Figma 히어로 배경: 상단 연한 시안 → 하단 스카이 시안 (실측 픽셀 기준)
+  background: linear-gradient(180deg, #BAF5FA 0%, #76D4FC 100%);
 
   @include respond-to('md') {
     height: 800px;
@@ -60,15 +91,15 @@
 
   // Slide backgrounds
   &[data-slide="0"] {
-    background: #E9F9FF;
+    background: transparent;
   }
 
   &[data-slide="1"] {
-    background: #E9F9FF;
+    background: transparent;
   }
 
   &[data-slide="2"] {
-    background: #E9F9FF;
+    background: transparent;
   }
 }
 
@@ -176,7 +207,7 @@
   width: 178px;
   height: 60px;
   padding: 10px;
-  background: #0049B4;
+  background: #2A69DE;
   color: #FFFFFF;
   font-family: $font-family-primary;
   font-size: 20px;
@@ -186,9 +217,9 @@
   transition: all 0.3s ease;
 
   &:hover {
-    background: darken(#0049B4, 10%);
+    background: darken(#2A69DE, 10%);
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 73, 180, 0.3);
+    box-shadow: 0 4px 12px rgba(42, 105, 222, 0.3);
   }
 
   &:active {
@@ -421,11 +452,13 @@
 
 .api-search-section {
   position: relative;
-  padding: 0;
+  padding: 56px 20px 64px;
-  //margin-top: -80px;
+  overflow: visible;
-  overflow: hidden;
   background: #e9f9ff;
-  height: 314px;
+
+  @include respond-to('sm') {
+    padding: 28px 16px 32px;
+  }
 
   .search-background {
     position: absolute;
@@ -437,111 +470,153 @@
     pointer-events: none;
   }
 
-  .search-content-wrapper {
+  // Figma: 글래스모피즘 카드 (반투명 화이트 + 흰 보더 + 섀도, radius 30)
+  .search-card {
     position: relative;
+    z-index: 1;
+    max-width: 1308px;
+    margin: 0 auto;
     display: flex;
     align-items: center;
-    justify-content: center;
+    gap: 56px;
-    gap: 40px;
+    padding: 40px 56px;
-    z-index: 1;
+    border-radius: 30px;
+    background: rgba(255, 255, 255, 0.45);
+    border: 1px solid #FFFFFF;
+    box-shadow: 0 10px 24px rgba(141, 155, 185, 0.25);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
 
     @include respond-to('md') {
       flex-direction: column;
+      align-items: flex-start;
       gap: 24px;
-      padding-top: 40px;
+      padding: 32px;
     }
 
     @include respond-to('sm') {
-      // Figma 모바일: 캐릭터와 텍스트 가로 배치
+      gap: 16px;
-      flex-direction: row;
+      padding: 20px;
-      flex-wrap: wrap;
+      border-radius: 20px;
-      gap: 8px;
-      padding-top: 20px;
-      justify-content: center;
-    }
-  }
-
-  .search-character {
-    width: 154px;
-    height: 148px;
-    flex-shrink: 0;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-
-    @include respond-to('md') {
-      width: 120px;
-      height: 115px;
-    }
-
-    @include respond-to('sm') {
-      // Figma 모바일: 68x65px
-      width: 68px;
-      height: 65px;
     }
   }
 
   .search-text-content {
-    text-align: left;
+    flex-shrink: 0;
 
     @include respond-to('md') {
-      text-align: center;
+      width: 100%;
-    }
-
-    @include respond-to('sm') {
-      // Figma 모바일: 텍스트 왼쪽 정렬
-      text-align: left;
     }
   }
 
   .search-title {
     font-size: 36px;
-    line-height: 1.3;
+    font-weight: 500;
+    line-height: 1.25;
     color: #000000;
     margin: 0;
+    white-space: nowrap;
 
     @include respond-to('md') {
       font-size: 28px;
     }
 
     @include respond-to('sm') {
-      // Figma 모바일: 16px, Bold
       font-size: 16px;
-      line-height: 1.4;
+      line-height: 1.3;
+      color: #212529;
+      white-space: normal;
+    }
+  }
+
+  .search-main {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+
+    @include respond-to('sm') {
+      gap: 12px;
+    }
+  }
+
+  // 자주찾는 API + 보라 알약 태그
+  .hashtag-section {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+
+    @include respond-to('sm') {
+      gap: 8px;
+    }
+  }
+
+  .hashtag-label {
+    font-family: $font-family-primary;
+    font-size: 16px;
+    font-weight: 700;
+    color: #000000;
+    white-space: nowrap;
+
+    @include respond-to('sm') {
+      font-size: 12px;
       color: #212529;
     }
   }
 
-  .search-input-wrapper {
+  .hashtag-list {
-    position: relative;
     display: flex;
-    justify-content: center;
+    align-items: center;
-    padding: 0px 0 30px;
+    gap: 10px;
-    z-index: 1;
+    flex-wrap: wrap;
 
-    @include respond-to('md') {
+    @include respond-to('sm') {
-      padding: 30px 20px 20px;
+      gap: 6px;
+    }
+  }
+
+  // Figma: 보라색 알약 태그 (#4546CE)
+  .hashtag-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 16px;
+    background: #4546CE;
+    color: #FFFFFF;
+    border-radius: 999px;
+    font-family: $font-family-primary;
+    font-size: 13px;
+    font-weight: 700;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background 0.2s ease, transform 0.2s ease;
+
+    &:hover {
+      background: darken(#4546CE, 8%);
+      transform: translateY(-1px);
+      text-decoration: none;
     }
 
     @include respond-to('sm') {
-      // Figma 모바일: 좌측 27px, 우측 28px 패딩으로 좌측 정렬
+      padding: 4px 10px;
-      justify-content: flex-start;
+      font-size: 11px;
-      padding: 0px 28px 12px 27px;
     }
   }
 
+  // 알약 태그라 텍스트 구분자(|) 숨김
+  .hashtag-separator {
+    display: none;
+  }
+
+  .search-input-wrapper {
+    width: 100%;
+  }
+
   .search-form {
     width: 100%;
-    max-width: 816px;
-
-    @include respond-to('sm') {
-      // Figma 모바일: 320px 고정 너비
-      //width: 320px;
-      //max-width: 320px;
-    }
   }
 
   .search-box {
@@ -556,16 +631,15 @@
     padding: 0 24px;
 
     @include respond-to('md') {
-      height: 60px;
+      height: 64px;
-      border: 4px solid #0049B4;
+      border-width: 4px;
       padding: 0 16px;
     }
 
     @include respond-to('sm') {
-      // Figma 모바일: 320x36px, 1px 파란색 테두리
+      height: 44px;
-      height: 36px;
+      border-width: 3px;
-      border: 3px solid #0049B4;
+      border-radius: 22px;
-      border-radius: 18px;
       padding: 0 12px;
     }
   }
@@ -581,7 +655,7 @@
     font-size: 17px;
     font-weight: 500;
     color: #000000;
-    padding: 0 20px;
+    padding: 0 12px;
 
     &::placeholder {
       color: #B3B3B3;
@@ -590,18 +664,13 @@
 
     @include respond-to('md') {
       font-size: 15px;
-      padding: 0 12px;
     }
 
     @include respond-to('sm') {
-      // Figma 모바일: 11px, Medium, placeholder 색상 #8C959F
+      font-size: 12px;
-      font-size: 11px;
-      font-weight: 500;
-      padding: 0 8px;
 
       &::placeholder {
         color: #8C959F;
-        font-weight: 500;
       }
     }
   }
@@ -637,119 +706,14 @@
       }
 
       @include respond-to('sm') {
-        // Figma 모바일: 16x16px 아이콘
+        width: 18px;
-        width: 16px;
+        height: 18px;
-        height: 16px;
       }
     }
 
     @include respond-to('sm') {
-      width: 20px;
+      width: 24px;
-      height: 20px;
+      height: 24px;
-    }
-  }
-
-  .hashtag-section {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 0 20px 0px;
-    z-index: 1;
-
-    @include respond-to('md') {
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      padding: 0 20px 30px;
-    }
-
-    @include respond-to('sm') {
-      // Figma 모바일: 가로 배치, 작은 간격
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 12px;
-      padding: 0 20px 20px;
-      justify-content: center;
-    }
-  }
-
-  .hashtag-label {
-    font-family: $font-family-primary;
-    font-size: 16px;
-    font-weight: 700;
-    color: #000000;
-    white-space: nowrap;
-
-    @include respond-to('sm') {
-      // Figma 모바일: 12px, Bold
-      font-size: 12px;
-      color: #212529;
-    }
-  }
-
-  .hashtag-list {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    flex-wrap: wrap;
-
-    @include respond-to('md') {
-      justify-content: center;
-      gap: 10px;
-    }
-
-    @include respond-to('sm') {
-      // Figma 모바일: 8px 간격, wrap
-      gap: 8px;
-      justify-content: left;
-    }
-  }
-
-  .hashtag-link {
-    font-family: $font-family-primary;
-    font-size: 16px;
-    font-weight: 400;
-    color: #000000;
-    text-decoration: none;
-    white-space: nowrap;
-    transition: color 0.3s ease;
-
-    &:hover {
-      color: #0049B4;
-      text-decoration: underline;
-    }
-
-    @include respond-to('md') {
-      font-size: 14px;
-    }
-
-    @include respond-to('sm') {
-      // Figma 모바일: 12px
-      font-size: 12px;
-      color: #212529;
-    }
-  }
-
-  .hashtag-separator {
-    font-family: $font-family-primary;
-    font-size: 16px;
-    color: #000000;
-    user-select: none;
-
-    @include respond-to('md') {
-      font-size: 14px;
-    }
-
-    @include respond-to('sm') {
-      // Figma 모바일: 세로 구분선 (|)
-      font-size: 10px;
-      color: #212529;
-      display: flex;
-      align-items: center;
-      height: 10px;
     }
   }
 }
@@ -863,7 +827,7 @@
     font-size: 15px;
     font-weight: 500;
     color: #FFFFFF;
-    background: #008ae2;
+    background: #2A69DE;
     text-decoration: none;
     border-radius: 10px;
     transition: all 0.3s ease;
@@ -910,7 +874,7 @@
     }
 
     &:hover {
-      background: darken(#008ae2, 10%);
+      background: darken(#2A69DE, 10%);
 
       svg {
         transform: translateX(4px);
@@ -952,14 +916,49 @@
     flex-direction: column;
     align-items: flex-start;
     position: relative;
-    transition: all 0.3s ease;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
     gap: 0px;
     cursor: pointer;
 
+    // Figma: hover 시 파란 세로 그라데이션 (카드4 = hover 예시 상태)
+    // 그라데이션은 transition 직접 적용 불가 → 오버레이 opacity로 over/out 부드럽게 페이드
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: linear-gradient(180deg, #50CAFF 0%, #2088FF 100%);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    // 콘텐츠를 오버레이 위로
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    .card-title,
+    .card-description {
+      transition: color 0.3s ease;
+    }
+
     &:hover {
       transform: translateY(-4px);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+      border-color: transparent;
-      border-color: #008ae2;
+      box-shadow: 0 10px 28px rgba(0, 14, 27, 0.22);
+
+      &::before {
+        opacity: 1;
+      }
+
+      .card-title,
+      .card-description {
+        color: #FFFFFF;
+      }
     }
 
     @include respond-to('md') {
@@ -1043,7 +1042,7 @@
 // -----------------------------------------------------------------------------
 
 // -----------------------------------------------------------------------------
-// Info Section - 광주은행 API 소개 (Figma Design)
+// Info Section - 제주은행(DJBank) API 소개 (Figma Design)
 // -----------------------------------------------------------------------------
 .info-section {
   position: relative;
@@ -1060,13 +1059,28 @@
     padding: 75px 20px 20px;
   }
 
+  // Figma 배경 이미지: 좌측 블루 카드(우하단 라운드 baked), 우측은 흰 영역(모니터)
   .info-background {
     position: absolute;
-    inset: 0;
+    top: 0;
-    background-image: url('/img/bg_api_intro.svg');
+    bottom: 0;
-    background-size: cover;
+    left: 0;
-    background-position: center;
+    width: 54%; // 텍스트(좌측 콘텐츠) 폭을 수용하면서 모니터와 겹치지 않는 폭
+    background-image: url('/img/bg_diff_card.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: left top;
     pointer-events: none;
+
+    @include respond-to('md') {
+      // 태블릿: 컬럼 레이아웃 → 전체 블루
+      width: 100%;
+    }
+
+    @include respond-to('sm') {
+      // 모바일: 흰 배경 + 다크 텍스트(기존 sm 오버라이드) 유지
+      display: none;
+    }
   }
 
   //.info-point-image {
@@ -1131,7 +1145,7 @@
   .info-title {
     font-size: 28px;
     line-height: 1.4;
-    color: #000000;
+    color: #FFFFFF; // Figma: 블루 카드 위 흰 텍스트
     margin: 0 0 $spacing-lg 0;
 
     @include respond-to('md') {
@@ -1154,7 +1168,7 @@
 
     .title-highlight {
       font-weight: 700;
-      color: #0049B4;
+      color: #0FDBFF; // Figma: 브랜드 라인 시안 강조
       font-size: 36px;
 
       @include respond-to('sm') {
@@ -1172,7 +1186,7 @@
     font-size: 20px;
     font-weight: 400;
     line-height: 1.6;
-    color: #000000;
+    color: #FFFFFF; // Figma: 블루 카드 위 흰 텍스트
     margin: 0 0 $spacing-3xl 0;
 
     @include respond-to('md') {
@@ -1210,17 +1224,17 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 18px 52px;
+    padding: 0 28px;
     font-family: $font-family-primary;
-    font-size: 24px;
+    font-size: 18px; // Figma: 18px Bold
     font-weight: 700;
-    line-height: 56px;
+    line-height: 1.2;
-    border-radius: 20px;
+    border-radius: 14px;
     text-decoration: none;
     white-space: nowrap;
     transition: all 0.3s ease;
-    min-width: 310px;
+    min-width: 0;
-    height: 128px;
+    height: 60px; // Figma: 버튼 높이 ~71px → 카드 내 적정 60px
 
     @include respond-to('sm') {
       // Figma 모바일: 160x72px, 14px Bold, border-radius 8px
@@ -1251,27 +1265,32 @@
     }
   }
 
+  // Figma: '처음 만나는 DJBank API' = 연한 파랑 배경 + 네이비 텍스트
   .action-btn-primary {
-    background: #0049B4;
+    background: #D5EFFF;
-    color: #FFFFFF;
+    color: #211894;
 
     &:hover {
-      background: darken(#0049B4, 10%);
+      background: darken(#D5EFFF, 8%);
     }
   }
 
+  // Figma: '피드백/개선요청' = 진한 블루 배경 + 흰 텍스트, 테두리 없음
   .action-btn-secondary {
-    background: #00ACDD;
+    background: #0046FF;
     color: #FFFFFF;
+    border: none;
 
+    // hover 반전: 흰 배경 + 블루 텍스트
     &:hover {
-      background: darken(#00ACDD, 10%);
+      background: #FFFFFF;
+      color: #0046FF;
     }
   }
 
   .info-image {
-    flex: 1;
+    flex: 0 1 460px;
-    max-width: 560px;
+    max-width: 460px; // 모니터 일러스트 축소 — 블루 카드 영역 침범 방지
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1331,6 +1350,8 @@
   }
 
   .support-background {
+    // Figma: 깔끔한 #eef7fd 단색 배경. 구 광주은행 장식 이미지 제거.
+    display: none;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -1696,7 +1717,8 @@
 
     // FAQ Card Specifics
     &--faq {
-      background: #DAF0FF;
+      background: #CAEAFF;
+      border: 1px solid #97D5FF;
 
       .card-content h3 {
         color: #212529;
@@ -1705,7 +1727,8 @@
 
     // Q&A Card Specifics
     &--qna {
-      background: #D9F6F8;
+      background: #C7F6F9;
+      border: 1px solid #99E0CC;
 
       .card-content h3 {
         color: #212529;
@@ -2074,7 +2097,7 @@
     padding: 10px;
     min-height: 60px;
     width: 178px;
-    background: #008ae2;
+    background: #4685EF;
     color: #FFFFFF;
     font-family: $font-family-primary;
     font-size: 20px;
@@ -2084,9 +2107,9 @@
     transition: all 0.3s ease;
 
     &:hover {
-      background: darken(#008ae2, 10%);
+      background: darken(#4685EF, 10%);
       transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 138, 226, 0.3);
+      box-shadow: 0 4px 12px rgba(70, 133, 239, 0.3);
     }
 
     &:active {
@@ -2105,6 +2128,30 @@
     }
   }
 
+  // Figma 1:236 — 좌/우 3D 캐릭터 일러스트 (image4 / image6)
+  .cta-character {
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+    height: auto;
+    pointer-events: none;
+    user-select: none;
+
+    @include respond-to('md') {
+      display: none;
+    }
+  }
+
+  .cta-character-left {
+    left: 0;
+    width: clamp(180px, 21.6vw, 416px);
+  }
+
+  .cta-character-right {
+    right: 0;
+    width: clamp(180px, 21.1vw, 406px);
+  }
+
   .cta-divider {
     position: absolute;
     bottom: 0;

src/main/resources/templates/views/apps/main/index.html

@@ -5,6 +5,8 @@
 
 <body>
 <th:block layout:fragment="contentFragment">
+  <!-- 캐러셀 + 검색 + 추천: 이어지는 배경 그룹 -->
+  <div class="landing-top">
   <!-- Hero Carousel Section -->
   <section class="hero-carousel-section">
     <!-- Carousel Container -->
@@ -96,21 +98,27 @@
   <!-- API 검색 섹션 -->
   <section class="api-search-section">
     <div class="search-background"></div>
-    <div class="search-content-wrapper">
+    <div class="search-card">
-      <div class="search-character">
-        <img th:src="@{/img/img_search_character.png}" alt="검색">
-      </div>
       <div class="search-text-content">
         <h2 class="search-title">
           원하는 API를<br>
           지금 검색해 보세요.
         </h2>
       </div>
+      <div class="search-main">
+        <div class="hashtag-section">
+          <span class="hashtag-label">자주찾는 API</span>
+          <div class="hashtag-list" th:if="${hashtags != null and not #lists.isEmpty(hashtags)}">
+            <th:block th:each="hashtag, iterStat : ${hashtags}">
+              <a href="#" class="hashtag-link" th:data-search="${hashtag}" th:text="${'#' + hashtag}"></a>
+              <span class="hashtag-separator" th:unless="${iterStat.last}">|</span>
+            </th:block>
+          </div>
         </div>
         <div class="search-input-wrapper">
       <form th:action="@{/apis}" method="get" class="search-form">
         <div class="search-box">
-          <input type="text" class="search-input" placeholder="어떤 API를 칮고 계신가요?" id="apiSearchInput" name="keyword">
+          <input type="text" class="search-input" placeholder="어떤 API를 찾고 계신가요?" id="apiSearchInput" name="keyword">
           <button class="search-icon-button" type="submit">
             <svg width="33" height="34" viewBox="0 0 33 34" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M15.1738 0C23.5534 0.000258465 30.3465 6.79327 30.3467 15.1729C30.3467 18.6141 29.2001 21.7875 27.2695 24.333C27.2733 24.3367 27.2775 24.34 27.2812 24.3438L32.1348 29.1973C33.1223 30.1849 33.1223 31.7859 32.1348 32.7734C31.1472 33.7609 29.5461 33.7609 28.5586 32.7734L23.7051 27.9199C23.6653 27.8802 23.6293 27.8376 23.5928 27.7959C21.1837 29.406 18.2889 30.3466 15.1738 30.3467C6.79392 30.3467 0 23.5528 0 15.1729C0.000201956 6.79311 6.79404 0 15.1738 0ZM15.1738 5.05762C9.58735 5.05762 5.05782 9.58642 5.05762 15.1729C5.05762 20.7595 9.58722 25.2891 15.1738 25.2891C20.7602 25.2888 25.2891 20.7593 25.2891 15.1729C25.2889 9.58658 20.7601 5.05788 15.1738 5.05762Z" fill="#0049B4"/>
@@ -119,14 +127,6 @@
         </div>
       </form>
         </div>
-    <div class="hashtag-section">
-      <span class="hashtag-label">자주찾는 API</span>
-      <div class="hashtag-list" th:if="${hashtags != null and not #lists.isEmpty(hashtags)}">
-        <th:block th:each="hashtag, iterStat : ${hashtags}">
-          <a href="#" class="hashtag-link" th:data-search="${hashtag}" th:text="${'#' + hashtag}">
-          </a>
-          <span class="hashtag-separator" th:unless="${iterStat.last}">|</span>
-        </th:block>
       </div>
     </div>
   </section>
@@ -136,8 +136,8 @@
     <div class="showcase-background"></div>
     <div class="showcase-wrapper">
       <div class="section-header">
-        <h2 class="section-title">추천 API</h2>
+        <h2 class="section-title">추천 API 그룹</h2>
-        <p class="section-subtitle">다양한 금융 API상품을 소개합니다.</p>
+        <p class="section-subtitle">다양한 금융 API를 제공합니다.</p>
         <a th:href="@{/apis}" class="btn-all-apis">
           전체보기
           <svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -168,6 +168,8 @@
       </div>
     </div>
   </section>
+  </div>
+  <!-- /landing-top -->
 
   <!-- 정보 섹션 -->
   <section class="info-section">
@@ -279,7 +281,7 @@
         <div class="stats-divider"></div>
 
         <div class="stat-card">
-          <p class="stat-label">API 이용 건수</p>
+          <p class="stat-label">API 이용 건수(지난달)</p>
           <div class="stat-icon">
             <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
               <rect width="70" height="70" fill="url(#pattern0_3001_94)"/>
@@ -318,6 +320,8 @@
   <!-- 지금 바로 회원가입 CTA 섹션 -->
   <section class="signup-cta-section">
     <div class="cta-background"></div>
+    <img th:src="@{/img/cta_character_left.png}" alt="" class="cta-character cta-character-left">
+    <img th:src="@{/img/cta_character_right.png}" alt="" class="cta-character cta-character-right">
     <div class="container">
       <div class="cta-content">
         <h2 class="cta-title">DJBank API를 지금 바로 만나보세요.</h2>