/* About Void — Figma: 아침밥 / Frame 2147242275 (11:430), 1920 × 6591
   원본이 1920 프레임 기준 절대좌표 레이아웃이라, 좌표를 그대로 두고
   캔버스 전체를 뷰포트 폭에 맞춰 스케일한다. (--page-scale 는 about.js 가 설정) */

:root {
  --c-accent: #40b3f4;
  --c-hero-bg: #e7e7e7;
  --c-aboutus-bg: #2a2a2a;
  --c-timeline-bg: #f1f1f1;
  --c-panel: #f4f9fb;
  --c-grid-line: rgba(187, 187, 187, 0.5);

  --font-gsf: "Google Sans Flex", -apple-system, BlinkMacSystemFont, sans-serif;
  /* ZT Bros Oskon 90s 는 배포 폰트가 아니라 대체 스택을 쓴다 (거대 괄호 장식) */
  --font-oskon: "ZT Bros Oskon 90s", "Helvetica Neue", Arial, sans-serif;
}

/* 섹션 공통 — 아이브로우 + 워드마크 */
.eyebrow {
  margin: 0;
  font-family: var(--font-gsf);
  font-weight: 500;
  font-size: 21px;
  line-height: normal;
  letter-spacing: -1.05px;
  color: var(--c-accent);
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
}

.heading-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* ── 1. Hero — 어바웃보이드팀 (11:127) 1920 × 1240 ───────────── */
/* 히어로는 첫 화면에 통째로 들어오도록 뷰포트 높이에 맞춘다.
   --hero-height 는 about.js 가 (뷰포트높이 - 헤더) / 스케일 로 계산해 넣는다. */
.hero {
  height: var(--hero-height, 1240px);
  background: var(--c-hero-bg);
}

/* 145px 피치 격자. hero-grid-h/v.svg 와 동일한 기하 —
   #BBBBBB 1px, opacity .5, 가로선 y=0.5+145n, 세로선 x=90.5+145n */
.hero__grid {
  position: absolute;
  inset: 0;
  /* 145px 정사각 주기. 위상(세로선 x=90)을 그라디언트 안에 직접 넣는다 —
     background-position 으로 밀면 타일이 되감기며 왼쪽에 가짜 선이 하나 더 생긴다. */
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0 90px,
      var(--c-grid-line) 90px 91px,
      transparent 91px 145px
    ),
    repeating-linear-gradient(to bottom, var(--c-grid-line) 0 1px, transparent 1px 145px);
}

.hero__topbar {
  position: absolute;
  left: 59.06px;
  top: 40px;
  width: 1801.879px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sf);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.8px;
  color: #2e2e2e;
  white-space: nowrap;
}

.hero__topbar p {
  margin: 0;
}

/* 점 — 145px 격자 교차점에 정확히. 세로 위치는 assets/about-hero.js 가
   히어로 높이에 맞춰 격자 행으로 스냅한다 (x 는 69.611 + 145n 로 고정). */
.hero__dot {
  position: absolute;
  width: 40.7777px;
  height: 40.7777px;
}

/* Void 글자만 아주 옅게 깜빡인다 — 눈에 띄지 않되 미묘하게 느껴지는 정도 */
.hero__void {
  animation: void-breathe 4.2s ease-in-out infinite;
}

/* .hero__letters 자식 순서: L(1) a(2) b(3) rule(4) d(5) i(6) o(7) V(8) */
.hero__void:nth-child(6) { animation-delay: 0.35s; }
.hero__void:nth-child(7) { animation-delay: 0.7s; }
.hero__void:nth-child(8) { animation-delay: 1.05s; }

@keyframes void-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__void {
    animation: none;
  }
}

.hero__letters {
  position: absolute;
  left: 365px;
  /* Figma: 세로 중앙에서 -28.34px (박스 높이 267.311의 절반을 뺀 값) */
  top: calc(50% - 161.996px);
  width: 1189.162px;
  height: 267.311px;
}

.hero__letters img {
  position: absolute;
}

.hero__scroll-cue {
  position: absolute;
  left: 942.5px;
  /* Figma 원본과 같은 하단 여백 51.008px */
  bottom: 51.008px;
  width: 35px;
  height: 37.4932px;
  animation: scroll-cue-blink 1.6s ease-in-out infinite;
}

@keyframes scroll-cue-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue {
    animation: none;
  }
}

/* ── 2. About Us — 어바웃 어스 (11:208) 1920 × 353 ───────────── */
.aboutus {
  height: 353px;
  background: var(--c-aboutus-bg);
}

.aboutus__blob-l {
  position: absolute;
  left: -32px;
  top: -415px;
  width: 1184px;
  height: 1184px;
}

.aboutus__blob-r {
  position: absolute;
  left: 1152px;
  top: -235px;
  width: 825px;
  height: 825px;
}

.aboutus__row {
  position: absolute;
  left: 122px;
  top: 124px;
  width: 1676px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aboutus__wordmark {
  width: 253.047px;
  height: 57.43px;
}

.aboutus__body {
  width: 848px;
  margin: 0;
  font-family: var(--font-gsf);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: -0.72px;
  color: #e7e7e7;
  opacity: 0.8;
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
}

/* ── 3. Timeline — 역대 활동 소개 (11:223) 1920 × 2017 ────────── */
.timeline {
  height: 2017px;
  background: var(--c-timeline-bg);
}

/* Figma 원본은 color-dodge · opacity 72% 레이어지만, 스크롤할 때마다 전체 폭
   블렌드 레이어를 재합성하느라 깜빡임/색 튐이 생긴다. 같은 결과를 이미지에
   미리 구워 넣은 timeline-bg-flat.png 를 쓴다 (원본: timeline-bg-graphic.png,
   #f1f1f1 배경 위 color-dodge, 불투명도 0.72 로 합성). */
.timeline__bg {
  position: absolute;
  left: -1px;
  top: -265px;
  width: 1921px;
  height: 1955px;
  object-fit: cover;
  pointer-events: none;
}

.timeline__heading {
  position: absolute;
  left: 122px;
  top: 138px;
  width: 253.047px;
}

.timeline__wordmark {
  width: 238px;
  height: 51.591px;
}

/* 월 라벨 칩 — Figma 높이 41.043 고정 */
.month {
  position: absolute;
  top: 953px;
  height: 41.043px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6.761px;
  font-family: var(--font-sf);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: #a2a2a2;
  white-space: nowrap;
}

.month--now {
  background: #f3f9ff;
  font-size: 18.93px;
  letter-spacing: -1.1358px;
  color: #3c3c3c;
}

/* 세로 점선 격자 / 가로 축 */
.timeline__gridline {
  position: absolute;
  top: 163.61px;
  width: 1.352px;
  height: 892px;
}

.timeline__axis {
  position: absolute;
  left: -3px;
  top: 1047px;
  width: 1920px;
  height: 1.352px;
  background: #e6e6e6;
}

/* 간트 막대 */
.bar {
  position: absolute;
  height: 55.565px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 27.043px;
  background: #fff;
  border: 1.352px solid #dedede;
  border-radius: 13.522px;
  box-sizing: border-box;
  font-family: var(--font-sf);
  font-weight: 600;
  font-size: 21.635px;
  line-height: 1.1;
  letter-spacing: -1.2981px;
  color: #858585;
  white-space: nowrap;
}

.bar--exhibition {
  height: 56px;
  padding: 0 64px;
  justify-content: flex-start;
  background: url("assets/about/timeline-exhibition-bar.png") center / cover no-repeat;
  border: 1.5px solid rgba(64, 179, 244, 0.66);
  color: var(--c-accent);
}

.bar-date {
  position: absolute;
  transform: translateY(-50%);
  font-family: var(--font-sf);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: #cfcfcf;
  white-space: nowrap;
}

.bar-date--exhibition {
  color: #6e6e6e;
}

/* 거대 괄호 장식 */
/* ZT Bros Oskon 90s 가 배포 폰트가 아니라 대체 스택으로 렌더된다.
   대체 폰트의 괄호 글리프가 em 박스 아래쪽에 앉아 Figma 원본 top(1346px)을 쓰면
   106px 내려가 보이므로, 잉크 중심이 타원 행 중심(1600.34px)에 오도록 보정한다. */
.timeline__paren {
  position: absolute;
  top: 1235.5px;
  height: 528px;
  margin: 0;
  font-family: var(--font-oskon);
  font-weight: 300;
  font-size: 600px;
  line-height: 1;
  letter-spacing: -114px;
  color: #d3d3d3;
  opacity: 0.8;
}

.timeline__hint {
  position: absolute;
  left: 752px;
  top: 1184px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: #fff;
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -1.44px;
  color: #939393;
  white-space: nowrap;
}

/* 타원 포토 카드 — 가로로 붙어 있는 4장.
   기본은 OT 만 펼쳐진(거의 정원) 상태, 나머지는 좁은 타원.
   커서를 올리면 그 카드가 펼쳐지고 나머지는 접히며, 딤/블러도 걷힌다.
   접힘 3장 + 펼침 1장 = 291.158×3 + 537.685 = 1411.16 으로 행 폭이 항상 일정하다. */
.ovals {
  position: absolute;
  left: 254px;
  top: 1323px;
  width: 1411.158px;
  height: 554.687px;
  display: flex;
}

.oval {
  position: relative;
  flex: 0 0 auto;
  width: 291.158px;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.oval--open {
  width: 537.685px;
}

/* 행에 커서가 들어오면 전부 접고, 커서가 놓인 카드만 펼친다 (뒤 규칙이 이긴다) */
.ovals:hover .oval {
  width: 291.158px;
}

.ovals .oval:hover {
  width: 537.685px;
}

/* 폭이 변하므로 사진은 cover 로 채우고, Figma 크롭 중심을 object-position 으로 맞춘다 */
.oval__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oval__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 0.35s ease;
}

.oval:hover .oval__scrim {
  opacity: 0;
}

.oval__label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-gsf);
  font-weight: 500;
  font-size: 23.378px;
  line-height: normal;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  /* 호버로 딤이 걷히면 밝은 사진 위에서 흰 라벨이 묻혀 최소한의 그림자만 준다 */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
}

.oval__label--top {
  top: 35.07px;
  letter-spacing: -0.4676px;
}

/* 아래 라벨은 1줄("OT")·2줄("Regular Meeting")이 섞여 있어 하단 기준으로 맞춘다 */
.oval__label--bottom {
  bottom: 36.4px;
  line-height: 1.2;
  letter-spacing: -1.1689px;
}

@media (prefers-reduced-motion: reduce) {
  .oval,
  .oval__scrim {
    transition: none;
  }
}

/* ── 4. Our Activities — 활동 설명 (11:315) 1920 × 1092 ───────── */
.activities {
  height: 1092px;
  background: #fff;
}

.activities__inner {
  position: absolute;
  left: 120px;
  top: 92px;
  width: 1680px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.activities__heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.activities__wordmark {
  width: 390px;
  height: 51.311px;
}

.activities__list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 0 5px;
  width: 100%;
  box-sizing: border-box;
}

.activity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 154px;
  padding: 35px 50px;
  background: var(--c-panel);
  border-radius: 10px;
  box-sizing: border-box;
}

.activity__head {
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  width: 500px;
}

.activity__title {
  margin: 0;
  font-family: var(--font-outfit);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1.6px;
  color: #0f2b39;
  opacity: 0.8;
  white-space: nowrap;
}

.activity__sub {
  margin: 0;
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  letter-spacing: -1.2px;
  color: #9aa8af;
  white-space: nowrap;
}

.activity__body {
  width: 919px;
  margin: 0;
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.6;
  letter-spacing: -1.5px;
  color: #8d9096;
}

/* ── 5. Performance — 이후 수상 (11:362) 1920 × 1889 ──────────── */
.performance {
  height: 1889px;
  background: #fff;
}

.performance__header {
  position: absolute;
  left: 122px;
  top: 100px;
  width: 1676px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.performance__wordmark {
  width: 395.46px;
  height: 55.5px;
}

.performance__body {
  width: 848px;
  margin: 0;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.65;
  letter-spacing: -0.8px;
  color: #262626;
  opacity: 0.8;
}

.panel {
  position: absolute;
  background: var(--c-panel);
  border-radius: 32.128px;
}

.panel--white {
  background: #fff;
  border-radius: 16.064px;
}

.col-title {
  position: absolute;
  margin: 0;
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.65;
  letter-spacing: -0.96px;
  color: rgba(15, 43, 57, 0.5);
  white-space: nowrap;
}

.col-title--center {
  transform: translateX(-50%);
  text-align: center;
}

.shot {
  position: absolute;
  border-radius: 16.064px;
  overflow: hidden;
}

.shot img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6.693px 13.387px;
  background: #8dd1f2;
  border-radius: 6.693px;
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 21.419px;
  line-height: 1.5;
  letter-spacing: -1.2851px;
  color: #122028;
  white-space: nowrap;
}

.app-icon {
  position: absolute;
  width: 77.642px;
  height: 77.642px;
  background: #d9d9d9;
  border-radius: 10px;
}

/* 실제 서비스 썸네일이 들어간 타일 (13:489 / 13:493 / 13:495) */
.app-icon--shot {
  background: none;
  overflow: hidden;
}

.app-icon--shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* 13:489 · 13:493 만 테두리가 있고 13:495 는 없다 */
.app-icon--bordered {
  border: 1px solid #e8e8e8;
}

.app-label {
  position: absolute;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 21.419px;
  line-height: 1.5;
  letter-spacing: -1.2851px;
  color: #000;
  white-space: nowrap;
}