@charset "utf-8";
/* layout.css는 전체적인 스타일 정의 */
/* INPIAD Publishing Standard v1.3 — 헤더 / GNB(BEM+.is-open 드롭다운) / 푸터 / 사이트맵(BEM) / 퀵버튼 */

#wrapper{position:relative;}

/* ─────────────────────────────────────────────
 header : S
───────────────────────────────────────────── */
/* [ 확정 · 2026-09-23 요청「(나)로 진행해줘」 · 재작업 2회차]
 "비고정형" 낱말만으로는 (가)완전 비고정도 배제 못
 했으나, 지정 참고사이트 실측(작업 문서)이 fixed 유지
 + 스크롤 방향에 따른 auto-hide 였고 결정(레퍼런스 동작이 지시)에 따라 (나)로 확정됐다.
 직전 회차의 position:relative 되돌림(아래 옛 주석 삭제분)은 폐기한다. */
#header{
	/* position:fixed — 지정 참고사이트 실측 그대로 화면에 계속 붙어 있되 스크롤 방향에 따라
 .scrolled(숨김)/.is-revealed(재노출) 로 숨고 나타난다(아래). z-index 는 이전 회차와 같은 이유로
 여전히 필요하다 — .gnb__mega 가 #gnb(#header 자손) 안에서 absolute 로 아래로
 펼쳐지는데, .m-visual 도 stacking context 를 만들어 DOM 순서상 나중에 오는 히어로가
 z-index:auto 층에서 mega 패널 위에 그려질 수 있다(1차 회차 실측 — z-index 제거 직후
 opacity:1/visibility:visible 인데도 화면에 패널이 안 보였다). */
	position:fixed;top:0;left:0;z-index:var(--z-header);width:100%;height:var(--h-header);
	background:var(--c-bg);
	/* [작업 문서 지정 참고사이트 실측] transform 만 트랜지션한다 —
 골격 기본값(반투명→반전 배경 전환)의 all 트랜지션은 이 프로젝트가 헤더 반전 로직
 자체를 쓰지 않아(§header 반전 섹션 참조) 필요 없다. — #header 의 transform
 은 아래 #header.scrolled 하나가 유일하게 소유한다(.is-revealed 는 transform 을 소유하지 않는다). 시간·이징 값은
 원칙상 모션(모션) 담당이나, 이번 재작업은 모션 재투입 없이 이 회차에서 실측값을
 그대로 반영하도록 지시받았다(브리프 3항) — 지어낸 값이 아니라 지정 참고사이트 실측
 0.4s ease 그대로다. */
	transition:transform .4s ease;
	 border-bottom: none !important;
}
#header:after{
	content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;
	background:var(--c-line-weak);
	pointer-events:none;   /* 헤더 아래 1px 선이 포인터를 받으면 그 위에서 #gnb 밖(HEADER)으로 판정돼 mouseleave → 메가가 닫혔다(대메뉴에서 패널로 천천히 내려올 때) */
	display: none;

}
/* [INT-01 §2 활성 상태 · 헤더 클래스 계약 — 2026-10-02 고도화 C1] 아래로 스크롤(1px라도 증가) → 헤더를
 화면 밖으로 숨긴다. 숨김 상태 클래스는 골격 표준 `.scrolled`(STA-01 · 피그마 댓글 답글
 「#header.scrolled{transform:translateY(-100%);}」)이고, 이전 `.is-hidden` 은 이 규칙으로 일원화돼 사라졌다.
 임계값 없음(지정 참고사이트 실측 그대로 — 부품의 기본 200px 임계값이 아니다) — 클래스는 js/ui.js
 "6. 헤더 스크롤 방향 자동 숨김/재노출" 이 최종 소유한다(부품 header-scroll 도 같은 클래스를 토글하지만
 같은 프레임에서 ui.js 가 나중에 덮어쓴다 — ui.js §6 주석). */
#header.scrolled{transform:translateY(-100%);}
/* [D1 미확정 — 작업 문서 D1] 위로 스크롤해 scrollY>100 을 지나 재노출된 상태의
 배경·그림자 시안이 Figma 에 없다(참고사이트의 rgba(0,0,0,.6) 반투명은 참고사이트의 모양이라
 가져오지 않는다 — 결정). 값이 오기 전까지는 아무것도 새로 선언하지 않고 #header
 기본값(불투명 흰 배경)을 그대로 물려받는다 — D1 확정 시 이 규칙 안에 배경·box-shadow만
 추가하면 되도록 자리만 분리해 둔다. */
#header.is-revealed{
	/* D1 확인 대기 — 지금은 선언 없음(기존 값 재사용) */
}
body#sub #header{background:var(--c-bg);}
body#sub #header:after{background:var(--c-line-weak);}

/* logo — [HTM-04] 메인은 h1, 서브는 p. [결정 실측 · get_metadata(877:221) "Logo" 인스턴스]
 140×28 — 이전 144px 는 잘못된 종횡비(PNG 174×55, 비 3.16) 자산 기준 근사치였다. */
/* z-index:1 — DOM 순서상 뒤에 오는 #gnb(position:relative · 폭 100%)가 로고 위에 겹쳐 로고 링크가 클릭되지
 않았다(로고 좌·중·우 3점 elementFromPoint 가 #gnb > ul 로 나옴). 로고에만 층을 줘 위로 올린다 — #header 자신이
 z-index 로 만드는 쌓임 맥락 안에서만 적용되므로 메가 패널·사이트맵·언어 패널의 순서에는 영향이 없다. */
#header .logo{position:absolute;top:50%;left:var(--pad-side);z-index:1;transform:translateY(-50%);font-size:0;}
#header .logo a{display:inline-block;}
#header .logo img{width:140px;height:auto;}

/* gnb — [CSS-04] BEM: 블록 .gnb(=ID #gnb 로 대체) · 요소 __item/__link ·
 상태 .is-active(현재 위치) / .is-open(개별 li 열림 — 이 프로젝트는 미사용, 아래 Mega 참조).
 #gnb 는 HTM-03 레이아웃 ID로 유지.
 [퓨어앤케이 전용] 헤더가 항상 불투명 흰 배경이라(위 #header 오버라이드) GNB 글자도
 항상 어두운 색이 기본값이다 — 골격의 "밝은 글자 → opened 시 반전" 로직을 걷어냈다. */
/* [결정 실측 · get_metadata(877:221) "1depth" 프레임] 3개 메뉴가 헤더 전체(1920) 안에서
 거의 정중앙(x 747~1172, 중심 959.5 ≈ 헤더 중심 960)에 온다 — #gnb 자체에 비대칭 padding을
 주지 않고 justify-content:center 하나로 충분하다(이전 240/260 패딩은 실측 없이 넣은 추정값).
 항목 간 간격은 SOLUTION(155)−ABOUT US 끝(85)=70px. */
#gnb{width:100%;position:relative;}
#gnb > ul{display:flex;justify-content:center;}
.gnb__item{position:relative;}
/* [get_design_context(877:221) "P-M/18" 실측] 18px · weight 500 · letter-spacing
 -3%(=18×-0.03=-0.54px) — 이전 값(20px·600·-0.6px)은 규칙 표준값이었다(결정 가 시안값으로 대체). */
.gnb__link{
	text-align: center;
	width: 165px;
	padding: 0 35px;
	display:block;font-size:var(--fs-gnb);font-weight:500;line-height:var(--h-header);
	color:var(--c-text);letter-spacing:-.54px;
	transition:.3s;	
}

.gnb__item:nth-child(3) .gnb__link{width: 184px;}
/* [STA-01] .is-active = 현재 위치(페이지 로드 시 고정), :hover = 일시적 시각 피드백.
 [d · 검수 작업 문서] 메가메뉴가 열린 채로 마우스가 대메뉴(li)를
 벗어나 패널 쪽으로 이동하면 :hover 는 더 이상 매칭되지 않아 대메뉴 글자색이 검정으로
 되돌아갔다(시안 실측 — 열림 중에는 계속 #0051c6 파랑이어야 한다). gnb-mega-1.0.0.inpiad.js
 의 open이 이미 트리거 링크에 aria-expanded="true" 를 붙여 두므로(STA-01 — class·ARIA
 동시 규약) 부품은 고치지 않고 이 상태를 가리키는 선택자만 추가한다. */
.gnb__item.is-active > .gnb__link,
.gnb__item:hover > .gnb__link,
.gnb__link[aria-expanded="true"]{color:var(--c-primary);}

/* ─────────────────────────────────────────────
 gnb Mega Menu [NAV-01] — Figma 실측: 3개 대메뉴 서브가 함께 열리는 단일 패널.
 li 마다 개별 서브메뉴를 갖지 않는다 — .gnb__mega 1개가 #gnb 의 형제로 존재한다.
 열림 상태는 상위(#gnb 또는 #header)에 건다. 이 CSS 는 기본(닫힘) 뼈대만 제공 —
 열고닫는 상태 클래스·컬럼별 강조(is-active)는 인터랙션 담당(_header.html 마스터 주석 참조).
───────────────────────────────────────────── */
/* [모션 · 작업 문서 지정 참고사이트 정밀 실측]
 열기 — 배경판 height 0→목표높이 200ms(swing) → (겹치지 않고) 완료된 뒤 서브메뉴
 200ms 페이드인 = 총 401.5ms. 닫기 — 서브메뉴 100ms 페이드아웃 → (그 종료 시점에
 맞춰 지연된) 패널 높이 200ms 축소 = 총 300ms(실측 304.3ms). "높이 0→목표높이"는
 CSS 만으로 auto 값을 트랜지션할 수 없어 grid-template-rows 0fr→1fr 트릭을 쓴다
 (JS 로 높이를 측정해 넣지 않는다 — 컬럼마다 항목 수가 달라 매번 재는 대신 flex
 행이 가장 긴 컬럼에 자연히 맞춰지는 것을 그대로 이용, 실측 "패널 높이 = 가장 긴
 컬럼" 과 결과가 같다). swing(0.5-cos(πp)/2) 근사 곡선은 cubic-bezier(.445,.05,.55,.95)
 (이지인아웃사인). — grid-template-rows 는 패널(높이), opacity 는 콘텐츠
 — 서로 다른 요소가 소유해 충돌하지 않는다. */
/* [a·b · 작업 문서] 패널 폭이 #gnb 안에 갇혀 1760px(x 73..1833)로 좁게
 그려졌었다 — 화면 전체 폭 1920·좌우 여백 0 이 시안이라 #gnb/컨테이너 중첩에서 완전히
 빼내 뷰포트 기준 position:fixed 로 바꾼다. #header 가 이미 같은 방식(위치:fixed,
 width:100%, 컨테이너 중첩 무시)을 쓰고 있어 이 프로젝트에 새로 들이는 기법이 아니다.
 #header 가 z-index(position+z-index)로 스태킹 컨텍스트를 만들어 두어서 자손인 이 패널은
 position:fixed 로 바뀌어도 여전히 #header 의 쌓임 순서 안에 있다(히어로 위에 그려짐,
 1차 회차 z-index 실측과 동일 결론 — 재확인 완료). 배경은 연한 회청색 반투명(시안 실측
 설명 · 정확한 값은 node ID 미확보로 조회 불가 — TODO(디자인 요청): 확정값 확인 시 교체). */
.gnb__mega{
	position:fixed;top:var(--h-header);left:0;width:100%;
	display:grid;grid-template-rows:minmax(0,0fr);
	/* [반응형 · 작업 문서 미해소 1건 원인 규명] 닫힘 상태 computed 높이가
 0px 가 아니라 80px 로 관측된 원인 — 지워서 확인함(일하는 규칙 13): 단일 <flex>
 값 `0fr` 은 스펙상 `minmax(auto,0fr)` 로 확장되고, 이 auto 최소값이
 .gnb__mega-inner 의 `padding:40px 0`(=80px, min-height:0 으로도 안 줄어듦)을
 그대로 반영한 것이었다(school 값 override 테스트로 `minmax(0,0fr)` 적용 시
 80→0 로 즉시 붕괴 확인, 되돌리면 다시 80). 시각·기능 결함은 아니었다 —
 `visibility:hidden`(아래)이 이 80px 박스 자체를 완전히 안 그리는 것까지
 background:red 강제 대입 + 스크린샷으로 직접 확인함(elementsFromPoint 에도
 안 잡힘). 최소값을 0 으로 명시해 트랙을 실제로 0 에 수렴시킨다 — 열림 상태
 (1fr)·전환 시간·시각 결과에는 영향 없음(재확인 완료, 아래 §검증). */
	/* [b · TODO(디자인 요청) node ID 미확보] 연한 회청색 반투명 — 정확한 값을 조회할 수
 없어 근사값이다. backdrop-filter 로 히어로가 옅게 비치는 유리질감까지 흉내낸다(BRW-01
 A등급 최신 2브라우저는 전부 지원 · 폴백은 배경색 불투명도만으로도 자연스럽다). */
	background:rgba(235,239,245,.86);
	backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
	pointer-events:none;
	visibility:hidden;
	/* 닫힘(기본) — 콘텐츠 페이드아웃(.1s, 아래)이 끝나는 시점에 맞춰 .1s 뒤 축소 시작,
 .2s 만에 0 으로 = 총 .3s. visibility 는 축소가 끝난 뒤에만 hidden 으로 바뀌어
 닫히는 동안에도 포커스·스크린리더 경로가 유지된다. */
	transition:
		grid-template-rows .2s cubic-bezier(.445,.05,.55,.95) .1s,
		visibility 0s linear .3s;
}
/* [INT-01 §4] hover 는 progressive enhancement, .is-mega-open 은 키보드·스크린리더 경로용
 실제 상태 클래스다(인터랙션 정의) — 하나만 성립해도 열린다(hover 전용 메뉴 금지). */
#gnb:hover .gnb__mega,
#gnb.is-mega-open .gnb__mega{
	/* [모션 2026-09-28] 열림 값을 닫힘(:120 `minmax(0,0fr)`)과 같은 표기 `minmax(0,1fr)` 로 맞춘다.
 표기가 다르면(`1fr` ↔ `minmax(0,0fr)`) 트랙 보간이 불가해 200ms 높이 전환이 0↔245px 이산 점프로 돌았다
 (rAF 샘플: 높이 값 2개뿐). 주입 시험으로 원인 확인 → 13단계 이상 보간 · 결정 타이밍 복원. */
	grid-template-rows:minmax(0,1fr);
	visibility:visible;pointer-events:auto;
	background: #F5F8FD; opacity: 0.95;
	/* 열림 — 확장은 지연 없이 즉시 .2s. */
	transition:
		grid-template-rows .2s cubic-bezier(.445,.05,.55,.95) 0s,
		visibility 0s linear 0s;
}

#gnb:hover .gnb__link{width: 220px;}

/* [c · 실측 한계 · js/ui.js §7 alignMegaColumns] 컬럼마다 항목 수·글자폭이 달라
 고정 padding-left 로는 "각 1depth 메뉴 바로 아래 중앙" 을 못 맞춘다(ABOUT US 중심 731 =
 CEO Message 중심 731 · INFORMATION 중심 1171 = Download 중심 1171 — 시안 실측, 균등폭이
 아니다). 컬럼을 position:absolute 로 두고 대응하는 1depth 메뉴의 실제 렌더 좌표를 JS 가
 측정해 --col-center 로 주입한다(JSR-03 커스텀 프로퍼티 예외 — .main-solution__connector 의
 --connector-top 과 같은 패턴). min-height 는 컬럼이 absolute 라 안 잡히는 패널 높이를
 대신 잡아 준다(가장 긴 컬럼 SOLUTION 5항목 실측: 5×24 + 4×16 + padding 80 = 264). */
.gnb__mega-inner{
	/* [실측] 컬럼을 position:absolute 로 빼면서(위 주석) 이 flex 행에 in-flow 자식이 하나도
 안 남았다 — grid item 인 이 요소가 콘텐츠 기준 자동폭(0)으로 붕괴해 width:100% 을
 명시로 되돌렸다(붕괴 확인: 지워보니 0px, 다시 넣으니 정상폭 — 규칙 13). */
	/* [작업 문서] 시안 실측 — 패널 높이 245(이전 264.6) · 첫 줄
 중심 y123(뷰포트 기준, 이전 132 = 헤더80+패딩40+줄높이12) · 항목 간격 38(이전 40).
 역산: 줄높이 24(고정, 폰트 불변) 기준 margin-bottom 14 로 낮추면 간격 24+14=38 ✓.
 첫 줄 중심 123 = 80(헤더) + padding-top + 12 → padding-top 31. 패널 높이 245 =
 padding-top+padding-bottom + 5×24 + 4×14(=176) → padding-bottom 38. */
	position:relative;display:flex;width:100%;padding:31px 0 38px;overflow:hidden;min-height:245px; justify-content: center;
	opacity:0;
	transition:opacity .1s linear 0s;   /* 닫기 — 지연 없이 즉시 100ms 페이드아웃 */
}
#gnb:hover .gnb__mega-inner,
#gnb.is-mega-open .gnb__mega-inner{
	opacity:1;
	transition:opacity .2s linear .2s;   /* 열기 — 높이 확장(.2s) 완료 뒤 200ms 페이드인, 겹치지 않음 */
}
/* [작업 문서] 컬럼 박스 자체의 중심 정렬(translateX(-50%))은
 이미 GNB 1depth 링크 중심과 ±0.1px 로 맞아 있었다(c 해소분, 건드리지 않음) — 남은
 문제는 컬럼 "안" 항목들이 좌측 정렬이라 짧은 항목(USP 등)이 최대 72.3px 어긋나 보인
 것이다. 시안은 컬럼 안 전 항목의 중심이 같다 — text-align:center 하나로 해소. */
.gnb__mega-col{
	width: 220px;
	white-space:nowrap;text-align:center;
	pointer-events:none;
}
/* 컬럼 상자는 가장 긴 항목 폭(SOLUTION 175px)이라 1025~1400 에서 옆 열(ABOUT US)의 오른쪽 끝을 덮어
 그 자리 클릭이 링크가 아니라 <li>/<ul> 에 걸렸다(CEO Message 오른쪽 17~29px · Contact Us 3~16px). 상자는 클릭을
 통과시키고 링크(글자 폭만큼의 inline-block)만 받는다. 링크는 패널이 열려 있을 때만 받는다 — 닫힌 패널
 (.gnb__mega 의 pointer-events:none)이 닫히는 도중에 눌리지 않게, 열림 상태 선택자에 건다.
 hover 유지는 #gnb 안의 어느 자손에 마우스가 있어도 되므로(mouseleave 는 #gnb 기준) 그대로다. */
#gnb:hover .gnb__mega-col a,
#gnb.is-mega-open .gnb__mega-col a{pointer-events:auto;}
.gnb__mega-col ul li{margin-bottom:14px;}   /* 24(줄높이)+14=38 항목 간격 */
.gnb__mega-col ul li:last-child{margin-bottom:0;}
.gnb__submenu-link{
	display:inline-block;font-size:var(--fs-body-s);line-height:1.5;
	color:var(--c-text-sub);white-space:nowrap;
	transition:color var(--t-base) linear;
	font-weight: 400;
}
.gnb__submenu-link:hover{color:var(--c-primary); font-weight: 600;} 
/* 트리거된 대분류에 대응하는 컬럼 강조 — 클래스 부여는 인터랙션(js) */
/* .gnb__mega-col.is-active > ul > li:first-child > .gnb__submenu-link{color:var(--c-primary);font-weight:600;} */

/* head-util : 언어 스위처 + 햄버거 — [퓨어앤케이 전용] 헤더가 항상 밝은 배경이므로
 두 유틸 모두 항상 어두운 잉크를 쓴다(골격의 슬롯 반전 변수 미사용). */
/* [작업 문서 · get_metadata(877:221) 실측] 언어알약 x1699 ·
 햄버거(site map) x1812 → 사이 간격 = 1812−(1699+86) = 27px(이전 16px). */
#header .head-util{position:absolute;top:50%;right:var(--pad-side);transform:translateY(-50%);display:flex;align-items:center;gap:27px;}

/* [시안에 있음] 언어 스위처 — 닫힘 KOR 알약 / 열림 KOR·ENG 2줄 패널(실측)
 [검수 작업 문서] 시안(Lang_On)은 알약이 그대로 2행 라운드
 박스로 커지고 각 행에 지구본 아이콘이 붙는 모양이다(테두리 1px #666 · radius 20) —
 아래에 따로 떠 있는 흰 드롭다운 카드가 아니다. 부품(js/custom/dropdown-toggle-1.0.0.
 inpiad.js)은 wrap.is-open 클래스 + 트리거/패널 aria 속성만 토글할 뿐 모양을 정하지
 않으므로, 부품은 그대로 두고 이 프로젝트의 마크업(index.html — 옵션 버튼에 지구본
 아이콘 추가)·CSS만 시안 모양에 맞춘다. */
.btn-lang{position:relative;}
/* [get_metadata(877:221) "Lang" 인스턴스 실측] height 40 — 36 은 근사값이었다.
 테두리 1px #666(시안 Lang 인스턴스 stroke — 열린 패널과 같은 값 --c-text-sub).
 시안 Lang_Off(877:211)·Lang-On(877:263): 글자 Poppins SemiBold 16 · 줄높이 26 · 자간 −3%(−0.48px) · #111,
 아이콘 18×19 · 안쪽 여백 좌12·우15(테두리 1px 안쪽이라 CSS 는 11·14) · 아이콘~글자 8 → 폭 86. 셀프호스팅 Poppins 600 재사용. */
.btn-lang__current{
	display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 11px;
	border:1px solid var(--c-text-sub);border-radius:var(--r-pill);
	font-family:'Poppins','Pretendard',sans-serif;font-size:var(--fs-body-s);font-weight:600;line-height:26px;letter-spacing:-.48px;color:var(--c-text);
	transition:opacity var(--t-base) linear;
}
/* 열림 — "알약이 그대로 커진다"를 표현하기 위해 패널을 트리거와 같은 자리(top:0·
 width:100%)에 겹쳐 그리고, 트리거는 시각적으로만 숨긴다(opacity — display:none 이면
 .btn-lang 이 유일한 in-flow 자식을 잃어 폭 기준이 사라진다). DOM·포커스 순서·부품의
 토글 로직은 그대로다 — Esc 로 닫힐 때 부품이 이 트리거로 focus 를 돌려주므로
 opacity:0 만 쓰고 visibility/display 는 건드리지 않는다(포커스 가능 상태 유지). */
.btn-lang.is-open .btn-lang__current{opacity:0;pointer-events:none;}
/* [번질 곳 실측 · 768px] min-width(104px)가 트리거 실폭(768px 이하에서는 라벨이 숨고
 아이콘만 남아 약 38px)보다 넓어지면 폭을 100%→min-width로 키운다. 이때 `left:0`으로
 고정하면 패널이 오른쪽으로 자라 옆의 .btn-nav(햄버거)와 실제로 겹쳤다(elementFromPoint
 대신 getBoundingClientRect 교차 판정으로 확인 — overlap true, panel.right 706 >
 nav.left 699). head-util 안에서 언어스위처가 항상 햄버거보다 왼쪽에 있으므로 `right:0`
 으로 앵커를 바꿔 넓어질 때 왼쪽으로만 자라게 한다 — 트리거와 폭이 같을 때(기본 폭)는
 left/right 앵커 결과가 동일해 다른 화면에는 영향 없다. */
.btn-lang__panel{
	position:absolute;top:0;right:0;z-index:1;
	width:100%;min-width:104px;padding:4px;
	display:flex;flex-direction:column;gap:2px;
	opacity:0;visibility:hidden;
	background:var(--c-bg);border:1px solid var(--c-text-sub);border-radius:var(--r-lg);   /* [시안 실측] #666·radius 20 = 기존 토큰 --c-text-sub·--r-lg 그대로 재사용 */
	transition:opacity var(--t-base) linear,visibility 0s linear var(--t-base);
}
.btn-lang.is-open .btn-lang__panel{
	opacity:1;visibility:visible;
	transition:opacity var(--t-base) linear,visibility 0s linear 0s;
}
.btn-lang__option{
	display:flex;align-items:center;gap:6px;width:100%;height:32px;padding:0 12px;
	border-radius:var(--r-md);color:var(--c-text-sub);
	font-family:'Poppins','Pretendard',sans-serif;font-size:var(--fs-body-s);font-weight:600;line-height:26px;letter-spacing:-.48px;
	transition:background var(--t-base) linear,color var(--t-base) linear;
}
.btn-lang__option-ico{width:16px;height:16px;flex:0 0 auto;}
.btn-lang__option.is-active{color:var(--c-primary);font-weight:600;}
.btn-lang__option:hover{background:var(--c-bg-weak);}

/* [결정 실측 · get_metadata(877:221) "site map" 프레임 28×25] 위/아래 18px(우측
 정렬) · 가운데 28px(전체폭)·파랑 — 이전 값은 반대(26/20/26 · 전부 검정)였다. 컨테이너도
 40×28(패딩 포함 추정치)이 아니라 시안 실측 28×25. */
.btn-nav{display:block;width:28px;height:25px;}
.btn-nav > span{
	display:block;width:18px;height:3px;margin-left:auto;border-radius:var(--r-sm);
	background:var(--c-text);transition:all var(--t-fast) linear;
}
.btn-nav > span ~ span{margin-top:8px;}
.btn-nav > span:nth-child(2){width:28px;background:var(--c-primary);}
.btn-nav:hover > span{width:28px;background:var(--c-primary);}
/* header : E */

/* ─────────────────────────────────────────────
 footer : S
───────────────────────────────────────────── */
/* 시안 footer 컴포넌트(Figma node 76:176 · 1920×390) 실측값 그대로 — 메인·서브 공통.
 세로 구성(푸터 상단 y0 기준): 위 여백 80 → 회사정보 4줄(18px/38 = 152) → 40 → COPYRIGHT(38) → 아래 여백 80 = 390.
 가로: 로고 x80(140×28) → 90 → 텍스트 열 x310 … 오른쪽 끝 x1840. 로고 세로 중앙 y195 = 푸터 중앙.
 배경 rgb(17,17,17) = 시안 Rectangle 83. */
#footer{position:relative;padding:80px 0;background:#111;}
#footer .inner{display:flex;align-items:center;gap:90px;}
#footer .ft_logo{flex:0 0 140px;}
#footer .ft_logo img{width:100%;height:auto;}
#footer .right{width:1%;flex:1 1 auto;display:flex;flex-direction:column;gap:40px;}          /* [CSS-07] 인피아드 가변 컬럼 관용구 */

/* 회사 정보 4줄 — 18px Regular · 줄높이 38 · 자간 −3%. 첫 줄(상호)만 흰색, 나머지는 흰 60%(시안 텍스트 구간).
 같은 줄 안 「|」는 시안 원문 글자 그대로(본문에 들어 있다). */
#footer .info ul{display:flex;flex-direction:column;}
#footer .info ul li{font-size:var(--fs-body);line-height:38px;color:var(--c-text-on-dark);letter-spacing:-.54px;}
#footer .info ul li strong{font-weight:400;color:var(--c-text-invert);}
#footer .info ul li a{color:inherit;transition:color var(--t-base) linear;}
#footer .info ul li a:hover{color:#fff;}

/* 하단 행 — COPYRIGHT(좌, 18px · 흰 30%) + 정책 링크(우, 16px SemiBold · 흰색). 시안은 링크 줄이
 COPYRIGHT 줄보다 3px 아래에서 시작하고(y275 ↔ y272) 1px 더 내려간다(y311 ↔ y310). */
#footer .bottom-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;}
#footer .copyright{font-size:var(--fs-body);line-height:38px;color:rgba(255,255,255,.3);letter-spacing:-.54px;}
#footer .terms{margin:3px 0 -1px;}
#footer .terms > ul{display:flex;gap:20px;}
#footer .terms > ul > li{position:relative;line-height:36px;}
#footer .terms a{font-size:var(--fs-body-s);font-weight:600;color:#fff;letter-spacing:-.48px;transition:color var(--t-base) linear;}
#footer .terms a:hover{color:rgba(255,255,255,.7);}

/* TOP 버튼 — 시안 Top_btn(node 31:924): 70×70 · 모서리 4 · 흰 10% 채움 · 안쪽 1px #ddd 20% 테두리 ·
 위쪽 화살표(시안 Arrow 1 벡터 → images/common/ico_top.svg, 70×70 안에서 버튼 중앙과 같은 자리).
 위치: 시안 y175 = 텍스트 열 상단(y80) + 95, 오른쪽 끝 x1840. */
.quick-top{position:absolute;top:95px;right:var(--pad-side);}
.btn-top{
	display:block;width:70px;height:70px;
	border:1px solid rgba(221,221,221,.2);border-radius:4px;
	background:rgba(255,255,255,.1) url(../img/common/ico_top.svg) 50% 50% no-repeat;
}
/* footer : E */

/* 예전 화면 우하단 고정 TOP 버튼(.quick-top.show · body.bottom)용 규칙은 없앴다 — header-scroll 부품은 여전히
 .show/.bottom 을 토글하지만 버튼은 시안대로 푸터 안에 늘 노출되므로 대응 CSS 가 필요 없다. */

/* ─────────────────────────────────────────────
 sitemap : S
 ※ 1024px 이하에서 모바일 메뉴 역할을 겸한다.
───────────────────────────────────────────── */
.sitemap{
	position:fixed;top:0;right:0;width:0;height:0;max-width:100vw;max-height:100vh;
	z-index:var(--z-sitemap);overflow:hidden;visibility:hidden;
}
html.sitemap-opened{overflow:hidden;}
html.sitemap-opened .sitemap{width:100%;height:100%;visibility:visible;}
.sitemap:before{
	content:'';position:fixed;top:0;left:0;z-index:-1;width:100vw;height:100vh;
	background:#fff;display:none;
}
html.sitemap-opened .sitemap:before{display:block;}

.site-wrap{position:relative;max-width:1830px;width:100%;height:100vh;margin:0 auto;padding:0 var(--pad-side);}
/* .head 를 기준 상자로 — 없으면 .sitemap-close 의 top:50% 가 .site-wrap(높이 100vh) 기준이라 X 가 화면 세로 중앙 오른쪽에 떴다.
 로고를 흰 벡터(ft_logo.svg 140×28)로 바꾸며 height:auto — 옛 PNG 는 142×42 를 width 180 으로 늘려(높이 42 고정) 가로로 찌그러져 있었다.
 흰 배경에서는 filter:brightness(0) 으로 로고를 #000 으로 맞춘다. */
.site-wrap .head{position:relative;display:flex;align-items:center;height:120px;}
.site-wrap .head .logo img{width:180px;height:auto;}

/* 기준 상자가 .site-wrap(좌우 padding 15)에서 그 안쪽 .head 로 바뀌어 right 는 0 — 화면 오른쪽에서 15px 로 종전과 같은 자리 */
.sitemap-close{position:absolute;top:50%;right:0;transform:translateY(-50%);width:36px;height:36px;}
.sitemap-close:before,.sitemap-close:after{
	content:'';position:absolute;left:0;width:36px;height:2px;background:#000;
	transition:all var(--t-overlay);
}
.sitemap-close:before{top:10px;}
.sitemap-close:after{bottom:10px;}
html.sitemap-opened .sitemap-close:before{top:50%;margin-top:-1px;transform:rotate(45deg);}
html.sitemap-opened .sitemap-close:after{bottom:50%;margin-bottom:-1px;transform:rotate(-45deg);}

.site-wrap .wrap{display:flex;height:calc(100vh - 120px);padding:60px 0;}
.site-wrap .info-wrap{flex:0 0 500px;display:flex;flex-direction:column;justify-content:space-between;padding-right:60px;}
.site-wrap .info .box{margin-bottom:40px;opacity:0;transform:translateX(60px);transition:all var(--t-overlay);}
html.sitemap-opened .site-wrap .info .box{opacity:1;transform:translateX(0);transition-delay:.1s;}
html.sitemap-opened .site-wrap .info .box:nth-child(2){transition-delay:.2s;}
.site-wrap .info .box h2{margin-bottom:16px;font-size:var(--fs-body);font-weight:700;color:#000;}
.site-wrap .info .box dl{display:flex;margin-bottom:8px;font-size:var(--fs-body-s);line-height:1.6;}
.site-wrap .info .box dt{flex:0 0 150px;color:#666;font-weight:500;}
.site-wrap .info .box dd{width:1%;flex:1 1 auto;color:#333;}

/* [CSS-04] BEM: 블록 .nav-menu · 요소 __item/__link-wrap/__link/__submenu/__submenu-link.
 서브메뉴는 별도 열림 상태가 없다 — 사이트맵 전체가 열리면 함께 노출된다(단일 상태). */
.nav-menu{width:1%;flex:1 1 auto;padding-left:100px;overflow-y:auto;}
.nav-menu__item{margin-bottom:20px;}
.nav-menu__link-wrap{display:block;overflow:hidden;}
.nav-menu__link{
	display:inline-block;padding:0 5px;font-size:var(--fs-head-ml);font-weight:500;line-height:1.2;
	color:#000;transform:translateY(110%);transition:transform var(--t-overlay);
}
html.sitemap-opened .nav-menu__link{transform:translateY(0);transition-delay:.4s;}
.nav-menu__submenu ul{display:flex;flex-wrap:wrap;padding:16px 0 0 5px;}
.nav-menu__submenu ul li{padding-right:40px;margin-bottom:12px;}
.nav-menu__submenu-link{
	font-size:var(--fs-body-l);line-height:1.5;color:#333;
	transition:color var(--t-base) linear;
}
.nav-menu__submenu-link:hover{color:#000;}
/* sitemap : E */

/* ─────────────────────────────────────────────
 sitemap : responsive [RWD-01]
───────────────────────────────────────────── */
@media (max-width:1400px){
	.site-wrap .info-wrap{flex:0 0 400px;padding-right:40px;}
	.nav-menu{padding-left:60px;}
	.nav-menu__link{font-size:var(--fs-head-m);}
}
@media (max-width:1280px){
	/* 데스크톱 기준 분기 — 컨테이너 2차 축소 (RWD-01) */
}
@media (max-width:1024px){
	.site-wrap .wrap{flex-direction:column-reverse;height:calc(100vh - 100px);padding:30px 0;}
	.site-wrap .head{height:100px;}
	.nav-menu{width:100%;padding-left:0;}
	.nav-menu__link{font-size:var(--fs-card-tit);}
	.nav-menu__submenu-link{font-size:var(--fs-body-s);}
	.site-wrap .info-wrap{flex:0 0 auto;padding-right:0;}
	.site-wrap .info .box{margin-bottom:20px;}
}
@media (max-width:768px){
	.nav-menu__link{font-size:var(--fs-head-2xs);}
	.nav-menu__submenu ul li{padding-right:20px;margin-bottom:8px;}
	.site-wrap .info .box dl{font-size:var(--fs-label);}
	.site-wrap .info .box dt{flex:0 0 100px;}
}
@media (max-width:480px){
	.site-wrap .info-wrap{display:none;}
	.nav-menu__link{font-size:var(--fs-body-l);}
}

/* ─────────────────────────────────────────────
 header 반전 — [퓨어앤케이 전용] 헤더가 항상 불투명 흰 배경이라(위 #header 오버라이드)
 골격의 3상태 반전 로직(기본 밝음 → opened/서브 어두움)이 필요 없다. 로고는 어두운
 버전(logo__dark) 고정 — 흰 로고(logo__light)는 다크 배경(사이트맵 오버레이·푸터)
 에서만 별도 <img> 로 직접 쓴다(_header.html · _footer.html 참조).
───────────────────────────────────────────── */
#header .logo__light{display:none;}
#header .logo__dark{display:block;}