/*
 * 구조/디자인 다양화 기록
 * Hero=hero-split / 배치패턴=1(Hero→포트폴리오+배너→서비스+갤러리)
 * 그리드=grid-3 / 레이블=label-badge / 버튼=btn-underline
 * 팔레트=아이보리 + 딥 세이지그린 + 머스트 골드 (다크 컬러 미사용, 절제된 고급 톤)
 */

:root{
  --primary: #4F7A63;       /* 딥 세이지그린 - CTA 전용 */
  --primary-dark: #3F6B54;
  --primary-soft: #E8EFE9;  /* 세이지 틴트 - 배경/호버용 */
  --gold: #B08D57;          /* 머스트 골드 - 라벨/구분선 포인트 */
  --gold-soft: #EFE6D3;
  --ink: #2B2723;
  --ink-soft: #6E665C;
  --bg: #FBF9F4;
  --bg-soft: #F4EEE2;
  --border: #E6DECD;
  --font-serif: "Noto Serif KR", serif;
  --radius: 0.85rem;
  --radius-sm: 0.5rem;
  --shadow: 0 1px 2px rgba(43,39,35,0.04), 0 10px 24px rgba(43,39,35,0.06);
  --max-w: 1160px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:var(--bg);
  word-break:keep-all;
  line-height:1.7;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
.container{max-width:var(--max-w);margin:0 auto;padding:0 1.25rem;}
.section{padding:5.5rem 0;}
.section--soft{background:var(--bg-soft);}
.section__head{text-align:center;max-width:640px;margin:0 auto 3rem;}
.section__title{font-family:var(--font-serif);font-size:2rem;font-weight:600;letter-spacing:-0.01em;}
.section__desc{margin-top:0.9rem;color:var(--ink-soft);font-size:1.05rem;}

/* 레이블: label-badge (색 채움 대신 골드 언더라인 + 자간) */
.label-badge{
  display:inline-flex;
  align-items:center;
  padding-bottom:0.55rem;
  margin-bottom:1.2rem;
  border-bottom:1px solid var(--gold);
  background:none;
  border-radius:0;
  color:var(--gold);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.09em;
}

/* 버튼: btn-underline */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  padding:0.85rem 1.7rem;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:1rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-line{
  background:transparent;
  border-bottom:1px solid var(--ink);
  border-radius:0;
  padding:0.35rem 0.1rem;
  font-weight:500;
}
.btn-line::after{content:" →";}
.btn-line:hover{border-color:var(--gold);color:var(--gold);}
.btn-outline{background:var(--bg);border-color:var(--border);color:var(--ink);}

/* 헤더 */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,249,244,0.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header__inner{
  max-width:var(--max-w);margin:0 auto;padding:0.9rem 1.25rem;
  display:flex;align-items:center;gap:1.5rem;
}
.site-header__logo{display:flex;align-items:center;gap:0.5rem;font-weight:700;font-size:1.1rem;margin-right:auto;letter-spacing:0.01em;}
.site-header__logo img{border-radius:0.35rem;}
.site-nav{display:flex;gap:1.75rem;font-weight:500;}
.site-nav a:hover{color:var(--primary);}
.site-header__cta{margin-left:0.5rem;white-space:nowrap;}
.site-header__hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:0.4rem;cursor:pointer;}
.site-header__hamburger span{width:22px;height:2px;background:var(--ink);}

@media (max-width:768px){
  .site-header__cta{display:none;}
  .site-header__hamburger{display:flex;}
  .site-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--border);
    flex-direction:column;gap:0;
    max-height:0;overflow:hidden;transition:max-height 0.25s ease;
  }
  .site-nav.is-open{max-height:320px;}
  .site-nav a{padding:0.9rem 1.25rem;border-top:1px solid var(--border);}
}

/* Hero: hero-split */
.hero{padding:4rem 0;background:var(--bg-soft);}
.hero__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
}
.hero__title{font-family:var(--font-serif);font-size:2.6rem;font-weight:600;letter-spacing:-0.01em;line-height:1.4;}
.hero__subtitle{margin-top:0.6rem;font-size:1.2rem;font-weight:500;color:var(--ink);}
.hero__desc{margin-top:1.2rem;font-size:1.1rem;color:var(--ink-soft);}
.hero__actions{display:flex;gap:0.9rem;margin-top:1.9rem;flex-wrap:wrap;}
.hero__media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease;}
.hero__slide.is-active{opacity:1;}
.hero__slide img{width:100%;height:100%;object-fit:cover;}
.hero__media-caption{margin-top:0.7rem;font-size:0.85rem;color:var(--ink-soft);text-align:center;}

@media (max-width:768px){
  .hero__inner{grid-template-columns:1fr;}
  .hero__title{font-size:2rem;}
}

/* 카드 그리드: grid-3 */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr;}}

.card{
  background:var(--bg);border:1px solid var(--border);border-radius:0;
  overflow:hidden;box-shadow:var(--shadow);
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover{box-shadow:0 1px 2px rgba(43,39,35,0.05), 0 16px 32px rgba(43,39,35,0.09);transform:translateY(-2px);}
.card__img{aspect-ratio:4/3;overflow:hidden;}
.card__img img{width:100%;height:100%;object-fit:cover;}
.card--bottom .card__img img{object-position:center bottom;}
.card__body{padding:1.35rem 1.4rem 1.6rem;}
.card__title{font-weight:700;font-size:1.05rem;}
.card__meta{margin-top:0.4rem;color:var(--ink-soft);font-size:0.9rem;}
.card__link{display:inline-block;margin-top:1rem;}

/* 미드 배너 */
.mid-banner{
  background:var(--bg-soft);
  border-top:1px solid var(--gold-soft);
  border-bottom:1px solid var(--gold-soft);
  padding:3.5rem 0;text-align:center;
}
.mid-banner__title{font-family:var(--font-serif);font-size:1.6rem;font-weight:600;color:var(--ink);}
.mid-banner__desc{margin-top:0.6rem;color:var(--ink-soft);}
.mid-banner .btn-primary{margin-top:1.6rem;}

/* 서비스 그리드 */
.service-card{padding:1.85rem;text-align:left;}
.service-card__title{font-weight:700;font-size:1.1rem;margin-top:1rem;}
.service-card__desc{margin-top:0.5rem;color:var(--ink-soft);font-size:0.95rem;}

/* 갤러리 (H-6) */
.gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-item{margin:0;border-radius:0;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);}
.gallery-item img{aspect-ratio:1/1;object-fit:cover;}
.gallery-item figcaption{padding:0.65rem 0.8rem;font-size:0.83rem;font-weight:500;color:var(--ink-soft);background:var(--bg);}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);padding:1.35rem 0;}
.faq-item summary{cursor:pointer;font-weight:700;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item p{margin-top:0.8rem;color:var(--ink-soft);}

/* CTA 섹션 */
.cta-section{text-align:center;background:var(--bg-soft);}
.cta-section .section__title{font-family:var(--font-serif);}

/* 시공사례 상세 */
.detail-hero{padding:2.75rem 0 1rem;}
.detail-hero .hero__title{font-family:var(--font-serif);}
.before-after{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:1.5rem;}
@media (max-width:600px){.before-after{grid-template-columns:1fr;}}
.before-after figure{margin:0;border:1px solid var(--border);border-radius:0;overflow:hidden;box-shadow:var(--shadow);}
.before-after figcaption{padding:0.65rem 0.9rem;font-weight:600;color:var(--ink-soft);background:var(--bg);}
.tech-note{
  margin-top:2.2rem;padding:1.6rem;border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid var(--border);
}
.tech-note__sign{margin-top:1rem;font-weight:700;color:var(--gold);}

/* 세부페이지 본문 패턴(A~D) 요소 */
.section-images{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0;}
.section-images figure{margin:0;border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow);}
.section-images img{aspect-ratio:4/3;object-fit:cover;}
.section-images figcaption{padding:0.55rem 0.7rem;font-size:0.82rem;color:var(--ink-soft);background:var(--bg);}
@media (max-width:700px){.section-images{grid-template-columns:repeat(2,1fr);}}

.compare-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.95rem;}
.compare-table th,.compare-table td{border:1px solid var(--border);padding:0.7rem 0.9rem;text-align:left;}
.compare-table th{background:var(--bg-soft);font-weight:700;color:var(--ink);}
.compare-table td{color:var(--ink-soft);}

.check-list li{padding:0.7rem 0 0.7rem 1rem;border-bottom:1px solid var(--border);border-left:2px solid var(--gold);color:var(--ink-soft);}
.check-list li:first-child{border-top:1px solid var(--border);}

/* 푸터 */
.site-footer{background:var(--bg-soft);color:var(--ink-soft);margin-top:5rem;border-top:1px solid var(--gold-soft);}
.site-footer__inner{
  max-width:var(--max-w);margin:0 auto;padding:3.75rem 1.25rem 2rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem;
}
@media (max-width:768px){.site-footer__inner{grid-template-columns:1fr 1fr;}}
.site-footer__brand{font-family:var(--font-serif);font-size:1.2rem;font-weight:600;color:var(--ink);margin-bottom:0.75rem;}
.site-footer__title{font-weight:700;color:var(--ink);margin-bottom:0.9rem;font-size:0.92rem;letter-spacing:0.02em;}
.site-footer__col ul li{margin-bottom:0.6rem;font-size:0.92rem;}
.site-footer__col a:hover{color:var(--primary);}
.site-footer__bottom{border-top:1px solid var(--border);padding:1.25rem;text-align:center;font-size:0.85rem;color:var(--ink-soft);}

/* 플로팅 바 */
.floating-bar{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;
  display:flex;flex-direction:column;gap:0.6rem;
}
.floating-bar__btn{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.8rem 1.15rem;border-radius:var(--radius-sm);
  font-weight:600;font-size:0.9rem;box-shadow:var(--shadow);
}
.floating-bar__btn--call{background:var(--primary);color:#fff;}
.floating-bar__btn--sms{background:var(--bg);border:1px solid var(--border);color:var(--ink);}