/* about/style.css
   desktop-first 기존 규칙은 (max-width) 유지.
   editorial-section 등 신규 블록은 mobile-first (min-width) 로 작성 — 주석으로 표기.
   @import 제거: 루트 style.css가 Pretendard를 먼저 로드함.
   * 리셋 제거: 루트 style.css가 담당.
   토큰 출처: 루트 :root (--text-strong, --text-body, --text-muted, --text-faint,
              --bg-base, --bg-soft, --surface, --brand, --brand-hover, --brand-soft,
              --border-subtle, --border-strong, --cta-bg, --cta-text,
              --radius-xs~full, --shadow-xs~xl, --space-1~13, --fs-*, --font-sans,
              --container, --pad-x, --section-y)
*/

body {
  background: var(--bg-base);
  font-family: var(--font-sans);
  overflow: auto;
  color: var(--text-strong);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 12px 28px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { box-shadow: var(--shadow-md); }
.btn-accent {
  background: var(--brand);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-md);
}

/* ── Editorial Section Layout (mobile-first: min-width) ── */
/* 신규 레이아웃 프리미티브: 좌측 라벨 레일 + 우측 콘텐츠 */
.editorial-section {
  padding: 72px 20px;
}

@media (min-width: 768px) {
  .editorial-section {
    padding: var(--section-y) var(--pad-x);
  }
}

.editorial-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-5);
  align-items: start;
}

@media (min-width: 768px) {
  .editorial-inner {
    grid-template-columns: minmax(120px, 160px) minmax(0, 720px);
    column-gap: var(--space-8);
    row-gap: 0;
  }
  /* --wide: 우측 콘텐츠 영역에 최대폭 제한 없음 (CEO·타임라인·가치 섹션용) */
  .editorial-inner--wide {
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  }
}

.editorial-label-col {
  align-self: start;
}

.editorial-label {
  display: block;
  font-size: 22px;            /* 라벨 가독성용 — 좌측 레일 강조 */
  font-weight: 700;
  color: var(--brand-hover);  /* 진한 브랜드 그린 (대비도 확보) */
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.editorial-content-col {
  /* 우측 콘텐츠 컬럼 — 각 섹션 콘텐츠가 직접 배치됨 */
}

/* ── Hero Section ── */
.hero-section {
  padding: var(--space-11) var(--pad-x);      /* 상단 160→96로 축소, 상·하 96 균형(위 쏠림 완화) */
  text-align: center;
  background: #fafafa;                          /* solutions 히어로와 동일 배경 */
  border-bottom: 1px solid #E6E6E6;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 88px 20px 64px;
  }
}

/* 히어로 eyebrow — 중앙, 다른 섹션 라벨과 동일 그린 톤 */
.hero-eyebrow {
  margin-bottom: var(--space-4);
}

.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ── Section common (레거시, 일부 페이지 참조) ── */
.section {
  padding: var(--space-10) var(--space-8);
  max-width: var(--container);
  margin: 0 auto;
}

.section-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.section-title-center {
  text-align: center;
  margin-bottom: 52px;
}

/* ── Vision Section ── */
.vision-section {
  background: var(--bg-base);
}

.vision-heading {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

/* 키워드 강조: 굵기·색만, 밑줄(형광펜) 제거 */
.kw-gradient {
  font-weight: 700;
  color: var(--text-strong);
}

.kw-user,
.kw-why {
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

/* 17px: fs-body(16)와 fs-lead(20) 사이 — 가독성용 커스텀값 유지 */
.vision-body {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-body);
  max-width: 640px;
}

/* ── CEO Section ── */
.ceo-section {
  background: var(--bg-soft);
}

/* CEO 내부 2열 그리드: 인사말 + 프로필 (mobile-first: min-width) */
.ceo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .ceo-grid {
    grid-template-columns: 1fr 280px;
  }
}

.ceo-message-col {
  /* 인사말 컬럼 */
}

.ceo-message-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-7);
}

.ceo-message-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.ceo-message-body p {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: 1.8;
  letter-spacing: -0.1px;
}

/* 프로필 카드 — 플립(앞면 프로필 / 뒷면 이력) */
/* 모바일 1열에선 카드가 컨테이너 폭만큼 늘어나 사진이 과대해지므로 폭 제한 후 중앙 정렬 */
.ceo-profile-col {
  perspective: 1200px;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}

/* 데스크톱 2열에선 그리드 트랙(280px)이 폭을 담당 → 제한·중앙정렬 해제 */
@media (min-width: 1024px) {
  .ceo-profile-col {
    max-width: none;
    margin-inline: 0;
  }
}

.ceo-profile-card {
  position: relative;
}

.ceo-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ceo-card-inner.is-flipped {
  transform: rotateY(180deg);
}

.ceo-card-front,
.ceo-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ceo-card-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  overflow-y: auto;
}

.ceo-card-footer {
  padding: var(--space-3) 20px;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-4);
}

.ceo-flip-btn,
.ceo-flip-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}
.ceo-flip-btn:hover,
.ceo-flip-back-btn:hover { color: var(--text-strong); }
.ceo-flip-btn:focus-visible,
.ceo-flip-back-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.ceo-card-back-content {
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
}

.ceo-photo {
  width: 75%;
  height: auto;
  display: block;
  margin: var(--space-5) auto 0;
  border-radius: var(--radius-sm);
}

.ceo-card-info {
  padding: var(--space-4) 20px var(--space-5);
  text-align: center;
  flex: 1;
}

.ceo-card-name {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

/* 10px: 극소 레이블 — 스케일 이하, 토큰 미정의 */
.ceo-card-role {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.ceo-quick-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

/* 칩 border: rgba(36,191,88,0.2) — brand 틴트 border, 토큰 미정의 잔여값 */
.ceo-chip {
  display: inline-block;
  padding: 3px var(--space-2);
  background: var(--brand-soft);
  border: 1px solid rgba(36, 191, 88, 0.2);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-body);
  white-space: nowrap;
}

.ceo-card-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 11px: 섹션 메타 레이블 — 스케일 이하, 토큰 미정의 */
.ceo-card-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.ceo-journey {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.journey-step {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-body);
  white-space: nowrap;
}

/* journey-arrow: 장식 기호 "→" — 포인트 허용 (SVG 아이콘에 준함) */
.journey-arrow {
  font-size: var(--fs-caption);
  color: var(--brand);
  flex-shrink: 0;
}

.journey-highlight {
  color: var(--text-strong);
  font-weight: 700;
}

.ceo-career-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.career-company {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.career-detail {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-subtle);
}

.ceo-edu-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.edu-school {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.edu-detail {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Milestone / Timeline Section ── */
.milestone-section {
  background: var(--bg-base);
}

.milestone-footer-text {
  margin-top: var(--space-10);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.timeline {
  position: relative;
  max-width: 560px;
}

.timeline-group {
  display: grid;
  grid-template-columns: 88px 52px 1fr;
}

.timeline-year-col {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 3px;
}

.timeline-year {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1;
}

.timeline-line-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.timeline-line-col::after {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
  z-index: 0;
}

.timeline-group--last .timeline-line-col::after {
  display: none;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cta-bg);
  position: relative;
  z-index: 1;
  margin-top: 7px;
  flex-shrink: 0;
}

.timeline-events-col {
  padding-bottom: var(--space-9);
  padding-left: var(--space-1);
}

.timeline-group--last .timeline-events-col {
  padding-bottom: 0;
}

/* column-gap 56px: space-8(48)~space-9(64) 사이 커스텀값 유지 */
.tl-month-block {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 56px;
  padding-bottom: var(--space-10);
  align-items: start;
}

.tl-month-block:last-child {
  padding-bottom: 0;
}

/* 타임라인 점: box-shadow로 링 구현, border-strong 사용 */
.tl-month-block::before {
  content: '';
  position: absolute;
  left: -33px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cta-bg);
  box-shadow: 0 0 0 3px var(--border-strong);
  z-index: 1;
}

.tl-month-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* 18px: fs-body(16)~fs-lead(20) 사이, 타임라인 월 레이블 강조용 유지 */
.tl-month {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.75;
  white-space: nowrap;
}

.tl-upcoming {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-body);
}

.tl-desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tl-desc p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.75;
}

.tl-micro {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.6;
  display: block;
  margin-top: 1px;
}

/* ── Operating Metrics Section (레거시, HTML 미사용) ── */
.metrics-section {
  padding: 60px var(--space-5);
  max-width: 900px;
  margin: 0 auto;
}

.metrics-header {
  text-align: center;
  margin-bottom: var(--space-7);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.metric-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.metric-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.metric-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}

.metric-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ── Vision & Mission Section (레거시, HTML 미사용) ── */
.vm-section {
  background: var(--bg-soft);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.vm-inner {
  padding: var(--space-10) var(--space-8);
  max-width: var(--container);
  margin: 0 auto;
}

.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.vm-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 44px var(--space-7);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.vm-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* vm-card 포인트 라인: brand → blue 그라디언트 (면적 최소, 상단 3px) */
.vm-card.vision-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--blue));
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.vm-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.vm-card-title {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  line-height: 1.25;
}

.vm-card-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.8;
}

/* ── Company Photos (4장 갤러리) — editorial layout, mobile-first ── */
.gallery-grid {                              /* mobile-first: 기본 1열 */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);   /* 2×2 배열 */
    max-width: none;                          /* 콘텐츠 칼럼을 꽉 채움(데스크톱 여백 최소화) — 2열이 반응형으로 스케일 */
  }
}
.gallery-item {                              /* 사진(위) + 캡션(아래) 세로 배치 */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.gallery-item img {
  width: 100%;                               /* 열(그리드 셀) 폭을 채움 → 그리드가 크기 제어(진짜 반응형) */
  aspect-ratio: 16 / 9;                      /* 세로를 낮춘 납작한 비율 */
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);                /* 사진 넣기 전 슬롯 */
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.gallery-cap {                               /* 마이크로 카피 (본사/연구소) — 사진 오른쪽 아래 */
  align-self: flex-end;
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Contact Strip (teams 페이지와 동일) ── */
.contact-strip {
  background: var(--cta-bg);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.contact-strip-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.contact-strip-text {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--cta-text);
  letter-spacing: -0.4px;
}
.contact-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--surface);
  color: var(--text-strong);
  font-size: var(--fs-caption);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}
.contact-strip-btn:hover { background: var(--brand); transform: translateY(-1px); }

@media (max-width: 767px) {
  .contact-strip-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
}

/* ── Footer (CLAUDE.md 기준값 준수) ── */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-soft);
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-6);
}
.footer-brand { margin-bottom: 28px; }
.footer-logo { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
/* footer-slogan 13px: CLAUDE.md 기준값 유지 */
.footer-slogan { font-size: 13px; color: var(--text-body); margin-top: var(--space-1); }
.footer-sns { display: flex; gap: 14px; margin-top: 14px; }
.footer-sns a { color: var(--text-faint); transition: color 0.2s; }
.footer-sns a:hover { color: var(--text-strong); }
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr;
  gap: var(--space-7);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-subtle);
}
.footer-col-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-3);
}
/* footer-col-item 13px: CLAUDE.md 기준값 유지 */
.footer-col-item { font-size: 13px; color: var(--text-body); line-height: 1.7; }
.footer-col-item a { color: inherit; text-decoration: none; transition: color 0.2s; }
.footer-col-item a:hover { color: var(--text-strong); }
.footer-bottom { padding-top: 20px; text-align: center; }
.footer-copy { font-size: 12px; color: var(--text-faint); }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--reveal-delay, 0s);
}

/* ── Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeInUp 0.7s ease both;
}

/* ── Responsive (desktop-first, max-width) ── */
/* 아래는 기존 desktop-first 규칙 유지. 신규 editorial 반응형은 위 min-width 블록에 있음. */

@media (max-width: 1024px) {
  .vm-inner { padding: 60px var(--space-5); }
}

@media (max-width: 900px) {
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 772px) {
  .section { padding: 60px var(--space-5); }
  .vm-inner { padding: 60px var(--space-5); }
  .footer-inner { padding: 40px var(--space-5) 28px; }
  .vm-grid { grid-template-columns: 1fr; }
}

@media (max-width: 772px) {
  .timeline-group { grid-template-columns: 64px 44px 1fr; }
  .tl-month-block { column-gap: 32px; padding-bottom: 56px; }
  .tl-month { font-size: 15px; }
  .tl-desc p { font-size: 15px; }
  /* mobile: 라인 컬럼 폭이 52px→44px로 줄어 점(dot)이 세로선과 어긋나던 것 보정.
     공식: left = -(라인컬럼폭/2) - 7 (base -33px는 52px 기준값과 일치) */
  .tl-month-block::before { left: -29px; }
}

@media (max-width: 480px) {
  .timeline-group { grid-template-columns: 52px 36px 1fr; }
  .timeline-year { font-size: 24px; }
  .tl-month-block { column-gap: 20px; }
  .tl-month { font-size: var(--fs-caption); }
  .tl-desc p { font-size: var(--fs-caption); }
  /* mobile: 라인 컬럼 폭 36px 기준 점 위치 재보정 */
  .tl-month-block::before { left: -25px; }
}

@media (max-width: 600px) {
  .metrics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* mobile: milestone-section·gallery-section이 둘 다 흰 배경(--bg-base)으로 이어져
     구분선 없이 붙어 보이던 것 보정 — 모바일에서만 상단 구분선 추가(데스크톱 시각은 불변) */
  .gallery-section { border-top: 1px solid var(--border-subtle); }

  /* mobile: 플립 버튼 탭 타깃이 텍스트 크기(~22px)로 좁아 44px 미만 →
     시각적 크기는 유지하고 padding+음수 margin으로 히트 영역만 확장 */
  .ceo-flip-btn,
  .ceo-flip-back-btn {
    padding: 10px 6px;
    margin: -10px -6px;
  }

  /* mobile: 문의하기 버튼 탭 타깃을 44px 이상으로 확보 */
  .contact-strip-btn { padding: 13px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .animate-in { animation: none; opacity: 1; transform: none; }
}