@charset "UTF-8";
/* ============================================================
   popup.css — HD 팝업 스타일 (PC / 반응형)
   ------------------------------------------------------------
   ★ 팝업 전용 독립 파일. header.css 등 공용 CSS 와 분리돼 있어
     사이트↔마스터 머지 시 충돌이 나지 않습니다.
   ★ bbs/newwin.inc.php 가 본문 최후반에서 <link> 로 불러오므로
     항상 다른 스타일보다 "뒤"에 적용됩니다(= 우선순위 최상위).
   ★ 팝업 높이(관리자 설정)는 #hd_pop 인라인 --hd-popup-height 로 전달.
   구성 : [1] 베이스(컨테이너/카드/footer/버튼/반응형)
          [2] 레이아웃 메커닉(나열식 grid / 슬라이더 / 유튜브 facade)
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   [1] 베이스
   ───────────────────────────────────────────────────────── */
/* ★ 닫기 버튼 잘림 방지 — 사이트 전역 box-sizing 이 content-box/unset 이어도
   팝업 내부는 항상 border-box 로 고정. (태평 header.css 상단 주석: 전역 box-sizing 이
   border-box→unset 으로 뒤집히던 이슈 대응) padding 이 width 에 더해져 footer 의
   '닫기' 버튼이 카드 밖으로 넘쳐 잘리던 문제를 근본 차단한다. 분리파일이므로 자체 고정. */
#hd_pop, #hd_pop * { box-sizing: border-box; }

/* 컨테이너: 클릭 투과 + 화면 기준 좌표계만 제공(높이 0). 위치는 자식이 결정 */
#hd_pop {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1000;
}

/* 개별 팝업: PC는 인라인 style(관리자 좌표)대로 배치, 모바일만 중앙(아래 미디어쿼리) */
.hd_pops {
  pointer-events: auto;
  touch-action: pan-y pinch-zoom;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f7f7;
  min-width: 300px;
}

.hd_pops img {
  width: 100%;
  display: block;
}

.hd_pops_con {
  width: 100% !important;
  height: auto !important;
}

#hd_pop > div > div > iframe {
  height: 100%;
}

/* 팝업 footer (닫기 버튼 영역)
   #hd_pop 프리픽스로 특이도 확보 → default.css 의 .hd_pops_reject(검정)·.hd_pops_close(absolute) 무력화 */
#hd_pop .hd_pops_footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: #f7f7f7;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-family: 'Pretendard Variable';
}

/* default.css 의 clearfix(:after) 제거 — flex 에선 빈 공간만 차지 */
#hd_pop .hd_pops_footer::after { display: none; }

/* 버튼 너비 고정 → 팝업이 넓어져도 버튼은 안 늘어나고 가운데 모임 */
#hd_pop .hd_pops_footer button {
  flex: 0 0 auto;
  width: 130px;
  position: relative;
  top: auto;
  right: auto;
  padding: 10px 4px;
  border: 0;
  border-radius: 7px;
  background: #ececec;
  color: #777;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: -0.4px;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#hd_pop .hd_pops_footer button:hover {
  background: #e2e2e2;
  color: #333;
}

#hd_pop .hd_pops_footer .hd_pops_reject strong,
#hd_pop .hd_pops_footer .hd_slider_reject strong {
  font-weight: 600;
  color: #555;
}

/* 오른쪽 '닫기' 버튼만 강조 */
#hd_pop .hd_pops_footer .hd_pops_close:last-child,
#hd_pop .hd_pops_footer .hd_slider_closeall {
  color: #fff;
  background: #3a3a3a;
}

#hd_pop .hd_pops_footer .hd_pops_close:last-child:hover,
#hd_pop .hd_pops_footer .hd_slider_closeall:hover {
  background: #1a1a1a;
}

/* 반응형 - 태블릿: 관리자 좌표 무시하고 무조건 화면 가로 중앙 + 화면 고정 */
@media screen and (max-width: 1023px) {
  #hd_pop {
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
  }

  .hd_pops {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85% !important;
    max-width: 560px;
    min-width: 0;
    margin: 0 !important;
  }
  /* TOP=0(헤더아래) 팝업은 JS top 유지, 그 외만 상단 3% */
  .hd_pops:not(.hd_below_header) { top: 3% !important; }

  #hd_pop .hd_pops_footer button {
    flex: 1;
    width: auto;
    max-width: 46%;
    font-size: 2.6vw !important;
    padding: 2.2vw 1vw !important;
  }
}

/* 반응형 - 모바일 */
@media screen and (max-width: 599px) {
  .hd_pops { width: 90% !important; }
  .hd_pops:not(.hd_below_header) { top: 5% !important; }
  #hd_pop .hd_pops_footer button { font-size: 3.6vw !important; padding: 3.4vw 1vw !important; }
}

/* ─────────────────────────────────────────────────────────
   [2] 레이아웃 메커닉 (나열식 grid / 슬라이더 / 유튜브 facade)
   ───────────────────────────────────────────────────────── */
/*
 * JS가 늦게 실행되거나 실패해도 팝업이 하단 상담 바를 침범하지 않도록 하는 안전 높이.
 * 실제 높이는 JS(hdFitPopupViewport)가 visualViewport 기준으로 다시 정확히 덮어쓴다.
 */
#hd_pop {
  --hd-contact-height: calc(var(--px, 1px) * 76);
  --hd-header-safe-height: calc(var(--px, 1px) * 85);
  --hd-popup-safe-height: max(120px, calc(100vh - var(--hd-header-safe-height) - var(--hd-contact-height) - 142px));
}
@supports (height: 100svh) {
  #hd_pop { --hd-popup-safe-height: max(120px, calc(100svh - var(--hd-header-safe-height) - var(--hd-contact-height) - 142px)); }
}
@supports (height: 100dvh) {
  #hd_pop { --hd-popup-safe-height: max(120px, calc(100dvh - var(--hd-header-safe-height) - var(--hd-contact-height) - 142px)); }
}

/* 배경 효과 오버레이 — 팝업 레이어(z-index:1000) 바로 아래, 클릭·스크롤은 통과 */
#hd_pop_overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 998; pointer-events: none;
  will-change: opacity; transition: opacity .2s ease;
}
#hd_pop_overlay.hd_overlay_dim { background: rgba(0, 0, 0, 0.45); }
#hd_pop_overlay.hd_overlay_blur { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* 팝업 본문 문단 여백 제거 (에디터 기본 margin) */
.hd_pops_con > p { margin: 0; }

/* 나열식 (layout=grid): #hd_pop 을 flex-wrap 으로, 각 팝업 나란히·가운데·자동 줄바꿈 */
#hd_pop.hd_layout_grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 10px; width: 100%; height: auto;
  max-height: var(--hd-layer-max-height, none);
  padding: 0 clamp(15px, 5vw, 100px) var(--hd-grid-footer-space, 0px);
  overflow: visible;
  box-sizing: border-box;
}
/* 한 줄 최대 3개, 4개째부터 자동 줄바꿈. gap 은 --hd-gap 유동 */
#hd_pop.hd_layout_grid .hd_grid_item { position: static; margin: 0; min-width: 0; max-width: calc((100% - var(--hd-gap, 10px) * 2) / 3); }
/* 나열식 이미지 영역은 포인터 대상에서 제외해 휠이 홈페이지에 바로 닿게 한다. footer·링크·영상만 다시 활성화. */
#hd_pop.hd_layout_grid .hd_grid_item { pointer-events: none; }
#hd_pop.hd_layout_grid .hd_grid_item .hd_pops_footer,
#hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con a,
#hd_pop.hd_layout_grid .hd_grid_item .hd_yt { pointer-events: auto; }
/* 각 팝업 콘텐츠 높이 통일 → footer(닫기) 항상 같은 위치 */
#hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con { height: min(var(--hd-popup-height, 610px), var(--hd-item-fit-height, var(--hd-popup-fit-height, var(--hd-popup-safe-height)))) !important; width: 100% !important; }
#hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con > * { width: 100%; height: 100%; margin: 0; }
#hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; }
#hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con .hd_yt { width: 100% !important; height: 100% !important; aspect-ratio: unset !important; }
#hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con .hd_yt img { object-fit: contain !important; }
/* PC 브라우저를 좁힌 경우 한 열 흐름으로 전환. 모바일 전용 중첩식은 popup_m.css 가 담당. */
@media (max-width: 1023px) {
  #hd_pop { --hd-header-safe-height: 15vw; }
  #hd_pop.hd_layout_grid .hd_grid_item {
    position: static; left: auto !important; transform: none !important;
    flex: 0 1 calc((100% - var(--hd-gap, 10px) * 2) / 3);
    width: calc((100% - var(--hd-gap, 10px) * 2) / 3) !important;
    max-width: calc((100% - var(--hd-gap, 10px) * 2) / 3);
    min-width: 0;
  }
  #hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con { height: min(var(--hd-popup-height, 610px), var(--hd-item-fit-height, var(--hd-popup-fit-height, var(--hd-popup-safe-height)))) !important; width: 100% !important; display: flex; }
  #hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  #hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con .hd_yt { width: 100% !important; height: 100% !important; aspect-ratio: unset !important; }
  #hd_pop.hd_layout_grid .hd_grid_item .hd_pops_con .hd_yt img { object-fit: contain !important; }
  #hd_pop.hd_layout_grid .hd_pops_footer button {
    min-width: 0;
    font-size: clamp(10px, 1.2vw, 12.5px) !important;
    padding: 10px 2px !important;
  }
}
@media (max-width: 599px) {
  #hd_pop.hd_layout_grid .hd_grid_item {
    flex-basis: 88%;
    width: 88% !important;
    max-width: 560px;
  }
}
/* 전체 닫기는 상담 바 DOM에 종속하지 않고, 측정된 상담 바 높이 바로 위에 독립 고정. */
#hd_pop.hd_layout_grid .hd_grid_footer {
  position: fixed; left: 50%; bottom: calc(var(--hd-contact-height, calc(var(--px, 1px) * 76)) + 8px);
  width: max-content; display: flex; justify-content: center;
  transform: translateX(-50%); pointer-events: auto; z-index: 3;
  opacity: 1; will-change: opacity;
  transition: opacity .2s ease;
}
/* 상담 바가 있으면 전체닫기를 그 안에 넣고 absolute로 바로 위에 고정. */
#contact_service .hd_grid_footer.hd_contact_anchor {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 8px;
  width: max-content; display: flex; justify-content: center;
  transform: translateX(-50%); pointer-events: auto; z-index: 2;
  opacity: 1; will-change: opacity;
  transition: opacity .2s ease;
}
.hd_grid_footer.hd_scroll_hidden {
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
#hd_pop.hd_layout_grid .hd_grid_footer.hd_scroll_hidden,
#contact_service .hd_grid_footer.hd_contact_anchor.hd_scroll_hidden {
  opacity: 0; pointer-events: none;
}
.hd_grid_closeall { padding: 11px 32px; border: 0; border-radius: 8px; background: #3a3a3a; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.2); transition: background .15s; }
.hd_grid_closeall:hover { background: #111; }

/* ── 다중 팝업 슬라이더: 높이 고정 + 너비 자동 + fade 전환 ── */
.hd_pops_slider { transition: width .35s ease; }
.hd_pops_slider { max-height: var(--hd-layer-max-height, none); }
.hd_slider_viewport { position: relative; overflow: hidden; height: min(var(--hd-popup-height, 610px), var(--hd-popup-fit-height, var(--hd-popup-safe-height))); }
.hd_slider_track { position: relative; height: 100%; }
.hd_slider_slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease; display: flex; align-items: center; justify-content: center; background: #f7f7f7; }
.hd_slider_slide.on { opacity: 1; pointer-events: auto; }
.hd_slider_slide .hd_pops_con { width: auto !important; height: 100% !important; display: flex; align-items: center; }
.hd_slider_slide .hd_pops_con > * { height: 100%; margin: 0; display: flex; align-items: center; }
.hd_slider_slide img { height: 100%; width: auto; max-width: 100%; display: block; }
/* 하단 네비: 화살표+도트 한 줄 (폭이 바뀌어도 항상 하단 가운데 고정) */
.hd_slider_nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 10px; background: #f7f7f7; border-top: 1px solid rgba(0,0,0,.05); }
.hd_slider_arw {
  width: 26px; height: 26px; padding: 0 0 2px; border: 0; border-radius: 50%;
  background: #e6e6e6; color: #555; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.hd_slider_arw:hover { background: #d6d6d6; color: #222; }
.hd_slider_dots { display: flex; align-items: center; gap: 7px; }
.hd_slider_dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: #cfcfcf; cursor: pointer;
  transition: background .15s, transform .15s;
}
.hd_slider_dot.on { background: #3a3a3a; transform: scale(1.2); }
/* 유튜브 facade (썸네일 클릭 → iframe 재생) */
.hd_yt { position: relative; width: min(520px, 90vw); background: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.hd_slider_slide .hd_pops_con:has(.hd_yt) { width: 100% !important; }
.hd_slider_slide .hd_yt { width: 100% !important; height: 100% !important; aspect-ratio: unset !important; }
.hd_yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd_yt_play { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.hd_yt:hover .hd_yt_play { background: rgba(0,0,0,.85); }
.hd_yt_play::after { content: ''; margin-left: 4px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.hd_yt.playing .hd_yt_play { display: none; }
.hd_yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 1023px) {
  .hd_slider_viewport { height: min(var(--hd-popup-height, 610px), var(--hd-popup-fit-height, var(--hd-popup-safe-height))); }
}