@charset "utf-8";
/* *******************************************************
 * filename : cm_about.css
 * description : About 페이지 전용 (Figma 281:2265 About(260903) 실측 — 2026-09-09 재구현)
 *               코어(공통 라벨/타이틀/텍스트 캐스케이드) + 섹션 블록(@@SEC 마커): who / how / history / growth / capability / whatwedo
 *               각 섹션 블록은 PC 규칙 + 자체 미디어쿼리(1366/1280/1220/1024/800/640/480 기준값만)를 함께 가진다
 * date : 2026-09-09
******************************************************** */

.about-page{position:relative; overflow:clip; color:#fff; background:transparent;}	/* How we work 이후는 사이트 공통 배경영상(footer.php .site-bg, fixed) 노출 — 사용자 지시 09-09. 히어로만 검정 */
.about-page .ab-hide{display:none !important;}

/* -------- 공통 : 섹션 라벨 (Section Label 컴포넌트 — 알약 + 픽셀 모션 + 오빗 보더) -------- */
.ab-label{
	display:inline-flex; align-items:center; gap:0.8rem;
	position:relative; overflow:hidden;
	padding:1.2rem 1.6rem 1.2rem 1.8rem; border-radius:10rem; box-sizing:border-box;
	background:linear-gradient(162deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 100%);
	box-shadow:16px 16px 64px 0 rgba(0,0,0,0.1);
}
.ab-label:before{content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,0.12); border-radius:10rem; pointer-events:none;}
/* 오빗 라이트 — 알약 보더를 따라 도는 빛 (시안 Border Motion/Orbit Light). 1px 링만 남기는 마스크(cm_liquid_glass 엣지 기법) */
.ab-label .orbit{
	position:absolute; inset:0; border-radius:10rem; padding:1px; box-sizing:border-box; pointer-events:none; overflow:hidden;
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite:exclude;
}
.ab-label .orbit:before{
	content:""; position:absolute; left:50%; top:50%; width:220%; aspect-ratio:1/1; transform:translate(-50%,-50%);
	background:conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 300deg, rgba(255,255,255,0.7) 345deg, rgba(255,255,255,0) 360deg);
	animation:abOrbit 3.2s linear infinite; will-change:transform;
}
.ab-off .orbit:before, .ab-off .ab-cap-box .edge:before{animation-play-state:paused;}	/* 뷰 밖 섹션의 무한 회전 정지 (JS AB.pauseOffscreen, 경량화 09-16) */
.ab-label .inner{position:relative; z-index:1; display:inline-flex; align-items:flex-end; gap:0.8rem;}
.ab-label b{font-size:1.6rem; font-weight:600; line-height:1; color:#fff; letter-spacing:0; text-transform:uppercase;}
/* 픽셀 모션 (2×2, 6px 픽셀 — 시계방향 밝기 순환) */
.ab-px{position:relative; width:14px; height:14px; flex:none;}
.ab-px i{position:absolute; width:6px; height:6px; background:#fff; transition:opacity 0.3s ease;}
.ab-px i:nth-child(1){left:0.5px; top:0.5px; opacity:1;}
.ab-px i:nth-child(2){left:7.5px; top:0.5px; opacity:0.1;}
.ab-px i:nth-child(3){left:7.5px; top:7.5px; opacity:0.3;}
.ab-px i:nth-child(4){left:0.5px; top:7.5px; opacity:0.6;}
@keyframes abOrbit{from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);}}

/* -------- 공통 : 섹션 타이틀 블록 (라벨 + 국문 헤드 + 영문 서브 — gap 32) -------- */
.ab-sec-tit{display:flex; flex-direction:column; align-items:center; gap:3.2rem; text-align:center;}
.ab-sec-tit .head{color:#fff; font-size:5.6rem; font-weight:400; letter-spacing:0; line-height:1; text-transform:uppercase; white-space:nowrap;}
.ab-sec-tit .head b{font-weight:700;}
.ab-sec-tit .head .point{color:var(--main-color); font-weight:700;}
.ab-sec-tit .en{color:#fff; font-size:2rem; font-weight:400; line-height:1.5;}

/* -------- 공통 : 텍스트 글자 캐스케이드 (메인 chRise 계열 — [data-ab-text] → Splitting.js .char) --------
   · 분할 전 깜빡임 방지: 분할 전엔 숨김 → 분할되면 .char 단위 opacity 0 → .is-in 에서 글자별 상승+블러 해제
   · --ab-step(글자 간격, 기본 0.025s) / --ab-delay(시작 지연) 는 요소 style 로 조절
   · .ab-static(캡처 빌드/리듀스모션) 에서는 애니메이션 없이 즉시 최종 상태 */
[data-ab-text]:not(.ab-split){opacity:0;}
[data-ab-text].ab-split{opacity:1;}
[data-ab-text] .word{display:inline-block; white-space:nowrap;}
[data-ab-text] .whitespace{display:inline-block; white-space:pre;}
[data-ab-text] .char{display:inline-block; position:relative; opacity:0;}	/* will-change 제거 (수백 글자 레이어 폭증 방지 — 경량화 09-10) */
[data-ab-text].is-in .char{animation:abCh 0.7s cubic-bezier(0.22,0.61,0.36,1) calc(var(--ab-delay, 0s) + var(--char-index, 0) * var(--ab-step, 0.025s)) both;}
@keyframes abCh{
	from{opacity:0; transform:translateY(0.6em) rotate(4deg); filter:blur(6px);}
	60%{filter:none;}
	to{opacity:1; transform:translateY(0) rotate(0); filter:none;}
}
/* 등장 1회 고정 (사용자 지시 09-09): 템플릿 data-scroll 이 되감기(위로 스크롤 시 .animated 제거)돼도 .ab-seen 이면 표시 유지 — About 한정 */
/* .about-page [data-scroll].ab-seen{opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; visibility:visible !important;} */
.ab-static [data-ab-text]{opacity:1 !important;}
.ab-static [data-ab-text] .char{animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;}
@media (prefers-reduced-motion: reduce){
	.ab-label .orbit:before{animation:none;}
}

/* @@SEC:who */
/* -------- Who : 히어로 배경 + Who we are (Figma 281:2267/2270/2271/2272 실측 — abs 0~1370, 라벨 306. 다음 섹션과의 160 간격은 how 의 margin-top) --------
   · 자연 상태(클래스 없음) = 시안 정지 상태. 모션은 .is-loaded(카드) / 키프레임 backwards(나선 드로잉) / [data-ab-text](글자 캐스케이드) 로만 얹고, .ab-static(캡처/리듀스) 이 전부 최종 상태로 되돌린다
   · 배경 3레이어(시안): .photo(사진 op.3, 0~1080) / .tint(#F15A2C overlay op.3) / .dim(Rect 710 검정→투명 -130~1629)
     사진 원본 미수급 → .ab-hero-bg.is-fallback : 라디얼 글로우 폴백(시안 렌더 실측 발광 분포의 합성 결과값)만 쓰고 tint·dim 미적용
     ★ 사진 수급 시: .photo 의 background-image 주석 해제(파일명 교체) + index.php .ab-hero-bg 의 is-fallback 클래스 제거 → 시안 3레이어 규격 */
.ab-hero{position:relative; z-index:0; overflow:hidden; padding-top:30.6rem; box-sizing:border-box; background:#000;}
.ab-hero .ab-hero-bg{position:absolute; left:0; top:0; width:100%; height:108rem; z-index:1; pointer-events:none;}
.ab-hero .ab-hero-bg i{position:absolute; display:block; font-style:normal;}
.ab-hero .ab-hero-bg .photo{
	left:0; top:0; width:100%; height:100%; opacity:0.3;
	background-position:50% 50%; background-size:cover; background-repeat:no-repeat;
	/* background-image:url("../../images/about/hero_photo.jpg"); ← 사진(AdobeStock_1614220357) 수급 시 주석 해제 */
	-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
	mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);	/* 상하 경계(0~240 / 840~1080px) 를 검정으로 녹임 — 어떤 사진이 와도 위아래가 끊겨 보이지 않게 (실측 발광 420~1060 안쪽은 손실 미미) */
}
.ab-hero .ab-hero-bg .tint{left:0; top:0; width:100%; height:100%; background-color:var(--main-color, #f15a2c); mix-blend-mode:overlay; opacity:0.3;}
.ab-hero .ab-hero-bg .dim{left:0; top:-13rem; width:100%; height:175.9rem; background:linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%);}
/* 폴백(사진 없음): 라디얼 로브 2개 = 시안 렌더 실측 (좌 x0~340·y700~870 피크 #2a1404, y≈960 소멸 / 우 x1500~1920·y560~930 #260c04, y1080 소멸) */
.ab-hero .ab-hero-bg.is-fallback .photo{
	opacity:1; background-size:auto; background-position:0 0;
	background-image:
		radial-gradient(44rem 32rem at 2.1% 74%, rgba(255,120,25,0.15) 0%, rgba(255,120,25,0.08) 45%, rgba(255,120,25,0.025) 75%, rgba(255,120,25,0) 100%),
		radial-gradient(62rem 32rem at 100% 69%, rgba(255,100,22,0.16) 0%, rgba(255,100,22,0.12) 50%, rgba(255,100,22,0.06) 80%, rgba(255,100,22,0) 100%);
}
.ab-hero .ab-hero-bg.is-fallback .tint,
.ab-hero .ab-hero-bg.is-fallback .dim{display:none;}

/* 오렌지 웨이브 라인 그래픽 — 시안 합성 스크린샷(1920×2283)에 원본 image1(2477²)을 피팅한 변환: 좌우 반전 + 226.5° 회전, 원점 (2010, 3200), 한 변 3520px (1920 기준 vw 비율).
   내부 검정 그라디언트 2장(Figma ctx)이 difference 블렌드에서 마스크 역할. 클립 하단은 블랙 페이드(사용자 지시 09-09: 끊김 방지) */
.ab-hero .ab-waves-clip{position:fixed; left:0; top:0; width:100%; height: 119.583%; overflow:hidden; pointer-events:none; z-index:0;
	-webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0) 100%);}
.ab-hero .ab-waves{position:fixed; width:100%; transform-origin:0 0; mix-blend-mode:difference; opacity:0.7; perspective:800px; transform-style:preserve-3d;}
.ab-hero .ab-waves .move{position: absolute; content:''; inset:0; width:100%; height:100%; background:radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 65%,rgba(0,0,0,1) 70%); transition: all 0.1s; transform-style:preserve-3d; will-change:transform; z-index:1;}
.ab-hero .ab-waves img{width:100%; height:100%; object-fit:cover; transition: all 0.1s; transform-style:preserve-3d; will-change:transform;}

/* .ab-hero .ab-waves-clip{position:absolute; left:0; top:0; width:100%; height:78vw; overflow:hidden; pointer-events:none; z-index:1; contain:paint;
	-webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0) 100%);}
.ab-hero .ab-waves{position:absolute; left:104.69vw; top:166.67vw; width:183.33vw; height:183.33vw; transform:rotate(226.5deg) scaleX(-1) translateX(-100%); transform-origin:0 0; mix-blend-mode:difference; opacity:0.7; will-change:transform;}
.ab-hero .ab-waves::after{content:""; position:absolute; inset:0;
	background:linear-gradient(-4.235deg, rgba(0,0,0,0) 58.203%, #000 96.284%), linear-gradient(204.53deg, rgba(0,0,0,0) 46.531%, #000 71.33%);}
.ab-hero .ab-waves img{width:100%; height:100%; object-fit:cover;} */

/* 콘텐츠 (라벨 306 → 타이틀 378 → 바디 470/510 → 카드 650 → 섹션 끝 1370) */
.ab-hero .ab-who{position:relative; z-index:2;}
.ab-hero .ab-sec-tit .head{font-size:6rem; font-weight:700;}	/* 시안 Bold 60 lh1 uppercase (코어 기본 56) — Experience #F15A2C(.point) + Technology #fff */
.ab-hero .ab-body{display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:3.2rem; text-align:center;}
.ab-hero .ab-body p{font-size:2rem; font-weight:400; letter-spacing:0; line-height:1.5; white-space:nowrap;}
.ab-hero .ab-body .kr{color:#fff;}
.ab-hero .ab-body .en{color:rgba(255,255,255,0.5);}

/* 카드 3장 — 360×520 #000 r0, gap 56, pt 104/0/200 (abs y 650~1370) */
.ab-hero .ab-who-cards{display:flex; justify-content:center; align-items:flex-start; gap:5.6rem; margin:12rem 0 0; padding:0; list-style:none;}	/* 텍스트↔카드 +40 (사용자 지시 09-10 3차) */
.ab-hero .ab-who-cards li{flex:none; list-style:none;}
.ab-hero .ab-who-cards li:nth-child(1){padding-top:10.4rem;}
.ab-hero .ab-who-cards li:nth-child(3){padding-top:20rem;}
.ab-hero .ab-who-cards .card{position:relative; width:36rem; height:52rem; overflow:hidden; background:#000; box-sizing:border-box;}
.ab-hero .ab-who-cards .card img{position:absolute; left:0; top:0; display:block; width:100%; height:auto; pointer-events:none;}
.ab-hero .ab-who-cards li:nth-child(1) .card img{top:-8.46%;}	/* 01: 360×608 박스 top -44 → 하단 정렬 노출 */
.ab-hero .ab-who-cards li:nth-child(2) .card img{width:110%; left:-5.83%; top:-5.96%;}	/* 02: 396×593 박스 left -21 top -31 */
.ab-hero .ab-who-cards li:nth-child(2) .card .veil{position:absolute; left:-5.83%; top:-5.96%; width:110%; height:114.04%; background:radial-gradient(89.14% 45.11% at 50% 50%, rgba(18,18,22,0) 63.83%, rgba(13,13,33,1) 100%); opacity:0.26; pointer-events:none; font-style:normal;}	/* 02 비네트 (반지름 353×267.5 @ 396×593, op .26) */
.ab-hero .ab-who-cards .card .txt{position:absolute; left:4.8rem; top:4.8rem; right:4.8rem; z-index:1; display:flex; flex-direction:column; gap:1.4rem; white-space:nowrap; box-sizing:border-box;}
.ab-hero .ab-who-cards .card .txt strong{display:block; color:#fff; font-size:2.4rem; font-weight:700; letter-spacing:-0.02em; line-height:1.4; text-transform:uppercase;}
.ab-hero .ab-who-cards .card .txt p{color:rgba(255,255,255,0.5); font-size:1.6rem; font-weight:400; letter-spacing:-0.01em; line-height:1.5;}

/* 카드 등장 — 로드 직후(.is-loaded, JS) 라벨→타이틀→바디 뒤 01(.45s)→02(.65s)→03(.85s), 각 .8s 상승+페이드 + 이미지 1.06→1 (1.2s).
   시작 전엔 paused + backwards 로 from 상태(숨김) 유지 → JS 가 running 으로 전환. 캡처/리듀스는 아래 .ab-static 게이트가 자연 상태(표시)로 복귀 */
.ab-hero .ab-who-cards li{animation:abWhoCard 1.1s cubic-bezier(0.22,0.61,0.36,1) var(--ab-card, 0s) both; animation-play-state:paused;}
.ab-hero .ab-who-cards .card img{animation:abWhoImg 1.2s cubic-bezier(0.22,0.61,0.36,1) var(--ab-card, 0s) both; animation-play-state:paused;}
.ab-hero.is-loaded .ab-who-cards li,
.ab-hero.is-loaded .ab-who-cards .card img{animation-play-state:running;}
@keyframes abWhoCard{from{opacity:0; transform:translateY(16rem);} to{opacity:1; transform:translateY(0);}}
/* 등장 완료(.is-settled, JS animationend) 후엔 키프레임을 떼고 스크롤 패럴랙스 변수(--py, 카드별 다른 속도 — 한화 intro-con03 scrub 방식)로 이동 */
.ab-hero .ab-who-cards li.is-settled{animation:none; transform:translate3d(0, var(--py, 0px), 0); transition:transform 0.12s linear;}	/* --py 는 settle 시점 기준 상대값(JS) — 등장→패럴랙스 전환 끊김 없음 (09-10) */
@keyframes abWhoImg{from{transform:scale(1.06);} to{transform:scale(1);}}

/* 정지 게이트 (캡처 빌드 / 리듀스모션) — 자연 상태 = 시안 */
.ab-static .ab-hero .ab-who-cards li,
.ab-static .ab-hero .ab-who-cards .card img{animation:none !important; opacity:1 !important; transform:none !important;}
@media (prefers-reduced-motion: reduce){
	.ab-hero .ab-who-cards li, .ab-hero .ab-who-cards .card img{animation:none;}
}

/* 반응형 (1280 카드 축소 → 800 세로 스택) */
@media all and (max-width:1280px){
	.ab-hero .ab-body p{white-space:normal; padding:0 var(--area-padding);}
	.ab-hero .ab-who-cards{gap:3rem;}
	.ab-hero .ab-who-cards .card{width:32rem; height:46.2rem;}	/* 3장 + gap 이 1280(1rem=11px) 안에 들도록 비율(360:520) 유지 축소 */
	.ab-hero .ab-who-cards .card .txt{white-space:normal;}
}
@media all and (max-width:800px){
	.ab-hero{padding-top:18rem;}
	.ab-hero .ab-sec-tit .head{font-size:3.6rem;}
	.ab-hero .ab-body{margin-top:2.4rem;}
	.ab-hero .ab-body p{font-size:1.6rem;}
	.ab-hero .ab-who-cards{flex-direction:column; align-items:center; gap:2rem; margin-top:5rem;}
	.ab-hero .ab-who-cards li:nth-child(1),
	.ab-hero .ab-who-cards li:nth-child(3){padding-top:0;}
	.ab-hero .ab-who-cards .card{width:36rem; height:52rem;}
	.ab-hero .ab-who-cards li.is-settled{transform:none !important;}	/* 모바일: 세로 적층에서 스크롤 패럴랙스(--py) 는 카드 겹침/공백 유발 → 해제 (09-10) */
}
@media all and (max-width:480px){
	.ab-hero{padding-top:14rem;}
}
/* 카드 마우스 틸트 (사용자 지시 09-09): 포인터 위치에 따라 ±6deg 기울임 — JS 가 .card transform 주입, 이탈 시 복귀. 정적/터치 무효 */
.ab-hero .ab-who-cards li{perspective:200rem;}
.ab-hero .ab-who-cards .card{transform-style:preserve-3d; transition:transform 0.6s cubic-bezier(0.22,0.61,0.36,1);}
.ab-static .ab-hero .ab-who-cards .card{transform:none !important; transition:none !important;}
.ab-static .ab-hero .ab-who-cards li.is-settled{transform:none !important;}
/* @@/SEC:who */

/* @@SEC:how */
/* -------- How we work (Figma 281:2306 실측 — abs y 1530~2650, h1120) --------
   · 섹션: who 끝(1370)+160 → margin-top 16rem / tit 19rem + 12rem 간격 + List 80rem + 하단 1rem = 112rem
   · 자연 상태(클래스 없음) = 시안 정지 상태(순백 대제목·번호 노출·Active Bar 폭 0·행별 큐브 세트).
     모션은 .is-live(JS 가 라이브에서만 부여) / .is-done(한 번 활성화된 행) / .is-filled(대제목 채움 완료) / .line.on(현재 행을 감싸는 선) 으로만 얹는다
   · 텍스트: 라벨·헤드·서브 = 코어 [data-ab-text] 캐스케이드(view). 번호 = 캐스케이드 키프레임을 섹션 스코프에서 슬롯인(abHowSlot)으로 교체.
     대제목 = .char 단위 윤곽(투명+1px 35% 흰 stroke) → 활성 시 글자별 좌→우 흰색 채움(background-clip:text 그라디언트 position 트랜지션) → 완료 후 순백 단색
   · 라이브: JS 가 리스트 끝에 li.ab-how-track > .ab-how-symbol(sticky 2×2) 생성 + 행별 .cubes 숨김 (≤800 은 행별 .cubes 복귀, 트랙 숨김)
   · 캡처(.ab-static)/reduced-motion: sections 미실행 → 심볼 미생성, 행별 .cubes = 시안. .ab-static 게이트가 라이브 클래스 잔존 시에도 시안 상태 강제 */
.ab-how{position:relative; margin-top:0; padding-bottom:1rem; box-sizing:border-box; isolation:isolate;}
/* 배경영상 상단 블랙 그라디언트 (사용자 지시 09-09): 히어로(검정) → How 로 넘어오며 영상이 서서히 드러남 */
.ab-how::before{content:""; position:absolute; left:0; right:0; top:0; height:104rem; z-index:-1; pointer-events:none; background:linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0) 100%);}
.ab-how .nb{white-space:nowrap;}
.ab-how .ab-process{position:relative; margin:12rem auto 0; padding:0; list-style:none;}
.ab-how .row{position:relative; height:20rem; overflow:hidden; box-sizing:border-box;}
/* 구분선 — 행01 상단 + 전행 하단, 1px rgba(255,255,255,.15). Active Bar(#fff 1px) 는 폭 0 이 시안 상태 */
.ab-how .row .line{position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,0.15); overflow:hidden; font-style:normal;}
.ab-how .row .line.top{top:0;}
.ab-how .row .line.btm{bottom:0;}
.ab-how .row .bar{position:absolute; left:0; top:0; width:0; height:1px; background:#fff;}
/* 번호 — left 80, Bold 24 lh1.8(43.2px 박스) 세로 중앙. overflow hidden = 슬롯인 클립 (시안 Number Motion 프레임) */
.ab-how .row .num{position:absolute; left:8rem; top:50%; transform:translateY(-50%); overflow:hidden; font-size:2.4rem; font-weight:700; font-style:normal; line-height:1.8; letter-spacing:0; color:#fff; text-transform:uppercase; white-space:nowrap;}
/* 영문 대제목 — left 177, Bold 64 lh1 uppercase. 시안 = 순백 단색(윤곽선 없음) */
.ab-how .row .ttl{position:absolute; left:17.7rem; top:50%; transform:translateY(-50%); font-size:6.4rem; font-weight:700; line-height:1; letter-spacing:0; color:#fff; text-transform:uppercase; white-space:nowrap;}
/* 카피 — left 50%(=740), w 564, gap 14, 세로 중앙 */
.ab-how .row .copy{position:absolute; left:50%; top:50%; transform:translateY(calc(-50% + 0.4rem));	/* 기하 중앙(행 200 기준 ttl·copy 모두 정중앙 실측)에 +4px 광학 보정: 굵은 국문(위)+연한 영문(아래) 무게가 위로 쏠려 보임 (사용자 지시 09-10 3차) */ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.4rem; width:56.4rem; box-sizing:border-box;}
.ab-how .row .copy strong{font-size:2.4rem; font-weight:700; line-height:1; letter-spacing:0; color:#fff;}
.ab-how .row .copy p{font-size:1.6rem; font-weight:400; line-height:1; letter-spacing:0; color:rgba(255,255,255,0.5);}	/* 시안 #fff op.5 (검정 위 동일값) — 코어 [data-ab-text].ab-split{opacity:1} 게이트와 충돌하지 않도록 rgba 로 */
/* 큐브 세트 — right 80, 2×2 20px 셀 gap 8 (48×48), #f15a2c, 비활성 op .2 (행01 TL / 02 TR / 03 BL / 04 BR) */
.ab-how .row .cubes{position:absolute; right:8rem; top:50%; transform:translateY(-50%); display:grid; grid-template-columns:repeat(2, 2rem); grid-auto-rows:2rem; gap:0.8rem; width:4.8rem; height:4.8rem; box-sizing:border-box;}
.ab-how .row .cubes i{display:block; background:var(--main-color, #f15a2c); opacity:0.2;}
.ab-how .row .cubes i.on{opacity:1;}

/* ---- 라이브 모션 (.is-live 는 JS 가 라이브에서만 부여 — 캡처/리듀스 DOM 에는 없음) ---- */
/* 현재 행을 감싸는 선(.line.on — 행 상단선 + 하단선, JS 가 부여): Active Bar 좌→우 채움. 해제 시 되감기 없이 페이드아웃 후 폭 리셋 → 흰 바는 활성 행만 */
.ab-how.is-live .row .bar{width:0; transform:none; transition:none;}
.ab-how.is-live .row .line.on .bar{width:100%; transition:width 0.75s cubic-bezier(0.65,0,0.35,1);}	/* 활성 행 하단선: 좌→우 채움 */
.ab-how.is-live .row .line.off .bar{width:100%; transform:translate3d(100%,0,0); transition:transform 0.6s cubic-bezier(0.65,0,0.35,1);}	/* 해제된 선(위 행): 오른쪽으로 빠져나감 (사용자 지시 09-09) */
/* 번호 슬롯인 — 코어 캐스케이드(abCh: 상승+블러)를 섹션 스코프에서 abHowSlot(아래에서 올라옴, .num overflow 클립)으로 교체. 지연식(--ab-step 0.08s)은 코어 값 그대로 */
.ab-how .row .num[data-ab-text].is-in .char{animation-name:abHowSlot; animation-duration:0.65s; animation-timing-function:cubic-bezier(0.22,0.61,0.36,1);}
@keyframes abHowSlot{from{opacity:1; transform:translateY(120%);} to{opacity:1; transform:translateY(0);}}
/* 대제목 윤곽 → 채움 : 글자(.char)마다 투명+윤곽선 → .is-done 에서 글자 순서대로(0.06s 간격) 흰색이 좌→우로 차오름(gradient position 100%→0). 채움 중 stroke 는 흰색으로 정합 */
.ab-how.is-live .row .ttl .char{
	color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.35);
	background-image:linear-gradient(90deg, #fff 0%, #fff 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
	background-repeat:no-repeat; background-size:200% 100%; background-position:100% 0;
	-webkit-background-clip:text; background-clip:text;
}
.ab-how.is-live .row.is-done .ttl .char{
	background-position:0 0; -webkit-text-stroke-color:#fff;
	transition:background-position 0.32s cubic-bezier(0.4,0,0.2,1) calc(0.1s + var(--char-index, 0) * 0.06s), -webkit-text-stroke-color 0.32s ease calc(0.1s + var(--char-index, 0) * 0.06s);
}
.ab-how.is-live .row.is-filled .ttl .char{color:#fff; -webkit-text-stroke:0; background:none; transition:none;}	/* 채움 완료(JS) → 시안과 같은 순백 단색 텍스트 */
/* 라이브: 행별 큐브 세트 숨김 → 단일 sticky 심볼로 대체 */
.ab-how.is-live .row .cubes{visibility:hidden;}

/* ---- sticky 큐브 심볼 (JS 생성 li — 트랙은 행01 큐브 중심 ~ 행04 큐브 중심(리스트 상하 7.6rem 안쪽), right 8rem = 행 .cubes 와 동일 열. sticky top 은 뷰포트 세로 중앙 px 를 JS 주입 — vh 미사용) ---- */
.ab-how .ab-how-track{position:absolute; top:0; bottom:0; right:8rem; z-index:2; width:4.8rem; margin:0; padding:0; list-style:none; pointer-events:none; box-sizing:border-box;}
.ab-how .ab-how-symbol{position:absolute; left:0; top:0; transition:top 0.55s cubic-bezier(0.65,0,0.35,1); display:grid; grid-template-columns:repeat(2, 2rem); grid-auto-rows:2rem; gap:0.8rem; width:4.8rem; height:4.8rem; box-sizing:border-box;}
.ab-how .ab-how-symbol .cell{position:relative; display:block; overflow:hidden; background:rgba(241,90,44,0.2);}	/* 비활성 = #f15a2c 20% */
.ab-how .ab-how-symbol .fill{position:absolute; left:0; top:0; width:100%; height:100%; background:var(--main-color, #f15a2c); visibility:hidden; transform:translate3d(0,-105%,0); pointer-events:none; font-style:normal;}
.ab-how .ab-how-symbol .cell.is-on .fill{visibility:visible; transform:none; animation:abHowPulse 2.6s ease-in-out 0.3s infinite;}	/* 정지 채움 + 시안 Cube Pulse (활성 칸 미세 호흡) */
@keyframes abHowPulse{0%, 100%{opacity:1;} 50%{opacity:0.72;}}
/* works 카드 coverIn/Out 컨셉 — 새 칸은 이전 칸 방향에서 들어오고(in-*), 이전 칸 채움은 새 칸 방향으로 빠져나감(out-*) */
.ab-how .ab-how-symbol .fill.in-top{visibility:visible; animation:abCoverInTop 0.35s ease 0.08s both;}
.ab-how .ab-how-symbol .fill.in-right{visibility:visible; animation:abCoverInRight 0.35s ease 0.08s both;}
.ab-how .ab-how-symbol .fill.in-bottom{visibility:visible; animation:abCoverInBottom 0.35s ease 0.08s both;}
.ab-how .ab-how-symbol .fill.in-left{visibility:visible; animation:abCoverInLeft 0.35s ease 0.08s both;}
.ab-how .ab-how-symbol .fill.out-top{visibility:visible; animation:abCoverOutTop 0.35s ease both;}
.ab-how .ab-how-symbol .fill.out-right{visibility:visible; animation:abCoverOutRight 0.35s ease both;}
.ab-how .ab-how-symbol .fill.out-bottom{visibility:visible; animation:abCoverOutBottom 0.35s ease both;}
.ab-how .ab-how-symbol .fill.out-left{visibility:visible; animation:abCoverOutLeft 0.35s ease both;}
@keyframes abCoverInTop{from{transform:translate3d(0,-105%,0);} to{transform:translate3d(0,0,0);}}
@keyframes abCoverInRight{from{transform:translate3d(105%,0,0);} to{transform:translate3d(0,0,0);}}
@keyframes abCoverInBottom{from{transform:translate3d(0,105%,0);} to{transform:translate3d(0,0,0);}}
@keyframes abCoverInLeft{from{transform:translate3d(-105%,0,0);} to{transform:translate3d(0,0,0);}}
@keyframes abCoverOutTop{from{transform:translate3d(0,0,0);} to{transform:translate3d(0,-105%,0);}}
@keyframes abCoverOutRight{from{transform:translate3d(0,0,0);} to{transform:translate3d(105%,0,0);}}
@keyframes abCoverOutBottom{from{transform:translate3d(0,0,0);} to{transform:translate3d(0,105%,0);}}
@keyframes abCoverOutLeft{from{transform:translate3d(0,0,0);} to{transform:translate3d(-105%,0,0);}}

/* ---- 정지 게이트 (캡처 빌드/리듀스모션 — 코어가 .about-page 에 .ab-static 부여). 라이브 클래스가 남아 있어도 시안 상태로 강제 ---- */
.ab-static .ab-how .row .bar{transition:none !important; width:0 !important; opacity:1 !important; transform:none !important;}
.ab-static .ab-how .row .ttl .char{color:#fff !important; -webkit-text-stroke:0 !important; background:none !important; transition:none !important;}
.ab-static .ab-how .row .cubes{visibility:visible !important;}
.ab-static .ab-how .row .cubes i.on{opacity:1 !important; transition:none !important;}
.ab-static .ab-how .ab-how-track{display:none !important;}
.ab-static .ab-how .ab-how-symbol .fill{animation:none !important;}
@media (prefers-reduced-motion: reduce){
	.ab-how .row .num[data-ab-text].is-in .char, .ab-how .ab-how-symbol .fill, .ab-how .ab-how-symbol .cell.is-on .fill,
	.ab-how .ab-how-symbol .fill.in-top, .ab-how .ab-how-symbol .fill.in-right, .ab-how .ab-how-symbol .fill.in-bottom, .ab-how .ab-how-symbol .fill.in-left,
	.ab-how .ab-how-symbol .fill.out-top, .ab-how .ab-how-symbol .fill.out-right, .ab-how .ab-how-symbol .fill.out-bottom, .ab-how .ab-how-symbol .fill.out-left{animation:none;}
	.ab-how.is-live .row .bar, .ab-how.is-live .row .line.on .bar, .ab-how.is-live .row.is-done .ttl .char{transition:none;}
	.ab-how .ab-how-symbol .cell.is-on .fill{visibility:visible; transform:none;}
}

/* ---- 반응형 ---- */
@media all and (max-width:1540px){	/* .area(1480)+60 고정폭 해제 구간 (giant_first "레이아웃 구조" 예외 — 템플릿 공통 .area 는 1280 에서만 해제하므로 섹션에서 보강, growth 와 동일) */
	.ab-how .ab-process{max-width:none; padding:0 var(--area-padding);}
	.ab-how .ab-how-track{right:calc(8rem + var(--area-padding));}	/* 트랙은 ul 패딩박스 기준 absolute → 행 .cubes(패딩 안쪽) 열과 정합 */
}
@media all and (max-width:1220px){
	.ab-how .row .copy{width:calc(50% - 14.8rem);}	/* 큐브(4.8rem)+right(8rem)+여유(2rem) 침범 방지 */
}
@media all and (max-width:1024px){
	.ab-how .ab-sec-tit .en{padding:0 var(--area-padding);}
	.ab-how .row .copy strong{line-height:1.3;}
	.ab-how .row .copy p{line-height:1.3;}	/* 폭 부족 시 2줄 대비 */
}
@media all and (max-width:800px){	/* 모바일: 행 세로 적층 (번호+대제목 한 줄 → 카피), 큐브는 우상단 absolute, sticky 심볼 미사용(행별 .cubes 복귀) */
	.ab-how{padding-bottom:0;}
	.ab-how .ab-process{margin-top:6rem;}
	.ab-how .row{height:auto; display:flex; flex-wrap:wrap; align-items:center; padding:3.2rem 7rem 3.2rem 0;}
	.ab-how .row .num{position:static; transform:none; margin-right:1.6rem;}
	.ab-how .row .ttl{position:static; transform:none; font-size:4rem;}
	.ab-how .row .copy{position:static; transform:none; flex:0 0 100%; width:100%; margin-top:1.6rem; gap:1rem;}
	.ab-how .row .copy strong{font-size:2rem;}
	.ab-how .row .copy p{font-size:1.4rem; line-height:1.4;}
	.ab-how .row .cubes{top:3.2rem; right:0; transform:none;}
	.ab-how .ab-how-track{display:none;}
	.ab-how.is-live .row .cubes{visibility:visible;}
	.ab-how.is-live .row .cubes i.on{opacity:0.2; transition:opacity 0.5s ease 0.15s;}	/* 모바일: 행별 큐브의 활성 칸은 행 활성 시 채워짐 (sticky 심볼 대체) */
	.ab-how.is-live .row.is-done .cubes i.on{opacity:1;}
}
/* 스크롤 스테핑 핀 (사용자 지시 09-10): 리스트가 뷰포트에 고정되고 STEP px 스크롤마다 01→04 한 단계씩(심볼 동행). JS 가 .is-pin + 섹션 min-height(+3×STEP) + sticky top 주입. 캡처/리듀스는 일반 흐름 */
.ab-how.is-pin .ab-process{position:sticky; top:0;}
.ab-static .ab-how .ab-process{position:relative !important; top:auto !important;}
.ab-static .ab-how{padding-bottom:1rem !important;}
@media all and (max-width:800px){
	.ab-how.is-pin .ab-process{position:relative; top:auto;}
}
/* @@/SEC:how */

/* @@SEC:history */
/* -------- History (Figma 281:2312 실측 — abs y 2810~3690 · h880 · 이전 섹션(how 끝 2650)과 160 간격) --------
   · 1920 레이아웃 : tit 188(라벨 40 + 32 + 국문 54 + 32 + 영문 30) → 62 → 오도미터 1029×420 @x446 (섹션 상대 250~670) / 활성 항목 top 406 (제목 76 + 20 + 설명 24)
   · 자연 상태(클래스 없음) = 시안 Step 01 : 오도미터 2007 + 항목 01 표시. 모션은 JS 상태 클래스(.is-in / .is-out / .roll-*)로만 얹는다
   · 라이브 : 오도미터 뷰 진입 시 0000→2007 카운트업(JS rAF) → 스텝마다 변경 자릿수만 롤링(연도 증가=위 / 감소=아래) + 중앙 항목 블러 페이드 (사용자 요구 — Figma 잔상 스택 0.18/0.10 대체)
   · 정적(.ab-static 캡처 빌드/리듀스모션) : 전부 시안 정지 상태. vh / sticky / 인터벌 없음 */
.ab-history{position:relative; height:88rem; margin-top:16rem; overflow:hidden; box-sizing:border-box;}
.ab-history .ab-sec-tit{position:relative; z-index:2;}
.ab-history .ab-sec-tit .head{font-size:5.4rem;}	/* 스펙 §2 : 54px (코어 5.6rem 섹션 오버라이드) */
.ab-history .nb{white-space:nowrap;}				/* 공백 없이 붙은 "굵은 단어+조사"(퍼셉트+는 / 산업+의 / 사례+를) — wrap 구간에서 인접 .word(inline-block) 사이 줄바꿈 방지. Chrome 은 nowrap 끝 공백 뒤에서 줄을 안 바꾸므로 마크업의 .nb 뒤 <wbr> 이 줄바꿈 기회 */

/* ---- 스테이지 (오도미터 + 항목) : top 250 = tit 188 + 62, 높이 420 ---- */
.ab-history .ab-hist-stage{position:relative; z-index:1; height:42rem; margin-top:6.2rem; box-sizing:border-box;}

/* ---- 오도미터 : 4셀 가로 배열 (셀 257.25×420 = 0.6125em×1em @420px), 그룹 1029 중앙(x 445.5~1474.5), Bold 420/lh 420 rgba(255,255,255,.07) ---- */
.ab-history .ab-odometer{
	position:absolute; left:0; right:0; top:0; z-index:0;
	display:flex; align-items:flex-start; width:102.9rem; height:42rem; margin:0 auto;
	font-size:42rem; line-height:1; pointer-events:none; box-sizing:border-box;
}
.ab-history .ab-odometer .digit{position:relative; flex:none; width:0.6125em; height:1em; overflow:hidden; box-sizing:border-box;}	/* 4셀 모두 클립 — 롤링 시 인접 숫자 노출 방지 */
.ab-history .ab-odometer .digit b{
	position:absolute; left:0; top:0; width:100%; height:100%;
	font-size:inherit; font-weight:700; font-style:normal; line-height:1; letter-spacing:0; text-align:center;
	color:rgba(255,255,255,0.07);
}
/* 자릿수 롤링 (스펙 §3-2 : 옛 숫자 y0→−0.714em op1→0 / 새 숫자 +0.714em→0 op0→1, 0.6s) — 연도 증가 = 위로, 감소(2030→2007 순환 복귀) = 아래로 */
.ab-history .ab-odometer .digit b.roll-out-up{animation:abHistRollOutUp 0.6s cubic-bezier(0.22,0.61,0.36,1) forwards;}
.ab-history .ab-odometer .digit b.roll-in-up{animation:abHistRollInUp 0.6s cubic-bezier(0.22,0.61,0.36,1) both;}
.ab-history .ab-odometer .digit b.roll-out-down{animation:abHistRollOutDown 0.6s cubic-bezier(0.22,0.61,0.36,1) forwards;}
.ab-history .ab-odometer .digit b.roll-in-down{animation:abHistRollInDown 0.6s cubic-bezier(0.22,0.61,0.36,1) both;}
@keyframes abHistRollOutUp{from{transform:translateY(0); opacity:1;} to{transform:translateY(-0.714em); opacity:0;}}
@keyframes abHistRollInUp{from{transform:translateY(0.714em); opacity:0;} to{transform:translateY(0); opacity:1;}}
@keyframes abHistRollOutDown{from{transform:translateY(0); opacity:1;} to{transform:translateY(0.714em); opacity:0;}}
@keyframes abHistRollInDown{from{transform:translateY(-0.714em); opacity:0;} to{transform:translateY(0); opacity:1;}}

/* ---- 중앙 흰 텍스트 항목 : 활성 top 406 (스테이지 상대 156) — 제목 SemiBold 76 lh1 + gap 20 + 설명 Medium 24 lh1 −0.04em, uppercase(스펙 §4) ---- */
.ab-history .ab-hist-items{
	position:absolute; left:0; top:15.6rem; z-index:1; width:100%; margin:0; padding:0; list-style:none;
	display:grid; align-items:start; box-sizing:border-box;
	text-align:center; text-transform:uppercase; color:#fff;
}
.ab-history .ab-hist-items .item{grid-area:1 / 1; position:relative; width:100%; list-style:none; box-sizing:border-box; opacity:0; visibility:hidden;}	/* 12개 같은 칸에 겹침 — .on 만 표시 */
.ab-history .ab-hist-items .item strong{display:block; font-size:7.6rem; font-weight:600; line-height:1; letter-spacing:0; color:#fff;}
.ab-history .ab-hist-items .item p{margin-top:2rem; font-size:2.4rem; font-weight:500; line-height:1; letter-spacing:-0.04em; color:#fff;}
.ab-history .ab-hist-items .item.on{opacity:1; visibility:visible;}
/* 블러+페이드 등장(0.6s) / 퇴장(0.4s 역순) — 사용자 요구 "촥 나왔다가 사라짐" */
.ab-history .ab-hist-items .item.on.is-in{animation:abHistItemIn 0.6s cubic-bezier(0.22,0.61,0.36,1) both;}
.ab-history .ab-hist-items .item.is-out{visibility:visible; animation:abHistItemOut 0.4s cubic-bezier(0.55,0,1,0.45) forwards;}
@keyframes abHistItemIn{from{opacity:0; filter:blur(12px);} to{opacity:1; filter:none;}}
@keyframes abHistItemOut{from{opacity:1; filter:blur(0);} to{opacity:0; filter:blur(12px);}}

/* ---- 정지 게이트 (캡처 빌드 / 리듀스모션 — 코어가 .about-page 에 .ab-static 부여) : 시안 Step 01 강제 ---- */
.ab-static .ab-history .ab-hist-items .item{animation:none !important; filter:none !important;}
.ab-static .ab-history .ab-hist-items .item.on{opacity:1 !important; visibility:visible !important;}
.ab-static .ab-history .ab-odometer .digit b{animation:none !important; transform:none !important; opacity:1 !important;}
@media (prefers-reduced-motion: reduce){
	.ab-history .ab-odometer .digit b.roll-out-up, .ab-history .ab-odometer .digit b.roll-in-up,
	.ab-history .ab-odometer .digit b.roll-out-down, .ab-history .ab-odometer .digit b.roll-in-down,
	.ab-history .ab-hist-items .item.on.is-in, .ab-history .ab-hist-items .item.is-out{animation:none;}
}

/* ---- 반응형 ---- */
@media all and (max-width:1280px){	/* 1280 구간은 1rem=11px 로 커져 54px 헤드(≈1400px)가 뷰포트를 넘침 → 이 섹션은 코어(1024)보다 먼저 줄바꿈 허용 */
	.ab-history .ab-sec-tit .head{white-space:normal; line-height:1.3; padding:0 var(--area-padding);}
	.ab-history .ab-hist-items{padding:0 var(--area-padding);}
}
@media all and (max-width:800px){	/* 모바일 : 높이 자동, 숫자는 뷰포트 비례(vw — 102.9rem≈1132px 가 폭을 넘는 구간), 항목은 숫자 위 세로 중앙 */
	.ab-history{height:auto; margin-top:10rem;}
	.ab-history .ab-sec-tit .head{font-size:3.4rem;}
	.ab-history .ab-hist-stage{height:30vw; margin-top:5rem;}
	.ab-history .ab-odometer{width:73.5vw; height:30vw; font-size:30vw;}	/* 4셀 × 0.6125em = 73.5vw */
	.ab-history .ab-hist-items{top:50%; transform:translateY(-50%); align-items:center; word-break:keep-all;}	/* 2줄 시 어절 단위 줄바꿈 */
	.ab-history .ab-hist-items .item strong{font-size:3.2rem; line-height:1.2;}
	.ab-history .ab-hist-items .item p{margin-top:1.2rem; font-size:1.4rem; line-height:1.3;}
}
/* 스크롤 핀 스테이지 (사용자 지시 09-09): 라이브에서 JS 가 .is-pin + 섹션 높이(88rem + (N-1)×STEP px) + inner sticky top 주입. 캡처/리듀스는 일반 블록(88rem) */
.ab-history .ab-hist-inner{position:relative; box-sizing:border-box;}
.ab-history.is-pin{height:auto; overflow:visible;}
.ab-history.is-pin .ab-hist-inner{position:sticky; top:0; height:88rem; overflow:hidden;}
.ab-static .ab-history{height:88rem !important; overflow:hidden !important;}
.ab-static .ab-history .ab-hist-inner{position:relative !important; top:auto !important;}
@media all and (max-width:800px){
	.ab-history.is-pin .ab-hist-inner{height:auto;}
}
/* @@/SEC:history */

/* @@SEC:growth */
/* -------- Growth (고객사 로고 그리드 + 연 매출 도트 차트) — Figma 281:2315 실측 (abs 3850~5630 · h1780)
   · 이전 섹션(history 끝 3690)과 160 간격 = margin-top 16rem
   · tit 190(라벨 40 + 32 + 헤드 56 + 32 + 영문 30) → 120 → clients 1480×380 (셀 230×80, 열 피치 250 / 행 피치 100, 6열×4행) → 차트 1920×896 → 38 → 매출 라벨 16 → 140
   · 차트 : 1920×896 풀블리드 캔버스 = 인라인 SVG(viewBox 1920×896, width 100%) + HTML 라벨 절대배치 (% 좌표, 폰트는 cqw — 1920 캔버스 px ÷ 19.2. vw 폴백 선언 후 cqw 로 덮음)
   · 도트 : 6×6 / 피치 16 / 원점 (154,218) / 2452개 — 3막대 합집합 수직 linearGradient 1개 공유 (#F15A2C α1 → α.1). JS 가 열별 <g class="col"> 로 생성
   · 모션 : 로고 셀 순차 fade-up(--i × 30ms) / 도트 왼→오른 열 채움(--c × 13ms + 0.18s ≈ 1.48s, IO 1회 — 되감기·사라짐 없음) / 막대 완료 시점에 연도 캐스케이드(manual) + 숫자 카운트업 + 꺾은선 드로잉(도트A → 선 → 도트B)
   · 정적 계약 : 자연 상태(클래스 없음) = 시안 정지 상태. 숨김 초기값은 런타임 클래스(.is-live)에만 두고 .ab-static 에서 강제 복귀. vh 없음 / sticky 없음 / 인터벌 없음 -------- */
.ab-growth{position:relative; margin-top:16rem; padding:0 0 14rem; box-sizing:border-box;}
.ab-growth .nb{white-space:nowrap;}	/* 공백 없이 붙은 어절(<b>고객사</b>와 · <b>성장</b>하고) 줄바꿈 방지 — 1024 이하 헤드 wrap 구간용 */

/* ---- 고객사 로고 그리드 : .area(1480) = 230×6 + 20×5. 셀 230×80 → aspect-ratio 23/8 (셀 폭 비례), 로고는 셀 중앙 (시안 전 셀 중앙 배치 — 05 만 y +0.5) ---- */
.ab-growth .ab-clients{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:2rem; align-items:start; margin:12rem 0 0; padding:0; list-style:none; box-sizing:border-box;}
.ab-growth .ab-clients li{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:23/8; min-width:0; box-sizing:border-box; list-style:none;}
.ab-growth .ab-clients img{display:block; height:auto;}
/* 셀 opacity = Figma 레이어 opacity (1 / .75 / .5 / .25) — li 등장 애니(opacity 0→1)와 분리하기 위해 img 에 적용 */
.ab-growth .ab-clients .o75 img{opacity:1;}	/* 사용자 지시 09-09: 로고 전부 불투명 (시안 레이어 opacity 미적용) */
.ab-growth .ab-clients .o50 img{opacity:1;}
.ab-growth .ab-clients .o25 img{opacity:1;}
/* 로고 폭 = 시안 로고 박스폭 ÷ 230 (셀 폭 비례). 높이는 에셋 고유비 = 박스 높이 (SVG viewBox = 박스 / PNG 는 object-cover 크롭 선적용 2× 본) */
.ab-growth .ab-clients li:nth-child(1) img{width:56.5217%;}	/* SAMSUNG 130×20 */
.ab-growth .ab-clients li:nth-child(2) img{width:75.6522%;}	/* HYUNDAI 174×24 */
.ab-growth .ab-clients li:nth-child(3) img{width:74.7826%;}	/* HD HYUNDAI 172×26 */
.ab-growth .ab-clients li:nth-child(4) img{width:60.8696%;}	/* 현대로보틱스 140×26 */
.ab-growth .ab-clients li:nth-child(5) img{width:27.8261%; transform:translateY(0.5px);}	/* LIG 64×35 (y 23 = 중앙 22.5 + 0.5) */
.ab-growth .ab-clients li:nth-child(6) img{width:33.4783%; transform:translateX(0.5px);}	/* Cheil 77×24 (x 77 = 중앙 76.5 + 0.5) */
.ab-growth .ab-clients li:nth-child(7) img{width:60.8696%;}	/* INNOCEAN 140×26 */
.ab-growth .ab-clients li:nth-child(8) img{width:42.6087%;}	/* HSAD 98×30 */
.ab-growth .ab-clients li:nth-child(9) img{width:53.0435%;}	/* SOLUM 122×26 (저해상 에셋 — 원본 수급 시 교체) */
.ab-growth .ab-clients li:nth-child(10) img{width:38.2609%;}	/* KIA 88×20 */
.ab-growth .ab-clients li:nth-child(11) img{width:48.6957%;}	/* LG전자 112×32 */
.ab-growth .ab-clients li:nth-child(12) img{width:37.3913%;}	/* TSMC 86×54 */
.ab-growth .ab-clients li:nth-child(13) img{width:26.9565%;}	/* SK 62×48 */
.ab-growth .ab-clients li:nth-child(14) img{width:46.0870%;}	/* LOTTE 106×34 */
.ab-growth .ab-clients li:nth-child(15) img{width:14.7826%;}	/* kt 34×28 */
.ab-growth .ab-clients li:nth-child(16) img{width:47.8261%;}	/* HYBE 110×30 */
.ab-growth .ab-clients li:nth-child(17) img{width:66.9565%;}	/* SM ENTERTAINMENT 154×34 */
.ab-growth .ab-clients li:nth-child(18) img{width:80%;}	/* AMOREPACIFIC 184×18 */
.ab-growth .ab-clients li:nth-child(19) img{width:58.2609%;}	/* 서울특별시 134×34 */
.ab-growth .ab-clients li:nth-child(20) img{width:65.2174%;}	/* 문화체육관광부 150×30 */
/* 등장 모션 (런타임 전용) : sections 가 .is-live 부여 → 뷰 진입 시 .is-in → 셀 순차 fade-up (--i × 30ms). 자연 상태 = 전부 표시 */
.ab-growth .ab-clients.is-live:not(.is-in) li{opacity:0;}
.ab-growth .ab-clients.is-in li{animation:abGrowthLogo 0.9s cubic-bezier(0.22,0.61,0.36,1) calc(var(--i, 0) * 0.07s) both;}	/* --i 는 JS 가 무작위 순서로 재부여 (사용자 지시 09-09: 블러에서 랜덤 촤라락) */
@keyframes abGrowthLogo{
	from{opacity:0; transform:translateY(1.2rem) scale(1.04); filter:blur(10px);}
	60%{filter:none;}
	to{opacity:1; transform:none; filter:none;}
}

/* ---- 매출 도트 차트 : 1920×896 풀블리드 (Chart 281:2317 — 섹션 폭 100%, .area 밖) ---- */
.ab-growth .ab-chart{position:relative; width:100%; aspect-ratio:1920/896; margin:0; box-sizing:border-box; container-type:inline-size;}
.ab-growth .ab-chart-cv{position:absolute; left:0; top:0; width:100%; height:100%; display:block; pointer-events:none;}	/* 도트 2452개 캔버스 (JS, 경량화 09-16) */
.ab-growth .ab-chart-svg{display:block; position:relative; width:100%; height:auto; aspect-ratio:1920/896; overflow:visible;}
.ab-growth .ab-chart-svg .cline path{fill:none; stroke:#F15A2C; stroke-width:1;}
.ab-growth .ab-chart-svg .cline .dot{fill:#F15A2C; filter:url(#abGrowthGlow);}	/* 글로우 도트 — 그라디언트 무관 #F15A2C 100% */
/* 연도 / 숫자 : chart 좌표 → % (x ÷ 1920 · y ÷ 896). 폰트는 캔버스 비례 cqw (24px → 1.25cqw · 120px → 6.25cqw), cqw 미지원 브라우저는 vw 폴백 */
.ab-growth .ab-chart .grp{position:absolute; inset:0; margin:0; color:var(--main-color); pointer-events:none;}
.ab-growth .ab-chart .yr{position:absolute; display:flex; align-items:flex-end; height:2.6786%; font-size:1.25vw; font-size:1.25cqw; font-weight:600; font-style:normal; line-height:1; letter-spacing:0; text-transform:uppercase; white-space:nowrap; color:var(--main-color);}	/* Year 24 SemiBold lh1 — 박스(24) 하단 정렬 (모바일 하한 폰트 확대 시 위로 성장) */
.ab-growth .ab-chart .num{position:absolute; display:block; height:10.7143%; font-size:6.25vw; font-size:6.25cqw; font-weight:700; line-height:0.8; letter-spacing:-0.03em; white-space:nowrap; color:var(--main-color);}	/* 숫자 120 Bold lh0.8(96) −3.6px */
.ab-growth .ab-chart .g1 .yr{left:8.5938%; top:48.9955%;}	/* (165,439) */
.ab-growth .ab-chart .g1 .num{left:8.3333%; top:53.4598%;}	/* (160,479) */
.ab-growth .ab-chart .g2 .yr{left:44.375%; top:24.6652%;}	/* (852,221) */
.ab-growth .ab-chart .g2 .num{left:44.0625%; top:29.1295%;}	/* (846,261) */
.ab-growth .ab-chart .g3 .yr{left:80.0521%; top:0;}	/* (1537,0) */
.ab-growth .ab-chart .g3 .num{left:79.7396%; top:4.4643%;}	/* (1531,40) */
/* 등장 모션 (런타임 전용 — .is-live 는 sections 에서만 부여, finals/정적에서는 없음 → 자연 상태 = 시안)
   · 도트 : 뷰 진입(.is-in) 시 열별 opacity 0→1, 지연 = 열 × 13ms (0~100열 → 1.3s + 0.18s). 되감기 없음(IO 1회, fill both)
   · 숫자 : 막대 완료 시점에 .is-on → 페이드 + 카운트업 / 꺾은선 : .is-on → 도트A(0.25s) → 선 드로잉(0.45s, 0.15s 지연) → 도트B(0.6s 지연 점등) */
/* (도트 등장·부유는 캔버스 — SVG rect 규칙 제거, 경량화 09-16) */
.ab-growth .ab-chart.is-live .num{transition:opacity 0.3s ease;}
.ab-growth .ab-chart.is-live .num:not(.is-on){opacity:0;}
.ab-growth .ab-chart.is-live .cline:not(.is-on) path,
.ab-growth .ab-chart.is-live .cline:not(.is-on) .dot{opacity:0;}
.ab-growth .ab-chart .cline.is-on .dot.a{animation:abGrowthDot 0.25s ease-out both;}
.ab-growth .ab-chart .cline.is-on path{stroke-dasharray:1.05; animation:abGrowthDraw 0.45s ease-out 0.15s both;}	/* pathLength=1 정규화 — 도트A 쪽에서 도트B 로 드로잉 */
.ab-growth .ab-chart .cline.is-on .dot.b{animation:abGrowthDot 0.25s ease-out 0.6s both;}
@keyframes abGrowthDot{
	from{opacity:0;}
	to{opacity:1;}
}
@keyframes abGrowthDraw{
	from{stroke-dashoffset:1.05;}
	to{stroke-dashoffset:0;}
}

/* ---- 하단 라벨 '연 매출액(단위 : 억)' : (1620,5474) 124×16, 우변 1744 = 차트 내용 우변 1760 − 16 → 섹션(=캔버스) 폭 기준 padding-right 176/1920 ---- */
.ab-growth .ab-sales{display:block; margin:3.8rem 0 0; padding:0 9.1667% 0 0; box-sizing:border-box; color:var(--main-color); font-size:1.6rem; font-weight:400; line-height:1; letter-spacing:0; text-align:right; text-transform:uppercase; white-space:nowrap;}

/* ---- 정적 게이트 (캡처 빌드 / reduced-motion) — 시안 정지 상태로 강제 : 로고·도트 전부 표시, 선 완성, 숫자 최종값(finals) ---- */
.ab-static .ab-growth .ab-clients li,
.ab-static .ab-growth .ab-chart .col,
.ab-static .ab-growth .ab-chart .num,
.ab-static .ab-growth .ab-chart .cline path,
.ab-static .ab-growth .ab-chart .cline .dot{animation:none !important; opacity:1 !important; transform:none !important; transition:none !important;}
.ab-static .ab-growth .ab-chart .cline path{stroke-dasharray:none !important; stroke-dashoffset:0 !important;}
@media (prefers-reduced-motion: reduce){
	.ab-growth .ab-clients.is-in li,
	.ab-growth .ab-chart.is-in .col,
	.ab-growth .ab-chart .cline.is-on .dot.a,
	.ab-growth .ab-chart .cline.is-on .dot.b,
	.ab-growth .ab-chart .cline.is-on path{animation:none;}
	.ab-growth .ab-chart .cline.is-on path{stroke-dasharray:none;}
	.ab-growth .ab-chart.is-live .num{transition:none;}
}

/* ---- 반응형 (표준 기준값 + area 고정폭 해제 예외 1540 = 1480+60) ---- */
@media all and (max-width:1540px){
	.ab-growth .area{max-width:none; padding:0 var(--area-padding);}	/* 템플릿 공통(layout_responsive)은 1280 에서만 해제 → 1281~1480 에서 로고 그리드가 가장자리에 붙는 것 방지 (섹션 스코프 보정, how 섹션과 동일 관례) */
}
@media all and (max-width:1024px){
	.ab-growth .ab-clients{grid-template-columns:repeat(4, minmax(0, 1fr));}	/* 6열 → 4열 (셀 ≈224px 유지, 5행) */
}
@media all and (max-width:800px){
	.ab-growth{margin-top:10rem; padding-bottom:8rem;}
	.ab-growth .ab-clients{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.2rem; margin-top:6rem;}	/* 3열 세로 적층 (7행) */
	.ab-growth .ab-chart .yr{font-size:max(1.25cqw, 1.1rem);}	/* 캔버스 비례 4~5px 는 판독 불가 → 하한 (박스 하단 정렬이라 숫자와 겹치지 않음) */
	.ab-growth .ab-sales{margin-top:2rem; font-size:1.4rem;}
}
@media all and (max-width:480px){
	.ab-growth .ab-clients{gap:1rem;}
}
/* 도트 상시 움직임: .is-set 부유(위) — 09-10 사선 스윕 마스크 대체 */
.ab-growth .ab-chart-svg .col rect{transform-box:fill-box; transform-origin:center;}
.ab-static .ab-growth .ab-chart .col rect{animation:none !important; opacity:1 !important; transform:none !important;}
.ab-static .ab-growth .ab-chart .dots{opacity:1 !important;}
/* 매출 라벨 sticky bottom (사용자 지시 09-09): 차트 컨테이너가 보이는 동안 뷰포트 하단에 고정 → 본래 위치에 오면 해제 */
.ab-growth .ab-chart-wrap{position:relative;}
.ab-growth .ab-sales{position:sticky; bottom:2.4rem; z-index:3;}
.ab-static .ab-growth .ab-sales{position:static !important;}
@media (prefers-reduced-motion: reduce){
	.ab-growth .ab-chart.is-set .col rect.is-float{animation:none;}
}
/* @@/SEC:growth */

/* @@SEC:capability */
/* -------- Capability (R&D 센터 + 지표 5종) — Figma 281:5161 실측 (abs 5630~6760 · h1130, growth 끝과 간격 0)
   · 건물 Image 281:5162/5164: 래퍼 sec(0,-72) 1920×1314(마스크 가시폭) / img 2086×1314 cover 좌상단 기준 — 위 72 / 아래 112 섹션 밖 돌출(클립 없음, 다음 섹션이 위에 덮임)
     상·하 검정 그라디언트(::before 0→20% / ::after 80→100%, 래퍼 1314 기준) = 시안 알파 마스크(0%→α0, 20%→1, 80%→1, 100%→0) 와 #000 배경 위에서 픽셀 동치
   · tit 281:5165: sec y120 중앙, 868×280, drop-shadow(0 40 80 25%) / 헤드 Bold 48 lh1.2 2줄(조사 Regular, 강조 #ff5f2f — main-color 아님) / 영문 Regular 20 lh1.5
   · Data Box 281:2178~: sec y570, 280² ×5 gap 20 (x 220~1700). bg rgba(255,255,255,.05) + backdrop blur(10) + 1px rgba(255,255,255,.5) — 보더는 inset box-shadow 로 그려
     자식 절대좌표가 박스 외곽 기준(Figma 좌표계)이 되게 한다. Active(variant): bg main-color + 1px rgba(255,60,0,.5)
   · 정적 계약: 자연 상태 = 시안 상태(전부 Default, 숫자 최종값, 단색 보더). 숨김(.pre/.up)·회전 엣지(.is-live .edge)는 런타임 클래스에만 두고 .ab-static 에서 제거
   · 풀블리드 건물은 192rem 고정 캔버스 좌우대칭 중앙 정렬(1536 이하 균등 크롭), 1280 이하는 섹션 전체 cover 배경으로 전환 -------- */
.ab-capability{position:relative; z-index:0; height:113rem; margin-top:0; padding-top:12rem; box-sizing:border-box; overflow:visible;}

/* 건물 — 래퍼 192rem×131.4rem, top -7.2rem, 중앙 정렬(1920 에서 left 0). img 208.6rem cover 좌상단 → 우측 16.6rem 은 래퍼 밖(시안 마스크 폭 1920) */
.ab-capability .ab-cap-bldg{position:absolute; left:50%; top:-7.2rem; z-index:0; width:192rem; height:131.4rem; margin-left:-96rem; overflow:hidden; pointer-events:none;}
.ab-capability .ab-cap-bldg img{display:block; width:208.6rem; height:100%; max-width:none; object-fit:cover; object-position:left top; transform-origin:50% 50%;}	/* 라이브: JS 스크롤 줌아웃 scale 1.3→1 (래퍼 overflow hidden 안에서 확대) — 정적은 transform 없음 */
.ab-capability .ab-cap-bldg:before,
.ab-capability .ab-cap-bldg:after{content:""; position:absolute; left:0; right:0; z-index:1; height:20%; pointer-events:none;}
.ab-capability .ab-cap-bldg:before{top:0; background:linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%);}
.ab-capability .ab-cap-bldg:after{bottom:0; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);}

/* 타이틀 — sec y120 (padding-top), 중앙. 헤드 4.8rem/1.2 (코어 5.6/1 오버라이드), 강조 #ff5f2f */
.ab-capability .ab-sec-tit{position:relative; z-index:1; text-shadow:0 4rem 8rem rgba(0,0,0,0.25);}	/* drop-shadow 필터 → text-shadow (경량화 09-16) */
.ab-capability .ab-sec-tit .head{font-size:4.8rem; line-height:1.2;}
.ab-capability .ab-sec-tit .head .point{color:#ff5f2f;}
.ab-capability .ab-sec-tit .head .pc-br{display:inline;}	/* 2줄 헤드: 템플릿 .pc-br 은 1280 이하에서 숨지만 코어 헤드는 1024 까지 nowrap → 디자인 줄바꿈을 1024 까지 유지(아래 1024 블록에서 해제) */
.ab-capability .nb{white-space:nowrap;}

/* 데이터 박스 5종 — sec y570, 중앙 flex (28rem ×5 + 2rem ×4 = 148rem → x 220~1700) */
.ab-capability .ab-cap-boxes{position:absolute; left:0; right:0; top:57rem; z-index:2; display:flex; justify-content:center; align-items:center; gap:2rem; margin:0; padding:0; list-style:none; box-sizing:border-box;}
.ab-capability .ab-cap-box{
	position:relative; flex:none; width:28rem; height:28rem; box-sizing:border-box; overflow:hidden; border-radius:0;
	color:#fff; cursor:default;
	background:rgba(255,255,255,0.05);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
	-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
	transition:background-color 0.35s ease, box-shadow 0.35s ease;
}
/* Active (컴포넌트 variant state=Active) — 스테이지 순환(.is-active) / hover */
.ab-capability .ab-cap-box.is-active{background:var(--main-color, #f15a2c); box-shadow:inset 0 0 0 1px rgba(255,60,0,0.5);}
@media (hover:hover){
	.ab-capability .ab-cap-box:hover{background:var(--main-color, #f15a2c); box-shadow:inset 0 0 0 1px rgba(255,60,0,0.5);}
}
/* 라벨 — Figma 좌표 left:center px + translate(-50%) 를 텍스트 폭으로 환산하면 전 박스 원점 27.3~28.6 (= 상·우·하 27 인셋 체계). 시안샷 잉크 시작 29.4 실측과 일치 */
.ab-capability .ab-cap-box .label{position:absolute; top:2.7rem; left:2.7rem; z-index:2; font-size:2rem; font-weight:700; line-height:1; letter-spacing:-0.02em; color:#fff; white-space:nowrap;}
/* 숫자 그룹 — 우하 27, 숫자 SemiBold 72 lh.83 (트래킹 박스별 ctx 값: 01 -4.32px / 02·03 -3.6 / 04 -2.88 / 05 iR -0.32·52 -1.12) + 단위 Bold 24 (lh 1.05 / 1.2), gap 4 (01 은 0)
   · Figma 는 마지막 글자 뒤 트래킹을 텍스트 박스 폭에 넣지 않지만 Chrome 은 넣는다(시안샷 잉크 실측: 숫자→단위 간격 Figma 가 3~5px 넓음) → 트래킹 절대값만큼 margin-right 로 상쇄 */
.ab-capability .ab-cap-box .num{position:absolute; right:2.7rem; bottom:2.7rem; z-index:2; display:flex; align-items:flex-end; justify-content:flex-end; gap:0.4rem; white-space:nowrap;}
.ab-capability .ab-cap-box .num b{display:block; margin-right:0.36rem; font-size:7.2rem; font-weight:600; line-height:0.83; letter-spacing:-0.05em; color:#fff;}
.ab-capability .ab-cap-box .num .unit{display:block; font-size:2.4rem; font-weight:700; line-height:1.2; letter-spacing:0; color:#fff;}
.ab-capability .ab-cap-box.b01 .num{gap:0;}
.ab-capability .ab-cap-box.b01 .num b{margin-right:0.432rem; letter-spacing:-0.06em;}
.ab-capability .ab-cap-box.b01 .num .unit{line-height:1.05;}
.ab-capability .ab-cap-box.b04 .num b{margin-right:0.288rem; letter-spacing:-0.04em;}
.ab-capability .ab-cap-box.b05 .num{right:2rem;}
.ab-capability .ab-cap-box.b05 .num b{margin-right:0.112rem; letter-spacing:0;}
.ab-capability .ab-cap-box.b05 .num .ir{letter-spacing:-0.0044em;}
.ab-capability .ab-cap-box.b05 .num .n52{letter-spacing:-0.0156em;}

/* 라이브 전용 — 보더 위를 도는 그라디언트 라인 (인트로 카드 엣지 기법: padding 1px 의사요소 + mask xor 1px 링 + 회전 코닉).
   자연 상태에서는 표시하지 않음(display:none) → 시안 정지 상태 = 단색 50% 보더. 라이브 모듈이 .ab-cap-boxes.is-live 를 부여할 때만 표시 */
.ab-capability .ab-cap-box .edge{
	display:none; position:absolute; inset:0; z-index:4; padding:1px; box-sizing:border-box; overflow:hidden; pointer-events:none;
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite:exclude;
}
.ab-capability .ab-cap-boxes.is-live .edge{display:block;}
.ab-capability .ab-cap-box .edge:before{
	content:""; position:absolute; left:50%; top:50%; width:150%; aspect-ratio:1/1; transform:translate(-50%,-50%) rotate(0deg);
	background:conic-gradient(from 0deg,
		rgba(255,255,255,0) 0deg, rgba(255,255,255,0.9) 60deg, rgba(255,255,255,0) 120deg,
		rgba(255,255,255,0) 180deg, rgba(255,255,255,0.45) 240deg, rgba(255,255,255,0) 300deg, rgba(255,255,255,0) 360deg);
	animation:abCapEdge 6s linear infinite; will-change:transform;
	animation-delay:calc(var(--i, 0) * -1.2s);	/* 박스별 위상 차 */
}
@keyframes abCapEdge{to{transform:translate(-50%,-50%) rotate(360deg);}}
/* 순차 등장 — 숨김은 런타임 .pre 에만, .up 은 backwards(종료 후 자연 상태 복귀 → 글라스 보존) */
.ab-capability .ab-cap-box.pre{opacity:0; transform:translateY(6rem);}
.ab-capability .ab-cap-box.up{animation:abCapBoxUp 0.9s cubic-bezier(0.22,0.61,0.36,1) calc(var(--i, 0) * 0.16s) backwards;}	/* 첫 도달 시 5개 순차 등장 (사용자 지시 09-09: 간격 160ms) */
@keyframes abCapBoxUp{
	from{opacity:0; transform:translateY(6rem); filter:blur(6px);}
	60%{filter:none;}
	to{opacity:1; transform:translateY(0); filter:none;}
}
/* 정적 게이트 (캡처 빌드 / reduced-motion) — 시안 정지 상태: 전부 Default·표시, 엣지 없음 */
.ab-static .ab-capability .ab-cap-box{opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; background:rgba(255,255,255,0.05) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5) !important;}
.ab-static .ab-capability .ab-cap-box .edge{display:none !important;}
@media (prefers-reduced-motion: reduce){
	.ab-capability .ab-cap-box.up,
	.ab-capability .ab-cap-box .edge:before{animation:none;}
	.ab-capability .ab-cap-box.pre{opacity:1; transform:none;}
	.ab-capability .ab-cap-box{transition:none;}
}

/* ---- 반응형 (시안은 1920 단일 — 이하 구간은 구현 판단, 표준 기준값만) ---- */
@media all and (min-width:1921px){
	.ab-capability .ab-cap-bldg{top:-25rem; left:auto; width:105%;margin-left:0;}
	.ab-capability .ab-cap-bldg img{width:100%;}
}
@media all and (max-width:1280px){
	.ab-capability{height:auto; padding-bottom:28rem;}	/* PC 박스 하단 여백(1130-850=280) 유지 */
	.ab-capability .ab-cap-bldg{left:0; top:0; bottom:0; width:100%; height:auto; margin-left:0;}	/* 192rem 캔버스가 165vw 가 되는 구간 → 섹션 전체 cover 배경으로 전환 */
	.ab-capability .ab-cap-bldg img{width:100%; height:100%; object-position:40% 50%;}	/* 건물 중심(원본 x≈40%)이 화면 중앙에 오도록 */
	.ab-capability .ab-cap-boxes{position:relative; left:auto; right:auto; top:auto; margin:17rem 0 0; padding:0 var(--area-padding); flex-wrap:wrap;}	/* 3+2 단 */
}
@media all and (max-width:1024px){
	.ab-capability .ab-sec-tit .head .pc-br{display:none;}	/* 코어가 헤드 white-space:normal 로 전환하는 구간 — 자연 줄바꿈 */
}
@media all and (max-width:800px){
	.ab-capability{padding-top:10rem; padding-bottom:14rem;}
	.ab-capability .ab-sec-tit .head{font-size:3rem;}
	.ab-capability .ab-cap-boxes{margin-top:8rem;}	/* 28rem 박스 2단 적층 (2+2+1) */
}
@media all and (max-width:640px){
	.ab-capability .ab-cap-box{width:calc(50% - 1rem); height:auto; aspect-ratio:1/1;}	/* 2열 정사각 */
	.ab-capability .ab-cap-box .label{top:2rem; left:2rem; right:2rem; font-size:1.8rem; line-height:1.2; white-space:normal;}
	.ab-capability .ab-cap-box .num,
	.ab-capability .ab-cap-box.b05 .num{right:2rem; bottom:2rem;}
	.ab-capability .ab-cap-box .num b{font-size:5.6rem;}
	.ab-capability .ab-cap-box .num .unit{font-size:2rem;}
}
@media all and (max-width:480px){
	.ab-capability{padding-bottom:10rem;}
	.ab-capability .ab-cap-boxes{gap:1.6rem;}
	.ab-capability .ab-cap-box{width:calc(50% - 0.8rem);}
}
/* 박스 아웃라인 (사용자 지시 09-09): 메인 인트로 카드 엣지와 동일한 코닉 그라디언트 라인을 흰색으로 — 정적 상태에도 표시 (좌상 최대 299deg / 우하 재점화 119deg), 라이브는 느린 회전 */
.ab-capability .ab-cap-box{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);}
.ab-capability .ab-cap-box .edge{display:block;}
.ab-capability .ab-cap-box .edge:before{
	background:conic-gradient(from 0deg,
		rgba(255,255,255,0.3) 0deg, rgba(255,255,255,0) 25deg,
		rgba(255,255,255,0) 75deg, rgba(255,255,255,0.85) 119deg, rgba(255,255,255,0) 165deg,
		rgba(255,255,255,0) 220deg, rgba(255,255,255,0.95) 299deg, rgba(255,255,255,0.3) 360deg);
	animation-duration:10s;
}
.ab-static .ab-capability .ab-cap-box{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18) !important;}
.ab-static .ab-capability .ab-cap-box .edge{display:block !important;}
.ab-static .ab-capability .ab-cap-box .edge:before{animation:none !important; transform:translate(-50%,-50%) rotate(0deg) !important;}
/* 배경영상 노출에 맞춰 건물 상·하 페이드를 검정 오버레이 대신 알파 마스크로 (시안 알파 마스크 0/20/80/100% 동일 수치) */
.ab-capability .ab-cap-bldg::before, .ab-capability .ab-cap-bldg::after{display:none !important;}
.ab-capability .ab-cap-bldg{-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 20%, #000 80%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 20%, #000 80%, rgba(0,0,0,0) 100%);}
/* 하단 블랙 그라디언트 (사용자 지시 09-10): 건물 하단~섹션 아래 여백까지 검정으로 잠겨 배경영상 노출 억제 (박스 z2 아래, 건물 z0 위) */
.ab-capability::after{content:""; position:absolute; left:0; right:0; bottom:-60rem; height:88rem; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 25%, #000 32%, #000 50%, rgba(0,0,0,0) 100%);}	/* 박스 하단 아래 → 섹션 끝(32%)~What we do 시작(50%) 순검정 → What we do 상단 44rem 에 걸쳐 위→아래로 풀림: 배경영상·카드가 검정에서 자연스럽게 드러남 (사용자 지시 09-10 2차). 후속 섹션이 DOM 뒤라 텍스트·카드 위로는 안 덮임 */
/* @@/SEC:capability */

/* @@SEC:whatwedo */
/* @@SEC:whatwedo */
/* -------- What we do (EX / TS) — Figma 281:5129 실측 (abs 6920~7951 · h1031)
   · 이전 섹션(capability 끝 6760)과 160 간격 = margin-top 16rem
   · tit 201(라벨 40 + 32 + 헤드 56×lh1.2 + 32 + 영문 20×lh1.5) → 80 → 카드 590 → 160 = 섹션 끝
   · 카드 730×590 = 사진 730×410(위) + 검정 패널 730×210 (사진 위로 30px 겹침, z 상위) — 오버레이/그라디언트/블러 없음
   · 패널 좌상단 28×28 픽셀 체커 노치(14px 셀 2×2: TL 검정 / TR 뚫림 / BL 뚫림 / BR 검정) — clip-path 로 뚫어 뒤 사진이 보인다 (별도 색 없음)
   · 시안 모션 없음(motionSummary null) → 카드 fade-up 은 템플릿 data-scroll(EX→TS 150ms), 패널 텍스트는 코어 캐스케이드(manual), 세로선은 드로우
   · 정적 계약: 자연 상태(클래스 없음) = 시안 정지 상태. 숨김 초기값은 런타임 클래스(.ab-wd-pre)에만 두고 .ab-static 에서 강제 복귀. 호버 효과 없음 -------- */
.ab-whatwedo{position:relative; margin-top:16rem; padding:0 0 16rem; box-sizing:border-box;}
.ab-whatwedo .ab-sec-tit{margin-bottom:8rem;}
.ab-whatwedo .ab-sec-tit .head{line-height:1.2;}	/* ctx leading-[1.2] (박스 1161×67) — 코어 lh1 과 다르므로 섹션 스코프 보정 */
.ab-whatwedo .nb{white-space:nowrap;}	/* 공백 없이 붙은 어절(<b>사업</b>을) 줄바꿈 방지 — 1024 이하 헤드 wrap 구간용 */

/* 카드 리스트 : .area(--area-width 1480) = 카드 730×2 + gap 20 (abs x 220~1700) */
.ab-whatwedo .ab-wd-list{display:flex; align-items:flex-start; gap:2rem; box-sizing:border-box;}
.ab-whatwedo .ab-wd-card{position:relative; isolation:isolate; flex:1 1 0; min-width:0; box-sizing:border-box; will-change:auto !important;}

/* 사진 730×410 — radius 0, object-fit cover 중앙 (EX 1.7816 / TS 1.7778 → 상하 1~2px 크롭) */
.ab-whatwedo .ab-wd-card .img{position:relative; z-index:0; overflow:hidden; width:100%; aspect-ratio:730/410; background:#000;}
.ab-whatwedo .ab-wd-card .img img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%;}

/* 패널 730×210 : 단색 #000, 사진 위 30px 겹침(z1). 좌상단 노치 = clip-path polygon (셀 1.4rem = 14px @1920, rem 스케일 동반)
   polygon 경로 : (0,28)→(14,28)→(14,14)→(0,14)→(0,0)→(14,0)→(14,14)→(28,14)→(28,0)→(730,0)→(730,210)→(0,210)  — TR·BL 셀이 뚫려 뒤 사진 노출 */
.ab-whatwedo .ab-wd-card .panel{
	position:relative; z-index:1; height:21rem; margin-top:-3rem; padding:4.8rem 5rem 0; box-sizing:border-box;
	background:#000; color:#fff;
	-webkit-clip-path:polygon(0 2.8rem, 1.4rem 2.8rem, 1.4rem 1.4rem, 0 1.4rem, 0 0, 1.4rem 0, 1.4rem 1.4rem, 2.8rem 1.4rem, 2.8rem 0, 100% 0, 100% 100%, 0 100%);
	clip-path:polygon(0 2.8rem, 1.4rem 2.8rem, 1.4rem 1.4rem, 0 1.4rem, 0 0, 1.4rem 0, 1.4rem 1.4rem, 2.8rem 1.4rem, 2.8rem 0, 100% 0, 100% 100%, 0 100%);
}
/* cate (50,48) SemiBold 14 lh1 tracking −0.42px(−0.03em) */
.ab-whatwedo .ab-wd-card .cate{display:block; font-size:1.4rem; font-weight:600; font-style:normal; line-height:1; letter-spacing:-0.03em; color:#fff; white-space:nowrap;}
/* 타이틀 행 : cate 하단(62) → 86 = margin-top 24. strong 50% = (730−100)/2 = 315 → 세로선 x 365(50%), 설명 x 415(365+1+49), 폭 265 */
.ab-whatwedo .ab-wd-card .row{display:flex; align-items:flex-start; margin-top:2.4rem;}
.ab-whatwedo .ab-wd-card strong{flex:0 0 50%; min-width:0; padding-right:5rem; box-sizing:border-box; font-size:3.2rem; font-weight:700; line-height:1.3; letter-spacing:-0.01em; color:#fff; white-space:nowrap;}	/* (50,86) 265×84 Bold 32 lh1.3 −0.32px */
.ab-whatwedo .ab-wd-card .vline{flex:none; display:block; width:1px; height:8rem; margin-top:0.1rem; background:rgba(255,255,255,0.15); transform-origin:50% 0; transition:transform 0.8s cubic-bezier(0.22,0.61,0.36,1) calc(var(--ab-card, 0s) + 0.3s);}	/* x365 y87 h80 1px 15% */
.ab-whatwedo .ab-wd-card p{flex:1 1 0; min-width:0; margin-top:0.3rem; padding-left:4.9rem; box-sizing:border-box; font-size:1.6rem; font-weight:400; line-height:1.55; letter-spacing:-0.03em; color:#fff; white-space:nowrap;}	/* (415,89) 265×75 Regular 16 lh1.55 −0.48px */

/* 모션 : 세로선 드로우 — 런타임에만 .ab-wd-pre(scale 0, 전환 없이 즉시 숨김) 를 붙였다가 뷰 진입 시 제거 → 기본 transition 으로 드로우 (자연 상태 = 시안) */
.ab-whatwedo .ab-wd-card.ab-wd-pre .vline{transform:scaleY(0); transition:none;}
/* 정적 게이트 (캡처 빌드 / reduced-motion) — 시안 정지 상태로 강제 */
.ab-static .ab-whatwedo .ab-wd-card .vline{transform:none !important; transition:none !important;}
@media (prefers-reduced-motion: reduce){
	.ab-whatwedo .ab-wd-card .vline{transition:none; transform:none;}
}

/* -------- 반응형 (모바일 시안 없음 — 표준 기준값 + area 고정폭 해제 예외 1540) -------- */
@media all and (max-width:1540px){	/* .area(1480)+60 해제 구간 — layout_responsive 는 1280 에서만 해제해 1281~1480 에서 카드가 화면 가장자리에 붙음 (섹션 스코프 보정) */
	.ab-whatwedo .ab-wd-list{max-width:none; padding:0 var(--area-padding);}
}
@media all and (max-width:1280px){	/* .pc-br 해제 구간 : 2단(타이틀 | 세로선 | 설명) 유지, 패널 높이 자동(두 카드 동일 높이), 텍스트 자연 줄바꿈 */
	.ab-whatwedo .ab-wd-list{align-items:stretch;}
	.ab-whatwedo .ab-wd-card{display:flex; flex-direction:column;}
	.ab-whatwedo .ab-wd-card .img{flex:none;}
	.ab-whatwedo .ab-wd-card .panel{flex:1 0 auto; height:auto; padding:4rem 4rem 4rem;}
	.ab-whatwedo .ab-wd-card .row{margin-top:2rem;}
	.ab-whatwedo .ab-wd-card strong{padding-right:3rem; white-space:normal;}
	.ab-whatwedo .ab-wd-card .vline{align-self:stretch; height:auto; min-height:8rem;}
	.ab-whatwedo .ab-wd-card p{padding-left:3rem; white-space:normal;}
}
@media all and (max-width:1024px){
	.ab-whatwedo .ab-sec-tit .head{line-height:1.3;}	/* 코어 1024 wrap 규칙(lh1.3) 복원 — 위 섹션 스코프 lh1.2 보정이 특이성으로 덮지 않도록 */
	.ab-whatwedo .ab-wd-card .panel{padding:3.6rem 3.6rem 3.6rem;}
	.ab-whatwedo .ab-wd-card strong{padding-right:2.4rem;}
	.ab-whatwedo .ab-wd-card p{padding-left:2.4rem;}
}
@media all and (max-width:800px){	/* 모바일 : 카드 1열 스택 (폭 720 → 패널 여백 시안 비율 복귀) */
	.ab-whatwedo{margin-top:10rem; padding-bottom:10rem;}
	.ab-whatwedo .ab-sec-tit{margin-bottom:5rem;}
	.ab-whatwedo .ab-wd-list{flex-direction:column; gap:3rem;}
	.ab-whatwedo .ab-wd-card{flex:none; width:100%;}
	.ab-whatwedo .ab-wd-card .panel{flex:none; padding:4rem 4rem 4rem;}
	.ab-whatwedo .ab-wd-card strong{padding-right:4rem;}
	.ab-whatwedo .ab-wd-card p{padding-left:4rem;}
}
@media all and (max-width:640px){
	.ab-whatwedo .ab-wd-card .panel{padding:3.6rem 3.6rem 3.6rem;}
	.ab-whatwedo .ab-wd-card strong{padding-right:3rem; font-size:2.8rem;}
	.ab-whatwedo .ab-wd-card p{padding-left:3rem;}
}
@media all and (max-width:480px){	/* 소형 모바일 : 패널 세로 적층 (타이틀 / 가로선 / 설명) */
	.ab-whatwedo{margin-top:8rem; padding-bottom:8rem;}
	.ab-whatwedo .ab-wd-card .panel{padding:3rem 3rem 3rem;}
	.ab-whatwedo .ab-wd-card .row{display:block;}
	.ab-whatwedo .ab-wd-card strong,
	.ab-whatwedo .ab-wd-card p{display:block; width:auto; padding:0;}
	.ab-whatwedo .ab-wd-card p{margin-top:0; font-size:1.5rem;}
	.ab-whatwedo .ab-wd-card .vline{width:100%; height:1px; min-height:0; margin:2rem 0; transform-origin:0 50%;}
	.ab-whatwedo .ab-wd-card.ab-wd-pre .vline{transform:scaleX(0);}
}
/* @@/SEC:whatwedo */
/* @@/SEC:whatwedo */

/* -------- 공통 반응형 (코어 요소만 — 섹션별 반응형은 각 섹션 블록 안에) -------- */
@media all and (max-width:1024px){
	.ab-sec-tit .head{white-space:normal; line-height:1.3; padding:0 var(--area-padding);}
}
@media all and (max-width:800px){
	.ab-sec-tit .head{font-size:3.4rem;}
	.ab-sec-tit .en{font-size:1.6rem;}
}