/* =====================================================================
   home.css — 메인페이지 (front page)
   layout.css 토큰·유틸리티 재사용. 페이지 고유 블록만 여기 둔다.

   ★ .site-header 가 position:fixed 라 첫 섹션이 헤더 높이를 직접 흡수해야 한다.
     (서브페이지 about.css 와 동일한 함정 — 실측으로 확인된 항목)
     히어로는 배경이미지가 아니라 <img> 라서 헤더가 그 위에 겹쳐도 무방하지만,
     배너 상단의 로고·문구가 가려지므로 margin-top 으로 밀어낸다.
   ===================================================================== */

/* ---------------- 히어로 슬라이더 ---------------- */
/* ★ margin-top 을 넣지 않는다.
   로컬 미리보기(헤더를 직접 배치)에서는 .site-header 가 fixed 라 상단 여백이
   필요했지만, 실제 사이트는 HFE 헤더 템플릿이 문서 흐름에서 자리를 차지한다.
   그래서 margin-top:72px 을 주면 헤더 높이(73px)에 더해져 71px 빈 띠가 생겼다
   (실측: header.bottom=73, hero.top=144). 오프셋은 헤더가 이미 만든다. */
.hero {
	position: relative;
	background: var(--color-bg-cream);
	overflow: hidden;
}
.hero__track { position: relative; }

.hero__slide {
	display: none;
	width: 100%;
}
.hero__slide.is-active { display: block; }

.hero__slide img {
	display: block;
	width: 100%;
	height: auto;
}

/* ★ 모바일 배너는 세로형(640×1100, 비율 0.58)이다. 그대로 두면 560px 화면에서
   히어로 높이가 963px 까지 나와 첫 화면이 배너로만 채워진다(실측).
   높이를 화면의 68% 로 제한하고 이미지를 채워 넣는다.
   <img> 의 width/height 속성은 PC 원본(1920×720) 기준이라 모바일 소스와
   비율이 달라지므로, aspect-ratio 를 CSS 로 덮어 레이아웃 시프트를 막는다. */
@media (max-width: 760px) {
	.hero__slide { position: relative; }
	.hero__img {
		aspect-ratio: 640 / 1100;
		max-height: 68vh;
		/* ★ cover 로 자르면 배너 안의 문구가 잘린다(실측: "시그니처 시리즈" 우측이
		   잘려나갔다). 배너는 문구가 이미지에 인쇄된 소재라 잘라내면 안 된다.
		   contain 으로 전체를 보이게 하고, 남는 여백은 배너별 톤으로 맞춘다.
		   (모서리 픽셀 실측: m1·m2=검정, m3=#959AE8 보라, m4=#D3E6FF 연파랑) */
		object-fit: contain;
		object-position: center;
	}
	.hero__slide:nth-child(1) .hero__img,
	.hero__slide:nth-child(2) .hero__img { background: #000; }
	.hero__slide:nth-child(3) .hero__img { background: #959ae8; }
	.hero__slide:nth-child(4) .hero__img { background: #d3e6ff; }
}

/* 좌우 화살표 */
.hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .82);
	color: var(--color-text);
	font-size: 30px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	transition: background-color .2s ease;
}
.hero__nav:hover { background: #fff; }
.hero__nav--prev { left: 20px; }
.hero__nav--next { right: 20px; }

/* 점 인디케이터 */
.hero__dots {
	position: absolute;
	left: 0; right: 0; bottom: 18px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.hero__dot {
	width: 10px; height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
	transition: background-color .2s ease, width .2s ease;
}
.hero__dot.is-on { width: 26px; background: #fff; }

@media (max-width: 760px) {
	/* ★ 실측에서 38px 로 나와 탭 기준(44px) 미달이었다. 고령 사용자가 많은
	   사이트라 화살표는 44px 아래로 내리지 않는다. */
	.hero__nav { width: 44px; height: 44px; font-size: 26px; }
	.hero__nav--prev { left: 8px; }
	.hero__nav--next { right: 8px; }
	.hero__dots { bottom: 10px; }
}

/* ---------------- 3단 퀵카드 ---------------- */
.quick { background: var(--color-bg); }
.quick__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 900px) {
	.quick__grid { grid-template-columns: 1fr; gap: 16px; }
}

.quick__card {
	display: block;
	padding: 40px 32px;
	border: 1px solid var(--color-line-2);
	border-radius: 18px;
	background: var(--color-bg-card);
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.quick__card:hover {
	transform: translateY(-4px);
	border-color: var(--color-primary);
	box-shadow: 0 12px 28px rgba(21, 10, 80, .10);
}
/* 가운데 카드 강조 (PPT 원본에서도 가운데가 강조돼 있었다) */
.quick__card--accent {
	background: var(--color-bg-cream);
	border-color: var(--color-line);
}

.quick__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	border-radius: 999px;
	background: #fff;
	color: var(--color-primary);
	border: 1px solid var(--color-line-2);
}
.quick__ico svg { width: 36px; height: 36px; }

/* 2026-08 전체 확대 요청 — 22→27px (+23%) */
.quick__title {
	margin-top: 20px;
	font-size: 27px;
	color: var(--color-primary-deep);
}
/* 16→18.5px (+16%) */
.quick__desc {
	margin-top: 14px;
	font-size: 18.5px;
	line-height: 1.75;
	color: var(--color-text-sub);
	/* 원본 사이트는 줄바꿈이 들쭉날쭉했다(PPT "텍스트 정렬 요청") → 가운데 정렬 고정 */
	text-wrap: balance;
}
/* 15→17px (+13%) */
.quick__more {
	display: inline-block;
	margin-top: 22px;
	padding: 10px 0 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--color-primary);
	border-top: 1px solid transparent;
}
.quick__card:hover .quick__more { text-decoration: underline; }

/* ---------------- 홍보 갤러리 ---------------- */
.promo { background: var(--color-bg-cream); text-align: center; }
.promo .sec-desc { margin-left: auto; margin-right: auto; }

/* 홍보물 6장 → 3열 2줄이 깔끔하다.
   4열이면 두 번째 줄에 2장만 남아 빈 칸이 생긴다(2026-08-20 6장으로 확정).
   정사각 이미지라 3열이 4열보다 크게 보이는 이점도 있다. */
.promo__grid {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 900px) { .promo__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.promo__btn {
	display: block;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--color-line-2);
	transition: transform .2s ease, box-shadow .2s ease;
}
.promo__btn:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(21, 10, 80, .12);
}
.promo__btn img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ---------------- 라이트박스 ---------------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(10, 12, 24, .88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 20px;
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
	max-width: min(880px, 92vw);
	max-height: 86vh;
	display: flex;
}
.lightbox__img {
	max-width: 100%;
	max-height: 86vh;
	width: auto; height: auto;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
}

.lightbox__close {
	position: absolute;
	top: 16px; right: 20px;
	width: 48px; height: 48px;
	font-size: 34px;
	line-height: 1;
	color: #fff;
	border-radius: 999px;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .12); }

.lightbox__nav {
	flex-shrink: 0;
	width: 56px; height: 56px;
	margin: 0 8px;
	font-size: 40px;
	line-height: 1;
	color: #fff;
	border-radius: 999px;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 640px) {
	.lightbox { padding: 56px 8px; }
	.lightbox__nav {
		position: absolute;
		bottom: 14px;
		width: 52px; height: 52px;
		background: rgba(255, 255, 255, .14);
	}
	.lightbox__nav--prev { left: 22%; }
	.lightbox__nav--next { right: 22%; }
}

/* ---------------- 상담문의 ---------------- */
/* ★ 2026-08-20 톤앤매너 개편.
   이전에는 #150a50 단색이었고, 바로 아래 2단배너가 #2c77bc / #121626 이라
   "보라빛 네이비 → 선명한 블루 → 회색빛 네이비" 로 색 계열이 3번 튀었다.
   여기는 진한 네이비를 유지하되(전화번호 가독성이 가장 중요한 블록),
   단색 대신 primary 쪽으로 아주 옅게 흐르는 그라데이션을 깔아 평면감을 줄인다.
   아래 2단배너는 밝은 카드로 바꿨으므로 어두운 블록은 이제 이 하나뿐이다. */
.contact-cta {
	position: relative;
	overflow: hidden;
	/* 네이비 → 살짝 파란 네이비. 두 색 모두 로고 계열 안에서 고른다. */
	background:
		radial-gradient(120% 140% at 82% 8%, rgba(44, 119, 188, .38) 0%, rgba(44, 119, 188, 0) 58%),
		linear-gradient(180deg, #1a0e5e 0%, var(--color-primary-deep) 100%);
	color: var(--color-text-on-dark);
	padding: 72px 0;
}
/* 상단 헤어라인 — 위 섹션(밝은 크림)과의 경계를 부드럽게 끊어준다.
   accent 그린을 아주 얇게만 써서 로고 3색이 한 번씩 등장하게 한다. */
.contact-cta::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%);
	opacity: .85;
}
.contact-cta__inner {
	position: relative;   /* 그라데이션 위로 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
/* 2026-08 전체 확대 — 아래 값들은 +12~25% 범위 */
.contact-cta__brand {
	font-size: 19px;
	font-weight: 700;
	color: var(--color-accent);
	letter-spacing: .01em;
}
.contact-cta__label {
	margin-top: 12px;
	font-size: 20px;
	color: var(--color-text-on-dark-sub);
}
.contact-cta__tel {
	display: inline-block;
	margin-top: 6px;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff;
}
.contact-cta__hours {
	margin-top: 20px;
	display: grid;
	gap: 8px;
	font-size: 18.5px;
	color: var(--color-text-on-dark-sub);
}
.contact-cta__hours > div { display: flex; gap: 14px; }
.contact-cta__hours dt {
	min-width: 46px;
	font-weight: 700;
	color: var(--color-text-on-dark);
}

.contact-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-cta__btn {
	min-height: 58px;
	padding: 16px 34px;
	font-size: 18px;
}
.contact-cta__btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .5);
}
.contact-cta__btn--ghost:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 900px) {
	.contact-cta { padding: 48px 0; }
	.contact-cta__tel { font-size: 42px; }
	.contact-cta__actions { width: 100%; }
	.contact-cta__btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 400px) {
	.contact-cta__tel { font-size: 34px; }
}

/* ---------------- 하단 2단 배너 ---------------- */
/* ★ 2026-08-20 전면 개편. 이전 구조의 문제 3가지를 모두 바꿨다.
     ① 진한 단색 블록(#2c77bc / #121626) 2개가 위 상담문의(#150a50)에 이어져
        어두운 덩어리가 3연속 → 밝은 섹션 안의 "카드 2장" 으로 바꿨다.
     ② 두 박스가 완전히 동일한 가운데정렬 스택이라 정보 위계가 없었다
        → 좌측정렬 + 설명 한 줄 추가.
     ③ 카드 관용구를 .quick 과 통일(radius 18px / 얇은 라인 / hover 부상).
        섹션마다 다른 규칙을 쓰면 톤앤매너가 어긋난다.
   ※ 화면을 꽉 채우는 풀블리드로 되돌리지 말 것 — 그러면 ①이 재발한다. */
.dual { background: var(--color-bg-cream); }
.dual__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 760px) {
	.dual__grid { grid-template-columns: 1fr; gap: 16px; }
}

.dual__box {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 40px 36px;
	border-radius: 18px;
	border: 1px solid var(--color-line-2);
	background: var(--color-bg-card-solid);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dual__box:hover {
	transform: translateY(-4px);
	border-color: var(--color-primary);
	box-shadow: 0 12px 28px rgba(21, 10, 80, .10);
}
/* 좌측 색 띠로 두 카드를 구분한다. 배경 전체를 칠하지 않고 띠만 쓰는 이유:
   본문이 흰 배경 위에 남아야 고령 사용자 대비(4.5:1)를 확보할 수 있다. */
.dual__box::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
}
.dual__box--fund::before { background: var(--color-accent); }
.dual__box--map::before  { background: var(--color-primary); }

.dual__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px; height: 60px;
	border-radius: 16px;   /* .quick 은 원형이라 여기는 라운드 사각으로 변화를 준다 */
	border: 1px solid var(--color-line-2);
	background: var(--color-bg-cream);
}
.dual__ico svg { width: 30px; height: 30px; }
/* ★ --color-accent-dark(#6fa441) 를 쓰면 크림 배경에서 2.76:1 로
   비텍스트 최소기준 3:1 에 미달한다(실측). 고령 사용자가 많은 사이트라
   기준을 넘기는 값으로 한 단계 더 내렸다 → #557f31 = 4.37:1.
   로고 그린 계열은 유지된다. */
.dual__box--fund .dual__ico { color: #557f31; }
.dual__box--map  .dual__ico { color: var(--color-primary); }

.dual__eyebrow {
	margin-top: 20px;
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text-sub);
}
.dual__title {
	margin-top: 6px;
	font-size: 30px;
	color: var(--color-primary-deep);
}
.dual__desc {
	margin-top: 12px;
	font-size: 18px;
	line-height: 1.75;
	color: var(--color-text-sub);
}
.dual__more {
	display: inline-block;
	margin-top: 20px;
	font-size: 17px;
	font-weight: 700;
	color: var(--color-primary);
}
.dual__box:hover .dual__more { text-decoration: underline; }

@media (max-width: 760px) {
	.dual__box { padding: 32px 24px; }
	.dual__title { font-size: 26px; }
}