@charset "utf-8";
/* ═══════════════════════════════════════════════════════════
   motion.css — 스크롤 모션 / 텍스트 분해 / 호버 효과
   2026-08-28 · v5
   ═══════════════════════════════════════════════════════════ */

/* ── 1. (삭제됨) 이동 중 backdrop-filter 해제 ─────────────
   카드는 rgba(255,255,255,0.20) + blur(10px) 조합이라 blur 를 끄면
   흰색 20% 만 남아 뒤 사진 배경이 비쳐 검게 보인다.
   부하는 scale·rotation 제거와 이동거리 축소로 대신 낮춘다. */

/* ── 2. 텍스트 분해 ──────────────────────────────────────
   단어 단위로만 쪼갠다. 높이가 바뀌면 JS(safeSplit)가 원문으로 되돌린다.

   ※ vertical-align 은 반드시 baseline 이어야 한다.
      top 으로 두면 단어 박스의 '윗변'을 맞추는데, 박스 안 글자의
      베이스라인 위치는 그 단어가 실제로 쓰는 폰트의 ascent 에 따라
      달라진다. 한 문장에 영문 전용 단어("L&K")와 한글이 섞인 단어
      ("Company는")가 같이 있으면 두 단어가 서로 다른 폰트 조합을
      쓰게 되고, 윗변을 맞춘 탓에 베이스라인이 어긋나 글자가
      위아래로 삐뚤삐뚤하게 보인다. (업체명이 한글에서 영문으로
      바뀌면서 드러난 문제. PC 는 <br> 로 줄바꿈이 고정돼 분해가
      유지되므로 증상이 보이고, 모바일은 분해 시 높이가 변해
      safeSplit 이 원문으로 되돌리기 때문에 멀쩡해 보였다.)
      baseline 으로 두면 폰트가 섞여도 글자 밑선이 항상 정렬된다. */
.tx-part {
	display: inline-block;
	vertical-align: baseline;
}

/* ── 2-1. 헤더 네비게이션 롤 구조 ────────────────────────
   글자가 위로 굴러 나가고 같은 글자가 아래에서 올라온다.
   ※ 구조 규칙은 미디어쿼리 밖에 둔다. @media (hover) 안에 넣으면
      호버를 지원하지 않는 터치 기기에서 복제된 글자가 그대로 노출된다. */
#header > .contents_con > table > tbody > tr > .nav_td > .list_con > ul > li a {
	display: inline-block;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}
.nav-roll {
	display: block;
	transition: transform 0.55s cubic-bezier(0.9, 0, 0.1, 1);
}
.nav-roll > span {
	display: block;
}
.nav-roll > span:last-child {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	color: #008EFD;
}

/* ── 3. 호버 효과 ──────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {

	/* 헤더 네비게이션 롤 — 호버 전환만. 구조는 미디어쿼리 밖에 있다 */
	#header > .contents_con > table > tbody > tr > .nav_td > .list_con > ul > li a:hover .nav-roll {
		transform: translateY(-100%);
	}

	/* 헤더 상담신청 버튼 — 뜨지 않는다. 안쪽이 아래에서 차오른다. */
	#header > .contents_con > table > tbody > tr > .btn_td > .list_con > ul > li .a_btn.counsel {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}
	#header > .contents_con > table > tbody > tr > .btn_td > .list_con > ul > li .a_btn.counsel::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: #1F4A6E;
		transform: scaleY(0);
		transform-origin: center bottom;
		transition: transform 0.45s cubic-bezier(0.9, 0, 0.1, 1);
	}
	#header > .contents_con > table > tbody > tr > .btn_td > .list_con > ul > li .a_btn.counsel:hover::before {
		transform: scaleY(1);
	}
	#header > .contents_con > table > tbody > tr > .btn_td > .list_con > ul > li .a_btn.counsel > img {
		transition: transform 0.45s cubic-bezier(0.9, 0, 0.1, 1);
	}
	#header > .contents_con > table > tbody > tr > .btn_td > .list_con > ul > li .a_btn.counsel:hover > img {
		transform: translateX(3px);
	}

	/* 인스타그램 버튼 — 밝기만 */
	#header > .contents_con > table > tbody > tr > .btn_td > .list_con > ul > li .a_btn.instagram {
		transition: opacity 0.3s ease;
	}
	#header > .contents_con > table > tbody > tr > .btn_td > .list_con > ul > li .a_btn.instagram:hover {
		opacity: 0.7;
	}

	/* 상담신청하기 제출 버튼 — 뜨지 않는다.
	   아래에서 색이 차오르고 글자만 살짝 밝아진다. */
	#main_con > .info11_con > .contents_con > .contents_con > .counsel_con > .contents_con .write_con > .btn_con .a_btn {
		position: relative;
		overflow: hidden;
		isolation: isolate;
		transition: color 0.35s ease;
	}
	#main_con > .info11_con > .contents_con > .contents_con > .counsel_con > .contents_con .write_con > .btn_con .a_btn::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: #0068BE;
		transform: scaleY(0);
		transform-origin: center bottom;
		transition: transform 0.45s cubic-bezier(0.9, 0, 0.1, 1);
	}
	#main_con > .info11_con > .contents_con > .contents_con > .counsel_con > .contents_con .write_con > .btn_con .a_btn:hover::before {
		transform: scaleY(1);
	}

	/* 카드 — 뜨는 대신 그림자만 깊어진다 */
	#main_con > .info01_con > .contents_con > .info02_con > .contents_con > .list_con > ul > li .list_div,
	#main_con > .info03_con > .contents_con > .contents_con > .list_con > .contents_con > ul > li .list_div,
	#main_con > .info06_con > .contents_con > .contents_con > .list_con > ul > li .list_div,
	#main_con > .info07_con > .contents_con > .contents_con > .list_con > ul > li .list_div {
		transition: box-shadow 0.45s cubic-bezier(0.33, 1, 0.68, 1);
	}
	#main_con > .info01_con > .contents_con > .info02_con > .contents_con > .list_con > ul > li .list_div:hover,
	#main_con > .info03_con > .contents_con > .contents_con > .list_con > .contents_con > ul > li .list_div:hover,
	#main_con > .info06_con > .contents_con > .contents_con > .list_con > ul > li .list_div:hover,
	#main_con > .info07_con > .contents_con > .contents_con > .list_con > ul > li .list_div:hover {
		box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
	}

	/* 아코디언(info10) — 커서만 반응 */
	#main_con > .info10_con > .contents_con > .contents_con > .list_con > ul > li .list_div {
		cursor: pointer;
		transition: opacity 0.3s ease;
	}
	/* 열려 있는 항목(.on)은 흐리게 하지 않는다 — 열림 상태 강조가 죽는다 */
	#main_con > .info10_con > .contents_con > .contents_con > .list_con > ul > li .list_div:not(.on):hover {
		opacity: 0.88;
	}

	/* 푸터 */
	#footer > .info01_con > .contents_con a {
		transition: color 0.3s ease;
	}
	#footer > .info01_con > .contents_con a:hover {
		color: #FFF;
	}
	#footer > .info02_con > .contents_con > .contents_con > .btn_con .a_btn {
		transition: opacity 0.3s ease;
	}
	#footer > .info02_con > .contents_con > .contents_con > .btn_con .a_btn:hover {
		opacity: 0.75;
	}

	/* 모바일 메뉴 (호버 가능한 태블릿) */
	#header > .m_main_nav > .list_con > ul > li a {
		transition: color 0.3s ease, background-color 0.3s ease;
	}
	#header > .m_main_nav > .list_con > ul > li a:hover {
		color: #008EFD;
		background-color: rgba(0, 142, 253, 0.06);
	}
}


/* ── 5. 라운드 모서리 클리핑 ────────────────────────────
   크롬에서 backdrop-filter 가 걸린 요소는 조상의 border-radius +
   overflow:hidden 으로 잘리지 않는다. 사각 모서리가 그대로 삐져나와
   라운드 카드 모서리에 어두운 각진 자국으로 보인다.
   → blur 가 걸린 자식에게 같은 라운드값을 직접 준다. */
#main_con > .info02_con > .contents_con > .contents_con > .list_con > ul > li .list_div > .contents_con > .text_con,
#main_con > .info02_con > .contents_con > .contents_con > .list_con > ul > li .list_div > .contents_con > .over_con,
#main_con .list_div > .contents_con > .text_con,
#main_con .list_div > .contents_con > .over_con {
	border-radius: inherit;
}
/* 라운드 상자 안의 직계 자식이 모서리를 덮지 않게 한다 */
#main_con .list_div,
#main_con .intro_con,
#main_con .counsel_con {
	isolation: isolate;              /* 자식 합성 레이어를 상자 안에 가둔다 */
}

/* ── 6. 헤더 글래스 ────────────────────────────────────
   "유리처럼 안 보이는" 가장 큰 이유는 blur 세기가 아니라 **불투명도**다.
   0.8 이면 뒤가 거의 안 비쳐서 그냥 흰 막대로 읽힌다.
   뒤 내용이 실제로 뭉개져 지나가는 게 보여야 유리로 인식된다.

   구성 요소
     ① 낮은 불투명도 + 강한 blur  → 뒤가 비치며 뭉개진다
     ② saturate + brightness      → 통과한 빛이 살아난다
     ③ 대각 스페큘러(sheen)        → 유리 표면에 빛이 스치는 느낌
     ④ 미세 그레인                → 완벽히 매끈한 면은 유리로 안 읽힌다
     ⑤ 윗면 하이라이트(inset)      → 유리 두께
   아래 경계는 선으로 끊지 않는다. */
#header {
	background-color: transparent !important;
	background-image:
		/* ③ 왼쪽 위에서 스치는 빛 */
		linear-gradient(102deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 38%, rgba(255,255,255,0) 62%),
		/* ① 유리 본체 — 위가 조금 더 두껍다 */
		linear-gradient(180deg, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.44) 100%) !important;
	-webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.06) !important;
	backdrop-filter: blur(30px) saturate(200%) brightness(1.06) !important;
	border-bottom: none !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 0 -1px 0 rgba(255, 255, 255, 0.30);
	transition: background-image 0.5s ease, box-shadow 0.5s ease;
}
/* ④ 미세 그레인 — 유리 표면의 질감 */
#header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
	opacity: 0.05;
	mix-blend-mode: overlay;
}
/* 헤더 내용은 그레인 위에 올린다 */
#header > .contents_con,
#header > .m_main_nav {
	position: relative;
	z-index: 1;
}
/* 아래 경계는 선이 아니라 흐려지는 그림자. 스크롤을 시작할 때만 나타난다 */
#header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 18px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(16, 24, 40, 0.06), rgba(16, 24, 40, 0));
	opacity: 0;
	transition: opacity 0.5s ease;
}
/* 스크롤하면 가독성을 위해 아주 조금만 두꺼워진다 (여전히 뒤가 비친다) */
#header.is-scrolled {
	background-image:
		linear-gradient(102deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.05) 38%, rgba(255,255,255,0) 62%),
		linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.58) 100%) !important;
}
#header.is-scrolled::after { opacity: 1; }

/* ── 7. SVG 아이콘 내부 미세 모션 ──────────────────────
   <img> 를 인라인 <svg> 로 바꾼 뒤(JS), 내부 path 를 각각 아주 조금씩
   움직인다. 파일 하나가 통째로 움직이는 게 아니라 선들이 살아 있는 느낌.
   transform/opacity 만 쓰므로 합성 단계에서 처리된다. */
#main_con > .info02_con > .contents_con > .contents_con > .list_con > ul > li .list_div > .contents_con > .text_con > .icon_con svg {width:min(100px, 5.21vw);}
#main_con > .info04_con > .contents_con > .contents_con .list_div > .contents_con > .icon_con svg {width:min(100px, 5.21vw);}
#main_con > .info06_con > .contents_con > .contents_con > .list_con > ul > li .list_div > .icon_con svg {width:min(90px, 4.69vw);}
#main_con > .info06_con > .contents_con > .contents_con > .intro_con > .title_con > .icon_con svg {width:100%;}
#main_con > .info08_con > .contents_con > .title_con > .icon_con svg {width:min(320px, 16.67vw);}

.icon_con svg { display: inline-block; height: auto; overflow: visible; }

/* 선 아이콘은 opacity 를 건드리면 깜빡이는 것처럼 보인다.
   위치만 아주 조금, 서로 다른 궤적으로 흘려야 "살아 있다"로 읽힌다.
   진폭은 viewBox 100 기준 1px 미만. scale 도 쓰지 않는다
   (선 굵기가 미세하게 변해 흔들려 보인다). */
@keyframes icoDriftA {
	0%, 100% { transform: translate(0, 0); }
	25%      { transform: translate(0.35px, -0.6px); }
	50%      { transform: translate(-0.25px, -0.35px); }
	75%      { transform: translate(-0.45px, 0.25px); }
}
@keyframes icoDriftB {
	0%, 100% { transform: translate(0, 0); }
	30%      { transform: translate(-0.4px, 0.3px); }
	60%      { transform: translate(0.3px, 0.5px); }
	85%      { transform: translate(0.15px, -0.3px); }
}
.icon_con svg [data-ico] {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation: icoDriftA 7.5s ease-in-out infinite;
}
.icon_con svg [data-ico="1"] { animation-name: icoDriftB; animation-duration: 8.6s; animation-delay: -1.9s; }
.icon_con svg [data-ico="2"] { animation-duration: 9.4s;  animation-delay: -4.2s; }
.icon_con svg [data-ico="3"] { animation-name: icoDriftB; animation-duration: 8.0s; animation-delay: -6.1s; }

/* 화면 밖 아이콘은 애니메이션을 멈춘다 (JS 가 토글) */
.icon_con svg.ico-idle [data-ico] { animation-play-state: paused; }


/* ── 8. 모바일 아이콘 크기 ────────────────────────────
   common_all.css 의 @media(max-width:1024px) 안에 있는
   .icon_con img 규칙을 svg 용으로 그대로 옮긴다.
   이걸 빠뜨리면 인라인 SVG 가 크기 지정을 못 받아 모바일에서
   아주 작게 렌더된다(아이콘·텍스트 비율이 깨지는 원인). */
@media all and (max-width: 1024px) {
	#main_con > .info04_con > .contents_con > .contents_con .list_div > .contents_con > .icon_con svg {width:27.78vw;}
	#main_con > .info06_con > .contents_con > .contents_con > .list_con > ul > li .list_div > .icon_con svg {width:19.44vw;}
	#main_con > .info06_con > .contents_con > .contents_con > .intro_con > .title_con > .icon_con svg {width:28.06vw;}
	#main_con > .info08_con > .contents_con > .title_con > .icon_con svg {width:76.11vw;}
}


/* ── 9. 한국어 줄바꿈 ──────────────────────────────────
   기본값에서 브라우저는 한글을 글자 단위로 끊을 수 있어
   어절 중간에서 줄이 넘어간다. keep-all 로 어절을 지킨다.
   text-wrap:pretty 는 마지막 줄에 한 글자만 남는 고아 줄을 줄여준다
   (미지원 브라우저는 무시하므로 안전하다). */
#main_con .title_con span,
#main_con [class*="text0"] span,
#main_con .list_div .text_con span,
#main_con .intro_con span,
#footer .contents_con span {
	word-break: keep-all;
	text-wrap: pretty;
}
/* 제목은 줄 길이를 고르게 맞춘다 */
#main_con > [class*="info"] > .contents_con > .title_con > .text02_con span,
#main_con .list_div > .title_con span {
	text-wrap: balance;
}


/* ── 10. 모바일 헤더 ───────────────────────────────────
   common_all.css 는 모바일에서 헤더를 불투명 흰색으로 되돌리고
   blur 를 0 으로 끈다(성능 고려로 보인다).
   유리감은 유지하되 모바일에서는 blur 를 낮추고 불투명도를 올려
   가독성과 부하를 함께 잡는다. */
@media all and (max-width: 1024px) {
	#header {
		background-image:
			linear-gradient(102deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 66%),
			linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.76) 100%) !important;
		/* 모바일은 blur 를 낮추고 brightness 를 뺀다.
		   고정 헤더 뒤 콘텐츠가 계속 바뀌므로 합성 비용이 그대로 부하가 된다. */
		-webkit-backdrop-filter: blur(14px) saturate(170%) !important;
		backdrop-filter: blur(14px) saturate(170%) !important;
	}
	/* 그레인은 blend-mode 합성 비용이 있어 모바일에서는 끈다 */
	#header::before { display: none; }
}


/* ── 11. 모바일 터치 타깃 ──────────────────────────────
   화면에 보이는 크기는 그대로 두고 눌리는 영역만 44px 로 넓힌다.
   (Codex 모바일 검수 지적. 390px 기준 실측값을 근거로 함) */
@media all and (max-width: 1024px) {
	/* 햄버거 메뉴 — 390px 에서 43.3px 이라 아슬하게 미달 */
	#header > .contents_con > table > tbody > tr > .menu_btn_td {
		width: max(11.11vw, 44px);
	}
	#header > .contents_con > table > tbody > tr > .menu_btn_td > a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
	/* 푸터 링크 — 27.7px */
	#footer > .info01_con > .contents_con > a,
	#footer .btn_con .a_btn {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	/* 약관 팝업 닫기 — 28.2px */
	.terms_popup_con > .contents_con > .close_btn {
		width: max(7.22vw, 44px);
		height: max(7.22vw, 44px);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.terms_popup_con > .contents_con > .close_btn a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
}


/* ── 12. 상담 폼 터치 타깃 ─────────────────────────────
   모바일에서 input 21.7px / select 32.5px 로 44px 에 못 미친다.

   .input 은 `border:0` 에 배경도 없어 화면에 보이는 상자가 없다.
   그래서 높이를 44px 로 키우고 늘어난 만큼 음수 마진으로 상쇄하면
   **레이아웃은 1px 도 변하지 않으면서** 눌리는 영역만 넓어진다.

   .select 는 테두리와 라운드가 보이는 상자라 같은 방법을 쓸 수 없다.
   높이를 그대로 44px 로 키운다(행이 약 11px 높아진다). */
@media all and (max-width: 1024px) {
	#main_con > .info11_con > .contents_con > .contents_con > .counsel_con > .contents_con .write_con .info_td .input {
		min-height: 44px;
		/* 5.56vw 가 44px 를 넘는 폭(약 791px 이상)에서는 0 으로 묶어
		   여백이 벌어지지 않게 한다 */
		margin-top: min(0px, calc((5.56vw - 44px) / 2));
		margin-bottom: min(0px, calc((5.56vw - 44px) / 2));
	}
	#main_con > .info11_con > .contents_con > .contents_con > .counsel_con > .contents_con .write_con .info_td .select {
		min-height: 44px;
	}
}

/* ── 4. 접근성 — 동작 줄이기 ──────────────────────────── */
/* 예전에는 여기서 .tx-part 의 opacity/transform 을 !important 로 고정하고
   아이콘 호흡·네비 롤·카드 transition 을 죽였다.
   그런데 인라인 스타일은 !important 를 이길 수 없어서, reduce 환경에서는
   GSAP 이 만든 단어 분해 연출이 통째로 무력화됐다.
   설계된 연출을 어느 환경에서나 동일하게 보여주기로 했으므로(index.html
   모션 초기화 주석 참고) 그 규칙들을 걷어낸다.
   스크롤 점프만 OS 설정을 따른다. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
}


/* ── 13. info01 자동차 헤드라이트 점등 ──────────────────
   이미지 위에 같은 비율의 레이어를 겹치고, 램프 자리마다 빛 번짐을 둔다.
   좌표는 원본 이미지(PC 1269x444, 모바일 1074x681) 기준 % — index.html 인라인 style.
   레이어에 z-index 를 주면 스태킹 컨텍스트가 생겨 screen 합성이 먹지 않는다. */
.hl_layer {position:absolute; top:0; left:0; width:100%; aspect-ratio:1269 / 444; pointer-events:none;}
.hl_layer.hl_m {display:none; aspect-ratio:1074 / 681;}
.hl {position:absolute; display:block; border-radius:50%;
	transform:translate(-50%, -50%) rotate(var(--r, 0deg));
	background:radial-gradient(ellipse at center, rgba(255,252,242,0.95) 0%, rgba(214,232,255,0.55) 34%, rgba(214,232,255,0) 70%);
	mix-blend-mode:screen; opacity:0.08;
	animation:hlGlow 3.6s ease-in-out infinite;}
.hl.hl_drl {--peak:0.7;}
.hl.hl_far {--peak:0.55;}
.hl.hl_b {animation-delay:0.9s;}
@keyframes hlGlow {
	0%, 100% {opacity:0.08;}
	50%      {opacity:var(--peak, 0.85);}
}
@media all and (max-width: 1024px) {
	.hl_layer.hl_w {display:none;}
	.hl_layer.hl_m {display:block; left:0.28vw; width:calc(100% - 0.56vw);}
}