TEST

src/components/SubHero.jsx

@@ -2,39 +2,29 @@ import { useEffect, useRef, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 
 const menuMap = {
-  "/company": { label: "Company", color: "dark" },
-  "/uam": { label: "UAM / UATM", color: "dark" },
-  "/business": { label: "Business", color: "dark" },
-  "/solution": { label: "Solution", color: "dark" },
-  "/contact": { label: "Contact Us", color: "dark" },
+  "/company":  { label: "Company" },
+  "/uam":      { label: "UAM / UATM" },
+  "/business": { label: "Business" },
+  "/solution": { label: "Solution" },
+  "/contact":  { label: "Contact Us" },
 };
 
 export default function SubHero({ title, desc, navItems, bgImage }) {
   const { pathname } = useLocation();
   const topPath  = "/" + pathname.split("/")[1];
   const topLabel = menuMap[topPath]?.label || "";
-  const currentLabel = navItems?.find((n) => n.to === pathname)?.label || "";
+  const curLabel = navItems?.find((n) => n.to === pathname)?.label || "";
 
   const [dropOpen, setDropOpen] = useState(false);
-  const bgRef = useRef(null);
-  const txtRef = useRef(null);
-  const lineRef = useRef(null);
-  const fl1Ref = useRef(null);
-  const fl2Ref = useRef(null);
-  const descRef = useRef(null);
+  const [scrollY,  setScrollY]  = useState(0);
   const dropRef = useRef(null);
 
-  // 히어로 진입 애니
   useEffect(() => {
-    const t1 = setTimeout(() => bgRef.current?.classList.add("sh-bg--zoomed"), 80);
-    const t2 = setTimeout(() => lineRef.current?.classList.add("sh-line--drawn"), 600);
-    const t3 = setTimeout(() => fl1Ref.current?.classList.add("sh-fill--on"), 200);
-    const t4 = setTimeout(() => fl2Ref.current?.classList.add("sh-fill--on"), 480);
-    const t5 = setTimeout(() => descRef.current?.classList.add("sh-desc--on"), 900);
-    return () => [t1, t2, t3, t4, t5].forEach(clearTimeout);
-  }, [pathname]);
+    const onScroll = () => setScrollY(window.scrollY);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
 
-  // 외부 클릭 시 드롭다운 닫기
   useEffect(() => {
     const handler = (e) => {
       if (!dropRef.current?.contains(e.target)) setDropOpen(false);
@@ -43,75 +33,85 @@ export default function SubHero({ title, desc, navItems, bgImage }) {
     return () => document.removeEventListener("mousedown", handler);
   }, []);
 
+  const parallaxY   = scrollY * 0.45;
+  const fadeOpacity = Math.max(0, 1 - scrollY / 420);
   const titleLines  = typeof title === "string" ? title.split("\n") : [title];
 
   return (
     <>
-      {/* 히어로 */}
-      <section className="sh">
-        <div className="sh-bg" ref={bgRef} style={bgImage ? { backgroundImage: `linear-gradient(105deg,rgba(5,12,31,.97) 0%,rgba(5,12,31,.82) 38%,rgba(8,18,52,.65) 62%,rgba(5,12,31,.78) 100%),url(${bgImage})` } : {}} />
-        <div className="sh-glow" />
-        <div className="sh-dim" />
-
-        <div className="sh-inner">
-          {/* 브레드크럼 */}
-          <nav className="sh-bc" aria-label="breadcrumb">
-            <Link to="/main" className="sh-bc-static">
-              Home
-            </Link>
-            <span className="sh-bc-sep">›</span>
+      <section className="sh2">
+        <div
+          className="sh2-bg"
+          style={{
+            backgroundImage: bgImage ? `url(${bgImage})` : "none",
+            transform: `translateY(${parallaxY}px) scale(1.18)`,
+          }}
+        />
+        <div className="sh2-dim" />
+        <div className="sh2-grain" />
+        <div className="sh2-glow" />
+        <div className="sh2-vline sh2-vline--l" />
+        <div className="sh2-vline sh2-vline--r" />
 
-            {/* 드롭다운 */}
-            <div className="sh-bc-drop" ref={dropRef}>
-              <button className="sh-bc-btn" onClick={() => setDropOpen((v) => !v)} aria-expanded={dropOpen} aria-haspopup="listbox">
+        <div className="sh2-inner" style={{ opacity: fadeOpacity }}>
+          <nav className="sh2-bc" aria-label="breadcrumb">
+            <Link to="/main" className="sh2-bc-item">Home</Link>
+            <span className="sh2-bc-sep">—</span>
+            <div className="sh2-bc-drop" ref={dropRef}>
+              <button
+                className="sh2-bc-btn"
+                onClick={() => setDropOpen((v) => !v)}
+                aria-expanded={dropOpen}
+              >
                 {topLabel}
-                <svg className={`sh-bc-arrow${dropOpen ? " sh-bc-arrow--open" : ""}`} width="10" height="10" viewBox="0 0 10 10" fill="none">
-                  <path d="M2 3.5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <svg className={`sh2-bc-arrow${dropOpen ? " sh2-bc-arrow--open" : ""}`}
+                  width="10" height="6" viewBox="0 0 10 6" fill="none">
+                  <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5"
+                    strokeLinecap="round" strokeLinejoin="round"/>
                 </svg>
               </button>
               {dropOpen && (
-                <div className="sh-bc-menu" role="listbox">
+                <div className="sh2-bc-menu" role="listbox">
                   {navItems?.map((item) => (
-                    <Link key={item.to} to={item.to} className={`sh-bc-menu-item${item.to === pathname ? " sh-bc-menu-item--cur" : ""}`} onClick={() => setDropOpen(false)} role="option">
-                      <span className="sh-bc-menu-dot" />
+                    <Link key={item.to} to={item.to} role="option"
+                      className={`sh2-bc-menu-item${item.to === pathname ? " sh2-bc-menu-item--cur" : ""}`}
+                      onClick={() => setDropOpen(false)}>
                       {item.label}
                     </Link>
                   ))}
                 </div>
               )}
             </div>
-
-            <span className="sh-bc-sep">›</span>
-            <span className="sh-bc-now" aria-current="page">
-              {currentLabel}
-            </span>
+            <span className="sh2-bc-sep">—</span>
+            <span className="sh2-bc-cur">{curLabel}</span>
           </nav>
 
-          {/* 타이틀 */}
-          <h2 className="sh-title">
+          <div className="sh2-title-wrap">
             {titleLines.map((line, i) => (
-              <span key={i} className="sh-fill" ref={i === 0 ? fl1Ref : fl2Ref}>
+              <h1 key={i} className="sh2-title" style={{ animationDelay: `${i * 0.14}s` }}>
                 {line}
-              </span>
+              </h1>
             ))}
-          </h2>
-          {desc && (
-            <p className="sh-desc" ref={descRef}>
-              {desc}
-            </p>
-          )}
           </div>
 
-        <div className="sh-line" ref={lineRef} />
+          {desc && <p className="sh2-desc">{desc}</p>}
+          <div className="sh2-accent-line" />
+        </div>
+
+        <div className="sh2-scroll-hint">
+          <span>scroll</span>
+          <div className="sh2-scroll-bar" />
+        </div>
       </section>
 
-      {/* 서브 탭 네비 */}
       {navItems?.length > 1 && (
-        <nav className="sh-nav" aria-label="Sub Navigation">
-          <div className="sh-nav-inner">
+        <nav className="sh2-nav" aria-label="Sub Navigation">
+          <div className="sh2-nav-inner">
             {navItems.map((item) => (
-              <Link key={item.to} to={item.to} className={`sh-nav-tab${pathname === item.to ? " sh-nav-tab--active" : ""}`}>
+              <Link key={item.to} to={item.to}
+                className={`sh2-nav-tab${pathname === item.to ? " sh2-nav-tab--active" : ""}`}>
                 {item.label}
+                {pathname === item.to && <span className="sh2-nav-pip" />}
               </Link>
             ))}
           </div>

src/css/common.css

@@ -9,6 +9,21 @@
    --color-primary-border:rgba(58,64,129,.2);
    --color-primary-border-strong:rgba(58,64,129,.24);
    --color-primary-shadow:rgba(58,64,129,.18);
+
+   /* ── Bold & Editorial 확장 팔레트 (로고 그라디언트 추출) ── */
+   --ink:#08080f;
+   --ink-2:#0e0e1a;
+   --ink-3:#161625;
+   --pink:#d94889;
+   --pink-light:#e58fb5;
+   --purple:#7b3fa0;
+   --purple-dark:#593a84;
+   --sky:#198dc7;
+   --grad-brand:linear-gradient(135deg,#d94889 0%,#7b3fa0 40%,#3A4081 75%,#198dc7 100%);
+   --grad-brand-h:linear-gradient(90deg,#d94889 0%,#7b3fa0 50%,#3A4081 100%);
+   --grad-text:linear-gradient(100deg,#fff 0%,#e58fb5 35%,#b07fd4 65%,#6B78B5 100%);
+   --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+
 }
 
 html{scrollbar-gutter:inherit;}
@@ -17,7 +32,6 @@ body{overflow-x:hidden;}
 .main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
 .sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
 
-
 /*sub common*/
 .sub-hero{position:relative;background:#f5f6fa;border-bottom:1px solid rgba(58,64,129,.08);overflow:hidden;}
 .sub-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(58,64,129,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(58,64,129,.04) 0%,transparent 60%);pointer-events:none;}
@@ -271,3 +285,164 @@ body{overflow-x:hidden;}
 
 @media (max-width:1024px){.location-wrap{grid-template-columns:1fr;gap:28px;}.location-map{height:440px;}.location-info-card{position:relative;top:auto;}}
 @media (max-width:768px){.location-map{height:340px;border-radius:22px;}.location-transport{padding:24px;border-radius:22px;}.location-transport-item{grid-template-columns:1fr;gap:10px;padding:16px;}.location-info-card{padding:26px 22px;border-radius:24px;}.location-info-card h3{font-size:24px;}.location-info-item{grid-template-columns:44px 1fr;}.location-info-icon{width:44px;height:44px;border-radius:14px;}.location-info-value{font-size:14px;}}
+
+/*sh2 subhero bold editorial*/
+.sh2{position:relative;height:100svh;min-height:560px;max-height:860px;overflow:hidden;background:var(--ink);margin-top:calc(-1 * var(--header-height));display:flex;align-items:center;}
+.sh2-bg{position:absolute;inset:-18% 0;background-size:cover;background-position:center;will-change:transform;}
+.sh2-dim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,8,15,.97) 0%,rgba(8,8,15,.82) 40%,rgba(8,8,15,.62) 70%,rgba(8,8,15,.8) 100%);pointer-events:none;}
+.sh2-grain{position:absolute;inset:0;opacity:.045;background-image:var(--noise);background-size:180px 180px;pointer-events:none;mix-blend-mode:overlay;}
+.sh2-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at 72% 44%,rgba(123,63,160,.22) 0%,transparent 60%),radial-gradient(ellipse 35% 45% at 15% 75%,rgba(217,72,137,.12) 0%,transparent 55%);pointer-events:none;}
+.sh2-vline{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.06) 30%,rgba(255,255,255,.06) 70%,transparent);pointer-events:none;}
+.sh2-vline--l{left:80px;}
+.sh2-vline--r{right:80px;}
+.sh2-inner{position:relative;z-index:2;max-width:1440px;width:100%;margin:0 auto;padding:0 80px;padding-top:var(--header-height);transition:opacity .1s linear;}
+.sh2-bc{display:flex;align-items:center;gap:0;margin-bottom:48px;}
+.sh2-bc-item{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);text-decoration:none;transition:color .2s;}
+.sh2-bc-item:hover{color:rgba(255,255,255,.6);}
+.sh2-bc-sep{margin:0 10px;font-size:10px;color:rgba(255,255,255,.12);letter-spacing:.05em;}
+.sh2-bc-drop{position:relative;}
+.sh2-bc-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.48);cursor:pointer;padding:5px 12px;border-radius:4px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);backdrop-filter:blur(12px);transition:background .2s,border-color .2s,color .2s;}
+.sh2-bc-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);}
+.sh2-bc-arrow{transition:transform .22s ease;color:rgba(255,255,255,.3);}
+.sh2-bc-arrow--open{transform:rotate(180deg);}
+.sh2-bc-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:180px;background:rgba(12,12,24,.95);backdrop-filter:blur(24px);border:1px solid rgba(123,63,160,.2);border-radius:10px;padding:6px;z-index:200;animation:sh2MenuIn .18s ease;}
+.sh2-bc-menu-item{display:block;padding:9px 14px;font-size:13px;font-weight:500;color:rgba(255,255,255,.48);border-radius:7px;text-decoration:none;transition:background .15s,color .15s;}
+.sh2-bc-menu-item:hover{background:rgba(123,63,160,.25);color:#fff;}
+.sh2-bc-menu-item--cur{color:#fff;font-weight:700;background:rgba(123,63,160,.18);}
+.sh2-bc-cur{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);}
+.sh2-title-wrap{margin-bottom:28px;}
+.sh2-title{display:block;font-size:clamp(48px,7.5vw,108px);font-weight:900;line-height:1;letter-spacing:-.055em;color:#fff;opacity:0;transform:translateY(36px);animation:sh2TitleIn .85s cubic-bezier(.16,1,.3,1) forwards;}
+.sh2-desc{font-size:clamp(14px,1.3vw,17px);line-height:1.75;color:rgba(255,255,255,.38);max-width:520px;word-break:keep-all;opacity:0;animation:sh2FadeUp .8s .55s cubic-bezier(.16,1,.3,1) forwards;}
+.sh2-accent-line{margin-top:36px;width:48px;height:3px;background:var(--grad-brand-h);border-radius:999px;opacity:0;animation:sh2FadeUp .7s .7s cubic-bezier(.16,1,.3,1) forwards;}
+.sh2-scroll-hint{position:absolute;bottom:36px;left:80px;display:flex;align-items:center;gap:12px;z-index:3;}
+.sh2-scroll-hint span{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.2);}
+.sh2-scroll-bar{width:40px;height:1px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;}
+.sh2-scroll-bar::after{content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;background:var(--pink);animation:sh2ScrollBar 1.8s 1s ease-in-out infinite;}
+.sh2-nav{position:sticky;top:var(--header-height);z-index:50;background:rgba(8,8,15,.88);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.06);}
+.sh2-nav-inner{max-width:1440px;margin:0 auto;padding:0 80px;display:flex;align-items:center;}
+.sh2-nav-tab{position:relative;display:inline-flex;align-items:center;height:54px;padding:0 22px;font-size:13px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.28);text-decoration:none;transition:color .25s;white-space:nowrap;}
+.sh2-nav-tab:hover{color:rgba(255,255,255,.7);}
+.sh2-nav-tab--active{color:#fff;}
+.sh2-nav-pip{position:absolute;bottom:0;left:22px;right:22px;height:2px;background:var(--grad-brand-h);border-radius:999px;}
+
+@keyframes sh2MenuIn{
+   from{opacity:0;transform:translateY(-6px) scale(.97);}
+   to{opacity:1;transform:translateY(0) scale(1);}
+}
+@keyframes sh2TitleIn{
+   to{opacity:1;transform:translateY(0);}
+}
+@keyframes sh2FadeUp{
+   from{opacity:0;transform:translateY(16px);}
+   to{opacity:1;transform:translateY(0);}
+}
+@keyframes sh2ScrollBar{
+   0%{left:-100%;}
+   50%{left:0;}
+   100%{left:100%;}
+}
+
+/*ab2 about page bold editorial*/
+.ab2-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(58,64,129,.55);margin-bottom:40px;}
+.ab2-eyebrow--light{color:rgba(255,255,255,.2);}
+.ab2-stats{background:#fff;padding:100px 80px;border-bottom:1px solid rgba(17,17,17,.06);}
+.ab2-stats-inner{max-width:1440px;margin:0 auto;}
+.ab2-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(17,17,17,.06);}
+.ab2-si{padding:40px 40px 40px 0;border-right:1px solid rgba(17,17,17,.06);position:relative;}
+.ab2-si:last-child{border-right:0;}
+.ab2-si:not(:first-child){padding-left:40px;}
+.ab2-si-note{display:block;font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);margin-bottom:10px;}
+.ab2-si-num{display:block;font-size:clamp(52px,5.5vw,88px);font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--ink);}
+.ab2-si-lbl{display:block;margin-top:8px;font-size:13px;font-weight:500;color:rgba(17,17,17,.35);}
+.ab2-vid{height:520px;position:relative;overflow:hidden;background:var(--ink);}
+.ab2-vid-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform;}
+.ab2-vid-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,15,.1) 0%,rgba(8,8,15,.72) 100%);}
+.ab2-vid-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;padding:0 40px;will-change:transform,opacity;}
+.ab2-vid-kicker{font-size:10px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--pink);margin-bottom:20px;}
+.ab2-vid-title{font-size:clamp(40px,6vw,72px);font-weight:900;line-height:1.05;letter-spacing:-.06em;color:#fff;margin-bottom:18px;}
+.ab2-vid-desc{font-size:16px;line-height:1.75;color:rgba(255,255,255,.4);word-break:keep-all;}
+.ab2-phil{background:var(--ink);padding:140px 80px;}
+.ab2-phil-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
+.ab2-phil-words{display:flex;flex-direction:column;gap:4px;}
+.ab2-phil-word{display:block;font-size:clamp(44px,5.5vw,72px);font-weight:900;line-height:1.08;letter-spacing:-.055em;color:rgba(255,255,255,.75);}
+.ab2-phil-word--grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
+.ab2-phil-body{padding-top:16px;}
+.ab2-phil-badge{display:inline-flex;flex-direction:column;gap:3px;padding:14px 20px;border-radius:10px;border:1px solid rgba(217,72,137,.2);background:rgba(217,72,137,.07);margin-bottom:28px;}
+.ab2-phil-badge span{font-size:10px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.3);}
+.ab2-phil-badge strong{font-size:15px;font-weight:800;color:#fff;}
+.ab2-phil-text{font-size:15px;line-height:2;color:rgba(255,255,255,.32);word-break:keep-all;}
+.ab2-vals{background:#fff;padding:140px 80px;}
+.ab2-vals-inner{max-width:1440px;margin:0 auto;}
+.ab2-vals-title{font-size:clamp(40px,4.5vw,64px);font-weight:900;letter-spacing:-.055em;color:var(--ink);margin-bottom:72px;line-height:1.05;}
+.ab2-vals-list{display:flex;flex-direction:column;}
+.ab2-val-row{display:grid;grid-template-columns:80px 220px 1fr 40px;gap:32px;align-items:center;padding:40px 0;border-top:1px solid rgba(17,17,17,.07);cursor:default;}
+.ab2-val-row:last-child{border-bottom:1px solid rgba(17,17,17,.07);}
+.ab2-val-row:hover .ab2-val-arrow{color:var(--pink);transform:translateX(6px);}
+.ab2-val-row:hover .ab2-val-divider{background:var(--pink);}
+.ab2-val-left{display:flex;align-items:center;gap:16px;}
+.ab2-val-idx{font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(17,17,17,.15);}
+.ab2-val-divider{flex:1;height:1px;background:rgba(17,17,17,.08);transition:background .3s;}
+.ab2-val-en{display:block;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin-bottom:6px;}
+.ab2-val-name{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin:0;}
+.ab2-val-desc{font-size:14px;line-height:1.85;color:rgba(17,17,17,.44);word-break:keep-all;margin:0;}
+.ab2-val-arrow{font-size:18px;color:rgba(17,17,17,.15);transition:color .3s,transform .3s;}
+.ab2-awds{background:var(--ink-2);padding:140px 80px;}
+.ab2-awds-inner{max-width:1440px;margin:0 auto;}
+.ab2-awds-title{font-size:clamp(40px,4.5vw,64px);font-weight:900;letter-spacing:-.055em;color:#fff;margin-bottom:72px;line-height:1.05;}
+.ab2-awds-list{list-style:none;padding:0;margin:0;}
+.ab2-awd-row{display:grid;grid-template-columns:80px 2px 1fr;gap:32px;align-items:center;padding:36px 0;border-top:1px solid rgba(255,255,255,.05);}
+.ab2-awd-row:last-child{border-bottom:1px solid rgba(255,255,255,.05);}
+.ab2-awd-yr{font-size:13px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.22);}
+.ab2-awd-pip{width:2px;height:40px;background:linear-gradient(180deg,transparent,var(--pink),transparent);border-radius:999px;}
+.ab2-awd-body{display:flex;flex-direction:column;gap:5px;}
+.ab2-awd-name{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.02em;}
+.ab2-awd-org{font-size:13px;color:rgba(255,255,255,.28);}
+.ab2-cta{background:var(--ink);padding:160px 80px;text-align:center;position:relative;overflow:hidden;}
+.ab2-cta-noise{position:absolute;inset:0;opacity:.03;background-image:var(--noise);background-size:180px 180px;pointer-events:none;}
+.ab2-cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 50% 50%,rgba(217,72,137,.22) 0%,transparent 60%),radial-gradient(ellipse 45% 35% at 20% 80%,rgba(123,63,160,.14) 0%,transparent 55%);pointer-events:none;}
+.ab2-cta-inner{position:relative;z-index:1;max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
+.ab2-cta-chip{display:inline-block;padding:6px 18px;border-radius:999px;border:1px solid rgba(217,72,137,.3);background:rgba(217,72,137,.1);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:28px;}
+.ab2-cta-title{font-size:clamp(44px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.06em;color:#fff;margin-bottom:20px;}
+.ab2-cta-desc{font-size:16px;line-height:1.75;color:rgba(255,255,255,.38);margin-bottom:52px;word-break:keep-all;}
+.ab2-cta-btns{display:flex;align-items:center;gap:14px;}
+.ab2-cta-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 40px;border-radius:6px;font-size:15px;font-weight:800;text-decoration:none;letter-spacing:.01em;transition:transform .25s,box-shadow .25s,opacity .25s;}
+.ab2-cta-btn--fill{background:var(--grad-brand-h);color:#fff;}
+.ab2-cta-btn--fill:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(217,72,137,.3);}
+.ab2-cta-btn--line{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.14);}
+.ab2-cta-btn--line:hover{border-color:rgba(255,255,255,.3);color:#fff;transform:translateY(-3px);}
+
+@media (max-width:1280px){
+   .sh2-inner,.sh2-scroll-hint,.sh2-nav-inner{padding-left:48px;padding-right:48px;}
+   .sh2-vline--l{left:48px;}
+   .sh2-vline--r{right:48px;}
+   .ab2-stats,.ab2-phil,.ab2-vals,.ab2-awds,.ab2-cta{padding-left:48px;padding-right:48px;}
+   .ab2-val-row{grid-template-columns:72px 200px 1fr 32px;gap:24px;}
+}
+@media (max-width:1024px){
+   .sh2-inner,.sh2-scroll-hint,.sh2-nav-inner{padding-left:32px;padding-right:32px;}
+   .sh2-vline{display:none;}
+   .ab2-stats,.ab2-phil,.ab2-vals,.ab2-awds,.ab2-cta{padding-left:32px;padding-right:32px;}
+   .ab2-stats-grid{grid-template-columns:repeat(2,1fr);}
+   .ab2-si{padding-bottom:40px;border-bottom:1px solid rgba(17,17,17,.06);}
+   .ab2-si:nth-child(2n){border-right:0;}
+   .ab2-si:nth-child(3),.ab2-si:nth-child(4){border-bottom:0;}
+   .ab2-phil-inner{grid-template-columns:1fr;gap:56px;}
+   .ab2-val-row{grid-template-columns:60px 1fr;grid-template-rows:auto auto;gap:16px;}
+   .ab2-val-desc{grid-column:1/-1;}
+   .ab2-val-arrow{display:none;}
+}
+@media (max-width:768px){
+   .sh2{max-height:680px;}
+   .sh2-inner{padding-left:20px;padding-right:20px;}
+   .sh2-title{font-size:clamp(40px,12vw,64px);}
+   .sh2-scroll-hint{left:20px;}
+   .sh2-nav-inner{padding-left:20px;padding-right:20px;}
+   .sh2-nav-tab{padding:0 14px;font-size:12px;}
+   .ab2-stats,.ab2-phil,.ab2-vals,.ab2-awds{padding:80px 20px;}
+   .ab2-cta{padding:100px 20px;}
+   .ab2-stats-grid{grid-template-columns:1fr 1fr;}
+   .ab2-val-row{padding:30px 0;}
+   .ab2-awd-row{grid-template-columns:60px 2px 1fr;gap:20px;padding:28px 0;}
+   .ab2-cta-btns{flex-direction:column;width:100%;}
+   .ab2-cta-btn{width:100%;max-width:320px;}
+}

src/css/main.css

@@ -1,4 +1,15 @@
-:root{--header-height:96px;--color-primary:#3A4081;--color-primary-hover:#2F5DAA;--color-primary-light:#6B78B5;--color-primary-soft:rgba(58,64,129,.08);--color-primary-soft-strong:rgba(58,64,129,.12);--color-primary-soft-border:rgba(58,64,129,.16);--color-primary-border:rgba(58,64,129,.2);--color-primary-border-strong:rgba(58,64,129,.24);--color-primary-shadow:rgba(58,64,129,.18);}
+:root{
+   --header-height:96px;
+   --color-primary:#3A4081;
+   --color-primary-hover:#2F5DAA;
+   --color-primary-light:#6B78B5;
+   --color-primary-soft:rgba(58,64,129,.08);
+   --color-primary-soft-strong:rgba(58,64,129,.12);
+   --color-primary-soft-border:rgba(58,64,129,.16);
+   --color-primary-border:rgba(58,64,129,.2);
+   --color-primary-border-strong:rgba(58,64,129,.24);
+   --color-primary-shadow:rgba(58,64,129,.18);
+}
 
 html{scrollbar-gutter:inherit;}
 body{overflow-x:hidden;}

src/pages/company/AboutPage.jsx

@@ -14,17 +14,17 @@ const COMPANY_NAV = [
 ];
 
 const STATS = [
-  { num: 2010, suffix: "", label: "설립연도" },
-  { num: 50, suffix: "+", label: "완료 프로젝트" },
-  { num: 15, suffix: "+", label: "주요 고객사" },
-  { num: 10, suffix: "+", label: "R&D 전문인력" },
+  { num: 2010, suffix: "", label: "설립연도", note: "FOUNDED" },
+  { num: 50, suffix: "+", label: "완료 프로젝트", note: "PROJECTS" },
+  { num: 15, suffix: "+", label: "주요 고객사", note: "CLIENTS" },
+  { num: 10, suffix: "+", label: "R&D 전문인력", note: "EXPERTS" },
 ];
 
 const VALUES = [
-  { num: "01", title: "기술 혁신", desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며 미래 모빌리티 시대를 선도합니다.", img: "/images/img1.jpg" },
-  { num: "02", title: "신뢰와 책임", desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼 모든 서비스에 안전과 신뢰를 최우선으로 합니다.", img: "/images/img2.jpg" },
-  { num: "03", title: "파트너십", desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다.", img: "/images/img3.jpg" },
-  { num: "04", title: "전문성", desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다.", img: "/images/img4.jpg" },
+  { idx: "01", title: "기술 혁신", en: "Innovation", desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며 미래 모빌리티 시대를 선도합니다." },
+  { idx: "02", title: "신뢰와 책임", en: "Trust", desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼 모든 서비스에 안전과 신뢰를 최우선으로 합니다." },
+  { idx: "03", title: "파트너십", en: "Partnership", desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다." },
+  { idx: "04", title: "전문성", en: "Expertise", desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다." },
 ];
 
 const AWARDS = [
@@ -55,44 +55,29 @@ export default function AboutPage() {
 
   useEffect(() => {
     const ctx = gsap.context(() => {
-      // 영상 패럴랙스
+      /* 영상 패럴랙스 */
       gsap.to(videoRef.current, {
-        scale: 1.1,
+        scale: 1.12,
         scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "bottom top", scrub: 2 },
       });
-      gsap.to(".ab-vid-txt", {
-        y: -80,
+      gsap.to(".ab2-vid-txt", {
+        y: -90,
         opacity: 0,
-        scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "55% top", scrub: 1 },
+        scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "60% top", scrub: 1 },
       });
 
-      // 철학 텍스트 라인
-      gsap.fromTo(".ab-phil-line", { opacity: 0, x: -40 }, { opacity: 1, x: 0, stagger: 0.18, duration: 1, ease: "power3.out", scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } });
-      // 철학 오른쪽
-      gsap.fromTo(".ab-phil-right", { opacity: 0, x: 50 }, { opacity: 1, x: 0, duration: 1.1, ease: "power3.out", scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } });
-      gsap.fromTo(".ab-phil-body", { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: ".ab-phil", start: "top 55%" } });
-
-      // 핵심가치
-      gsap.fromTo(".ab-val-item", { opacity: 0, y: 40 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out", scrollTrigger: { trigger: ".ab-vals", start: "top 72%" } });
-
-      // 수상
-      gsap.fromTo(".ab-awd-row", { opacity: 0, y: 22 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.6, ease: "power2.out", scrollTrigger: { trigger: ".ab-awds", start: "top 76%" } });
-
-      // CTA
-      gsap.fromTo(".ab-cta-inner > *", { opacity: 0, y: 28 }, { opacity: 1, y: 0, stagger: 0.14, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: ".ab-cta", start: "top 75%" } });
-
-      // stats fade
+      /* 숫자 카운터 + 페이드 */
       gsap.fromTo(
-        ".ab-si",
-        { opacity: 0, y: 32 },
+        ".ab2-si",
+        { opacity: 0, y: 40 },
         {
           opacity: 1,
           y: 0,
           stagger: 0.1,
-          duration: 0.7,
+          duration: 0.8,
           ease: "power3.out",
           scrollTrigger: {
-            trigger: ".ab-stats",
+            trigger: ".ab2-stats",
             start: "top 78%",
             onEnter: () => {
               if (statDone.current) return;
@@ -105,8 +90,20 @@ export default function AboutPage() {
           },
         },
       );
-    });
 
+      /* 철학 */
+      gsap.fromTo(".ab2-phil-word", { opacity: 0, y: 60 }, { opacity: 1, y: 0, stagger: 0.08, duration: 0.9, ease: "power4.out", scrollTrigger: { trigger: ".ab2-phil", start: "top 70%" } });
+      gsap.fromTo(".ab2-phil-body", { opacity: 0, x: 40 }, { opacity: 1, x: 0, duration: 1, ease: "power3.out", scrollTrigger: { trigger: ".ab2-phil", start: "top 62%" } });
+
+      /* 핵심가치 */
+      gsap.fromTo(".ab2-val-row", { opacity: 0, x: -36 }, { opacity: 1, x: 0, stagger: 0.12, duration: 0.8, ease: "power3.out", scrollTrigger: { trigger: ".ab2-vals", start: "top 74%" } });
+
+      /* 수상 */
+      gsap.fromTo(".ab2-awd-row", { opacity: 0, y: 24 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power2.out", scrollTrigger: { trigger: ".ab2-awds", start: "top 76%" } });
+
+      /* CTA */
+      gsap.fromTo(".ab2-cta-inner > *", { opacity: 0, y: 32 }, { opacity: 1, y: 0, stagger: 0.13, duration: 0.9, ease: "power2.out", scrollTrigger: { trigger: ".ab2-cta", start: "top 75%" } });
+    });
     return () => ctx.revert();
   }, []);
 
@@ -114,37 +111,37 @@ export default function AboutPage() {
     <article>
       <SubHero title={"가치를 실천하는\n항공 IT 전문기업"} desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." navItems={COMPANY_NAV} bgImage="/images/hero1.png" />
 
-      {/* 수치 */}
-      <section className="ab-stats">
-        <div className="ab-stats-inner">
-          <span className="ab-stats-ew">PAL Networks in Numbers</span>
-          <div className="ab-stats-grid">
+      {/* ── STATS ── */}
+      <section className="ab2-stats">
+        <div className="ab2-stats-inner">
+          <p className="ab2-eyebrow">PAL Networks in Numbers</p>
+          <div className="ab2-stats-grid">
             {STATS.map((s, i) => (
-              <div className="ab-si" key={s.label}>
-                <strong className="ab-si-num" ref={(el) => (statRefs.current[i] = el)}>
+              <div className="ab2-si" key={s.label}>
+                <span className="ab2-si-note">{s.note}</span>
+                <strong className="ab2-si-num" ref={(el) => (statRefs.current[i] = el)}>
                   {s.num}
                   {s.suffix}
                 </strong>
-                <span className="ab-si-lbl">{s.label}</span>
-                <span className="ab-si-bar" />
+                <span className="ab2-si-lbl">{s.label}</span>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* 영상 */}
-      <section className="ab-vid" ref={videoSecRef}>
-        <video ref={videoRef} className="ab-vid-bg" src="/images/uam.mp4" autoPlay muted loop playsInline />
-        <div className="ab-vid-overlay" />
-        <div className="ab-vid-txt">
-          <span className="ab-vid-kicker">PAL Networks × UAM</span>
-          <h2 className="ab-vid-title">
+      {/* ── VIDEO ── */}
+      <section className="ab2-vid" ref={videoSecRef}>
+        <video ref={videoRef} className="ab2-vid-bg" src="/images/uam.mp4" autoPlay muted loop playsInline />
+        <div className="ab2-vid-overlay" />
+        <div className="ab2-vid-txt">
+          <span className="ab2-vid-kicker">PAL Networks × UAM</span>
+          <h2 className="ab2-vid-title">
             미래의 하늘을
             <br />
             설계합니다
           </h2>
-          <p className="ab-vid-desc">
+          <p className="ab2-vid-desc">
             도심항공교통(UAM)의 안전한 운항을 위한
             <br />
             통합 관제 기술을 연구·개발합니다
@@ -152,63 +149,66 @@ export default function AboutPage() {
         </div>
       </section>
 
-      {/* 철학 */}
-      <section className="ab-phil">
-        <div className="ab-phil-inner">
-          <div className="ab-phil-left">
-            <span className="ab-phil-ew">Our Philosophy</span>
-            <span className="ab-phil-line">항공산업의</span>
-            <span className="ab-phil-line">기술혁신을</span>
-            <span className="ab-phil-line ab-phil-line--pt">선도합니다.</span>
-          </div>
-          <div className="ab-phil-right">
-            <div className="ab-phil-img-wrap">
-              <img src="/images/img1.jpg" alt="항공 관제" className="ab-phil-img" />
-              <div className="ab-phil-badge">
+      {/* ── PHILOSOPHY ── */}
+      <section className="ab2-phil">
+        <div className="ab2-phil-inner">
+          <div className="ab2-phil-left">
+            <p className="ab2-eyebrow ab2-eyebrow--light">Our Philosophy</p>
+            <div className="ab2-phil-words">
+              {["항공산업의", "기술혁신을", "선도합니다."].map((w, i) => (
+                <span key={i} className={`ab2-phil-word${i === 2 ? " ab2-phil-word--grad" : ""}`}>
+                  {w}
+                </span>
+              ))}
+            </div>
+          </div>
+          <div className="ab2-phil-body">
+            <div className="ab2-phil-badge">
               <span>2010년 설립 이후</span>
               <strong>항공 IT 한 길</strong>
             </div>
-            </div>
-            <p className="ab-phil-body">팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히 개발해왔습니다. 인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하고 있습니다.</p>
+            <p className="ab2-phil-text">팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히 개발해왔습니다. 인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하고 있습니다.</p>
           </div>
         </div>
       </section>
 
-      {/* 핵심가치 */}
-      <section className="ab-vals">
-        <div className="ab-vals-inner">
-          <span className="ab-vals-ew">Core Values</span>
-          <h2 className="ab-vals-title">우리가 지키는 가치</h2>
-          <div className="ab-vals-list">
+      {/* ── CORE VALUES ── */}
+      <section className="ab2-vals">
+        <div className="ab2-vals-inner">
+          <p className="ab2-eyebrow">Core Values</p>
+          <h2 className="ab2-vals-title">우리가 지키는 가치</h2>
+          <div className="ab2-vals-list">
             {VALUES.map((v) => (
-              <div className="ab-val-item" key={v.num}>
-                <span className="ab-val-num">{v.num}</span>
-                <div className="ab-val-body">
-                  <h3 className="ab-val-name">{v.title}</h3>
-                  <p className="ab-val-desc">{v.desc}</p>
+              <div className="ab2-val-row" key={v.idx}>
+                <div className="ab2-val-left">
+                  <span className="ab2-val-idx">{v.idx}</span>
+                  <div className="ab2-val-divider" />
                 </div>
-                <div className="ab-val-img-wrap">
-                  <img src={v.img} alt={v.title} className="ab-val-img" />
+                <div className="ab2-val-body">
+                  <span className="ab2-val-en">{v.en}</span>
+                  <h3 className="ab2-val-name">{v.title}</h3>
                 </div>
+                <p className="ab2-val-desc">{v.desc}</p>
+                <div className="ab2-val-arrow">→</div>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* 수상 */}
-      <section className="ab-awds">
-        <div className="ab-awds-inner">
-          <span className="ab-awds-ew">Certifications & Awards</span>
-          <h2 className="ab-awds-title">인증 및 수상</h2>
-          <ul className="ab-awds-list">
+      {/* ── AWARDS ── */}
+      <section className="ab2-awds">
+        <div className="ab2-awds-inner">
+          <p className="ab2-eyebrow ab2-eyebrow--light">Certifications & Awards</p>
+          <h2 className="ab2-awds-title">인증 및 수상</h2>
+          <ul className="ab2-awds-list">
             {AWARDS.map((a, i) => (
-              <li className="ab-awd-row" key={i}>
-                <span className="ab-awd-yr">{a.year}</span>
-                <div className="ab-awd-bar" />
-                <div>
-                  <strong className="ab-awd-name">{a.title}</strong>
-                  <span className="ab-awd-org">{a.org}</span>
+              <li className="ab2-awd-row" key={i}>
+                <span className="ab2-awd-yr">{a.year}</span>
+                <div className="ab2-awd-pip" />
+                <div className="ab2-awd-body">
+                  <strong className="ab2-awd-name">{a.title}</strong>
+                  <span className="ab2-awd-org">{a.org}</span>
                 </div>
               </li>
             ))}
@@ -216,23 +216,23 @@ export default function AboutPage() {
         </div>
       </section>
 
-      {/* CTA */}
-      <section className="ab-cta">
-        <div className="ab-cta-bg" />
-        <div className="ab-cta-glow" />
-        <div className="ab-cta-inner">
-          <span className="ab-cta-chip">Contact Us</span>
-          <h2 className="ab-cta-title">
+      {/* ── CTA ── */}
+      <section className="ab2-cta">
+        <div className="ab2-cta-noise" />
+        <div className="ab2-cta-glow" />
+        <div className="ab2-cta-inner">
+          <span className="ab2-cta-chip">Contact Us</span>
+          <h2 className="ab2-cta-title">
             팔네트웍스와
             <br />
             함께하세요
           </h2>
-          <p className="ab-cta-desc">파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.</p>
-          <div className="ab-cta-btns">
-            <Link to="/contact/inquiry" className="ab-cta-btn ab-cta-btn--w">
+          <p className="ab2-cta-desc">파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.</p>
+          <div className="ab2-cta-btns">
+            <Link to="/contact/inquiry" className="ab2-cta-btn ab2-cta-btn--fill">
               문의하기
             </Link>
-            <Link to="/contact/recruit" className="ab-cta-btn ab-cta-btn--g">
+            <Link to="/contact/recruit" className="ab2-cta-btn ab2-cta-btn--line">
               채용 안내
             </Link>
           </div>