/* ===== 기본 설정 ===== */
:root{
  --primary:#1d4ed8;
  --primary-dark:#1e3a8a;
  --accent:#0ea5a4;
  --ink:#111827;
  --ink-soft:#4b5563;
  --line:#e5e7eb;
  --bg-soft:#f7f8fb;
  --card-bg:#ffffff;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(17,24,39,.06);
  --shadow-md:0 10px 30px rgba(17,24,39,.08);
  --max-w:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius-md)}
a{color:inherit;text-decoration:none}
ul,ol{padding-left:1.25em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 20px}

/* ===== 헤더(GNB) ===== */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  width:100%;padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:var(--ink)}
.brand__mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  position:relative;flex:0 0 auto;
}
.brand__mark::before{
  content:"";position:absolute;left:11px;top:6px;width:4px;height:22px;background:#fff;border-radius:2px;
}
.brand__mark::after{
  content:"";position:absolute;left:19px;top:6px;width:4px;height:22px;background:#fff;border-radius:2px;opacity:.75;
}
.header-cta{white-space:nowrap}

/* ===== 버튼 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:.98rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--sm{padding:9px 18px;font-size:.9rem}
.btn--lg{padding:16px 34px;font-size:1.05rem}
.btn--outline{background:#fff;color:var(--primary);border:1.5px solid var(--primary)}
.btn--outline:hover{background:var(--bg-soft);transform:translateY(-1px)}
.contact-actions{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 36px}

/* ===== 물결형 섹션 디바이더(구조만 참고: getdesign.md 생태계형 레퍼런스) ===== */
.wave-section{position:relative;padding:56px 0}
.wave-section--soft{background:var(--bg-soft)}
.wave-section--cta{background:var(--primary-dark);color:#fff}
.wave-divider{position:absolute;left:0;width:100%;height:44px;display:block;line-height:0}
.wave-divider--top{top:-43px}
.wave-divider--bottom{bottom:-43px}
.wave-section--cta h2{color:#fff}
.wave-section--cta .related__card-desc{color:#c7d2fe}
.wave-section--cta .cta-block .btn--primary{background:#fff;color:var(--primary-dark)}
.wave-section--cta .cta-block .btn--primary:hover{background:#eef2ff;color:var(--primary-dark)}

/* ===== 큰 숫자 스탯 바 ===== */
.stats-row{
  display:flex;justify-content:center;gap:48px;flex-wrap:wrap;
  margin-top:32px;padding-top:28px;border-top:1px solid var(--line);
}
.stats-row__item{text-align:center}
.stats-row__item b{display:block;font-size:clamp(1.6rem,3.4vw,2.2rem);color:var(--primary);letter-spacing:-.02em}
.stats-row__item span{font-size:.85rem;color:var(--ink-soft)}

/* ===== 본문 공통 ===== */
.page{padding:44px 0 80px}
.breadcrumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:18px;display:flex;gap:8px;align-items:center}
.breadcrumb a:hover{color:var(--primary)}
.page__h1, h1.page__h1{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 18px;letter-spacing:-.01em}
h2{font-size:clamp(1.25rem,2.6vw,1.55rem);margin:48px 0 16px;letter-spacing:-.01em}
h3{font-size:1.08rem;margin:26px 0 10px}
p{margin:0 0 16px;color:var(--ink-soft)}
.lede{
  font-size:1.08rem;color:var(--ink);font-weight:600;
  background:var(--bg-soft);border-left:4px solid var(--primary);
  padding:18px 20px;border-radius:0 var(--radius-md) var(--radius-md) 0;margin-bottom:32px;
}
.content-list li{color:var(--ink-soft);margin-bottom:8px}

/* ===== 인트로 사진 (첫~세번째 단락) ===== */
.intro-visual{display:flex;flex-direction:column;gap:28px;margin:28px 0 40px}
.intro-visual__item{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;
  background:var(--bg-soft);border-radius:var(--radius-lg);padding:16px;
}
.intro-visual__item.is-reverse{grid-template-columns:1fr 1fr}
.intro-visual__item.is-reverse img{order:2}
.intro-visual__item img{width:100%;aspect-ratio:3/4;object-fit:cover;box-shadow:var(--shadow-sm)}
.intro-visual__item figcaption{color:var(--ink-soft);font-size:1rem;padding:0 8px}

.content-figure{margin:24px 0}
.content-figure img{aspect-ratio:3/4;object-fit:cover;max-width:420px;margin:0 auto;box-shadow:var(--shadow-sm)}
.content-figure figcaption{text-align:center;color:var(--ink-soft);font-size:.9rem;margin-top:8px}
.content-figure-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
.content-figure-row img{aspect-ratio:3/4;object-fit:cover}

/* ===== 표 / 절차 ===== */
.cost-table{width:100%;border-collapse:collapse;margin:20px 0 8px;font-size:.96rem;overflow:hidden;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.cost-table th,.cost-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.cost-table th{background:var(--primary);color:#fff;font-weight:700}
.cost-table tbody tr:nth-child(odd){background:var(--bg-soft)}
.step-list{counter-reset:step;list-style:none;padding:0;display:grid;gap:14px;margin:20px 0}
.step-list li{
  position:relative;padding:16px 20px 16px 58px;background:var(--card-bg);
  border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink-soft);
}
.step-list li::before{
  counter-increment:step;content:counter(step);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;
}

/* ===== 시공 사례 갤러리(모자이크 배치) ===== */
.case-gallery__grid{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:140px;gap:14px;margin-top:18px;
}
.case-gallery__grid figure{margin:0;overflow:hidden;border-radius:var(--radius-md)}
.case-gallery__grid img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:var(--radius-md)}
.case-gallery__item--feature{grid-column:span 2;grid-row:span 2}

/* ===== FAQ ===== */
.faq__item{border:1px solid var(--line);border-radius:var(--radius-md);padding:18px 22px;margin-bottom:14px}
.faq__item h3{margin:0 0 8px;color:var(--primary-dark)}
.faq__item p{margin:0;color:var(--ink-soft)}

/* ===== 관련 서비스 / 배너 ===== */
.related{margin-top:56px}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 28px}
.related__card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--card-bg);transition:box-shadow .15s ease, transform .15s ease;
}
.related__card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--primary)}
.related__card img{aspect-ratio:16/10;object-fit:cover;border-radius:0}
.related__card-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  background:#fff;color:var(--primary);font-size:.72rem;font-weight:700;
  padding:5px 12px;border-radius:999px;box-shadow:var(--shadow-sm);
}
.related__card-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px}
.related__card-title{font-weight:700;font-size:1.02rem}
.related__card-desc{font-size:.87rem;color:var(--ink-soft)}
.related__card--home .related__card-body{background:var(--bg-soft)}
.banner-link{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.banner-link img{aspect-ratio:16/6;object-fit:cover;border-radius:0}
.banner-link__text{
  position:absolute;left:24px;bottom:24px;display:inline-flex;align-items:center;
  background:#fff;color:var(--primary-dark);font-size:1rem;font-weight:700;
  padding:12px 26px;border-radius:999px;box-shadow:var(--shadow-md);
}
.cta-block{text-align:center;margin-top:44px}

/* ===== 서비스 카드 그리드(홈) ===== */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 8px}
.service-card{
  background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;transition:box-shadow .15s ease, transform .15s ease;
}
.service-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.service-card img{aspect-ratio:4/3;object-fit:cover;margin-bottom:14px}
.service-card h3{margin:0 0 8px}
.service-card p{margin:0 0 14px;font-size:.92rem}
.service-card__link{font-weight:700;color:var(--primary)}

/* ===== 푸터 ===== */
.site-footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:32px 0 96px;margin-top:40px}
.site-footer__inner{max-width:var(--max-w);margin:0 auto;padding:0 20px;color:var(--ink-soft);font-size:.85rem}
.site-footer__biz{margin:0 0 8px;line-height:1.8}
.site-footer__meta{margin:0;color:#9ca3af}

/* ===== 플로팅 홈 배너 ===== */
.floating-home{
  position:fixed;right:20px;bottom:96px;z-index:50;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;
  font-size:.85rem;font-weight:600;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:6px;
}

/* ===== 모바일 하단 고정 CTA 바 ===== */
.mobile-cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;grid-template-columns:1fr 1fr;
  box-shadow:0 -4px 16px rgba(17,24,39,.12);
}
.mobile-cta-bar__btn{
  padding:16px 0;text-align:center;font-weight:700;font-size:.98rem;color:#fff;
}
.mobile-cta-bar__btn--call{background:var(--primary)}
.mobile-cta-bar__btn--sms{background:var(--accent)}

/* ===== 스크롤 리빌 ===== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal--in{opacity:1;transform:translateY(0)}

/* ===== 반응형 ===== */
@media (max-width:1024px){
  .service-grid,.related__grid{grid-template-columns:repeat(2,1fr)}
  .case-gallery__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .intro-visual__item,.intro-visual__item.is-reverse{grid-template-columns:1fr}
  .intro-visual__item.is-reverse img{order:0}
  .content-figure-row{grid-template-columns:1fr 1fr}
  .case-gallery__grid{grid-template-columns:repeat(2,1fr)}
  .service-grid,.related__grid{grid-template-columns:1fr}
  .site-header__inner{padding:12px 16px}
  .brand__text{font-size:1rem}
  .wrap{padding:0 16px}
  .page{padding:28px 0 64px}
  .wave-section{padding:40px 0}
  .stats-row{gap:24px 32px}
  .mobile-cta-bar{display:grid}
  .floating-home{right:14px;bottom:84px;padding:10px 14px;font-size:.78rem}
  .site-footer{padding-bottom:104px}
}
@media (max-width:420px){
  .content-figure-row{grid-template-columns:1fr}
}