사이트 1차 수정

frontend/pages/index.vue

@@ -1,19 +1,54 @@
 <script setup lang="ts">
 // 메인(채용 홈) — Hero / About / 브랜드 / Growth / People / CTA
-useHead({ title: '이너탭 (innertab)' })
+const config = useRuntimeConfig()
+const siteUrl = String(config.public.siteUrl || '').replace(/\/$/, '')
+
+useSeo({
+  title: '이너탭(innertab) — 누군가의 매일을 더 낫게 만드는 일',
+  description:
+    '이너탭(innertab)은 2023년 창립 이후 꾸준히 성장하는 D2C 스타트업입니다. 셀라이트·리큐어리 등 다양한 브랜드로 고객에게 꼭 필요한 해답을 제공합니다. 함께 성장할 동료를 찾습니다.',
+  path: '/',
+})
+
+// 조직 구조화 데이터(JSON-LD) — 검색엔진의 회사 정보 인식
+useHead({
+  script: [
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'Organization',
+        name: '이너탭',
+        alternateName: 'innertab',
+        url: siteUrl,
+        logo: `${siteUrl}/images/img-itab.png`,
+        email: 'innertab@gmail.com',
+        foundingDate: '2023',
+        address: {
+          '@type': 'PostalAddress',
+          addressCountry: 'KR',
+          addressRegion: '서울특별시',
+          addressLocality: '강남구',
+          streetAddress: '삼성동 121-38, 304호',
+        },
+        sameAs: ['https://selite.kr', 'https://retriq.co.kr'],
+      }),
+    },
+  ],
+})
 
 // 브랜드 타일 데이터
 interface BrandTile {
   name: string
   img: string
   feature?: boolean
+  link?: string // 외부 링크 URL (없으면 출시예정)
+  comingSoon?: boolean // 출시예정 여부
 }
 const brands: BrandTile[] = [
-  { name: 'selite', img: '/images/img-selite.png', feature: true },
-  { name: 'INNERDYSET', img: '/images/img-innerdyset.png' },
-  { name: 'recurely', img: '/images/img-recurely.png' },
-  { name: 'innerzen', img: '/images/img-innerzen.png' },
-  { name: 'retriq', img: '/images/img-retriq.png' },
+  { 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 },
 ]
 
 // 성장 지표 데이터
@@ -30,29 +65,33 @@ const stats: Stat[] = [
   { title: '더 나은 일상을 연구한 시간', value: 1200, unit: '일', desc: '작은 변화가 만드는 큰 차이를\n매일 관찰하고 개선해왔습니다.' },
 ]
 
-// 주요 연혁
-const history: string[] = [
-  '일 최대 매출 4,500만원 달성',
-  '미국 법인 설립',
-  '홍콩 법인 설립',
-  '한국 소비자 평가 대상 2회',
+// 주요 연혁 — 년도 + 내용
+interface HistoryItem {
+  year: string
+  text: string
+}
+const history: HistoryItem[] = [
+  { year: '2026', text: '일 최대 매출 4,500만원 달성' },
+  { year: '2026', text: '미국 법인 설립' },
+  { year: '2025', text: '홍콩 법인 설립' },
+  { year: '2025', text: '한국 소비자 평가 대상 2회' },
 ]
 
-// 구성원 카드 (실제 사진 준비 전 — 플레이스홀더)
-interface PeopleCard {
-  label: string
-  shape: 'tall' | 'wide'
-  title: string
-  desc: string
-}
-const peopleColA: PeopleCard[] = [
-  { label: '회사 사진 — 종무식', shape: 'tall', title: '2025 이너탭 종무식 : “Together, We Rise”', desc: '함께 만든 시간, 더 높이 올라가기 위한 시작' },
-  { label: '회사 사진 — 인터뷰', shape: 'wide', title: '꿈은 크게, 실행은 집요하게!', desc: '브랜드사업본부장, 조이' },
-]
-const peopleColB: PeopleCard[] = [
-  { label: '회사 사진 — 구성원', shape: 'wide', title: '2025 Innertab Superookie', desc: '최고의 순간은 함께 만든 성장 속에서 — 슈퍼루키 5인의 성장 스토리' },
-  { label: '회사 사진 — 인터뷰', shape: 'tall', title: '실험·회고·학습으로 실제로 팔리는 브랜드를 만듭니다', desc: '글로벌사업본부 영미권실장, Gaby' },
-]
+// 구성원 카드 — PEOPLE 섹션 비활성화로 함께 주석 처리 (재활성화 시 아래 + 템플릿 주석 해제)
+// interface PeopleCard {
+//   label: string
+//   shape: 'tall' | 'wide'
+//   title: string
+//   desc: string
+// }
+// const peopleColA: PeopleCard[] = [
+//   { label: '회사 사진 — 종무식', shape: 'tall', title: '2025 이너탭 종무식 : “Together, We Rise”', desc: '함께 만든 시간, 더 높이 올라가기 위한 시작' },
+//   { label: '회사 사진 — 인터뷰', shape: 'wide', title: '꿈은 크게, 실행은 집요하게!', desc: '브랜드사업본부장, 조이' },
+// ]
+// const peopleColB: PeopleCard[] = [
+//   { label: '회사 사진 — 구성원', shape: 'wide', title: '2025 Innertab Superookie', desc: '최고의 순간은 함께 만든 성장 속에서 — 슈퍼루키 5인의 성장 스토리' },
+//   { label: '회사 사진 — 인터뷰', shape: 'tall', title: '실험·회고·학습으로 실제로 팔리는 브랜드를 만듭니다', desc: '글로벌사업본부 영미권실장, Gaby' },
+// ]
 </script>
 
 <template>
@@ -61,7 +100,21 @@ const peopleColB: PeopleCard[] = [
 
     <!-- ===================== HERO ===================== -->
     <section class="hero">
-      <div class="hero-video"><span class="ph-label">▶ Hero Video</span></div>
+      <!-- 히어로 배경 영상 — 자동재생/무음/반복(모바일 인라인 재생)
+           poster: 실제 첫 프레임을 즉시 표시해 로딩 중 빈 섹션 제거
+           source 우선순위: WebM(VP9, 더 작음) → MP4(폴백) -->
+      <video
+        class="hero-video"
+        poster="/images/hero-poster.webp"
+        autoplay
+        muted
+        loop
+        playsinline
+        preload="auto"
+      >
+        <source src="/videos/hero.webm" type="video/webm" >
+        <source src="/videos/hero-opt.mp4" type="video/mp4" >
+      </video>
       <div class="scroll-hint"><span>SCROLL</span><i /></div>
     </section>
 
@@ -69,45 +122,78 @@ const peopleColB: PeopleCard[] = [
     <section id="mission" class="about">
       <div class="wrap">
         <div class="inner">
-          <p v-reveal class="m-eyebrow">ABOUT ITAB</p>
-          <p v-reveal="{ delay: 80 }" class="m-lead">누군가의 매일을 더 낫게 만드는 일,</p>
-          <h2 v-reveal="{ delay: 160 }" class="m-title">이너탭은 <mark>그 답</mark>을 제시합니다.</h2>
+          <p v-reveal class="about-eyebrow">누군가의 매일을 더 낫게 만드는 일</p>
+          <h2 v-reveal="{ delay: 100 }" class="m-title">고객만을 위한 <mark>해답</mark>을 제공합니다.</h2>
 
-          <p v-reveal class="about-intro">매일은 당연한 의문들로 시작됩니다.</p>
-          <ul class="q-list">
-            <li v-reveal="{ delay: 60 }">더 가뿐한 아침은 불가능할까?</li>
-            <li v-reveal="{ delay: 160 }">더 단단한 나를 만드는 방법은 무엇일까?</li>
-          </ul>
+          <p v-reveal="{ delay: 160 }" class="about-intro">
+            이너탭은 2023년 창립 이후 꾸준히 성장하고 있는 D2C 스타트업입니다.<br >
+            올리브 캡슐 ‘올베라진’, 밀크씨슬 브랜드 ‘리필앤칸 액티브’ 등<br >
+            다양한 비즈니스로 고객에게 다가가고 있습니다.
+          </p>
 
-          <div v-reveal class="about-statement">
-            <p>이너탭은 질문에 답하는 무게가 다릅니다.</p>
-            <p>타협 없는 설계로 본질을 짚고, 데이터와 결과로 증명합니다.</p>
-            <p>우리는 안주하지 않습니다.</p>
-            <p class="closing">사람의 매일이 닿는 모든 곳에서,<br >우리는 가장 앞선 답을 증명합니다.</p>
-          </div>
+          <!-- 미션 / 비전 — 라벨 + 영문 타이틀 + 국문 설명 (구분선 분리) -->
+          <dl class="mv-list">
+            <div v-reveal 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">
+              <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>
+                <p class="mv-desc">우리가 만든 제품이<br >누구나 알만한 브랜드로 거듭나도록 합니다.</p>
+              </dd>
+            </div>
+          </dl>
         </div>
 
         <!-- 브랜드 벤토 그리드 -->
         <div id="brands" class="brand-bento">
-          <article
+          <component
+            :is="brand.link ? 'a' : 'div'"
             v-for="(brand, i) in brands"
             :key="brand.name"
             v-reveal:scale="{ delay: i * 70 }"
             class="btile"
-            :class="{ feature: brand.feature }"
+            :class="{ feature: brand.feature, 'coming-soon': brand.comingSoon }"
+            :href="brand.link || undefined"
+            :target="brand.link ? '_blank' : undefined"
+            :rel="brand.link ? 'noopener noreferrer' : undefined"
+            :aria-label="brand.comingSoon ? `${brand.name} 출시예정` : `${brand.name} 바로가기`"
           >
             <img :src="brand.img" :alt="`${brand.name} 브랜드 이미지`" >
             <div class="tile-overlay" />
             <span class="tile-name">{{ brand.name }}</span>
-            <span class="tile-arrow" aria-hidden="true">↗</span>
-          </article>
+            <!-- 출시예정 배지 / 외부링크 화살표 -->
+            <span v-if="brand.comingSoon" class="tile-badge">출시예정</span>
+            <span v-else class="tile-arrow" aria-hidden="true">↗</span>
+          </component>
         </div>
       </div>
     </section>
 
     <!-- ===================== GROWTH ===================== -->
     <section id="growth" class="growth">
-      <div class="growth-bg"><span class="bg-label">BACKGROUND VIDEO</span></div>
+      <!-- 배경 영상 — 히어로와 동일하게 무한 반복 / poster·WebM·MP4 폴백 -->
+      <div class="growth-bg">
+        <video
+          class="growth-video"
+          poster="/images/growth-poster.webp"
+          autoplay
+          muted
+          loop
+          playsinline
+          preload="auto"
+        >
+          <source src="/videos/growth.webm" type="video/webm" >
+          <source src="/videos/growth-opt.mp4" type="video/mp4" >
+        </video>
+        <!-- 라이트 스크림 — 어두운 텍스트/글래스 카드 가독성 유지 -->
+        <div class="growth-scrim" />
+      </div>
       <div class="wrap">
         <div class="growth-head">
           <p v-reveal class="m-eyebrow">Growth</p>
@@ -137,9 +223,15 @@ const peopleColB: PeopleCard[] = [
 
           <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-text">{{ item }}</span>
+                <!-- 같은 년도가 연속되면 시각적으로 묶어 표기 -->
+                <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>
@@ -147,7 +239,8 @@ const peopleColB: PeopleCard[] = [
       </div>
     </section>
 
-    <!-- ===================== PEOPLE ===================== -->
+    <!-- ===================== PEOPLE (비활성화 — 사이트에서 숨김) ===================== -->
+    <!--
     <section id="people" class="people">
       <div class="wrap">
         <div class="people-head">
@@ -176,6 +269,7 @@ const peopleColB: PeopleCard[] = [
         </div>
       </div>
     </section>
+    -->
 
     <!-- ===================== CTA ===================== -->
     <section id="cta" class="cta">
@@ -200,18 +294,18 @@ const peopleColB: PeopleCard[] = [
 /* ===================== HERO ===================== */
 .hero {
   position: relative;
-  min-height: clamp(35rem, 86vh, 51.25rem); /* 560~820px */
-  display: flex;
-  align-items: flex-end;
   overflow: hidden;
+  /* 영상 로드 전 폴백 배경 — 흰 섹션으로 즉시 표시 */
+  background: var(--white);
 }
 
 .hero-video {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  background: linear-gradient(160deg, #161d33 0%, #202a44 55%, #33415f 100%);
+  display: block;
+  width: 100%; /* 가로폭을 꽉 채움 */
+  height: auto; /* 높이는 원본 비율대로 — 가로폭만큼 커짐 */
+  aspect-ratio: 16 / 9; /* 원본 1280x720 비율 — 로드 전 높이 예약 */
+  max-height: 62.5rem; /* 최대 높이 제한 */
+  object-fit: cover; /* 높이 제한에 걸리면 늘어나지 않고 크롭 (poster에도 동일 적용) */
   /* 로드 시 살짝 확대된 상태에서 천천히 안착 (Ken Burns) */
   animation: hero-settle 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
@@ -225,15 +319,6 @@ const peopleColB: PeopleCard[] = [
   }
 }
 
-.hero-video .ph-label {
-  color: rgba(255, 255, 255, 0.4);
-  font-size: 0.9375rem; /* 15px */
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  font-weight: 600;
-  animation: hero-fade-in 1.2s ease 0.4s both;
-}
-
 @keyframes hero-fade-in {
   from {
     opacity: 0;
@@ -298,7 +383,7 @@ const peopleColB: PeopleCard[] = [
 
 /* ===================== ABOUT ===================== */
 .about {
-  padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
+  padding: clamp(3.5rem, 8.5vw, 7.5rem) 0; /* 56~120px — 세로 간격 축소 */
   background: var(--white);
 }
 
@@ -315,11 +400,11 @@ const peopleColB: PeopleCard[] = [
   letter-spacing: 0.1em;
 }
 
-.m-lead {
+.about-eyebrow {
   font-size: clamp(1rem, 1.7vw, 1.25rem); /* 16~20px */
   color: var(--ink-soft);
   font-weight: 500;
-  margin-top: 1.875rem; /* 30px */
+  letter-spacing: -0.01em;
 }
 
 .m-title {
@@ -331,7 +416,7 @@ const peopleColB: PeopleCard[] = [
 }
 
 .m-title mark {
-  background: var(--brand);
+  background: var(--ink); /* 검은색 하이라이트 */
   color: var(--white);
   padding: 0.04em 0.14em;
   border-radius: 0.125rem; /* 2px */
@@ -340,59 +425,53 @@ const peopleColB: PeopleCard[] = [
 .about-intro {
   font-size: clamp(1rem, 1.5vw, 1.1875rem); /* 16~19px */
   color: var(--ink-soft);
-  margin-top: clamp(2.5rem, 5vw, 4rem); /* 40~64px */
+  margin-top: clamp(1.75rem, 3.5vw, 2.75rem); /* 28~44px — 세로 간격 축소 */
 }
 
-.q-list {
-  list-style: none;
-  margin-top: 1.375rem; /* 22px */
-  display: flex;
-  flex-direction: column;
-  gap: 0.875rem; /* 14px */
+/* 미션 / 비전 리스트 — 각 행을 상단 구분선으로 분리 */
+.mv-list {
+  margin: clamp(2.5rem, 5vw, 4rem) 0 0; /* 상단 40~64px — 세로 간격 축소 */
 }
 
-.q-list li {
-  font-size: clamp(1.25rem, 2.4vw, 1.875rem); /* 20~30px */
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--ink);
-  line-height: 1.35;
-  padding-left: 1.625rem; /* 26px */
-  position: relative;
+.mv-content {
+  margin: 0; /* dd 기본 들여쓰기 제거 */
 }
 
-.q-list li::before {
-  content: 'Q.';
-  position: absolute;
-  left: 0;
-  top: 0.08em;
-  color: var(--label);
-  font-weight: 800;
-  font-size: 0.78em;
-}
-
-.about-statement {
-  margin-top: clamp(3.5rem, 7vw, 6rem); /* 56~96px */
-  padding-top: clamp(2.5rem, 5vw, 3.75rem); /* 40~60px */
+.mv-row {
+  display: grid;
+  grid-template-columns: minmax(10rem, 18%) 1fr; /* 라벨 | 내용 */
+  gap: clamp(1.5rem, 4vw, 4rem);
+  align-items: start;
+  padding: clamp(1.5rem, 3vw, 2.25rem) 0; /* 24~36px — 세로 간격 축소 */
   border-top: 0.0625rem solid var(--line);
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem; /* 4px */
 }
 
-.about-statement p {
-  font-size: clamp(1rem, 1.6vw, 1.25rem); /* 16~20px */
-  color: var(--ink-soft);
-  line-height: 1.5;
+.mv-row:last-child {
+  border-bottom: 0.0625rem solid var(--line);
 }
 
-.about-statement .closing {
-  font-size: clamp(1.375rem, 2.6vw, 2.125rem); /* 22~34px */
-  font-weight: 800;
-  letter-spacing: -0.02em;
+.mv-label {
+  font-family: var(--font-display);
+  font-size: clamp(1.75rem, 3vw, 2.5rem); /* 28~40px — 확대 */
+  font-weight: 700;
+  letter-spacing: 0.02em;
   color: var(--ink);
-  line-height: 1.4;
+  line-height: 1;
+}
+
+.mv-title {
+  font-size: clamp(1.4375rem, 2.6vw, 2.0625rem); /* 23~33px — 확대 */
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  line-height: 1.3;
+}
+
+.mv-desc {
   margin-top: 0.875rem; /* 14px */
+  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); /* 17~21px — 확대 */
+  color: var(--ink-soft);
+  line-height: 1.6;
 }
 
 /* ===================== 브랜드 벤토 ===================== */
@@ -406,11 +485,18 @@ const peopleColB: PeopleCard[] = [
 
 .btile {
   position: relative;
+  display: block;
   overflow: hidden;
   border-radius: 1.25rem; /* 20px */
   aspect-ratio: 1;
   background: #11151f;
   cursor: pointer; /* 이미지 위에서 포인터 커서 */
+  text-decoration: none; /* a 태그 밑줄 제거 */
+}
+
+/* 출시예정 타일 — 클릭 불가, 기본 커서 */
+.btile.coming-soon {
+  cursor: default;
 }
 
 .btile.feature {
@@ -482,6 +568,23 @@ const peopleColB: PeopleCard[] = [
   transform: translateY(-0.125rem);
 }
 
+/* 출시예정 배지 */
+.btile .tile-badge {
+  position: absolute;
+  right: clamp(1rem, 1.6vw, 1.375rem); /* 16~22px */
+  bottom: clamp(1rem, 1.6vw, 1.375rem);
+  z-index: 3;
+  padding: 0.5rem 0.875rem; /* 8~14px */
+  border-radius: 1.25rem; /* 20px */
+  border: 0.09375rem solid rgba(255, 255, 255, 0.7); /* 1.5px */
+  background: rgba(8, 11, 18, 0.35);
+  color: #fff;
+  font-size: 0.8125rem; /* 13px */
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  pointer-events: none;
+}
+
 /* ===================== GROWTH ===================== */
 .growth {
   position: relative;
@@ -493,23 +596,26 @@ const peopleColB: PeopleCard[] = [
   position: absolute;
   inset: 0;
   z-index: 0;
-  background:
-    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.55), transparent 20%),
-    radial-gradient(circle at 70% 62%, rgba(255, 255, 255, 0.4), transparent 16%),
-    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.45), transparent 13%),
-    radial-gradient(circle at 38% 82%, rgba(255, 255, 255, 0.4), transparent 16%),
-    radial-gradient(circle at 58% 38%, rgba(120, 128, 136, 0.45), transparent 32%),
-    linear-gradient(125deg, #aeb6bc 0%, #cbd1d6 46%, #a6aeb4 100%);
+  overflow: hidden;
+  background: #c2c8cd; /* 영상 로드 전 폴백 */
 }
 
-.bg-label {
+.growth-video {
   position: absolute;
-  right: 1.125rem; /* 18px */
-  bottom: 0.875rem; /* 14px */
-  font-family: var(--font-display);
-  font-size: 0.75rem; /* 12px */
-  letter-spacing: 0.18em;
-  color: rgba(40, 50, 70, 0.32);
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 섹션 전체를 비율 유지하며 채움 */
+}
+
+/* 라이트 스크림 — 영상 위에 실버 톤을 덧입혀 가독성 확보 */
+.growth-scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.5), transparent 24%),
+    radial-gradient(circle at 84% 70%, rgba(255, 255, 255, 0.4), transparent 22%),
+    linear-gradient(125deg, rgba(190, 196, 201, 0.62) 0%, rgba(210, 215, 220, 0.55) 50%, rgba(186, 193, 199, 0.62) 100%);
 }
 
 .growth .wrap {
@@ -562,6 +668,7 @@ const peopleColB: PeopleCard[] = [
 .gcard-title,
 .stat-big,
 .stat-desc,
+.history-slogan,
 .timeline {
   position: relative;
   z-index: 1;
@@ -637,6 +744,15 @@ const peopleColB: PeopleCard[] = [
   flex-direction: column;
 }
 
+/* 연혁 슬로건 — 제목 아래 메시지 */
+.history-slogan {
+  margin-top: 0.5rem; /* 8px */
+  font-size: 0.875rem; /* 14px */
+  font-weight: 600;
+  color: var(--brand);
+  letter-spacing: -0.01em;
+}
+
 .timeline {
   list-style: none;
   margin-top: clamp(1.25rem, 2.5vw, 1.875rem); /* 20~30px */
@@ -646,7 +762,7 @@ const peopleColB: PeopleCard[] = [
 
 .timeline li {
   display: flex;
-  gap: 1.125rem; /* 18px */
+  gap: 1rem; /* 16px */
   align-items: baseline;
   padding: clamp(0.9375rem, 1.6vw, 1.1875rem) 0; /* 15~19px */
   border-top: 0.0625rem solid rgba(40, 50, 70, 0.1);
@@ -656,6 +772,23 @@ const peopleColB: PeopleCard[] = [
   border-top: 0;
 }
 
+/* 년도 표기 — 좌측 고정 폭, 브랜드 컬러 강조 */
+.timeline .t-year {
+  flex: none;
+  width: 2.875rem; /* 46px */
+  font-family: var(--font-display);
+  font-size: 1.0625rem; /* 17px */
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--brand);
+  line-height: 1.4;
+}
+
+/* 직전 항목과 같은 년도면 흐리게 → 같은 해 묶음으로 인식 */
+.timeline .t-year.is-repeat {
+  opacity: 0.28;
+}
+
 .timeline .t-text {
   font-size: 0.9375rem; /* 15px */
   color: var(--ink);
@@ -813,6 +946,12 @@ const peopleColB: PeopleCard[] = [
     grid-column: span 2;
     aspect-ratio: 16 / 10;
   }
+
+  /* 미션/비전: 좁은 화면에서는 라벨을 내용 위로 쌓음 */
+  .mv-row {
+    grid-template-columns: 1fr;
+    gap: 0.875rem; /* 14px */
+  }
 }
 
 @media (max-width: 32.5rem) {
@@ -853,7 +992,6 @@ const peopleColB: PeopleCard[] = [
 /* 모션 최소화 선호 시 히어로/호버 애니메이션 비활성화 */
 @media (prefers-reduced-motion: reduce) {
   .hero-video,
-  .hero-video .ph-label,
   .scroll-hint,
   .scroll-hint i::after {
     animation: none !important;