사이트 2차 수정, 신규 페이지 추가

frontend/pages/coffee-chat.vue

@@ -2,11 +2,41 @@
 // 커피챗 신청 — 클라이언트 검증 + 완료 화면 (원본 바닐라 JS → Vue 반응형 이식)
 import { reactive, ref, nextTick } from 'vue'
 
+const config = useRuntimeConfig()
+const siteUrl = String(config.public.siteUrl || '').replace(/\/$/, '')
+
 useSeo({
   title: '커피챗 신청 | 이너탭(innertab)',
   description:
     '정식 지원 전에 이너탭 담당자와 가볍게 이야기 나눠보세요. 약 30분 내외, 온·오프라인으로 진행되는 커피챗을 신청할 수 있습니다.',
   path: '/coffee-chat',
+  keywords:
+    '이너탭, innertab, 커피챗, 채용 상담, 커리어 상담, 채용, 면담 신청, 입사 지원, 스타트업 채용',
+})
+
+// 구조화 데이터(JSON-LD) — 연락/신청 페이지(ContactPage) + 빵부스러기
+useHead({
+  script: [
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'ContactPage',
+        name: '커피챗 신청 | 이너탭(innertab)',
+        description: '이너탭 담당자와의 비공식 커피챗(채용 전 면담) 신청 페이지',
+        url: `${siteUrl}/coffee-chat`,
+        isPartOf: { '@type': 'WebSite', name: '이너탭 innertab', url: siteUrl },
+        about: { '@type': 'Organization', name: '이너탭', alternateName: 'innertab', url: siteUrl },
+        breadcrumb: {
+          '@type': 'BreadcrumbList',
+          itemListElement: [
+            { '@type': 'ListItem', position: 1, name: '홈', item: `${siteUrl}/` },
+            { '@type': 'ListItem', position: 2, name: '커피챗', item: `${siteUrl}/coffee-chat` },
+          ],
+        },
+      }),
+    },
+  ],
 })
 
 // 폼 상태

frontend/pages/index.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
 // 메인(채용 홈) — Hero / About / 브랜드 / Growth / People / CTA
+
+// 연혁 행 우측에 붙일 이미지 — assets 이미지는 import해야 Vite가 URL로 변환
+import imgUsa from '~/assets/images/img-usa.svg'
+import imgHongkong from '~/assets/images/img-hongkong.svg'
+import imgBrand from '~/assets/images/img-brand.svg'
+
 const config = useRuntimeConfig()
 const siteUrl = String(config.public.siteUrl || '').replace(/\/$/, '')
 
@@ -8,6 +14,8 @@ useSeo({
   description:
     '이너탭(innertab)은 2023년 창립 이후 꾸준히 성장하는 D2C 스타트업입니다. 셀라이트·리큐어리 등 다양한 브랜드로 고객에게 꼭 필요한 해답을 제공합니다. 함께 성장할 동료를 찾습니다.',
   path: '/',
+  keywords:
+    '이너탭, innertab, D2C, 스타트업, 채용, 브랜드, 셀라이트, 리큐어리, 조직문화, 커리어, 함께 성장, 채용 중',
 })
 
 // 조직 구조화 데이터(JSON-LD) — 검색엔진의 회사 정보 인식
@@ -34,9 +42,35 @@ useHead({
         sameAs: ['https://selite.kr', 'https://retriq.co.kr'],
       }),
     },
+    {
+      // 웹사이트 정보 — 검색결과의 사이트명 인식
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'WebSite',
+        name: '이너탭 innertab',
+        alternateName: '이너탭 채용',
+        url: siteUrl,
+        inLanguage: 'ko-KR',
+        publisher: { '@type': 'Organization', name: '이너탭', url: siteUrl },
+      }),
+    },
   ],
 })
 
+// Growth 배경 영상 — 슬로우 모션 적용 (재생 속도 0.5배)
+const growthVideo = ref<HTMLVideoElement | null>(null)
+const GROWTH_PLAYBACK_RATE = 0.5 // 슬로우 배율 (1 = 원본 속도)
+onMounted(() => {
+  if (!growthVideo.value) return
+  // playbackRate는 새 소스가 로드될 때 초기화되므로 메타데이터 로드 시점에도 재설정
+  const applyRate = () => {
+    if (growthVideo.value) growthVideo.value.playbackRate = GROWTH_PLAYBACK_RATE
+  }
+  applyRate()
+  growthVideo.value.addEventListener('loadedmetadata', applyRate)
+})
+
 // 브랜드 타일 데이터
 interface BrandTile {
   name: string
@@ -44,11 +78,12 @@ interface BrandTile {
   feature?: boolean
   link?: string // 외부 링크 URL (없으면 출시예정)
   comingSoon?: boolean // 출시예정 여부
+  cuteFont?: boolean // 동글동글한 귀여운 폰트(Jua) 적용 여부
 }
 const brands: BrandTile[] = [
-  { name: 'selite', img: '/images/img-selite.png', link: 'https://selite.kr' },
-  { name: 'recurely', img: '/images/img-recurely.png', link: 'https://retriq.co.kr' },
-  { name: 'nyangtea', img: '/images/img-nyangtea.png', comingSoon: true },
+  { name: "s'elite", img: '/images/img-selite.png', link: 'https://selite.kr' },
+  { name: 'RETRIQ', img: '/images/img-recurely.png', link: 'https://retriq.co.kr' },
+  { name: '냥티', img: '/images/img-nyangtea.png', comingSoon: true, cuteFont: true },
 ]
 
 // 성장 지표 데이터
@@ -58,23 +93,42 @@ interface Stat {
   unit: string
   desc: string
 }
+// 연 매출 성장률 — 상단 단독 카드: 좌→우로 커지고 진해지는 겹친 구체 3개 다이어그램
+const revenueTitle = '연 매출 성장률'
+const revenueDesc = '고객의 믿음과 선택으로 이너탭은 꾸준히 성장해왔습니다.'
+interface RevenueOrb {
+  year: string
+  value?: number // 숫자 매출 (CountUp 카운트 애니메이션)
+  unit?: string
+  text?: string // 숫자 대신 표시할 텍스트 (예: 창립)
+  plus?: boolean // 마지막 구체에 + 배지 표시
+}
+const revenueOrbs: RevenueOrb[] = [
+  { year: '2023년', text: '창립' },
+  { year: '2024년', value: 55, unit: '억' },
+  { year: '2026년', value: 150, unit: '억', plus: true },
+]
+
+// 나머지 지표 — 매출 성장률 카드 아래에 3개 나란히 배치
 const stats: Stat[] = [
   { title: '운영 브랜드', value: 5, unit: '개', desc: '서로 다른 문제를 해결하기 위해\n각기 다른 브랜드를 정교하게 설계했습니다.' },
-  { title: '누적 매출', value: 150, unit: '억', desc: '고객의 믿음과 선택으로\n이너탭은 꾸준히 성장해왔습니다.' },
   { title: '연 평균 성장률', value: 320, unit: '%', desc: '끊임없는 도전과 실행으로\n이너탭은 더 빠르게 확장하고 있습니다.' },
   { title: '더 나은 일상을 연구한 시간', value: 1200, unit: '일', desc: '작은 변화가 만드는 큰 차이를\n매일 관찰하고 개선해왔습니다.' },
 ]
 
-// 주요 연혁 — 년도 + 내용
+// 주요 연혁 — 년도 + 내용 (+ 행 우측 이미지)
 interface HistoryItem {
   year: string
   text: string
+  img?: string // 행 오른쪽 끝에 표시할 이미지 (없으면 미표시)
+  label?: string // 이미지 대신 표시할 텍스트 배지 (예: ITAB)
 }
 const history: HistoryItem[] = [
-  { year: '2026', text: '일 최대 매출 4,500만원 달성' },
-  { year: '2026', text: '미국 법인 설립' },
-  { year: '2025', text: '홍콩 법인 설립' },
-  { year: '2025', text: '한국 소비자 평가 대상 2회' },
+  { year: '2026', text: '일 최대 매출 4,500만원 달성', label: 'ITAB' },
+  { year: '2026', text: '미국 법인 설립', img: imgUsa },
+  { year: '2025', text: '운영 브랜드 4개 달성' },
+  { year: '2025', text: '홍콩 K-Beauty 진출', img: imgHongkong },
+  { year: '2025', text: '한국 소비자 평가 대상 2연속 수상', img: imgBrand },
 ]
 
 // 구성원 카드 — PEOPLE 섹션 비활성화로 함께 주석 처리 (재활성화 시 아래 + 템플릿 주석 해제)
@@ -105,15 +159,14 @@ const history: HistoryItem[] = [
            source 우선순위: WebM(VP9, 더 작음) → MP4(폴백) -->
       <video
         class="hero-video"
-        poster="/images/hero-poster.webp"
+        poster="/images/hero2-poster.jpg"
         autoplay
         muted
         loop
         playsinline
         preload="auto"
       >
-        <source src="/videos/hero.webm" type="video/webm" >
-        <source src="/videos/hero-opt.mp4" type="video/mp4" >
+        <source src="/videos/hero2.mp4" type="video/mp4" >
       </video>
       <div class="scroll-hint"><span>SCROLL</span><i /></div>
     </section>
@@ -122,10 +175,10 @@ const history: HistoryItem[] = [
     <section id="mission" class="about">
       <div class="wrap">
         <div class="inner">
-          <p v-reveal class="about-eyebrow">누군가의 매일을 더 낫게 만드는 일</p>
-          <h2 v-reveal="{ delay: 100 }" class="m-title">고객만을 위한 <mark>해답</mark>을 제공합니다.</h2>
+          <p v-reveal="{ delay: 220 }" class="about-eyebrow">누군가의 매일을 더 낫게 만드는 일</p>
+          <h2 v-reveal="{ delay: 340 }" class="m-title">고객만을 위한 <mark>해답</mark>을 제공합니다.</h2>
 
-          <p v-reveal="{ delay: 160 }" class="about-intro">
+          <p v-reveal="{ delay: 420 }" class="about-intro">
             이너탭은 2023년 창립 이후 꾸준히 성장하고 있는 D2C 스타트업입니다.<br >
             올리브 캡슐 ‘올베라진’, 밀크씨슬 브랜드 ‘리필앤칸 액티브’ 등<br >
             다양한 비즈니스로 고객에게 다가가고 있습니다.
@@ -133,14 +186,14 @@ const history: HistoryItem[] = [
 
           <!-- 미션 / 비전 — 라벨 + 영문 타이틀 + 국문 설명 (구분선 분리) -->
           <dl class="mv-list">
-            <div v-reveal class="mv-row">
+            <div v-reveal="{ delay: 520 }" class="mv-row">
               <dt class="mv-label">Mission</dt>
               <dd class="mv-content">
                 <h3 class="mv-title">Build Better. Sell Bester</h3>
                 <p class="mv-desc">고객에게 필요한 제품을 잘 만들고,<br >그 가치를 누구보다 잘 전달합니다.</p>
               </dd>
             </div>
-            <div v-reveal="{ delay: 100 }" class="mv-row">
+            <div v-reveal="{ delay: 640 }" class="mv-row">
               <dt class="mv-label">Vision</dt>
               <dd class="mv-content">
                 <h3 class="mv-title">Be the Brand Found on the Desks of People We Love</h3>
@@ -166,7 +219,7 @@ const history: HistoryItem[] = [
           >
             <img :src="brand.img" :alt="`${brand.name} 브랜드 이미지`" >
             <div class="tile-overlay" />
-            <span class="tile-name">{{ brand.name }}</span>
+            <span class="tile-name" :class="{ 'tile-name--cute': brand.cuteFont }">{{ brand.name }}</span>
             <!-- 출시예정 배지 / 외부링크 화살표 -->
             <span v-if="brand.comingSoon" class="tile-badge">출시예정</span>
             <span v-else class="tile-arrow" aria-hidden="true">↗</span>
@@ -180,6 +233,7 @@ const history: HistoryItem[] = [
       <!-- 배경 영상 — 히어로와 동일하게 무한 반복 / poster·WebM·MP4 폴백 -->
       <div class="growth-bg">
         <video
+          ref="growthVideo"
           class="growth-video"
           poster="/images/growth-poster.webp"
           autoplay
@@ -201,6 +255,55 @@ const history: HistoryItem[] = [
         </div>
 
         <div class="growth-layout">
+          <!-- 상단 행: 연 매출 성장률(콘텐츠 폭) + 주요 연혁(남는 폭 채움) -->
+          <div class="growth-top">
+            <!-- 연 매출 성장률 — 콘텐츠(구체 클러스터) 크기만큼만 폭 차지 -->
+            <div v-reveal class="gcard stat-card revenue-card">
+              <div class="gcard-title">{{ revenueTitle }}</div>
+              <!-- 겹친 구체 클러스터: 왼쪽이 작고 옅으며, 오른쪽으로 갈수록 커지고 진해짐 -->
+              <div class="orb-cluster">
+                <div
+                  v-for="(orb, i) in revenueOrbs"
+                  :key="orb.year"
+                  class="stat-orb"
+                  :class="`orb-${i + 1}`"
+                >
+                  <span class="orb-label">
+                    <span class="orb-year">{{ orb.year }}</span>
+                    <span class="orb-value">
+                      <!-- 숫자 매출이면 CountUp + 단위, 아니면 텍스트(창립 등) -->
+                      <template v-if="orb.value !== undefined">
+                        <CountUp :value="orb.value" /><small>{{ orb.unit }}</small><span v-if="orb.plus" class="plus">+</span>
+                      </template>
+                      <template v-else>{{ orb.text }}</template>
+                    </span>
+                  </span>
+                </div>
+              </div>
+              <!-- 카드 하단 설명 -->
+              <p class="revenue-desc">{{ revenueDesc }}</p>
+            </div>
+
+            <!-- 주요 연혁 — 매출 카드 옆 남는 공간을 채움 -->
+            <div v-reveal="{ delay: 120 }" class="gcard history-card">
+              <div class="gcard-title">주요 연혁 내역</div>
+              <!-- 슬로건 — 연혁 카드에 메시지 부여 -->
+              <p class="history-slogan">끊임없는 도전으로 써내려간 성장의 기록</p>
+              <ul class="timeline">
+                <li v-for="(item, i) in history" :key="i" v-reveal="{ delay: 200 + i * 90 }">
+                  <!-- 같은 년도가 연속되면 시각적으로 묶어 표기 -->
+                  <span class="t-year">{{ item.year }}</span>
+                  <span class="t-text">{{ item.text }}</span>
+                  <!-- 행 오른쪽 끝 이미지 (해당 항목에만) -->
+                  <img v-if="item.img" :src="item.img" class="t-flag" :alt="`${item.text} 이미지`" >
+                  <!-- 이미지가 없는 행은 텍스트 배지(ITAB 등)로 동일 높이 유지 -->
+                  <span v-else-if="item.label" class="t-label">{{ item.label }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 하단 행: 나머지 지표 3개 나란히 (전체 폭) -->
           <div class="stat-grid">
             <div
               v-for="(stat, i) in stats"
@@ -220,21 +323,6 @@ const history: HistoryItem[] = [
               </p>
             </div>
           </div>
-
-          <div v-reveal="{ delay: 120 }" class="gcard history-card">
-            <div class="gcard-title">주요 연혁 내역</div>
-            <!-- 슬로건 — 연혁 카드에 메시지 부여 -->
-            <p class="history-slogan">끊임없는 도전으로 써내려간 성장의 기록</p>
-            <ul class="timeline">
-              <li v-for="(item, i) in history" :key="i" v-reveal="{ delay: 200 + i * 90 }">
-                <!-- 같은 년도가 연속되면 시각적으로 묶어 표기 -->
-                <span class="t-year" :class="{ 'is-repeat': i > 0 && history[i - 1].year === item.year }">
-                  {{ item.year }}
-                </span>
-                <span class="t-text">{{ item.text }}</span>
-              </li>
-            </ul>
-          </div>
         </div>
       </div>
     </section>
@@ -295,6 +383,8 @@ const history: HistoryItem[] = [
 .hero {
   position: relative;
   overflow: hidden;
+  /* 헤더(4.5rem)를 제외한 화면 높이를 가득 채움 — dvh로 모바일 주소창 변동 대응 */
+  height: calc(100dvh - 4.5rem);
   /* 영상 로드 전 폴백 배경 — 흰 섹션으로 즉시 표시 */
   background: var(--white);
 }
@@ -302,10 +392,8 @@ const history: HistoryItem[] = [
 .hero-video {
   display: block;
   width: 100%; /* 가로폭을 꽉 채움 */
-  height: auto; /* 높이는 원본 비율대로 — 가로폭만큼 커짐 */
-  aspect-ratio: 16 / 9; /* 원본 1280x720 비율 — 로드 전 높이 예약 */
-  max-height: 62.5rem; /* 최대 높이 제한 */
-  object-fit: cover; /* 높이 제한에 걸리면 늘어나지 않고 크롭 (poster에도 동일 적용) */
+  height: 100%; /* 섹션 높이(화면-헤더)를 가득 채움 */
+  object-fit: cover; /* 비율 유지하며 영역을 채우고 넘치는 부분은 크롭 (poster에도 동일 적용) */
   /* 로드 시 살짝 확대된 상태에서 천천히 안착 (Ken Burns) */
   animation: hero-settle 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
@@ -535,7 +623,7 @@ const history: HistoryItem[] = [
   font-weight: 800;
   letter-spacing: 0.01em;
   line-height: 1;
-  text-transform: uppercase;
+  /* 표기는 데이터의 원본 대소문자 그대로 — s'elite 소문자 유지 */
   font-size: clamp(1.125rem, 1.6vw, 1.5rem); /* 18~24px */
   pointer-events: none;
   text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.35);
@@ -545,6 +633,15 @@ const history: HistoryItem[] = [
   font-size: clamp(1.75rem, 2.8vw, 2.625rem); /* 28~42px */
 }
 
+/* 냥티 등 동글동글하고 귀여운 폰트(Jua) 적용 타일명
+   — .btile .tile-name(클래스 2개)보다 우선순위가 높아야 하므로 동일하게 .btile 하위로 작성 */
+.btile .tile-name--cute {
+  font-family: 'Jua', var(--font-display), sans-serif;
+  font-weight: 400; /* Jua는 단일 weight — 800 강제 시 가짜 볼드로 둥근 형태가 뭉개짐 */
+  letter-spacing: 0.02em;
+  font-size: clamp(1.375rem, 2vw, 1.875rem); /* 22~30px — 둥근 폰트 가독성 확보 위해 약간 확대 */
+}
+
 .btile .tile-arrow {
   position: absolute;
   right: clamp(1rem, 1.6vw, 1.375rem); /* 16~22px */
@@ -640,19 +737,138 @@ const history: HistoryItem[] = [
   color: var(--ink);
 }
 
+/* 세로 스택 — 상단 행(매출+연혁) → 하단 행(지표 3개) */
 .growth-layout {
-  display: grid;
-  grid-template-columns: 1.45fr 1fr;
+  display: flex;
+  flex-direction: column;
   gap: clamp(1rem, 1.8vw, 1.5rem); /* 16~24px */
-  align-items: stretch;
+}
+
+/* 상단 행 — 매출 카드(콘텐츠 폭) + 연혁 카드(남는 폭 채움) */
+.growth-top {
+  display: flex;
+  gap: clamp(1rem, 1.8vw, 1.5rem);
+  align-items: stretch; /* 두 카드 높이 맞춤 */
 }
 
 .stat-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, 1fr); /* 지표 3개 나란히 — 전체 폭이라 카드 폭 충분 */
   gap: clamp(1rem, 1.8vw, 1.5rem);
 }
 
+/* ===== 연 매출 성장률 — 콘텐츠(구체 클러스터) 크기만큼만 폭 차지 ===== */
+.revenue-card {
+  /* 제목(좌상단) + 구체 클러스터(아래) 세로 배치 */
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto; /* 늘어/줄지 않고 콘텐츠 폭 유지 */
+  max-width: 100%; /* 좁은 화면에서 넘침 방지 */
+}
+
+/* 겹친 구체 클러스터 — 제목 아래 남는 공간을 채우고 그 안에서 세로 중앙 배치 */
+.revenue-card .orb-cluster {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  flex: 1; /* 카드가 늘어나도 남는 높이를 채움 → 구체가 윗단에 몰리지 않음 */
+  align-items: center; /* 늘어난 영역 안에서 구체를 세로 중앙 정렬 */
+  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
+  pointer-events: none;
+}
+
+/* 클러스터 내부 구체 — 단독 카드용 위치 규칙 무시(static)하고 흐름 배치 */
+.revenue-card .orb-cluster .stat-orb {
+  position: static;
+  display: grid;
+  place-items: center; /* 내부 텍스트 중앙 정렬 */
+  flex: none;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  /* 기존 단일 구체와 동일한 방사형 그라데이션 */
+  background: radial-gradient(
+    circle at 50% 42%,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.55) 54%,
+    rgba(255, 255, 255, 0) 78%
+  );
+}
+
+/* 좌→우로 커지는 구체 크기 */
+.revenue-card .orb-1 {
+  width: clamp(6rem, 11vw, 9rem);
+  opacity: 0.5; /* 가장 옅게 */
+}
+
+.revenue-card .orb-2 {
+  width: clamp(7.5rem, 14vw, 11.5rem);
+  opacity: 0.74;
+  margin-left: clamp(-2.75rem, -4.5vw, -3.75rem); /* 앞 구체와 겹침 */
+}
+
+/* 마지막 구체 — 가장 크고 기존 단일 구체와 동일한 불투명도(opacity 미지정 = 1)
+   DOM 순서상 뒤에 있어 위에 그려지며 가장 진하게 앞으로 옴 */
+.revenue-card .orb-3 {
+  width: clamp(9.5rem, 17vw, 14rem);
+  margin-left: clamp(-3.25rem, -5.5vw, -4.5rem);
+}
+
+/* 구체 내부 텍스트 라벨 — 연도(상단) + 큰 숫자 */
+.revenue-card .orb-label {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  color: var(--ink);
+  line-height: 1.1;
+}
+
+.revenue-card .orb-year {
+  font-weight: 700;
+  font-size: clamp(0.8125rem, 1.3vw, 1.0625rem); /* 13~17px */
+  letter-spacing: -0.01em;
+  margin-bottom: 0.25em;
+}
+
+.revenue-card .orb-value {
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  white-space: nowrap;
+}
+
+/* 숫자 크기도 구체 크기에 맞춰 좌→우로 확대 */
+.revenue-card .orb-1 .orb-value {
+  font-size: clamp(1.375rem, 2.6vw, 2.125rem); /* 22~34px */
+}
+
+.revenue-card .orb-2 .orb-value {
+  font-size: clamp(1.75rem, 3.4vw, 2.75rem); /* 28~44px */
+}
+
+.revenue-card .orb-3 .orb-value {
+  font-size: clamp(2.25rem, 4.6vw, 3.5rem); /* 36~56px */
+}
+
+/* 단위(억) — 숫자보다 작게 */
+.revenue-card .orb-value small {
+  font-size: 0.36em;
+  font-weight: 700;
+  margin-left: 0.15rem;
+  letter-spacing: 0;
+}
+
+/* 카드 하단 설명 — 구체 클러스터 아래 */
+.revenue-card .revenue-desc {
+  position: relative;
+  z-index: 1;
+  margin-top: clamp(1rem, 2vw, 1.5rem);
+  font-size: 0.875rem; /* 14px */
+  color: var(--ink-soft);
+  line-height: 1.65;
+}
+
 .gcard {
   position: relative;
   background: rgba(255, 255, 255, 0.18);
@@ -742,6 +958,8 @@ const history: HistoryItem[] = [
 .history-card {
   display: flex;
   flex-direction: column;
+  flex: 1 1 0; /* 매출 카드 옆 남는 폭을 모두 채움 */
+  min-width: 0;
 }
 
 /* 연혁 슬로건 — 제목 아래 메시지 */
@@ -758,13 +976,16 @@ const history: HistoryItem[] = [
   margin-top: clamp(1.25rem, 2.5vw, 1.875rem); /* 20~30px */
   display: flex;
   flex-direction: column;
+  flex: 1; /* 카드 높이가 늘어날 때 항목 간격을 채워 균형 유지 */
+  justify-content: center;
 }
 
 .timeline li {
   display: flex;
   gap: 1rem; /* 16px */
-  align-items: baseline;
-  padding: clamp(0.9375rem, 1.6vw, 1.1875rem) 0; /* 15~19px */
+  align-items: center; /* 텍스트와 이미지를 세로 중앙 정렬 */
+  padding: 0; /* 행 상하 여백 제거 */
+  min-height: clamp(2.625rem, 3.9vw, 3.375rem); /* 이미지 높이와 동일 — 이미지 없는 행도 균일 */
   border-top: 0.0625rem solid rgba(40, 50, 70, 0.1);
 }
 
@@ -784,11 +1005,6 @@ const history: HistoryItem[] = [
   line-height: 1.4;
 }
 
-/* 직전 항목과 같은 년도면 흐리게 → 같은 해 묶음으로 인식 */
-.timeline .t-year.is-repeat {
-  opacity: 0.28;
-}
-
 .timeline .t-text {
   font-size: 0.9375rem; /* 15px */
   color: var(--ink);
@@ -796,6 +1012,32 @@ const history: HistoryItem[] = [
   line-height: 1.4;
 }
 
+/* 행 오른쪽 끝 이미지 — 비율이 달라도 동일한 정사각 박스로 통일 */
+.timeline .t-flag {
+  flex: none;
+  margin-left: auto; /* 우측 끝단으로 밀착 */
+  align-self: center;
+  width: clamp(2.625rem, 3.9vw, 3.375rem); /* 42~54px — 가로/세로 동일 (직전 대비 75%) */
+  height: clamp(2.625rem, 3.9vw, 3.375rem);
+  border-radius: 0.25rem; /* 4px — 사각 이미지 모서리 살짝 둥글게 */
+  object-fit: contain; /* 박스 안에서 비율 유지하며 맞춤(왜곡 없음) */
+}
+
+/* 이미지 대신 들어가는 텍스트 배지(ITAB) — 이미지와 동일한 높이로 행 높이 통일 */
+.timeline .t-label {
+  flex: none;
+  margin-left: auto; /* 우측 끝단으로 밀착 */
+  display: grid;
+  place-items: center;
+  height: clamp(2.625rem, 3.9vw, 3.375rem); /* t-flag와 동일 높이 */
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: clamp(1.25rem, 2vw, 1.625rem); /* 20~26px */
+  letter-spacing: 0.04em;
+  color: var(--brand); /* 브랜드 컬러 */
+  line-height: 1;
+}
+
 /* ===================== PEOPLE ===================== */
 .people {
   padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
@@ -933,8 +1175,9 @@ const history: HistoryItem[] = [
 /* ===================== 반응형 ===================== */
 @media (max-width: 56.25rem) {
   /* 900px */
-  .growth-layout {
-    grid-template-columns: 1fr;
+  /* 상단 행: 좁은 화면에서는 매출/연혁 카드를 세로로 쌓고 전체 폭 사용 */
+  .growth-top {
+    flex-direction: column;
   }
 
   .brand-bento {