/* ABC조경 공통 스타일 - 지역/분야 상세 페이지용 */
:root {
  --green-darkest: #1f2e22;
  --green-dark: #2d4a32;
  --green-main: #3a5a40;
  --green-mid: #588157;
  --green-soft: #a3b18a;
  --green-pale: #dad7cd;
  --cream: #f5f3ee;
  --paper: #fafaf7;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --ink-muted: #646464;
  --line: #d8d4c9;
  --gold: #b08d57;
  --shadow-soft: 0 4px 24px rgba(31, 46, 34, 0.08);
  --shadow-deep: 0 12px 48px rgba(31, 46, 34, 0.16);
  --serif: 'Nanum Myeongjo', serif;
  --sans: 'Noto Sans KR', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  letter-spacing: -0.01em;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--green-main); color: var(--cream); }

/* 알림바 */
.notice-bar {
  background: var(--green-darkest);
  color: var(--cream);
  text-align: center;
  padding: 8px 14px;
  font-size: 12px;
}
.notice-bar strong { color: #c8d6b9; font-weight: 600; }

/* 헤더 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo { display: flex; align-items: baseline; gap: 10px; }
.logo-mark { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--green-main); letter-spacing: -0.03em; }
.logo-tag { font-family: var(--serif); font-size: 14px; color: var(--ink-muted); }
.header-cta { display: flex; gap: 8px; }
.header-btn {
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.header-btn.tel { background: var(--green-main); color: var(--cream); }
.header-btn.tel:hover { background: var(--green-darkest); }
.header-btn.sms { background: transparent; color: var(--green-dark); border: 1.5px solid var(--green-mid); }
.header-btn.sms:hover { background: var(--green-pale); }
@media (max-width: 640px) {
  .logo-tag { display: none; }
  .header-btn { padding: 11px 16px; font-size: 13.5px; min-height: 44px; box-sizing: border-box; }
}

/* 브레드크럼 */
.breadcrumb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.breadcrumb a { color: var(--green-main); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

/* 페이지 히어로 (작은 버전) */
.page-hero {
  position: relative;
  padding: 48px 20px 56px;
  background: var(--green-darkest);
  color: var(--cream);
  overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.page-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,46,34,0.55) 0%, rgba(31,46,34,0.85) 100%);
}
.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}
.page-hero-eyebrow {
  display: inline-block;
  font-family: var(--serif);
  font-size: 13px;
  color: #c8d6b9;
  letter-spacing: 0.3em;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200, 214, 185, 0.35);
}
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(22px, 4.2vw, 42px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: 900px;
}
.page-hero p {
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.85;
  color: rgba(245, 243, 238, 0.85);
  max-width: 720px;
  font-weight: 300;
}

/* 섹션 */
.section { padding: 56px 20px; }
.section-narrow { max-width: 980px; margin: 0 auto; }
.section-wide { max-width: 1280px; margin: 0 auto; }

.section-eyebrow {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--green-mid);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
}
.section-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(21px, 3vw, 34px);
  line-height: 1.3;
  color: var(--green-darkest);
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.section-desc {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 720px;
  margin-bottom: 44px;
}

/* 본문 콘텐츠 */
.content-body { max-width: 800px; margin: 0 auto; }
.content-body h2 {
  font-family: var(--serif);
  font-size: clamp(19px, 2.5vw, 28px);
  font-weight: 800;
  color: var(--green-darkest);
  letter-spacing: -0.02em;
  margin: 56px 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--green-pale);
}
.content-body h2:first-child { margin-top: 0; }
.content-body h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--green-dark);
  letter-spacing: -0.02em;
  margin: 36px 0 14px;
}
.content-body p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.content-body ul, .content-body ol {
  margin: 16px 0 24px 24px;
  color: var(--ink-soft);
}
.content-body li {
  font-size: 14.5px;
  line-height: 1.85;
  margin-bottom: 8px;
}
.content-body strong { color: var(--green-darkest); font-weight: 700; }

/* 하이라이트 박스 */
.highlight-box {
  background: var(--green-pale);
  border-left: 4px solid var(--green-main);
  padding: 24px 28px;
  margin: 32px 0;
  border-radius: 0 6px 6px 0;
}
.highlight-box p { margin-bottom: 8px; color: var(--green-darkest); }
.highlight-box p:last-child { margin-bottom: 0; }

/* 인라인 CTA */
.inline-cta {
  background: linear-gradient(135deg, var(--green-main) 0%, var(--green-dark) 100%);
  color: var(--cream);
  padding: 28px 22px;
  border-radius: 8px;
  text-align: center;
  margin: 48px 0;
}
.inline-cta h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  color: #f0c87a !important;  /* 어두운 녹색 배경에 황금색 텍스트로 가독성 강화 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.inline-cta p {
  color: rgba(245, 243, 238, 0.95) !important;
  font-size: 15px;
  margin-bottom: 18px;
}
.inline-cta p { color: rgba(245, 243, 238, 0.85); margin-bottom: 24px; font-size: 15px; }
.inline-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.inline-cta-btn {
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.inline-cta-btn.primary { background: var(--cream); color: var(--green-darkest); }
.inline-cta-btn.primary:hover { background: #fff; transform: translateY(-2px); }
.inline-cta-btn.outline { background: transparent; color: var(--cream); border: 1.5px solid rgba(245,243,238,0.4); }
.inline-cta-btn.outline:hover { background: rgba(245,243,238,0.12); }

/* 갤러리 미니 */
.mini-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 36px 0;
}
.mini-gallery a {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  display: block;
}
.mini-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.mini-gallery a:hover img { transform: scale(1.06); }
@media (max-width: 600px) {
  .mini-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* 관련 페이지 */
.related-pages {
  background: var(--cream);
  padding: 60px 24px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 24px auto 0;
}
.related-card {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid var(--line);
  transition: all 0.2s;
  display: block;
}
.related-card:hover { border-color: var(--green-mid); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.related-card h4 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--green-darkest);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.related-card p { font-size: 12.5px; color: var(--ink-muted); }
@media (max-width: 900px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  /* === 480px 모바일 추가 최적화 === */
  .related-grid { grid-template-columns: 1fr; gap: 10px; }
  .related-card { padding: 14px 16px; }
  .related-card h4 { font-size: 14.5px; }
  .related-card p { font-size: 12px; }
  
  /* 모바일 hero 섹션 가독성 */
  .page-hero { padding: 40px 18px 36px; }
  .page-hero h1 { font-size: clamp(22px, 6vw, 32px); line-height: 1.3; }
  .page-hero p { font-size: 13.5px; line-height: 1.65; }
  
  /* 모바일 본문 콘텐츠 */
  .content-body { padding: 0 6px; }
  .content-body h2 { font-size: 20px; margin-top: 32px; }
  .content-body h3 { font-size: 16.5px; margin-top: 22px; }
  .content-body p, .content-body li { font-size: 14.5px; line-height: 1.75; }
  .content-body ul, .content-body ol { padding-left: 22px; }
  
  /* 모바일 inline-cta */
  .inline-cta { padding: 24px 18px; }
  .inline-cta h3 { font-size: 17px; margin-bottom: 8px; }
  .inline-cta p { font-size: 13.5px; margin-bottom: 16px; }
  .inline-cta-buttons { flex-direction: column; gap: 8px; }
  .inline-cta-btn { width: 100%; justify-content: center; padding: 14px; font-size: 14.5px; }
  
  /* 모바일 푸터 */
  .footer { padding: 36px 16px 24px; }
  .footer-info dt { min-width: 56px; font-size: 12px; }
  .footer-info dd { padding-left: 64px; font-size: 12.5px; }
  
  /* 모바일 notice-bar */
  .notice-bar { font-size: 12.5px; padding: 8px 12px; line-height: 1.5; }
  
  /* 표 모바일 가로 스크롤 자동 처리 */
  .content-body table {
    display: block; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

}

/* 푸터 */
.footer {
  background: var(--green-darkest);
  color: rgba(245, 243, 238, 0.7);
  padding: 60px 24px 40px;
}
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(245, 243, 238, 0.12);
}
.footer-brand h4 { font-family: var(--serif); color: var(--cream); font-size: 20px; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.02em; }
.footer-brand p { font-size: 14px; line-height: 1.85; }
.footer-col h5 { color: var(--cream); font-size: 14px; font-weight: 700; margin-bottom: 16px; letter-spacing: 0.05em; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; font-size: 13.5px; line-height: 1.6; }
.footer-col ul li a:hover { color: var(--cream); }
.footer-info { font-size: 13px; line-height: 1.85; }
.footer-info dt { color: rgba(245, 243, 238, 0.5); float: left; clear: left; min-width: 90px; padding-right: 8px; }
.footer-info dd { padding-left: 90px; margin-bottom: 6px; }
.footer-info dd a { color: var(--cream); }
.footer-bottom { font-size: 12px; color: rgba(245, 243, 238, 0.5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 800px) { .footer-top { grid-template-columns: 1fr; gap: 36px; } }

/* 플로팅 CTA */
.floating-cta {
  position: fixed; z-index: 99;
  display: flex; gap: 10px;
  bottom: 20px; right: 20px;
  flex-direction: column;
}
.float-btn {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 6px 20px rgba(31, 46, 34, 0.35);
  transition: all 0.25s;
  position: relative;
}
.float-btn.tel {
  background: var(--green-main); color: var(--cream);
  animation: subtle-pulse 2.5s ease-in-out infinite;
}
.float-btn.sms { background: var(--cream); color: var(--green-darkest); border: 1.5px solid var(--green-main); }
.float-btn:hover { transform: scale(1.08); }
.float-btn .float-label {
  position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
  background: var(--green-darkest); color: var(--cream);
  padding: 8px 14px; border-radius: 100px;
  font-size: 13px; white-space: nowrap; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.float-btn:hover .float-label { opacity: 1; }
@keyframes subtle-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(31, 46, 34, 0.35), 0 0 0 0 rgba(58, 90, 64, 0.6); }
  50% { box-shadow: 0 6px 20px rgba(31, 46, 34, 0.35), 0 0 0 12px rgba(58, 90, 64, 0); }
}
@media (max-width: 640px) {
  .floating-cta {
    bottom: 0; right: 0; left: 0;
    flex-direction: row;
    background: rgba(31, 46, 34, 0.96);
    padding: 10px; gap: 8px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  }
  .float-btn {
    width: auto; flex: 1; height: 50px;
    border-radius: 6px; font-size: 14px; font-weight: 700;
    gap: 8px; animation: none;
  }
  .float-btn.tel, .float-btn.sms { display: flex; align-items: center; justify-content: center; }
  .float-btn .float-label {
    position: static; transform: none; background: transparent; color: inherit;
    padding: 0; opacity: 1; font-size: 14px;
  }
  .float-btn .icon { font-size: 18px; }
  body { padding-bottom: 70px; }
}


/* 모바일 추가 최적화 (640px 이하) */
@media (max-width: 640px) {
  body { font-size: 14px; line-height: 1.7; }
  .section { padding: 40px 16px; }
  .page-hero { padding: 36px 16px 44px; }
  .content-body p { font-size: 14px; line-height: 1.8; }
  .content-body li { font-size: 13.5px; }
  .content-body h2 { font-size: 18px; margin: 36px 0 14px; padding-bottom: 10px; }
  .content-body h3 { font-size: 15.5px; margin: 24px 0 10px; }
  .section-title { font-size: 20px; margin-bottom: 16px; }
  .section-desc { font-size: 14px; margin-bottom: 28px; }
  .highlight-box { padding: 18px 20px; margin: 22px 0; }
  .highlight-box p { font-size: 14px; }
  .inline-cta { padding: 24px 18px; margin: 32px 0; }
  .inline-cta h3 { font-size: 17px; margin-bottom: 8px; }
  .inline-cta p { font-size: 13px; margin-bottom: 18px; }
  .inline-cta-btn { padding: 11px 20px; font-size: 13.5px; }
  .breadcrumb { font-size: 12px; padding: 14px 16px 0; }
  .related-card { padding: 16px; }
  .related-card h4 { font-size: 15px; }
  .related-card p { font-size: 12.5px; line-height: 1.5; }
  .footer { padding: 44px 18px 32px; }
  .footer-brand h4 { font-size: 18px; }
  .footer-brand p { font-size: 13px; }
  .footer-col h5 { font-size: 12.5px; margin-bottom: 12px; }
  .footer-col ul li { font-size: 12.5px; margin-bottom: 8px; }
  .footer-info dt { min-width: 70px; }
  .footer-info dd { padding-left: 70px; }
  .page-hero-eyebrow { font-size: 12px; margin-bottom: 14px; padding-bottom: 6px; letter-spacing: 0.2em; }
  .page-hero p { font-size: 13px; line-height: 1.75; }
}

/* 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
  body { font-size: 13.5px; }
  .logo-mark { font-size: 19px; }
  .logo-tag { display: none; }
  .header-btn { padding: 11px 14px; font-size: 13px; min-height: 42px; box-sizing: border-box; }
  .page-hero h1 { font-size: 20px; line-height: 1.35; margin-bottom: 14px; }
  .content-body h2 { font-size: 17px; }
  .section-title { font-size: 19px; }
  .inline-cta-buttons { flex-direction: column; }
  .inline-cta-btn { width: 100%; justify-content: center; }
}


/* === 가독성 강화 (WCAG AAA 기준) === */
/* 풋프린트 영역 본문 텍스트 - 어두운 배경에서 충분한 대비 */
footer .footer-info dt { color: rgba(245, 243, 238, 0.7) !important; }
footer .footer-info dd { color: rgba(245, 243, 238, 0.95) !important; }
footer .footer-brand p { color: rgba(245, 243, 238, 0.88) !important; }
footer .footer-col h5 { color: rgba(245, 243, 238, 0.7) !important; letter-spacing: 0.1em; font-size: 12px; }
footer .footer-col ul li a { color: rgba(245, 243, 238, 0.92) !important; }
footer .footer-col ul li a:hover { color: rgba(245, 243, 238, 1) !important; }
footer .footer-bottom { color: rgba(245, 243, 238, 0.65); }

/* B2B 카드, 시공분야 카드 본문 가독성 강화 */
.b2b-card p { color: var(--ink-soft) !important; }
.service-card p { color: var(--ink-soft) !important; }
.region-item p { color: var(--ink-soft) !important; }
.related-card p { color: var(--ink-soft) !important; }

/* 알림바 (notice-bar) */
.notice-bar strong { color: #d8e7c5 !important; font-weight: 700; }

/* breadcrumb 가독성 */
.breadcrumb { color: var(--ink-soft); }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-main); }
.breadcrumb .sep { color: var(--ink-muted); margin: 0 6px; }
.breadcrumb span:last-child { color: var(--ink); font-weight: 500; }

/* 페이지 히어로 eyebrow - 옅었던 부분 */
.page-hero-eyebrow { color: var(--cream) !important; opacity: 0.95; }

/* 섹션 eyebrow (회색 작은 글자) - 진하게 */
.section-eyebrow { 
  color: var(--green-main) !important; 
  opacity: 0.85;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* highlight-box 본문 진하게 */
.highlight-box p { color: var(--ink) !important; }

/* 인라인 CTA 본문 */
.inline-cta p { color: rgba(245, 243, 238, 0.95) !important; }

/* FAQ 답변 진하게 */
.faq-a { color: var(--ink-soft) !important; }

/* 서비스 카드 태그 (작은 라벨) 가독성 */
.service-tag {
  background: rgba(58, 90, 64, 0.1) !important;
  color: var(--green-dark) !important;
  font-weight: 500;
}

/* 트러스트 바 - 옅은 회색 → 진하게 */
.trust-item p { color: var(--ink-soft) !important; }

/* 모바일 푸터 가독성 */
@media (max-width: 640px) {
  footer .footer-col h5 { font-size: 12px !important; opacity: 0.85; }
  footer .footer-col ul li a { font-size: 13px !important; }
}


/* === 768px 태블릿/대형 모바일 보강 === */
@media (max-width: 768px) {
  .content-body { padding: 0 16px; }
  .content-body h2 { font-size: 22px; }
  .content-body h3 { font-size: 17px; }
  .page-hero h1 { font-size: clamp(24px, 5vw, 36px); }
  .section { padding: 36px 18px; }
  .related-grid { gap: 12px; }
  .header-btn { padding: 10px 14px; font-size: 13px; min-height: 40px; box-sizing: border-box; }
}