@charset "utf-8";

/* ============================================================
   header-fix.css — 헤더 수정분 (Claude 작업분)
   ------------------------------------------------------------
   header.php 와 style.css 는 손대지 않고, 헤더에 필요한 규칙만 여기 모은다.
   나중에 style.css 로 합칠 때는 이 파일 순서 그대로 넣으면 된다.
   ============================================================ */

/* ---------- 헤더 — GNB 가 로고를 덮지 않게 세 칸으로 나눈다 ----------
   원래는 GNB 를 absolute 로 화면 정중앙에 못박아 둬서, 폭이 줄면 로고 위에 겹쳤다.
   좌·우 칸에 같은 몫을 주면 가운데 칸이 저절로 정중앙에 오면서 절대 겹치지 않는다. */

.gnb {
	height: 100%;
	transform: none;
	flex: 0 1 auto;
	min-width: 0;
}
.site-header__util {

	justify-content: flex-end;
	margin-left: 0;
}

/* ---------- 1. 히어로 위에 겹치는 헤더 ----------
   시안에서는 위쪽 배경이 헤더 뒤까지 이어진다.
   그래서 헤더는 배경 없이 얹고, 스크롤을 내리면 그때 배경이 생기게 한다. */
.site-header--over {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}
.site-header--over.is-scrolled {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 2px 20px rgba(0, 0, 0, .06);
}
/* 어두운 히어로 위에서는 글자와 로고를 흰색으로 */
.site-header--over.site-header--dark.is-scrolled {
	background: rgba(20, 20, 21, .82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

/* ---------- 2. 좁은 화면 주 메뉴 ---------- */
.btn-menu {
	display: none;
	position: relative;
	width: clamp(40px, 5vw, 45px);
	height: auto;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.btn-menu span {
	position: absolute;
	left: clamp(10px, 1.5vw, 11px);
	width: clamp(20px, 2.5vw, 23px);
	height: 2px;
	border-radius: 2px;
	background: var(--c-text);
	transition: transform .25s ease, opacity .2s ease;
}
.btn-menu span:nth-child(1) { top: clamp(14px, 2vw, 16px); }
.btn-menu span:nth-child(2) { top: clamp(20px, 2.5vw, 22px); }
.btn-menu span:nth-child(3) { top: clamp(26px, 3vw, 28px); }
.site-header--dark .btn-menu span { background: var(--c-white); }
.btn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.btn-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.btn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
	position: fixed;
	inset: var(--header-h) 0 auto 0;
	z-index: 99;
	max-height: calc(100vh - var(--header-h));
	overflow-y: auto;
	padding: 16px 24px 28px;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
	animation: mnavIn .22s ease both;
}
@keyframes mnavIn { from { opacity: 0; transform: translateY(-8px); } }
.mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.mobile-nav__list > .mobile-nav__item + .mobile-nav__item {
	border-top: 1px solid rgba(0, 0, 0, .07);
}

/* 주메뉴 토글 버튼 */
.mobile-nav__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 4px;
	border: 0;
	background: transparent;
	color: #14141e;
	font: inherit;
	font-size: clamp(16px, 2vw, 19.5px);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.mobile-nav__top.is-current { color: var(--c-blue); }
.mobile-nav__top::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-left: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
	opacity: .55;
}
.mobile-nav__item.is-open > .mobile-nav__top::after {
	transform: translateY(3px) rotate(225deg);
	opacity: .9;
}

/* 하위 메뉴 */
.mobile-nav__sub {
	padding: 0 4px 12px 12px;
}
.mobile-nav__sub[hidden] { display: none; }
.mobile-nav__sub a {
	display: block;
	padding: 10px 4px;
	color: #3a3a4a;
	font-size: clamp(14px, 1.7vw, 16px);
	font-weight: 600;
}
.mobile-nav__sub a:hover,
.mobile-nav__sub a:focus-visible { color: var(--c-blue); }

.mobile-nav a.is-current { color: var(--c-blue); }
.mobile-nav__cta {
	display: block;
	margin-top: 18px;
	padding: 14px;
	border-radius: 300px;
	background: var(--c-blue);
	color: var(--c-white) !important;
	font-size: clamp(10.8px, 1.198vw, 17.3px);
	font-weight: 700;
	text-align: center;
}

/* ---------- 로고 ----------
   로고가 인라인 SVG 로 바뀌면서 각 path 가 fill 을 CSS 에서 받게 됐다.
   그 색 규칙이 없으면 획이 비어 로고가 통째로 안 보인다.
   색은 원본 파일 기준 — logo.svg 는 #040000 / #0B0FF7, logo-white.svg 는 전부 흰색. */
.site-header__logo {
	display: block;
	height: 37px;
}
.site-logo-svg {
	display: block;
	width: 198px;
	height: 37px;
	transition: fill .3s ease;
}
.site-logo-svg .lg-ink { fill: #040000; }


/* 어두운 헤더 위에서는 전부 흰색 */
.site-header--dark .site-logo-svg .lg-ink,
.site-header--dark .site-logo-svg .lg-key { fill: #fff; }

/* 예전 이미지 두 장을 겹쳐 쓰던 방식의 잔재가 남아 있어도 영향이 없게 */
.site-header__logo svg { position: relative; }

/* ---------- 로그인 드롭다운 ----------
   메뉴가 늘 펼쳐진 채로 아이콘 밑에 삐져나와 Contact 를 덮고 있었다.
   평소에는 숨기고, 아이콘에 올리거나 키보드 초점이 들어오면 펼친다. */
.login-menu { position: relative; display: flex; align-items: center; }

.login-menu__pop {
	position: absolute;
	left: 50%;
	top: calc(100% + 10px);
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 132px;
	padding: 8px;
	border-radius: 12px;
	background: var(--c-white);
	box-shadow: 0 14px 34px rgba(20, 20, 50, .18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* 아이콘과 메뉴 사이 빈 틈에서 마우스가 빠져 닫히지 않도록 다리를 놓는다 */
.login-menu__pop::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}
.login-menu:hover .login-menu__pop,
.login-menu:focus-within .login-menu__pop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}


.login-menu__pop a + a { margin-top: 2px; }
.login-menu__pop a:hover,
.login-menu__pop a:focus-visible { background: rgba(11, 15, 247, .07); color: var(--c-blue); }

/* ---------- 우측 버튼이 두 개로 늘어난 만큼 ----------
   프로젝트요청·유지보수신청 두 개가 붙으면서 폭이 커져, 좁은 화면에서
   메뉴와 겹치기 시작하는 지점이 앞당겨졌다. 햄버거 전환도 그만큼 당긴다. */
@media (max-width: 1400px) {
	.btn-pill { width: 124px; }
	.gnb__list { gap: 24px; }
}
@media (max-width: 1300px) {
	.gnb, .site-header__util .btn-pill { display: none; }
	.btn-menu { display: block; }
	.site-header__logo { flex: 0 0 auto; }
	.site-header__util { flex: 1 1 auto; }
}
@media (min-width: 1301px) {
	.mobile-nav { display: none !important; }
}

/* 좁은 화면에서는 로그인 메뉴를 왼쪽으로 붙여 화면 밖으로 나가지 않게 */
@media (max-width: 480px) {
	.login-menu__pop { left: auto; right: 0; transform: translateY(-6px); }
	.login-menu:hover .login-menu__pop,
	.login-menu:focus-within .login-menu__pop { transform: translateY(0); }
	.site-logo-svg { width: 150px; height: 28px; }
	.site-header__logo { height: 28px; }
}

/* ---------- 메가메뉴 — 그 자리에서 아래로만 내려오게 ----------
   증상: 상단 메뉴에 올리면 위아래로 흔들렸다.
   원인: 메뉴가 열릴 때 .site-header 가 height:auto 로 바뀌는데, 안쪽 바가
        height:100% 라 기준을 잃고 100px → 45px 로 쪼그라들었다.
        그래서 로고와 메뉴가 위로 튀어 올랐다가, 닫히면 다시 내려오기를 반복했다.
        (패널은 .site-header__inner 안의 flex 줄에 들어 있어 바깥으로 뺄 수 없다.
         absolute 로 띄운 지금 배치는 그대로 두고, 바 높이만 못박으면 된다.)
   고침: 바 높이를 --header-h 로 고정한다. 열려 있든 아니든 바는 그대로 있고,
        패널만 그 아래로 내려온다. */
.site-header__inner { height: var(--header-h); }

/* 패널은 바 아래에서 시작한다 — 바가 흔들리지 않으므로 위치도 흔들리지 않는다 */
.mega { top: var(--header-h); }

/* ---------- 메가메뉴 배경 — 뒤가 비치지 않게 ----------
   메인 히어로의 큰 흰 글씨와 왼쪽 탭이 패널을 뚫고 보였다.
   rgba(255,255,255,.97) + backdrop-filter 조합이라 뒤 화면이 3% 남아 비쳤는데,
   히어로 글씨가 크고 밝아서 그 3% 가 그대로 읽혔다.
   배경을 불투명하게 두고, 더 이상 쓸모없는 뒤 배경 흐림도 뺀다. */
/* (아래 새 시안 블록에서 다시 지정한다) */

/* ---------- 우측 알약 버튼 — 오버할 때 남는 파란 테두리 ----------
   오버하면 흰 막(::before)이 아래에서 올라와 버튼을 덮는데, 그 막이 버튼과
   정확히 같은 크기라 둥근 모서리의 경계선 한 겹에 파란 배경이 남아
   테두리처럼 보였다. 막을 1px 씩 키우면 경계까지 덮인다.
   버튼에 overflow:hidden 이 걸려 있어 밖으로 삐져나오지 않는다. */
.btn-pill::before { inset: -1px; }

/* ---------- 알약 버튼 오버 효과 — 파란 테두리가 남지 않게 다시 ----------
   1px 만 키우는 방식으로는 화면 배율(125·150%)에 따라 경계가 남았다.
   덮는 층을 자식(::before)에서 배경 한 겹으로 바꾼다.
   같은 요소의 배경끼리는 둥근 모서리를 한 번만 깎으므로 경계가 생길 수 없다.
   아래에서 위로 차오르는 움직임은 그대로다. */
.btn-pill::before { display: none; }
.btn-pill {
	background:
		linear-gradient(#fff 0 0) no-repeat bottom center / 100% 0,
		var(--c-blue);
	transition: background-size .5s cubic-bezier(.3, .8, .3, 1),
	            color .35s ease,
	            transform .25s ease;
}
.btn-pill:hover,
.btn-pill:focus-visible {
	background-size: 100% 100%;
	color: var(--c-blue);
	transform: none;
	filter: none;
}

/* ============================================================
   메가메뉴 — 새 시안 (Figma 132:398, 상단 메뉴 오버 상태)
   ------------------------------------------------------------
   이전 시안(486:2188)의 흰 판·열 제목·아래 안내 띠는 통째로 버린다.
   새 시안은 헤더 바로 아래에 붙는 235px 짜리 어두운 반투명 띠 한 장이고,
   그 위에 흰 글씨 여섯 줄이 각 메뉴 글자 아래에 놓인다.
   아이콘은 Contact 열에만 남는다.
   ============================================================ */
.mega {
	padding: 0;
	height: 265px;
	background: rgba(0, 0, 0, .7);   /* 시안 532:3332 */
	-webkit-backdrop-filter: none;
	        backdrop-filter: none;
	box-shadow: none;
}
.mega__inner {
	position: relative;
	max-width: none;
	height: 100%;
	margin: 0;
}

/* 새 시안에 없는 것들 */
.mega-col__title,
.mega__cover { display: none; }

/* 열 배치 — 스크립트가 메뉴 항목을 재어 --cx 를 넣어 준다.
   스크립트가 없으면 아래 flex 로 여섯 등분해 펼친다. */
.mega__cols {
	display: flex;
	justify-content: center;
	gap: 56px;
	height: 100%;
	padding: 23px 0 0;
}
.mega-col { text-align: center; }

.has-mega-align .mega__cols { display: block; padding: 0; }
.has-mega-align .mega-col {
	position: absolute;
	left: 50%;
	top: 23px;
	margin-left: var(--cx, 0px);
	transform: translateX(-50%);
}

/* 항목 — 시안 532:3333 계열: Pretendard SemiBold 14px, 줄간격 2.2(=30.8px), #ccc.
   줄간격이 간격을 만들므로 위아래 여백을 따로 주지 않는다. */
.mega-col__list { display: block; }
.mega-col__list li + li { margin-top: 0; }
.mega-col__list a {
	display: block;
	padding: 0;

	font-weight: 600;
	line-height: 2.2;
	color: #ccc;
	white-space: nowrap;
	transition: color .2s ease;
}
.mega-col__list a:hover,
.mega-col__list a:focus-visible { color: #fff; }

/* 아이콘은 Contact 열만 (시안 532:3679 계산기 · 3682 AI · 3686 말풍선) */
.mega-col .mega-ico { display: none; }
.mega-col[data-menu="contact"] .mega-col__list a {
	display: flex;
	align-items: center;
	gap: 6px;                 /* 아이콘 24px 끝(1348) → 글자 시작(1354) */
	text-align: left;
	color: #b2b3ff;           /* 시안 532:3678 */
}
.mega-col[data-menu="contact"] .mega-col__list a:hover,
.mega-col[data-menu="contact"] .mega-col__list a:focus-visible { color: #fff; }
.mega-col[data-menu="contact"] .mega-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	color: #fff;
}
.mega-col[data-menu="contact"] .mega-ico svg { width: 24px; height: 24px; }
.mega-col[data-menu="contact"] .mega-ai {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border:1px solid #4A43EE;
	color: #4A43EE;
	font-size: clamp(10px, 0.879vw, 12px);
	font-weight: 500;
	letter-spacing: -.02em;
}

/* 햄버거로 바뀌는 폭부터는 메가메뉴를 쓰지 않는다 */
@media (max-width: 1300px) {
	.mega { display: none !important; }
}

/* ============================================================
   로그인 레이어팝업 — 시안(Figma 486:1312)
   ------------------------------------------------------------
   어느 페이지에서든 뜨므로 전역으로 불러오는 이 파일에 둔다.
   (member.css 는 회원 관련 페이지에서만 불러오기 때문에 쓸 수 없다)
   ============================================================ */
.lg-pop {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.lg-pop[hidden] { display: none; }

.lg-pop__dim {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: .75;              /* 시안 486:2127 */
	animation: lgPopFade .2s ease both;
}
@keyframes lgPopFade { from { opacity: 0; } }
@keyframes lgPopUp { from { opacity: 0; transform: translateY(12px); } }

.lg-pop__panel {
	position: relative;
	width: min(480px, 100%);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 55px 40px 53px;
	border: 1px solid #4a43ee;
	border-radius: 8px;
	background: #fff;
	box-shadow: 4px 4px 13px rgba(0, 0, 0, .03),
	            17px 17px 24px rgba(0, 0, 0, .03),
	            38px 38px 32px rgba(0, 0, 0, .02);
	text-align: center;
	animation: lgPopUp .26s cubic-bezier(.2, .8, .25, 1) both;
}

.lg-pop__close {
	position: absolute;
	right: 25px;
	top: 19px;
	width: 23px;
	height: 23px;
	padding: 0;
	border: 0;
	background: none;
	color: #0a090b;
	cursor: pointer;
}
.lg-pop__close svg { width: 23px; height: 23px; }
.lg-pop__close:hover { color: var(--c-blue); }

.lg-pop__title {
	margin: 0;
	font-size: clamp(20.2px, 2.236vw, 32.2px);
	font-weight: 800;
	line-height: 1.4;
	color: #0a090b;
}
.lg-pop__lead {
	margin: 6px 0 0;
	font-size: clamp(13px, 1.118vw, 16.1px);
	font-weight: 500;
	line-height: 1.6;
	color: #6a6b78;
}

.lg-pop__form { margin-top: 24px; }
.lg-pop__form input[type="text"],
.lg-pop__form input[type="password"] {
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 18px;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: clamp(14px, 2vw, 16.1px);
	color: #0a090b;
}
.lg-pop__form input::placeholder { color: #9a9aa6; }
.lg-pop__form input + label + input,
.lg-pop__form input[type="password"] { margin-top: 10px; }
.lg-pop__form input:focus {
	outline: none;
	border-color: #4a43ee;      /* 시안 486:2134 (활성 상태) */
}

.lg-pop__submit {
	display: block;
	width: 100%;
	height: 65px;
	margin-top: 27px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--c-blue) 0%, #fb3dab 100%);
	box-shadow: 0 10px 25px rgba(253, 113, 175, .1);
	color: #fff;
	font-family: inherit;
	font-size: clamp(14px, 2vw, 18.4px);
	font-weight: 800;
	cursor: pointer;
	transition: filter .2s ease, transform .2s ease;
}
.lg-pop__submit:hover { filter: brightness(1.06); transform: translateY(-1px); }

.lg-pop__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 29px 0 0;
	font-size: clamp(13px, 1.118vw, 16.1px);
	font-weight: 500;
}
.lg-pop__links a { color: #33343f; }
.lg-pop__links a:hover { color: var(--c-blue); }
.lg-pop__links span {
	width: 1px;
	height: 11px;
	background: #d5d5dd;
}

.lg-pop__ask {
	margin: 41px 0 0;
	font-size: clamp(13px, 1.118vw, 16.1px);
	font-weight: 500;
	color: #33343f;
}
.lg-pop__join {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 65px;
	margin-top: 17px;
	border: 1px solid var(--c-blue);
	border-radius: 8px;
	background: #fff;
	color: var(--c-blue);
	font-size: clamp(14px, 2vw, 18.4px);
	font-weight: 600;
	transition: border-color .2s ease, color .2s ease;
}
.lg-pop__join:hover { border-color: #6136d9; color: #6136d9; }

@media (max-width: 520px) {
	.lg-pop__panel { padding: 48px 24px 36px; }

	.lg-pop__submit,
	.lg-pop__join { height: 56px; }
	.lg-pop__ask { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.lg-pop__dim,
	.lg-pop__panel { animation: none; }
}

/* ---------- 상단 메뉴 간격 (시안 132:1068) ----------
   시안은 여섯 항목을 80px 씩 띄운다(글자 16px SemiBold, 묶음 폭 858px).
   style.css 의 40px 은 내가 임의로 줄여 둔 값이라 시안과 폭이 달랐다.
   화면이 좁아지면 로고·우측 버튼과 부딪히므로 단계로 줄인다.
   (여유 = 화면폭 - 1185) / 5 이하로 잡았다. */
.gnb__list { gap: 80px; }
@media (max-width: 1700px) {		.gnb__list { gap: 58px; } }
@media (max-width: 1560px) {		.gnb__list { gap: 42px; } }

/* ---------- 오버 메뉴는 바로 나타나고 바로 사라진다 ----------
   전에는 두 군데서 늦어졌다.
     1) CSS  opacity .28s + transform .34s + visibility 를 .34s 늦춰 끄기
     2) JS   main.js 가 마우스가 떠난 뒤 140ms 있다가 is-open 을 뗀다 (lazyClose)

   1)은 트랜지션을 없애서, 2)는 '헤더에 마우스도 초점도 없으면 무조건 감춘다'는
   규칙으로 덮는다. main.js 를 건드리지 않고도 곧바로 닫힌다. */
/* 닫힌 상태가 기본이다. main.js 는 헤더 어디에 올려도 is-open 을 붙이므로
   그 클래스도, style.css 의 '헤더 전체 hover' 도 여기서 무효로 만든다. */
.mega,
.site-header:hover .mega,
.site-header:focus-within .mega,
.mega.is-open {
	opacity: 0;
	visibility: hidden;
	transform: none;
	transition: none;
}

/* 여는 조건은 '메뉴 글자 위' 하나뿐이다. 펼쳐진 판 위로 마우스를 옮겨도
   계속 열려 있어야 하므로 판 자신도 조건에 넣는다. */
.site-header:has(.gnb:hover) .mega,
.site-header:has(.gnb:focus-within) .mega,
.site-header:has(.mega:hover) .mega,
.site-header:has(.mega:focus-within) .mega {
	opacity: 1;
	visibility: visible;
}

/* 로그인 아이콘은 a 에서 button 으로 바뀌었다(링크 제거).
   전역 button 초기화가 padding 은 건드리지 않아 기본 여백이 남는다. */
.btn-login { padding: 0; }