/* 세무법인공평 - 매헌 윤봉길 기념관(yun) 스타일 기반 럭셔리 골드 & 네이비 세무 디자인 시스템 */
:root {
  /* 새로운 컬러시스템 개편 (yun 테마 기반 럭셔리 골드 & 네이비) */
  --primary-dark: #1a2744;  /* 장엄한 네이비 */
  --primary-light: #1a2744; 
  --primary-mid: #44546a;   /* Premium Slate Gray */
  
  /* 하단 백그라운드 전용 컬러 */
  --footer-bg: #0f1a2e;     /* navy-dark */

  /* 포인트 컬러 (기품 있는 골드 테마) */
  --point-1: #c9a84c; /* 주 포인트: 기품 있는 골드 */
  --point-2: #e8d48b; /* 서브 포인트: 부드러운 골드 */
  --point-3: #1a2744;
  --point-4: #c9a84c;
  
  /* 기존 유지 컬러 및 중성색 */
  --accent-gold: #c9a84c;
  --bg-light: #f8f9fa; /* gray-50 */
  --bg-white: #ffffff;
  --text-dark: #212529; /* gray-900 */
  --text-gray: #444; /* gray-600 */
  --border-light: #e9ecef; /* gray-100 */

  /* 레이아웃 및 넉넉한 여백 설계 */
  --header-height: 100px;
  --container-width: 1320px; /* yun 테마의 wrap 규격인 1320px 로 튜닝 */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, button, input, select, textarea {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important;
}


h1, h2, h3, h4, h5, h6 {
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  color: var(--primary-dark);
  font-weight: 800;
  line-height: 1.3;
}

html {
  font-size: 16px; /* yun 테마의 16px 기준 폰트 크기 리셋 */
  scroll-behavior: smooth;
}

body {
  font-size: 16px; /* 폰트 크기 리셋으로 과도하게 거대해진 텍스트 스케일 전면 정상화 */
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul, li { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

.contain {
  width: var(--container-width);
  max-width: 95%;
  margin: 0 auto;
  position: relative;
}

/* ========== 애니메이션 엔진 (Smooth Reveal & 하드웨어 가속) ========== */
.anim-ready {
  opacity: 0;
  transform: translateY(30px);
  visibility: visible !important;
  transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.anim-ready.active {
  opacity: 1;
  transform: translateY(0);
}

.anim-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  visibility: visible !important;
  transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.anim-reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.anim-zoom-in {
  opacity: 0;
  transform: scale(0.95);
  visibility: visible !important;
  transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.anim-zoom-in.active {
  opacity: 1;
  transform: scale(1);
}

/* ========== Floating Phone Badge (Micro Bounce 애니메이션) ========== */
@keyframes microBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.floating-call {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 15px;
  animation: microBounce 2.5s infinite ease-in-out;
}

.call-badge {
  background: var(--point-1);
  color: #fff;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 10px 25px rgba(201, 168, 76, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}

.call-badge:hover {
  transform: translateY(-5px);
  background: #fff;
  color: var(--primary-dark);
  border: 1px solid var(--point-1);
}

.mobile-call-icon {
  display: none;
}

@media (max-width: 768px) {
  .floating-call {
    right: 20px;
    bottom: 20px;
  }
  .call-badge {
    display: none;
  }
  .mobile-call-icon {
    display: flex;
    width: 55px;
    height: 55px;
    background: var(--point-1);
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(201, 168, 76, 0.25);
  }
}

/* ========== Common Components ========== */
.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--primary-dark);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--point-1);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(201, 168, 76, 0.2);
}

/* yun 테마 m4-card 기반 프리미엄 카드디자인 이식 */
.modern-card {
  background: #ffffff;
  border-radius: 16px; /* 2.5rem에서 16px로 둥글기 리사이징 */
  padding: 50px 32px; /* yun 테마의 쾌적한 패딩 적용 */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.modern-card:hover {
  transform: translateY(-12px); /* yun 테마와 동일한 부드러운 상단 도약 트랜지션 */
  border-color: var(--point-1);
  box-shadow: 0 25px 50px rgba(201, 168, 76, 0.12); /* 고급스러운 골드 광채 그림자 */
}

.modern-card i {
  font-size: 40px; /* 너무 과하지 않은 선명한 40px 크기로 조정 */
  color: var(--point-1);
  margin-bottom: 24px;
}

/* ========== Header 리뉴얼 (Mobile Fixed & 25% distribution) ========== */
#boxTop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: all 0.4s;
  display: flex;
  align-items: center;
}

#boxTop.scrolled {
  height: 80px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.gnb-mobile {
  display: none;
}

.header-logo-img {
    height: 55px;
    width: auto;
    display: block;
}
/* dampick_clone.css의 강한 style(#boxTop .boxTel) 오버라이드 및 완벽 슬림화 */
#boxTop .boxTel {
    background: none !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    cursor: default !important;
    border: none !important;
    box-shadow: none !important;
}
.mobile-header-call {
    display: none;
}

@media (max-width: 1024px) {
  #boxTop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding-top: 8px;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }
  .boxLogo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 15px;
  }
  .header-logo-img {
      height: 38px !important;
      padding: 5px 0;
  }
  .mobile-header-call {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      background: var(--point-1);
      color: #fff;
      border-radius: 8px; /* 라운드 사각형 */
      font-size: 16px;
      margin-left: 10px;
  }
  .gnb {
    display: none;
  }
  .gnb-mobile {
    display: flex;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--border-light);
    margin-top: 5px;
  }
  .gnb-mobile a {
    flex: 1;
    width: 33.33%;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
  }
  .gnb-mobile a.on {
    color: var(--point-1);
    border-bottom: 3px solid var(--point-1);
  }
}

/* ========== Footer ========== */
footer {
  background: var(--footer-bg);
  padding: 80px 0;
  color: #ffffff;
}

footer .footer-logo {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 24px;
}

footer .footer-section h4 {
  color: var(--point-1);
  font-size: 16px;
  margin-bottom: 24px;
  font-weight: 800;
}

footer .footer-section p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin-bottom: 6px;
}

footer a { color: inherit; }

@media (max-width: 768px) {
  .footer-top {
      display: flex !important;
      flex-wrap: wrap;
      gap: 0 !important; /* 갭을 0으로 꽉 닫아 세로 경계선이 완벽히 GNB 중앙에서 마주하도록 조율 */
  }
  .footer-sec-logo, .footer-sec-address {
      width: 100%;
  }
  .footer-sec-contact {
      width: 50% !important;
      margin: 0 !important;
      padding: 20px 15px 20px 0 !important;
      border-top: 1px solid rgba(255, 255, 255, 0.25) !important; /* 은빛 선명도 보강 */
      border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
      border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
      order: 2;
      box-sizing: border-box;
  }
  .footer-sec-links {
      width: 50% !important;
      margin: 0 !important;
      padding: 20px 0 20px 25px !important;
      border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
      order: 3;
      box-sizing: border-box;
  }
  .footer-sec-logo { order: 1; }
  .footer-sec-address { order: 4; }
}

/* ========== Sub Hero ========== */
.sub-hero {
  position: relative;
  height: 350px;
  background-size: cover;
  background-position: center;
  background-image: url('../images/_subvisu10.jpg');
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  margin-top: 0;
}

.sub-hero-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.sub-hero-txt {
  position: relative;
  z-index: 10;
  padding: 0 20px;
  margin-top: 50px; /* 헤더 영역(100px)을 피해서 시각적으로 중앙에 오도록 마진 추가 */
}

.sub-hero-txt h1 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .sub-hero {
    height: 500px;
    background-image: url('../images/_subvisum.jpg') !important;
  }
  .sub-hero-txt h1 {
    font-size: 28px;
  }
}

/* ========== SUB NAV (Breadcrumb/LNB) ========== */
.sub_nav {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
}

.sub_nav .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    font-size: 14px;
}

.sub_nav .navigation {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-gray);
    padding-left: 10px !important;
}

.sub_nav .navigation a {
    color: var(--text-gray);
    font-weight: 600;
}

.sub_nav .lnb {
    display: flex;
    list-style: none;
    gap: 30px;
}

.sub_nav .lnb li a {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-gray);
    padding: 10px 0;
    position: relative;
}

.sub_nav .lnb li.on a {
    color: var(--primary-dark);
}

.sub_nav .lnb li.on a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--point-1);
}

/* ========== Utility Classes ========== */
.pc-only { display: flex !important; }
@media (max-width: 1024px) {
  .pc-only { display: none !important; }
}

/* ========== 6대 핵심 업무분야 그리드 (3열 x 2행) ========== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* 모바일 및 태블릿을 고려한 30px 쾌적한 갭 설계 */
  margin-top: 60px;
}

@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.modern-card.point-accent {
  border-top: 4px solid var(--point-1);
}

/* ========== 여백 확보 강화를 위한 간격 튜닝 ========== */
.main-services {
    padding: 100px 0; /* 16rem에서 100px로 쾌적화 */
}

.main-contact {
    padding: 100px 0 140px; /* 극적인 마찰 방지 140px 여백 설계 */
    background: #ffffff;
}

/* ========== 모바일 뷰포트 여백 및 패딩 최적화 (10px 규격) ========== */
@media (max-width: 768px) {
  .inner, .inner_center {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .modern-card {
    padding: 10px !important;
  }
  /* 6개 박스 및 그리드 모바일 여백 극소화 및 상위 컨테이너 강제 패딩 완전 상쇄 */
  #main_services_m,
  .services-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  #main_services_m .w_inner,
  .services-list .services-grid,
  #main_services_m .con_wrap,
  .services-list .con_wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* 양끝 밀착 시 자연스러운 카드 모서리 및 여백 튜닝 */
  #main_services_m .itm,
  .services-list .itm {
    border-radius: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ========== SUB NAV (Breadcrumb/LNB) 폰트 크기 및 높이 다운사이징 최적화 ========== */
/* PC 뷰포트 (769px 이상) */
.sub_nav {
    height: 50px !important;
    line-height: 50px !important;
    background: var(--bg-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
    margin-bottom: 40px !important; /* 과도한 8rem 마진을 컴팩트한 40px로 다운사이징 */
}

.sub_nav .inner {
    height: 50px !important;
    font-size: 13px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.sub_nav .navigation {
    font-size: 15px !important;
    color: var(--text-gray) !important;
    padding-left: 10px !important;
}

.sub_nav .navigation a {
    font-size: 15px !important;
    color: var(--text-gray) !important;
    font-weight: 600 !important;
}

.sub_nav .navigation .icon {
    width: 12px !important;
    height: 12px !important;
    stroke: var(--text-gray) !important;
}

.sub_nav .lnb {
    display: flex !important;
    gap: 20px !important;
}

.sub_nav .lnb ul {
    display: flex !important;
    gap: 0 !important;
}

.sub_nav .lnb ul li ~ li {
    border-left: 1px solid var(--line-color) !important;
}

.sub_nav .lnb li a,
.sub_nav .lnb ul a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-gray) !important;
    padding: 0 16px !important;
    line-height: 50px !important;
    height: 50px !important;
    display: block !important;
}

.sub_nav .lnb li.on a,
.sub_nav .lnb ul li.on a {
    color: var(--primary-dark) !important;
    font-weight: 700 !important;
    border-top: 3px solid var(--point-1) !important;
    margin-top: -3px !important;
}

/* 모바일 뷰포트 (768px 이하) */
@media (max-width: 768px) {
    .sub_nav {
        margin: 0 !important; /* 모바일 컨텐츠 가로폭 100% 맞춤 */
        margin-top: -2.5rem !important;
        margin-bottom: 20px !important; /* 모바일 아래쪽 마진을 컴팩트한 20px로 조율 */
        height: 44px !important;
        line-height: 44px !important;
        border: 1px solid var(--line-color) !important;
        border-top: 4px solid var(--primary-color) !important;
        border-left: none !important;
        border-right: none !important;
        background: var(--white-color) !important;
    }
    
    .sub_nav .inner {
        height: 44px !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .sub_nav .lnb > a {
        display: block !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--primary-dark) !important;
        padding: 0 12px !important;
        height: 44px !important;
        line-height: 44px !important;
        position: relative !important;
    }
    
    .sub_nav .lnb > a::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        transform: translate(0, -50%) !important;
        right: 12px !important;
        width: 16px !important;
        height: 16px !important;
        background: url(../lib/icon/chevron-down.svg) no-repeat center center/16px !important;
        opacity: 0.6 !important;
    }
    
    .sub_nav .lnb > a.on::after {
        background: url(../lib/icon/chevron-up.svg) no-repeat center center/16px !important;
    }
    
    .sub_nav .lnb ul {
        background: var(--background-color) !important;
    }
    
    .sub_nav .lnb ul li {
        border-top: 1px solid var(--line-color) !important;
    }
    
    .sub_nav .lnb ul li ~ li {
        border-left: 0 !important;
    }
    
    .sub_nav .lnb ul a {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--text-gray) !important;
        padding: 0 12px !important;
        height: 40px !important;
        line-height: 40px !important;
        background: #fdfdfd !important;
    }
    
    .sub_nav .lnb ul li.on a {
        color: var(--point-1) !important;
        font-weight: 700 !important;
        border-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* ========== 모바일 전용 줄바꿈 유틸리티 (mo-br) ========== */
.mo-br {
    display: none !important;
}
@media (max-width: 768px) {
    .mo-br {
        display: inline !important;
    }
}
/* 메인 Contact 배너 슬로건 타 스타일 훼방 방지 조치 */
#main_banner01 .banner_main_tit {
    color: #ffffff !important;
}