/* ===== Design tokens ===== */
:root{
	--bg:#F8FBFF;
	--bg-sub:#E1E9F2;
	--accent1:#00AEEF;
	--accent2:#A5D8FF;
	--text:#2C3E50;
	--radius:12px;
	--gap-section:48px;
	--pad-x:24px;
	--header-h:64px;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Pretendard',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
h1,h2,h3,h4,p{margin:0}

/* ===== Typography ===== */
h1{font-size:29px;font-weight:700;line-height:1.35}
h2{font-size:22px;font-weight:700;line-height:1.4}
h3{font-size:18px;font-weight:700;line-height:1.4}
h4{font-size:16px;font-weight:600;line-height:1.4}
p{font-size:16px;line-height:1.6}
.eyebrow{font-size:14px;font-weight:600;color:var(--accent1);margin-bottom:8px}
.subtitle{font-weight:400;color:var(--text);opacity:.8;margin-top:8px}

@media(min-width:768px){
	h1{font-size:44px}
	h2{font-size:32px}
	h3{font-size:22px}
}

/* ===== Layout ===== */
.section-inner{max-width:1120px;margin:0 auto;padding:0 var(--pad-x)}
section{padding:var(--gap-section) 0}
.icon-24{width:24px;height:24px}
.nav-icon{width:20px;height:20px;fill:currentColor;margin-right:6px;vertical-align:-4px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;font-weight:600;font-size:16px;white-space:nowrap}
.btn-primary{background:var(--accent1);color:#fff}
.btn-secondary{background:#fff;color:var(--accent1);border:1px solid var(--accent1)}
.cta-group{display:flex;flex-wrap:wrap;gap:12px}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(248,251,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bg-sub)}
.header-inner{max-width:1120px;margin:0 auto;padding:0 var(--pad-x);height:var(--header-h);display:flex;align-items:center;justify-content:space-between}
.logo-lockup{display:flex;align-items:center;gap:8px}
.logo-mark{width:32px;height:32px}
.logo-text{font-weight:700;font-size:17px;color:var(--text)}
.pc-nav ul{display:flex;gap:32px;margin-right:32px}
.pc-nav a{font-weight:600}
.header-cta{margin-left:auto}
.pc-nav{margin-left:auto}

.hamburger-btn{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.hamburger-btn span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s}
.mobile-nav{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#fff;border-top:1px solid var(--bg-sub)}
.mobile-nav.open{max-height:320px}
.mobile-nav ul{padding:8px var(--pad-x)}
.mobile-nav li a{display:flex;align-items:center;min-height:44px;font-weight:600}

/* ===== Hero ===== */
.hero{position:relative;padding:0;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-inner{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 var(--pad-x);width:100%}
.hero h1{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.hero .subtitle{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45);font-size:18px;max-width:520px;margin-top:16px}
.hero .cta-group{margin-top:28px}

/* 모바일: 영상은 원본 가로 비율 그대로, H1 영역은 영상 아래로 */
@media(max-width:767px){
	.hero{display:block;min-height:auto}
	.hero-media{position:static;width:100%;height:auto;object-fit:initial}
	.hero-inner{padding:32px var(--pad-x)}
	.hero h1{color:var(--text);text-shadow:none}
	.hero .subtitle{color:var(--text);text-shadow:none}
}

/* ===== Cards common ===== */
.card-grid{display:grid;gap:20px;margin-top:32px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px rgba(44,62,80,.06)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card-body{padding:20px}
.card-body h3{margin-bottom:8px}
.card-body p{font-size:15px;opacity:.85}

/* 서비스 카드: 클릭 가능 + 호버 확대 + 링크 인디케이터 */
.service-card{display:block;transition:transform .25s ease,box-shadow .25s ease}
.service-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(44,62,80,.12)}
.service-card:hover .card-media img{transform:scale(1.06)}
.link-indicator{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:var(--accent1);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.link-indicator svg{width:16px;height:16px;fill:none;color:#fff}

@media(min-width:640px){.services .card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.services .card-grid{grid-template-columns:repeat(3,1fr)}}

/* 시공사례 카드: 클릭 불가 */
.case-card .card-media img{transition:none}
@media(min-width:640px){.cases .card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.cases .card-grid{grid-template-columns:repeat(3,1fr)}}

/* ===== Pain points / About strengths: 모바일 스와이프 슬라이더 ===== */
.swipe-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-top:32px;padding-bottom:4px;scrollbar-width:none}
.swipe-slider::-webkit-scrollbar{display:none}
.swipe-slider .card{flex:0 0 100%;scroll-snap-align:start}
.dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.dots span{width:8px;height:8px;border-radius:50%;background:var(--bg-sub)}
.dots span.active{background:var(--accent1)}

.pain-card,.strength-card{padding:24px;display:flex;flex-direction:column;gap:12px}
.pain-card .icon-24,.strength-card .icon-24{width:40px;height:40px;color:var(--accent1)}

@media(min-width:768px){
	.swipe-slider{display:grid;overflow:visible;grid-template-columns:repeat(2,1fr)}
	.about .swipe-slider{grid-template-columns:repeat(3,1fr)}
	.dots{display:none}
}

/* ===== FAQ (native details/summary accordion) ===== */
.faq-list{margin-top:32px;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border-radius:var(--radius);padding:4px 20px;box-shadow:0 2px 10px rgba(44,62,80,.05)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:56px;font-weight:600;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:20px;height:20px;flex-shrink:0;transition:transform .25s ease}
.faq-item[open] summary svg{transform:rotate(45deg)}
.faq-item p{padding:0 0 18px;opacity:.85}

/* ===== 상담 CTA / 외부링크 / 푸터 ===== */
.consult-cta{background:var(--bg-sub);text-align:center}
.consult-cta-inner .cta-group{justify-content:center;margin-top:20px}

.external-links{display:flex;justify-content:center;align-items:center;gap:14px;padding:24px var(--pad-x);font-size:14px;opacity:.75}
.external-links .sep{opacity:.5}

.site-footer{background:#fff;border-top:1px solid var(--bg-sub)}
.footer-inner{max-width:1120px;margin:0 auto;padding:32px var(--pad-x);display:flex;flex-direction:column;gap:20px}
.footer-company{font-weight:700;margin-bottom:6px}
.footer-info p{font-size:14px;opacity:.75}
.footer-nav ul{display:flex;gap:24px}
.footer-nav a{display:flex;align-items:center;font-size:14px;font-weight:600}

@media(min-width:768px){
	.footer-inner{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ===== Scroll fade-in ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in-view{opacity:1;transform:none}

/* ===== 사이트맵 페이지 ===== */
.sitemap-list{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.sitemap-list a{display:block;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--bg-sub);font-weight:600}

/* ===== 페이지 상세 콘텐츠 공통(서비스/시공사례) ===== */
.detail-body{margin-top:32px;display:flex;flex-direction:column;gap:var(--gap-section)}
.detail-photo{width:100%;max-width:480px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.detail-photo-wide{max-width:100%;aspect-ratio:4/3}
.info-card-grid{display:grid;gap:16px;margin-top:16px}
@media(min-width:640px){.info-card-grid{grid-template-columns:repeat(2,1fr)}}
.info-card{background:#fff;border-radius:var(--radius);padding:20px;display:flex;gap:16px;box-shadow:0 2px 10px rgba(44,62,80,.05)}
.info-card .icon-24{width:28px;height:28px;color:var(--accent1);flex-shrink:0}
.step-list{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.step-item{display:flex;gap:16px;align-items:flex-start}
.step-num{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--accent2);color:var(--text);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}