/* ============================================================
   about.css — About 계열 서브페이지 스타일

   ★ 원칙: 정본 CSS 를 **그대로** 옮긴다. 다시 쓰지 않는다.
     아래 규칙은 about-brand-story-full.html 의 <style> 에서 기계적으로 추출한 것이다.
     값·단위·순서를 임의로 바꾸지 않는다. 바꾸면 프론트가 정본과 달라진다.

   테마가 이미 갖고 있어 여기서 다루지 않는 것:
     .wf-img · .wrap-n · .tC (haneul.css) / .h-int · .h-blk · .bd-lg (mood-v3.css)

   ⚠ 정본과 딱 하나 다른 점 — 진입 연출의 시작 조건
     정본은 `animation: rvFade … both` 를 CSS 기본값으로 건다. 그대로 두면
     Breakdance 편집기에서 **시작 프레임(투명)에 갇혀 블럭이 사라진다**(체크리스트 §4-1).
     → 애니메이션만 `.is-js` 뒤로 옮겼다. about.js 가 프론트에서만 그 클래스를 붙인다.
       지속시간·딜레이·이징은 정본 값 그대로다.
   ============================================================ */

@keyframes rvFade { from { opacity: 0; } to { opacity: 1; } }

/* ── 비율 프레임 (정본 공용) ── */
.wf-219 { aspect-ratio: 21/9; }
.wf-45  { aspect-ratio: 4/5; }

/* ── 페이지 타이틀 ── */
.p1-hero { padding: clamp(110px,90px + 5vw,190px) 24px clamp(56px,44px + 2vw,80px); text-align: center; background: #FBFAF8; }
.p1-title { font-size: clamp(38px,28px + 2.6vw,68px); line-height: 1.16; letter-spacing: -0.02em; color: #111; font-weight: 400; }
.p1-title strong { font-weight: 700; }
.p1-title .p1-en1 { font-size: clamp(64px,calc(120 / 1440 * 100vw),156px); line-height: 1.02; letter-spacing: -1px; margin-bottom: 0; }
.p1-en2 { display: block; font-family: 'Noto Sans','Noto Sans KR',sans-serif; font-size: clamp(12px,calc(18 / 1440 * 100vw),26px); font-weight: 300; line-height: 1.4; letter-spacing: 0.01em; color: #3a3a3a; margin-top: 0; }
.p1-en2 .p1-ko5 { font-weight: 500; color: #111; font-size: inherit; }

/* ── 전폭 대형 이미지 ── */
.p1-himg { max-width: 1472px; position: relative; }
.p1-himg .wf-219 { overflow: hidden; }
.p1-himg .wf-219 img { will-change: transform,opacity,filter; }

/* ── 본문 블록 ── */
.bs1-s1 { padding: clamp(110px,88px + 4vw,168px) 0 0; }
.bs1-s1 .bd-lg { margin-top: 16px; }
.bs1-orn { width: 1px; height: 56px; background: #C6C6C6; margin: clamp(64px,52px + 2vw,96px) auto; }
.bs1-s2 { padding-bottom: clamp(100px,80px + 3vw,150px); }
.bs1-s2 .p1-duo { margin-top: clamp(44px,36px + 1.5vw,64px); }

/* ── 이미지 2단 쌍 ── */
.p1-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(36px,28px + 1.5vw,52px); }
.p1-duo .wf-img { background: none; }

/* ── 클로징 문구 ── */
.p1-close { padding: clamp(90px,70px + 4vw,150px) 0; }
.p1-close-en { display: block; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: #9a9a9a; font-weight: 500; margin-bottom: 20px; }
.p1-close-h { color: #111; font-size: clamp(26px,22px + 1.2vw,40px); line-height: 1.3; letter-spacing: -0.01em; font-weight: 400; }
.p1-close-h strong { font-weight: 700; }

@media (max-width: 768px) {
  .p1-duo { grid-template-columns: 1fr; }
  .p1-hero { padding-top: 88px; }
  .p1-ko5 { font-size: 1.5em; }
  .p1-himg { max-width: none; padding-left: 0; padding-right: 0; }
  .p1-himg .wf-219 { aspect-ratio: 14/9; }
}

/* ── 진입 연출 ──
   정본은 아래 애니메이션을 CSS 기본값으로 건다. 그대로 두면 Breakdance 편집기에서
   시작 프레임(투명)에 갇혀 블럭이 사라진다(체크리스트 §5-1).
   → **시작 조건만** `.is-js` 뒤로 옮겼다. 지속시간·딜레이·이징은 정본 값 그대로다(§0-5).
     about.js 가 프론트에서만 그 클래스를 붙인다. */

.p1-hero.is-js  .p1-title      { animation: aboutRise 1.1s cubic-bezier(0.22,0.61,0.36,1) .25s both; }
.p1-himg.is-js  .wf-219        { animation: rvFade 1.05s ease 0.39s both; }
.bs1-s1.is-js   .wrap-n        { animation: rvFade 1.05s ease 0.59s both; }
.bs1-orn.is-js                 { animation: rvFade 1.05s ease 0.8s both; }
.bs1-s2.is-js   .h-blk         { animation: rvFade 1.05s ease 0.94s both; }
.p1-close.is-js .p1-close-h    { animation: rvFade 1.05s ease 1.29s both; }

/* 하단 2컷 — 스크롤 진입 시 .p1-duo 에 .in 이 붙어 순차 등장 (두 번째는 0.5s 지연) */
.p1-duo.is-js .dm-1 { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.22,0.61,0.36,1), transform 0.9s cubic-bezier(0.22,0.61,0.36,1); }
.p1-duo.is-js .dm-2 { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.5s, transform 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.5s; }
.p1-duo.is-js.in .dm-1,
.p1-duo.is-js.in .dm-2 { opacity: 1; transform: none; }

/* 히어로 이미지 스크롤 패럴렉스는 about.js 가 inline transform 으로 구동한다(정본 동일). */
.p1-himg .wf-219 img { will-change: transform, opacity, filter; }

@media (prefers-reduced-motion: reduce) {
  .p1-hero.is-js .p1-title,
  .p1-himg.is-js .wf-219,
  .bs1-s1.is-js .wrap-n,
  .bs1-orn.is-js,
  .bs1-s2.is-js .h-blk,
  .p1-close.is-js .p1-close-h { animation: none; opacity: 1; }
  .p1-duo.is-js .dm-1,
  .p1-duo.is-js .dm-2 { opacity: 1; transform: none; transition: none; }
}

@keyframes aboutRise { from { opacity: 0; } to { opacity: 1; } }

/* ⚠ 오판 기록: 한때 여기서 `.en-hero`/`.ko-sub` 를 inherit 으로 되돌렸다.
   근거는 "정본 About 에 그 정의가 없다"였는데 **틀렸다** — 정본이 mood-v3.css 를
   `<link>` 로 외부에서 불러온다. 인라인 <style> 만 훑어서 생긴 오판이다.
   → 원본 CSS를 조사할 때는 인라인 <style> 과 <link> 를 **둘 다** 본다(체크리스트 §0-2). */

/* ────────────────────────────────────────────────
   고정 푸터가 본문을 덮는 문제 (체크리스트 §5-5 의 후속)

   정본은 `#pgwrap{position:relative;z-index:1}` 이 본문을 푸터(fixed) 위로 올린다.
   Breakdance 헤더가 테마 header.php 를 대체하면서 #pgwrap 자체가 사라져,
   서브페이지에서 푸터가 본문 위로 올라왔다. Breakdance 래퍼에 같은 역할을 준다.
   ──────────────────────────────────────────────── */
body .breakdance { position: relative; z-index: 1; }