/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* 상단 섹션 헤더(아카이브와 동일 톤) */
.section-hero{
  display:flex;                 /* 아이콘 + 텍스트 수평 정렬 */
  align-items:center;           /* 수직 정렬: 중앙 */
  gap:14px;                     /* 아이콘-텍스트 간격 */
  padding:16px 0 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
  margin:10px 0 24px;
}

.section-hero__title{
  /* 아카이브 H1 크기와 유사치 — 필요 시 테마 값에 맞게 조정 */
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  font-size:clamp(28px, 3.2vw, 42px);
  margin:0;
}

/* 육각형 아이콘: SVG 데이터 URL + background-image 사용 */
.section-hero__hex{
  width:36px; height:36px; flex:0 0 36px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* 색상은 currentColor를 쓰는 SVG로 테마 색상 상속 */
  color:#000;                   /* 필요 시 테마 포인트 컬러로 변경 */
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='currentColor' d='M25 7.5L75 7.5L97.5 50L75 92.5L25 92.5L2.5 50Z'/%3E%3C/svg%3E");
  /* 배경/데이터URL 참고: MDN data: URL, background-image, SVG 스케일 가이드 */
}
/* 다크 헤더 대비 필요 시 */
.site-header + .site-main .section-hero__hex{ color:#111; }

/* 반응형 보정 */
@media (min-width: 1024px){
  .section-hero{ gap:16px; padding:20px 0 14px; margin-bottom:28px; }
  .section-hero__hex{ width:40px; height:40px; flex-basis:40px; }
}
.section-hero{display:flex;align-items:center;gap:14px;padding:16px 0 12px;border-bottom:1px solid rgba(0,0,0,.08);margin:10px 0 24px;}
.section-hero__title{font-weight:800;line-height:1.1;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,42px);margin:0;}
.section-hero__hex{width:36px;height:36px;flex:0 0 36px;background-repeat:no-repeat;background-position:center;background-size:contain;color:#000;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='currentColor' d='M25 7.5L75 7.5L97.5 50L75 92.5L25 92.5L2.5 50Z'/%3E%3C/svg%3E");
}
@media (min-width:1024px){.section-hero{gap:16px;padding:20px 0 14px;margin-bottom:28px}.section-hero__hex{width:40px;height:40px;flex-basis:40px}}

/* 단일 비디오 화면에서만 적용 */
body.single-aiovg_videos .section-hero{
  /* 위로 붙이기 */
  margin-top: 0;
  padding-top: 0;
  /* 라인 제거 */
  border-bottom: none !important;
}

/* H1 자체 여백 최소화 */
body.single-aiovg_videos .section-hero__title{ margin: 0; }

/* Astra 컨테이너의 상단 패딩/마진이 있는 경우 추가로 제거 */
body.single-aiovg_videos.ast-separate-container #primary{ padding-top: 0; }
body.single-aiovg_videos .site-main{ padding-top: 0; }
body.single-aiovg_videos .site-main > *:first-child{ margin-top: 0; }

/* 필요 시 한 칸 더 끌어올림(미세조정) — 값만 조정 */
@media (min-width: 921px){
  body.single-aiovg_videos .section-hero{ margin-top: -12px; } /* -4 ~ -12px 내에서 조정 */
}

/* 단일 비디오에서만 적용(선택) */
body.single-aiovg_videos .section-hero__hex{
  width:40px; height:40px; flex:0 0 40px;
  background-image:url('https://debbehirata.com/staging2/wp-content/uploads/2025/08/Page-Title-Hexagon-70-41x48px.png'); /* ← 업로드 URL로 교체 */
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain; /* 이미지 비율 유지 */
}
/* 단일 비디오 페이지에만 적용 */
body.single-aiovg_videos .section-hero{
  /* 섹션 전체 바깥 여백(위/아래) 조정 */
  margin: 4px 0 20px;   /* ↑값만 조정해서 위로/아래로 붙이기 */
  padding: 0;           /* 섹션 안쪽 여백 불필요 시 0 */
  gap: 14px;            /* 아이콘-텍스트 사이 간격(부모 flex 간격) */
}

body.single-aiovg_videos .section-hero__hex{
  /* 아이콘 크기 */
  width: 40px; height: 40px;          /* 크기 변경 포인트 */
  flex: 0 0 40px;                      /* flex 항목 고정폭 */
  background-size: contain;            /* 비율 유지로 맞춤 */
  background-position: center;         /* 중앙 정렬 */
  background-repeat: no-repeat;
  display: inline-block;
}

/* 반응형(예시 값) */
@media (max-width: 767px){
  body.single-aiovg_videos .section-hero{ gap: 10px; margin: 0 0 16px; }
  body.single-aiovg_videos .section-hero__hex{ width: 28px; height: 28px; flex-basis: 28px; }
}
@media (min-width: 1024px){
  body.single-aiovg_videos .section-hero__hex{ width: 48px; height: 48px; flex-basis: 48px; }
}

/* 단일 비디오 화면 전용: 컨테이너 상단 여백 제거 */
body.single-aiovg_videos.ast-separate-container #primary,
body.single-aiovg_videos.ast-plain-container #primary{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 섹션 자체를 한 칸 더 끌어올리고 싶을 때(미세 조정) */
body.single-aiovg_videos .section-hero{ margin-top: -8px; } /* -4 ~ -16px 범위에서 조정 */

/* 제목과 아이콘 아래 라인이 다시 생기지 않도록 */
body.single-aiovg_videos .section-hero{ border-bottom: none !important; }

/* (선택) 첫 자식 마진이 부모로 전파되는 ‘마진 겹침’ 방지 */
body.single-aiovg_videos .site-main{ padding-top: 1px; }
body.single-aiovg_videos .section-hero{ margin-top: -9px; } /* 위 1px 보정 */


/* 컨테이너 상단에 패딩으로 간격 생성 */
body.single-aiovg_videos #primary{ padding-top: 20px; }

/* 섹션 자체 여백(필요 시 미세 조정) */
body.single-aiovg_videos .section-hero{ margin-top: 12px; }

/* 마진 겹침 방지용(첫 요소 마진이 부모로 흡수되는 현상 대비) */
body.single-aiovg_videos .site-main{ padding-top: 1px; }  /* MDN: 패딩/보더가 있으면 마진 겹침 방지 */

/* 단일 비디오: 헤더와 섹션 사이 여유 확보 */
body.single-aiovg_videos.ast-separate-container #primary,
body.single-aiovg_videos.ast-plain-container #primary{
  padding-top: 26px !important;   /* ← 원하는 간격 (예: 16~32px) */
  padding-left: 8px !important;
  margin-top: 0 !important;
}

/* 섹션 자체는 위로 당기지 않음 + 하단 라인 제거 */
body.single-aiovg_videos .section-hero{
  margin-top: 0 !important;       /* 음수 마진 사용 금지 */
  border-bottom: none !important;
}

/* (선택) 마진 겹침 방지용 보호 패딩 — 필요시 유지 */
body.single-aiovg_videos .site-main{ padding-top: 1px; }

body.single-aiovg_videos .section-hero__title{
  letter-spacing: 0em;
  font-kerning: normal; /* 폰트 커닝 사용으로 시각적 균형 보완 */
}

/* 2) 아이콘 오른쪽만 개별 축소(갭은 유지) */
body.single-aiovg_videos .section-hero__hex{
  margin-inline-end: -2px;      /* 또는 margin-inline-end: 6px; */
  padding-right: 0;       /* 배경아이콘이면 보통 0 유지 */
}

/* 단일 비디오 전용, 2~6px 정도 확대 예시 */
body.single-aiovg_videos .section-hero__hex{
  width: 41px;              /* 요소 박스 가로 크기 */
  height: 48px;             /* 요소 박스 세로 크기 */
  flex-basis: 44px;         /* 플렉스 항목 기본 크기 */
  background-size: contain; /* 비율 유지로 박스에 맞춤 */
}



/* ========== Desktop (≥1024px) ========== */
@media (min-width:1024px){
  body.single-aiovg_videos #primary{ padding-top:16px; }
  body.single-aiovg_videos .section-hero{ gap:16px; margin-top:8px; }
  body.single-aiovg_videos .section-hero__hex{
    width:41px; height:48px; flex-basis:44px;
  }
  body.single-aiovg_videos .section-hero__title{
    /* 데스크톱에서 유동 타이포(최소~이상적~최대) */
    font-size: clamp(45px, 3.2vw, 42px);
    letter-spacing:0em;
  }
}

/* ========== Mobile (≤767px) 전용 ========== */
@media (max-width: 767px){

  /* 1) 헤더와의 간격(세로) — 부모 컨테이너 상단 패딩으로 안전하게 띄움 */
  body.single-aiovg_videos #primary{
    padding-top: 10px;   /* ↑ 원하는 값(예: 10~24px) */
  }

  /* 2) 블록 자체 미세 이동(세로) — 1~6px 범위 권장 */
  body.single-aiovg_videos .section-hero{
    /* margin-top: -10px;              ← 마진 겹침 이슈가 있으면 대신 transform 사용 */
    transform: translate(-10px, -10px);          /* 위로 2px 끌어올림(양수면 아래로) */
  }

  /* 3) 가로 정렬(왼쪽/가운데/오른쪽 중 택1) */
  /* 왼쪽 정렬(기본) */
  body.single-aiovg_videos .section-hero{ justify-content: flex-start; } /* 기본값 */
  /* 가운데 정렬이 필요하면 아래 줄만 활성화 */
  /* body.single-aiovg_videos .section-hero{ justify-content: center; } */
  /* 오른쪽 정렬이 필요하면 */
  /* body.single-aiovg_videos .section-hero{ justify-content: flex-end; } */

  /* 4) 아이콘·텍스트 사이 간격(가로) */
  body.single-aiovg_videos .section-hero{ gap: 8px; } /* 기존보다 좁히거나 넓힘 */

  /* 5) 아이콘/타이틀 크기와 라인 제거(참고) */
  body.single-aiovg_videos .section-hero__hex{
    width: 24px; height: 24px; flex-basis: 30px; background-size: contain;
  }
  body.single-aiovg_videos .section-hero__title{
    font-size: 30px; letter-spacing: 0em; line-height: 1.1; margin: 0;
  }
  body.single-aiovg_videos .section-hero{ border-bottom: none; }
}

/* 간격을 확 줄이기: 섹션 아래·제목 위 여백 최소화 */
body.single-aiovg_videos .section-hero{ margin-bottom: 6px; }          /* ← 0~10px 내에서 조정 */
body.single-aiovg_videos .entry-header{ margin-top: -8px; }              /* 제목 래퍼 상단 여백 축소 */
body.single-aiovg_videos .entry-header .entry-title{
  margin-block-start: 2px;   /* 논리속성: 쓰기 방향과 무관하게 '윗쪽' 여백 */
  margin-top: 2px;           /* 물리속성(폴백) */
}

/* (옵션) 다른 규칙이 덮어쓰면 강제 적용 */
@media (min-width:0){
  body.single-aiovg_videos .section-hero,
  body.single-aiovg_videos .entry-header,
  body.single-aiovg_videos .entry-header .entry-title{ /* 필요 시 !important 사용 */
    /* margin-bottom:6px !important; margin-top:4px !important; */
  }
}

/* (예외 처리) 마진 겹침 때문에 간격이 줄지 않을 때 */
body.single-aiovg_videos .site-main{ padding-top: 1px; } /* 마진 겹침 방지용 얇은 패딩 */