공통 서브히어로 및 탭 네비

src/css/common.css

@@ -81,9 +81,10 @@ body{overflow-x:hidden;}
    .sh4-right{display:none;}
 }
 @media (max-width:768px){
-   .sh4{padding:calc(var(--header-height) + 48px) 20px 64px;}
+   .sh4{padding:calc(var(--header-height) + 48px) 20px 20px;}
    .sh4-nav{padding-left:20px;padding-right:20px;}
    .sh4-nav-tab{padding:0 14px;font-size:13px;}
+   .sh4-title em{font-size:4rem}
 }
 
 @media (max-width:1280px){.ab3-stats{padding-left:48px;padding-right:48px;}}
@@ -152,7 +153,7 @@ body{overflow-x:hidden;}
 .inner-wrap {max-width:1440px; margin:0 auto; padding:0 60px;}
  
 
-/* ── 상단 타이틀 ── */
+/* ── 상단 타이틀 ── 공통 */
 .ht-header {text-align:center; padding:80px 0;}
 .ht-header-title {font-size:48px; font-weight:500; letter-spacing:-.04em; color:#000; line-height:1.3; margin-bottom:0;}
 .ht-header-title em {display:inline-block; font-size:60px; font-style:normal;}
@@ -207,40 +208,16 @@ body{overflow-x:hidden;}
 
 /* ── Responsive ── */
 @media (max-width: 900px) {
-  .inner-wrap {
+  .inner-wrap {padding: 0 20px;}
-    padding: 0 20px;
+  .ht-header {padding: 48px 0 32px;}
-  }
+  .ht-header-title {font-size: 32px;}
-  .ht-header {
+  .ht-header-title em{font-size:40px}
-    padding: 48px 0 32px;
+  .ht-card {padding: 32px 20px 56px;border-radius: 12px;}
-  }
+  .ht-panel {flex-direction:column;gap: 0;min-width:auto}
-  .ht-header-title {
+  .ht-sidebar {margin-bottom: 32px;min-width:auto;}
-    font-size: 32px;
+  .ht-line-col {display: none;}
-  }
+  .ht-content {padding-left: 20px;border-left: 1px solid var(--color-primary-soft-border);}
-  .ht-card {
+  .ht-dot {left: -24px;}
-    padding: 32px 20px 56px;
+  .ht-decade {font-size: 36px;}
-    border-radius: 12px;
+  .ht-year {font-size: 26px;}
-  }
-  .ht-panel {
-    grid-template-columns: 1fr;
-    gap: 0;
-  }
-  .ht-sidebar {
-    margin-bottom: 32px;
-  }
-  .ht-line-col {
-    display: none;
-  }
-  .ht-content {
-    padding-left: 20px;
-    border-left: 1px solid var(--color-primary-soft-border);
-  }
-  .ht-dot {
-    left: -24px;
-  }
-  .ht-decade {
-    font-size: 36px;
-  }
-  .ht-year {
-    font-size: 26px;
-  }
 }

src/pages/contact/InquiryPage.jsx

@@ -3,21 +3,24 @@ import SubHero from "../../components/SubHero";
 
 function InquiryPage() {
   const ref = useFadeIn();
-
+  const CONTACT_NAV = [
+    { label: "문의하기", to: "/contact/inquiry" },
+    { label: "채용정보", to: "/contact/inquiry" },
+  ];
   return (
     <article ref={ref}>
       <SubHero
         label="CONTACT US"
         title={
           <>
-            <span style={{ color: "#111" }}>프로젝트 및 협업 문의</span>
+            {/* <span style={{ color: "#111" }}>프로젝트 및 협업 문의</span>
-            <br />
+            <br /> */}
-            <em>문의하기</em>
+            <em>Contact Us</em>
           </>
         }
-        desc="PAL Networks에 프로젝트 협업이나 기술 도입을 문의하고 싶으시다면
+        // desc="PAL Networks에 프로젝트 협업이나 기술 도입을 문의하고 싶으시다면
-        아래 정보를 통해 편하게 연락 주세요."
+        // 아래 정보를 통해 편하게 연락 주세요."
-        // navItems={}
+        navItems={CONTACT_NAV}
       />
 
       <div className="sub-content">

src/pages/contact/RecruitPage.jsx

@@ -3,21 +3,24 @@ import SubHero from "../../components/SubHero";
 
 function RecruitPage() {
   const ref = useFadeIn();
-
+  const CONTACT_NAV = [
+    { label: "문의하기", to: "/contact/inquiry" },
+    { label: "채용정보", to: "/contact/inquiry" },
+  ];
   return (
     <article ref={ref}>
       <SubHero
         label="CONTACT US"
         title={
           <>
-            <span style={{ color: "#111" }}>기술과 사람을 연결합니다.</span>
+            {/* <span style={{ color: "#111" }}>기술과 사람을 연결합니다.</span>
-            <br />
+            <br /> */}
-            <em>채용정보</em>
+            <em>Careers</em>
           </>
         }
-        desc="PAL Networks와 함께 성장할
+        //   desc="PAL Networks와 함께 성장할
-      새로운 동료를 기다리고 있습니다."
+        // 새로운 동료를 기다리고 있습니다."
-        // navItems={}
+        navItems={CONTACT_NAV}
       />
 
       <div className="sub-content">

src/pages/solution/KtGcloudPage.jsx

@@ -3,28 +3,31 @@ import SubHero from "../../components/SubHero";
 
 function KtGcloudPage() {
   const ref = useFadeIn();
-
+  const SOLUTION_NAV = [
+    { label: "비행상황관리 시스템", to: "/solution/flight-control" },
+    { label: "IBE (Internet Booking Engine)", to: "/solution/ibe" },
+    { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" },
+    { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" },
+  ];
   return (
     <article ref={ref}>
       <SubHero
         label="SOLUTION"
         title={
           <>
-            <span style={{ color: "#111" }}>클라우드 인프라 공급</span>
+            {/* <span style={{ color: "#111" }}>클라우드 인프라 공급</span>
-            <br />
+            <br /> */}
-            <em>KT G-cloud 인천총판</em>
+            <em>KT G-Cloud</em>
           </>
         }
-        desc="KT G-cloud 인천 지역 총판 파트너로서
+        //         desc="KT G-cloud 인천 지역 총판 파트너로서
-공공기관 클라우드 인프라 도입과 운영을 지원합니다."
+        // 공공기관 클라우드 인프라 도입과 운영을 지원합니다."
-        // navItems={}
+        navItems={SOLUTION_NAV}
       />
 
       <div className="sub-content">
         <section className="sub-section">
-          <span className="sub-section-eyebrow sub-fade-in">
+          <span className="sub-section-eyebrow sub-fade-in">KT G-cloud 인천총판</span>
-            KT G-cloud 인천총판
-          </span>
 
           {/* <main className="sub-page">
               <section className="sub-visual">