@charset "utf-8";
/* main.css는 메인 페이지 전용 스타일 정의 */
/* [P-03] 이 파일은 자체 @media 블록을 두지 않는다 — 반응형은 responsive.css 「main : responsive」
구간(css/responsive.css)으로 이관됐다. 2026-09-04 골격 반응형 분리. */
/* [정정 · 좌우 캡처 대조로 발견] #header 는 `position:fixed`라 애초에 문서 흐름 높이를 차지하지
않는다 — 불투명 흰 배경으로 바꿨다고 별도 여백을 또 예약하면 실제 히어로 위에 86px 빈
공백이 이중으로 생긴다(시안은 헤더가 히어로 프레임(960px) 안에 포함돼 있다 — get_metadata
`11:447` 960 = 헤더 86 + 이미지 영역 874, 별도 가산 없음). 문서 높이가 시안(5542)보다 컸던
원인 중 하나(섹션마다 86px 씩 밀림)였다 — padding-top 을 없애 겹침 구조로 되돌린다.
히어로 상단 86px 은 원래도 이미지일 뿐이라 흰 헤더에 가려져도 콘텐츠 손실이 없다. */
#main{padding-top:0;}
/* ─────────────────────────────────────────────
m-visual : S (섹션 패턴 : 비주얼형)
───────────────────────────────────────────── */
.m-visual{
/* [반응형 2026-09-17 §최종시안 재측정 · G-14] 옛 값(height:100vh)은 시안 리터럴이 아니었다 —
실측(get_metadata(11:447)): 프레임 "00_M" 1920×960(=GNB 86 + 이미지 영역 874). 100vh 는
1080px 뷰포트에서 렌더 1080px 로, 원본 폭 1920 짜리 이미지를 세로 기준 cover 스케일하며
가로까지 5.5% 확대해 흐려지는 결함을 냈다(작업 문서/§11-6 DOM 측정 0.992/1.055).
1920 폭에서 960px(비율 0.5)를 유지하는 height:50vw 로 고정 — 1920 기준일 때만 정확히
리터럴과 일치하고, 그 사이 폭(1025~1919)은 같은 비율로 줄어드는 재배치다(새 요소 없음).
1024 이하는 아래 responsive.css 가 height:auto + min-height 로 이미 덮어써 비율 유지를
포기하고 콘텐츠 높이를 우선한다(문구가 줄바꿈되며 늘어나므로 — 기존 결정 유지). */
position:relative;width:100%;height:50vw;min-height:600px;overflow:hidden;
/* [INT-01 상태 정의 — M-01 줌] 값은 js/main.js 의 W01_TEMP 가 setProperty 로 주입한다(단일
출처). 여기 기본값은 JS 미실행(비정상) 시 폴백일 뿐이다. 실제 transform·transition·이징은
모션 담당(MOT-03 — .backdrop 의 transform 주인은 줌 하나뿐이어야 한다) — 아래
.backdrop 규칙에는 정적 scale 한 줄만 있고 전환은 모션 이 추가한다. */
--zoom-scale-start:1.25;
--zoom-scale-end:1;
--zoom-duration:5000ms;
}
.m-visual .visual,
.m-visual .swiper-wrapper,
.m-visual .swiper-slide{height:100%;}
.m-visual .swiper-slide{position:relative;}
.m-visual .backdrop{
position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;
/* [모션 · MOT-03] 이 요소의 transform 주인은 줌 하나뿐 — 다른 효과를 더할 때는 이 규칙과
상의한다. 대기 슬라이드 = scale(--zoom-scale-start,1.25) · 활성 슬라이드 =
scale(--zoom-scale-end,1). 지속시간은 js/main.js 가 setProperty 로 주입하는
--zoom-duration 한 곳만 본다(W01_TEMP 임시값 — 값이 바뀌면 여기는 안 고쳐도 된다).
이징 — L4(onegrove.kr) 계산값 표본은 초반 빠르고 뒤로 갈수록 계속 느려지는 감속형이며
30~60초 구간에서도 속도가 더 줄어 단순 ease-out 보다 꼬리가 길다(해석서 §2-5-2). animista
곡선 표에서 그 성질(강한 지속 감속)에 가장 가까운 이름 있는 곡선은 easeOutExpo — 선정
(근거: 해석서가 확보한 것은 「감속형」이라는 성질뿐이고 정확한 이름은 미확보라, 표본이
보인 "끝까지 느려짐" 특성과 가장 가까운 기성 곡선을 골랐다. 확보값이 아니라 선정값이다). */
transform:scale(var(--zoom-scale-end));
transition:transform var(--zoom-duration) cubic-bezier(.19,1,.22,1);
}
.m-visual .swiper-slide:not(.swiper-slide-active) .backdrop{transform:scale(var(--zoom-scale-start));}
.m-visual .backdrop img,
.m-visual .backdrop video{width:100%;height:100%;object-fit:cover;}
/* [W-04 반영 · G-14] get_design_context(1:400) node 1:401 실측 — 평면 반투명 아니라 상단→하단
그라디언트다. 베이스 #0a1139 는 이미지가 비칠 때만 보이는 배경색(이미지가 실사진으로
교체됐으므로 실질적으로 화면엔 안 보임 — 이미지 로드 실패 폴백용으로만 남긴다). */
.m-visual .backdrop{background:#0a1139;}
.m-visual .backdrop:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,.2) 7.5%,rgba(0,0,0,0) 17.917%);}
.m-visual .container{display:flex;flex-direction:column;justify-content:center;height:100%;}
/* [QA5-04/05 해소] 셀렉터를 `.swiper-slide h2` 로 좁힌다 — 옛 `.m-visual h2` 는 히어로 안의 다른
h2(`.m-visual__strip-tit`)까지 매치해 opacity:0 이 reduce 상태에서 그대로 남는 결함(QA5-04)과
68px 크기가 띠 제목에도 적용되는 결함(QA5-05)을 같이 냈다 — 빼보기로 원인 확인(검수). */
/* [P5B-02 재작업 · get_design_context(15:5538) 노드별 개별 조회 — 뭉쳐서 조회하면 틀린 값이 온다
(재발 대조 H2·H5) — 46px/1.4 Bold, letter-spacing 0(리터럴에 값 없음 = 0, 기존 -1.38px 규칙값 폐기).
가로 흐름 순서대로 margin-top 을 기록: 13:595(badge→h2) gap14 · outer(13:609) gap20 ·
13:596(lead→desc) gap2 · outer gap20(divider 앞뒤 동일) · 10:401(desc-note→tel) gap8 ·
13:678(그룹→tags) gap28. */
.m-visual .swiper-slide h2{
margin-top:14px;font-size:46px;font-weight:700;line-height:1.4;color:#fff;letter-spacing:0;
opacity:0;transform:translateY(40px);transition:all 1.2s ease .5s;
}
/* [W-02 해제 재작업 · 리터럴] Figma 1:400 node 1:810 강조 span 색 = Primary/Blue3 #72d2ff */
.m-visual .swiper-slide h2 .accent{color:var(--c-primary-light);}
.m-visual .swiper-slide-active h2,
.m-visual .swiper-slide-active .badge,
.m-visual .swiper-slide-active .lead,
.m-visual .swiper-slide-active .desc,
.m-visual .swiper-slide-active .desc--note{opacity:1;transform:translateY(0);}
/* [W-02 해제 재작업 · 리터럴] Figma 1:400 node 10:372 실측 — bg rgba(9,51,162,.7) · radius 12px ·
padding 8px 16px · font 16px Regular · **width 340px, 가운데 정렬**(P5B-02 — 이전 판은 폭이
1440px 전체로 늘어나 있었다). gap(13:595, 배지→제목) 14px 는 h2 margin-top 으로 반영. */
.m-visual .badge{
display:inline-flex;width:340px;max-width:100%;padding:8px 16px;justify-content:center;border-radius:12px;
background:rgba(9,51,162,.7);color:#fff;font-size:var(--fs-body-s);font-weight:400;line-height:1.4;
opacity:0;transform:translateY(40px);transition:all 1.2s ease .3s;
}
.m-visual .badge2{width: 192px;}
/* [P5B-02 재작업] Body3(node 1:806) — 18px SemiBold 흰, 제목과 gap28 */
.m-visual .lead{
margin-top:28px;font-size:var(--fs-gnb);font-weight:600;line-height:1.6;color:#fff;letter-spacing:0;
opacity:0;transform:translateY(40px);transition:all 1.2s ease .8s;
}
/* [P5B-02 재작업] Body4(node 1:776) — 16px Regular #ccc, lead 와 gap2(같은 13:596 묶음),
폭은 부모 Txt(15:5538) 738px 그대로(기존 640 근사 폐기) */
.m-visual .desc{
margin-top:2px;max-width:738px;font-size:var(--fs-body-s);font-weight:400;line-height:1.6;color:#ccc;letter-spacing:0;
opacity:0;transform:translateY(40px);transition:all 1.2s ease .9s;
}
.m-visual .desc2{
margin: 28px 0 0px;
}
/* [P5B-02 재작업] 두 번째 desc(node 10:352, "건물 연면적을...") — 18px Regular 흰, divider 뒤 gap20 */
.m-visual .desc--note{
margin-top:20px;max-width:738px;font-size:var(--fs-gnb);font-weight:400;line-height:1.6;color:#fff;letter-spacing:0;
opacity:0;transform:translateY(40px);transition:all 1.2s ease .9s;
}
/* [마크업i §23] get_metadata(15:5538) node 13:810「Line 10」리터럴 — w625·색상 정보 없어(단순
선, 별도 fill 미기재) 기존 --c-line-weak 계열보다 옅은 흰 반투명으로 hr 기본 border 를 대체.
[P5B-02 재작업] margin-top 20(13:609 gap20, 배지블록과 동일) — 기존 24 근사 폐기. */
.m-visual .m-visual__rule{width:625px;max-width:100%;height:0;margin:20px 0 0;border:0;border-top:1px solid rgba(255,255,255,.24);}
/* [P5B-02 재작업 · FIG-06] 전화 두 항목 사이는 구분 글자(「l」)가 아니라 gap30(node 13:602) —
글자를 임의로 추가한 게 [재발]이었다(HTML 에서 l 삭제). margin-top 8(10:401 gap8,
desc-note 와의 간격). 글자 18px Bold 흰(node 10:399/13:606). */
/* [P5C-05 재발 · P5C-06 재발 · 필수 해소 · 마크업k] 시안(`10:399`·`13:606` 세그먼트) — 「본사」·「지사」
라벨만 `#72d2ff`(나머지 전화번호는 흰). `line-height:1.6`(160%) 명시 — reset.css:150 의 전역
`line-height:1`을 이 블록이 상속해 줄 높이가 줄었고, 그 결과가 아래 태그·버튼까지 누적으로
밀어올렸다(P5C-06, `.tel`→`.area-pill`→`.btn-group` 순서로 -7·-5.5 번짐). */
.m-visual .tel{display:flex;flex-wrap:wrap;align-items:center;gap:30px;margin-top:8px;font-size:var(--fs-gnb);font-weight:700;line-height:1.6;color:#fff;}
.m-visual .tel a{display:inline-flex;align-items:center;gap:4px;font-weight:700;}
.m-visual .tel img{display:block;}
.m-visual .tel__label{color:#72d2ff;font-style:normal;}
/* [마크업i §23] get_metadata(15:5538) node 13:670「Tag」리터럴 — 항목 사이 gap 4곳 전수 8px(옛 12px 근사 정정)
[P5B-02 재작업] margin-top 28(13:678 gap28, 전화 그룹과 태그 그룹 사이 — 기존 32 근사 폐기) */
.m-visual .area-pill{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;}
/* [r13 지적 · get_design_context(15:5538) node 13:654/13:670 개별 재조회] MTag 리터럴 —
bg rgba(255,255,255,.1) · border 1px solid rgba(255,255,255,.2) · radius 8px · padding 6px 12px ·
14px Light(300) 흰. 이전 값(굵은 글씨·짙은 바탕·패딩12/20·radius --r-md)은 근사값이었다. */
.m-visual .area-pill li{
padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
color:#fff;font-size:14px;font-weight:300;line-height:1.6;box-sizing:border-box;
}
/* [마크업i §23] get_metadata(15:5540)「Btn」리터럴 — 두 버튼 사이 gap 247-235=12px(옛 16px 근사 정정) */
.m-visual .btn-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
/* [P5B-02] 위 76~79행 규칙과 합쳐 중복 제거, .desc--note 추가 */
/* [P5B-02 재작업 · get_design_context(15:5540) 개별 조회] 히어로 버튼 — auto-height + padding 14px 28px
(렌더 높이 54px, 사이트 공통 .btn h70·pad0 32 와 다르다) · 글자-화살표 gap 20px(공용 gap8 과 다름).
사이트 공통 .btn 을 바꾸면 다른 섹션이 깨지므로(sec4 선례와 동일 방식) 이 영역만 특이도로 덮는다. */
/* [P5C-06 · 필수 해소 · 마크업k] 시안 버튼 높이 54(padding14×2 + line-height160%(25.6)) — `line-height`
를 명시 안 해 reset.css 전역값 1 을 물려받아 46(14×2+16)으로 렌더됐다. */
.m-visual .btn-group .btn{height:auto;padding:14px 28px;gap:20px;font-size:var(--fs-body-s);line-height:1.6; transition:.3s; transition:.3s;}
/* CTA 버튼 공통 — [해석서 M-02] 색값·아이콘은 피그마 버튼 컴포넌트가 정본이다(G-14).
L1(https://www.invitrosco.com/) 의 #6400FF 는 가져오지 않는다(G-4) — TODO(디자인 요청):
아래 --c-primary 는 아직 원테크 브랜드 컬러가 아니라 골격 기본값이다. */
main .btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
position:relative;height:70px;padding:0 32px;border-radius:var(--r-pill);border:1px solid transparent;
font-size:var(--fs-button);font-weight:700;white-space:nowrap;
/* [INT-01 상태 정의 — M-02 버튼 호버] 색은 즉시 전환(L1 실측 패턴 대응 · 해석서 §2-4 —
.mbtnMore 의 색 전환은 transition-duration:0s 이고 0.5s 는 화살표에만 걸려 있었다).
1) 초기 상태 : 기본 배경/테두리/글자색(각 modifier) · .btn__arr 정지
2) 활성 상태(호버·포커스) : 아래 modifier 별 :hover/:focus-visible 규칙으로 색 즉시 전환
3) 열기/닫기 : 해당 없음(토글 아님)
4) 키보드 : :focus-visible 을 :hover 와 함께 건다(포인터 없이도 같은 상태 도달)
5) Mobile : 별도 분기 없음 — 터치는 클릭과 동일 취급, hover 상태는 터치에서 발생하지 않음
화살표 이동(모션 소관)은 .btn__arr 를 옮긴다 — HTM-07 에 따라 빈 장식 태그 대신
가상요소로 자리만 잡았다. 아이콘 자산(SVG)·정확한 이동 거리는 피그마 버튼 컴포넌트
미확보로 TODO(디자인 요청) — 확보 전까지 .btn__arr 는 빈 자리(폭만 있음)다. */
transition:background-color 0s,border-color 0s,color 0s;
}
.btn--sm{height:56px;padding:0 24px;font-size:var(--fs-label);}
.btn--primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff;}
.btn--primary:hover,
.btn--primary:focus-visible{background:var(--c-primary-dark);border-color:var(--c-primary-dark);}
.btn--line{background:transparent;border-color:#fff;color:#fff;}
.btn--line:hover,
.btn--line:focus-visible{background:#fff;color:var(--c-text);}
/* [QA5-09 정정] 시안 `15:5540` — 히어로 「대상 여부 확인하기」는 흰 90% 채움 pill(테두리 없음).
좌우 캡처 대조(`_qa/마크업/cmp_hero_1440.png`)에서 기존 .btn--primary(파랑) 대신 나왔어야 할 색 —
두 버튼 class 가 뒤바뀌어 있던 결함을 여기서 같이 해소한다. */
/* [P5C-24 · 권장 해소 · 마크업k] 시안 글자 `#070707`(옛 `--c-text`=#222 근사) */
.btn--white90{background:rgba(255,255,255,.9);border-color:transparent;color:#070707;}
.btn--white90:hover,
.btn--white90:focus-visible{background:#fff;}
.btn--line-invert{background:transparent;border-color:var(--c-text);color:var(--c-text);}
.btn--line-invert:hover,
.btn--line-invert:focus-visible{background:var(--c-text);color:#fff;}
/* [정정 2026-09-17] 이전 버전은 카카오 관용 노란색(#fae100)을 임시 배치했었다 — 실제로는
G-4(L1·카카오 관용색 등 「남의 색」 채우지 않기) 위반 소지가 있는 추정값이었다. Figma
node 1:213/1:214(CTA 배너 「카카오톡 문의하기」) 실측은 배경 투명 + 흰 테두리 + 흰 글자다.
.sec5 .btn--kakao(옛 .sec6, W-04 재번호)에서 그 리터럴로 덮어쓴다. .quick-visual__btn--kakao 는
§10 자산 마무리에서 최종 시안(node 40:7203) 리터럴 #FFEA00 로 확정 — 미해결 표시 해제. */
.btn--kakao{background:transparent;border:1px solid var(--c-text);color:var(--c-text);}
.btn--kakao:hover{background:var(--c-text);color:#fff;}
/* [HTM-07] 화살표는 빈 장식 태그가 아니라 가상요소 — TODO(디자인 요청): 피그마 버튼 컴포넌트
아이콘 SVG·이동거리 미확보라 현재는 폭만 있는 빈 자리다(width 0 이면 자리 자체가 없어
모션 가 검증할 대상이 안 생기므로 최소 폭만 확보).
[모션 · M-02 화살표 모션] 값은 L1(invitrosco) §2-4 실측 리터럴 그대로다 —
`animation: 0.5s 0.1s both infinite` · 색 전환은 0s(즉시, 이 파일 .btn 의 transition:0s 가 이미
담당·수정 안 함). L1 은 두 번째 화살표 아이콘이 96px 폭 안에서 -100% 만큼 흘러가는 스와핑
구조인데, 그 아이콘 SVG·정확한 이동거리(96px)가 아직 없다(위 미해결 표시와 동일 항목) — 그 값을 그대로 옮기면
자산이 없는 빈 상자를 96px 밖으로 밀어내는 것이라 FIG-06(없는 걸 만들지 않는다)에 걸릴
여지가 있어, 지금 있는 빈 자리(16px) 안에서만 움직이도록 거리값을 낮췄다(이동한다는 사실과
타이밍만 L1 실측 그대로 재현 · 거리는 자산 확보 전까지의 임시 폭). 자산이 오면 폭·이동거리를
같이 확정한다 — 위 미해결 표시(디자인 요청) 목록에 이미 있음. 현재는 배경·아이콘이 없어 화면에서는
보이지 않는다(움직일 그림이 아직 없다) — 검증 결과는 작업 문서 참고. */
/* [P5B-03 재작업 · FIG-04·재발] 시안 화살표 자산은 `Group1197`(41×10, 흰 stroke 2줄) 하나뿐이다.
이전 판은 자리마다 ① 빈 16×1 선(투명) ② 41×1 머리 없는 선 ③ `mask:url`(`file://` 더블클릭
납품에서 안 그려짐 — 빼보기·대조군으로 확인, 에이드 재발 유형)로 제각각이었다. `mask`·`background`
방식 둘 다 색상 변형마다 별도 자산이 필요해지므로, 인라인 SVG `stroke="currentColor"` 로 통일해
버튼 글자색을 그대로 따르게 한다(자산은 하나 · 9곳 전부 이 클래스 하나로 대체). */
.btn__arr{display:inline-block;flex:0 0 auto;width:41px;height:10px;}
@keyframes btnArrowMove{0%{transform:translateX(0)}100%{transform:translateX(6px)}}
.btn:hover .btn__arr,
.btn:focus-visible .btn__arr,
.btn-pill:hover .btn__arr,
.btn-pill:focus-visible .btn__arr{animation:btnArrowMove .5s .1s infinite;}
/* [§10 자산 마무리] Figma 1:400 node 40:6964「Fix_R_Btn」실측 — 아이콘 전용 원형 버튼 3개.
좌표: hero(1920 기준) left 1831 top 394 → 우측 여백 89px, 카카오·문의 두 개는 48px 원형 +
gap 8px 묶음, 그 아래 20px gap 두고 TOP 49px 원형. 원형 배경은 download_assets(40:6964)로
확인한 단색 원(카카오 #FFEA00 · 문의 #0000FF)을 CSS 배경색으로 재현(6원칙④ 예외 — 피그마
렌더와 같은 결과인 단색 배경). 글리프는 실제 SVG(images/main/ico_quick_*.svg). */
/* [P5B-14 재작업] 1920(스크롤바 없음) 재측정 — x1783(시안 1831, Δ-48). 1920-1831-49(버튼폭 절반 여백)=40 */
/* [P5C-17 · W-07 결정(06_ §32) · 마크업k] `position:absolute` 라 `scrollY` 가 늘면 `.m-visual`
문서 흐름을 따라 함께 올라가 화면 밖으로 나가고, 눌러도 반응이 없었다(검수 실측 scrollY 3000 → y −2458).
시안 레이어 구조상 `Fix_R_Btn`(40:6964)이 페이지 최상위(1:400) 직속이고 이름 자체가 고정을 뜻한다
(제작·마크업 기록) — `position:fixed` 로 바꾼다. `.m-visual` 은 transform 을 걸지 않으므로(위 285행
`position:relative` 뿐, containing-block 트랩 없음) DOM 위치를 옮기지 않아도 뷰포트 기준으로 고정된다.
1920 초기 좌표(top394/right40)는 스크롤 0 지점 값 그대로 유지 — 요청확인 사항 5 회신 전 임시
조치이며(absolute 복귀는 이 한 줄), 확인 사항 표는 그대로 둔다. */
.quick-visual{position:fixed;right:40px;top:394px;z-index:var(--z-quick);display:flex;flex-direction:column;gap:20px;align-items:center;}
.quick-visual__group{display:flex;flex-direction:column;gap:8px;}
.quick-visual__btn{
display:inline-flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:50%;border:0;padding:0;
background:rgba(68,68,68,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
transition:background var(--t-base) linear;cursor:pointer;
}
.quick-visual__btn img{display:block;pointer-events:none;}
/* [원테크 · 리터럴] node 40:7203(Kakao) 배경 #FFEA00 — TOP·문의와 배경 색이 다른 유일한 버튼 */
.quick-visual__btn--kakao{background:#ffea00;}
.quick-visual__btn--kakao:hover,
.quick-visual__btn--kakao:focus-visible{background:#e6d200;}
/* [원테크 · 리터럴] node 40:7204(Inquiry) 배경 #0000FF(Primary/Blue1) */
.quick-visual__btn--inquiry{background:var(--c-primary);}
.quick-visual__btn--inquiry:hover,
.quick-visual__btn--inquiry:focus-visible{background:var(--c-primary-dark);}
.quick-visual__btn--top:hover,
.quick-visual__btn--top:focus-visible{background:var(--c-primary);}
/* [2차 반려 대응 · 지적1] no-JS 폴백 — 1차 시도(.swiper-slide:first-child, 특이도(0,3,1))는
틀렸다. 특이도상 .swiper-slide-active(0,2,1)보다 항상 이겨서, Swiper 가 실제로 배치돼
슬라이드가 2번으로 전환된 뒤에도 1번 슬라이드 헤드라인이 계속 opacity:1 로 남아
2번 위에 겹쳐 보이는 회귀를 만들 뻔했다(classList 시뮬레이션으로 실측).
특이도 싸움이 아니라 "Swiper 가 붙었는가"라는 상태 자체로 조건을 건다 — Swiper 는
초기화 시 컨테이너(main.js 의 new Swiper 대상과 동일한 .m-visual .visual.swiper 요소)에
.swiper-initialized 를 붙인다. 그 클래스가 없을 때만 폴백이 걸리고, 붙는 순간
:not(.swiper-initialized) 조건 자체가 거짓이 되어 폴백이 스스로 꺼진다 — 특이도와
무관하게 규칙이 아예 매치되지 않으므로 원본 규칙과 충돌할 수 없다.
(슬라이드가 세로로 겹쳐 쌓이는 문제는 이 CSS만으로 해결되지 않는다 — js/lib/ 실배치가
근본 해결책이며, README §9-1/퍼블리싱 보고서 §6 참조) */
.m-visual .swiper:not(.swiper-initialized) .swiper-slide:first-child h2,
.m-visual .swiper:not(.swiper-initialized) .swiper-slide:first-child p{opacity:1;transform:none;}
/* [마크업i §23] 진행바·화살표(16:5793) — 절대 left:50%+translateX(-105px)(=855abs, 폭210의 정중앙)·
top:809px(hero 기준). 클릭 동작·진행바 실시간 구간 갱신은 인터랙션(INT-01) — 여기는 모양·자리만. */
.m-visual__controls{
position:absolute;left:50%;top:809px;transform:translateX(-105px);z-index:2;
display:flex;align-items:center;gap:20px;
}
/* [P5D-09 · 권장 해소 · 마크업l — P5C-21 재검토] get_screenshot(13:3445) 픽셀 실측 — 가장 어두운
화소가 (184,184,184)다. `#999999`(153,153,153)를 흰 배경에 그대로 얹으면 (153,153,153)이
나와야 하는데, opacity .7 로 얹으면 255*.3+153*.7=183.6 ≈ 184 로 정확히 일치한다 — 시안의
기본 상태 자체가 opacity .7(디자인 컨텍스트 래퍼 `className="opacity-70"`)이었다. P5C-21 은
반대로 「불투명이 맞다」고 판정하고 되돌렸는데, 그때는 스크린샷 화소를 실측하지 않고 눈대조만
했다(재발 방지 — 다음엔 지워보기 대신 화소값으로 확정). 시안대로 기본 .7, hover 는 1 로 살짝
또렷해지는 방향(기존 hover 대비 강조 의도 유지, 방향만 반전). */
.m-visual__arrow{display:block;width:32px;height:32px;opacity:.7;transition:opacity var(--t-base) linear;}
.m-visual__arrow:hover,
.m-visual__arrow:focus-visible{opacity:1;}
.m-visual__arrow img{display:block;pointer-events:none;}
/* [인터랙션 · W-06 후속] 화살표 클릭·진행바 상태 전환 — §23 이 남긴 정적 배경(ico_carousel_bar.svg,
슬라이드1 고정 상태)을 실제 상태 전환이 가능한 두 불릿으로 바꿨다. 새 모양을 짓지 않았다 —
ico_carousel_bar.svg 안의 rect(활성 바)·circle(비활성 점) 두 도형을 그대로 분리해
ico_carousel_bullet_active.svg·ico_carousel_bullet_inactive.svg 로 재사용했다(FIG-04 — 열어서
치수·색 확인, 새 그림 아님). Swiper bullet 렌더는 js/main.js 가 클래스만 토글한다(STA-01). */
/* [P5D-04 · 필수 해소 · 마크업l] 원인 확정(빼보기 — file:// 헤드리스로 getComputedStyle 대조) —
swiper-bundle.min.css `.swiper-pagination-bullets.swiper-pagination-horizontal{width:100%}`
가 클래스 2개(특이도 0,2,0)라 이 규칙(클래스 1개, 0,1,0)을 이긴다. `.visual-pagination` 이
실제로 이 두 클래스를 함께 달고 있어(js/main.js `pagination:{el:'.visual-pagination'}`) 그대로
맞물린다. width:100% 인 flex item 은 부모(`.m-visual__controls`, 폭 auto)의 기준 폭이 없어
플렉스 계산이 불확정 상태로 빠지고, 그 결과 화살표(flex-shrink:1)까지 32→19.86px 로 줄고
진행바 트랙은 106→130.29px 로 늘어 활성 막대·불릿이 −12/−7px 밀렸다(P5B-19 의 margin 충돌과
같은 뿌리 — swiper 복합 클래스 선택자가 우리 단일 클래스 규칙을 특이도로 이긴다). !important
로 되돌린다(P5B-19 선례와 같은 처방). */
.visual-pagination{width:106px !important;height:10px;display:flex;align-items:center;gap:16px;}
/* [모션 · §W-06 후속] 인터랙션 인계(03_ §9) — 불릿 폭 전환에 transition 이 없어 즉시 전환되던 것을
보완한다. 시안·해석서에 이 전환의 타이밍 지시가 없어 MOT-01 기본값(all .2s linear)을 쓴다.
width 는 레이아웃을 흔드는 속성이지만(일반 금지) 이 컨테이너는 106px 고정 폭 안의 두 불릿뿐이라
흔들리는 범위가 자기 flex 형제(불릿 1개)로 한정되고 문서 전체 리플로우로 번지지 않아 그대로 둔다. */
/* [P5B-19 재작업 · 인계] 226→210 원인 확정 — Swiper JS 가 `.visual-pagination` 에
`swiper-pagination-horizontal.swiper-pagination-bullets` 두 클래스를 동시에 붙이고, 라이브러리
기본 CSS 의 `.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet
{margin:0 4px}`(swiper-bundle.min.css) 가 이 셀렉터(클래스 2개 복합)라 아래 규칙(클래스 2개,
순서상 나중이지만 특이도 동률 아님 — 저쪽이 복합 클래스라 더 높음)을 이긴다. 불릿 2개 ×
좌우 4px = 16px 가 그대로 226(210+16)의 성분. margin:0 !important 로 되돌린다. */
.visual-pagination .swiper-pagination-bullet{
width:10px;height:10px;margin:0 !important;border-radius:0;background:url('../images/main/ico_carousel_bullet_inactive.svg') no-repeat center/contain;
opacity:1;cursor:pointer;transition:width .2s linear;
}
/* [P5C-04 · 필수 해소 · 마크업k] `ico_carousel_bullet_active.svg` 는 80×10(자산 정상, 파일 열어 확인)
이라 `background-size:contain`(가로세로 비율 유지)이 박스(80×8, 세로가 더 좁음)에서는 세로 8px 을
기준으로 줄어들어 그림이 80×8 이 아니라 64×8 로 렌더된다(자산 정상 ≠ 화면 정상 — 에이드 mask
유형과 같은 「계산값 정상, 그림 다름」). 자산 비율을 억지로 안 지키고 박스 치수(80×8)에 그대로
늘려 채운다 — 활성 막대는 진행률 표시용 단색 pill 이라 늘려도 시각 정보 손실이 없다. */
.visual-pagination .swiper-pagination-bullet-active{
width:80px;height:8px;background:url('../images/main/ico_carousel_bullet_active.svg') no-repeat center/100% 100%;
transition:width .2s linear;
}
/* m-visual : E */
/* [QA5-01~03 재작업으로 폐기] .section-header 는 sec2(.sec2__head)·sec3(.sec3__head)·
sec4(.sec4__head-txt) 가 각각 시안 전용 구조로 갈라지며 더 이상 markup 에서 쓰지 않는다 —
재발 유형 H5(옛 반응형 규칙 잔존) 방지를 위해 규칙 자체를 지운다. */
/* ─────────────────────────────────────────────
m-visual__strip : S (전국 점검 가능 띠 — 해석서 §8 순 3, 옛 .sec2 → W-04 히어로 병합)
───────────────────────────────────────────── */
/* [W-04 · 결정 반영] 독립 섹션(.sec2)으로 두지 않는다 — 최종 시안(1:400) node 15:5620
「Bar」는 히어로(node 11:447) 자식으로, 히어로 배경 이미지(m-visual01.jpg) 위에 겹친 반투명
띠다. `#0a1139` 합성 근사치(G-14 위반)를 없애고, 실제 히어로 이미지를 그대로 아래 깔되 이
띠 구간에만 리터럴 rgba(1,66,139,.6) 오버레이를 얹는다 — 색+투명도는 리터럴, 바탕은 실사진. */
.m-visual{position:relative;}
.m-visual__strip{position:absolute;left:0;right:0;bottom:0;height:77px;/* background:var(--c-navy-strip); */z-index:1; display: none;}
/* [마크업c 재정정] get_design_context(1:400 · node 15:5620) 리터럴 — 띠 내용은 컨테이너 좌측
기준(left:240px, 페이지 좌 여백과 동일)이지 가운데 정렬이 아니다. `.m-visual .container`
(히어로 본문, justify-content:center)가 선택자 특이도가 같아 이 규칙에 없는 justify-content
를 그대로 물려받아 가운데로 밀린 채 렌더되고 있었다 — flex-start 로 명시 override. */
/* [마크업d 재정정 · 진짜 원인] flex-direction 을 이 규칙에서 안 정했더니 같은 특이성(0,2,0)의
`.m-visual .container`(줄61, flex-direction:column) 값이 "속성 단위 병합"으로 그대로 살아남아
메인축(세로)엔 flex-start 가, 교차축(가로)엔 align-items:center 가 걸려 결과적으로 가로
가운데 정렬처럼 보였다(v1.9 일하는 규칙 13 — "이 규칙이 나중에 있으니 이긴다"는 셀렉터
전체가 아니라 "그 규칙이 선언한 속성만" 이긴다는 점을 놓쳤다). flex-direction:row 를 여기서
직접 선언해 끊는다 — 지워보기로 확인: row 없이 재캡처하면 다시 가운데, row 추가 후 좌측. */
/* [P5C-16 · 필수 해소 · 마크업k] get_design_context(15:5620) 리터럴 재조회 — 컨테이너 간격은 30(그룹↔
구분선↔그룹), 아이콘-글자 내부 간격은 10(옛 20 근사 폐기). column-gap 40→30. */
.m-visual__strip .container{position:relative;height:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:24px 30px;}
/* [P5B-11 재작업] 시안 렌더 재확인 — 제목 뒤에 세로 구분선이 있다(누락분, HTM-07 가상요소로). */
.m-visual__strip-tit{display:flex;align-items:center;gap:10px;font-size:var(--fs-gnb);font-weight:700;color:#fff; margin-bottom: 15px;}
/* [P5C-16] 구분선(::after)은 이 title 그룹의 마지막 자식 — text↔구분선 간격을 컨테이너 기준
30px 으로 맞추려면 위 flex gap(10)에 20px 를 더한다. */
/* .m-visual__strip-tit::after{content:'';display:block;width:1px;height:20px;margin-left:20px;background:rgba(255,255,255,.24);} */
/* [FIG-04] 아이콘 자산 미확보 — TODO(디자인 요청). Figma 는 24_Map/Map_15 SVG를 쓴다(1:400 node 13:718). 자리만 확보 */
/* [§10 자산 마무리] 이제 요소 — 배경색 자리 채움 규칙 제거, 크기만 유지 */
.m-visual__strip-icon{display:inline-block;width:24px;height:24px;}
.m-visual__strip-area{display:flex;flex-wrap:wrap;gap:8px;}
/* [원테크 · 2026-09-17 리터럴 · 1:400] get_design_context(1:400) node 15:5620 실측 —
본사(filled #003aae) · 현재위치(filled #00237c, MMap Active) · 나머지(투명+테두리 rgba(238,238,238,.4)) */
.m-visual__strip-area li{padding:6px 14px;border-radius:100px;border:1px solid rgba(238,238,238,.4);color:#f8f8f8;font-size:14px;font-weight:400;}
.m-visual__strip-area li.is-hq{background:#003aae;border-color:transparent;color:#fff;}
.m-visual__strip-area li.is-active{background:var(--c-primary-dark);border-color:transparent;color:#fff;font-weight:600;}
/* [정정 · 지시] 「부산지점 포함 6개(사이트맵 추정)」는 오귀속이었다 — 사이트맵엔 지사
목록이 없고(_source/sitemap_utf8.csv "부산" 0건), 출처는 작업 문서:251(Plan
와이어프레임 1:89 판독). 반대편이 고객 원문이 아니므로 최종 시안(1:400 node 15:5620) 5개로
확정 — 확인 사항 아님. */
/* m-visual__strip : E */
/* ─────────────────────────────────────────────
sec2 : S (OUR BUSINESS 사업 분야 — 해석서 §8 순 4, Figma 1:167~1:193 · 옛 .sec3 → W-04 재번호)
[CSS-04] BEM: 블록 .card-list · 요소 __item(li) / __link(a, 카드 전체) — .card는 기존
관용구 컨테이너 이름으로 유지, 반복 단위(li/a)만 BEM 요소로 표기한다.
───────────────────────────────────────────── */
/* [마크업e §17 재작업 · G-14] get_metadata(11:448)+get_design_context(11:448) 요소별 좌표
리터럴로 다시 짰다. 섹션 자체 프레임 실측 높이는 **1706px**(카드4 하단 1185+521 — frame
height="1706" 그대로) — 옛 문서의 「1731px」는 이번 노드 리스캔에서 나오지 않는 값이라
폐기하고 1706 을 검증 기준으로 쓴다(§17 sec2 좌표표 참조). 좌표 원점 = 컨테이너 콘텐츠
좌상단(뷰포트 1920 기준 x=240,y=0) — 이 원점이 곧 노드 11:448 프레임 원점과 일치한다
(기본 .container: max-width 1470 + pad-side 15 → (1920-1470)/2+15 = 240, 리터럴 x=240 과
정확히 맞아떨어져 컨테이너 폭 자체는 건드리지 않는다). */
/* [마크업e §18 재정정 — 지적] 기준점 오류였다. 앞 판은 노드 11:448 프레임 원점(y=825)을
0 으로 놓고 상대화했는데, 구현 측 `.sec2` 박스는 문서 절대 y=960(히어로 끝)에서 시작한다 —
서로 다른 두 좌표계를 그대로 비교해 Δ=0 으로 오판했다(재발대조표 등재). `1:400` 절대좌표
하나로 통일한다: sec2 박스 절대시작=960(고정, 다른 담당 영역) · sec3 시작=2691(고정) ·
1_C(카드1·5:321) 절대 y=1120 → sec2-상대 160(=1120-960) — 이 값이 콘텐츠 시작 패딩이다.
마지막 카드(4_C·5:344 절대y2010, 높이~521) 하단 절대=2531 → sec3(2691)까지 남는 160px 이
하단 패딩(콘텐츠 좌표가 아니라 슬롯 정합용 여백, 이전 판과 같은 원리 — 값만 재계산). */
.sec2{position:relative;padding:160px 0 260px;background:#fff; max-width:100%; overflow-x: clip; }
.sec2__inner{width:100%;}
.sec2__watermark{
position:absolute;left:545px;top:-135px;width:1776px;height:560px;
font-family:'Pretendard',sans-serif;font-weight:800;font-size:400px;line-height:1.4;
color:#f8f7fb;white-space:nowrap;pointer-events:none;z-index:0;overflow:hidden;
}
.sec2__inner{position:relative;z-index:1;display:flex;align-items:flex-start;}
/* [마크업e] Txt(5:302) w=359 · 라벨→타이틀→본문→버튼 gap 전부 40(figma y=0/56/214/318) */
.sec2__head{flex:0 0 359px;margin-top:40px; position: sticky; top: 50px;}
.sec2__head .sticky{ }
.sec2__head .eyebrow{font-family:'Montserrat','Pretendard',sans-serif;font-size:var(--fs-body-s);font-weight:700;color:var(--c-primary);letter-spacing:6.4px;text-transform:uppercase;}
/* [P5C-07 재발 · 필수 해소 · 마크업k] sec2·sec3·sec5 42px 제목 3곳 — 시안(`5:304`·`5:368`·`7:673`)
letter-spacing 전부 0. `-1.26px`(-3%)는 사이트 공통 "42px×-0.03em" 공식을 임의 적용한 근사값
이었다(G-14 — 규칙 표준값이 피그마 리터럴을 덮은 재발). grep 전수 재확인: 파일 안 3곳 전부 해소. */
.sec2__head h2{margin-top:40px;font-size:42px;line-height:1.4;font-weight:700;color:var(--c-text);letter-spacing:normal;}
/* [P5C-09 · 필수 해소 · 마크업k] 시안(`5:248`) `#444` — 공용 토큰 `--c-text-sub`(#666) 근사 대신
이 섹션 전용 리터럴(토큰 자체는 안 건드림). */
.sec2__head .desc{margin-top:40px;font-size:var(--fs-body-l);line-height:1.6;color:#444;}
/* [QA5-01] 「바로가기」는 밑줄 텍스트가 아니라 검정 pill + 화살표(Figma 43:8260, px 28/py 14→h54) */
.sec2__head .btn-pill{
display:inline-flex;align-items:center;gap:20px;margin-top:40px;padding:14px 28px;
border-radius:var(--r-pill);background:var(--c-text);color:#fff;font-size:var(--fs-body-s);font-weight:700;line-height:1.6;
transition:background var(--t-base) linear;
}
.sec2__head .btn-pill:hover{background:var(--c-primary);}
/* [P5B-03 재작업] `Group1197` 자산 확보됨(§ 위 .btn__arr) — 머리 없는 41×1 선을 실제 화살표로 교체.
HTML 안 `