@charset "utf-8";

/* ============================================================
   header.css — 통합 헤더 + 터치 탑버튼 (메인/서브 전 페이지 공용)
   head.php 한 파일에서 PC/터치 두 헤더를 렌더하고 .view-pc / .view-mo 로 분기 (전환 1024px).
   · 메뉴는 head.php 가 g5_menu 를 1회 조회한 $hd_menu 배열을 양쪽이 재사용
   · 토큰(:root)이 필요하므로 common-style.css 와 함께 로드
   · PC 헤더 시각 스타일은 레거시 main.css 를 그대로 쓰고 여기선 반응형 보정만
============================================================ */

/* main.css 의 min-width(1200~1400px)가 1024~1200 구간에서 가로 스크롤을 만든다 */
#header-wrap { min-width: 0; }
.logo-tt     { width: 100%; min-width: 0; max-width: 1400px; padding: 0 var(--one-space-s); }
.top_banner  { min-width: 0; }

/* jbMenu — DB 메뉴라 개수가 가변이므로 줄바꿈 허용 */
.jbMenu ul {
    flex-wrap: wrap;
    gap: 0 var(--one-gap-sm);
    margin: 0 auto;
}
.jbMenu ul li a { white-space: nowrap; }


/* ── 터치기기 헤더 (.hd-mo) — 1024 이하 노출 ── */
.hd-mo {
  position  : relative;
  z-index   : 10000;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}
.hd-mo__bar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : var(--one-gap-r);
  height         : 60px;
  padding        : 0 var(--one-space-safe);
}
.hd-mo__logo { display: block; }
.hd-mo__logo img { display: block; height: 30px; width: auto; }

.hd-mo__util { display: flex; align-items: center; gap: var(--one-gap-sm); }
.hd-mo__tel {
  display        : inline-flex;
  align-items    : center;
  height         : 36px;
  padding        : 0 var(--one-gap-r);
  border-radius  : var(--ui-radius-pill);
  background     : var(--point-color);
  font-size      : 14px;
  font-weight    : 700;
  color          : #fff;
}
/* 햄버거 */
.hd-mo__btn {
  position  : relative;
  width     : 36px;
  height    : 36px;
  padding   : 0;
  border    : 0;
  background: transparent;
  cursor    : pointer;
}
/* ⚠️ `.hd-mo__btn span` 으로 쓰면 안의 .sound_only span 까지 막대가 되어 바가 겹친다 */
.hd-mo__ico {
  position  : absolute;
  top       : 50%;
  left      : 50%;
  width     : 22px;
  height    : 2px;
  margin    : -1px 0 0 -11px;
  background: var(--main-color);
  transition: background 0.2s ease;
}
.hd-mo__ico::before,
.hd-mo__ico::after {
  position  : absolute;
  left      : 0;
  width     : 100%;
  height    : 100%;
  background: var(--main-color);
  transition: transform 0.25s ease;
  content   : "";
}
.hd-mo__ico::before { top: -7px; }
.hd-mo__ico::after  { top:  7px; }
/* 열림 상태 = X */
.hd-mo.is-open .hd-mo__ico { background: transparent; }
.hd-mo.is-open .hd-mo__ico::before { transform: translateY(7px)  rotate(45deg); }
.hd-mo.is-open .hd-mo__ico::after  { transform: translateY(-7px) rotate(-45deg); }

/* ── 슬라이드 패널 ── */
.hd-mo__panel {
  position  : fixed;
  top       : 0;
  right     : 0;
  width     : 82%;
  max-width : 360px;
  height    : 100%;
  padding   : 60px var(--one-space-safe) var(--one-space-r);
  background: #fff;
  overflow-y: auto;
  transform : translateX(100%);
  transition: transform 0.3s ease;
  z-index   : 10001;
}
.hd-mo.is-open .hd-mo__panel { transform: translateX(0); }
.hd-mo__dim {
  position  : fixed;
  inset     : 0;
  background: rgba(0, 0, 0, 0.45);
  opacity   : 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index   : 10000;
}
.hd-mo.is-open .hd-mo__dim { opacity: 1; visibility: visible; }
.hd-mo__close {
  position  : absolute;
  top       : 14px;
  right     : 12px;
  width     : 36px;
  height    : 36px;
  border    : 0;
  background: transparent;
  font-size : 0;
  cursor    : pointer;
}
.hd-mo__close::before,
.hd-mo__close::after {
  position  : absolute;
  top       : 50%;
  left      : 50%;
  width     : 22px;
  height    : 2px;
  margin    : -1px 0 0 -11px;
  background: var(--main-color);
  content   : "";
}
.hd-mo__close::before { transform: rotate(45deg); }
.hd-mo__close::after  { transform: rotate(-45deg); }

/* ── 패널 내 메뉴 ── */
.hd-mo__gnb { margin: 0; padding: 0; list-style: none; }
.hd-mo__gnb > li { border-bottom: 1px solid var(--ui-line); }
.hd-mo__gnb > li > a {
  display    : block;
  padding    : 13px 4px;
  font-size  : 15px;
  font-weight: 600;
  color      : var(--main-color);
}
.hd-mo__sub { margin: 0 0 8px; padding: 0 0 0 12px; list-style: none; }
.hd-mo__sub li a {
  display  : block;
  padding  : 6px 4px;
  font-size: 13px;
  color    : var(--gray-color01);
}
.hd-mo__empty { padding: 20px 4px; font-size: 15px; color: var(--gray-color01); }

/* 앵커 이동 오프셋 — 브라우저 기본 해시 점프용 (메뉴 클릭은 rolling_script.js 가 처리).
   PC = .jbMenu 50px / 터치 = 고정 헤더 60px */
[id^="part"],
[id^="sec0"],
#hero,
#ftr { scroll-margin-top: 50px; }


/* ============================================================
   터치기기 하단 플로팅 퀵메뉴 (.mo-quick) — PC 퀵메뉴(.nav-bar) 대체
   마크업은 tail.php. 아이콘 = img/quick/m/m-quick01~05.png (65×65), 05 = tel 연결.
   · 아우터는 풀와이드 흰 배경, 이너만 max-width 639px 중앙정렬
   · 높이는 --moq-h 한 곳에서만 정한다 — .mo-top 위치와 body 하단 여백이 이 값을 참조
   · 노출은 .mo-top 과 같은 기준(스크롤 300px 초과)의 .is-on 토글 — 핸들러는 tail.php 공용
============================================================ */
:root { --moq-h: 56px; }

.mo-quick {
  position      : fixed;
  left          : 0;
  right         : 0;
  bottom        : 0;
  z-index       : 9995;   /* 헤더 패널/딤(10000+) 아래 — 메뉴 열면 같이 덮인다 */
  background    : #fff;
  border-top    : 1px solid var(--ui-line);
  box-shadow    : 0 -2px 10px rgba(0, 0, 0, 0.08);
  /* 아이폰 홈 인디케이터 영역만큼 아래를 더 확보 (미지원 브라우저는 0) */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* 기본은 숨김 — 아래로 밀어두고 .is-on 에서 올라온다 */
  opacity       : 0;
  visibility    : hidden;
  transform     : translateY(100%);
  transition    : opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.mo-quick.is-on {
  opacity   : 1;
  visibility: visible;
  transform : translateY(0);
}
.mo-quick__inner { max-width: 639px; margin: 0 auto; }
.mo-quick__list  { display: flex; margin: 0; padding: 0; list-style: none; }
.mo-quick__list > li { flex: 1 1 0; min-width: 0; }
.mo-quick__list > li + li { border-left: 1px solid #f0f0f0; }
.mo-quick__list a {
  display        : flex;
  align-items    : center;
  justify-content: center;
  height         : var(--moq-h);
  transition     : background 0.2s ease;
}
.mo-quick__list a:hover,
.mo-quick__list a:focus { background: var(--point-color03); }
.mo-quick__list img { display: block; width: 30px; height: auto; }


/* ── 터치기기 탑버튼 — PC 퀵메뉴(.nav-bar) 대체. .is-on 토글은 tail.php ── */
/* bottom = 퀵메뉴 높이 + 1.5em(=24px, font-size 16px 기준) — 겹치지 않게 띄운다 */
.mo-top {
  position      : fixed;
  right         : 14px;
  bottom        : calc(var(--moq-h) + 1.5em + env(safe-area-inset-bottom, 0px));
  z-index       : 9990;
  font-size     : 16px;   /* 위 1.5em 의 기준 — 버튼 기본 폰트에 의존하지 않도록 고정 */
  width         : 46px;
  height        : 46px;
  padding       : 0;
  border        : 0;
  border-radius : 50%;
  background    : var(--main-color);
  box-shadow    : 0 4px 14px rgba(9, 50, 78, 0.28);
  cursor        : pointer;
  opacity       : 0;
  visibility    : hidden;
  transform     : translateY(8px);
  transition    : opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.mo-top.is-on {
  opacity   : 1;
  visibility: visible;
  transform : translateY(0);
}
/* 화살표(∧) */
.mo-top::before {
  position    : absolute;
  top         : 50%;
  left        : 50%;
  width       : 11px;
  height      : 11px;
  margin      : -2px 0 0 -6px;
  border-left : 2px solid #fff;
  border-top  : 2px solid #fff;
  transform   : rotate(45deg);
  content     : "";
}
.mo-top:hover,
.mo-top:focus { background: var(--point-color); }


/* ============================================================
   팝업레이어 (#hd_pop) — 구 mobile.css 블록을 그대로 이식
   모바일 모드 OFF 로 터치기기에도 PC 테마가 나가면서 이 대응이 빠졌다.
   newwin.inc.php 가 .hd_pops / .hd_pops_con 에 관리자 설정 px 를 인라인으로 박으므로
   좁은 폭에서는 아래 !important 로 눌러야 화면 밖으로 나가지 않는다.
   ※ default.css 보다 나중에 로드되므로 PC 값도 이 블록이 이긴다.
============================================================ */
#hd_pop { position: absolute; left: 0; top: 0; z-index: 1000; width: 100%; height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }

.hd_pops {
  position  : absolute;
  border    : 1px solid #666;
  background: #fff;
  max-width : 90%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.2);
  transition-duration       : 0.6s;
  transition-timing-function: ease;
}
.hd_pops img { max-width: 100%; }
.hd_pops_con { max-width: 100%; }

.hd_pops_footer {
  position  : relative;
  height    : 50px;
  padding   : 0;
  background: #000;
  color     : #fff;
  text-align: left;
}
.hd_pops_footer:after { display: block; visibility: hidden; clear: both; content: ""; }
.hd_pops_footer button { height: 30px; line-height: 30px; padding: 0 15px; border: 0; color: #fff; }
.hd_pops_footer .hd_pops_reject { margin: 10px 0 0 10px; background: #222; color: #c1ad9a; text-align: left; }
.hd_pops_footer .hd_pops_reject strong { display: inline-block; padding-right: 3px; font-size: 1.4em; color: #fff; }
/* 원본의 strong:before 아이콘 규칙은 제외 — 참조 이미지(ico_eye_slash.png)가 원본 테마에도 없어 빈 칸만 남았다 */
.hd_pops_footer .hd_pops_close {
  position   : absolute;
  top        : 0;
  right      : 0;
  width      : 50px;
  height     : 50px;
  line-height: 50px;
  padding    : 0;
  background : url(../img/close_btn.gif) no-repeat center center #393939;
  color      : #393939;
  text-align : center;
  text-indent: -99999999px;
  overflow   : hidden;
}
.hd_pops_footer button:hover { background: #333; }
.hd_pops_footer button:hover.hd_pops_close { background: url(../img/close_btn.gif) no-repeat center center #666; }

/* 원본 기준점 980px — 테마 전환점(1024)에 맞춤 */
@media all and (max-width: 1024px) {
  #hd_pop .hd_pops { left: 5% !important; top: 100px !important; max-width: 90% !important; }
  #hd_pop .hd_pops_con { height: auto !important; }
  #hd_pop .hd_pops_footer { font-size: 11px; letter-spacing: -0.05px; }
}


/* ============================================================
   반응형
============================================================ */
@media all and (max-width: 1024px) {
  /* ⚠️ sticky 는 main.css 의 body{overflow:hidden} 때문에 안 먹는다 → fixed + spacer */
  .hd-mo {
    position: fixed;
    top     : 0;
    left    : 0;
    right   : 0;
  }
  .hd-mo__spacer { height: 60px; }   /* = .hd-mo__bar 높이 */

  [id^="part"],
  [id^="sec0"],
  #hero,
  #ftr { scroll-margin-top: 60px; }

  /* main.css 는 768~1024 구간만 .pc_view 를 숨겨 그 아래에서 다시 나타난다 */
  .nav-bar,
  .pc_view { display: none !important; }

  /* 하단 고정 퀵메뉴가 푸터 끝을 가리지 않도록 그만큼 콘텐츠를 밀어준다 */
  body { padding-bottom: calc(var(--moq-h) + env(safe-area-inset-bottom, 0px)); }
}

@media all and (max-width: 639px) {
  .hd-mo__logo img { height: 26px; }
  .hd-mo__tel { height: 32px; padding: 0 var(--one-gap-sm); font-size: 13px; }
  .hd-mo__panel { width: 86%; }
  /* bottom 은 --moq-h 를 따라가므로 건드리지 않는다 */
  .mo-top { right: 12px; width: 42px; height: 42px; }

  :root { --moq-h: 55px; }
  .mo-quick__list img {
      width: 40%;
      max-width: 35px;
  }
}