/* ============================================================
   hey.way — About 전용 스타일 (page-content/about.php)
   style.css 의 토큰(--bg, --ink, --accent …)을 그대로 쓰므로 style.css 다음에 로드한다.
   원본: about.html (2026-09-03 전달) 의 "샘플 A — MANIFESTO"(.mf-*) 블록.
   원본 단일 파일에 함께 있던 샘플 B(.bs-*)·롤링 히어로(.hr-*)·전환 스위처(.vswitch/.sprog)·
   `.ftr{padding-bottom}` 은 본문에서 쓰지 않아 반영하지 않는다.
   ============================================================ */

/* ------------------------------------------------------------
   CMS 본문 래퍼 해제 — styles.css 의 `.contents{width:1400px; 배경; padding-bottom:300px}`
   가 전면(100vh) 섹션을 1400px 안에 가둔다. about 페이지에서만 푼다.
   `.contents` 래퍼 자체는 유지한다 — 아래 p 규칙이 그 클래스로 명시도를 얻어
   운영 base.css 의 `.editorOutput p` 를 이긴다.
   ------------------------------------------------------------ */
#wrapper.about .contents {
  width: auto; max-width: none; margin: 0;
  background: none; padding: 0;
}

/* 운영 공통 css 가 `p{font-family:"apple SD gothic neo"…}` 로 본문 p 만 다른 폰트를 준다
   (로컬 preview 에는 없어 운영에서만 드러난다). Pretendard 기준으로 잡은 `.mf-line{max-width:26ch}`
   가 983px 로 좁아져 3줄이 4줄로 접혔다. body 폰트를 그대로 상속시킨다. (2026-09-03 운영 실측) */
#wrapper.about .contents p { font-family: inherit; }

/* 운영은 본문이 .editorOutput 래퍼 안에 들어가고 base.css 가 이 파일보다 나중에 로드돼
   `.editorOutput p{font-size:13px; padding:3px 0}` 가 같은 명시도의 p 규칙을 이긴다
   (2026-09-02 운영 실측). 본문 p 는 모두 `.contents` 를 끼워 (0,2,1) 로 올린다. */

/* ============================================================
   샘플 A — MANIFESTO
   ============================================================ */

/* 히어로 */
.mf-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; }
.mf-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: mfZoom 20s ease-out forwards; }
@keyframes mfZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.mf-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,10,0.96) 6%, rgba(8,8,10,0.35) 50%, rgba(8,8,10,0.7) 100%);
}
.mf-hero .in {
  position: relative; z-index: 3; width: 100%; max-width: var(--max);
  margin: 0 auto; padding: 130px var(--pad) clamp(56px, 8vh, 96px);
}
.mf-kicker {
  font-size: clamp(38px, 8.4vw, 128px); font-weight: 900; line-height: 0.94;
  letter-spacing: -0.05em; margin: 0;
}
.mf-kicker span { display: block; }
.mf-kicker em { font-style: normal; color: var(--accent); }
.contents .mf-hero .lede {
  margin: clamp(26px, 4vh, 44px) 0 0; padding: 0; max-width: none; word-break: keep-all;
  font-size: clamp(15px, 1.5vw, 20px); line-height: 1.8; color: var(--ink-2);
}
.mf-scroll {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 34px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--ink-3);
}
.mf-scroll i {
  width: 34px; height: 1px; background: var(--ink-3); position: relative; overflow: hidden;
}
.mf-scroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  animation: mfSweep 2.2s ease-in-out infinite;
}
@keyframes mfSweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* 문장 한 줄 크게 */
.mf-stage {
  padding: clamp(90px, 16vh, 190px) 0;
  background: var(--bg-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.contents .mf-line {
  margin: 0 auto; padding: 0; max-width: 26ch;
  font-size: clamp(26px, 4.4vw, 58px); font-weight: 800; line-height: 1.34;
  letter-spacing: -0.035em; text-align: center;
  /* '개척합니다' 처럼 한글 단어가 줄 끝에서 쪼개지지 않게 한다 */
  word-break: keep-all;
}
.mf-line b { color: var(--accent); font-weight: 800; }
.mf-num {
  display: block; text-align: center; margin-bottom: 26px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.24em; color: var(--accent);
}

/* 풀블리드 사진 + 겹친 문장 */
.mf-full { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; }
.mf-full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mf-full::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,8,10,0.82) 0%, rgba(8,8,10,0.28) 42%, rgba(8,8,10,0.5) 100%),
    linear-gradient(100deg, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.6) 50%, rgba(8,8,10,0.2) 100%);
}
.mf-full.center::after {
  background:
    linear-gradient(to top, rgba(8,8,10,0.85) 0%, rgba(8,8,10,0.55) 45%, rgba(8,8,10,0.75) 100%),
    rgba(8,8,10,0.35);
}
/* 사진 없이 검은 배경만 쓰는 변형 (히어로와 사진이 겹치지 않게) */
.mf-full.plain { min-height: min(70vh, 620px); background: var(--bg); }
.mf-full.plain::after { display: none; }

.mf-full .in {
  position: relative; z-index: 3; width: 100%; max-width: var(--max);
  margin: 0 auto; padding: clamp(70px, 10vh, 120px) var(--pad);
}
.mf-full h2 {
  margin: 18px 0 0; max-width: 22ch;
  font-size: clamp(28px, 4.6vw, 62px); font-weight: 900; line-height: 1.22; letter-spacing: -0.04em;
}
.mf-full h2 em { font-style: normal; color: var(--accent); }
.mf-full.center .in { text-align: center; }
.mf-full.center .eyebrow { justify-content: center; }
.mf-full.center h2 { max-width: 26ch; margin-inline: auto; }
/* 원본 about.html 은 reveal 스크립트가 h2·p 에 붙이는 `in` 클래스가
   `.mf-full .in{max-width:var(--max)}` 에 걸려 본문이 콘텐츠 폭 전체로 흐른다.
   원본 화면을 기준으로 삼으므로 44ch 로 가두지 않는다. (2026-09-03 원본 실측) */
.contents .mf-full p {
  margin: 24px 0 0; padding: 0; max-width: var(--max); font-size: clamp(14px, 1.2vw, 16.5px);
  line-height: 1.85; color: var(--ink-2);
}
.mf-full.center p { margin-inline: auto; }
.mf-caption {
  position: absolute; right: var(--pad); bottom: 26px; z-index: 4;
  font-size: 10.5px; letter-spacing: 0.1em; color: rgba(255,255,255,0.5);
}

/* 사진 + 텍스트 2단 */
.mf-split {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
.mf-split.rev > .ph { order: 2; }
.mf-split .ph { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3.1; }
.mf-split .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.mf-split .ph:hover img { transform: scale(1.05); }
.mf-split h2 {
  margin: 16px 0 0; font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 900; line-height: 1.28; letter-spacing: -0.04em;
}
.contents .mf-split p { margin: 20px 0 0; padding: 0; font-size: clamp(14px, 1.2vw, 16.5px); line-height: 1.85; color: var(--ink-2); }
@media (max-width: 860px) {
  .mf-split { grid-template-columns: 1fr; }
  .mf-split.rev > .ph { order: 0; }
}

/* 방정식 */
.mf-eq { text-align: center; border-top: 1px solid var(--line-2); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.mf-eq .eyebrow { justify-content: center; }
.mf-eq-rows { display: grid; gap: clamp(14px, 2.2vw, 26px); margin: clamp(34px, 5vw, 60px) 0 0; }
.mf-term {
  font-size: clamp(22px, 3.6vw, 50px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.15;
}
.mf-op { font-size: clamp(18px, 2.4vw, 32px); font-weight: 800; color: var(--accent); }
.mf-eq-result {
  margin-top: clamp(24px, 4vw, 46px); padding-top: clamp(24px, 4vw, 46px);
  border-top: 1px solid var(--line-2);
}
.mf-eq-result b {
  display: block; font-size: clamp(46px, 11vw, 168px); font-weight: 900;
  letter-spacing: -0.055em; line-height: 0.92;
  background: linear-gradient(100deg, #fff 20%, var(--accent) 55%, var(--accent-2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mf-cta { justify-content: center; margin-top: 44px; }