섹션정리

src/components/SubHero.jsx

@@ -105,8 +105,7 @@ function NetworkGlobe() {
           const d = Math.sqrt(dx * dx + dy * dy + dz * dz);
           if (d < 0.55) {
             const depth = (a.sz + b.sz) * 0.5;
-            const alpha =
+            const alpha = Math.max(0, 0.05 + (depth + 1) * 0.1) * (1 - d / 0.55);
-              Math.max(0, 0.05 + (depth + 1) * 0.1) * (1 - d / 0.55);
             const aHex = Math.round(Math.min(255, alpha * 255))
               .toString(16)
               .padStart(2, "0");
@@ -135,14 +134,7 @@ function NetworkGlobe() {
           .toString(16)
           .padStart(2, "0");
 
-        const glow = ctx.createRadialGradient(
+        const glow = ctx.createRadialGradient(n.sx, n.sy, 0, n.sx, n.sy, r * 3.5);
-          n.sx,
-          n.sy,
-          0,
-          n.sx,
-          n.sy,
-          r * 3.5,
-        );
         glow.addColorStop(0, n.color + gHex);
         glow.addColorStop(1, n.color + "00");
         ctx.beginPath();
@@ -176,9 +168,19 @@ function NetworkGlobe() {
   return <canvas ref={canvasRef} className="sh4-globe-canvas" />;
 }
 
+// 라인 단위 마스크 슬라이드업
+function TitleLine({ children, delay }) {
+  return (
+    <span className="sh4-title-line">
+      <motion.span className="sh4-title-line-inner" initial={{ y: "105%" }} animate={{ y: "0%" }} transition={{ duration: 1.1, delay, ease: [0.16, 1, 0.3, 1] }}>
+        {children}
+      </motion.span>
+    </span>
+  );
+}
+
 export default function SubHero({ title, desc, navItems, rightSlot }) {
   const { pathname } = useLocation();
-  const titleLines = typeof title === "string" ? title.split("\n") : null;
   const [isPill, setIsPill] = useState(false);
   const navRef = useRef(null);
 
@@ -190,50 +192,54 @@ export default function SubHero({ title, desc, navItems, rightSlot }) {
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
 
+  // string이면 \n 기준으로 라인 분리, JSX면 React.Children으로 라인 처리
+  const titleContent =
+    typeof title === "string"
+      ? title.split("\n").map((line, i) => (
+          <TitleLine key={i} delay={0.1 + i * 0.1}>
+            {line}
+          </TitleLine>
+        ))
+      : // JSX: <br/>로 나뉜 형태 → 직접 TitleLine 배열로 변환
+        (() => {
+          const children = Array.isArray(title.props?.children) ? title.props.children : [title];
+          const lines = [];
+          let current = [];
+          children.forEach((child, i) => {
+            if (child?.type === "br") {
+              lines.push(current);
+              current = [];
+            } else {
+              current.push(child);
+            }
+            if (i === children.length - 1 && current.length) {
+              lines.push(current);
+            }
+          });
+          return lines.map((lineChildren, i) => (
+            <TitleLine key={i} delay={0.1 + i * 0.1}>
+              {lineChildren}
+            </TitleLine>
+          ));
+        })();
+
   return (
     <>
       <section className={`sh4${rightSlot ? " sh4--split" : ""}`}>
         <div className="sh4-inner">
           <div className="sh4-left">
-            <motion.span
+            <motion.span className="sh4-label" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}>
-              className="sh4-label"
-              initial={{ opacity: 0, y: 12 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
-            >
               {menuMap["/" + pathname.split("/")[1]]?.label}
             </motion.span>
-            <h1 className="sh4-title">
+            <h1 className="sh4-title">{titleContent}</h1>
-              {typeof title === "string"
-                ? titleLines.map((line, li) => (
-                    <span key={li} className="sh4-title-line">
-                      {line.split("").map((char, ci) => (
-                        <motion.span
-                          key={ci}
-                          className="sh4-char"
-                          initial={{ opacity: 0 }}
-                          animate={{ opacity: 1 }}
-                          transition={{
-                            duration: 0.6,
-                            delay: li * 0.08 + ci * 0.022,
-                            ease: [0.16, 1, 0.3, 1],
-                          }}
-                        >
-                          {char === " " ? "\u00A0" : char}
-                        </motion.span>
-                      ))}
-                    </span>
-                  ))
-                : title}
-            </h1>
             {desc && (
               <motion.p
                 className="sh4-desc"
-                initial={{ opacity: 0, y: 16 }}
+                initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{
-                  duration: 0.7,
+                  duration: 0.6,
-                  delay: 0.8,
+                  delay: 0.1 + (typeof title === "string" ? title.split("\n").length : 2) * 0.1 + 0.15,
                   ease: [0.16, 1, 0.3, 1],
                 }}
               >
@@ -243,12 +249,7 @@ export default function SubHero({ title, desc, navItems, rightSlot }) {
           </div>
 
           {rightSlot && (
-            <motion.div
+            <motion.div className="sh4-right" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 0.3 }}>
-              className="sh4-right"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 1, delay: 0.3 }}
-            >
               {rightSlot}
             </motion.div>
           )}
@@ -256,18 +257,10 @@ export default function SubHero({ title, desc, navItems, rightSlot }) {
       </section>
 
       {navItems?.length > 1 && (
-        <nav
+        <nav ref={navRef} className={`sh4-nav-wrap${isPill ? " is-pill" : ""}`} aria-label="Sub Navigation">
-          ref={navRef}
-          className={`sh4-nav-wrap${isPill ? " is-pill" : ""}`}
-          aria-label="Sub Navigation"
-        >
           <div className="sh4-nav">
             {navItems.map((item) => (
-              <Link
+              <Link key={item.to} to={item.to} className={`sh4-nav-tab${pathname === item.to ? " sh4-nav-tab--active" : ""}`}>
-                key={item.to}
-                to={item.to}
-                className={`sh4-nav-tab${pathname === item.to ? " sh4-nav-tab--active" : ""}`}
-              >
                 {item.label}
               </Link>
             ))}

src/css/common.css

@@ -35,8 +35,8 @@ body{overflow-x:hidden;}
 .sh4-title{margin:0 0 20px;font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.055em;color:var(--navy);}
 .sh4-title em{font-style:normal;background:var(--grad-brand-h);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
 
-.sh4-title-line{display:block;}
+.sh4-title-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
-.sh4-char{display:inline-block;}
+.sh4-title-line-inner{display:block;}
 .sh4-desc{font-size:clamp(14px,1.2vw,17px);line-height:1.8;color:rgba(26,31,94,.42);word-break:keep-all;margin:0;opacity:0;transform:translateY(12px);animation:sh4Up .6s .5s cubic-bezier(.16,1,.3,1) forwards;}
 
 /*sh4 split*/
@@ -75,20 +75,6 @@ body{overflow-x:hidden;}
    .sh4-nav-tab{padding:0 14px;font-size:13px;}
 }
 
-/*ab3 stats*/
-.ab3-stats{position:relative;padding:120px 80px;background:#fff;overflow:hidden;border-bottom:1px solid rgba(26,31,94,.06);}
-.ab3-stats-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;}
-.ab3-label{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:64px;}
-.ab3-label--light{color:rgba(255,255,255,.3);}
-.ab3-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(26,31,94,.08);}
-.ab3-si{position:relative;padding:52px 40px 40px 0;border-right:1px solid rgba(26,31,94,.06);overflow:hidden;}
-.ab3-si:last-child{border-right:0;}
-.ab3-si:not(:first-child){padding-left:40px;}
-.ab3-si-bg{position:absolute;top:-20px;left:-10px;font-size:clamp(100px,12vw,160px);font-weight:900;letter-spacing:-.08em;color:rgba(26,31,94,.03);line-height:1;pointer-events:none;white-space:nowrap;z-index:0;}
-.ab3-si-note{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;position:relative;z-index:1;}
-.ab3-si-num{display:block;font-size:clamp(48px,5.5vw,80px);font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--navy);position:relative;z-index:1;}
-.ab3-si-lbl{display:block;margin-top:10px;font-size:14px;font-weight:500;color:rgba(26,31,94,.38);position:relative;z-index:1;}
-
 @media (max-width:1280px){.ab3-stats{padding-left:48px;padding-right:48px;}}
 @media (max-width:1024px){
    .ab3-stats{padding-left:32px;padding-right:32px;}
@@ -108,99 +94,3 @@ body{overflow-x:hidden;}
 .ab-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:40px;}
 .ab-eyebrow--light{color:rgba(255,255,255,.3);}
 
-/*② 소개*/
-.ab-intro{background:linear-gradient(135deg,#f8f7ff 0%,#fdf4fb 50%,#f5f7ff 100%);padding:120px 80px;}
-.ab-intro-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start;}
-.ab-intro-title{font-size:clamp(40px,5vw,72px);font-weight:900;line-height:1.05;letter-spacing:-.055em;color:#111;margin:0;}
-.ab-intro-title em{font-style:normal;background:var(--grad-brand-h);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
-.ab-intro-badge{display:inline-flex;flex-direction:column;gap:4px;padding:14px 20px;border-radius:12px;border:1px solid rgba(217,72,137,.15);background:rgba(217,72,137,.05);margin-bottom:28px;}
-.ab-intro-badge span{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(26,31,94,.4);}
-.ab-intro-badge strong{font-size:15px;font-weight:800;color:var(--navy);}
-.ab-intro-text p{font-size:16px;line-height:1.9;color:rgba(26,31,94,.5);word-break:keep-all;margin:0 0 16px;}
-.ab-intro-text p:last-child{margin:0;}
-
-/*③ stats*/
-.ab-stats{background:linear-gradient(135deg,#0e1240 0%,#1a1f5e 50%,#141852 100%);padding:120px 80px;position:relative;overflow:hidden;}
-.ab-stats::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 20%,rgba(123,63,160,.2) 0%,transparent 60%),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(217,72,137,.12) 0%,transparent 55%);pointer-events:none;}
-.ab-stats-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;}
-.ab-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);}
-.ab-si{position:relative;padding:52px 40px 40px 0;border-right:1px solid rgba(255,255,255,.06);overflow:hidden;}
-.ab-si:last-child{border-right:0;}
-.ab-si:not(:first-child){padding-left:40px;}
-.ab-si-bg{position:absolute;top:-10px;left:-5px;font-size:clamp(90px,10vw,140px);font-weight:900;letter-spacing:-.08em;color:rgba(255,255,255,.04);line-height:1;pointer-events:none;white-space:nowrap;z-index:0;}
-.ab-si-note{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;position:relative;z-index:1;}
-.ab-si-num{display:block;font-size:clamp(48px,5.5vw,80px);font-weight:900;letter-spacing:-.06em;line-height:1;color:#fff;position:relative;z-index:1;}
-.ab-si-lbl{display:block;margin-top:10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.35);position:relative;z-index:1;}
-
-/*④ 가치*/
-.ab-vals{background:#fff;padding:140px 80px;}
-.ab-vals-inner{max-width:1440px;margin:0 auto;}
-.ab-vals-head{margin-bottom:72px;}
-.ab-vals-title{font-size:clamp(36px,4vw,56px);font-weight:900;letter-spacing:-.055em;color:var(--navy);margin:0;}
-.ab-vals-list{display:flex;flex-direction:column;}
-.ab-val-row{display:grid;grid-template-columns:120px 1fr 1fr 32px;gap:32px;align-items:center;padding:40px 0;border-top:1px solid rgba(26,31,94,.07);transition:padding-left .3s ease;}
-.ab-val-row:last-child{border-bottom:1px solid rgba(26,31,94,.07);}
-.ab-val-row:hover{padding-left:12px;}
-.ab-val-row:hover .ab-val-arr{color:var(--pink);transform:translateX(6px);}
-.ab-val-left{display:flex;flex-direction:column;gap:4px;}
-.ab-val-idx{font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(26,31,94,.18);}
-.ab-val-en{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);}
-.ab-val-name{font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-.04em;color:var(--navy);margin:0;}
-.ab-val-desc{font-size:14px;line-height:1.85;color:rgba(26,31,94,.45);word-break:keep-all;margin:0;}
-.ab-val-arr{font-size:16px;color:rgba(26,31,94,.15);transition:color .3s,transform .3s;}
-
-/*⑤ 수상*/
-.ab-awds{background:linear-gradient(135deg,#fff5f9 0%,#fdf4fb 50%,#f8f5ff 100%);padding:140px 80px;}
-.ab-awds-inner{max-width:1440px;margin:0 auto;}
-.ab-awds-head{margin-bottom:64px;}
-.ab-awds-title{font-size:clamp(36px,4vw,56px);font-weight:900;letter-spacing:-.055em;color:var(--navy);margin:0;}
-.ab-awds-list{list-style:none;padding:0;margin:0;}
-.ab-awd-item{display:grid;grid-template-columns:80px 2px 1fr;gap:32px;align-items:center;padding:36px 0;border-top:1px solid rgba(26,31,94,.08);transition:padding-left .3s ease;}
-.ab-awd-item:last-child{border-bottom:1px solid rgba(26,31,94,.08);}
-.ab-awd-item:hover{padding-left:12px;}
-.ab-awd-yr{font-size:13px;font-weight:800;letter-spacing:.06em;color:rgba(26,31,94,.3);}
-.ab-awd-line{width:2px;height:44px;background:linear-gradient(180deg,var(--purple),var(--pink));border-radius:999px;}
-.ab-awd-body{display:flex;flex-direction:column;gap:5px;}
-.ab-awd-name{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.02em;}
-.ab-awd-org{font-size:13px;color:rgba(26,31,94,.38);}
-
-/*⑥ CTA*/
-.ab-cta{background:linear-gradient(135deg,#0e1240 0%,#1a1f5e 50%,#141852 100%);padding:160px 80px;text-align:center;position:relative;overflow:hidden;}
-.ab-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 60% at 50% 50%,rgba(217,72,137,.18) 0%,transparent 60%),radial-gradient(ellipse 40% 35% at 80% 20%,rgba(123,63,160,.14) 0%,transparent 55%);pointer-events:none;}
-.ab-cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
-.ab-cta-chip{display:inline-block;padding:6px 18px;border-radius:999px;border:1px solid rgba(217,72,137,.35);background:rgba(217,72,137,.12);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:28px;}
-.ab-cta-title{font-size:clamp(44px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.06em;color:#fff;margin-bottom:20px;}
-.ab-cta-desc{font-size:16px;line-height:1.8;color:rgba(255,255,255,.38);margin-bottom:52px;word-break:keep-all;}
-.ab-cta-btns{display:flex;align-items:center;gap:14px;}
-.ab-cta-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 40px;border-radius:8px;font-size:15px;font-weight:800;text-decoration:none;transition:transform .25s,box-shadow .25s;}
-.ab-cta-btn--fill{background:var(--grad-brand-h);color:#fff;}
-.ab-cta-btn--fill:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(217,72,137,.3);}
-.ab-cta-btn--line{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);}
-.ab-cta-btn--line:hover{border-color:rgba(255,255,255,.4);color:#fff;transform:translateY(-3px);}
-
-@media (max-width:1280px){
-   .ab-intro,.ab-stats,.ab-vals,.ab-awds,.ab-cta{padding-left:48px;padding-right:48px;}
-}
-@media (max-width:1024px){
-   .ab-intro,.ab-stats,.ab-vals,.ab-awds,.ab-cta{padding-left:32px;padding-right:32px;}
-   .ab-intro-inner{grid-template-columns:1fr;gap:56px;}
-   .ab-stats-grid{grid-template-columns:repeat(2,1fr);}
-   .ab-si{padding-bottom:40px;}
-   .ab-si:nth-child(2){border-right:0;}
-   .ab-si:nth-child(3){border-top:1px solid rgba(255,255,255,.06);padding-left:0;}
-   .ab-si:nth-child(4){border-top:1px solid rgba(255,255,255,.06);border-right:0;}
-   .ab-val-row{grid-template-columns:100px 1fr;grid-template-rows:auto auto;gap:16px 24px;}
-   .ab-val-desc{grid-column:1/-1;}
-   .ab-val-arr{display:none;}
-}
-@media (max-width:768px){
-   .ab-intro,.ab-vals,.ab-awds{padding-top:80px;padding-bottom:80px;}
-   .ab-stats{padding-top:80px;padding-bottom:80px;}
-   .ab-cta{padding-top:100px;padding-bottom:100px;}
-   .ab-intro,.ab-stats,.ab-vals,.ab-awds,.ab-cta{padding-left:20px;padding-right:20px;}
-   .ab-si{padding-right:20px;}
-   .ab-si:not(:first-child){padding-left:20px;}
-   .ab-awd-item{grid-template-columns:64px 2px 1fr;gap:20px;padding:28px 0;}
-   .ab-cta-btns{flex-direction:column;width:100%;}
-   .ab-cta-btn{width:100%;max-width:320px;}
-}

src/pages/company/AboutPage.jsx

@@ -16,162 +16,7 @@ const COMPANY_NAV = [
   { label: "찾아오시는 길", to: "/company/location" },
 ];
 
-const STATS = [
-  { 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 = [
-  {
-    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 = [
-  {
-    year: "2022",
-    title: "인천 항공산업 선도기업 유망기업 선정",
-    org: "인천시 · 인천테크노파크",
-  },
-  {
-    year: "2021",
-    title: "소프트웨어 품질인증 GS 인증 획득",
-    org: "한국정보통신기술협회(TTA)",
-  },
-  { year: "2021", title: "기업부설연구소 인정", org: "한국산업기술진흥협회" },
-  { year: "2020", title: "조달청 우수제품 지정", org: "비행상황관제 시스템" },
-];
-
-function animateCount(el, target, suffix, duration = 1600) {
-  const from = target > 100 ? target - 4 : 0;
-  let start = null;
-  const step = (ts) => {
-    if (!start) start = ts;
-    const p = Math.min((ts - start) / duration, 1);
-    const ease = 1 - Math.pow(1 - p, 4);
-    el.textContent = Math.floor(from + (target - from) * ease) + suffix;
-    if (p < 1) requestAnimationFrame(step);
-  };
-  requestAnimationFrame(step);
-}
-
 export default function AboutPage() {
-  const statRefs = useRef([]);
-
-  useEffect(() => {
-    const ctx = gsap.context(() => {
-      /* stats 카운터 */
-      ScrollTrigger.create({
-        trigger: ".ab-stats",
-        start: "top 75%",
-        toggleActions: "play none none reset",
-        onEnter: () => {
-          statRefs.current.forEach((el, i) => {
-            if (!el) return;
-            setTimeout(
-              () => animateCount(el, STATS[i].num, STATS[i].suffix),
-              i * 100,
-            );
-          });
-        },
-      });
-
-      /* stats 스태거 */
-      gsap.fromTo(
-        ".ab-si",
-        { opacity: 0, y: 40 },
-        {
-          opacity: 1,
-          y: 0,
-          stagger: 0.12,
-          duration: 0.8,
-          ease: "power3.out",
-          scrollTrigger: { trigger: ".ab-stats", start: "top 78%" },
-        },
-      );
-
-      /* 소개 */
-      gsap.fromTo(
-        ".ab-intro-text > *",
-        { opacity: 0, y: 32 },
-        {
-          opacity: 1,
-          y: 0,
-          stagger: 0.1,
-          duration: 0.9,
-          ease: "power3.out",
-          scrollTrigger: { trigger: ".ab-intro", start: "top 70%" },
-        },
-      );
-
-      /* 가치 */
-      gsap.fromTo(
-        ".ab-val-row",
-        { opacity: 0, x: -32 },
-        {
-          opacity: 1,
-          x: 0,
-          stagger: 0.1,
-          duration: 0.8,
-          ease: "power3.out",
-          scrollTrigger: { trigger: ".ab-vals", start: "top 72%" },
-        },
-      );
-
-      /* 수상 */
-      gsap.fromTo(
-        ".ab-awd-item",
-        { opacity: 0, y: 24 },
-        {
-          opacity: 1,
-          y: 0,
-          stagger: 0.09,
-          duration: 0.7,
-          ease: "power2.out",
-          scrollTrigger: { trigger: ".ab-awds", start: "top 75%" },
-        },
-      );
-
-      /* CTA */
-      gsap.fromTo(
-        ".ab-cta-inner > *",
-        { opacity: 0, y: 32 },
-        {
-          opacity: 1,
-          y: 0,
-          stagger: 0.12,
-          duration: 0.9,
-          ease: "power2.out",
-          scrollTrigger: { trigger: ".ab-cta", start: "top 75%" },
-        },
-      );
-    });
-    return () => ctx.revert();
-  }, []);
-
   return (
     <article>
       {/* ① 히어로 */}
@@ -187,133 +32,6 @@ export default function AboutPage() {
         navItems={COMPANY_NAV}
         rightSlot={heroRight}
       />
-
-      {/* ② 소개 — 흰 배경, 히어로와 자연스럽게 연결 */}
-      <section className="ab-intro">
-        <div className="ab-intro-inner">
-          <div className="ab-intro-left">
-            <span className="ab-eyebrow">Our Philosophy</span>
-            <h2 className="ab-intro-title">
-              항공산업의
-              <br />
-              기술혁신을
-              <br />
-              <em>선도합니다.</em>
-            </h2>
-          </div>
-          <div className="ab-intro-text">
-            <div className="ab-intro-badge">
-              <span>2010년 설립 이후</span>
-              <strong>항공 IT 한 길</strong>
-            </div>
-            <p>
-              팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제
-              시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히
-              개발해왔습니다.
-            </p>
-            <p>
-              인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하며 안전한
-              하늘길을 만들어가고 있습니다.
-            </p>
-          </div>
-        </div>
-      </section>
-
-      {/* ③ Stats — 연한 네이비 배경 */}
-      <section className="ab-stats">
-        <div className="ab-stats-inner">
-          <span className="ab-eyebrow ab-eyebrow--light">
-            PAL Networks in Numbers
-          </span>
-          <div className="ab-stats-grid">
-            {STATS.map((s, i) => (
-              <div className="ab-si" key={s.note}>
-                <span className="ab-si-bg">
-                  {s.num}
-                  {s.suffix}
-                </span>
-                <span className="ab-si-note">{s.note}</span>
-                <strong
-                  className="ab-si-num"
-                  ref={(el) => (statRefs.current[i] = el)}
-                >
-                  {s.num}
-                  {s.suffix}
-                </strong>
-                <span className="ab-si-lbl">{s.label}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* ④ 핵심가치 — 흰 배경 */}
-      <section className="ab-vals">
-        <div className="ab-vals-inner">
-          <div className="ab-vals-head">
-            <span className="ab-eyebrow">Core Values</span>
-            <h2 className="ab-vals-title">우리가 지키는 가치</h2>
-          </div>
-          <div className="ab-vals-list">
-            {VALUES.map((v) => (
-              <div className="ab-val-row" key={v.idx}>
-                <div className="ab-val-left">
-                  <span className="ab-val-idx">{v.idx}</span>
-                  <span className="ab-val-en">{v.en}</span>
-                </div>
-                <h3 className="ab-val-name">{v.title}</h3>
-                <p className="ab-val-desc">{v.desc}</p>
-                <span className="ab-val-arr">→</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* ⑤ 수상/인증 — 연한 배경 */}
-      <section className="ab-awds">
-        <div className="ab-awds-inner">
-          <div className="ab-awds-head">
-            <span className="ab-eyebrow">Certifications & Awards</span>
-            <h2 className="ab-awds-title">인증 및 수상</h2>
-          </div>
-          <ul className="ab-awds-list">
-            {AWARDS.map((a, i) => (
-              <li className="ab-awd-item" key={i}>
-                <span className="ab-awd-yr">{a.year}</span>
-                <div className="ab-awd-line" />
-                <div className="ab-awd-body">
-                  <strong className="ab-awd-name">{a.title}</strong>
-                  <span className="ab-awd-org">{a.org}</span>
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </section>
-
-      {/* ⑥ CTA — 네이비 배경 */}
-      <section className="ab-cta">
-        <div className="ab-cta-inner">
-          <span className="ab-cta-chip">Contact Us</span>
-          <h2 className="ab-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--fill">
-              문의하기
-            </Link>
-            <Link to="/contact/recruit" className="ab-cta-btn ab-cta-btn--line">
-              채용 안내
-            </Link>
-          </div>
-        </div>
-      </section>
     </article>
   );
 }