@charset "utf-8";

/* =========================================================
   방수119 테마 디자인 CSS — 방수·누수 공사 의뢰용 (daisyui 테마 기반)
   - 색: 딥 네이비(신뢰) + 워터 블루(물·방수) + 세이프티 오렌지(전화·의뢰 행동 유도)
   - 팔레트는 아래 daisyUI 토큰에만 둔다. 마크업은 시맨틱 클래스(btn-accent, bg-neutral …)만 쓴다.
   - 모바일 우선. 주 고객은 연령대가 있는 건물주 → 글자 대비·줄간격·누르는 크기를 넉넉히.
   ========================================================= */

a { text-decoration: none; }

/* ── 색 (daisyUI 토큰) ───────────────────────────────── */
:root {
	--color-primary: #0E5A8A;            /* 워터 블루(진) — 링크·주요 강조 */
	--color-primary-content: #FFFFFF;
	--color-secondary: #16A6D9;          /* 아쿠아 — 물·방수 포인트 */
	--color-secondary-content: #04202F;
	--color-accent: #EA580C;             /* 세이프티 오렌지 — 전화·견적 의뢰 버튼에만 */
	--color-accent-content: #FFFFFF;
	--color-neutral: #0B2239;            /* 딥 네이비 — 히어로·푸터·띠 */
	--color-neutral-content: #EAF3FA;
	--color-base-100: #FFFFFF;
	--color-base-200: #F3F7FA;
	--color-base-300: #DFE8EF;
	--color-base-content: #14293B;
	--color-info: #16A6D9;
	--color-info-content: #04202F;
	--color-warning: #F5B400;
	--color-warning-content: #2A1E00;
	--radius-box: 1rem;
	--radius-field: .625rem;
	--radius-selector: .5rem;
}

body { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; word-break: keep-all; }

/* 누르는 요소는 48px 이상 */
.btn { min-height: 3rem; }
.btn-sm { min-height: 2.25rem; }

/* 상단 메뉴: 알약 배경 대신 밑줄 */
#site-header .menu-horizontal :where(li > a, li > details > summary) {
	background: transparent; box-shadow: none; border-radius: 0;
	border-bottom: 2px solid transparent; font-weight: 600;
}
#site-header .menu-horizontal :where(li > a, li > details > summary):hover,
#site-header .menu-horizontal :where(li > a.menu-active, li > details > summary.menu-active) {
	background: transparent; box-shadow: none; color: var(--color-base-content);
	border-bottom-color: var(--color-secondary);
}

/* 앵커(#) 이동 시 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);  /* 글자: 흰색 */
}

/* 앱(웹뷰): 상단바·푸터·drawer 없음(head.php·tail.sub.php) → 본문 여백은 앱 여백만큼.
   --app-top/--app-bottom 은 UA 의 여백 칸(서버) 또는 앱이 실행 중에 넣는다. 둘 다 없으면 safe-area + 네이티브 메뉴(56px) (dream 과 같은 기준) */
#site-main.inapp {
	padding-top: calc(1rem + var(--app-top, calc(env(safe-area-inset-top, 24px) + 56px)));
	padding-bottom: calc(1rem + var(--app-bottom, calc(env(safe-area-inset-bottom, 0px) + 56px)));
}

/* ── 메인(랜딩) ───────────────────────────────────────── */
/* 어두운 띠(히어로·보증·마지막 CTA): 네이비 그라데이션 + 옅은 격자(콘크리트 먹줄) */
.bs-dark {
	position: relative; overflow: hidden; color: var(--color-neutral-content);
	background-color: var(--color-neutral);
	background-image:
		radial-gradient(ellipse 60rem 30rem at 100% 0%, rgba(22, 166, 217, .28), transparent 60%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 64px),
		linear-gradient(160deg, #0B2239 0%, #0E3557 60%, #0B4C66 100%);
}
.bs-dark-sub { color: rgba(234, 243, 250, .78); }
/* 어두운 띠 위 반투명 패널 */
.bs-glass {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* 히어로 아래 물결 */
.bs-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 40px; display: block; fill: var(--color-base-200); pointer-events: none; }
@media (min-width: 1024px) { .bs-wave { height: 64px; } }

/* 섹션 제목 위 작은 라벨 */
.bs-eyebrow { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: var(--color-primary); }
.bs-dark .bs-eyebrow { color: var(--color-secondary); }

/* 본문 글 — 또렷한 회청색 + 넉넉한 줄간격 */
.bs-text { color: #4A6072; line-height: 1.75; }

/* 전화 버튼 — 가장 크게 */
.btn.bs-tel { height: auto; min-height: 3.75rem; padding: .625rem 1.5rem; gap: .75rem; box-shadow: 0 10px 28px rgba(234, 88, 12, .32); }

/* 카드 살짝 띄우기 */
.bs-card { background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: var(--radius-box); box-shadow: 0 8px 24px rgba(11, 34, 57, .06); }
.bs-lift { transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .bs-lift:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11, 34, 57, .12); } }

/* 의뢰 절차 번호 */
.bs-step-no { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; font-weight: 800; background: var(--color-primary); color: var(--color-primary-content); flex-shrink: 0; }

/* 보증 인장 */
.bs-seal {
	display: grid; place-content: center; justify-items: center; gap: .25rem; text-align: center;
	width: 11rem; height: 11rem; border-radius: 9999px;
	background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .22);
	box-shadow: inset 0 0 0 8px transparent, inset 0 0 0 9px rgba(22, 166, 217, .45);
}
@media (min-width: 1024px) { .bs-seal { width: 14rem; height: 14rem; } }

/* 모바일 하단 고정 상담 바 — 본문이 가리지 않도록 아래 여백 */
.bs-callbar { padding-bottom: env(safe-area-inset-bottom); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bs-lift { transition: none; }
	.bs-lift:hover { transform: none; }
}