/* =========================
   HJF Header (scoped, fixed)
   ========================= */
:root{
  --hjf-h:72px;
  --hjf-bg:#fff; --hjf-text:#111; --hjf-line:#e9eef3; --hjf-accent:#0c4da2;
  --hjf-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* 헤더 바 */
#hjf-header{ position:sticky; top:0; z-index:1000; background:var(--hjf-bg); border-bottom:1px solid var(--hjf-line); }
#hjf-header .hjf-header__inner{
  max-width:1280px; margin:0 auto; height:var(--hjf-h);
  display:grid; grid-template-columns:auto 1fr auto auto; /* 로고 | GNB | 유틸 | 햄버거 */
  align-items:center; gap:16px; padding:0 20px; overflow:visible;
  font-family:"Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#hjf-header .hjf-logo img{ height:36px; display:block; }
#hjf-gnb{ justify-self:stretch; }
#hjf-header .hjf-util{ display:flex; align-items:center; gap:12px; }

/* 버튼 스타일 */
.hjf-btn{ display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 14px; border-radius:10px; font-size:14px; background:var(--hjf-accent); color:#fff; border:0; }
.hjf-btn--outline{ background:#fff; color:var(--hjf-accent); border:1px solid var(--hjf-accent); }

/* GNB (desktop 가운데) */
#hjf-gnb .hjf-gnb__list{ display:flex; align-items:center; justify-content:center; gap:18px; white-space:nowrap; }
#hjf-gnb .hjf-gnb__item{ flex:0 0 auto; }
#hjf-gnb .hjf-gnb__item > a,
#hjf-gnb .hjf-gnb__item > .hjf-sub-toggle{
  display:inline-flex; align-items:center; font-weight:600; font-size:15px; line-height:1;
  color:var(--hjf-text); padding:10px 8px; border-radius:8px; background:transparent; border:0;
}
#hjf-gnb .hjf-gnb__item > a:hover,
#hjf-gnb .hjf-gnb__item > .hjf-sub-toggle:hover{ color:var(--hjf-accent); background:#f3f7ff; }

/* 2차 (데스크탑 드롭다운) */
#hjf-gnb .hjf-has-sub{ position:relative; }
#hjf-gnb .hjf-sub{
  position:absolute; top:calc(100% + 8px); left:0; min-width:240px;
  background:#fff; border:1px solid var(--hjf-line); border-radius:14px; padding:8px;
  box-shadow:var(--hjf-shadow); display:none;
}
#hjf-gnb .hjf-has-sub:hover .hjf-sub{ display:block; }

/* ===== 햄버거: 우측 끝 + 3줄 정확히 ===== */
#hjf-gnb-toggle{
  justify-self:end; /* 그리드 우측 끝 */
  width:44px; height:44px; padding:8px;
  border:0; background:transparent; border-radius:10px;
  display:none; /* 데스크탑 숨김 */
  align-items:center; justify-content:center; cursor:pointer;
}
#hjf-gnb-toggle .bar{
  display:block; width:24px; height:2px; background:#0c4da2; border-radius:2px; margin:4px 0;
}
#hjf-gnb-toggle:focus-visible{ outline:2px solid #0c4da2; outline-offset:2px; }

/* ===== 모바일/태블릿(<=1200px): 드로어/오버레이 ===== */
@media (max-width:1200px){
  #hjf-gnb-toggle{ display:inline-flex !important; }  /* 강제 노출 */
  #hjf-header .hjf-util{ display:none !important; }   /* 공간 확보 (원치 않으면 주석) */

  #hjf-gnb{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(86vw,380px); max-width:380px; background:#fff;
    transform:translateX(100%); transition:transform .32s ease; box-shadow:var(--hjf-shadow);
    padding:84px 16px 20px; overflow:auto; z-index:1001;
  }
  #hjf-gnb.open{ transform:translateX(0); }

  /* 더 어두운 오버레이 */
  #hjf-gnb-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:1000;
  }
  #hjf-gnb-backdrop.show{ opacity:1; visibility:visible; }

  /* 1차 세로 + 2차 아코디언 */
  #hjf-gnb .hjf-gnb__list{ flex-direction:column; align-items:stretch; gap:6px; justify-content:flex-start; }
  #hjf-gnb .hjf-gnb__item > a,
  #hjf-gnb .hjf-gnb__item > .hjf-sub-toggle{
    display:block; width:100%; padding:14px 12px; border-radius:12px; background:#f7f9fc; text-align:left;
  }
  #hjf-gnb .hjf-sub{ position:static; display:none; border:0; box-shadow:none; padding:6px 6px 10px 12px; background:transparent; }
  #hjf-gnb .hjf-gnb__item.open .hjf-sub{ display:block; }
  #hjf-gnb .hjf-gnb__item:hover .hjf-sub{ display:none; }
}

/* 햄버거 → X 애니메이션 (열림 시) */
#hjf-gnb-toggle.is-open .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); transition:.2s; }
#hjf-gnb-toggle.is-open .bar:nth-child(2){ opacity:0; transition:.2s; }
#hjf-gnb-toggle.is-open .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); transition:.2s; }

/* 데스크탑 보호 및 안전장치 */
@media (min-width:1201px){
  #hjf-gnb{ position:static !important; transform:none !important; width:auto !important; padding:0 !important; box-shadow:none !important; }
}
html.hjf-gnb-open, body.hjf-gnb-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }


/* ===== HAMBURGER: 3줄 아이콘 (전역 .bar 충돌 방지) ===== */
#hjf-gnb-toggle{
  justify-self:end;
  width:44px; height:44px; padding:8px;
  border:0; background:transparent;
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
#hjf-gnb-toggle .hjf-bar{
  display:block;
  width:24px; height:2px;               /* 2px 라인 */
  background:#0c4da2;                   /* 브랜드 컬러 */
  border-radius:2px;
  margin:4px 0;                         /* 3줄 간격 */
}
/* 혹시 전역에서 .bar에 특수 스타일이 있을 경우 무력화 */
#hjf-gnb-toggle .hjf-bar *{ all:unset; }

/* 1200px 이하에서 반드시 노출 */
@media (max-width:1200px){
  #hjf-gnb-toggle{ display:inline-flex !important; }
}

/* 햄버거 → X 애니메이션 */
#hjf-gnb-toggle.is-open .hjf-bar:nth-child(1){ transform:translateY(6px) rotate(45deg); transition:.2s; }
#hjf-gnb-toggle.is-open .hjf-bar:nth-child(2){ opacity:0; transition:.2s; }
#hjf-gnb-toggle.is-open .hjf-bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); transition:.2s; }

/* ===== Drawer & Backdrop: 클릭 보장 (z-index / pointer-events) ===== */
@media (max-width:1200px){
  /* 레이어 우선순위 확 높임 */
  #hjf-gnb{ z-index: 9999 !important; }
  #hjf-gnb-toggle{ z-index: 10001 !important; }
  #hjf-gnb-backdrop{
    position: fixed; inset:0;
    background: rgba(0,0,0,.68);        /* 더 컴컴하게 */
    opacity:0; visibility:hidden;
    pointer-events: none;               /* 숨김 땐 클릭 차단 */
    transition: opacity .2s ease;
    z-index: 9998 !important;
  }
  #hjf-gnb-backdrop.show{
    opacity:1; visibility:visible;
    pointer-events: auto;               /* 보일 때만 클릭 허용 */
  }

  /* 드로어(우측 슬라이드) */
  #hjf-gnb{
    position: fixed; top:0; right:0; bottom:0;
    width: min(86vw, 380px);
    background:#fff;
    transform: translateX(100%);
    transition: transform .32s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: 84px 16px 20px;
    overflow: auto;
  }
  #hjf-gnb.open{ transform: translateX(0); }

  /* 1차 세로 + 2차 아코디언 */
  #hjf-gnb .hjf-gnb__list{ flex-direction:column; align-items:stretch; gap:6px; }
  #hjf-gnb .hjf-gnb__item > a,
  #hjf-gnb .hjf-gnb__item > .hjf-sub-toggle{
    display:block; width:100%; padding:14px 12px; border-radius:12px; background:#f7f9fc; text-align:left;
  }
  #hjf-gnb .hjf-sub{ position:static; display:none; border:0; box-shadow:none; padding:6px 6px 10px 12px; background:transparent; }
  #hjf-gnb .hjf-gnb__item.open .hjf-sub{ display:block; }
}

/* 안전장치: 상위 transform/overflow 영향 제거 */
html.hjf-gnb-open, body.hjf-gnb-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }


/* ===== [PATCH] Hamburger icon (pseudo 3 lines) ===== */
#hjf-gnb-toggle{
  justify-self:end;
  width:44px; height:44px; padding:8px;
  border:0; background:transparent; border-radius:10px;
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
#hjf-gnb-toggle .hjf-ico{
  position:relative; display:block; width:24px; height:2px; background:#0c4da2; border-radius:2px;
}
#hjf-gnb-toggle .hjf-ico::before,
#hjf-gnb-toggle .hjf-ico::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#0c4da2; border-radius:2px;
}
#hjf-gnb-toggle .hjf-ico::before{ top:-6px; }
#hjf-gnb-toggle .hjf-ico::after{  top: 6px; }

/* 혹시 남아있는 과거 span 바 제거(안전망) */
#hjf-gnb-toggle .hjf-bar{ display:none !important; }

/* 열림 시 X 전환 */
#hjf-gnb-toggle.is-open .hjf-ico{ background:transparent; }
#hjf-gnb-toggle.is-open .hjf-ico::before{ top:0; transform:rotate(45deg); }
#hjf-gnb-toggle.is-open .hjf-ico::after { top:0; transform:rotate(-45deg); }

/* 1200px 이하에서 강제 노출 */
@media (max-width:1200px){
  #hjf-gnb-toggle{ display:inline-flex !important; }
}

/* ===== [PATCH] Drawer & Backdrop layering 확정 ===== */
/* 초고정 z-index 값으로 충돌 차단 */
:root{
  --hjf-z-backdrop: 2147483630;
  --hjf-z-drawer:   2147483635;
  --hjf-z-toggle:   2147483640;
}
@media (max-width:1200px){
  #hjf-gnb-toggle{ z-index: var(--hjf-z-toggle) !important; }

  #hjf-gnb{
    position: fixed; top:0; right:0; bottom:0;
    width: min(86vw, 380px); max-width:380px;
    background:#fff; transform: translateX(100%);
    transition: transform .32s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: 84px 16px 20px; overflow: auto;
    z-index: var(--hjf-z-drawer) !important;
  }
  #hjf-gnb.open{ transform: translateX(0); }

  #hjf-gnb-backdrop{
    position: fixed; inset:0; background: rgba(0,0,0,.68);
    opacity:0; visibility:hidden; pointer-events: none;
    transition: opacity .2s ease;
    z-index: var(--hjf-z-backdrop) !important;
  }
  #hjf-gnb-backdrop.show{
    opacity:1; visibility:visible; pointer-events: auto; /* 보일 때만 클릭 허용 */
  }

  /* 아코디언 & 리스트 */
  #hjf-gnb .hjf-gnb__list{ display:flex; flex-direction:column; gap:6px; }
  #hjf-gnb .hjf-gnb__item > a,
  #hjf-gnb .hjf-gnb__item > .hjf-sub-toggle{
    display:block; width:100%; padding:14px 12px; border-radius:12px; background:#f7f9fc; text-align:left;
  }
  #hjf-gnb .hjf-sub{ position:static; display:none; border:0; box-shadow:none; padding:6px 6px 10px 12px; }
  #hjf-gnb .hjf-gnb__item.open .hjf-sub{ display:block; }
}

/* 전역 충돌 방지 안전장치 */
html.hjf-gnb-open, body.hjf-gnb-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }

/* ===== HAMBURGER: 둥근 테두리 + 3줄 아이콘(pseudo) ===== */
#hjf-gnb-toggle{
  justify-self:end;
  width:44px; height:44px; padding:8px;
  border:1px solid #e6ecf4;           /* 테두리 */
  background:#ffffff;                  /* 흰 배경 */
  border-radius:12px;                  /* ✅ 둥근 모서리 */
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
#hjf-gnb-toggle:hover{ box-shadow: 0 2px 8px rgba(16,24,40,.08); }
#hjf-gnb-toggle .hjf-ico{
  position:relative; display:block; width:24px; height:2px; background:#0c4da2; border-radius:2px;
}
#hjf-gnb-toggle .hjf-ico::before,
#hjf-gnb-toggle .hjf-ico::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#0c4da2; border-radius:2px;
}
#hjf-gnb-toggle .hjf-ico::before{ top:-6px; }
#hjf-gnb-toggle .hjf-ico::after{  top: 6px; }

/* 열림 시 X 전환 */
#hjf-gnb-toggle.is-open .hjf-ico{ background:transparent; }
#hjf-gnb-toggle.is-open .hjf-ico::before{ top:0; transform:rotate(45deg); }
#hjf-gnb-toggle.is-open .hjf-ico::after { top:0; transform:rotate(-45deg); }

/* 1200px 이하 강제 노출 */
@media (max-width:1200px){
  #hjf-gnb-toggle{ display:inline-flex !important; }
}

/* ===== Drawer/Backdrop: 레이어/클릭 보장 ===== */
:root{
  --hjf-z-backdrop: 2147483630;  /* 매우 높게 */
  --hjf-z-drawer:   2147483635;
  --hjf-z-toggle:   2147483640;
}

@media (max-width:1200px){
  #hjf-gnb-toggle{ z-index: var(--hjf-z-toggle) !important; }

  #hjf-gnb{
    position: fixed; top:0; right:0; bottom:0;
    width: min(86vw, 380px); max-width:380px; background:#fff;
    transform: translateX(100%); transition: transform .32s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: 84px 16px 20px; overflow:auto;
    z-index: var(--hjf-z-drawer) !important;
  }
  #hjf-gnb.open{ transform: translateX(0); }

  #hjf-gnb-backdrop{
    position: fixed; inset:0;
    background: rgba(0,0,0,.68);        /* 컴컴하게 */
    opacity:0; visibility:hidden;
    pointer-events: none;               /* 숨김 상태 클릭 차단 */
    transition: opacity .2s ease;
    z-index: var(--hjf-z-backdrop) !important;
  }
  #hjf-gnb-backdrop.show{
    opacity:1; visibility:visible;
    pointer-events: auto;               /* 보일 때만 클릭 허용 */
    -webkit-tap-highlight-color: transparent;
  }

  /* 모바일 메뉴 리스트/아코디언 */
  #hjf-gnb .hjf-gnb__list{ display:flex; flex-direction:column; gap:6px; }
  #hjf-gnb .hjf-gnb__item > a,
  #hjf-gnb .hjf-gnb__item > .hjf-sub-toggle{
    display:block; width:100%; padding:14px 12px; border-radius:12px; background:#f7f9fc; text-align:left;
  }
  #hjf-gnb .hjf-sub{ position:static; display:none; border:0; box-shadow:none; padding:6px 6px 10px 12px; }
  #hjf-gnb .hjf-gnb__item.open .hjf-sub{ display:block; }
}

/* 전역 충돌 방지 */
html.hjf-gnb-open, body.hjf-gnb-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }


/* ============ 햄버거 버튼: 둥근 테두리 & 3줄 아이콘 ============ */
#hjf-gnb-toggle{
  justify-self:end;
  width:44px; height:44px; padding:8px;
  border:1px solid #e6ecf4; background:#fff; border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
#hjf-gnb-toggle:hover{ box-shadow:0 2px 8px rgba(16,24,40,.08); }
#hjf-gnb-toggle .hjf-ico{
  position:relative; display:block; width:24px; height:2px; background:#0c4da2; border-radius:2px;
}
#hjf-gnb-toggle .hjf-ico::before,
#hjf-gnb-toggle .hjf-ico::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#0c4da2; border-radius:2px;
}
#hjf-gnb-toggle .hjf-ico::before{ top:-6px; }
#hjf-gnb-toggle .hjf-ico::after { top: 6px; }
#hjf-gnb-toggle.is-open .hjf-ico{ background:transparent; }
#hjf-gnb-toggle.is-open .hjf-ico::before{ top:0; transform:rotate(45deg); }
#hjf-gnb-toggle.is-open .hjf-ico::after { top:0; transform:rotate(-45deg); }
@media (max-width:1200px){ #hjf-gnb-toggle{ display:inline-flex !important; } }

/* ============ 드로어/딤: 레이어 우선순위 고정 ============ */
:root{
  --hjf-z-backdrop: 2147483630;
  --hjf-z-drawer:   2147483635;
  --hjf-z-toggle:   2147483640;
}
@media (max-width:1200px){
  #hjf-gnb-toggle{ z-index:var(--hjf-z-toggle) !important; }
  #hjf-gnb{
    position:fixed; top:0; right:0; bottom:0; width:min(86vw,380px); max-width:380px;
    background:#fff; transform:translateX(100%); transition:transform .32s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.18); padding:84px 16px 20px; overflow:auto;
    z-index:var(--hjf-z-drawer) !important;
  }
  #hjf-gnb.open{ transform:translateX(0); }
  #hjf-gnb-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.68);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease;
    z-index:var(--hjf-z-backdrop) !important;
  }
  #hjf-gnb-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }
}

/* ============ 충돌 킬스위치: 우리 메뉴 열릴 땐 타 모달/딤을 꺼버림 ============ */
html.hjf-gnb-open .ui-widget-overlay,
html.hjf-gnb-open .modal,
html.hjf-gnb-open .layer,
html.hjf-gnb-open .dim,
html.hjf-gnb-open .sweet-overlay{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}

/* 전역 transform/overflow로 인한 fixed 분리 방지 */
html.hjf-gnb-open, body.hjf-gnb-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }


/* ============ 햄버거: 둥근 테두리 & 3줄 아이콘 ============ */
#hjf-gnb-toggle{
  width:44px; height:44px; padding:8px;
  border:1px solid #e6ecf4; border-radius:12px; background:#fff;
  display:none; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
#hjf-gnb-toggle:hover{ box-shadow:0 2px 8px rgba(16,24,40,.08); }
#hjf-gnb-toggle .hjf-ico{
  position:relative; display:block; width:24px; height:2px; background:#0c4da2; border-radius:2px;
}
#hjf-gnb-toggle .hjf-ico::before,#hjf-gnb-toggle .hjf-ico::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#0c4da2; border-radius:2px;
}
#hjf-gnb-toggle .hjf-ico::before{ top:-6px; } #hjf-gnb-toggle .hjf-ico::after{ top:6px; }
#hjf-gnb-toggle.is-open .hjf-ico{ background:transparent; }
#hjf-gnb-toggle.is-open .hjf-ico::before{ top:0; transform:rotate(45deg); }
#hjf-gnb-toggle.is-open .hjf-ico::after { top:0; transform:rotate(-45deg); }
@media (max-width:1200px){ #hjf-gnb-toggle{ display:inline-flex !important; } }

/* ============ 드로어/딤: 레이어 확정 ============ */
:root{
  --hjf-z-backdrop: 2147483630;
  --hjf-z-drawer:   2147483635;
  --hjf-z-toggle:   2147483640;
}
@media (max-width:1200px){
  #hjf-gnb-toggle{ z-index:var(--hjf-z-toggle) !important; }
  #hjf-gnb{
    position:fixed; top:0; right:0; bottom:0;
    width:min(86vw,380px); max-width:380px; background:#fff;
    transform:translateX(100%); transition:transform .32s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    padding:84px 16px 20px; overflow:auto; z-index:var(--hjf-z-drawer) !important;
  }
  #hjf-gnb.open{ transform:translateX(0); }
  #hjf-gnb-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.68);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease;
    z-index:var(--hjf-z-backdrop) !important;
  }
  #hjf-gnb-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }
}

/* ============ 킬스위치: 우리 메뉴 열릴 땐 타 모달/딤 전부 OFF ============ */
html.hjf-gnb-open .ui-widget-overlay,
html.hjf-gnb-open .ui-dialog,
html.hjf-gnb-open .modal,
html.hjf-gnb-open .modal-backdrop,
html.hjf-gnb-open .layer, 
html.hjf-gnb-open .layer_bg,
html.hjf-gnb-open .dim, 
html.hjf-gnb-open .dimmed, 
html.hjf-gnb-open .black_bg,
html.hjf-gnb-open .sweet-overlay,
html.hjf-gnb-open [aria-modal="true"]{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}

/* 전역 transform/overflow 영향 제거 */
html.hjf-gnb-open, body.hjf-gnb-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }


/* ===== 딤/모달 전역 Kill-Switch(우리 메뉴 열릴 때) ===== */
html.hjf-gnb-open .ui-widget-overlay,
html.hjf-gnb-open .ui-dialog,
html.hjf-gnb-open .modal, html.hjf-gnb-open .modal-backdrop,
html.hjf-gnb-open .layer, html.hjf-gnb-open .layer_bg,
html.hjf-gnb-open .layer-pop, html.hjf-gnb-open .layer-pop-bg,
html.hjf-gnb-open .dim, html.hjf-gnb-open .dimmed, html.hjf-gnb-open .black_bg,
html.hjf-gnb-open .sweet-overlay,
html.hjf-gnb-open [aria-modal="true"], html.hjf-gnb-open [role="dialog"], html.hjf-gnb-open [role="alertdialog"]{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}

/* ⚠️ 의사요소(::before/::after)로 어둡게 덮는 케이스까지 차단 */
html.hjf-gnb-open body::before,
html.hjf-gnb-open body::after,
html.hjf-gnb-open #wrap::before,
html.hjf-gnb-open #wrap::after,
html.hjf-gnb-open #container::before,
html.hjf-gnb-open #container::after {
  content:none !important;
  display:none !important;
}

/* 전역 transform/overflow 영향 제거 */
html.hjf-gnb-open, body.hjf-gnb-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }

/* ============ HJF Drawer Kill-Switch ============ */
/* 우리 드로어가 열려있는 동안(#hjf-gnb.open) → 타 딤/모달 전부 제거 */
@media (max-width:1200px){
  html:has(#hjf-gnb.open) .ui-widget-overlay,
  html:has(#hjf-gnb.open) .ui-dialog,
  html:has(#hjf-gnb.open) .modal,
  html:has(#hjf-gnb.open) .modal-backdrop,
  html:has(#hjf-gnb.open) .layer, 
  html:has(#hjf-gnb.open) .layer_bg,
  html:has(#hjf-gnb.open) .layer-pop,
  html:has(#hjf-gnb.open) .layer-pop-bg,
  html:has(#hjf-gnb.open) .dim,
  html:has(#hjf-gnb.open) .dimmed,
  html:has(#hjf-gnb.open) .black_bg,
  html:has(#hjf-gnb.open) .sweet-overlay,
  html:has(#hjf-gnb.open) [aria-modal="true"],
  html:has(#hjf-gnb.open) [role="dialog"],
  html:has(#hjf-gnb.open) [role="alertdialog"]{
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    display:none !important;
  }

  /* 의사요소로 화면을 덮는 테마들도 차단 */
  html:has(#hjf-gnb.open) body::before,
  html:has(#hjf-gnb.open) body::after,
  html:has(#hjf-gnb.open) #wrap::before,
  html:has(#hjf-gnb.open) #wrap::after,
  html:has(#hjf-gnb.open) #container::before,
  html:has(#hjf-gnb.open) #container::after{
    content:none !important; display:none !important;
  }

  /* 드로어/딤의 레이어 우선순위 확정 */
  #hjf-gnb-toggle{ z-index:2147483640 !important; }
  #hjf-gnb{ z-index:2147483635 !important; }
  #hjf-gnb-backdrop{ z-index:2147483630 !important; }
}

/* 전역 transform/overflow로 인한 fixed 분리 방지 */
html.hjf-gnb-open, body.hjf-gnb-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }

/* ===== HJF Drawer: 레이어 확정 ===== */
@media (max-width:1200px){
  #hjf-gnb-toggle{ z-index:2147483640 !important; }
  #hjf-gnb{ z-index:2147483635 !important; position:fixed; top:0; right:0; bottom:0;
            width:min(86vw,380px); max-width:380px; background:#fff;
            transform:translateX(100%); transition:transform .32s ease;
            box-shadow:0 10px 30px rgba(0,0,0,.18); padding:84px 16px 20px; overflow:auto; }
  #hjf-gnb.open{ transform:translateX(0); }
  #hjf-gnb-backdrop{ z-index:2147483630 !important; position:fixed; inset:0;
                     background:rgba(0,0,0,.68); opacity:0; visibility:hidden; pointer-events:none;
                     transition:opacity .2s ease; }
  #hjf-gnb-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }
}

/* ===== 햄버거: 둥근 버튼 + 3줄 아이콘 ===== */
#hjf-gnb-toggle{
  width:44px; height:44px; padding:8px; display:none; align-items:center; justify-content:center;
  border:1px solid #e6ecf4; background:#fff; border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
#hjf-gnb-toggle:hover{ box-shadow:0 2px 8px rgba(16,24,40,.08); }
#hjf-gnb-toggle .hjf-ico{ position:relative; width:24px; height:2px; background:#0c4da2; border-radius:2px; display:block; }
#hjf-gnb-toggle .hjf-ico::before,#hjf-gnb-toggle .hjf-ico::after{ content:""; position:absolute; left:0; right:0; height:2px; background:#0c4da2; border-radius:2px; }
#hjf-gnb-toggle .hjf-ico::before{ top:-6px; } #hjf-gnb-toggle .hjf-ico::after{ top:6px; }
#hjf-gnb-toggle.is-open .hjf-ico{ background:transparent; }
#hjf-gnb-toggle.is-open .hjf-ico::before{ top:0; transform:rotate(45deg); }
#hjf-gnb-toggle.is-open .hjf-ico::after { top:0; transform:rotate(-45deg); }
@media (max-width:1200px){ #hjf-gnb-toggle{ display:inline-flex !important; } }

/* ====== (핵심) 메뉴 열릴 때 다른 딤·필터·의사요소 전부 무력화 ====== */
html.hjf-gnb-open .ui-widget-overlay,
html.hjf-gnb-open .ui-dialog,
html.hjf-gnb-open .modal, html.hjf-gnb-open .modal-backdrop,
html.hjf-gnb-open .layer, html.hjf-gnb-open .layer_bg, html.hjf-gnb-open .layer-pop, html.hjf-gnb-open .layer-pop-bg,
html.hjf-gnb-open .dim, html.hjf-gnb-open .dimmed, html.hjf-gnb-open .black_bg,
html.hjf-gnb-open .sweet-overlay,
html.hjf-gnb-open [aria-modal="true"], html.hjf-gnb-open [role="dialog"], html.hjf-gnb-open [role="alertdialog"]{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important; display:none !important;
}

/* 의사요소로 덮는 테마도 차단 */
html.hjf-gnb-open body::before,
html.hjf-gnb-open body::after,
html.hjf-gnb-open #wrap::before,
html.hjf-gnb-open #wrap::after,
html.hjf-gnb-open #container::before,
html.hjf-gnb-open #container::after{
  content:none !important; display:none !important;
}

/* (최후방어) 배경을 어둡게 만드는 전역 효과 제거 */
html.hjf-gnb-open body,
html.hjf-gnb-open #wrap,
html.hjf-gnb-open #container{
  background: #fff !important;
  filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* 전역 transform/overflow 영향 제거 */
html.hjf-gnb-open, body.hjf-gnb-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }

/* ===== Vars ===== */
:root{
  --hjx-h:72px; --hjx-line:#e9eef3; --hjx-accent:#0c4da2;
  --hjx-shadow:0 10px 30px rgba(0,0,0,.08);
  --z-toggle:2147483640; --z-drawer:2147483635; --z-backdrop:2147483630;
}

/* ===== Header Row ===== */
.hjx-header{ position:sticky; top:0; background:#fff; border-bottom:1px solid var(--hjx-line); z-index:1000; }
.hjx-row{ max-width:1280px; margin:0 auto; height:var(--hjx-h); display:flex; align-items:center; gap:18px; padding:0 20px; }
.hjx-logo img{ height:36px; display:block; }
.hjx-util{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.hjx-btn{ display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 14px; border-radius:10px; font-size:14px; border:0; background:var(--hjx-accent); color:#fff; }
.hjx-btn--outline{ background:#fff; color:var(--hjx-accent); border:1px solid var(--hjx-accent); }

/* ===== Toggle (Hamburger) ===== */
.hjx-toggle{ margin-left:8px; width:44px; height:44px; padding:8px; border:1px solid var(--hjx-line);
  background:#fff; border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.04);
  display:none; align-items:center; justify-content:center; cursor:pointer; }
.hjx-toggle:hover{ box-shadow:0 2px 8px rgba(16,24,40,.08); }
.hjx-toggle .hjx-ico{ position:relative; width:24px; height:2px; background:var(--hjx-accent); border-radius:2px; display:block; }
.hjx-toggle .hjx-ico::before,.hjx-toggle .hjx-ico::after{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--hjx-accent); border-radius:2px; }
.hjx-toggle .hjx-ico::before{ top:-6px; } .hjx-toggle .hjx-ico::after{ top:6px; }
.hjx-toggle.is-open .hjx-ico{ background:transparent; }
.hjx-toggle.is-open .hjx-ico::before{ top:0; transform:rotate(45deg); }
.hjx-toggle.is-open .hjx-ico::after { top:0; transform:rotate(-45deg); }

/* ===== Drawer ===== */
.hjx-drawer{ margin-left:16px; }
.hjx-nav{ display:flex; align-items:center; gap:18px; }
.hjx-item > a, .hjx-item > .hjx-subbtn{ font-weight:600; font-size:15px; color:#111; padding:10px 8px; border-radius:8px; }
.hjx-item > a:hover, .hjx-item > .hjx-subbtn:hover{ color:var(--hjx-accent); background:#f3f7ff; }

/* Desktop submenu (hover) */
.hjx-item.hjx-has{ position:relative; }
.hjx-item .hjx-sub{ position:absolute; top:calc(100% + 8px); left:0; min-width:240px; background:#fff;
  border:1px solid var(--hjx-line); border-radius:14px; padding:8px; box-shadow:var(--hjx-shadow); display:none; }
.hjx-item:hover > .hjx-sub{ display:block; }
.hjx-sub a{ display:block; padding:10px 12px; border-radius:8px; color:#333; font-size:14px; }
.hjx-sub a:hover{ background:#f6f9ff; color:var(--hjx-accent); }

/* ===== Mobile ===== */
@media (max-width:1200px){
  .hjx-toggle{ display:inline-flex !important; z-index:var(--z-toggle) !important; }
  .hjx-drawer{
    position:fixed; top:0; right:0; bottom:0; width:min(86vw,380px); max-width:380px; background:#fff;
    transform:translateX(100%); transition:transform .32s ease; box-shadow:0 10px 30px rgba(0,0,0,.18);
    padding:84px 16px 20px; overflow:auto; z-index:var(--z-drawer) !important;
  }
  .hjx-drawer.open{ transform:translateX(0); }
  /* list vertical */
  .hjx-nav{ flex-direction:column; align-items:stretch; gap:6px; }
  .hjx-item > a, .hjx-item > .hjx-subbtn{ display:block; background:#f7f9fc; padding:14px 12px; border-radius:12px; text-align:left; }
  /* accordion */
  .hjx-item .hjx-sub{ position:static; display:none; border:0; box-shadow:none; padding:6px 6px 10px 12px; }
  .hjx-item.open .hjx-sub{ display:block; }
  /* disable desktop hover on mobile */
  .hjx-item:hover > .hjx-sub{ display:none; }
}

/* ===== Backdrop (JS가 동적 생성) ===== */
#hjx-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.68); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease; z-index:var(--z-backdrop) !important;
}
#hjx-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }

/* ===== Kill-switch: 우리 메뉴 열릴 때 타 딤/모달 차단 ===== */
html.hjx-open .ui-widget-overlay,
html.hjx-open .ui-dialog,
html.hjx-open .modal, html.hjx-open .modal-backdrop,
html.hjx-open .layer, html.hjx-open .layer_bg, html.hjx-open .layer-pop, html.hjx-open .layer-pop-bg,
html.hjx-open .dim, html.hjx-open .dimmed, html.hjx-open .black_bg,
html.hjx-open .sweet-overlay,
html.hjx-open [aria-modal="true"], html.hjx-open [role="dialog"], html.hjx-open [role="alertdialog"]{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important; display:none !important;
}
html.hjx-open body::before, html.hjx-open body::after,
html.hjx-open #wrap::before, html.hjx-open #wrap::after,
html.hjx-open #container::before, html.hjx-open #container::after{ content:none !important; display:none !important; }

/* fixed 분리 방지 */
html.hjx-open, body.hjx-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }

:root{
  --hjx-h:72px; --hjx-line:#e9eef3; --hjx-accent:#0c4da2;
  --hjx-shadow:0 10px 30px rgba(0,0,0,.08);
  --z-toggle:2147483640; --z-drawer:2147483635; --z-backdrop:2147483630;
}

/* Header skeleton */
#hjx-header{ position:sticky; top:0; background:#fff; border-bottom:1px solid var(--hjx-line); z-index:1000; }
#hjx-header .hjx-row{ max-width:1280px; margin:0 auto; height:var(--hjx-h);
  display:flex !important; align-items:center; gap:18px; padding:0 20px; }
#hjx-header .hjx-logo img{ height:36px; display:block; }

/* Util buttons */
#hjx-header .hjx-util{ margin-left:auto; display:flex; gap:10px; align-items:center; }
#hjx-header .hjx-btn{ display:inline-flex; align-items:center; justify-content:center; height:34px;
  padding:0 14px; border-radius:10px; font-size:14px; border:0; background:var(--hjx-accent); color:#fff; white-space:nowrap; }
#hjx-header .hjx-btn--outline{ background:#fff; color:var(--hjx-accent); border:1px solid var(--hjx-accent); }

/* Desktop GNB */
#hjx-header .hjx-drawer{ margin-left:16px; }
#hjx-header .hjx-nav{ display:flex !important; align-items:center; gap:18px; }
#hjx-header .hjx-item > a,
#hjx-header .hjx-item > .hjx-subbtn{
  font-weight:600; font-size:15px; color:#111; padding:10px 8px; border-radius:8px; line-height:1;
}
#hjx-header .hjx-item > a:hover,
#hjx-header .hjx-item > .hjx-subbtn:hover{ color:var(--hjx-accent); background:#f3f7ff; }

#hjx-header .hjx-item.hjx-has{ position:relative; }
#hjx-header .hjx-item .hjx-sub{
  position:absolute; top:calc(100% + 8px); left:0; min-width:240px; background:#fff;
  border:1px solid var(--hjx-line); border-radius:14px; padding:8px; box-shadow:var(--hjx-shadow);
  display:none;
}
#hjx-header .hjx-item:hover > .hjx-sub{ display:block; }
#hjx-header .hjx-sub a{ display:block; padding:10px 12px; border-radius:8px; color:#333; font-size:14px; }
#hjx-header .hjx-sub a:hover{ background:#f6f9ff; color:var(--hjx-accent); }

/* Hamburger */
#hjx-header .hjx-toggle{
  width:44px; height:44px; padding:8px; border:1px solid var(--hjx-line);
  background:#fff; border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.04);
  display:none; align-items:center; justify-content:center; cursor:pointer; margin-left:8px;
}
#hjx-header .hjx-toggle:hover{ box-shadow:0 2px 8px rgba(16,24,40,.08); }
#hjx-header .hjx-toggle .hjx-ico{ position:relative; width:24px; height:2px; background:var(--hjx-accent); border-radius:2px; display:block; }
#hjx-header .hjx-toggle .hjx-ico::before,
#hjx-header .hjx-toggle .hjx-ico::after{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--hjx-accent); border-radius:2px; }
#hjx-header .hjx-toggle .hjx-ico::before{ top:-6px; } 
#hjx-header .hjx-toggle .hjx-ico::after { top: 6px; }
#hjx-header .hjx-toggle.is-open .hjx-ico{ background:transparent; }
#hjx-header .hjx-toggle.is-open .hjx-ico::before{ top:0; transform:rotate(45deg); }
#hjx-header .hjx-toggle.is-open .hjx-ico::after { top:0; transform:rotate(-45deg); }

/* Mobile drawer */
@media (max-width:1200px){
  #hjx-header .hjx-toggle{ display:inline-flex !important; z-index:var(--z-toggle) !important; }
  #hjx-header .hjx-util{ order:2; }     /* 로고 - 유틸 - 토글 순 배치 */
  #hjx-header .hjx-drawer{
    position:fixed; top:0; right:0; bottom:0; width:min(86vw,380px); max-width:380px; background:#fff;
    transform:translateX(100%); transition:transform .32s ease; box-shadow:0 10px 30px rgba(0,0,0,.18);
    padding:84px 16px 20px; overflow:auto; z-index:var(--z-drawer) !important;
  }
  #hjx-header .hjx-drawer.open{ transform:translateX(0); }
  #hjx-header .hjx-nav{ flex-direction:column !important; align-items:stretch; gap:6px; }
  #hjx-header .hjx-item > a, #hjx-header .hjx-item > .hjx-subbtn{
    display:block; background:#f7f9fc; padding:14px 12px; border-radius:12px; text-align:left;
  }
  #hjx-header .hjx-item .hjx-sub{ position:static; display:none; border:0; box-shadow:none; padding:6px 6px 10px 12px; }
  #hjx-header .hjx-item.open .hjx-sub{ display:block; }
  #hjx-header .hjx-item:hover > .hjx-sub{ display:none; } /* 모바일에서 호버 무효 */
}

/* Backdrop (JS 생성) */
#hjx-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.68); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease; z-index:var(--z-backdrop) !important;
}
#hjx-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }

/* 다른 전역 딤/모달 무력화 (메뉴 열릴 때) */
html.hjx-open .ui-widget-overlay,
html.hjx-open .ui-dialog,
html.hjx-open .modal, html.hjx-open .modal-backdrop,
html.hjx-open .layer, html.hjx-open .layer_bg, html.hjx-open .layer-pop, html.hjx-open .layer-pop-bg,
html.hjx-open .dim, html.hjx-open .dimmed, html.hjx-open .black_bg,
html.hjx-open .sweet-overlay,
html.hjx-open [aria-modal="true"], html.hjx-open [role="dialog"], html.hjx-open [role="alertdialog"]{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important; display:none !important;
}
/* 의사요소 딤도 차단 */
html.hjx-open body::before, html.hjx-open body::after,
html.hjx-open #wrap::before, html.hjx-open #wrap::after,
html.hjx-open #container::before, html.hjx-open #container::after{
  content:none !important; display:none !important;
}
/* transform/fixed 분리 방지 */
html.hjx-open, body.hjx-open{ overflow:hidden !important; }
#wrap, #container, #page, body > header{ transform:none !important; overflow:visible !important; }


/* ===== 1) PC 드롭다운 안정화: 호버 브릿지로 '틈' 제거 ===== */
#hjx-header .hjx-item.hjx-has { position: relative; }
#hjx-header .hjx-item.hjx-has > .hjx-sub {
  pointer-events: auto;
}
#hjx-header .hjx-item.hjx-has::after{
  /* 메인 메뉴와 서브 사이 공중에 '보이지 않는 다리'를 만들어 마우스가 지나가도 hover 유지 */
  content:""; position:absolute; left:0; right:0; top:100%;
  height:14px; /* 메뉴와 서브 사이 간격 커버 */
  background: transparent;
  /* 데스크탑에서만 필요 */
  display:block;
}
@media (max-width:1200px){
  #hjx-header .hjx-item.hjx-has::after{ display:none; }
}

/* ===== 2) 모바일 정렬: 로그인/회원가입은 오른쪽, 햄버거는 맨 끝 ===== */
@media (max-width:1200px){
  #hjx-header .hjx-row{ display:flex; align-items:center; }
  #hjx-header .hjx-logo{ order:1; }
  #hjx-header .hjx-util{ order:2; margin-left:auto; } /* 우측으로 밀착 */
  #hjx-header .hjx-toggle{ order:3; margin-left:8px; } /* 햄버거는 항상 맨 끝 */
  /* 드로어는 고정 포지션이라 헤더 라인업에 영향 없음 */
}

/* ===== 3) 딤 충돌 완전 차단(우선순위 강화) ===== */
html.hjx-open .ui-widget-overlay,
html.hjx-open .ui-dialog,
html.hjx-open .modal, html.hjx-open .modal-backdrop,
html.hjx-open .layer, html.hjx-open .layer_bg, html.hjx-open .layer-pop, html.hjx-open .layer-pop-bg,
html.hjx-open .dim, html.hjx-open .dimmed, html.hjx-open .black_bg,
html.hjx-open .sweet-overlay,
html.hjx-open [aria-modal="true"], html.hjx-open [role="dialog"], html.hjx-open [role="alertdialog"]{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important; display:none !important;
}
html.hjx-open body::before, html.hjx-open body::after,
html.hjx-open #wrap::before, html.hjx-open #wrap::after,
html.hjx-open #container::before, html.hjx-open #container::after{
  content:none !important; display:none !important;
}

/* (최후방어) 어떤 스크립트가 body에 직접 필터/반투명 걸어도 무시 */
html.hjx-open body, html.hjx-open #wrap, html.hjx-open #container{
  filter:none !important; backdrop-filter:none !important; opacity:1 !important; background:#fff !important;
}



/* =========================================
   FIX 1) PC 강제: 햄버거 숨기고 GNB 노출
   - 상위 CSS가 display를 오버라이드해도 이 규칙이 이깁니다.
   ========================================= */
@media (min-width: 961px){
  .gnb-toggle{ display:none !important; }
  .gnb{
    position: static !important;
    display: block !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }
  .gnb-list{
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
  }
}

/* =========================================
   FIX 2) 모바일에서 메뉴 열릴 때 외부 ‘검은 딤’ 죽이기
   - modal.css / common.css 에 있는 모든 딤/모달을 무력화
   - header.js 가 html 에 .gnb-open 클래스를 붙입니다.
   ========================================= */
html.gnb-open #modal,
html.gnb-open .modal-backdrop,
html.gnb-open .modal_wrap,
html.gnb-open .modal_wrap.in,
html.gnb-open .modal-backdrop.in,
html.gnb-open .wrap-loading,
html.gnb-open .wrap-loading-cutting,
html.gnb-open .dim,
html.gnb-open .dimmed,
html.gnb-open .black_bg,
html.gnb-open .sweet-overlay,
html.gnb-open .layer,
html.gnb-open .layer_bg,
html.gnb-open .layer-pop,
html.gnb-open .layer-pop-bg,
html.gnb-open .table_scroll .scroll-induce{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* (선택) 모바일에서 로그인/회원가입이 햄버거 왼쪽으로 밀릴 때 정렬 보정 */
@media (max-width: 960px){
  .header-inner{
    display:flex; align-items:center; gap:16px;
  }
  .logo{ order: 1; }
  .util{ order: 2; margin-left: auto; }
  .gnb-toggle{ order: 3; } /* 햄버거를 가장 오른쪽 */
}


/* 햄버거 버튼이 다른 요소에 가려지지 않도록 */
.hjx-header, .hjx-row { position: relative; }
.hjx-toggle{
  position: relative;
  z-index: 1002;           /* 드로어(1001) 및 기타 요소보다 위 */
  display: inline-flex; align-items:center; justify-content:center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid #e5e7eb; background:#fff; cursor: pointer;
}

/* 햄버거 아이콘(3줄) */
.hjx-ico{ position: relative; width: 20px; height: 2px; background: transparent; }
.hjx-ico::before, .hjx-ico::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#111;
}
.hjx-ico::before{ top:-6px; }
.hjx-ico::after { top: 6px; }
.hjx-toggle:before{
  content:""; position:absolute; left:11px; right:11px; height:2px; background:#111;
}

/* 드로어(우측 슬라이드) */
#hjx-drawer{
  position: fixed; top:0; right:0; bottom:0; width: 80vw; max-width: 360px;
  background:#fff; transform: translateX(100%); transition: transform .3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 1001; overflow:auto; padding: 84px 16px 20px;
}
#hjx-drawer.is-open{ transform: translateX(0); }

/* 백드롭(딤) */
#hjx-dim{
  position: fixed; inset:0; background: rgba(0,0,0,.46);
  opacity:0; visibility:hidden; transition: opacity .2s ease;
  z-index: 1000;
}
#hjx-dim.show{ opacity:1; visibility:visible; }

/* PC에선 드로어/딤 무력화 + 가로 GNB 노출 */
@media (min-width:961px){
  #hjx-drawer{ position: static; transform:none !important; box-shadow:none; width:auto; max-width:none; padding:0; overflow:visible; }
  #hjx-dim{ display:none !important; }
  .hjx-toggle{ display:none !important; }
}

/* ===== GNB 열렸을 때 외부 딤/모달/로딩 강제 OFF ===== */
html.gnb-open #modal,
html.gnb-open .modal-backdrop,
html.gnb-open .modal_wrap,
html.gnb-open .wrap-loading,
html.gnb-open .wrap-loading-cutting {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 혹시 최상위 레이어가 z-index로 덮어도, 우리 드로어/딤이 위에 오게 */
#hjx-dim{ z-index: 10000; }
#hjx-drawer{ z-index: 10001; }
.hjx-toggle{ z-index: 10002; }


/* ===== Mobile accordion for sub menus ===== */
@media (max-width: 960px){
  /* 하위메뉴는 높이 애니메이션으로 열고 닫음 */
  .hjx-sub{
    display:block;           /* 레이아웃은 유지 */
    overflow:hidden;
    max-height:0;            /* 닫힘 */
    opacity:.0;
    padding:0;               /* 닫힐 때 패딩 제거 */
    border:0;
    transition: max-height .28s ease, opacity .28s ease, padding .2s ease;
  }
  .hjx-item.open > .hjx-sub{
    /* 열릴 때는 JS가 max-height를 실제 높이로 세팅해줌 */
    opacity:1;
    padding:6px 0 8px;       /* 열릴 때만 패딩 */
  }

  /* 토글 버튼(부모 메뉴) 비주얼: 오른쪽 화살표 회전 */
  .hjx-subbtn{
    position:relative;
    width:100%;
    text-align:left;
    padding-right:28px;      /* 화살표 공간 */
  }
  .hjx-subbtn::after{
    content:"";
    position:absolute; right:8px; top:50%; transform:translateY(-50%) rotate(0deg);
    width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transition:transform .2s ease;
    /* 화살표 모양(>) */
    transform: translateY(-60%) rotate(-45deg);
  }
  .hjx-item.open > .hjx-subbtn::after{
    /* 펼쳐졌을 때 아래 방향 */
    transform: translateY(-30%) rotate(45deg);
  }

  /* 데스크탑 호버 드롭다운 동작은 모바일에서 무력화(깜빡임 방지) */
  .hjx-item.hjx-has:hover > .hjx-sub{ display:block; max-height:0; opacity:0; padding:0; }
}

/* ====== Mobile hamburger => X ====== */
.hjx-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; line-height:0;
}
.hjx-toggle .hjx-ico{
  position:relative; display:block; width:22px; height:2px; background:#111;
  transition:background .2s ease;
}
.hjx-toggle .hjx-ico::before,
.hjx-toggle .hjx-ico::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#111;
  transition: transform .22s ease, top .22s ease, opacity .22s ease;
}
.hjx-toggle .hjx-ico::before{ top:-7px; }
.hjx-toggle .hjx-ico::after { top: 7px; }

/* 열림 상태: 가운데 선 숨기고 X 로 변환 */
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico{ background:transparent; }
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::before{
  top:0; transform: rotate(45deg);
}
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::after{
  top:0; transform: rotate(-45deg);
}

/* ====== Mobile sub accordion (보이는/슬라이드 효과) ====== */
@media (max-width: 960px){
  /* PC용 display:none 이 있어도 강제 보이게 */
  #hjx-drawer .hjx-sub{
    display:block !important;
    overflow:hidden;
    max-height:0;           /* 닫힘 기본값 */
    opacity:.0;
    padding:0;
    border:0;
    transition:max-height .28s ease, opacity .28s ease, padding .2s ease;
  }
  #hjx-drawer .hjx-item.open > .hjx-sub{
    opacity:1;
    padding:6px 0 8px;
    /* max-height는 JS에서 scrollHeight로 세팅 */
  }

  /* 화살표(서브토글) 회전 비주얼 */
  .hjx-subbtn{
    position:relative; width:100%; text-align:left; padding-right:28px;
  }
  .hjx-subbtn::after{
    content:""; position:absolute; right:8px; top:50%;
    width:10px; height:10px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform: translateY(-60%) rotate(-45deg); /* > */
    transition: transform .2s ease;
  }
  .hjx-item.open > .hjx-subbtn::after{
    transform: translateY(-30%) rotate(45deg);  /* v */
  }

  /* 모바일에서는 PC hover 드롭다운 무력화 */
  .hjx-item.hjx-has:hover > .hjx-sub{
    max-height:0; opacity:0; padding:0;
  }
}

/* 헤더가 다른 요소보다 위에 오도록 */
.hjx-header{ position:sticky; top:0; z-index:1000; background:#fff; }

/* 햄버거 버튼(X 변환 포함) */
.hjx-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; line-height:0;
}
.hjx-toggle .hjx-ico{
  position:relative; display:block; width:22px; height:2px; background:#111;
  transition:background .2s ease;
}
.hjx-toggle .hjx-ico::before,
.hjx-toggle .hjx-ico::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#111;
  transition: transform .22s ease, top .22s ease;
}
.hjx-toggle .hjx-ico::before{ top:-7px; }
.hjx-toggle .hjx-ico::after { top: 7px; }
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico{ background:transparent; }
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::before{ top:0; transform: rotate(45deg); }
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::after { top:0; transform: rotate(-45deg); }

/* 드로어 기본(모바일에서 오른쪽 슬라이드 라면 여기에 전환 추가 가능) */
.hjx-drawer{ transition: transform .25s ease; }
.hjx-drawer.is-open{ transform: translateZ(0); }

/* 모바일 서브 아코디언 */
@media (max-width: 960px){
  #hjx-drawer .hjx-sub{
    display:block !important;
    overflow:hidden;
    max-height:0;
    opacity:1;
    padding:0;
    border:0;
    transition:max-height .28s ease;
  }
  #hjx-drawer .hjx-item.open > .hjx-sub{ /* max-height는 JS가 설정 */ }

  /* 화살표 회전 */
  .hjx-subbtn{ position:relative; width:100%; text-align:left; padding-right:28px; }
  .hjx-subbtn::after{
    content:""; position:absolute; right:8px; top:50%;
    width:10px; height:10px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform: translateY(-60%) rotate(-45deg); /* > */
    transition: transform .2s ease;
  }
  .hjx-item.open > .hjx-subbtn::after{
    transform: translateY(-30%) rotate(45deg); /* v */
  }
}

/* 스크롤락 (딤은 사용 안 함) */
html.hjx-open, body.hjx-open{ overflow:hidden; }

/* =========================================
   Mobile drawer spacing normalization
   - 모든 1차/2차 메뉴 상하 간격을 균일하게
   - 접근성 고려해 탭 타깃 높이 44px 확보
   ========================================= */
@media (max-width: 960px){

  /* 드로어 내부 기본 여백 정리 */
  #hjx-drawer { padding: 84px 16px 18px; }
  #hjx-drawer .hjx-nav{
    list-style: none; margin: 0; padding: 0;
  }

  /* 1차 항목 블록화 + 간격(일괄 6px) */
  #hjx-drawer .hjx-nav > .hjx-item{
    margin: 6px 0;   /* 모든 항목 동일 간격 */
  }

  /* 링크/버튼 공통 탭 타깃 */
  #hjx-drawer .hjx-nav > .hjx-item > a,
  #hjx-drawer .hjx-nav > .hjx-item > .hjx-subbtn{
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px;                  /* 탭 타깃 높이 */
    padding: 10px 12px;                /* 좌우 여백 */
    border-radius: 12px;
    background: #f7f9fc;
    color: #111; font-size: 15px; line-height: 1.4;
    text-decoration: none;
  }

  /* 버튼/링크 주변 불필요한 여백 제거(브라우저 기본값 무력화) */
  #hjx-drawer .hjx-subbtn{ margin: 0; border: 0; background: none; }

  /* 2차 메뉴(아코디언) – 부드러운 슬라이드 */
  #hjx-drawer .hjx-item .hjx-sub{
    overflow: hidden;
    max-height: 0;
    padding: 0 6px;                   /* 좌우 살짝 */
    margin: 0;
    border: 0;
    transition: max-height .28s ease, padding-top .2s ease;
    background: transparent;
  }
  /* 열렸을 때만 상단 여백 부여 */
  #hjx-drawer .hjx-item.open .hjx-sub{
    padding-top: 6px;
  }

  /* 2차 항목 각각의 높이/간격 */
  #hjx-drawer .hjx-item .hjx-sub li{
    list-style: none; margin: 4px 0;  /* 균일 간격 */
  }
  #hjx-drawer .hjx-item .hjx-sub a{
    display: block;
    min-height: 40px;                 /* 하위는 약간 낮게 */
    padding: 8px 10px;
    border-radius: 10px;
    color: #333; font-size: 14px; line-height: 1.4;
    text-decoration: none;
  }
  #hjx-drawer .hjx-item .hjx-sub a:hover{
    background: #f0f4ff;
    color: #0c4da2;
  }

  /* 아코디언 펼칠 때 실제 높이만큼 열리도록 JS에서 .open을 붙여주면
     아래 max-height: auto가 안 먹으니, transition은 max-height로만 처리.
     (JS에서 scrollHeight를 max-height에 설정해줌)
  */

  /* 마지막 요소 하단 과도한 여백 방지 */
  #hjx-drawer .hjx-nav > .hjx-item:last-child{ margin-bottom: 6px; }
}


/* ===== Hamburger → X (가운데 막대 숨김 + 자연스러운 전환) ===== */
.hjx-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid #e9eef3; border-radius:12px;
  background:#fff;
}
.hjx-toggle .hjx-ico{
  position:relative; display:block; width:22px; height:2px;
  background:#111; border-radius:2px;       /* ← 이게 ‘가운데 막대’ */
  transition:background .2s ease;
}
.hjx-toggle .hjx-ico::before,
.hjx-toggle .hjx-ico::after{
  content:""; position:absolute; left:0; width:22px; height:2px;
  background:#111; border-radius:2px;
  transition:transform .25s ease, top .25s ease, opacity .2s ease;
}
.hjx-toggle .hjx-ico::before{ top:-7px; }
.hjx-toggle .hjx-ico::after{  top: 7px; }

/* 열림 상태: X 아이콘 */
.hjx-toggle[aria-expanded="true"] .hjx-ico{
  background:transparent !important;  /* ← 가운데 선 제거(핵심) */
  box-shadow:none !important;
}
.hjx-toggle[aria-expanded="true"] .hjx-ico::before{
  top:0; transform:rotate(45deg);
}
.hjx-toggle[aria-expanded="true"] .hjx-ico::after{
  top:0; transform:rotate(-45deg);
}

/* (선택) hover/focus 미세 보정 */
.hjx-toggle:hover{ background:#f9fbff; }
.hjx-toggle:focus-visible{ outline:2px solid #0c4da2; outline-offset:2px; }


/* ===== [HAMBURGER ↔ X] single-source + animation ===== */

/* 과거에 버튼에 선을 그어버리는 규칙(가장 흔한 범인) 제거 */
#hjx-header .hjx-toggle::before,
#hjx-header .hjx-toggle::after { display:none !important; content:none !important; }

/* 혹시 남아있는 .bar 구현은 완전 차단 */
#hjx-header .hjx-toggle .bar { display:none !important; }

/* 버튼 프레임 */
#hjx-header .hjx-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:8px;
  border:1px solid #e9eef3; border-radius:12px; background:#fff; line-height:0;
}

/* 아이콘(3줄의 베이스) */
#hjx-header .hjx-toggle .hjx-ico{
  position:relative; display:block; width:22px; height:2px; background:#111; border-radius:2px;
  transition: background-color .2s ease;
}
#hjx-header .hjx-toggle .hjx-ico::before,
#hjx-header .hjx-toggle .hjx-ico::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#111; border-radius:2px;
  transition: transform .22s ease, top .22s ease, opacity .22s ease;
}
#hjx-header .hjx-toggle .hjx-ico::before{ top:-7px; }
#hjx-header .hjx-toggle .hjx-ico::after { top: 7px; }

/* 열림 상태 → X 로 변환 (가운데 줄 투명 + 대각선 교차) */
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico{ background:transparent; }
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::before{ top:0; transform:rotate(45deg); }
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::after { top:0; transform:rotate(-45deg); }

/* 햄버거 아이콘 색상을 '스카이블루(#59a5d8)'로 통일 */
#hjx-header .hjx-toggle{
  color:#59a5d8;               /* 아이콘 색 기본값 */
  border-color:#e6ecf4;
}

/* 아이콘 3줄은 currentColor를 쓰게 변경 */
#hjx-header .hjx-toggle .hjx-ico,
#hjx-header .hjx-toggle .hjx-ico::before,
#hjx-header .hjx-toggle .hjx-ico::after{
  background: currentColor !important;
}

/* 열림(X) 상태에서도 같은 색 유지 */
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico{
  background: transparent !important;   /* 가운데 줄 숨김 */
}
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::before,
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::after{
  background: currentColor !important;  /* 대각선도 스카이블루 */
}

/* (선택) 호버 시 살짝 강조하고 색은 유지 */
#hjx-header .hjx-toggle:hover{ background:#f9fbff; }

/* ===========================
   HJF Header – Drawer hard lock
   - <=1200px : 기본 '닫힘'
   - 열림 조건: #hjf-gnb.open 또는 html.hjf-gnb-open 또는 aria-hidden="false"
   - backdrop 도 동일
   =========================== */

/* 1) Mobile/Tablet (<=1200px): 기본 닫힘 강제 */
@media (max-width:1200px){
  /* 드로어 기본값: 닫힘 */
  #hjf-gnb{
    position: fixed; top:0; right:0; bottom:0;
    width: min(86vw, 380px);
    background:#fff;
    transform: translateX(100%) !important;  /* ← 무조건 화면 밖 */
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .32s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: 84px 16px 20px;
    overflow: auto;
    z-index: 2147483635;
  }
  /* 오버레이 기본: 닫힘 */
  #hjf-gnb-backdrop{
    position: fixed; inset:0;
    background: rgba(0,0,0,.68);
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease;
    z-index: 2147483630;
  }

  /* ★ 열림 조건(셋 중 하나만 충족해도 열림) */
  html.hjf-gnb-open #hjf-gnb,
  #hjf-gnb.open,
  #hjf-gnb[aria-hidden="false"]{
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  html.hjf-gnb-open #hjf-gnb-backdrop,
  #hjf-gnb-backdrop.show{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* 햄버거는 1200px 이하에서만 노출 */
  #hjf-gnb-toggle{ display:inline-flex !important; z-index:2147483640 !important; }
  /* 데스크탑용 유틸/가로 GNB가 강제로 보이는 현상 차단 */
  #hjf-header .hjf-util{ display:none !important; }
}

/* 2) Desktop (>=1201px): 데스크탑 강제 복구 */
@media (min-width:1201px){
  #hjf-gnb{
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  #hjf-gnb-backdrop{ display:none !important; }
  #hjf-gnb-toggle{ display:none !important; }
}

/* 3) 혹시 전역 규칙이 드로어를 ‘보이게’ 만드는 경우까지 차단 */
@media (max-width:1200px){
  /* transform/visibility를 망치는 전역 규칙 무력화 */
  html:not(.hjf-gnb-open) #hjf-gnb:not(.open):not([aria-hidden="false"]){
    transform: translateX(100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 4) (옵션) 다른 헤더 변형(#hjx-*)도 동일 증상일 때 같이 잠금 */
@media (max-width:1200px){
  .hjx-drawer{
    transform: translateX(100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html.hjx-open .hjx-drawer,
  .hjx-drawer.open,
  .hjx-drawer[aria-hidden="false"]{
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}



/* ✅ 작은 화면에서 로그인/회원가입만 숨김 — 메뉴/햄버거는 그대로 */
@media (max-width: 560px){
  /* 로그인/회원가입 버튼만 감춤 */
  #hjx-header .hjx-util a[href*="mode=login"],
  #hjx-header .hjx-util a[href*="mode=sign_up"]{
    display: none !important;
  }

  /* 유틸 영역 여백 압축(자투리 공간 줄이기) */
  #hjx-header .hjx-util{
    gap:6px !important;
  }
}

/* ✅ 아주 작은 화면(초소형)에서는 사용자명 텍스트도 접어 공간 확보(로그아웃 버튼은 유지) */
@media (max-width: 400px){
  #hjx-header .hjx-user{ display:none !important; }
}


/* 기본은 감춤 */
.hjx-mobile-auth{ display:none; }

/* 작은 화면에서만: 상단 유틸(로그인/회원가입) 숨김 + 드로어 하단에 노출 */
@media (max-width: 560px){
  /* 상단 우측 유틸 숨김 (햄버거/메뉴에는 영향 없음) */
  #hjx-header .hjx-util{ display:none !important; }

  /* 드로어 하단 인증 블록 표시 */
  .hjx-drawer .hjx-mobile-auth{
    display:block;
    padding:14px 16px;
    border-top:1px solid #eee;
    background:#fff;
  }
  .hjx-drawer .hjx-mobile-auth .m-auth-title{
    font-weight:700; color:#111; margin-bottom:8px;
  }
  .hjx-drawer .hjx-mobile-auth .m-auth-row{
    display:flex; gap:8px;
  }
  .hjx-drawer .hjx-mobile-auth .btn{
    flex:1 1 0;
    display:inline-flex; justify-content:center; align-items:center;
    height:42px; border-radius:10px; font-weight:700;
    border:1px solid #cfd4dc; background:#fff; color:#111;
  }
  .hjx-drawer .hjx-mobile-auth .btn.primary{
    background:#1f66ff; color:#fff; border-color:#1f66ff;
  }
  .hjx-drawer .hjx-mobile-auth .btn.outline{
    background:#fff; color:#111; border-color:#cfd4dc;
  }

  /* 드로어가 세로 스크롤 메뉴라면 하단에 자연히 모이도록 약간의 여백 */
  .hjx-drawer .hjx-nav{ padding-bottom:12px; }
}

/* 아주 작은 화면에서 버튼 높이/폰트 살짝 축소 */
@media (max-width: 360px){
  .hjx-drawer .hjx-mobile-auth .btn{ height:40px; font-size:.95rem; }
}

/* === 햄버거를 항상 우측 끝으로 고정 === */
#hjx-header .hjx-row{
  display:flex;
  align-items:center;
  gap:10px;
  /* 행이 넘칠 때도 줄바꿈 없이 한 줄 유지 */
  flex-wrap:nowrap;
}

#hjx-header .hjx-logo{ order:0; flex:0 0 auto; }
#hjx-header .hjx-drawer{ order:1; flex:1 1 auto; min-width:0; }  /* 가운데 확장 */
#hjx-header .hjx-util{ order:2; flex:0 0 auto; display:flex; gap:8px; align-items:center; }

/* ✅ 햄버거는 언제나 맨 오른쪽 + 자동 왼쪽 여백 */
#hjx-header #hjx-menu-toggle.hjx-toggle{
  order: 99;                    /* 맨 뒤로 */
  margin-left: auto !important; /* 남는 공간을 모두 왼쪽에 */
  display: inline-flex;         /* 항상 공간 차지 */
  width:40px; height:40px; border:0; background:transparent; cursor:pointer;
  z-index: 51;                  /* 겹침 방지 */
}
#hjx-header .hjx-toggle .hjx-ico{
  position:relative; display:block; width:22px; height:2px; background:#111; margin:0 auto;
}
#hjx-header .hjx-toggle .hjx-ico::before,
#hjx-header .hjx-toggle .hjx-ico::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#111;
}
#hjx-header .hjx-toggle .hjx-ico::before{ top:-7px; }
#hjx-header .hjx-toggle .hjx-ico::after{ top:7px; }

/* 작은 화면에서 상단 유틸 숨김(로그인/회원가입만) — 햄버거/메뉴에는 영향 X */
@media (max-width:560px){
  #hjx-header .hjx-util{ display:none !important; }
}

/* 혹시 다른 CSS가 햄버거를 왼쪽으로 밀어내면 방지(우선순위 강화) */
@media (max-width:1024px){
  #hjx-header #hjx-menu-toggle.hjx-toggle{
    margin-left: auto !important;
  }
}

/* =============== Hamburger → X (no JS change) =============== */

/* 혹시 다른 CSS가 '>' 같은 글자를 만들어내면 제거 */
#hjx-menu-toggle::before,
#hjx-menu-toggle::after{
  content:none !important;
}

/* 햄버거 기본 3줄 */
#hjx-menu-toggle .hjx-ico{
  position:relative;
  display:block;
  width:24px; height:2px;
  margin:0 auto;
  background:currentColor;                 /* 중앙줄 */
  color:#111;
  transition: background .22s ease;
}
#hjx-menu-toggle .hjx-ico::before,
#hjx-menu-toggle .hjx-ico::after{
  content:"";
  position:absolute; left:0; width:24px; height:2px;
  background:currentColor;
  transition: top .22s ease, transform .22s ease, opacity .22s ease;
}
#hjx-menu-toggle .hjx-ico::before{ top:-7px; }  /* 위줄 */
#hjx-menu-toggle .hjx-ico::after { top: 7px; }  /* 아래줄 */

/* 열렸을 때(X 아이콘) — aria-expanded=true 을 신뢰 */
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico{
  background:transparent;                  /* 중앙줄 숨김 */
}
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::before{
  top:0; transform:rotate(45deg);
}
#hjx-menu-toggle[aria-expanded="true"] .hjx-ico::after{
  top:0; transform:rotate(-45deg);
}

/* 혹시 스크립트가 aria-expanded 대신 .is-open 클래스를 쓰면 이것도 지원 */
#hjx-header.is-open #hjx-menu-toggle .hjx-ico{ background:transparent; }
#hjx-header.is-open #hjx-menu-toggle .hjx-ico::before{ top:0; transform:rotate(45deg); }
#hjx-header.is-open #hjx-menu-toggle .hjx-ico::after { top:0; transform:rotate(-45deg); }

/* 아이콘 색상 대비(다크 배경에도 보이게 필요시 조정) */
#hjx-menu-toggle{ color:#111; }


/* =========================
   1) 모바일/태블릿(<=1200px)
   - 드로어가 항상 '모든 것 위'에 오도록
   - 헤더/내용 위로 완전 덮개 역할
   ========================= */
@media (max-width:1200px){
  /* 헤더 행 자체도 상대 위치 확보(레이어 기준점) */
  #hjx-header, .hjx-header, .hjx-row{
    position: relative;
    z-index: 100; /* 기준점 */
  }

  /* 드로어 최상단 올리기 + 완전한 흰 배경으로 하위 UI 가림 */
  #hjx-drawer{
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 380px);
    background: #fff;              /* 투명도 X: 아래 메뉴가 비치지 않게 */
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
    transform: translateX(100%);
    transition: transform .32s ease;
    z-index: 9999 !important;      /* ✅ 레이어 최상단 */
    padding: 84px 16px 20px;       /* 헤더 높이만큼 상단 여백 */
    overflow: auto;
  }
  #hjx-drawer.is-open{ transform: translateX(0); }

  /* 모바일에선 데스크탑 hover 드롭다운 완전 차단 (겹침/깜빡임 방지) */
  #hjx-drawer .hjx-sub{
    position: static !important;
    display: none;                 /* 기본 닫힘 */
    border: 0; box-shadow: none; background: transparent;
    padding: 0;
  }
  #hjx-drawer .hjx-item.open > .hjx-sub{
    display: block;                /* JS가 .open 붙일 때만 */
  }

  /* 드로어 안 링크/버튼 탭 영역 보강(겹침 느낌 줄이기) */
  #hjx-drawer .hjx-item > a,
  #hjx-drawer .hjx-item > .hjx-subbtn{
    display:block; width:100%;
    background:#f7f9fc; border-radius:12px;
    padding:14px 12px;
  }
}

/* =========================
   2) 데스크탑(>1200px)
   - GNB 2차 드롭다운이 본문 위로 자연스럽게 뜨도록
   ========================= */
@media (min-width:1201px){
  /* 서브메뉴가 콘텐츠에 가려지지 않게 */
  #hjx-header .hjx-item.hjx-has{ position: relative; }
  #hjx-header .hjx-item .hjx-sub{
    position: absolute;
    z-index: 1200;                 /* ✅ 본문 레이어보다 위 */
    top: calc(100% + 8px); left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #e9eef3;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: 8px;
  }
}

/* =========================
   3) 햄버거 버튼은 항상 맨 오른쪽 + 위에
   ========================= */
#hjx-header .hjx-row{ display:flex; align-items:center; gap:18px; }
#hjx-menu-toggle.hjx-toggle{
  margin-left: auto;               /* 우측 끝으로 밀착 */
  z-index: 10001;                  /* 드로어보다 살짝 위여도 OK */
}

/* =========================
   4) 혹시 본문 상단 요소가 드로어 위로 올라오면 차단
   ========================= */
#main, .hjf-page, #container, #wrap{
  position: relative;
  z-index: 1;                      /* 본문 레이어는 낮게 고정 */
}


/* 컨테이너/링크를 정확히 로고 크기로 맞춤 */
.hjx-logo, .hjx-logo a { display: inline-flex !important; align-items: center !important; }

/* 로고를 1/2로 축소 */
.hjx-logo img{
  transform: scale(0.7) !important;
  transform-origin: left center !important;
  height: auto !important; width: auto !important;
  display: block !important;
}

/* 상·하 여백 줄이기(헤더가 너무 높다면) */
.hjx-logo { line-height: 1 !important; }