/* ═══════════════════════════════════════════════════
   ABOUT US — about.css
   Page: about/about.php  ·  Prefix: ab-
═══════════════════════════════════════════════════ */

.page-about #sub-main { padding-top: 0; }

/* ── 공통 섹션 헤더 ── */
.ab-label {
  font-weight: 600;
  color: var(--us-blue-700);
  margin-bottom: 12px;
}

.ab-title {
  font-size: var(--fs-section-title);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: var(--ls);
  line-height: var(--lh-h2);
  margin: 0 0 60px;
}


/* ═══════════════════════════════════════════════════
   ① HERO
═══════════════════════════════════════════════════ */

/* 페이드인 후 천천히 확대 (Ken Burns) */
@keyframes abHeroZoomIn {
  0%   { opacity: 0.3; transform: scale(1.0); }
  12%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1.12); }
}

.ab-hero {
  height: 100svh;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: hidden;
  padding-top: var(--header-h);
}

/* ── 배경 이미지 레이어 (transform 애니메이션을 위해 별도 div) ── */
.ab-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../imgs/about/hero-bg.webp') center / cover no-repeat;
  animation: abHeroZoomIn 8s ease-out forwards;
  will-change: opacity, transform;
}

/* index 영상과 동일한 다크 시네마틱 오버레이 */
.ab-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 27, 44, 0.72);
  pointer-events: none;
}

/* 세계 연결선 캔버스 — bg(z:0)와 콘텐츠(z:2) 사이 */
.ab-hero-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 콘텐츠 레이어 — bg 위에 표시 */
.ab-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 2;
}

/* Row 1 — 타이틀 */
.ab-hero-row-1 {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding: 120px 0 40px;
}

.ab-hero-text {
  width: 100%;
}

.ab-hero-title {
  font-size: var(--fs-display);
  color: var(--us-ink-000);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls);
  margin: 0 0 32px;
  text-align: center;
}

/* Row 2 (하단) — prod-hero-row-3 구조 동일: breadcrumb(flex:1) + desc(880px) */
.ab-hero-row-2 {
  display: flex;
  align-items: flex-end;
  padding-top: 32px;
}
.ab-hero-row-2 .prod-breadcrumb {
  flex: 1;
}

.ab-hero-row-2-desc {
  font-size: var(--fs-body-lg);
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  letter-spacing: var(--ls);
  text-align: left;
  flex: 0 0 880px;
  max-width: 880px;
}


/* ═══════════════════════════════════════════════════
   ② 비전 SECTION — Cinematic GSAP ScrollTrigger
═══════════════════════════════════════════════════ */

.ab-vision {
  position: relative;
  z-index: 10;
}

/* GSAP pin target: 100vh fixed viewport, rounded top */
.ab-vision-pin {
  height: 100vh;
  width: 100%;
  background: #000;

  overflow: hidden;
  position: relative;
}

/* Scene 02: content wrapper — y/opacity/scale animation target */
.ab-vision-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 60px) 60px 60px;
  box-sizing: border-box;
  position: relative;
}

/* Scene 04 배경: split 열리면 노출되는 도시 이미지 */
.ab-vision-container::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(3, 14, 38, 0.72) 0%, rgba(6, 24, 62, 0.52) 100%),
    url('../imgs/about/vision-cards-bg.webp') center / cover no-repeat;
  pointer-events: none;
}

/* ── Statement (Scene 03) — z-index 3: split 위에 표시 ── */
.ab-vision-statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 3;
}

/* ── Split curtain (Scene 03→04) — 검은 패널이 좌우로 열림 ── */
.ab-vision-split {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow: hidden;
  pointer-events: none;
}

.ab-vision-split-l,
.ab-vision-split-r {
  flex: 1;
  background: var(--us-ink-900);
}

.ab-vision-sub-label {
  font-weight: 700;
  color: var(--us-sky-500);
  margin-bottom: 28px;
}

.ab-vision-headline {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  font-size: clamp(32px, 4.5vw, 72px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Clip wrapper: masks translateY slide-up per line */
.ab-vision-clip {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
}

.ab-vision-line--1 {
  display: block;
  will-change: transform;
}

.ab-vision-line--2 {
  display: block;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

/* ── Value Cards (Scene 04) ── */

/* Cards reveal wrapper: 패딩 영역 내 중앙 정렬, z-index 1 */
.ab-vision-cards-reveal {
  position: absolute;
  top: calc(var(--header-h) + 60px);
  bottom: 60px;
  left: 0;
  right: 0;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px;
  box-sizing: border-box;
  z-index: 1;
  perspective: 2000px;
  display: flex;
  align-items: center;
}

.ab-vision-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* GSAP owns transform/opacity — CSS handles layout + shadow only */
.ab-vision-card {
  background: var(--bg-1);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14);
  transform-origin: center bottom;
  transform-style: preserve-3d;
  transition: box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ab-vision-card:hover {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

.ab-vision-card-icon {
  width: 168px;
  height: 168px;
  margin-bottom: 20px;
}
.ab-vision-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ab-vision-card-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls);
  margin: 0 0 6px;
}

.ab-vision-card-en {
  font-weight: 600;
  color: var(--us-blue-700);
  margin: 0 0 24px;
}

.ab-vision-card-desc {
  font-size: var(--fs-body);
  color: var(--us-ink-500);
  line-height: var(--lh-body);
  letter-spacing: var(--ls);
  margin: 0;
}


/* ═══════════════════════════════════════════════════
   ③ 연혁 SECTION
═══════════════════════════════════════════════════ */

.ab-history {
  position: relative;
  z-index: 11;
  background: var(--bg-1);
  padding: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
}

/* 섹션 헤더 */
.ab-history-header {
  flex-shrink: 0;
  padding-top: calc(var(--header-h) + 60px);
  padding-bottom: 20px;
}
.ab-history-header .ab-title {
  margin-bottom: 0;
}

/* ── 2-컬럼 바디 ── */
.ab-history-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px 120px;
  box-sizing: border-box;
  align-items: stretch;
  width: 100%;
}

/* ── LEFT: 이미지 패널 ── */
.ab-history-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--us-ink-900);
}

/* ── RIGHT: 타임라인 컨테이너 ── */
.ab-history-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── 타임라인 스크롤 영역 ── */
.ab-history-timeline {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ab-history-timeline-inner {
  will-change: transform;
  padding-left: 12px;
  padding-bottom: 80px;
}

/* 이미지 그룹 — absolute 스택, 페이드 전환 */
.ab-history-img-group {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ab-history-img-group.is-active {
  opacity: 1;
}

/* ── 배너 세로 배치 ── */
.ab-history-masonry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
}

/* 개별 배너 셀 */
.ab-history-img {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--us-ink-800);
  flex: 1;
  min-height: 0;
}
.ab-history-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ── 오버레이: 연도 + 그룹명 ── */
.ab-history-visual-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 56px 36px 36px;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0) 100%);
  z-index: 10;
  pointer-events: none;
}
.ab-history-visual-year {
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--us-ink-000);
  line-height: 1;
  letter-spacing: -0.035em;
}
.ab-history-visual-title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 10px;
}

/* ── RIGHT: 타임라인 ── */
.ab-history-timeline {
  padding-bottom: 0;
}

/* 그룹 블록 */
.ab-history-group {
  padding: 52px 0;
  border-top: 1.5px solid var(--us-ink-200);
  opacity: 0;
  transform: translateY(52px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: transform, opacity;
}
.ab-history-group.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ab-history-group:first-child {
  padding-top: 0;
  border-top: none;
}

/* 그룹 헤더 */
.ab-history-group-header {
  margin-bottom: 32px;
}

.ab-history-year {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--us-ink-200);
  transform: translateX(-10px);
  opacity: 0.35;
  transition: color 0.4s var(--ease-out),
              transform 0.4s var(--ease-out),
              opacity 0.4s var(--ease-out);
}
.ab-history-group.is-active .ab-history-year {
  color: var(--us-blue-700);
  transform: translateX(0);
  opacity: 1;
}

.ab-history-group-name {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--us-ink-400);
  margin-top: 10px;
  margin-left: 2px;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), color 0.4s;
}
.ab-history-group.is-active .ab-history-group-name {
  opacity: 1;
  color: var(--us-blue-700);
}

/* 이벤트 목록 */
.ab-history-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 개별 이벤트 — 그룹이 translateY 담당, 이벤트는 opacity stagger */
.ab-history-event {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.ab-history-event.is-revealed { opacity: 1; }
.ab-history-event:nth-child(2) { transition-delay: 0.1s; }
.ab-history-event:nth-child(3) { transition-delay: 0.2s; }
.ab-history-event:nth-child(4) { transition-delay: 0.3s; }
.ab-history-event:nth-child(5) { transition-delay: 0.4s; }
.ab-history-event:nth-child(6) { transition-delay: 0.5s; }

.ab-history-event-when {
  flex-shrink: 0;
  width: 58px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--us-blue-700);
  letter-spacing: 0.06em;
  padding-top: 5px;
  line-height: 1;
}

.ab-history-event-when--year {
  display: flex;
  gap: 4px;
}
.ab-when-y {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--us-blue-700);
  letter-spacing: 0.02em;
  line-height: 1;
}
.ab-when-m {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--us-blue-700);
  letter-spacing: 0.06em;
  line-height: 1;
}

.ab-history-event-body { flex: 1; }

.ab-history-event-title {
  display: block;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: var(--ls);
  margin-bottom: 6px;
  line-height: 1.45;
}

.ab-history-event-desc {
  font-size: var(--fs-body);
  color: var(--us-ink-500);
  line-height: var(--lh-body);
  letter-spacing: var(--ls);
  margin: 0;
}


/* ═══════════════════════════════════════════════════
   ④ 수상 및 인증 SECTION
═══════════════════════════════════════════════════ */

.ab-awards {
  position: relative;
  z-index: 12;
  padding: 120px 0;
  background: var(--us-paper-warm);
}

/* ── 헤더 행: 타이틀(좌) + 탭(우) ── */
.ab-awards-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}
.ab-awards-head-text .ab-title { margin-bottom: 0; }

/* ── 탭 래퍼 (모바일 sticky) ── */
.ab-awards-tabs-wrap {
  display: none; /* 데스크탑에서 숨김 */
}

/* ── 탭 버튼 ── */
.ab-awards-tabs {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-bottom: 4px;
}
.ab-awards-tab {
  padding: 10px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--us-blue-700);
  background: transparent;
  color: var(--us-blue-700);
  font-size: var(--fs-body);
  letter-spacing: var(--ls);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.ab-awards-tab.is-active,
.ab-awards-tab:hover {
  background: var(--us-blue-700);
  color: #fff;
}

/* ── 필터 그리드 ── */
.ab-awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
}
.ab-awards-item.is-hidden { display: none; }

.ab-awards-card {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--us-ink-000);
  border: 1.5px solid var(--us-ink-200);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-awards-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ab-awards-title {
  margin: 10px 0 4px;
  font-size: var(--fs-body-lg);
  letter-spacing: var(--ls);
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
}
.ab-awards-desc {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--us-ink-500);
  letter-spacing: var(--ls);
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
}


/* ═══════════════════════════════════════════════════
   ⑤ 오시는길 SECTION
═══════════════════════════════════════════════════ */

.ab-location {
  position: relative;
  z-index: 13;
  padding: 0 0 120px;
  background: var(--bg-1);
}

.ab-location-header { padding-top: 120px; }

/* ── 지도 풀 width ── */
.ab-location-map {
  width: 100%;
  margin-bottom: 72px;
  overflow: hidden;
}

/* ── 교통 안내 ── */
.ab-location-info { display: flex; flex-direction: column; gap: 52px; }

.ab-location-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  align-items: start;
}

.ab-location-type {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--us-ink-500);
  padding-top: 10px;
}

.ab-location-routes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ab-location-route {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 지하철 노선 배지 */
.ab-location-badge {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-lg);
  color: #fff;
  letter-spacing: 0;
}
.ab-location-badge--2  { background: #3BB65A; }
.ab-location-badge--bd { background: #F5A400; }
.ab-location-badge--car { background: var(--us-ink-500); }

.ab-location-route-text {
  margin: 0;
  font-size: var(--fs-body-lg);
  color: var(--us-ink-700);
  letter-spacing: var(--ls);
  line-height: 1.5;
}
.ab-location-route-text em {
  font-style: normal;
  color: var(--us-ink-400);
}

/* 자가용 경로 그룹 */
.ab-location-route--car { align-items: flex-start; }
.ab-location-car-routes { display: flex; flex-direction: column; gap: 20px; }
.ab-location-car-route strong {
  display: block;
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--us-ink-700);
  letter-spacing: var(--ls);
  margin-bottom: 4px;
}
.ab-location-car-route p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--us-ink-500);
  letter-spacing: var(--ls);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — max-width: 1280px  (소형 데스크탑)
═══════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .ab-hero-row-2-desc { flex: 0 0 560px; max-width: 560px; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — max-width: 1024px  (태블릿 가로)
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* ── 공통 ── */
  .ab-inner            { padding: 0 40px; }
  .ab-title    { margin-bottom: 40px; }
  .ab-awards           { padding: 80px 0; }
  .ab-location         { padding: 0 0 80px; }
  .ab-location-header  { padding-top: 80px; }
  .ab-location-map-inner { height: 360px; }
  .ab-location-map     { margin-bottom: 52px; }
  .ab-location-row     { grid-template-columns: 120px 1fr; gap: 24px; }

  /* ── History ── */
  .ab-history-body              { grid-template-columns: 1fr; gap: 0; padding: 0 40px 0; }
  .ab-history-header            { padding-top: 32px; padding-bottom: 20px; }
  .ab-history-visual            { display: none; }
  .ab-history-right             { grid-column: 1 / -1; }
  .ab-history-timeline-inner    { padding: 0 !important; }
  .ab-history-events            { gap: 12px; }
  .ab-history-year              { color: var(--us-blue-700); opacity: 1; transform: translateX(0); }
  .ab-history-group-name        { color: var(--us-blue-700); opacity: 1; margin-left: 0; }

  /* ── Awards ── */
  .ab-awards-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── Hero ── */
  .ab-hero-inner       { padding: 60px 40px 40px; }
  .ab-hero-row-1       { padding: 40px 0 20px; }
  .ab-hero-title       { font-size: clamp(30px, 4.2vw, 52px); margin-bottom: 0; }
  /* desc: breadcrumb auto + desc flex:1 로 공간 공유 */
  .ab-hero-row-2 .prod-breadcrumb { flex: 0 0 auto; }
  .ab-hero-row-2-desc  { flex: 1; max-width: none; }

  /* ── Vision ── */
  .ab-vision-container  { padding: calc(var(--header-h) + 40px) 40px 40px; }
  .ab-vision-cards-reveal { padding: 0 40px; }
  .ab-vision-cards      { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ab-vision-card       { padding: 24px; border-radius: 18px; }
  .ab-vision-card-icon  { width: 80px; height: 80px; margin-bottom: 16px; }
  .ab-vision-card-title { font-size: var(--fs-h4); }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — max-width: 768px  (태블릿 세로 / 모바일)
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── 공통 ── */
  .ab-inner            { padding: 0 24px; }
  .ab-history,
  .ab-awards           { padding: 72px 0; }
  .ab-location         { padding: 0 0 72px; }
  .ab-location-header  { padding-top: 72px; }
  .ab-location-map-inner { height: 280px; }
  .ab-location-map     { margin-bottom: 40px; }
  .ab-location-row     { grid-template-columns: 1fr; gap: 16px; }
  .ab-location-info    { gap: 36px; }

  /* ── Hero ── */
  .ab-hero-inner       { padding: 40px 24px 32px; }
  .ab-hero-row-1       { padding: 0 0 2rem 0; align-items: flex-end; }
  .ab-hero-title       { font-size: clamp(26px, 7vw, 44px); margin-bottom: 0; }
  /* Row-2: 세로 스택 — 브레드크럼 위 / 설명 아래 */
  .ab-hero-row-2       { flex-direction: column; align-items: flex-start;
                         gap: 16px; padding-top: 20px; }
  .ab-hero-row-2 .prod-breadcrumb { flex: none; }
  .ab-hero-row-2-desc  { flex: none; width: 100%; max-width: 100%;
                         font-size: var(--fs-body); line-height: 1.7; }

  /* ── Vision ── */
  .ab-vision-container  { padding: calc(var(--header-h) + 28px) 24px 28px; }
  .ab-vision-sub-label  { margin-bottom: 12px; }
  .ab-vision-headline   { flex-direction: column; gap: 0;
                          font-size: clamp(26px, 7.5vw, 44px); letter-spacing: -0.025em; }
  .ab-vision-clip       { padding-bottom: 0.08em; }
  .ab-vision-cards-reveal { padding: 0 24px; }
  /* 카드 3개 → 세로 1열 (2열은 고아 카드 발생) */
  .ab-vision-cards      { grid-template-columns: 1fr; gap: 12px; }
  .ab-vision-card       { padding: 24px 28px; border-radius: 16px;
                          align-items: center; text-align: left; gap: 20px; }
  .ab-vision-card-icon  { width: 64px; height: 64px; margin-bottom: 0; flex-shrink: 0; }
  .ab-vision-card-title { font-size: var(--fs-body-lg); margin-bottom: 4px; }
  .ab-vision-card-en    { margin-bottom: 8px; }

  /* ── History: 모바일은 pin 해제, 단일 컬럼 스크롤 ── */
  .ab-history           { height: auto; gap: 20px; }
  .ab-history-group     { opacity: 1; transform: translateY(0); }
  .ab-history-event     { opacity: 1; }
  .ab-history-header    { padding-top: calc(var(--header-h) + 24px); }
  .ab-history-body      {
    grid-template-columns: 1fr;
    flex: none;
    min-height: auto;
    padding: 0 24px 60px;
    gap: 0;
  }
  .ab-history-right     { overflow: visible; }
  .ab-history-timeline  { overflow: visible; flex: none; }
  .ab-history-visual    {
    height: 52vw;
    max-height: 320px;
    margin-bottom: 24px;
    border-radius: 16px;
  }
  .ab-history-group     { padding: 30px 0; }
  .ab-awards,
  .ab-location          { padding: 72px 0; }

  /* ── Awards ── */
  .ab-awards-head            { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 16px; }
  .ab-awards-tabs--desktop   { display: none; }
  .ab-awards-tabs-wrap {
    display: block;
    position: sticky;
    top: var(--header-h);
    z-index: 100;
    background: var(--us-paper-warm);
    margin: 0 -24px 28px;
    padding: 12px 24px;
    border-bottom: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ab-awards-tabs-wrap::-webkit-scrollbar { display: none; }
  .ab-awards-tabs--mobile    { flex-wrap: nowrap; width: max-content; padding-bottom: 0; }
  .ab-awards-grid            { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — max-width: 480px  (소형 모바일)
═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ab-hero-globe       { display: none; } /* 캔버스 모바일 성능 절약 */
  .ab-hero-inner       { padding: 32px 20px 28px; }
  .ab-hero-title       { font-size: clamp(24px, 8.5vw, 36px); }
  .ab-hero-row-2-desc  { font-size: var(--fs-body-sm); }

  .ab-vision-container  { padding: calc(var(--header-h) + 24px) 20px 24px; }
  .ab-vision-headline   { font-size: clamp(22px, 8vw, 34px); }
  .ab-vision-cards-reveal { padding: 0 20px; }
  .ab-vision-card       { padding: 20px; gap: 4px; }
  .ab-vision-card-icon  { display: none; }
  .ab-vision-card-desc  { font-size: var(--fs-body-sm); }

  .ab-history-body      { padding: 0 20px 40px; }
  .ab-history-visual    { height: 56vw; max-height: 260px; }
  .ab-history-group     { padding: 32px 0; }
  .ab-awards             { padding: 60px 0; }
  .ab-location           { padding: 60px 0; }
  .ab-location-header    { padding-top: 60px; }
  .ab-location-map-inner { height: 220px; }
  .ab-inner              { padding: 0 20px; }

  /* ── Awards ── */
  .ab-awards-tab        { padding: 7px 14px; font-size: var(--fs-eyebrow); }
  .ab-awards-grid       { gap: 6px; }
}


/* ═══════════════════════════════════════════════════
   REVEAL
═══════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(52px);
  transition: opacity 0.8s var(--ease-out),
              transform 0.8s var(--ease-out);
  will-change: transform, opacity;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.13s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.26s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.39s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.52s; }