@charset "UTF-8";
@import url("./font/font.css");
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --color-primary: #0471e9;
}
html {
  font-size: 16px;
  line-height: 24px;
  font-family: "Pretendard", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
body {
  display: block;
  position: relative;
  word-break: keep-all;
  padding-top: 0px !important;
  top: 0px !important;
  margin: 0 auto;
  max-width: 1024px;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
img {
  max-width: 100%;
  max-height: 100%;
}
input,
button,
select,
textarea {
  border: none;
  outline: none;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
}
form,
label {
  display: block;
  width: 100%;
}
/* 헤더 */
.header {
  /* 폰트 한번더 첨부하기 */
  width: 100%;
  z-index: 999;
  height: 64px;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0 0 5px #00000033;
}
.header:has(.type2) {
  height: 80px;
}
/* .header:has(.header-ad){
  height: 114px;
}
.header-ad{
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
} */
.header-wrap {
  width: 100%;
  height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.site-def .header:has(.type1) .header-wrap {
  padding-left: 20px;
  justify-content: start;
}
.header-wrap.type1 > h1 {
  font-family: Paperlogy;
  font-weight: 700;
  font-size: 23px;
  line-height: 28px;
  letter-spacing: -2%;
  text-align: center;
}
.site-def .header-wrap.type1 > h1 {
  font-family: "YeogiOttaeJalnanGothic";
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -2%;
}
.header-wrap.type2 {
  height: 80px;
}
.header-wrap.type2 > .header-link {
  display: flex;
  align-items: center;
  height: 100%;
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -1%;
  text-align: center;
}
.header-back {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}
.header-back > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.header-back > a > img {
  width: 100%;
  height: 100%;
}
.mt20 {
  margin-top: 20px !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
/* main */
.main {
  margin-top: 64px;
  padding-bottom: 20px;
}
.header:has(.type2) ~ .main {
  margin-top: 80px;
}
.main:has(.detail-footer) {
  padding-bottom: 180px;
}
.main-bg {
  background: linear-gradient(180deg, #e4ecff 0%, #ffffff 100%);
  margin-top: 64px !important;
}

/* ==========================================
   광고 영역 기본 설정
   - 고정 height / max-height 제거 → 광고가 잘리지 않도록
   - min-height만 둬서 광고 로딩 전 자리 확보 (레이아웃 밀림(CLS) 방지)
   ========================================== */
.ad {
  width: 100%;
  min-height: 100px;              /* $ad_banner(100px) 기준으로 자리 확보 */
  background-color: transparent;

  /* 가로·세로 중앙 정렬 */
  display: flex;
  justify-content: center;        /* 가로 중앙 */
  align-items: center;            /* 세로 중앙 */

  /* ※ overflow: hidden 제거 → 광고가 잘리면 정책 위반 소지가 있음 */
}

/* 작은 광고 영역 ($ad_banner_50 사용) */
.ad.mini {
  min-height: 50px;               /* ins 높이(50px)와 맞춤, 고정 height는 쓰지 않음 */
}

/* 큰 광고 영역 ($ad_banner_100 → 실제 300px 사용) */
.ad.big {
  min-height: 300px;              /* ins 높이(300px)와 맞춤 */
}

/* 내부 구글 ins 태그 */
.ad ins.adsbygoogle {
  display: block !important;
  width: 100% !important;         /* flex 안에서도 가로폭을 확실히 잡아줌 (폭 0 오류 방지) */
}

/* ==========================================
   미송출(unfilled) 처리
   ========================================== */
/* 광고가 안 채워지면 ins 자체를 숨김 */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* 광고가 안 채워지면 감싸는 영역까지 숨김 (빈 공간 제거) */
.ad:has(ins[data-ad-status="unfilled"]),
.header-ad:has(ins[data-ad-status="unfilled"]) {
  display: none !important;
}

/* ==========================================
   2버전: 본문 중간 광고는 big만 노출
   ========================================== */
.site-def .detail-text .ad {
  display: none;
}
.site-def .detail-text .ad.big {
  display: flex !important;       /* block 대신 flex 유지 → 중앙 정렬 그대로 적용 */
}