@charset "utf-8";

/* =========================================================
   daisyui 테마 디자인 CSS — 방수119 (모던 프리미엄 / 절제된 글래스모피즘)
   - 브랜드 팔레트를 daisyUI 시맨틱 토큰(primary/secondary/...)에 매핑한다.
     → 마크업은 계속 시맨틱 클래스(btn-primary, bg-base-100 ...)만 쓰면 된다.
   - 팔레트 값 자체는 이 파일에서만 관리한다.
   ========================================================= */

/* ── 브랜드 팔레트 ───────────────────────────────────── */
:root {
	/* Primary — 전문성/안정성/기술력 */
	--bs-navy-deep: #0B1F33;
	--bs-navy: #123B5D;
	--bs-blue-pro: #165D8F;

	/* Secondary — 물/방수/청결 */
	--bs-blue-water: #27A9E1;
	--bs-blue-aqua: #38C6D9;
	--bs-teal-deep: #087F8C;

	/* Accent — 행동 유도(견적/상담/긴급) */
	--bs-orange: #FF8A34;
	--bs-yellow: #FFC857;

	/* Background */
	--bs-bg-ice: #F3F8FC;
	--bs-bg-bluegray: #E8F0F5;
	--bs-bg-dark: #071725;

	/* Text */
	--bs-text-main: #102A3C;
	--bs-text-sub: #526B7A;
	--bs-text-muted: #7D929E;
	--bs-text-light: #F5FAFD;

	/* Glass */
	--bs-glass-light: rgba(255, 255, 255, 0.16);
	--bs-glass-strong: rgba(255, 255, 255, 0.24);
	--bs-glass-blue: rgba(39, 169, 225, 0.12);
	--bs-glass-dark: rgba(7, 23, 37, 0.58);
	--bs-glass-border: rgba(255, 255, 255, 0.28);
	--bs-glass-highlight: rgba(255, 255, 255, 0.42);

	/* Border & Shadow — 넓고 부드럽게 */
	--bs-border-light: #D7E5ED;
	--bs-shadow-soft: 0 12px 35px rgba(8, 39, 60, 0.12);
	--bs-shadow-glass: 0 16px 45px rgba(5, 25, 40, 0.22);

	/* 핵심 비주얼 영역 그라데이션 */
	--bs-gradient-hero: linear-gradient(135deg, #071725 0%, #0B2D48 55%, #087F8C 100%);
}

/* ── daisyUI 시맨틱 토큰 매핑 ────────────────────────── */
:root {
	--color-primary: var(--bs-blue-pro);
	--color-primary-content: var(--bs-text-light);
	--color-secondary: var(--bs-blue-water);
	--color-secondary-content: var(--bs-bg-dark);
	--color-accent: var(--bs-orange);
	--color-accent-content: var(--bs-bg-dark);
	--color-neutral: var(--bs-navy-deep);
	--color-neutral-content: var(--bs-text-light);

	--color-base-100: #FFFFFF;
	--color-base-200: var(--bs-bg-ice);
	--color-base-300: var(--bs-bg-bluegray);
	--color-base-content: var(--bs-text-main);

	--color-info: var(--bs-blue-aqua);
	--color-info-content: var(--bs-bg-dark);
	--color-warning: var(--bs-yellow);
	--color-warning-content: var(--bs-bg-dark);

	/* 직선(견고함) + 완만한 곡선(물)의 절충 */
	--radius-box: 1rem;
	--radius-field: 0.5rem;
}

a { text-decoration: none; }

/* =========================================================
   가독성 — 주 타겟은 연령대가 있는 건물주
   글자 크기를 키우는 대신 대비·줄간격·터치 목표로 읽기 편하게 만든다.
   (기본 글자 크기는 브라우저 기본값 16px 유지 — 전체를 키우면 화면이 답답해진다.)
   ========================================================= */

/* 본문 — 옅은 회색 대신 또렷한 서브 텍스트 색(대비 확보) + 넉넉한 줄간격 */
.bs-body-text {
	color: var(--bs-text-sub);
	line-height: 1.8;
}

/* 누르는 요소의 최소 크기 확보 (터치 목표 48px 이상) */
.btn { min-height: 3rem; }

/* 핵심 CTA — 전화 버튼. 여기만은 크게 둔다. */
.btn.bs-cta-tel {
	height: auto;
	min-height: 4rem;
	padding: 0.75rem 1.75rem;
	gap: 0.875rem;
	box-shadow: 0 10px 30px rgba(255, 138, 52, 0.35);
}

/* 앵커(#) 이동 시 sticky 헤더에 가려지지 않도록 + 부드러운 스크롤 */
html { scroll-padding-top: 5rem; scroll-behavior: smooth; }

/* 버튼 입체감(depth) 제거 → 단독 버튼·join 그룹 모두 평면(이음선 없음) */
:root { --depth: 0; }

/* error 색 보정: daisyUI light 기본은 연한 빨강+어두운 글자라 가독성 낮음 → 진한 빨강+흰 글자 */
:root {
	--color-error: oklch(58% .22 25);
	--color-error-content: oklch(100% 0 0);
}

/* success 색 보정: 어두운 초록 배경 + 밝은(흰) 글자 → badge-success/btn-success 등에 일괄 적용 */
:root {
	--color-success: oklch(55% .17 150);       /* 배경: 진한 초록 */
	--color-success-content: oklch(100% 0 0);  /* 글자: 흰색 */
}

/* =========================================================
   페이지 바탕 — 아이스 블루 + 은은한 질감
   글래스 패널은 뒤에 비칠 것이 있어야 살아난다. 배경을 완전히 평평하게 두지 않고
   건축 그리드(직선)와 물빛 번짐(곡선)을 아주 옅게 깔아 깊이를 만든다.
   스크롤해도 배경은 고정(fixed)되어 유리판이 그 위를 지나가는 느낌을 준다.
   ========================================================= */
body {
	background-color: var(--bs-bg-ice);
	background-image:
		/* 물빛 번짐 — 좌상단 워터 블루, 우하단 딥 티일 */
		radial-gradient(ellipse 70rem 45rem at 8% -10%, rgba(39, 169, 225, 0.13), transparent 60%),
		radial-gradient(ellipse 60rem 40rem at 100% 105%, rgba(8, 127, 140, 0.11), transparent 62%),
		/* 건축 그리드 — 콘크리트 위 먹줄처럼 옅게 */
		repeating-linear-gradient(0deg, rgba(18, 59, 93, 0.035) 0 1px, transparent 1px 72px),
		repeating-linear-gradient(90deg, rgba(18, 59, 93, 0.035) 0 1px, transparent 1px 72px),
		/* 바탕 톤 — 위는 맑게, 아래로 갈수록 블루 그레이 */
		linear-gradient(180deg, #FFFFFF 0%, var(--bs-bg-ice) 38%, var(--bs-bg-bluegray) 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/* 카드 그림자는 넓게 퍼지는 부드러운 형태로 통일 */
.card.shadow-sm { box-shadow: var(--bs-shadow-soft); }

/* =========================================================
   글래스모피즘 — 절제 사용
   주요 정보 카드 / 상담 영역 / 핵심 성과 / 서비스 소개 / 버튼에만 적용.
   깊이는 강한 그림자가 아니라 투명도·블러·테두리·명도차로 만든다.
   ========================================================= */

/* 어두운 배경(히어로/CTA) 위 — 투명한 화이트 패널 + 밝은 테두리 */
.bs-glass {
	background: var(--bs-glass-light);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid var(--bs-glass-border);
	box-shadow: var(--bs-shadow-glass);
}

/* 어두운 배경 위 — 더 또렷한 패널(핵심 성과 등) */
.bs-glass-strong {
	background: var(--bs-glass-strong);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid var(--bs-glass-border);
	box-shadow: var(--bs-shadow-glass);
}

/* 밝은 배경 위 — 반투명 화이트 패널 + 블루 그레이 그림자 */
.bs-glass-light {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--bs-border-light);
	box-shadow: var(--bs-shadow-soft);
}

/* 밝은 배경 위 — 물빛 톤 패널(서비스 강조용) */
.bs-glass-blue {
	background: var(--bs-glass-blue);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(39, 169, 225, 0.24);
	box-shadow: var(--bs-shadow-soft);
}

/* 유리 버튼 — 어두운 배경 위 보조 CTA */
.btn.bs-glass-btn {
	background: var(--bs-glass-strong);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--bs-glass-border);
	color: var(--bs-text-light);
	box-shadow: none;
}
.btn.bs-glass-btn:hover {
	background: rgba(255, 255, 255, 0.34);
	border-color: var(--bs-glass-highlight);
}

/* =========================================================
   핵심 비주얼 영역 — 딥 네이비 그라데이션
   ========================================================= */
.bs-hero {
	position: relative;
	overflow: hidden;
	color: var(--bs-text-light);
	/* 그라데이션 위에 건축 그리드를 옅게 겹쳐 콘크리트 표면 같은 질감을 준다 */
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 72px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 72px),
		var(--bs-gradient-hero);
}

/* 히어로 위 은은한 빛 번짐(물/유리 표면 느낌) */
.bs-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 46rem;
	height: 46rem;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(56, 198, 217, 0.22) 0%, transparent 68%);
	pointer-events: none;
}

/* 어두운 영역 안의 보조 텍스트 — 배경과 충분한 대비 유지 */
.bs-on-dark-sub { color: rgba(245, 250, 253, 0.78); }

/* 물의 유연함 — 어두운 영역 하단의 완만한 물결 곡선 */
.bs-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 56px;
	display: block;
	fill: var(--bs-bg-ice);
	pointer-events: none;
}

/* 섹션 제목 아래 짧은 언더라인 */
.bs-title-line::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin: 0.75rem auto 0;
	border-radius: 9999px;
	background: linear-gradient(90deg, var(--bs-blue-water), var(--bs-teal-deep));
}

/* 카드 호버 — 살짝 떠오르는 정도로만 */
.bs-lift { transition: transform .25s ease, box-shadow .25s ease; }
.bs-lift:hover { transform: translateY(-4px); box-shadow: var(--bs-shadow-glass); }

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bs-lift { transition: none; }
	.bs-lift:hover { transform: none; }
}