/* 1️⃣ 사이트 전체 배경을 검정으로 */
html,
body,
.site,
.site-content,
.ast-separate-container,
.ast-container {
  background-color: #000000 !important;
}

/* 2️⃣ 상단 헤더(로고 + 제목 + 메뉴) 바 전체를 검정으로 */
header#masthead,
.site-header,
.ast-primary-header-bar,
.ast-main-header-bar,
.main-header-bar,
.main-header-bar-wrap {
  background-color: #000000 !important;
}

/* 3️⃣ 메뉴 영역(오른쪽 하얀 직사각형) 배경을 투명하게 */
.main-header-menu,
.main-header-bar-navigation,
.ast-builder-menu,
.ast-builder-menu .main-header-menu,
.ast-builder-menu .main-header-menu ul {
  background-color: transparent !important;
}

/* 4️⃣ 메뉴 글자색을 흰색으로 고정 */
.main-header-menu > li > a,
.ast-builder-menu .main-header-menu > li > a {
  color: #ffffff !important;
}

/* 5️⃣ 호버 시 살짝 회색 */
.main-header-menu > li > a:hover,
.ast-builder-menu .main-header-menu > li > a:hover {
  color: #d0d0d0 !important;
}


/* 📱 모바일에서 메뉴 아래 본문과의 간격 벌리기 */
@media (max-width: 768px) {

  /* 사이트 전체 컨텐츠 위쪽에 여백 추가 */
  .site-content,
  .ast-container,
  .site-main {
    padding-top: 8px !important;   /* 여백이 더 필요하면 24~32px 정도로 바꿔도 돼 */
  }

  /* 개별 페이지 글 내용 바로 위 여백도 살짝 더 */
  .entry-header,
  .entry-content {
    margin-top: 10px !important;
  }
}


/* 갤러리 이미지 하단의 뿌연 그라데이션/오버레이 제거 */
.wp-block-gallery .blocks-gallery-item::before,
.wp-block-image::before,
figure.wp-block-image::before {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* 로고(사이트 상단 이미지)에 붙어있는 흰 배경 없애기 */
.custom-logo,
.site-logo img,
.site-branding img,
header#masthead img.custom-logo {
  background-color: transparent !important;
}

/* 혹시 로고 감싸는 링크에 흰 배경이 있다면 같이 제거 */
.custom-logo-link,
.site-branding .custom-logo-link {
  background-color: transparent !important;
}

/* Contact Form 7 입력 텍스트 색 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    color: #ffffff !important;       /* 입력한 글자 */
    background-color: #000000 !important; /* 배경 검정 */
    border: 1px solid #555 !important;
}

/* placeholder(예: 이름, 전화번호…) 글자 색 */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #bbbbbb !important;
}

/* 라벨(label) 텍스트 색 */
.wpcf7-form label {
    color: #ffffff !important;
}

/* 📏 Contact Form 7 입력칸 너비 줄이기 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    max-width: 350px;       /* 입력칸 최대 너비 (원하는 크기로 조절 가능) */
    width: 100%;            /* 모바일에서는 화면에 맞게 자동 줄어듦 */
    padding: 10px 12px;     /* 안쪽 여백 (조절 가능) */
    margin-bottom: 12px;    /* 입력칸 간 간격 */
    box-sizing: border-box; /* padding 포함 계산 */
}

/* 📍 입력칸 전체를 중앙 정렬하고 싶다면 */
.wpcf7-form p {
    text-align:left;
}

/* 📱 모바일에서 영상이 화면을 넘지 않도록 반응형으로 만들기 */
@media (max-width: 768px) {

  /* 본문 안의 유튜브/비디오/임베드 요소들 */
  .entry-content iframe,
  .entry-content video,
  .entry-content .wp-block-embed__wrapper iframe,
  .entry-content .wp-block-embed__wrapper video {
    width: 100% !important;       /* 화면 너비에 딱 맞게 */
    max-width: 100% !important;
    height: auto !important;      /* 비율에 맞춰 자동 높이 */
    display: block;
  }

  /* 혹시 부모 박스가 넘치게 잡혀 있을 때 대비해서 */
  .entry-content,
  .ast-container {
    overflow-x: hidden;
  }
}

/* 1️⃣ 헤더는 화면 상단에 고정 */
header#masthead,
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    margin: 0 !important;
}

/* 2️⃣ 본문은 헤더 높이만큼 아래에서 시작하도록 조정 */
.site-content {
    padding-top: 80px !important;  /* 헤더 높이에 딱 맞게 — 필요하면 70~90px로 조절 */
}

/* 3️⃣ ast-container 에는 padding 주지 않음 (중복 방지) */
.ast-container {
    padding-top: 0 !important;
}

/* 📱 모바일에서 갤러리를 한 장씩 수직(1열)으로 표시 */
@media (max-width: 768px) {

  /* 갤러리 컨테이너 */
  .wp-block-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;          /* 이미지 사이 간격 */
  }

  /* 갤러리 아이템들을 한 줄에 하나씩 */
  .wp-block-gallery .blocks-gallery-item,
  .wp-block-gallery.columns-2 .blocks-gallery-item,
  .wp-block-gallery.columns-3 .blocks-gallery-item,
  .wp-block-gallery.columns-4 .blocks-gallery-item,
  .wp-block-gallery figure.wp-block-image,
  .wp-block-gallery.has-nested-images figure.wp-block-image {
    width: 100% !important;
    flex: 0 0 100% !important;     /* 100% 폭 → 1열 */
    margin: 0 !important;
  }
 
}

/* 🌍 모든 기기에서 갤러리 이미지 세로 높이 일정하게 만들기 */

/* 겉 박스(갤러리 아이템)의 높이를 통일 */
.entry-content .wp-block-gallery .blocks-gallery-item,
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
  height: 350px !important;        /* ★ 원하는 세로 높이 (150~220px 정도로 조절) */
  overflow: hidden !important;
}

/* 📱 모바일 폰트 전체 축소 */
@media (max-width: 768px) {
  body {
    font-size: 14px !important;   /* 기본 텍스트 크기 (추천: 13~15px) */
    line-height: 1.6 !important;
  }
}

/* 📱 모바일 전체 폰트 강제 축소 (Astra 기본값까지 전부 덮기) */
@media (max-width: 768px) {

  /* 기본 텍스트들 */
  html,
  body,
  .site,
  .site-content,
  .entry-content,
  .entry-content p,
  .entry-content li {
    font-size: 14px !important;      /* 본문 기준 크기 */
    line-height: 1.6 !important;
  }

  /* 제목 계열 */
  h1, .entry-content h1 { font-size: 24px !important; }
  h2, .entry-content h2 { font-size: 20px !important; }
  h3, .entry-content h3 { font-size: 18px !important; }
  h4, .entry-content h4 { font-size: 16px !important; }

  /* 모바일 메뉴 텍스트 (Astra 전용 셀렉터까지 포함) */
  .ast-header-break-point .main-header-menu .menu-link,
  .ast-header-break-point .main-header-menu > li > a,
  .ast-header-break-point .ast-mobile-header-wrap .main-header-menu a {
    font-size: 14px !important;
  }

  /* 갤러리 캡션도 같이 축소 */
  .wp-block-gallery figcaption,
  .wp-block-image figcaption {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* 버튼/폼 텍스트 */
  .wp-block-button__link,
  button,
  input,
  textarea,
  .wpcf7-form label {
    font-size: 14px !important;
  }
}

.live-sketch-form {
  max-width: 520px;
  margin: 60px auto;
  padding: 32px 28px;
  background: #333333;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.live-sketch-form h3 {
  margin-bottom: 12px;
  font-size: 22px;
}

.live-sketch-form p {
  margin-bottom: 18px;
}

.live-sketch-form label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.live-sketch-form input[type="text"],
.live-sketch-form textarea {
  width: 100%;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 15px;
}

.live-sketch-form textarea {
  min-height: 90px;
}

.live-sketch-form input[type="file"] {
  margin-top: 6px;
}

.live-sketch-form .wpcf7-list-item {
  margin-right: 12px;
}

.live-sketch-form input[type="submit"] {
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  background: #1f6fff;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

.live-sketch-form input[type="submit"]:hover {
  background: #1558d6;
}