:root{
	--primary:#0066ff;       /* KCM 시그니처 블루 */
	--primary-light:#e0f2fe; /* 부드러운 배경용 블루 */
	--dark-blue:#0f172a;     /* 깊은 네이비 */
	--gray-bg:#f8fafc;       /* 깔끔한 그레이 배경 */
	--text-main:#1e293b;     /* 메인 글자색 */
	--text-muted:#64748b;    /* 부연 설명색 */
	--border:#e2e8f0;
}

*{margin:0; padding:0; box-sizing:border-box; }
html, body{width:100%; overflow-x:hidden; scroll-behavior:smooth; }
body{font-family:'Noto Sans KR', sans-serif; background-color:#fff; color:var(--text-main); line-height:1.6; }
a{text-decoration:none; color:inherit; }

/* [1] 네비게이션 - KCM 로고 결합형 */
nav{
	position:fixed; top:0; width:100%; height:80px;
	display:flex; justify-content:space-between; align-items:center;
	padding:0 8%; background:rgba(255, 255, 255, 0.95);
	backdrop-filter:blur(10px); z-index:1200; border-bottom:1px solid var(--border);
}

.ci-wrapper{display:flex; align-items:center; gap:10px; }
.ci-symbol{
	width:38px; height:38px; background:linear-gradient(135deg, var(--primary), #00d2ff);
	border-radius:6px 14px 6px 14px; display:flex; justify-content:center; align-items:center;
	box-shadow:0 5px 15px rgba(0, 102, 255, 0.3);
}
.ci-symbol::after{content:''; width:14px; height:14px; border:3.5px solid #fff; border-radius:50%; }
.ci-text{font-family:'Montserrat', sans-serif; font-weight:900; font-size:1.6rem; letter-spacing:-0.5px; line-height:1; display:flex; flex-direction:column; color:var(--dark-blue); }
.ci-text span{font-size:0.65rem; font-weight:700; color:var(--primary); letter-spacing:1px; }

.nav-links{display:flex; gap:35px; }
.nav-links a{font-size:1rem; font-weight:700; color:var(--text-main); transition:0.3s; }
.nav-links a:hover{color:var(--primary); }

.menu-btn{display:none; cursor:pointer; z-index:1100; }
.menu-btn div{width:25px; height:2px; background:var(--dark-blue); margin:6px 0; transition:0.4s; }

.mobile-nav{
	position:fixed; top:0; right:-100%; width:100%; height:100vh;
	background:#fff; display:flex; flex-direction:column;
	justify-content:center; align-items:center; gap:30px;
	z-index:1100; transition:0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.mobile-nav.active{right:0; }
.mobile-nav a{font-size:2rem; font-weight:900; font-family:'Noto Sans KR'; }

/* 히어로 섹션 */
.hero{
	height:100vh; min-height:800px; display:flex; align-items:center; padding:0 8%;
	background:linear-gradient(to right, rgba(15, 23, 42, 0.85) 40%, rgba(15, 23, 42, 0.2)),
				url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
	color:#fff; position:relative;
}
.hero-content{max-width:750px; position:relative; z-index:1; }
.hero-badge{display:inline-block; padding:6px 16px; background:rgba(0, 102, 255, 0.15); border:1px solid var(--primary); border-radius:4px; color:#60a5fa; font-weight:700; font-size:0.9rem; margin-bottom:25px; letter-spacing:1px; }
.hero h1{font-size:clamp(2.3rem, 5vw, 4.2rem); font-weight:900; line-height:1.25; margin-bottom:25px; letter-spacing:-2px; }
.hero h1 span{color:#60a5fa; }
.hero p{font-size:1.2rem; color:#cbd5e1; margin-bottom:40px; font-weight:400; word-break:keep-all; }

.hero-cta{display:flex; align-items:center; gap:20px; }
.btn-call{
	background:var(--primary); color:#fff; padding:18px 35px; border-radius:6px;
	font-size:1.2rem; font-weight:800; transition:0.3s;
	box-shadow:0 10px 20px rgba(0, 102, 255, 0.3);
}
.btn-call:hover{background:#0052cc; transform:translateY(-3px); }

/* 공통 섹션 스타일 */
section{padding:140px 8%; width:100%; }
.section-header{text-align:center; margin-bottom:70px; }
.section-header span{color:var(--primary); font-weight:800; font-size:0.9rem; letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:10px; }
.section-header h2{font-size:2.8rem; font-weight:900; color:var(--dark-blue); letter-spacing:-1px; }

/* 회사 소개 (ABOUT) */
.section-about{background:#fff; }
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
.about-text h3{font-size:2.2rem; font-weight:800; color:var(--dark-blue); margin-bottom:25px; line-height:1.4; }
.about-text p{font-size:1.1rem; color:var(--text-muted); margin-bottom:20px; word-break:keep-all; }
.about-highlight{color:var(--primary); font-weight:700; }

.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.stat-card{background:var(--gray-bg); padding:35px 30px; border-radius:8px; border:1px solid var(--border); text-align:center; }
.stat-card i{font-size:2.2rem; color:var(--primary); margin-bottom:15px; }
.stat-card h4{font-size:2.2rem; font-weight:900; color:var(--dark-blue); margin-bottom:5px; }
.stat-card p{font-size:0.95rem; color:var(--text-muted); font-weight:600; }

/* 업무 범위 (SERVICES) */
.section-services{background:var(--gray-bg); }
.service-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px; }
.service-item{background:#fff; padding:50px 40px; border-radius:8px; border:1px solid var(--border); transition:0.3s; }
.service-item:hover{transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,0.05); border-color:var(--primary); }
.service-item i{width:60px; height:60px; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:1.8rem; margin-bottom:25px; }
.service-item h3{font-size:1.4rem; margin-bottom:15px; font-weight:800; color:var(--dark-blue); }
.service-item p{color:var(--text-muted); font-size:1rem; }

/* 메인 화면 시공 사례 그리드 (기본 2개 노출) */
.section-projects{background:#fff; }
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:30px; max-width:1200px; margin:0 auto; }

.gallery-card{
	background:#fff; border-radius:12px; overflow:hidden;
	box-shadow:0 4px 20px rgba(0,0,0,0.05); border:1px solid var(--border);
	cursor:pointer; transition:0.3s;
}
.gallery-card:hover{transform:translateY(-8px); box-shadow:0 12px 30px rgba(0, 102, 255, 0.1); }

.card-img-wrap{width:100%; height:240px; overflow:hidden; position:relative; }
.card-img-wrap img{width:100%; height:100%; object-fit:cover; transition:0.5s; }
.gallery-card:hover .card-img-wrap img{transform:scale(1.05); }

.card-img-wrap::after{
	content:'\f00e'; font-family:'Font Awesome 6 Free'; font-weight:900;
	position:absolute; top:0; left:0; width:100%; height:100%;
	background:rgba(15, 23, 42, 0.4); color:#fff; display:flex; align-items:center; justify-content:center;
	font-size:1.8rem; opacity:0; transition:0.3s;
}
.gallery-card:hover .card-img-wrap::after{opacity:1; }

.card-body{padding:25px; text-align:left; }
.card-tag{display:inline-block; padding:4px 10px; background:#e0f2fe; color:var(--primary); font-weight:700; font-size:0.8rem; border-radius:4px; margin-bottom:12px; }
.card-body h3{font-size:1.25rem; font-weight:800; color:var(--dark-blue); line-height:1.4; }

/* [6] 견적 문의 (INQUIRY) */
.section-inquiry{background:var(--dark-blue); color:#fff; }
.inquiry-box{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1.5fr; gap:60px; }
.inquiry-info h2{font-size:2.8rem; font-weight:900; margin-bottom:20px; line-height:1.3; }
.inquiry-info p{color:#94a3b8; font-size:1.1rem; margin-bottom:40px; }
.inquiry-phone{font-size:2rem; font-weight:900; color:#60a5fa; display:block; margin-top:20px; }

.inquiry-form{background:rgba(255, 255, 255, 0.03); padding:50px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); }
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
input, textarea{width:100%; padding:18px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:6px; color:#fff; font-size:1rem; font-family:inherit; transition:0.3s; }
input:focus, textarea:focus{outline:none; border-color:var(--primary); background:rgba(255,255,255,0.08); }
input::placeholder, textarea::placeholder{color:#64748b; }
.btn-submit{width:100%; padding:20px; background:var(--primary); color:#fff; font-weight:800; font-size:1.1rem; border:none; border-radius:6px; cursor:pointer; transition:0.3s; margin-top:10px; }
.btn-submit:hover{background:#0052cc; }


/* ─── 시공사례 전체센터 모달 창 CSS ─── */
.center-modal-overlay{position:fixed; top:0; left:0; width:100%; height:100%;background:#f8fafc; z-index:2000; overflow-y:auto;opacity:0; pointer-events:none; transition:opacity 0.3s ease;}
.center-modal-overlay.active{opacity:1; pointer-events:auto; }

.center-top-header{background:#fff; border-bottom:1px solid var(--border); padding:15px 8%; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10; }
.center-top-header .logo{font-size:1.3rem; font-weight:900; color:var(--dark-blue); }
.center-top-header .close-center-btn{background:none; border:none; color:var(--text-main); font-size:1rem; font-weight:700; cursor:pointer; font-family:inherit; }

.center-title-area{text-align:center; padding:50px 20px 20px; }
.center-title-area h1{font-size:2.2rem; font-weight:900; color:var(--dark-blue); margin-bottom:10px; letter-spacing:-1px; }

.center-search-container{max-width:800px; margin:0 auto 50px; padding:0 20px; }
.filter-tags{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:10px;max-width:900px;margin:0 auto 30px;padding:0 10px;}

.tag-btn{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;padding:8px 20px; background:#fff; border:1px solid var(--border); border-radius:20px; font-weight:700; font-size:0.9rem; cursor:pointer; color:#64748b; transition:0.2s; }
.tag-btn.active, .tag-btn:hover{background:var(--primary); color:#fff; border-color:var(--primary); }

.search-box-wrap{display:flex; gap:10px; background:#fff; padding:6px; border-radius:30px; border:1px solid var(--border); box-shadow:0 4px 15px rgba(0,0,0,0.04); }
.search-box-wrap input{flex:1; border:none; outline:none; padding:10px 20px; font-size:1rem; border-radius:30px; color:#333;}
.search-submit-btn{background:var(--dark-blue); color:#fff; border:none; padding:0 25px; border-radius:25px; font-weight:700; cursor:pointer; transition:0.2s; }
.search-submit-btn:hover{background:var(--primary); }

.center-projects-wrapper{max-width:1200px; margin:0 auto; padding:0 4%; }
.center-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.center-grid .card-img-wrap{height:180px; }
.center-grid .card-body h3{font-size:1.05rem; }

#modalDesc {
    white-space: pre-wrap;
}
/* ─── 시공 이미지 슬라이더 팝업 창 CSS ─── */
.modal-overlay{
	position:fixed; top:0; left:0; width:100%; height:100%;
	background:rgba(15, 23, 42, 0.7); backdrop-filter:blur(5px);
	display:flex; justify-content:center; align-items:center;
	z-index:2500; opacity:0; pointer-events:none; transition:opacity 0.3s ease;
}
.modal-overlay.active{opacity:1; pointer-events:auto; }

.modal-content{
	background:#fff; width:90%; max-width:650px; border-radius:16px;
	overflow:hidden; box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);
	transform:translateY(30px); transition:transform 0.3s ease; position:relative;
}
.modal-overlay.active .modal-content{transform:translateY(0); }
.modal-close-btn{
	position:absolute; top:15px; right:15px;
	width:35px; height:35px; background:rgba(0,0,0,0.6); color:#fff;
	border:none; border-radius:50%; font-size:1rem; cursor:pointer;
	display:flex; align-items:center; justify-content:center; z-index:100;
}

.slider-container{width:100%; height:380px; position:relative; overflow:hidden; background:#000; }
.slider-track{display:flex; width:100%; height:100%; transition:transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.slider-track img{width:100%; max-width:100%; height:100%; object-fit:cover; flex-shrink:0; }

.slider-btn{position:absolute; top:50%; transform:translateY(-50%);width:40px; height:40px; background:rgba(255, 255, 255, 0.2);backdrop-filter:blur(5px); border:none; border-radius:50%;color:#fff; font-size:1rem; cursor:pointer; transition:0.3s; z-index:10;}
.slider-btn:hover{background:var(--primary); }
.slider-btn.prev{left:10px; }
.slider-btn.next{right:10px; }

.slider-dots{position:absolute; bottom:15px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.dot{width:8px; height:8px; background:rgba(255,255,255,0.4); border-radius:50%; transition:0.3s; cursor:pointer; }
.dot.active{background:#fff; width:20px; border-radius:4px; }

.modal-body{padding:30px; text-align:left; }
.modal-tag{display:inline-block; padding:4px 10px; background:#e0f2fe; color:var(--primary); font-weight:700; font-size:0.85rem; border-radius:4px; margin-bottom:15px; }
.modal-body h3{font-size:1.5rem; font-weight:900; color:var(--dark-blue); margin-bottom:20px; }

.info-spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;padding:15px 20px; background:#f8fafc; border-radius:8px; margin-bottom:20px;border:1px solid var(--border); font-size:0.9rem;}
.spec-item{display:flex; align-items:center; gap:8px; }
.spec-item strong{color:var(--dark-blue); }
.spec-item span{color:var(--text-muted); margin-left:2px; }
.modal-desc{font-size:1rem; color:#475569; line-height:1.6; word-break:keep-all; }
.more-btn-wrap{text-align:center; margin-top:50px; }
.more-btn-wrap button{padding:12px 35px; background:#fff; color:#0066ff; border:2px solid #0066ff; border-radius:30px; font-weight:700; cursor:pointer; transition:0.3s; }

.primary{color:var(--primary)}

/* 페이징 네비게이션 */
.pagination-wrap{display:flex; justify-content:center; align-items:center; gap:4px; margin-top:25px; }
.page-btn{min-width:36px; height:36px; padding:0 6px; background:#fff; border:1px solid var(--border); border-radius:6px; font-weight:700; color:#64748b; display:flex; align-items:center; justify-content:center; font-size:0.9rem; }
.page-btn:hover{border-color:var(--primary); color:var(--primary); }
.page-btn.active{background:var(--primary); color:#fff; border-color:var(--primary); }
.page-btn:disabled{background:#f1f5f9; color:#cbd5e1; border-color:#e2e8f0; cursor:not-allowed; pointer-events:none;}

.mobile-data-list{display:none; }
.btn{padding:8px 14px; font-weight:700; font-size:0.85rem; border-radius:6px; border:none; cursor:pointer; align-items:center; gap:4px; white-space:nowrap; }
.btn-primary{background:var(--primary); color:#fff; }
.btn-danger{background:var(--danger); color:#fff; }
.btn-success{background:var(--success); color:#fff; }
.btn-secondary{background:#64748b; color:#fff; }


/* 반응형 브레이크포인트 */
@media (max-width:1024px){
	.center-grid{grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:992px){
	nav{padding:0 5%; }
	.nav-links{display:none; }
	.menu-btn{display:block; }
	.hero{padding:0 5%; text-align:center; justify-content:center; }
	.hero-cta{justify-content:center; }
	section{padding:90px 5%; }
	.about-grid{grid-template-columns:1fr; gap:40px; }
	.inquiry-box{grid-template-columns:1fr; gap:40px; }
	.inquiry-form{padding:30px 20px; }
	.form-row{grid-template-columns:1fr; }
}

@media (max-width:768px){
	.center-grid{grid-template-columns:1fr; gap:16px; }
	.search-box-wrap{border-radius:12px; flex-direction:column; padding:10px; background:none; border:none; box-shadow:none; }
	.search-box-wrap input{background:#fff; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; padding:12px; }
	.search-submit-btn{padding:12px; border-radius:8px; }
	.slider-container{height:250px; }
	.modal-content{width:95%; }
	.modal-body{padding:20px 15px; }
	.info-spec-grid{grid-template-columns:1fr; gap:10px; padding:12px 15px; }
	.modal-close-btn{top:10px; right:10px; width:32px; height:32px; font-size:0.9rem; }
}