@charset "utf-8";
/* ============================================================
   site.css — 사이트 공통 퍼블리싱 스타일 (헤더 / 푸터 / 상담 CTA)
   - headHtml.jsp 에서 layout.css 이후, custom.css 이전에 로드
   - 페이지 전용 스타일은 여기에 넣지 말 것 (www/css/{모듈}.css 생성)
   ============================================================ */

/* ---------- Pretendard 웹폰트 (사이트 기본 글꼴) ----------
   2026-10-28 NEXON Lv2 Gothic → Pretendard 로 전체 교체.
   굵기는 사이트에서 쓰는 300~800 만 등록한다(브라우저는 실제로 쓰인 굵기 파일만 받는다) */
@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* ---------- 디자인 토큰 ----------
   브랜드 2색 체계
   - --brand : #229ED4  로고(그리다클린 심볼) 추출색
   - --navy  : #182242  딥 네이비 (다크 배경 / 본문 텍스트 기준색)
   색을 쓰는 곳은 반드시 아래 토큰을 참조할 것 (hex 직접 입력 금지) */
:root{
	--brand:#229ED4;
	--brand-dark:#1B82AF;
	--brand-deep:#166D93;
	--brand-soft:#E9F5FC;
	--navy:#182242;
	--navy-2:#26325C;
	--deep:#182242;
	--ink:#182242;
	--ink-2:#4C5573;
	--muted:#7A8299;
	--line:#E2E7F0;
	--bg:#FFFFFF;
	--bg-alt:#F4F7FB;
	--card:#FFFFFF;
	--shadow:0 8px 30px rgba(24,34,66,.10);
	--radius:18px;
	--header-h:74px;
	--font:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
	/* 예전에 푸터·후기 제목·FAQ 만 Pretendard 로 따로 지정하던 토큰 — 지금은 기본 글꼴과 같다 */
	--font-pre:var(--font);

	/* ---------- 타이포그래피 토큰 (디자인 확정 스펙) ----------
	   요소        | 크기      | 굵기 | 행간      | 자간
	   히어로 H1   | 52~60px   | 700  | 1.12~1.18 | -0.03em
	   섹션 H2     | 38~44px   | 700  | 1.18~1.25 | -0.025em
	   카드 제목   | 22~25px   | 600  | 1.3~1.4   | -0.015em
	   본문        | 16px      | 400  | 1.65~1.75 | -0.005em
	   메뉴        | 16px      | 600  | 1.2       | -0.015em
	   버튼        | 16px      | 600  | 1         | -0.01em
	   주요 수치   | 56~64px   | 700  | 1         | -0.035em

	   ★ 같은 등급은 반드시 같은 값을 쓴다. 값이 필요한 곳에서 숫자를 직접 적지 말고
	     아래 변수만 참조할 것 — 한 곳을 고치면 사이트 전체가 함께 바뀐다.
	   ★ 범위(A~B)는 clamp 하한/상한이 곧 그 범위다. 중간값(vw)만 화면폭에 따라 움직인다.
	   ★ 본문·메뉴·버튼은 화면폭에 따라 흔들리지 않는 고정값이다.
	     PC 16px / 모바일(640px 이하) 14px — 아래 미디어쿼리에서 한 번에 바뀐다.
	   ---------------------------------------------------------- */
	--fs-h1:clamp(52px,3.9vw,60px);		--fw-h1:700;	--lh-h1:1.15;	--ls-h1:-.035em;
	--fs-h2:clamp(38px,2.8vw,44px);		--fw-h2:700;	--lh-h2:1.2;	--ls-h2:-.03em;
	--fs-card:clamp(22px,1.55vw,25px);	--fw-card:600;	--lh-card:1.35;	--ls-card:-.02em;
	--fs-body:16px;						--fw-body:400;	--lh-body:1.7;	--ls-body:-.03em;
	--fs-menu:16px;						--fw-menu:600;	--lh-menu:1.2;	--ls-menu:-.02em;
	--fs-btn:16px;						--fw-btn:600;	--lh-btn:1;		--ls-btn:-.02em;
	--fs-num:clamp(56px,4.2vw,64px);	--fw-num:700;	--lh-num:1;		--ls-num:-.035em;
	/* 표에 없는 보조 텍스트(작성자·날짜·+N·카피라이트 등) 전용 — 본문보다 한 단계 작게 */
	--fs-meta:13px;						--fw-meta:500;	--lh-meta:1.6;	--ls-meta:-.02em;

	/* 게시판·일정 등 프로그램 영역 메인컬러(board.css 가 참조).
	   관리자 > 환경설정 > 사이트설정 의 IDENTITY_COLOR 가 설정돼 있으면 그 값이 우선한다. */
	--color-primary01:#229ED4;
}

/* 반응형 축소도 토큰 한 곳에서 처리한다 — 개별 선택자에서 font-size 를 다시 쓰지 말 것 */
@media (max-width:1080px){
	:root{
		--fs-h1:clamp(32px,4.6vw,48px);
		--fs-h2:clamp(30px,3.4vw,38px);
		--fs-num:clamp(44px,4.6vw,56px);
	}
}
@media (max-width:640px){
	:root{
		--fs-h1:clamp(24px,7.4vw,32px);
		--fs-h2:clamp(24px,5.6vw,30px);
		--fs-card:clamp(19px,4.6vw,22px);
		/* 수치 3개를 모바일에서도 가로로 나란히 두므로, 한 칸(화면의 1/3)에
		   "29,894+" 가 한 줄로 들어가는 크기까지 낮춘다 */
		--fs-num:clamp(20px,6.2vw,30px);
		/* 모바일에서는 16px 등급을 한 단계 낮춘다 (본문·메뉴·버튼 모두) */
		--fs-body:14px;
		--fs-menu:14px;
		--fs-btn:14px;
		--fs-meta:12px;		/* 본문이 내려간 만큼 보조 텍스트도 함께 */
	}
}

/* ---------- 퍼블리싱 영역 공통 보정 ---------- */
html{scroll-behavior:smooth;}
body{
	font-family:var(--font);
	color:var(--ink);
	background:var(--bg);
	-webkit-font-smoothing:antialiased;
	letter-spacing:-.03em;
	word-break:keep-all;
	overflow-wrap:break-word;
}
b,strong{font-weight:700;}
/* 버튼은 브라우저 기본값이 시스템 글꼴이라 상속을 명시한다 (input·select·textarea 는 basic.css 가 처리).
   게시판 영역(.programCon)은 board.css 가 Nanum Gothic 으로 못 박아 두어 기본 글꼴로 되돌린다
   (site.css 가 board.css 보다 뒤에 로드되므로 같은 특이성으로 이긴다) */
button{font-family:inherit;}
.programCon{font-family:var(--font);}
/* 개인정보처리방침 본문(관리자 에디터 입력)에 붙여넣기로 딸려 온 인라인 font-family:나눔고딕 무력화.
   방침 페이지(.stipulation_content)와 접수·견적 폼의 동의 상자(.login_etc_box01 .txt_box)에 출력된다 */
.stipulation_content,
.stipulation_content *,
.login_etc_box01 .txt_box,
.login_etc_box01 .txt_box *{font-family:var(--font) !important;}
p,h1,h2,h3,h4,h5,h6,.sec-title,.sec-desc,.eyebrow,a,span,label,button,dt,dd,li{
	word-break:keep-all;
	overflow-wrap:break-word;
}
.sec-title,.sec-desc,.hero-h1,.hero-desc{
	text-wrap:balance;
}
.site-header *,.site-header *::before,.site-header *::after,
.site-footer *,.site-footer *::before,.site-footer *::after,
.mnav *,.float-cta *,.fixcta *{box-sizing:border-box;}

.wrap{width:100%; max-width:1680px; margin:0 auto; padding:0 28px; box-sizing:border-box;}

@media (prefers-reduced-motion:reduce){
	.site-header *,.site-footer *,.mnav *,.float-cta *,.fixcta *{
		animation:none !important; transition:none !important;
	}
	html{scroll-behavior:auto;}
}

/* ---------- 이미지 placeholder (원격 이미지 차단 시 대비) ---------- */
.ph{position:relative; background:linear-gradient(135deg,#D8EAF5 0%,#EDF6FB 55%,#DEEDF6 100%); overflow:hidden;}
.ph::after{
	content:attr(data-label); position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	text-align:center; padding:12px; color:var(--muted);
	font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta);
}
.ph img,.ph video{position:relative; width:100%; height:100%; object-fit:cover; z-index:1; display:block;}

/* ---------- 헤더 ---------- */
/* layout.css 의 `#header{display:none}` (개발용 navbar 사용) 를 되돌린다 */
#header.site-header{
	display:block; position:fixed; top:0; left:0; right:0;
	height:var(--header-h); z-index:100; background:#fff;
}
body{padding-top:var(--header-h);}
/* 좌: 로고 / 가운데: GNB / 우: 모바일 버거 — 양 끝 열을 같은 1fr 로 두어 GNB 가 화면 정중앙에 온다 */
.site-header .head-in{
	height:100%; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
	align-items:center; gap:24px;
}
/* 로고 (/img/logo4.png — 893x233 가로형. 세로형(logo1.webp 400x372) 기준 높이를 그대로 쓰면
   가로가 240px 넘게 벌어져 GNB 를 밀어내므로, 가로형에 맞춰 높이를 낮춘다) */
.site-header .logo,.site-footer .logo{display:block; line-height:0; flex:0 0 auto;}
.site-header .logo img{height:48px; width:auto;}
.site-footer .logo img{height:46px; width:auto;}
@media (max-width:760px){
	.site-header .logo img{height:40px;}
	.site-footer .logo img{height:40px;}
}
.site-header .gnb{display:flex; align-items:center; justify-content:center; gap:clamp(4px,1.4vw,24px); grid-column:2;}
/* 메뉴 : 16px / 600 / 1.2 / -0.015em */
.site-header .gnb a{
	position:relative; padding:9px 6px; border-radius:10px;
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
	color:var(--ink); transition:color .15s; white-space:nowrap;
}
.site-header .gnb a:hover{color:var(--brand);}
.site-header .gnb a.new::after{
	content:""; position:absolute; top:5px; right:6px;
	width:6px; height:6px; border-radius:50%; background:#F5344B;
}
.site-header .burger{
	display:none; width:42px; height:42px; border-radius:10px;
	align-items:center; justify-content:center;
	grid-column:3; justify-self:end;
	border:0; background:none; cursor:pointer;
}
.site-header .burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative;}
.site-header .burger span::before,.site-header .burger span::after{
	content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
}
.site-header .burger span::before{top:-6px;}
.site-header .burger span::after{top:6px;}

/* 모바일 내비 */
.mnav{
	display:none; position:fixed; top:var(--header-h); left:0; right:0;
	background:#fff; border-bottom:1px solid var(--line);
	padding:10px 20px 18px; z-index:99; box-shadow:var(--shadow);
}
.mnav.open{display:block;}
/* 모바일 내비도 같은 메뉴 스펙 */
.mnav a{
	display:block; padding:13px 4px; border-bottom:1px solid var(--line); color:var(--ink);
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
}
.mnav a:last-child{border-bottom:0;}

@media (max-width:1080px){
	.site-header .gnb{display:none;}
	.site-header .burger{display:flex;}
}

/* ---------- 서브(프로그램) 페이지 본문 컨테이너 ----------
   기존에는 devMenu.jsp 의 인라인 스타일이 #wrap 여백을 잡아 주었으나,
   퍼블리싱 시작으로 devMenu 를 비활성화하여 그 여백을 여기서 대체한다. */
#wrap{max-width:1400px; margin:0 auto; padding:40px 20px 80px; box-sizing:border-box;}
@media (max-width:760px){
	#wrap{padding:24px 16px 60px;}
}

/* ---------- 푸터 ---------- */
/* 좌: 회사 정보(회사명 + 정보 줄) / 우: 원형 SNS 아이콘, 아래에 구분선 + 카피라이트 */
.site-footer{display:block; background:#fff; border-top:1px solid var(--line); padding:52px 0 28px; margin-top:0;}
/* 푸터만 Pretendard — 레거시 CSS 가 a·span 등에 글꼴을 직접 거는 경우가 있어 자식까지 지정 */
.site-footer,
.site-footer *{font-family:var(--font-pre);}
/* 1행: 로고 / 2행: 회사 정보 · 고객센터(같은 행이라 열이 맞는다) / 우측: SNS
   grid 로 두어 로고 높이가 바뀌어도 정보와 고객센터의 시작 줄이 어긋나지 않는다 */
.site-footer .foot-top{
	display:grid; grid-template-columns:auto auto 1fr; align-items:start;
	column-gap:clamp(24px,3.4vw,60px); row-gap:18px;
}
.site-footer .foot-top .logo{grid-column:1; grid-row:1;}
.site-footer .foot-info{grid-column:1; grid-row:2;}
.site-footer .foot-cs{grid-column:2; grid-row:2;}
.site-footer .sns{grid-column:3; grid-row:1 / span 2; justify-self:end; align-self:start;}
/* 정보 줄 : 항목 사이를 세로 구분선으로 잇는다 */
/* 본문 : 16px / 400 / 1.7 / -0.005em */
.site-footer .fline{
	margin:0 0 7px; color:var(--ink-2);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
.site-footer .fline span{display:inline-block;}
.site-footer .fline b{font-weight:600; color:var(--ink); margin-right:9px;}
.site-footer .fline span + span::before{content:"|"; margin:0 9px; color:var(--line);}
.site-footer .sns{display:flex; align-items:center; gap:12px;}
.site-footer .sns a{
	width:clamp(38px,3.4vw,48px); height:clamp(38px,3.4vw,48px); border-radius:50%;
	background:#EDEFF3; border:0; display:grid; place-items:center;
	font-size:16px; font-weight:700; color:#98A1B0; transition:background .15s,color .15s;
}
.site-footer .sns a:hover{background:var(--brand-soft); color:var(--brand);}
/* 카피라이트는 가운데, 개인정보처리방침은 오른쪽 끝 */
.site-footer .foot-bot{
	position:relative; margin-top:30px; padding-top:20px; border-top:1px solid var(--line);
	display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
	color:var(--muted);
	font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta);
}
.site-footer .foot-bot .policy{position:absolute; right:0; font-weight:600; color:var(--ink-2);}
.site-footer .foot-bot a:hover{color:var(--brand);}
@media (max-width:760px){
	.site-footer{padding:34px 0 26px;}
	/* 모바일에서는 한 열로 세로 스택 */
	.site-footer .foot-top{grid-template-columns:1fr; row-gap:26px;}
	.site-footer .foot-top .logo,
	.site-footer .foot-info,
	.site-footer .foot-cs,
	.site-footer .sns{grid-column:1; grid-row:auto; justify-self:start;}
	/* 정보 항목이 한 줄씩 쌓이므로 항목·줄 사이를 조금 띄워 읽기 편하게 */
	.site-footer .fline{margin-bottom:10px;}
	.site-footer .fline:last-child{margin-bottom:0;}
	.site-footer .fline span{display:block;}
	.site-footer .fline span + span{margin-top:6px;}
	.site-footer .fline span + span::before{display:none;}
	.site-footer .foot-bot{flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:14px; margin-top:34px;}
	.site-footer .foot-bot .policy{position:static;}
}

/* ---------- 우측 하단 플로팅 상담 버튼 ----------
   글자가 아니라 아이콘(원형 심볼)이라 타이포 표의 "버튼" 대상이 아니다 — 크기는 아이콘 기준 */
.float-cta{position:fixed; right:22px; bottom:26px; z-index:120; display:flex; flex-direction:column; gap:12px;}
.float-cta a{
	width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
	box-shadow:0 6px 22px rgba(24,34,66,.22); transition:transform .15s, box-shadow .15s;
}
.float-cta a:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(24,34,66,.28);}
.float-cta .tel{background:#fff; color:var(--brand); border:1px solid rgba(24,34,66,.08);}
.float-cta .tel svg{width:27px; height:27px;}
.float-cta .kko{background:#FAE100; color:#3C1E1E;}
.float-cta .kko svg{width:29px; height:29px;}
/* 무료 견적 — 전화·카톡보다 눈에 띄도록 브랜드색 바탕에 아이콘 + 짧은 글자 */
.float-cta .est{
	align-content:center; gap:2px; background:var(--brand); color:#fff; text-decoration:none;
	font-size:11px; font-weight:700; line-height:1; letter-spacing:-.03em;
}
.float-cta .est:hover{background:var(--brand-deep);}
.float-cta .est svg{width:22px; height:22px;}

/* ---------- 모바일 하단 고정 바 ---------- */
.fixcta{display:none;}
@media (max-width:760px){
	body{padding-bottom:70px;}
	.float-cta{display:none;}
	.fixcta{
		position:fixed; left:0; right:0; bottom:0; z-index:120; background:#fff;
		border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(24,34,66,.10);
		display:flex; align-items:center; gap:10px; padding:11px 16px;
	}
	.fixcta .in{width:100%; display:flex; align-items:center; gap:10px;}
	.fixcta .mini{
		flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
		width:64px; height:48px; border-radius:12px; border:1px solid var(--line);
		font-size:11px; font-weight:600; color:var(--ink-2); text-decoration:none;
	}
	.fixcta .mini .dot{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#fff;}
	.fixcta .mini.tel .dot{background:var(--brand);}
	.fixcta .mini.kko .dot{background:#FAE100; color:#3C1E1E;}
	/* 버튼 : 16px / 600 / 1 / -0.01em */
	.fixcta .est{
		flex:1; height:48px; border-radius:12px; background:var(--brand); color:#fff;
		font-size:var(--fs-btn); font-weight:var(--fw-btn); line-height:var(--lh-btn); letter-spacing:var(--ls-btn);
		display:grid; place-items:center; text-decoration:none;
	}
}