/* =========================================================
   BIGDIPPER GLOBAL CSS
   전체 교체용 / Astra + WordPress
   정리일: 2026-08-19

   구성
   1. 공통/기본
   2. 헤더 반응형 안정화
   3. 계산기
   4. CTA 버튼
   5. 제품 컴포넌트
   6. 모바일/태블릿 레이아웃
   7. 페이지 제목/상단 여백
   8. 모바일 고정 CTA
   9. 푸터
   ========================================================= */


/* =========================================================
   1. 공통 / 기본
   ========================================================= */

:root {
  --bdp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Apple SD Gothic Neo",
              "Noto Sans KR", sans-serif;
  --bdp-blue: #1975e6;
  --bdp-blue-dark: #145db8;
  --bdp-green: #00b894;
  --bdp-green-dark: #008a70;
  --bdp-sky: #00aeff;
  --bdp-sky-dark: #008cd6;
  --bdp-red: #d93025;
  --bdp-gray: #6c757d;
  --bdp-gray-dark: #5a6268;
  --bdp-border: #e0e0e0;
  --bdp-text: #111111;
  --bdp-muted: #555555;
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img {
  max-width: 100%;
}

@media (max-width: 600px) {
  body.single-product .product_title.entry-title,
  body.single-product h2.entry-title,
  .single-product h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
}


/* =========================================================
   2. 헤더 반응형 안정화

   1280px 이상
   = 데스크톱 전체 메뉴

   1279px 이하
   = 태블릿/모바일 햄버거 메뉴

   중간 화면 폭에서
   로고와 메뉴가 세로로 깨지는 현상 방지
   ========================================================= */

#masthead,
#ast-desktop-header,
#ast-mobile-header,
.ast-main-header-wrap,
.ast-primary-header-bar,
.site-primary-header-wrap {
  width: 100%;
}


/* ---------------------------------------------------------
   2-1. 데스크톱 헤더
   1280px 이상
   --------------------------------------------------------- */

@media (min-width: 1280px) {

  #ast-desktop-header {
    display: block !important;
  }

  #ast-mobile-header {
    display: none !important;
  }

  #ast-desktop-header .site-primary-header-wrap,
  #ast-desktop-header .ast-builder-grid-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #ast-desktop-header .ast-builder-grid-row {
    align-items: center;
  }

  /* 브랜드/로고가 메뉴에 눌리지 않도록 고정 */
  #ast-desktop-header .site-header-primary-section-left,
  #ast-desktop-header .site-branding,
  #ast-desktop-header .ast-site-identity,
  #ast-desktop-header .site-logo-img {
    flex-shrink: 0 !important;
    min-width: max-content;
  }

  /* 로고/회사명이 한 글자씩 세로로 떨어지는 현상 방지 */
  #ast-desktop-header .site-branding,
  #ast-desktop-header .ast-site-identity,
  #ast-desktop-header .site-title,
  #ast-desktop-header .site-description {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  #ast-desktop-header .site-header-primary-section-right {
    min-width: 0;
  }

  /* PC 메뉴 한 줄 유지 */
  #ast-desktop-header .main-header-menu,
  #ast-desktop-header .ast-nav-menu,
  #ast-desktop-header .main-header-menu > .menu-item {
    flex-wrap: nowrap !important;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .menu-link,
  #ast-desktop-header .ast-nav-menu > .menu-item > .menu-link {
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}


/* ---------------------------------------------------------
   2-2. 태블릿 / 중간 화면 / 모바일
   1279px 이하
   --------------------------------------------------------- */

@media (max-width: 1279px) {

  /*
   * 중간 폭에서 PC 메뉴를 억지로 압축하지 않고
   * 모바일 헤더를 사용
   */
  #ast-desktop-header {
    display: none !important;
  }

  #ast-mobile-header {
    display: block !important;
    width: 100% !important;
  }

  #ast-mobile-header .ast-main-header-wrap,
  #ast-mobile-header .ast-primary-header-bar,
  #ast-mobile-header .site-primary-header-wrap,
  #ast-mobile-header .ast-builder-grid-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /*
   * [브랜드/로고] [햄버거]
   * 2열 구조를 강제
   */
  #ast-mobile-header .ast-builder-grid-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  #ast-mobile-header .site-header-primary-section-left {
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  #ast-mobile-header .site-header-primary-section-right {
    min-width: max-content !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
  }

  #ast-mobile-header .site-branding,
  #ast-mobile-header .ast-site-identity,
  #ast-mobile-header .site-logo-img {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #ast-mobile-header .site-title,
  #ast-mobile-header .site-description {
    max-width: 100%;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* 햄버거 버튼 위치 안정화 */
  #ast-mobile-header .menu-toggle,
  #ast-mobile-header .main-header-menu-toggle,
  #ast-mobile-header button.menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /*
   * 922~1279px 구간에서도
   * 펼쳐진 모바일 메뉴를 정상 세로 목록으로 유지
   */
  #ast-mobile-header .ast-mobile-header-content,
  #ast-mobile-header .main-header-bar-navigation,
  #ast-mobile-header .main-navigation {
    width: 100% !important;
    max-width: 100% !important;
  }

  #ast-mobile-header .main-header-menu,
  #ast-mobile-header .ast-nav-menu {
    width: 100% !important;
    flex-direction: column !important;
  }

  #ast-mobile-header .main-header-menu > .menu-item,
  #ast-mobile-header .ast-nav-menu > .menu-item {
    width: 100% !important;
  }

  #ast-mobile-header .main-header-menu .menu-link,
  #ast-mobile-header .ast-nav-menu .menu-link {
    word-break: keep-all !important;
    overflow-wrap: break-word;
  }

  /*
   * 중간 화면 폭에서 가로 스크롤 때문에
   * 헤더가 흔들리거나 밀리는 현상 방지
   */
  html,
  body {
    overflow-x: hidden !important;
  }

  #page,
  .site,
  .site-content,
  .ast-container {
    max-width: 100% !important;
  }
}


/* =========================================================
   3. 계산기
   ========================================================= */


/* ---------------------------------------------------------
   3-1. 개별 간단 계산기 공통

   요소수
   워셔액
   생수
   --------------------------------------------------------- */

#urea-simple-calc,
#wash-simple-calc,
#water-simple-calc {
  width: 100%;
  max-width: 430px;
  margin: 20px auto 40px;
  padding: 26px 20px 30px;
  font-family: var(--bdp-font);
  background: #ffffff;
  border-radius: 18px;
}

#urea-simple-calc {
  box-shadow: 0 4px 20px rgba(18, 120, 240, 0.15);
}

#wash-simple-calc {
  box-shadow: 0 4px 20px rgba(0, 184, 148, 0.15);
}

#water-simple-calc {
  box-shadow: 0 4px 20px rgba(0, 174, 255, 0.15);
}


/* 입력 그룹 */

#urea-simple-calc .input-group,
#wash-simple-calc .input-group,
#water-simple-calc .input-group {
  margin-bottom: 20px;
}


/* 라벨 */

#urea-simple-calc label,
#wash-simple-calc label,
#water-simple-calc label {
  display: inline-block;
  margin-bottom: 8px;
  color: #333333;
  font-size: 1.05em;
  font-weight: 600;
}


/* 숫자 입력 */

#urea-simple-calc input[type="number"],
#wash-simple-calc input[type="number"],
#water-simple-calc input[type="number"] {
  width: 100%;
  padding: 12px 10px;
  color: var(--bdp-text) !important;
  background: #ffffff !important;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: 1.1em;
  -moz-appearance: textfield;
}


/* 마우스 이동/포커스 후 숫자가 사라지지 않도록 고정 */

#urea-simple-calc input[type="number"]:hover,
#urea-simple-calc input[type="number"]:focus,
#wash-simple-calc input[type="number"]:hover,
#wash-simple-calc input[type="number"]:focus,
#water-simple-calc input[type="number"]:hover,
#water-simple-calc input[type="number"]:focus {
  color: var(--bdp-text) !important;
  background: #ffffff !important;
  outline: none;
}


/* 숫자 스핀 버튼 제거 */

#urea-simple-calc input::-webkit-outer-spin-button,
#urea-simple-calc input::-webkit-inner-spin-button,
#wash-simple-calc input::-webkit-outer-spin-button,
#wash-simple-calc input::-webkit-inner-spin-button,
#water-simple-calc input::-webkit-outer-spin-button,
#water-simple-calc input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}


/* 버튼 공통 */

#urea-simple-calc .calc-btn,
#urea-simple-calc #urea-recalc-btn,
#wash-simple-calc .calc-btn,
#wash-simple-calc #wash-recalc-btn,
#water-simple-calc .calc-btn,
#water-simple-calc #water-recalc-btn {
  width: 100%;
  padding: 14px 20px;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
}


/* 요소수 계산 */

#urea-simple-calc .calc-btn {
  background: var(--bdp-blue);
}

#urea-simple-calc .calc-btn:hover {
  background: var(--bdp-blue-dark);
}


/* 워셔액 계산 */

#wash-simple-calc .calc-btn {
  background: var(--bdp-green);
}

#wash-simple-calc .calc-btn:hover {
  background: var(--bdp-green-dark);
}


/* 생수 계산 */

#water-simple-calc .calc-btn {
  background: var(--bdp-sky);
}

#water-simple-calc .calc-btn:hover {
  background: var(--bdp-sky-dark);
}


/* 다시 계산 버튼 */

#urea-simple-calc #urea-recalc-btn,
#wash-simple-calc #wash-recalc-btn,
#water-simple-calc #water-recalc-btn {
  background: var(--bdp-gray);
}

#urea-simple-calc #urea-recalc-btn:hover,
#wash-simple-calc #wash-recalc-btn:hover,
#water-simple-calc #water-recalc-btn:hover {
  background: var(--bdp-gray-dark);
}


/* 버튼 클릭 */

#urea-simple-calc .calc-btn:active,
#urea-simple-calc #urea-recalc-btn:active,
#wash-simple-calc .calc-btn:active,
#wash-simple-calc #wash-recalc-btn:active,
#water-simple-calc .calc-btn:active,
#water-simple-calc #water-recalc-btn:active {
  transform: scale(0.99);
}


/* 결과 제목 */

#urea-simple-calc .res-title,
#wash-simple-calc .res-title,
#water-simple-calc .res-title {
  margin-bottom: 10px;
  color: #333333;
  font-size: 1.1em;
  font-weight: 600;
}


/* 결과 설명 */

#urea-simple-calc .res-desc,
#wash-simple-calc .res-desc,
#water-simple-calc .res-desc {
  margin-bottom: 5px;
  color: var(--bdp-muted);
  font-size: 1em;
}

#urea-simple-calc .res-desc b,
#wash-simple-calc .res-desc b,
#water-simple-calc .res-desc b {
  color: #000000;
  font-size: 1.1em;
}


/* ---------------------------------------------------------
   3-2. 통합 계산기
   --------------------------------------------------------- */

#integrated-calc {
  width: 100%;
  max-width: 500px;
  margin: 30px auto 40px;
  font-family: var(--bdp-font);
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 18px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}


/* 탭 */

#integrated-calc .calc-tabs {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

#integrated-calc .calc-tab {
  flex: 1 1 0;
  margin-bottom: -1px;
  padding: 16px 10px;
  color: #888888;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: 1.05em;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

#integrated-calc .calc-tab:not(.active):hover {
  color: #333333;
}

#integrated-calc .calc-tab.active {
  color: var(--bdp-text);
  font-weight: 700;
}

#integrated-calc .calc-tab.active.tab-urea {
  border-bottom-color: var(--bdp-blue);
}

#integrated-calc .calc-tab.active.tab-wash {
  border-bottom-color: var(--bdp-green);
}

#integrated-calc .calc-tab.active.tab-water {
  border-bottom-color: var(--bdp-sky);
}


/* 패널 */

#integrated-calc .calc-panel {
  display: none;
  padding: 26px 20px 30px;
}

#integrated-calc .calc-panel.active {
  display: block;
}

#integrated-calc .calc-panel .input-group {
  margin-bottom: 20px;
}

#integrated-calc .calc-panel label {
  display: inline-block;
  margin-bottom: 8px;
  color: #333333;
  font-size: 1.05em;
  font-weight: 600;
}


/* 숫자 입력 */

#integrated-calc .calc-panel input[type="number"] {
  width: 100%;
  padding: 12px 10px;
  color: var(--bdp-text) !important;
  background: #ffffff !important;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: 1.1em;
  -moz-appearance: textfield;
}

#integrated-calc .calc-panel input[type="number"]:hover,
#integrated-calc .calc-panel input[type="number"]:focus {
  color: var(--bdp-text) !important;
  background: #ffffff !important;
  outline: none;
}

#integrated-calc .calc-panel input::-webkit-outer-spin-button,
#integrated-calc .calc-panel input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}


/* 계산 버튼 */

#integrated-calc .calc-panel .calc-btn,
#integrated-calc .calc-panel .recalc-btn {
  width: 100%;
  padding: 14px 20px;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
}

#integrated-calc .calc-panel .calc-btn:active,
#integrated-calc .calc-panel .recalc-btn:active {
  transform: scale(0.99);
}


/* 다시 계산 */

#integrated-calc .calc-panel .recalc-btn {
  background: var(--bdp-gray);
}

#integrated-calc .calc-panel .recalc-btn:hover {
  background: var(--bdp-gray-dark);
}


/* 요소수 */

#calc-panel-urea .calc-btn {
  background: var(--bdp-blue);
}

#calc-panel-urea .calc-btn:hover {
  background: var(--bdp-blue-dark);
}


/* 워셔액 */

#calc-panel-wash .calc-btn {
  background: var(--bdp-green);
}

#calc-panel-wash .calc-btn:hover {
  background: var(--bdp-green-dark);
}


/* 생수 */

#calc-panel-water .calc-btn {
  background: var(--bdp-sky);
}

#calc-panel-water .calc-btn:hover {
  background: var(--bdp-sky-dark);
}


/* 결과 */

#integrated-calc .calc-panel .res-title {
  margin-bottom: 10px;
  color: #333333;
  font-size: 1.1em;
  font-weight: 600;
}

#integrated-calc .calc-panel .res-desc {
  margin-bottom: 5px;
  color: var(--bdp-muted);
  font-size: 1em;
}

#integrated-calc .calc-panel .res-desc b {
  color: #000000;
  font-size: 1.1em;
}


/* 결과 하이라이트 */

#calc-panel-urea .result-highlight {
  color: var(--bdp-blue);
  background: #eef7ff;
}

#calc-panel-wash .result-highlight {
  color: var(--bdp-green-dark);
  background: #e6f7f3;
}

#calc-panel-water .result-highlight {
  color: var(--bdp-sky-dark);
  background: #e6f7ff;
}

#integrated-calc .calc-panel .result-highlight {
  padding: 15px 13px 12px 16px;
  border-radius: 11px;
  text-align: left;
}

#integrated-calc .calc-panel .result-highlight .highlight-title {
  margin-bottom: 2px;
  font-size: 1.08em;
  font-weight: 700;
}

#integrated-calc .calc-panel .result-highlight .highlight-subtitle {
  margin-bottom: 5px;
  color: #377777;
  font-size: 0.96em;
}

#integrated-calc .calc-panel .result-highlight .highlight-text {
  margin: 2px 0 0;
  font-size: 1.06em;
  font-weight: 600;
  line-height: 1.5;
}


/* =========================================================
   4. CTA 버튼
   ========================================================= */

.cta-btn-mobile-only {
  display: none !important;
}

.cta-btn-desktop-only {
  display: inline-block !important;
  padding: 14px 28px;
  color: #ffffff;
  background: var(--bdp-green);
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 600;
  text-decoration: none;
  cursor: default;
}

@media (max-width: 768px) {

  .cta-btn-mobile-only {
    display: inline-block !important;
  }

  .cta-btn-desktop-only {
    display: none !important;
  }
}


/* =========================================================
   5. 제품 컴포넌트
   ========================================================= */


/* ---------------------------------------------------------
   5-1. 더녹스크린 정보 박스
   --------------------------------------------------------- */

#noxclean-info-box {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 30px;
  margin-top: 20px;
  padding: 30px;
  font-family: var(--bdp-font);
  background: #ffffff;
  border: 1px solid var(--bdp-border);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

#noxclean-info-box .product-image {
  align-self: center;
  padding: 0;
  overflow: hidden;
}

#noxclean-info-box .product-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

#noxclean-info-box .product-details {
  min-width: 0;
}

#noxclean-info-box .product-details h3 {
  margin: 0 0 15px;
  color: var(--bdp-text);
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}

#noxclean-info-box .product-details ul {
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  border-top: 2px solid #f0f0f2;
}

#noxclean-info-box .product-details li {
  margin-bottom: 10px;
  color: #444444;
  font-size: 1.05em;
  line-height: 1.6;
}

#noxclean-info-box .product-details li strong {
  display: inline-block;
  min-width: 90px;
  color: var(--bdp-text);
}

#noxclean-info-box .product-details li .price-red {
  color: var(--bdp-red) !important;
  font-weight: 700;
}


/* ---------------------------------------------------------
   5-2. 3차 제품 계산기 v2
   --------------------------------------------------------- */

.cwk-calc-v2 {
  width: 100%;
  max-width: 100%;
  margin-top: 20px;
  padding: 20px;
  font-family: var(--bdp-font);
  background: #f8f9fa;
  border: 1px solid var(--bdp-border);
  border-radius: 8px;
}

.cwk-calc-v2 .calculator-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cwk-calc-v2 .quantity-group,
.cwk-calc-v2 .price-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cwk-calc-v2 .calc-label {
  color: #333333;
  font-size: 1.1em;
  font-weight: 600;
}

.cwk-calc-v2 .controls-wrapper {
  display: flex;
  align-items: center;
}


/* 숫자 입력 */

.cwk-calc-v2 .quantity-input {
  width: 60px !important;
  height: 40px !important;
  margin: 0 -1px !important;
  padding: 0 !important;
  color: var(--bdp-text) !important;
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  border-radius: 4px;
  font-size: 1.2em;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}


/*
 * 기존 hover 색 반전을 제거.
 * 마우스 이동/포커스 후에도 숫자가 계속 보이도록 유지.
 */

.cwk-calc-v2 .quantity-input:hover,
.cwk-calc-v2 .quantity-input:focus {
  color: var(--bdp-text) !important;
  background: #ffffff !important;
  border-color: #8a8a8a !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(25, 117, 230, 0.12);
}

.cwk-calc-v2 .quantity-input::-webkit-outer-spin-button,
.cwk-calc-v2 .quantity-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}


/* +/- 버튼 */

.cwk-calc-v2 .quantity-button {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  color: #333333 !important;
  background: #f7f7f7 !important;
  border: 1px solid #cccccc !important;
  border-radius: 4px;
  font-size: 1.8em !important;
  line-height: 1 !important;
  cursor: pointer;
}

.cwk-calc-v2 .quantity-button:hover {
  background: #e9ecef !important;
}


/* 총금액 */

.cwk-calc-v2 .total-price {
  color: var(--bdp-red) !important;
  font-size: 2em;
  font-weight: 700;
}


/* ---------------------------------------------------------
   5-3. 제품 상세 스펙 이미지
   --------------------------------------------------------- */

.product-spec-image-v2 {
  width: 100%;
  max-width: 1280px;
  margin: 40px auto;
  border: 1px solid var(--bdp-border);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.product-spec-image-v2 img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---------------------------------------------------------
   5-4. 개별 메인 인트로 박스
   --------------------------------------------------------- */

#main-intro-box {
  width: 100%;
  max-width: 840px;
  margin: 28px auto 40px;
}


/* =========================================================
   6. 모바일 / 태블릿 레이아웃
   ========================================================= */


/* ---------------------------------------------------------
   6-1. 제품 컴포넌트
   800px 이하
   --------------------------------------------------------- */

@media (max-width: 800px) {

  #noxclean-info-box {
    grid-template-columns: 1fr;
  }

  .cwk-calc-v2 .calculator-inner {
    flex-direction: column;
    gap: 15px;
  }

  .cwk-calc-v2 .quantity-group {
    order: 1;
  }

  .cwk-calc-v2 .price-group {
    order: 2;
    width: 100%;
    justify-content: space-between;
  }

  .cwk-calc-v2 .total-price {
    font-size: 1.8em !important;
  }
}


/* ---------------------------------------------------------
   6-2. 일반 모바일
   768px 이하
   --------------------------------------------------------- */

@media (max-width: 768px) {

  /*
   * Gutenberg 그룹/컬럼/커버 블록에서
   * 과도한 좌우 여백 제거
   */

  .entry-content .wp-block-group,
  .entry-content .wp-block-columns,
  .entry-content .wp-block-cover {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* 계산기 프레임 좌우 정렬 */

  #bdp-calc-frame,
  #bdp-saver-calc {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #bdp-calc-frame #integrated-calc,
  #bdp-saver-calc #integrated-calc {
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* 계산기 버튼 모바일 터치 영역 */

  #integrated-calc .calc-panel .calc-btn,
  #integrated-calc .calc-panel .recalc-btn,
  #urea-simple-calc .calc-btn,
  #urea-simple-calc #urea-recalc-btn,
  #wash-simple-calc .calc-btn,
  #wash-simple-calc #wash-recalc-btn,
  #water-simple-calc .calc-btn,
  #water-simple-calc #water-recalc-btn {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    line-height: 1.35 !important;
    word-break: keep-all;
  }
}


/* ---------------------------------------------------------
   6-3. 작은 모바일
   520px 이하
   --------------------------------------------------------- */

@media (max-width: 520px) {

  /* 사이트 기본 좌우 레일 */

  .ast-container,
  .site-content .ast-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }


  /*
   * 커스텀 래퍼의 추가 좌우 padding 제거
   * 바깥 12px 레일만 사용
   */

  #bdp-cert-wrap,
  #bdp-calc-frame,
  #bdp-products,
  #bdp-cta-frame,
  #biz-info-box,
  #main-intro-box,
  .product-spec-image-v2,
  #noxclean-info-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* 푸터 가로 정렬 */

  .site-footer,
  .ast-footer-wrapper {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .site-footer .ast-container,
  .ast-small-footer,
  .ast-small-footer-section,
  .ast-footer-copyright {
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .site-footer p,
  .site-footer span,
  .site-footer div {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}


/* ---------------------------------------------------------
   6-4. 소형 모바일
   480px 이하
   --------------------------------------------------------- */

@media (max-width: 480px) {

  /* 인증서 카드 */

  #bdp-cert-wrap .cert-box {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #bdp-cert-wrap .cert-box .item {
    padding: 12px !important;
  }


  /* 제품 카드 */

  #bdp-products .grid {
    gap: 14px !important;
  }


  /*
   * 계산기 버튼 문구가 길면
   * 한국어 단어 단위로 2줄 허용
   */

  #integrated-calc .calc-btn,
  #integrated-calc .recalc-btn,
  #urea-simple-calc .calc-btn,
  #urea-simple-calc #urea-recalc-btn,
  #wash-simple-calc .calc-btn,
  #wash-simple-calc #wash-recalc-btn,
  #water-simple-calc .calc-btn,
  #water-simple-calc #water-recalc-btn {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 0.97em !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }
}


/* =========================================================
   7. 페이지 제목 / 상단 여백
   ========================================================= */


/* ---------------------------------------------------------
   7-1. 일반 Page의 테마 기본 제목 숨김
   --------------------------------------------------------- */

body.page .entry-title,
body.page h1.entry-title,
body.page .site-content .entry-title,
body.page .content-area .entry-title,
body.page .ast-container .entry-title,
body.page article .entry-title,
body.page .page-title,
body.page .ast-page-title,
body.page .ast-article-single .entry-title,
body.page .ast-single-post .entry-title {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}


/* ---------------------------------------------------------
   7-2. 제목 래퍼 잔여 공간 제거
   --------------------------------------------------------- */

body.page .entry-header,
body.page .page-header,
body.page .ast-page-header-wrap,
body.page .ast-page-builder-template .entry-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ---------------------------------------------------------
   7-3. HOME 제목 중복 방지
   --------------------------------------------------------- */

body.home .entry-title,
body.home h1.entry-title,
body.home .page-title,
body.home .entry-header {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   7-4. Astra 제목 영역 잔여 여백 제거
   --------------------------------------------------------- */

body.page .site-content > article > .entry-header,
body.page .content-area .primary,
body.page .content-area article .entry-header {
  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   7-5. 본문 상단 큰 공백 제거
   --------------------------------------------------------- */

body.page .site-main > article,
body.page .ast-container > .site-main,
body.page .entry-content {
  margin-top: 0 !important;
}


/* =========================================================
   8. 모바일 고정 CTA
   ========================================================= */

@media (max-width: 768px) {

  /*
   * 모바일 하단 CTA가 있는 페이지에서
   * 본문 마지막 콘텐츠가 가려지지 않도록 공간 확보
   */

  body:has(.mobile-sticky-cta) {
    padding-bottom:
      calc(104px + env(safe-area-inset-bottom)) !important;
  }
  /* 직접 만든 모바일 고정 CTA */

  .mobile-sticky-cta {
    z-index: 99990 !important;
  }
}


/* =========================================================
   9. 푸터
   ========================================================= */


/* ---------------------------------------------------------
   9-1. 전체 줄간격
   --------------------------------------------------------- */

body footer,
body .site-footer,
body #colophon,
body .ast-footer-html,
body .ast-builder-footer-grid-columns {
  line-height: 1.6;
}


/* ---------------------------------------------------------
   9-2. 문단 여백
   --------------------------------------------------------- */

body footer p,
body .site-footer p,
body #colophon p,
body .ast-footer-html p {
  margin-top: 0;
  margin-bottom: 6px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.6;
}


/* ---------------------------------------------------------
   9-3. 빈 문단 제거
   --------------------------------------------------------- */

body footer p:empty,
body .site-footer p:empty,
body #colophon p:empty,
body .ast-footer-html p:empty {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}


/* ---------------------------------------------------------
   9-4. 구분선 여백 축소
   --------------------------------------------------------- */

body footer hr,
body .site-footer hr,
body #colophon hr,
body .ast-footer-html hr {
  height: 1px;
  margin-top: 10px;
  margin-bottom: 10px;
}


/* ---------------------------------------------------------
   9-5. 불필요한 spacer 제거
   --------------------------------------------------------- */

body footer .wp-block-spacer,
body .site-footer .wp-block-spacer,
body #colophon .wp-block-spacer {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
}


/* ---------------------------------------------------------
   9-6. 푸터 상하 여백
   --------------------------------------------------------- */

body .site-footer,
body #colophon {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* =========================================================
   10. AI 상담 런처 × 모바일 sticky CTA 충돌 방지 (2026-08-19)
   - sticky CTA가 있는 페이지에서만 런처를 CTA 위로 올린다
   --------------------------------------------------------- */
@media (max-width: 720px) {
  body:has(.mobile-sticky-cta) .bdp-ai__launcher {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}


/* --------------------------------------------------------- */
/*   10. HEADER MENU + FOOTER NAV  (v3 / 2026-08-20)           */
/* --------------------------------------------------------- */

/* 10-1. FOOTER INNER RAIL: match homepage CTA container */
.site-footer .site-above-footer-inner-wrap,
.site-footer .site-primary-footer-inner-wrap,
#colophon .site-above-footer-inner-wrap,
#colophon .site-primary-footer-inner-wrap {
  width: min(1180px, calc(100vw - 40px));
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.site-footer .ast-footer-copyright.site-footer-focus-item,
#colophon .ast-footer-copyright.site-footer-focus-item {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.site-footer .ast-footer-copyright.site-footer-focus-item > .ast-footer-copyright,
#colophon .ast-footer-copyright.site-footer-focus-item > .ast-footer-copyright {
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.site-footer .footer-nav-wrap,
#colophon .footer-nav-wrap {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 921px) {
  .site-footer .site-above-footer-inner-wrap,
  .site-footer .site-primary-footer-inner-wrap,
  #colophon .site-above-footer-inner-wrap,
  #colophon .site-primary-footer-inner-wrap {
    width: min(1180px, calc(100vw - 28px));
    max-width: 1180px;
  }

  .site-footer .ast-footer-copyright,
  #colophon .ast-footer-copyright {
    text-align: left;
  }
}
.site-footer .footer-nav-wrap ul,
#colophon .footer-nav-wrap ul {
  align-items: center;
  gap: 4px 24px;
}
.site-footer .footer-nav-wrap .menu-link,
#colophon .footer-nav-wrap .menu-link {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.65;
  transition: color .18s ease;
}
.site-footer .footer-nav-wrap .menu-link:hover,
#colophon .footer-nav-wrap .menu-link:hover {
  color: #72dcff;
}

/* footer menu: beat #astra-footer-menu id rule, no important */
#astra-footer-menu .menu-item > .menu-link {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
}
#astra-footer-menu .menu-item > .menu-link:hover,
#astra-footer-menu .menu-item > .menu-link:focus {
  color: #72dcff;
}

@media (max-width: 768px) {
  .site-footer .footer-nav-wrap,
  #colophon .footer-nav-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .site-footer .footer-nav-wrap ul,
  #colophon .footer-nav-wrap ul {
    display: block;
    gap: 0;
  }
  .site-footer .footer-nav-wrap li,
  #colophon .footer-nav-wrap li {
    display: block;
    width: 100%;
  }
  .site-footer .footer-nav-wrap .menu-link,
  #colophon .footer-nav-wrap .menu-link {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 10px 0;
    line-height: 1.7;
  }
}

/* 10-2. HEADER PRIMARY MENU (desktop) */
#ast-hf-menu-1 > li > .menu-link {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: keep-all;
  padding: 0 15px;
  transition: color .18s ease;
}
#ast-hf-menu-1 > li > .menu-link:hover,
#ast-hf-menu-1 > li > .menu-link:focus {
  color: #72dcff;
}
#ast-hf-menu-1 > li.current-menu-item > .menu-link,
#ast-hf-menu-1 > li.current_page_item > .menu-link,
#ast-hf-menu-1 > li.current-menu-ancestor > .menu-link {
  font-weight: 800;
}
#ast-hf-menu-1 > li {
  position: relative;
}
#ast-hf-menu-1 > li.current-menu-item::after,
#ast-hf-menu-1 > li.current_page_item::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;
  height: 2px;
  border-radius: 2px;
  background-color: #72dcff;
}

@media (max-width: 1200px) and (min-width: 1025px) {
  #ast-hf-menu-1 > li > .menu-link {
    font-size: 15px;
    padding: 0 11px;
  }
  #ast-hf-menu-1 > li.current-menu-item::after,
  #ast-hf-menu-1 > li.current_page_item::after {
    left: 11px;
    right: 11px;
  }
}

/* 10-3. MOBILE / TABLET TOGGLE BUTTON */
.ast-primary-header-bar .menu-toggle.main-header-menu-toggle {
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.10);
  transition: background-color .18s ease;
}
.ast-primary-header-bar .menu-toggle.main-header-menu-toggle:hover {
  background-color: rgba(114, 220, 255, 0.20);
}

/* 10-4. OFF-CANVAS (TOGGLE) MENU */
#ast-mobile-popup .ast-mobile-popup-inner {
  background-color: #071d36;
}
#ast-mobile-popup .ast-mobile-popup-header {
  background-color: #071d36;
  min-height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
#ast-mobile-popup .menu-toggle-close {
  color: #ffffff;
}
#ast-mobile-popup .ast-mobile-popup-content {
  background-color: #071d36;
}
#ast-mobile-popup #ast-hf-mobile-menu {
  background-color: transparent;
}
#ast-mobile-popup #ast-hf-mobile-menu > li > .menu-link {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  min-height: 52px;
  padding: 0 20px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
#ast-mobile-popup #ast-hf-mobile-menu > li:last-child > .menu-link {
  border-bottom: 0;
}
#ast-mobile-popup #ast-hf-mobile-menu > li.current-menu-item > .menu-link,
#ast-mobile-popup #ast-hf-mobile-menu > li.current_page_item > .menu-link {
  background-color: rgba(114, 220, 255, 0.10);
  box-shadow: inset 3px 0 0 0 #72dcff;
  font-weight: 800;
}


/* --------------------------------------------------------- */
/*   11. CONTENT / FOOTER GAP  (v2 / 2026-08-20)               */
/*   본문 마지막 섹션과 푸터 사이 간격을 전 페이지 12px로 통일  */
/* --------------------------------------------------------- */

body.page .site-content #primary,
body.page .site-content .content-area {
  margin-bottom: 12px;
}

/* 11-1. FOOTER GAP override for pages with full-bleed remodel blocks (margin:0!important) */
body:has(#bd-gov-water-page).page #primary,
body:has(#bd-gov-water-page).page .content-area,
body:has(#bdp-frozen-water-page).page #primary,
body:has(#bdp-frozen-water-page).page .content-area {
  margin-bottom: 12px !important;
}


/* 10-3. Prevent full-bleed section from creating horizontal page scroll */
html {
  overflow-x: hidden;
}