/* 회사소개 히어로: 홈처럼 상단 구역 좌우 전체를 채운다. 고정 헤더 높이(78px)만큼 아래에서 시작하고,
   1600x900 무대를 칸에 꽉 차게(cover) 키운다 — 배율과 위치는 about-hero.js 가 --k, --x, --y 로 넣는다.
   칸 높이는 너비의 16:9, 화면 높이를 넘지 않게. 휴대폰도 16:9(4:5는 양옆이 잘려 확대돼 보였음). */
.abh-hero { position:relative; padding-top:78px; background:#f4f3f1; }
.abh-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.abh { position:relative; width:100%; height:min(56.25vw, calc(100vh - 78px)); min-height:480px; overflow:hidden; background:#f4f3f1; }
.abh-stage { position:absolute; left:0; top:0; width:1600px; height:900px; transform-origin:0 0; transform:translate(var(--x,0px),var(--y,0px)) scale(var(--k,1)); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; color:#111318; word-break:keep-all; letter-spacing:normal; line-height:1.3; }
.abh-stage * { box-sizing:border-box; margin:0; padding:0; }


/* ① 사무실의 하루: 타임랩스 영상 위에 밤 사진(원본)을 겹쳐 두고 영상이 끝나면 보인다. 확대·이동은 js(원점 0 0) */
.abh-day { position:absolute; left:0; top:0; width:1600px; height:900px; z-index:3; opacity:0; transform-origin:0 0; }
.abh-day-f { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.abh-night { opacity:0; }
.abh-zp { position:absolute; display:block; opacity:0; }
.abh-zp--1 { left:839px; top:265px; width:400px; height:225px; }
.abh-zp--2 { left:938.1px; top:321px; width:201.7px; height:113.4px; }

/* ② 모니터 화면: 네 귀퉁이 원근(matrix3d)은 js가 매 순간 계산 */
.abh-scr { position:absolute; left:0; top:0; z-index:4; width:1600px; height:900px; transform-origin:0 0; background:#f4f3f1; opacity:0; }
.abh-scr img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }

/* ③ 실제 사무실 컷: 무대 전체, 다음 컷이 아래에서 밀어 올라온다(순서·위치는 js). 컷 이름표는 위 가운데 */
.abh-cut { position:absolute; inset:0; z-index:5; overflow:hidden; background:#ddd; visibility:hidden; }
.abh-cut video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.abh-pull { position:absolute; left:0; top:0; width:1600px; height:900px; transform-origin:0 0; }
.abh-op { position:absolute; display:block; }
.abh-op--1 { left:378.2px; top:172.5px; width:400px; height:225px; }
.abh-op--2 { left:444.8px; top:210.1px; width:266.7px; height:150px; }
.abh-morning { opacity:0; }
.abh-tag { position:absolute; z-index:9; left:50%; top:120px; padding:10px 20px !important; border-radius:4px; background:#21306F; color:#fff; font-size:34px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; opacity:0; }

.abh-meet { position:absolute; z-index:10; left:50%; top:76%; display:flex; flex-direction:column; align-items:center; gap:16px; padding:52px 72px !important; border-radius:22px; background:#fff; box-shadow:0 40px 90px rgba(17,19,24,.22); white-space:nowrap; opacity:0; transform:translate(-50%,-50%); }
.abh-meet-s { font-size:32px; font-weight:800; letter-spacing:-.02em; }
.abh-meet b { font-size:88px; font-weight:900; letter-spacing:-.02em; line-height:1; }
.abh-meet span { font-size:26px; font-weight:700; }
.abh-meet u { text-decoration:none; color:#21306F; font-weight:900; }

/* 무대 가운데만 보이는 좁은 화면(휴대폰): 제목·마지막 카드를 줄인다 */
.abh.is-narrow .abh-meet { gap:12px; padding:40px 44px !important; }
.abh.is-narrow .abh-meet-s { font-size:26px; }
.abh.is-narrow .abh-meet b { font-size:62px; }
.abh.is-narrow .abh-meet span { font-size:22px; }

/* 무대가 많이 작아진 화면(휴대폰): 회사 문구 상자를 가운데 쪽으로 올리고 작은 줄 글자를 키운다(상자 배율은 js) */
.abh.is-small .abh-meet { top:56%; }
.abh.is-small .abh-meet-s { font-size:40px; }
.abh.is-small .abh-meet span { font-size:34px; }

/* 휴대폰도 PC와 같은 16:9 — 양옆이 잘려 확대돼 보이지 않게 장면 전체를 보여 준다 */
@media(max-width:767px) {
  .abh-hero { padding-top:64px; }
  .abh { height:auto; aspect-ratio:16 / 9; min-height:0; }
}

/* 고정 헤더: 밝은 히어로 위라 다른 라이트 히어로(.vh-hero 등)와 같은 글자색 */
body:has(.abh-hero) .site-header:not(.scrolled) .nav-link { color: var(--gray-1); }
body:has(.abh-hero) .site-header:not(.scrolled) .nav-link:hover { color: var(--blue); background: rgba(37,70,158,0.08); }
body:has(.abh-hero) .site-header:not(.scrolled) .header-logo { color: var(--white); }