/* =====================================================================
   APMEDIA · About (page/about.php 전용)
   프리뷰 1:1 재구축 : _preview/about_1.html (에디토리얼 인덱스)
   + 확정 수정 4건
     (1) MISSION 마퀴 = 외곽선 stroke (면 채움 아님)
     (2) HOW WE THINK 우측 = 스크롤 따라 교체되는 sticky 이미지
     (3) 다섯 단계 = about_4 진행 게이지 구성 (화이트톤 tint 밴드)
     (4) SERVICES = 1×4 이미지 + caption (caption padding div 래퍼 · 특이도 안전)
   - 클래스 prefix : apmedia-abt-  (contents.css 의 apmedia-about-* 와 미충돌)
   - 토큰 prefix   : --a1-         (테마 CSS 미사용 · 로드순서 무관 안전)
   - 전 값 토큰화(clamp/rgba/hex/px/em) → var() · flex 전용 · 화이트톤
   - 코드 컨벤션   : contents.css 와 동일 1-selector-1-line 컴팩트
   ===================================================================== */

:root {
    /* 색 */
    --a1-bg: #ffffff;
    --a1-white: #ffffff;
    --a1-ink: #141414;
    --a1-red: #ad151a;
    --a1-red-h: #8a1015;
    --a1-red-2: #d21f25;
    --a1-tint: #f5f5f6;
    --a1-dark: #0d0d0f;
    --a1-ink-82: rgba(20, 20, 20, .82);
    --a1-ink-64: rgba(20, 20, 20, .64);
    --a1-ink-46: rgba(20, 20, 20, .46);
    --a1-ink-30: rgba(20, 20, 20, .3);
    --a1-ink-12: rgba(20, 20, 20, .12);
    --a1-ink-06: rgba(20, 20, 20, .06);
    --a1-on-dark: rgba(255, 255, 255, .66);
    --a1-on-dark-82: rgba(255, 255, 255, .82);
    --a1-on-dark-40: rgba(255, 255, 255, .42);
    --a1-on-dark-14: rgba(255, 255, 255, .14);
    --a1-grad-red: linear-gradient(90deg, var(--a1-red), var(--a1-red-2));
    --a1-scrim: linear-gradient(90deg, rgba(8, 8, 9, .9) 0%, rgba(8, 8, 9, .6) 46%, rgba(8, 8, 9, .08) 100%);
    --a1-film-scrim: linear-gradient(180deg, rgba(8, 8, 9, .15) 0%, rgba(8, 8, 9, 0) 30%, rgba(8, 8, 9, .35) 100%);
    /* 폰트 · 이징 */
    --a1-font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --a1-ease: cubic-bezier(.16, 1, .3, 1);
    /* 레이아웃 — 서브 wrap 공통 토큰(--content-width) 단일 소스화 */
    --a1-wrap: var(--content-width);
    --a1-sec: var(--subwrap-py); /* 서브 공통 sub wrap 여백과 단일 값 동기화 (기준 페이지) */
    --a1-hero-minh: 100svh;   /* 주소창 변동에 흔들리지 않게 실제 보이는 높이 기준 */
    --a1-rise-shift: clamp(1rem, 2vw, 2rem);
    --a1-hairline: 1px;
    /* 자간 */
    --a1-ls-tightest: -.04em;
    --a1-ls-tighter: -.035em;
    --a1-ls-tight: -.03em;
    --a1-ls-snug: -.025em;
    --a1-ls-body: -.015em;
    --a1-ls-wide: .02em;
    --a1-ls-loose: .06em;
    --a1-ls-eyebrow: .14em;
    /* 공용 간격 */
    --a1-gap-xs: .35rem;
    --a1-gap-sm: .6rem;
    --a1-gap-md: .7rem;
    --a1-gap-1: 1rem;
    /* HERO */
    --a1-hero-pt: clamp(2rem, 4vw, 4rem);
    --a1-hero-pb: clamp(2.5rem, 5vw, 5rem);
    --a1-hero-gap: var(--subhero-title-gap);
    --a1-hero-ind: clamp(0rem, 10vw, 10rem);
    --a1-hero-lead-basis: clamp(18rem, 40vw, 38rem);
    --a1-hero-foot-gap: clamp(1.5rem, 4vw, 4rem);
    --a1-fs-hero-lead: clamp(1.1875rem, 1vw + .8rem, 1.625rem);
    --a1-hero-video-scrim: linear-gradient(180deg, rgba(8, 8, 9, .58) 0%, rgba(8, 8, 9, .5) 45%, rgba(8, 8, 9, .72) 100%);
    /* MISSION */
    --a1-fs-statement: clamp(2.1875rem, 5.4vw, 5.1875rem);
    --a1-fs-body: clamp(1rem, .6vw + .8rem, 1.1875rem);
    --a1-mission-st-mt: clamp(1.6rem, 3vw, 2.6rem);
    --a1-mission-body-gap: clamp(1.4rem, 3vw, 3.2rem);
    --a1-mission-body-mt: clamp(2.4rem, 4vw, 4rem);
    /* MARQUEE */
    --a1-marquee-py: clamp(1.4rem, 2.4vw, 2.4rem);
    --a1-fs-marquee: clamp(2.1875rem, 6vw, 7rem);
    --a1-marquee-px: clamp(1.4rem, 3vw, 3rem);
    --a1-marquee-dot: clamp(.6rem, 1vw, 1rem);
    --a1-marquee-dur: 36s;
    /* FILM band */
    --a1-film-h: clamp(20rem, 44vw, 42rem);
    /* APPROACH(sticky image) */
    --a1-appr-head-mb: clamp(2.4rem, 4vw, 3.6rem);
    --a1-appr-lead-mt: clamp(1rem, 2vw, 1.8rem);
    --a1-fs-appr-lead: clamp(1.5rem, 1.4vw + .9rem, 2.1875rem);
    --a1-appr-grid-gap: clamp(2rem, 5vw, 6rem);
    --a1-appr-media-w: clamp(19rem, 34vw, 30rem);
    --a1-appr-media-radius: clamp(.5rem, .8vw, .9rem);
    --a1-appr-row-py: clamp(2rem, 3.6vw, 3.2rem);
    --a1-appr-row-gap: clamp(1.4rem, 3vw, 3.4rem);
    --a1-fs-appr-num: clamp(1rem, .8vw + .6rem, 1.375rem);
    --a1-fs-appr-title: clamp(1.6875rem, 2.8vw + .3rem, 3rem);
    --a1-appr-text-gap: clamp(.7rem, 1.4vw, 1.15rem);
    /* SERVICES(1×4) */
    --a1-svc-head-mb: clamp(2.6rem, 4.4vw, 4rem);
    --a1-svc-head-gap: clamp(1.5rem, 2.6vw, 2.4rem);
    --a1-fs-svc-title: clamp(2rem, 4.6vw, 4.625rem);
    --a1-cap-gap: clamp(1.9rem, 2.7vw, 3.2rem);
    --a1-cap-row-gap: clamp(2.8rem, 4.4vw, 4.4rem);
    --a1-cap-media-h: clamp(11rem, 20vw, 16rem);
    --a1-cap-media-radius: clamp(.4rem, .6vw, .7rem);
    --a1-cap-pad: clamp(1.2rem, 1.8vw, 1.7rem);
    --a1-cap-text-gap: clamp(.5rem, 1vw, .85rem);
    --a1-cap-sub-pt: clamp(.2rem, .5vw, .45rem);
    --a1-fs-cap-en: clamp(0.875rem, .4vw + .6rem, 1rem);
    --a1-fs-cap-kr: clamp(1.5rem, 2.2vw + .3rem, 2.5rem);
    --a1-fs-cap-sub: clamp(0.9375rem, .5vw + .74rem, 1.125rem);
    /* PROCESS(gauge) */
    --a1-proc-head-mb: clamp(3rem, 6vw, 4.5rem);
    --a1-proc-head-gap: clamp(1rem, 2vw, 1.6rem);
    --a1-fs-proc-title: clamp(2rem, 4.6vw, 4.625rem);
    --a1-proc-row-py: clamp(1.6rem, 3vw, 2.4rem);
    --a1-proc-top-gap: clamp(.8rem, 2vw, 1.8rem);
    --a1-fs-proc-no: clamp(1.5rem, 2.6vw, 2.1875rem);
    --a1-fs-proc-name: clamp(1.375rem, 2.4vw, 2rem);
    --a1-fs-proc-pct: clamp(1rem, 1.4vw, 1.3125rem);
    --a1-proc-gauge-mt: clamp(1rem, 1.8vw, 1.4rem);
    --a1-proc-gauge-h: clamp(.4rem, .7vw, .55rem);
    /* CTA */
    --a1-cta-minh: clamp(28rem, 50vw, 46rem);
    --a1-cta-py: clamp(4rem, 8vw, 7rem);
    --a1-fs-cta-title: clamp(2rem, 4vw, 3.625rem);
    --a1-cta-desc-mt: clamp(1rem, 1.5vw, 1.5rem);
    --a1-fs-cta-desc: clamp(1rem, .7vw + .8rem, 1.25rem);
    --a1-cta-link-mt: clamp(3.6rem, 6vw, 5.5rem);
    --a1-cta-link-py: clamp(1rem, 1.4vw, 1.3rem);
    --a1-cta-link-px: clamp(2rem, 3vw, 2.8rem);
    --a1-fs-cta-link: clamp(1rem, .6vw + .8rem, 1.125rem);
    --a1-cta-zoom-dur: 18s;
    --a1-cta-zoom-to: 1.08;
}

/* ===== 스코프 리셋 ===== */
#apmediaAbout1 { font-family: var(--a1-font); color: var(--a1-ink); background: var(--a1-bg); line-height: 1.5; letter-spacing: var(--a1-ls-body); word-break: keep-all; -webkit-font-smoothing: antialiased; }
#apmediaAbout1 * { box-sizing: border-box; }
#apmediaAbout1 h1, #apmediaAbout1 h2, #apmediaAbout1 h3, #apmediaAbout1 p { margin: 0; }
#apmediaAbout1 ol { margin: 0; padding: 0; list-style: none; }
#apmediaAbout1 li { margin: 0; }
#apmediaAbout1 em { font-style: normal; color: var(--a1-red); }
#apmediaAbout1 img { display: block; width: 100%; height: 100%; object-fit: cover; }
#apmediaAbout1 a { color: inherit; text-decoration: none; }
/* 공통 wrap = .section-inner (basic.css, width:var(--content-width)) 단일 클래스 */

/* ===== reveal (JS 진행적 향상 — apmedia-abt-js 있을 때만 초기 숨김) ===== */
[data-line] { display: block; overflow: hidden; }
.apmedia-abt-js [data-rise] { opacity: 0; transform: translateY(var(--a1-rise-shift)); transition: opacity .85s var(--a1-ease), transform .85s var(--a1-ease); }
.apmedia-abt-js [data-rise].is-revealed { opacity: 1; transform: none; }
.apmedia-abt-js [data-line] > span { display: block; transform: translateY(108%); transition: transform 1s var(--a1-ease); }
.apmedia-abt-js [data-line].is-revealed > span { transform: none; }

/* ===== 01. HERO — 초대형 타이포 다크 히어로 + 로케이션 배지 ===== */
/* 높이·정렬·패딩은 공통 셸(.apmedia-subhero)이 단일 소스. 여기서는 배경·색만 정의한다. */
.apmedia-abt-hero { background: var(--a1-dark); color: var(--a1-white); }
.apmedia-abt-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.apmedia-abt-hero-bg iframe { position: absolute; top: 50%; left: 50%; width: max(100vw, calc(100vh * 16 / 9)); height: max(100vh, calc(100vw * 9 / 16)); transform: translate(-50%, -50%); border: 0; }
.apmedia-abt-hero-bg::after { content: ''; position: absolute; inset: 0; background: var(--a1-hero-video-scrim); }
.apmedia-abt-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; gap: var(--a1-hero-gap); }
.apmedia-abt-hero-title { font-size: var(--fs-t-display-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--a1-ls-tightest); text-wrap: balance; }
.apmedia-abt-hero-line--ind { padding-left: var(--a1-hero-ind); }
.apmedia-abt-hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--a1-hero-foot-gap); flex-wrap: wrap; }
.apmedia-abt-hero-lead { flex: 1 1 var(--a1-hero-lead-basis); font-size: var(--a1-fs-hero-lead); font-weight: var(--fw-light); line-height: 1.62; color: var(--a1-white); }

/* ===== 02. MISSION — 와이드 스테이트먼트 + 2단 본문 + 키네틱 마퀴(stroke) ===== */
.apmedia-abt-mission { padding: var(--a1-sec) 0 0; }
.apmedia-abt-mission-statement { margin-top: var(--a1-mission-st-mt); font-size: var(--a1-fs-statement); font-weight: 800; line-height: 1.08; letter-spacing: var(--a1-ls-tighter); width: min(20ch, 100%); }
.apmedia-abt-mission-body { display: flex; flex-wrap: wrap; gap: var(--a1-mission-body-gap); margin-top: var(--a1-mission-body-mt); }
.apmedia-abt-mission-body p { flex: 1 1 calc((100% - var(--a1-mission-body-gap)) / 2); font-size: var(--a1-fs-body); line-height: 1.75; color: var(--a1-ink-64); }
.apmedia-abt-marquee { margin-top: var(--a1-sec); padding: var(--a1-marquee-py) 0; overflow: hidden; border-top: var(--a1-hairline) solid var(--a1-ink-12); border-bottom: var(--a1-hairline) solid var(--a1-ink-12); }
.apmedia-abt-marquee-track { display: flex; width: max-content; animation: apmedia-abt-marq var(--a1-marquee-dur) linear infinite; }
.apmedia-abt-marquee-group { display: flex; align-items: center; flex: 0 0 auto; }
.apmedia-abt-marquee-word { font-size: var(--a1-fs-marquee); font-weight: var(--fw-black); letter-spacing: var(--a1-ls-tight); color: var(--a1-ink-12); padding: 0 var(--a1-marquee-px); }
.apmedia-abt-marquee-dot { flex: 0 0 auto; width: var(--a1-marquee-dot); height: var(--a1-marquee-dot); border-radius: 50%; background: var(--a1-red); }
@keyframes apmedia-abt-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== 풀블리드 시네마 밴드 ===== */
.apmedia-abt-film { position: relative; height: var(--a1-film-h); overflow: hidden; }
.apmedia-abt-film::after { content: ""; position: absolute; inset: 0; background: var(--a1-film-scrim); }

/* ===== 03. APPROACH — 헤더 + [넘버 리스트(좌 스크롤) · sticky 이미지(우 교체)] ===== */
.apmedia-abt-approach { padding: var(--a1-sec) 0; }
.apmedia-abt-approach-head { margin-bottom: var(--a1-appr-head-mb); }
.apmedia-abt-approach-lead { margin-top: var(--a1-appr-lead-mt); font-size: var(--a1-fs-appr-lead); font-weight: 600; line-height: 1.4; letter-spacing: var(--a1-ls-snug); color: var(--a1-ink); }
.apmedia-abt-approach-grid { display: flex; align-items: stretch; gap: var(--a1-appr-grid-gap); }
.apmedia-abt-approach-list { flex: 1 1 auto; display: flex; flex-direction: column; }
.apmedia-abt-approach-row { display: flex; align-items: baseline; gap: var(--a1-appr-row-gap); padding: var(--a1-appr-row-py) 0; }
.apmedia-abt-approach-row + .apmedia-abt-approach-row { border-top: var(--a1-hairline) solid var(--a1-ink-12); }
.apmedia-abt-approach-num { flex: 0 0 auto; font-size: var(--a1-fs-appr-title); font-weight: 800; letter-spacing: var(--a1-ls-wide); color: var(--a1-red); }
.apmedia-abt-approach-text { display: flex; flex-direction: column; gap: var(--a1-appr-text-gap); }
.apmedia-abt-approach-title { font-size: var(--a1-fs-appr-title); font-weight: 800; line-height: 1.14; letter-spacing: var(--a1-ls-tight); }
.apmedia-abt-approach-desc { font-size: var(--a1-fs-body); line-height: 1.5; color: var(--a1-ink-64); }
/* 수정(2) : ScrollSmoother(transform) 환경에서 CSS sticky 무효 → 흐름 유지(position:relative)로 폭 예약 + JS(gsap.ticker) translateY 핀 */
.apmedia-abt-approach-media { flex: 0 0 var(--a1-appr-media-w); position: relative; border-radius: var(--a1-appr-media-radius); overflow: hidden; background: var(--a1-tint); }
.apmedia-abt-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--a1-ease); }
.apmedia-abt-shot:first-child { opacity: 1; }
.apmedia-abt-js .apmedia-abt-shot { opacity: 0; }
.apmedia-abt-js .apmedia-abt-shot.is-active { opacity: 1; }

/* ===== 04. SERVICES — 1×4 이미지 + caption ===== */
.apmedia-abt-services { padding: var(--a1-sec) 0; }
.apmedia-abt-services-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--a1-svc-head-gap); margin-bottom: var(--a1-svc-head-mb); }
.apmedia-abt-services-title { font-size: var(--a1-fs-svc-title); font-weight: 800; line-height: 1.1; letter-spacing: var(--a1-ls-tighter); }
.apmedia-abt-cap-list { display: flex; flex-wrap: wrap; gap: var(--a1-cap-row-gap) var(--a1-cap-gap); }
.apmedia-abt-cap { flex: 1 1 calc((100% - 3 * var(--a1-cap-gap)) / 4); display: flex; flex-direction: column; }
.apmedia-abt-cap-media { width: 100%; height: var(--a1-cap-media-h); overflow: hidden; border-radius: var(--a1-cap-media-radius); background: var(--a1-tint); }
.apmedia-abt-cap-media img { transition: transform .8s var(--a1-ease); }
.apmedia-abt-cap-cap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--a1-cap-text-gap); padding: var(--a1-cap-pad) var(--a1-gap-sm) 0; }
.apmedia-abt-cap-en { font-size: var(--a1-fs-cap-en); font-weight: 600; letter-spacing: var(--a1-ls-eyebrow); text-transform: uppercase; color: var(--a1-ink-46); }
.apmedia-abt-cap-kr { font-size: var(--a1-fs-cap-kr); font-weight: 800; line-height: 1.1; letter-spacing: var(--a1-ls-tight); }
.apmedia-abt-cap-sub { padding-top: var(--a1-cap-sub-pt); font-size: var(--a1-fs-cap-sub); line-height: 1.62; color: var(--a1-ink-64); }

/* ===== 05. PROCESS — 다섯 단계 진행 게이지 (about_4 구성 · 화이트톤 tint 밴드) ===== */
.apmedia-abt-process { background: var(--a1-tint); padding: var(--a1-sec) 0; }
.apmedia-abt-process-head { display: flex; flex-direction: column; gap: var(--a1-proc-head-gap); margin-bottom: var(--a1-proc-head-mb); }
.apmedia-abt-process-title { font-size: var(--a1-fs-proc-title); font-weight: 800; line-height: 1.1; letter-spacing: var(--a1-ls-tighter); }
.apmedia-abt-proc-row { padding: var(--a1-proc-row-py) 0; border-top: var(--a1-hairline) solid var(--a1-ink-12); }
.apmedia-abt-proc-row:last-child { border-bottom: var(--a1-hairline) solid var(--a1-ink-12); }
.apmedia-abt-proc-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a1-proc-top-gap); }
.apmedia-abt-proc-no { flex: 0 0 auto; font-size: var(--a1-fs-proc-no); font-weight: 700; line-height: 1; color: var(--a1-red); }
.apmedia-abt-proc-name { flex: 0 0 auto; font-size: var(--a1-fs-proc-name); font-weight: 700; letter-spacing: var(--a1-ls-snug); }
.apmedia-abt-proc-desc { flex: 1 1 auto; font-size: var(--a1-fs-body); line-height: 1.7; color: var(--a1-ink-64); }
.apmedia-abt-proc-pct { flex: 0 0 auto; margin-left: auto; font-size: var(--a1-fs-proc-pct); font-weight: 600; letter-spacing: var(--a1-ls-wide); color: var(--a1-ink-46); }
.apmedia-abt-proc-gauge { margin-top: var(--a1-proc-gauge-mt); height: var(--a1-proc-gauge-h); background: var(--a1-ink-12); border-radius: 100vmax; overflow: hidden; }
.apmedia-abt-proc-fill { width: 100%; height: 100%; background: var(--a1-grad-red); border-radius: 100vmax; transform: scaleX(var(--p, 1)); transform-origin: left; transition: transform 1.3s var(--a1-ease); }
.apmedia-abt-js .apmedia-abt-proc-fill { transform: scaleX(0); }
.apmedia-abt-js .apmedia-abt-proc-row.is-revealed .apmedia-abt-proc-fill { transform: scaleX(var(--p, 1)); }
.apmedia-abt-p1 { --p: .2; }
.apmedia-abt-p2 { --p: .4; }
.apmedia-abt-p3 { --p: .6; }
.apmedia-abt-p4 { --p: .8; }
.apmedia-abt-p5 { --p: 1; }

/* ===== 06. CTA — 풀블리드 다크 이미지 + 좌측 오버레이 ===== */
.apmedia-abt-cta { position: relative; min-height: var(--a1-cta-minh); display: flex; align-items: center; overflow: hidden; background: var(--a1-dark); }
.apmedia-abt-cta-media { position: absolute; inset: 0; }
.apmedia-abt-cta-media img { animation: apmedia-abt-cta-zoom var(--a1-cta-zoom-dur) var(--a1-ease) infinite alternate; }
.apmedia-abt-cta-media::after { content: ""; position: absolute; inset: 0; background: var(--a1-scrim); }
@keyframes apmedia-abt-cta-zoom { from { transform: scale(1); } to { transform: scale(var(--a1-cta-zoom-to)); } }
.apmedia-abt-cta-overlay { position: relative; z-index: 1; padding: var(--a1-cta-py) 0; }
.apmedia-abt-cta-title { font-size: var(--a1-fs-cta-title); font-weight: 800; line-height: 1.04; letter-spacing: var(--a1-ls-tighter); color: var(--a1-white); }
#apmediaAbout1 .apmedia-abt-cta-desc { margin-top: var(--a1-cta-desc-mt); font-size: var(--a1-fs-cta-desc); line-height: 1.65; color: var(--a1-on-dark); }
#apmediaAbout1 .apmedia-abt-cta-link { display: inline-flex; align-items: center; gap: var(--a1-gap-md); margin-top: var(--a1-cta-link-mt); padding: var(--a1-cta-link-py) var(--a1-cta-link-px); border-radius: 100vmax; background: var(--a1-red); color: var(--a1-white); font-size: var(--a1-fs-cta-link); font-weight: 700; letter-spacing: var(--a1-ls-body); transition: background .4s var(--a1-ease), transform .4s var(--a1-ease); }

/* ===== hover ===== */
@media (hover: hover) {
    .apmedia-abt-cap:hover .apmedia-abt-cap-kr em { color: var(--a1-red-h); }
    .apmedia-abt-cap:hover .apmedia-abt-cap-media img { transform: scale(1.05); }
    .apmedia-abt-marquee:hover .apmedia-abt-marquee-track { animation-play-state: paused; }
    .apmedia-abt-cta-link:hover { background: var(--a1-red-h); transform: translateY(-3px); }
}

/* ===== 반응형 ===== */
@media (max-width: 1180px) {
    .apmedia-abt-cap { flex-basis: calc((100% - var(--a1-cap-gap)) / 2); }
}
@media (max-width: 900px) {
    .apmedia-abt-hero-line--ind { padding-left: 0; }
    .apmedia-abt-mission-body p { flex-basis: 100%; }
    .apmedia-abt-approach-grid { flex-direction: column; gap: var(--a1-appr-grid-gap); }
    .apmedia-abt-approach-media { display: none; }
    .apmedia-abt-approach-list { width: 100%; }
}
@media (max-width: 620px) {
    .apmedia-abt-cap { flex-basis: 100%; }
    .apmedia-abt-proc-pct { margin-left: 0; }
}
/* ===== 모션 최소화 ===== */
@media (prefers-reduced-motion: reduce) {
    .apmedia-abt-js [data-rise] { opacity: 1; transform: none; transition: none; }
    .apmedia-abt-js [data-line] > span { transform: none; transition: none; }
    .apmedia-abt-shot { transition: none; }
    .apmedia-abt-cta-media img { animation: none; }
    .apmedia-abt-js .apmedia-abt-proc-fill,
    .apmedia-abt-js .apmedia-abt-proc-row.is-revealed .apmedia-abt-proc-fill { transition: none; transform: scaleX(var(--p, 1)); }
    .apmedia-abt-marquee-track { animation: none; }
}

/* ===== 헤더 가독성 — 다크 히어로 구간 =====
   About 히어로는 다크(--a1-dark)+배경영상. 스크롤 전(히어로 위) 헤더 로고/GNB/사운드/햄버거를 흰색화.
   스크롤 후(.scrolled)엔 흰 본문 배경 + white-60 헤더바라 원색(검정) 자동 복귀.
   about.css 는 About 페이지에서만 로드 → 헤더 전역 셀렉터도 About 스코프로 격리(공통 파일 무수정).
   로고 전환은 header.php img 순서(1=흰 svg / 2=검정 svg) 구조 셀렉터로 처리(클래스명 신설 회피). */
.apmedia-header:not(.scrolled) { --sound-bar-idle: var(--color-white); }
.apmedia-header:not(.scrolled) .apmedia-header-nav-item > a,
.apmedia-header:not(.scrolled) .apmedia-sound,
.apmedia-header:not(.scrolled) .apmedia-header-hamburger { color: var(--color-white); }
.apmedia-header:not(.scrolled) .apmedia-header-logo img:first-child { display: block; }
.apmedia-header:not(.scrolled) .apmedia-header-logo img:last-child { display: none; }