/* ==========================================================================
   about.html 전용.

   2026-07-23: 메뉴에 About 항목을 넣으면서 신규 제작.
   2026-07-27(1차): brucemaudesign.com/about를 텍스트 설명만 보고 추측 —
   실제와 전혀 달라 폐기.
   2026-07-27(2차): 실제 BMD 스크린샷 6장 기반 재구성.
   2026-07-27(3차): 대표님이 전달한 최종 원고/레이아웃으로 전면 재작성.

   2026-07-27(4차): 보완 지침 반영 —
   1) 헤더 position:fixed 전환(이 페이지 한정 오버라이드).
   2) 수치 지표 한글 라벨 추가.
   3) 대형 타이틀 아래 서브 본문을 전부 가로 중앙 50% 지점에서 시작
      (.about-offset-content 공용 클래스로 통합 — Archives 전용이었던
      about-archive-content 대신 이 클래스를 기본으로 사용).
   4) Ko Yoonhoo 섹션 — 사진 바로 아래 리드문+본문 구조로 재편.
   5) 미디어 채널 블록 뒤에 히어로와 동일한 스크롤 확대 아웃트로 섹션 추가
      (.about-hero-* 클래스를 .about-parallax-*로 일반화해 히어로/아웃트로
      공용으로 재사용).

   2026-07-27(5차): 추가 교정 지침 반영 —
   1) Archives — 지원내용/지원대상/진행방식 dl 블록과 3열 카드 그리드 삭제,
      단일 문단(.about-offset-content) + 세로 1줄 리스트(.about-archive-list)
      로 재구성.
   2) Ko Yoonhoo — "사진 바로 아래 본문" 스택 구조를 폐기하고, 사진과
      본문이 나란히 놓이는 좌우 그리드(.about-roots-text/.about-roots-photo/
      .about-roots-book)로 재구성. 기존 .about-channels 3열 블록(푸터처럼
      보였던 블록)은 완전히 삭제하고 Watch/Read/Visit 3개의 밑줄 텍스트
      링크(.about-roots-links)로 대체.

   2026-07-27(6차): 레이아웃/여백 정밀 교정 —
   1) 섹션 간 상하 여백이 BMD 레퍼런스 대비 부족하다는 지적 — 전 섹션의
      padding-block을 상향(clamp(80,10vw,140) → clamp(100,12vw,200)),
      Archives→Ko Yoonhoo 전환부는 특히 더 넉넉하게(.about-roots
      padding-top을 clamp(160,18vw,280)로 별도 확대).
   2) Ko Yoonhoo 좌우 그리드 — 기존 "1fr 1fr + gap" 방식은 오른쪽 컬럼(사진/
      본문)이 정확히 가로 50% 지점에서 시작하지 않았음. gap을 0으로 없애고
      각 요소 안쪽에 margin/padding으로 여백을 주는 방식으로 교체해, 오른쪽
      컬럼이 정확히 50% 칼선에서 시작하도록 수정(Archives의
      .about-offset-content와 동일한 시각 언어).

   2026-07-27(7차): "8가지 최종 통합 지침" 반영 —
   1) 히어로 밀착 — 기존 main padding-top(grid-gutter + 2.6em 어림값)이
      실제 고정 헤더 높이와 안 맞아 19~32px의 어정쩡한 틈이 있었음.
      js/about-reveal.js가 헤더의 실제 렌더 높이를 측정해 CSS 변수
      --about-header-h에 넣어주고, main은 그 값을 padding-top으로 그대로
      사용 — 헤더 바로 밑에 히어로가 여백 없이 밀착.
   2) 대형 타이틀 비대칭 인덴트 — Our Services/Ko Yoonhoo는 기본 좌측
      라인 그대로, Archives 타이틀만 데스크톱에서 우측으로 인덴트를 줘서
      세 타이틀이 전부 같은 수직선에 서지 않는 시각적 리듬 확보.
   3) Ko Yoonhoo 상단 블록 — 텍스트/사진 정렬을 수직 중앙(center)에서
      상단 정렬(start)로 변경, 본문도 최신 원고로 교체.

   2026-07-27(8차): "9가지 최종 완결 통합 지침" 반영 —
   1) 타이틀 인덴트 재배치 — Archives 인덴트를 제거하고 좌측 기본선으로
      복귀, 대신 Our Services·Ko Yoonhoo 타이틀에 동일한 인덴트 적용
      (대표님이 리듬감 방향을 뒤바꿔 요청).
   2) Our Services — DRAG 배지(.about-services-drag) 삭제, 카드 간격을
      기존 대비 약 2배로 확장, 서브문장은 데스크톱에서 줄바꿈 없이 한 줄
      (white-space:nowrap), 카드 3장 → 4장으로 확장하며 각 카드에
      제목뿐 아니라 설명 문단(.about-service-desc)도 추가.
   3) Ko Yoonhoo — Watch/Read/Visit 미니 링크 위에 얇은 상단 구분선 추가.
   폰트는 계속 사이트 기존 --font-kr(Pretendard)·--font-en(Switzer)만
   사용(Tailwind 미도입, 대표님 확정 답변 유지). profile.jpg/book.jpg/
   outro.jpg는 실제 이미지 폴더에 아직 없어(확인 완료) 계속 플레이스홀더·
   대체 사진 유지 — 지어내지 않음.

   2026-07-27(9차): "[핵심 수정 요구사항] 4가지" 반영 —
   1) 대형 타이틀(.about-display-kr/en) clamp 대폭 상향(약 1.7배), 대신
      타이틀을 감싸는 섹션들의 padding-block/margin은 절반 수준으로 축소.
   2) Archives 서브 텍스트 — 고정 50% 오프셋 대신 "Archives"의 "A" 위치를
      JS로 측정한 --about-archive-indent 변수로 정렬, leading을 좁혀
      2줄로 스냅하게 정리. 리스트 구분선 삭제, 날짜 opacity 제거(검은색).
   3) Ko Yoonhoo — 2열+margin/padding 정밀 보정 방식을 폐기하고, 빈
      스페이서 컬럼을 포함한 실제 3등분(1fr 1fr 1fr) 그리드로 재작성,
      align-items:end로 사진/텍스트 하단 정렬 통일.
   4) Our Services 갤러리 — 카드 2.5~3장이 화면에 여유 있게 보이도록
      카드 폭/간격 재조율.

   2026-07-27(10차): 폰트 스타일 통일 + 갤러리 여백 4가지 반영 —
   1) Statement 좌측 본문을 오른쪽 수치 지표 설명(.about-stat-desc)과
      동일한 스타일로 통일, max-width 제한 해제.
   2) Our Services 인트로 문장을 카드 설명(.about-service-desc)과 동일한
      스타일로 통일.
   3) Our Services 갤러리 우측 grid-padding만 상쇄해 화면 끝까지 이미지가
      여백 없이 닿도록 함.

   2026-07-27(11차): "Our Services 독립 섹션 폐지" 구조 재편 —
   1) .about-services* 규칙 전체 삭제(SECTION 자체가 없어짐).
   2) 가로 스크롤 드래그 갤러리 관련 규칙을 .about-archive-gallery/
      .about-archive-scroll/.about-archive-track/.about-archive-card*로
      이름을 바꿔 Archives 섹션으로 이관(시각적 구현은 동일, 카드는 사진+
      날짜+제목의 단순한 구조로 통일 — 케이스 스터디 느낌의 가변 종횡비
      대신, "월별 기록 로그"라는 성격에 맞게 4:3 통일).
   3) Archives 서브 텍스트가 2~3줄 분량으로 길어져 max-width를 확장.
   ========================================================================== */

/* 사이트 기본은 헤더가 position:absolute라 스크롤하면 같이 사라짐 —
   이 페이지만 fixed로 오버라이드해서 항상 화면 상단에 고정.
   13차: 히어로 이미지 위에 투명하게 떠 있어야 하므로 배경을 투명 처리
   (기존 var(--color-blanc) 불투명 배경 삭제) — 다른 섹션 스크롤 중에도
   배경 없이 콘텐츠 위에 그대로 겹쳐 보임(z-index:50으로 항상 최상단 유지)
   22차 수정: "어바웃/컨텍 페이지 탑메뉴 위치가 인덱스랑 다르다 — 인덱스
   기준으로 모든 페이지가 동일해야 한다"는 요청. 원인: 인덱스 페이지는
   .app-header 기본값(top:calc(var(--grid-gutter) - .2em))을 그대로 쓰는데,
   이 페이지(about.html + about-page 클래스를 공유하는 contact-v2.html)만
   13차 때 top:0으로 덮어써서 다른 페이지보다 살짝 더 위(화면 맨 끝)에
   붙어 있었음 — top:0을 지워서 인덱스와 동일한 기본값을 그대로 물려받게
   함. 그만큼 헤더가 예전보다 아주 조금(--grid-gutter만큼) 아래로 내려가서,
   아래 padding-top/margin-top 보정값도 같이 늘려야 어긋나지 않음 */
.about-page .app-header{
  color:var(--color-noir);
  position:fixed;
  left:0;
  width:100%;
  z-index:50;
  background:transparent;
}
/* 헤더가 fixed로 문서 흐름에서 빠지므로, 헤더 아래 첫 섹션(히어로)이
   헤더에 가려지지 않도록 그만큼 위쪽 여백을 확보하되, "여백"이 아니라
   "정확히 헤더가 차지하는 영역만큼"이어야 히어로가 헤더 바로 밑에 밀착됨.
   --about-header-h는 js/about-reveal.js의 syncHeaderHeight()가 헤더의
   실제 렌더 높이(offsetHeight, top 위치는 미포함)를 측정해 넣어주는 값 —
   폴백(JS 비활성 시)은 대략값. 22차: 헤더 top이 0이 아니게 됐으므로,
   헤더가 실제로 차지하는 세로 범위는 "top 오프셋 + 높이"이고, 이 여백도
   그만큼 늘려야 헤더 바로 밑에서 콘텐츠가 시작됨(안 늘리면 헤더가 내려간
   만큼 콘텐츠 상단이 헤더에 살짝 가려짐) */
.about-page main{
  padding-top:calc(var(--about-header-h, 3.4em) + var(--grid-gutter) - .2em);
}
/* 13차: 헤더가 투명해진 만큼, 히어로 섹션만 main의 padding-top을 정확히
   상쇄해 화면 맨 위(top:0)까지 이미지가 꽉 차게 올라가도록 함 — 헤더는
   fixed + z-index:50이라 이미지 위에 그대로 겹쳐서 노출됨(다른 섹션은
   main의 padding-top을 그대로 유지해 헤더에 가려지지 않게 함).
   22차: 위 padding-top 공식이 바뀌었으므로 상쇄값도 동일하게 맞춤 */
#heroSection{
  margin-top:calc(-1 * (var(--about-header-h, 3.4em) + var(--grid-gutter) - .2em));
}

/* ---------- 공통 타이포 — 전부 --font-kr/--font-en 토큰만 사용,
   font-family는 절대 새로 만들지 않고 크기(clamp)·굵기·자간만 조정 ---------- */
.about-display-kr{
  /* 10차: 9차의 확대폭(약 1.7배)이 너무 크다는 피드백 — 기존(8차 이전)
     대비 약 1.3배 수준으로 다시 조정(1440px 기준 100.8px → 약 131px) */
  font:900 normal clamp(52px,9.1vw,156px)/1.02 var(--font-kr);
  letter-spacing:-.03em;
}
.about-display-en{
  /* 10차: KR 타이틀과 동일한 비율(약 1.3배)로 축소 조정 */
  font:800 normal clamp(47px,8.32vw,146px)/1.04 var(--font-en);
  letter-spacing:-.02em;
}
.about-copy{
  font:500 normal clamp(15px,1.15vw,19px)/1.75 var(--font-kr);
  opacity:.85;
}
.about-section-intro{
  max-width:34em;
  /* 9차: 타이틀이 커진 만큼 위아래 여백은 기존 대비 절반 수준으로 축소 */
  margin-top:clamp(8px,1vw,14px);
  margin-bottom:clamp(20px,2.5vw,32px);
}

/* 대형 타이틀 바로 아래 이어지는 서브 본문/리스트 중 "Archives"처럼 타이틀은
   왼쪽에 두고 본문이 가로 중앙(약 50%) 지점부터 시작하는 케이스 전용
   래퍼(BMD "Selected Clients and Collaborators" 구조). "Our Services"는
   BMD 레퍼런스상 타이틀과 같은 왼쪽 정렬이라 이 래퍼를 쓰지 않음 */
.about-offset-content{
  margin-top:clamp(24px,3vw,36px);
}
@media (min-width:901px){
  .about-offset-content{
    margin-left:50%;
    padding-left:clamp(24px,3vw,48px);
  }
}
.about-offset-content .about-section-intro{
  margin-top:0;
}

/* ---------- 히어로/아웃트로 공용: 스크롤량에 비례해 프레임 너비(70%→100%,
   1201px+ 큰 데스크톱에서만)와 사진 scale(1→1.2)이 커지는 Parallax 확대.
   js/about-reveal.js의 initScrollZoom()이 #heroFrame/#heroImg,
   #outroFrame/#outroVideo에 인라인 style로 값을 갱신함. 섹션 자체를 세로로
   길게(220vh) 잡아 스크롤 여유를 만들고, 안쪽을 position:sticky로 고정해
   그 구간 동안 확대 애니메이션이 재생되게 함.
   28차: 대표님이 "가로 1184 값에서 스크롤 진입 초반의 70% 박스 상태가
   답답하고 사진 위아래 여백도 과하다"고 지적 — 처음엔 모든 데스크톱
   너비에서 항상 100% 고정으로 바꿨었음.
   29차: "2560(큰 모니터)에서는 원래(70%→100% 스크롤 확대)대로 유지돼야
   하는데 왜 2560도 영향을 받냐"는 재지적 — 보편적인 태블릿 사이즈
   (901~1200px)까지만 100% 고정하고, 그보다 큰 데스크톱(1201px+)은 원래의
   70%→100% 스크롤 연동 확대로 되돌림. 이 분기는 CSS가 아니라
   js/about-reveal.js의 initScrollZoom()이 window.innerWidth를 매번 체크해서
   처리(아래 기본값 70%는 JS 실행 전/reduced-motion 환경의 기본 상태) ---------- */
.about-parallax{
  position:relative;
  height:220vh;
}
.about-parallax-pin{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--color-blanc);
}
.about-parallax-frame{
  width:70%;
  aspect-ratio:16/9;
  overflow:hidden;
}
/* 25차: 히어로에 정지 사진 대신 영상(video)을 넣을 수 있도록 img와 동일한
   규칙을 video에도 그대로 적용 — 인덱스 페이지 b2/b3 박스의 배경 영상과
   동일한 패턴(autoplay+muted+loop+playsinline, object-fit:cover) */
.about-parallax-frame img,
.about-parallax-frame video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  /* 27차: 히어로 배경 영상만 방향을 다시 뒤집음 — 15차 때 about.html
     전체를 "기본 컬러 → 호버 흑백"으로 통일했었는데, 히어로 영상은
     대표님이 "처음엔 톤다운된 흑백, 마우스 오버 시 컬러가 드러나야
     한다"고 재요청 — 이 요소(.about-parallax-frame, 히어로 전용)만
     기본 흑백 → 호버 컬러로 되돌림. Archives 카드/Ko Yoonhoo 사진 등
     about.html의 다른 이미지들은 기존 규칙(기본 컬러 → 호버 흑백)
     그대로 유지 */
  filter:grayscale(1);
  transition:filter .5s ease;
}
.about-parallax-frame:hover img,
.about-parallax-frame:hover video{
  filter:grayscale(0);
}
@media (prefers-reduced-motion:reduce){
  .about-parallax{ height:auto; }
  .about-parallax-pin{ position:relative; height:auto; padding-block:10vh; }
  .about-parallax-frame{ width:100%; }
  .about-parallax-frame img,
  .about-parallax-frame video{ transform:none !important; }
}
/* 27차: OUTRO가 이미지 슬라이드 갤러리를 폐지하고 다시 히어로와 동일한
   .about-parallax 구조를 재사용(대표님 요청: "히어로bg처럼 동일하게") —
   .about-outro 전용 클래스는 더 이상 사용하지 않음(section에서 제거됨).
   데스크톱은 히어로와 완전히 동일(위 .about-parallax* 공용 규칙 그대로
   적용, 별도 규칙 불필요). 모바일 전용 차이는 아래 반응형(900px 이하)
   섹션의 #outroSection 규칙 참고. */

/* ---------- SECTION 2: STATEMENT & NUMBERS — 좌우 50/50 비대칭 그리드 ---------- */
.about-statement{
  /* 9차: 타이틀 확대에 맞춰 상하 여백 절반으로 축소.
     21차: 아래쪽(→월간 나눔 시공 타이틀)만 Ko Yoonhoo 타이틀과 동일한
     방식으로 대폭 축소 — 위쪽(헤더→가나다하우스 타이틀)은 그대로 유지 */
  padding-top:clamp(50px,6vw,100px);
  padding-bottom:clamp(20px,2.5vw,40px);
}
.about-statement-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,88px);
}
.about-statement-left .about-copy{
  /* 12차: 폰트 스타일은 이제 이 페이지 전체 한글 본문 텍스트의 기준이 된
     Ko Yoonhoo 본문 스타일(=수정 없는 기본 .about-copy)과 100% 동일하게
     맞추기 위해 별도 font/opacity 오버라이드를 제거(기본값을 그대로 사용).
     max-width만 화면이 가장 넓을 때 "…지키는" 다음 줄에서 "전문…"으로
     자연스럽게 넘어가도록 실측해 지정 */
  max-width:52.5em;
  margin-top:clamp(24px,3vw,36px);
}
.about-statement-right{
  display:flex;
  flex-direction:column;
}
.about-stat{
  padding-block:clamp(32px,4.4vw,56px);
}
.about-stat:first-child{ padding-top:0; }
/* 2026-07-29: 대표님이 "가나다하우스 옆 4,000+ 시공 경력 쪽 라인이 두껍다"고
   지적 — 이 구분선만 사이트 공용 --line(2px) 대신 더 얇은 값을 직접 지정
   (전역 토큰을 바꾸면 다른 페이지의 모든 헤어라인에 영향이 가므로 로컬
   오버라이드로 처리) */
.about-stat + .about-stat{
  border-top:1px solid var(--color-noir);
}
.about-stat-num{
  font:800 normal clamp(26px,2.4vw,40px)/1.15 var(--font-en);
  letter-spacing:-.02em;
  margin-bottom:.5em;
}
/* 26차: 슬롯머신처럼 숫자가 굴러가는 동안 자릿수 폭이 바뀌어 다른 글자가
   미세하게 들썩이지 않도록 숫자 폭을 고정(tabular-nums) */
.about-stat-counter{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  min-width:1ch;
}
.about-stat-desc{
  /* 12차: 페이지 전체 한글 본문 텍스트 통일 — Ko Yoonhoo 본문과 동일한
     기본 .about-copy 스타일 그대로 사용(별도 font/opacity 오버라이드 삭제) */
  font:500 normal clamp(15px,1.15vw,19px)/1.75 var(--font-kr);
  opacity:.85;
  max-width:32em;
}

/* ---------- SECTION 3: MONTHLY SOCIAL CONTRIBUTION ARCHIVES ----------
   11차: 옛 Our Services 독립 섹션(대형 타이틀+가로 스크롤 드래그 갤러리)이
   폐지되면서, 그 갤러리 컴포넌트가 이 섹션 하단으로 이관됨. 타이틀 아래
   서브 텍스트(.about-archive-content) → 나눔 시공 기록 카드 갤러리
   (.about-archive-gallery) 순서로 배치. js/about-reveal.js의
   initDragScroll()이 마우스 클릭+드래그 스크롤을 지원(터치/트랙패드는
   브라우저 기본 동작). 사진 흑백↔컬러 호버는 사이트 기존 work-gallery-photo
   컨벤션 그대로 유지 ---------- */
.about-archive{
  /* 9차: 타이틀 확대에 맞춰 상하 여백 절반으로 축소.
     21차: (1) 갤러리(이미지 슬라이드) 아래와 다음 섹션(Ko Yoonhoo) 사이가
     너무 벌어져 보인다는 피드백 — padding-bottom을 대폭 축소해 슬라이드
     바로 아래로 "Ko Yoonhoo" 타이틀이 더 가깝게 붙도록 함(나머지 절반은
     .about-roots의 padding-top에서 축소).
     (2) 위쪽(→월간 나눔 시공 타이틀)도 동일하게 축소 — 바로 위 섹션
     (.about-statement)의 padding-bottom 축소와 합쳐 총 간격을 줄임 */
  padding-top:clamp(20px,2.5vw,40px);
  padding-bottom:clamp(24px,3vw,48px);
}
/* 15차: 한글 단독 타이틀로 정리 — h2가 다시 about-display-kr 폰트를 직접
   가짐(짧은 문구라 별도 max-width 제한 불필요) */
/* 12차: 타이틀 인덴트 위치를 Ko Yoonhoo와 맞교환 — 이제 Archives 타이틀만
   데스크톱에서 오른쪽으로 인덴트(약 15~20vw), Ko Yoonhoo는 좌측 기본선
   (0% 지점)으로 복귀(아래 SECTION 4 참고). 타이틀 자체만 이동하고, 서브
   텍스트(.about-archive-content)는 계속 syncArchiveIndent()가 실측하는
   "Archives"의 "A" 위치를 그대로 따라가며, 갤러리(.about-archive-gallery)는
   기존처럼 인덴트 영향 없이 좌측 기본선 그대로 유지(JS가 h2의 인덴트와
   무관하게 항상 섹션의 실제 콘텐츠 시작점을 기준으로 delta를 계산하도록
   보정함 — js/about-reveal.js 참고) */
@media (min-width:1080px){
  .about-archive-title{ margin-left:clamp(80px,18vw,260px); }
}

/* 9차: 서브 텍스트를 고정 50% 오프셋 대신 "Archives" 단어의 실제 렌더
   X좌표를 그대로 따라가도록 교체. js/about-reveal.js의 syncArchiveIndent()가
   #archivesWordStart span의 위치를 측정해 --about-archive-indent 변수에
   넣어주고, 이 값을 그대로 margin-left로 사용(타이틀 크기·줄바꿈 폭이
   바뀌어도 항상 "A" 시작점과 정렬 유지) */
.about-archive-content{
  /* 18차: 타이틀과 서브텍스트 사이 간격을 기존 대비 2배로 확대(대표님 요청) */
  margin-top:clamp(40px,5vw,64px);
  /* 26차: "이미지 슬라이드와 다르게, 가나다하우스 서브텍스트처럼 좌우
     여백이 잡힌 박스 형태를 유지해야 함" — 11차에 갤러리와 동일하게
     오른쪽 grid-padding을 상쇄했던 게, 모바일에서는 우측 여백이 아예
     없어져 보이는 문제였음. 상쇄 제거하고 섹션 grid-padding을 그대로
     따르는 일반 박스 형태로 되돌림(.about-statement-left .about-copy와
     동일한 동작) */
}
@media (min-width:901px){
  .about-archive-content{
    margin-left:var(--about-archive-indent, 0px);
  }
}
/* 12차: 페이지 전체 한글 본문 텍스트 통일 — Ko Yoonhoo 본문과 동일한
   기본 .about-copy 스타일로 되돌림(11차의 축소 오버라이드 삭제). 원고가
   길어 줄 수는 늘어나지만, 통일된 스타일 유지가 이번 요청의 우선순위 */
.about-archive-content .about-section-intro{
  margin-top:0;
  max-width:54em;
}

/* 11차: 옛 .about-services-gallery/-scroll/-track/.about-service* 구조를
   그대로 옮겨와 이름만 archive로 교체. 카드는 케이스 스터디식 가변 종횡비
   대신 "월별 기록 로그"에 맞게 4:3으로 통일 */
.about-archive-gallery{
  position:relative;
  margin-top:clamp(40px,5vw,64px);
  /* 오른쪽 끝까지 드래그했을 때 마지막 카드 사진이 사이트 기본 좌우
     여백(grid-margin) 없이 화면 진짜 오른쪽 끝(벽면)까지 닿도록, 섹션의
     grid-padding이 만든 오른쪽 여백만 상쇄(왼쪽은 그대로 유지) */
  margin-right:calc(-1 * var(--grid-margin));
}
.about-archive-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.about-archive-scroll::-webkit-scrollbar{ display:none; }
.about-archive-scroll.is-dragging{ cursor:grabbing; }
.about-archive-track{
  display:flex;
  /* 13차: 이미지 비율이 카드마다 제각각이더라도 카드 "상단" 라인이 항상
     수평으로 딱 맞춰지도록 flex-end(하단 정렬) → flex-start(상단 정렬)로
     변경 */
  align-items:flex-start;
  gap:clamp(40px,5vw,130px);
  width:max-content;
  padding-right:clamp(60px,8vw,120px); /* 마지막 카드 뒤에도 여유 공간을 둬서 드래그 시 끝까지 당겨지는 느낌 확보 */
}
/* 13차: 화면이 가장 넓을 때 기준 "카드 2.5개 노출"(카드 2장 온전히 보이고
   3번째 카드는 우측에 살짝 잘려 보임) 비율로 재조율 — 카드 폭을 vw 비례로
   키워서 2.5*카드폭 + 2*카드간격 ≈ 뷰포트 가용 폭(갤러리 우측 여백은 이미
   0으로 상쇄돼 있으므로 대략 100vw - 좌측 grid-margin)이 되도록 실측 후
   비율 산정 */
.about-archive-card{
  display:block;
  flex:0 0 auto;
  width:clamp(300px,35.5vw,920px);
  color:inherit;
  -webkit-user-drag:none;
}
/* 24차: 대표님이 5장을 일부러 서로 다른 비율로 준비 — BMD "Selected
   Clients" 참고처럼 카드 가로 폭만 동일하게 고정하고 세로 높이는 각
   사진의 원본 비율을 그대로 따라가도록(들쑥날쑥) 변경. 기존
   aspect-ratio:4/3 + object-fit:cover는 모든 사진을 강제로 같은 틀에
   잘라 넣어 사진이 다 잘리고 재미없어 보인다는 피드백 — 고정 비율/
   overflow:hidden을 제거하고 img 자체가 가로폭에 맞춰 자연스러운
   높이를 갖도록(height:auto) 둠 */
.about-archive-card-media{
  margin-bottom:1.1em;
}
.about-archive-card-media img{
  width:100%;
  height:auto;
  display:block;
  /* 27차: 히어로에 이어 월간 나눔 시공(Archives)·아웃트로 갤러리도 방향을
     뒤집음 — "전체적으로 다 기본 톤다운(흑백) → 호버 시 컬러"로 통일
     해달라는 요청. 기존 15차의 "기본 컬러 → 호버 흑백"에서 반대로 변경 */
  filter:grayscale(1);
  transition:filter .5s ease;
  pointer-events:none; /* 드래그 중 브라우저 기본 이미지 드래그(고스트 이미지)가 끼어들지 않도록 */
}
/* 27차 재수정: 처음엔 4월 영상의 실제 비율(16:9)을 aspect-ratio로 직접
   박아뒀는데, 대표님이 영상을 올릴 때마다 매번 비율이 달라질 거라 그때
   마다 값을 고쳐야 하는 게 불편하다고 재요청 — "다른 이미지들처럼 가로
   크기만 맞추고 세로는 원본 비율대로 따라오면 된다"는 것. img와 동일하게
   object-fit·aspect-ratio를 모두 빼고 width:100%; height:auto;만 남겨서
   video 파일 자체의 원본 비율을 그대로 따라가도록 함(24차의 "이미지
   들쑥날쑥 갤러리" 방식과 완전히 동일). 다만 img와 달리 video는 메타
   데이터 로드 전엔 브라우저가 원본 크기를 몰라 아주 짧게 기본 크기(2:1)
   로 보였다가 실제 비율로 바뀌는 미세한 순간이 있을 수 있음(로컬/빠른
   환경에서는 거의 체감되지 않음) */
.about-archive-card-media video{
  width:100%;
  height:auto;
  display:block;
  /* 27차: img와 동일하게 기본 흑백 → 호버 컬러로 방향 전환 */
  filter:grayscale(1);
  transition:filter .5s ease;
  pointer-events:none;
}
.about-archive-card:hover .about-archive-card-media img,
.about-archive-card:hover .about-archive-card-media video,
a.about-archive-card:focus-visible .about-archive-card-media img,
a.about-archive-card:focus-visible .about-archive-card-media video{
  filter:grayscale(0);
}
/* 13차: 날짜/제목 두 줄이 서로 다른 폰트 스타일(굵기·크기·opacity)을
   갖던 것을 폐지 — 둘 다 about.html에서 .about-copy 클래스를 함께 붙여
   페이지 기본 한글 서브텍스트 스타일과 100% 동일한 폰트 크기·굵기·
   자간·opacity를 그대로 상속받게 함. 여기서는 카드 안에서의
   줄 간격(margin)만 지정.
   20차: 다만 행간(line-height)만은 예외 — 본문(.about-copy)의 1.75는
   흐르는 문단용이라 날짜/제목처럼 짧게 끊어진 한 줄짜리 라벨 텍스트에는
   위아래 여백이 과하게 떠 보임. 페이지 내 다른 짧은 라벨성 텍스트
   (.about-roots-lead 등)처럼 촘촘한 행간으로 좁혀 카드 안에서 사진 바로
   아래 날짜·제목이 더 밀착되어 보이도록 함 */
.about-archive-card-date{
  line-height:1.3;
  margin-bottom:.4em;
}
.about-archive-card-title{
  line-height:1.3;
  margin-bottom:0;
}
/* 아직 실제 포스팅이 없는 달(2월~5월) — 클릭 불가 표시로 제목만 더 옅게,
   날짜는 그대로 선명하게 유지 */
.about-archive-card.is-static .about-archive-card-title{ opacity:.55; }
.about-archive-card.is-static .about-archive-card-title em{
  font-style:normal;
  opacity:.85;
}
@media (prefers-reduced-motion:reduce){
  .about-archive-card-media img,
  .about-archive-card-media video,
  .about-parallax-frame img,
  .about-parallax-frame video,
  .about-roots-photo img,
  .about-roots-book video{ transition:none; }
}

/* ---------- SECTION 4: KO YOONHOO — BMD 원본처럼 사진과 본문이 나란히
   놓이는 좌우 그리드. 상단은 본문(좌)+프로필 사진(우, 상단 정렬), 하단은
   저서 사진(좌)+본문(우, 수직 중앙 정렬) — 프로필/저서 실사진이 없어
   플레이스홀더 박스로 표시 ---------- */
.about-roots{
  /* 9차: 타이틀 확대에 맞춰 상하 여백 절반으로 축소(단, Archives→Ko
     Yoonhoo 전환부라 다른 섹션보다는 살짝 더 넉넉하게 유지).
     15차: Ko Yoonhoo 하단(저서 단락)과 바로 아래 OUTRO 사진 사이에
     어정쩡하게 비어 있던 padding-bottom을 거의 0으로 줄여 밀착시킴.
     21차: "Ko Yoonhoo" 영문 타이틀을 바로 위 이미지 슬라이드(Archives
     갤러리) 쪽으로 끌어올려 여백을 줄여달라는 요청 — padding-top을
     대폭 축소(.about-archive의 padding-bottom 축소와 합쳐 총 간격을
     크게 줄임) */
  padding-top:clamp(28px,3.5vw,56px);
  padding-bottom:clamp(0px,1vw,16px);
}
/* 12차: 타이틀 인덴트 위치 맞교환 — Ko Yoonhoo는 이제 인덴트 없이 화면
   맨 좌측 기본 라인(0% 지점)에 밀착, 인덴트는 Archives 타이틀로 이동
   (위 SECTION 3 참고) */
/* 9차: 기존 "1fr 1fr + margin/padding 50% 정밀 보정" 2열 구조를 폐기하고,
   빈 스페이서 컬럼을 포함한 실제 3등분(1fr 1fr 1fr) 그리드로 재작성.
   상단: 1열 빈 공간 / 2열 본문 / 3열 프로필 사진. 하단: 1열 저서 사진 /
   2열 본문+미니링크 / 3열 빈 공간. align-items를 end로 통일해 사진
   하단과 텍스트 하단이 정확히 같은 라인에서 끝나도록 정렬 */
.about-roots-top,
.about-roots-bottom{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:end;
  column-gap:clamp(24px,3vw,48px);
  /* 26차 재수정: 모바일 1열 스택 시(900px 이하 — 이 그리드가 실제로
     세로 스택되는 유일한 구간) "사진→첫 줄" 세로 간격을 Archives 갤러리의
     "사진→날짜(2026.02)" 실측 간격(17.6px = .about-archive-card-media의
     margin-bottom:1.1em, 이 구간에서의 실제 기준 폰트 16px 고정)과
     정확히 같은 값으로 맞춤 — 대표님이 두 스크린샷을 겹쳐서(보라색 여백)
     직접 지정한 간격. 900px 초과 시엔 사진·본문이 좌우 배치로 바뀌어
     row-gap이 시각적으로 쓰이지 않으므로 고정값으로 충분 */
  row-gap:17.6px;
  margin-top:clamp(32px,4vw,60px);
}
.about-roots-spacer{ /* 3등분 그리드의 빈 컬럼 — 시각적 여백 전용, 내용 없음 */ }
.about-roots-text{ max-width:30em; }
/* BMD 레퍼런스 확인 결과 — 사진이 우측에 있는 상단 블록은 본문이
   오른쪽 정렬(사진 쪽으로 시선이 모이는 효과)되어야 자연스러움. 하단
   블록은 사진이 좌측이라 본문은 기본 왼쪽 정렬 유지.
   10차: text-align만으로는 글자만 박스 안에서 오른쪽으로 붙을 뿐, 박스
   자체는 max-width로 좁아진 채 그리드 컬럼 왼쪽에 그대로 남아있어서
   사진과의 간격이 하단 블록(책 사진↔본문, 48px)보다 훨씬 넓게(약 215px)
   벌어져 있었음 — justify-self:end로 박스 자체를 컬럼 오른쪽 끝에
   붙여서 두 블록의 "사진↔본문" 간격이 동일해지도록 수정 */
.about-roots-top .about-roots-text{ text-align:right; justify-self:end; }

/* 17차: 대표 프로필 사진(profile.jpg) 박스 — 16차에서 세로형(3:4)으로
   바꿨다가, 대표님이 다시 가로형 4:3으로 되돌려 달라고 요청해 원복 */
.about-roots-photo{ aspect-ratio:4/3; overflow:hidden; }
/* 31차: .about-roots-book은 book.jpg(고정 3:4 크롭 박스) 대신 book.mp4
   영상으로 교체되며 aspect-ratio/overflow:hidden 제거 — 아래 video 규칙의
   width:100%; height:auto;가 원본 비율을 그대로 결정하도록 함 */
/* 15차: 대표 프로필 사진 — 지금은 플레이스홀더 박스뿐이라 시각적
   변화는 없지만, 실제 사진(profile.jpg)이 <img>로 교체됐을 때
   바로 페이지 전체와 동일한 호버 인터랙션이 적용되도록 미리 규칙만 준비.
   27차: 히어로·Archives·아웃트로와 통일해 기본 흑백 → 호버 시 0.5s로
   부드럽게 컬러로 전환되는 방향으로 변경(기존 15차의 반대 방향에서 재변경) */
.about-roots-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1);
  transition:filter .5s ease;
}
/* 31차: Archives 갤러리(24·27차)와 동일한 방식 — book.mp4는 매번 원본
   비율이 달라질 수 있으므로 aspect-ratio를 고정하지 않고 width:100%;
   height:auto;만 둬서 영상 자체의 원본 비율을 그대로 따라가도록 함
   ("확장상관없이 내가 올리는 원본 비율이 나타나면 좋겠어, 샘플로
   올렸던 정해진 비율 말고" — 대표님 요청) */
.about-roots-book video{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(1);
  transition:filter .5s ease;
}
.about-roots-photo:hover img,
.about-roots-book:hover video{
  filter:grayscale(0);
}
.about-roots-lead{
  font:700 normal clamp(18px,1.6vw,24px)/1.4 var(--font-kr);
  letter-spacing:-.01em;
  /* 26차 재수정: "첫 줄(리드 문구) → 본문" 간격을 Archives 갤러리의
     "날짜(2026.02) → 캡션" 실측 간격(6px = .about-archive-card-date의
     margin-bottom:.4em, 이 구간 기준 폰트 15px)과 동일한 값으로 맞춤 —
     리드 문구 자체 폰트(18~24px)의 em이 아닌 고정 clamp로 지정해 큰
     폰트 크기에 비례해 벌어지지 않도록 함(대표님이 두 스크린샷을
     겹쳐서 지정한 파란색 박스 간격) */
  margin-bottom:clamp(6px,.46vw,7.6px);
}

.about-roots-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2em;
  background:rgba(23,23,23,.06);
  border:1px dashed rgba(23,23,23,.35);
}
.about-roots-placeholder .t-big-text{
  opacity:.6;
  line-height:1.6;
}

/* BMD "Read: Incomplete Manifesto for Growth." 스타일 — 밑줄 텍스트
   링크 3개를 세로로 나열. 확정 URL이 없는 항목(Read)은 밑줄 대신 점선
   테두리로 비활성 표시하고 "확인 필요"를 덧붙여 지어내지 않음.
   14차: 본문 문단과 이 링크 구역 사이를 나누던 회색 구분선(border-top)을
   완전히 삭제 — 여백(margin-top)만으로 구역을 구분 */
/* 18차: 링크 3개(Watch/Read/Visit)를 flex gap(.7em)으로 따로 띄우던 것을
   제거 — 각 링크가 이미 바로 위 본문과 동일한 line-height:1.75(아래
   .about-roots-link 참고)를 갖고 있으므로, gap을 0으로 두면 본문 문단의
   줄 간격(행간)과 링크 목록의 줄 간격이 완전히 동일한 리듬으로 이어짐.
   21차 1차 시도: margin-top을 본문 line-height 계산식(font-size×1.75)
   값 그대로 넣었더니 오히려 두 배로 벌어짐 — line-height는 이미 각 줄
   위아래에 반씩("half-leading") 포함되어 있어서, 문단의 마지막 줄과
   Watch 줄 사이에는 [문단의 half-leading] + [margin-top] + [Watch의
   half-leading]이 합산되기 때문. 문단 내부 줄 간격과 완전히 동일한
   리듬을 만들려면 반대로 margin-top을 0으로 둬서 두 half-leading만
   남게 해야 함(내부 줄도 정확히 이 방식으로 간격이 생김) */
.about-roots-links{
  margin-top:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
/* 14차: 링크 텍스트 스타일을 바로 위 본문 한글 텍스트(.about-copy)와
   100% 동일하게 통일 — font-family도 var(--font-en) → var(--font-kr)로
   교체(라벨+한글이 섞인 텍스트라 한글 폰트 토큰이 더 일관됨).
   30차(8차 수정): 대표님 지침 — "링크 부분을 왜 작게/회색 등으로
   차별화하는지 모르겠다, 스타일값은 모두 같아야 하고 마우스 오버 시
   스르륵(부드러운 페이드) 효과면 충분하다" — 밑줄(text-decoration)을
   완전히 제거하고 opacity 트랜지션 기반 호버 페이드로 교체. contact.html
   Official Channels가 이 클래스를 그대로 공유하므로 두 페이지 모두에
   일관되게 적용됨 */
.about-roots-link{
  display:inline-block;
  width:fit-content;
  max-width:100%;
  font:500 normal clamp(15px,1.15vw,19px)/1.75 var(--font-kr);
  opacity:.85;
  color:inherit;
  text-decoration:none;
  transition:opacity .35s ease;
}
a.about-roots-link:hover,
a.about-roots-link:focus-visible{
  opacity:.5;
}
/* 19차: "Read: ..." 항목이 다른 두 줄(Watch/Visit)보다 길어 중간에 다시
   줄바꿈되던 것을 방지 — 데스크톱(901px+)에서는 한 줄로 강제하고, 컬럼
   폭보다 넘치는 만큼은 우측의 빈 스페이서 컬럼 쪽으로 자연스럽게 흘러
   넘치도록 둠(그 옆엔 실제 콘텐츠가 없어 시각적으로 문제 없음) */
@media (min-width:901px){
  .about-roots-link{
    white-space:nowrap;
    max-width:none;
  }
}
.about-roots-link.is-static{
  text-decoration:none;
  border-bottom:1px dashed rgba(23,23,23,.4);
  opacity:.75;
}
.about-roots-link em{
  /* 14차: 부모(.about-roots-link)가 이미 var(--font-kr) 사용 — 중복 지정 제거 */
  font-style:normal;
  opacity:.7;
  margin-left:.4em;
}

/* ---------- 스크롤 리빌 ---------- */
.reveal-up{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal-up.is-visible{
  opacity:1;
  transform:translateY(0);
}
/* 12차: .about-copy(본문 서브텍스트)가 reveal-up을 자기 자신에게 직접 들고
   있는 경우(.about-statement-left .about-copy, .about-archive-content
   .about-section-intro), 위 .reveal-up.is-visible{opacity:1}과 캐스케이드가
   충돌해 텍스트 opacity가 .85가 아닌 1로 렌더링되는 문제 수정 — 3클래스
   선택자로 특이도를 높여 항상 .about-copy 고유의 opacity(.85)가 최종
   적용되도록 함 */
.about-copy.reveal-up.is-visible{
  opacity:.85;
}
.about-statement-right .about-stat:nth-child(1){ transition-delay:0s; }
.about-statement-right .about-stat:nth-child(2){ transition-delay:.15s; }
.about-statement-right .about-stat:nth-child(3){ transition-delay:.3s; }
.about-statement-right .about-stat:nth-child(4){ transition-delay:.45s; }

@media (prefers-reduced-motion:reduce){
  .reveal-up{ transition:none; opacity:1; transform:none; }
}

/* ---------- 13차: 텍스트 → 이미지 시차(Parallax) 스크롤 리빌 ----------
   Archives/Ko Yoonhoo 섹션처럼 "설명 텍스트 + 이미지"가 짝을 이루는
   구간 전용. 섹션이 뷰포트에 들어오면 텍스트(.reveal-text)가 먼저
   아래→위로 슬라이드 페이드인되고, 이미지(.reveal-media)는 그보다 한
   박자 늦게(transition-delay) 위→아래 방향으로 펼쳐지듯 슬라이드
   페이드인되어 입체적인 시차 효과를 만듦. .about-stat과 동일하게
   IntersectionObserver를 unobserve하지 않고 계속 관찰(js의
   initRepeatingReveal() 재사용)해서, 스크롤을 오르내릴 때마다 매번
   재반응(반복 트리거)함 */
.reveal-text{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal-text.is-visible{
  opacity:1;
  transform:translateY(0);
}
/* .reveal-up과 동일한 이유(캐스케이드 특이도 충돌)로, .about-copy를 직접
   들고 있는 .reveal-text 요소(Archives 서브 텍스트)가 opacity:1로
   튀지 않도록 3클래스 선택자로 고정 */
.about-copy.reveal-text.is-visible{
  opacity:.85;
}
.reveal-media{
  opacity:0;
  transform:translateY(-36px);
  transition:opacity .9s ease .25s, transform .9s cubic-bezier(.16,1,.3,1) .25s;
}
.reveal-media.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  .reveal-text, .reveal-media{ transition:none; opacity:1; transform:none; }
}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .about-statement-grid{ grid-template-columns:1fr; }
  .about-archive-track{ gap:20px; }
  .about-archive-card{ width:72vw; }
  .about-roots-top,
  .about-roots-bottom{ grid-template-columns:1fr; }
  /* 모바일에서는 좌우 배치 대신 세로 스택 — 빈 스페이서 컬럼은 완전히
     숨기고, 항상 사진이 먼저·본문이 뒤에 오도록 top 블록만 순서를
     뒤집음(bottom은 이미 사진이 먼저) */
  .about-roots-spacer{ display:none; }
  .about-roots-top .about-roots-photo{ order:-1; }
  .about-roots-text{ max-width:none; }
  .about-roots-top .about-roots-text{ text-align:left; justify-self:stretch; }

  /* 15차: 모바일(900px 이하)에서는 HERO 메인 사진의 스크롤 연동 확대
     패러랙스 모션을 완전히 제거 — 세로로 긴(220vh) 스크롤 연동 섹션
     대신 사진 한 장이 가로 100% 너비로 화면에 꽉 차게(w-full
     object-cover object-center) 정적으로 노출되도록 단순화.
     js/about-reveal.js의 initScrollZoom()이 계속 inline style로 width/
     transform을 갱신하려 하지만, 아래 !important로 항상 덮어써서 무력화.
     16차: 가로형(4:3) 대신 세로 비율(3:4)로 변경 — 사진의 중앙 부분
     위주로 크롭되도록(object-position:center) */
  #heroSection{
    height:auto; /* 220vh 스크롤 연동 높이 해제(margin-top의 헤더 높이 상쇄는 그대로 유지) */
  }
  #heroSection .about-parallax-pin{
    position:relative;
    height:auto;
  }
  #heroSection .about-parallax-frame{
    width:100% !important;
    aspect-ratio:3/4;
  }
  #heroSection .about-parallax-frame img,
  #heroSection .about-parallax-frame video{
    transform:none !important;
    object-position:center;
  }

  /* 27차: OUTRO도 히어로와 동일하게 모바일에서 스크롤 연동 확대(220vh)를
     해제하지만, 히어로(좌우 풀블리드 3:4)와는 다르게 대표님 요청대로
     좌우 여백을 주고(그리드 마진, .grid-padding과 동일한 값) Ko Yoonhoo
     프로필 사진(.about-roots-photo)과 동일한 4:3 비율로 줄어들게 함 */
  #outroSection{
    height:auto;
    padding-inline:var(--grid-margin);
  }
  #outroSection .about-parallax-pin{
    position:relative;
    height:auto;
  }
  #outroSection .about-parallax-frame{
    width:100%;
    aspect-ratio:4/3;
  }
  #outroSection .about-parallax-frame img,
  #outroSection .about-parallax-frame video{
    transform:none !important;
    object-position:center;
  }

  /* 32차: 901~1200px 구간과 동일한 문제가 900px 이하(세로 스택 레이아웃)
     에서도 발견됨 — book.mp4가 담긴 .about-roots-bottom 블록 끝(Watch/
     Read/Visit 링크)과 바로 아래 아웃트로 영상 사이 여백이 기본값
     (clamp(0px,1vw,16px), 약 4~9px)이라 너무 좁음. 대표님이 비교 기준으로
     삼은 "본문 텍스트→book.mp4" 여백은 세로 스택 구간에서는 폭에 따라
     변하지 않고 항상 .about-roots-bottom의 margin-top:clamp(32px,4vw,60px)
     값 그대로(900px 이하에서는 사실상 32~36px)이므로, padding-bottom도
     동일한 clamp(32px,4vw,60px)로 맞춰 두 여백을 일치시킴 */
  .about-roots{
    padding-bottom:clamp(32px,4vw,60px);
  }
}

/* 30차: 보편적인 태블릿 사이즈(901~1200px)는 js/about-reveal.js가 프레임
   너비를 항상 100%로 고정하는 구간(29차) — 대표님이 "박스가 커질 때(=
   100% 폭이 됐을 때) 사진 위아래 여백도 줄여달라"고 요청. 히어로는
   헤더에 딱 붙어서 시작하고, 아웃트로는 페이지 맨 바닥에 여백 없이
   붙어야 하므로, 이 구간에서만 aspect-ratio:16/9를 없애고 프레임이 핀
   높이(100vh)를 그대로 채우게 함(영상은 이미 object-fit:cover라 잘림
   없이 꽉 참) — 위아래 여백이 전부 사라짐.
   그 다음, 원래 있던 다음 섹션과의 간격(히어로→Statement의 padding-top)도
   대표님 요청대로 기존 값의 40%만 남기고 60% 축소. 1201px 이상 큰
   데스크톱(2560 등)은 29차에서 "원래대로" 복원하기로 했으므로 이 구간은
   건드리지 않음(기존 70%→100% 스크롤 확대 박스 + 기존 여백 그대로 유지).
   32차: Ko Yoonhoo→아웃트로의 padding-bottom도 원래 이 40% 축소 규칙에
   포함돼 있었는데, book.jpg가 book.mp4(1750x1080 원본 비율 영상)로
   바뀌면서 대표님이 "1198 이하 사이즈에서 제일 아래 영상(아웃트로)과
   book.mp4 사이 여백이 너무 좁다, 프로필 사진 옆 본문 텍스트와 book.mp4
   사이 여백과 동일하게 해달라"고 재요청.
   901~1200px 구간에서 실측한 결과 "본문 텍스트→book.mp4" 여백은
   고정값이 아니라 901px(137px)~1200px(64px) 사이에서 폭이 좁아질수록
   점점 넓어지는 형태(프로필 옆 본문 문단이 좁은 폭에서 줄바꿈이 늘어나
   위 블록 자체가 세로로 길어지기 때문)라, 그 실측치를 그대로 재현하는
   calc(357px - 24.45vw)로 맞춤(901~1198px 5개 지점에서 오차 1px 이내로
   확인). 문단 텍스트 분량이 크게 바뀌면 이 계수도 다시 확인 필요 */
@media (min-width:901px) and (max-width:1200px){
  .about-parallax-frame{
    height:100%;
    aspect-ratio:auto;
  }
  .about-statement{
    padding-top:clamp(20px,2.4vw,40px); /* 기존 clamp(50px,6vw,100px)의 40% */
  }
  .about-roots{
    padding-bottom:clamp(32px,calc(357px - 24.45vw),140px);
  }
}