/* 2026-09-22: Figma(node 10297:84792) 전체메뉴 폰트가 Pretendard인데 사이트 전체에 이 폰트가
   로드되어 있지 않아서(@font-face/CDN link 전무, grep으로 확인) 여기서 직접 불러온다.
   head 파일(전역)을 건드리지 않고 이 CSS(헤더 전용)에서만 범위를 좁혀 로드. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

.top-area {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_login .sns-wrap {
  position: relative;
  left: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: 35px;
}

.header_login .sns-wrap a {
  position: relative;
  display: flex;
  width: 34px;
  height: 34px;
  justify-content: center;
  align-items: center;
}

.header_login .sns-wrap a:nth-last-child(1),
.header_login .sns-wrap a:nth-last-child(2),
.header_login .sns-wrap a:nth-last-child(3) {
  margin-right: 0;
}

.header_login .sns-wrap a:nth-child(1) i {
  display: block;
  width: 13px;
  height: 12px;
  background: url("../images/newMain/icon_social01.png") 0 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(1):hover i {
  background: url("../images/newMain/icon_social01.png") -13px 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(2) i {
  display: block;
  width: 18px;
  height: 15px;
  background: url("../images/newMain/icon_social02.png") 0 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(2):hover i {
  background: url("../images/newMain/icon_social02.png") -18px 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(3) i {
  display: block;
  width: 8px;
  height: 14px;
  background: url("../images/newMain/icon_social03.png") 0 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(3):hover i {
  background: url("../images/newMain/icon_social03.png") -8px 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(4) i {
  display: block;
  width: 15px;
  height: 14px;
  background: url("../images/newMain/icon_social04.png") 0 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(4):hover i {
  background: url("../images/newMain/icon_social04.png") -15px 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(5) i {
  display: block;
  width: 8px;
  height: 14px;
  background: url("../images/newMain/icon_social05.png") 0 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(5):hover i {
  background: url("../images/newMain/icon_social05.png") -8px 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(6) i {
  display: block;
  width: 11px;
  height: 13px;
  background: url("../images/newMain/icon_social06.png") 0 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(6):hover i {
  background: url("../images/newMain/icon_social06.png") -11px 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(7) i {
  display: block;
  width: 17px;
  height: 16px;
  background: url("../images/newMain/icon_social07.png") 0 0 no-repeat;
}

.header_login .sns-wrap a:nth-child(7):hover i {
  background: url("../images/newMain/icon_social07.png") -17px 0 no-repeat;
}

.newNavMenu {
  position: relative;
  left: 0px; /* 로그인/회원가입 버튼 우측 끝을 검색창 우측 끝과 맞춤(기존 10px 밀림 제거) */
  top: -0.5px; /* 로그인/회원가입 버튼 세로중앙을 로고 세로중앙과 맞춤 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.newNavMenu li {
  margin-right: 10px;
}

.newNavMenu li:last-child {
  margin-right: 0;
}

.newNavMenu li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 10px;
  box-sizing: border-box;
}

.newNavMenu li.nav-search {
  display: flex;
  align-items: center;
}

.newNavMenu li.nav-search form,
.newNavMenu li.nav-search .searchWrap {
  position: relative;
  display: block;
  width: 250px;
  height: 40px;
  border-radius: 20px;
  background: #f5f5f5;
  overflow: hidden;
  box-sizing: border-box;
}

.newNavMenu li.nav-search .topsearch_input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 40px;
  border: none !important;
  border-bottom: none !important;
  border-radius: 20px;
  padding: 0 44px 0 16px !important;
  font-size: 13px;
  background: transparent;
  box-sizing: border-box;
  opacity: 1;
}

.newNavMenu li.nav-search .searchbutton {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}

.newNavMenu li.nav-search .btn_search {
  position: static;
  top: auto;
  right: auto;
}

.newNavMenu li a:hover {
  color: #555;
}

.newNavMenu li a i {
  position: relative;
  display: block;
  margin-right: 10px;
}

.newNavMenu li.nav01 a i {
  width: 27px;
  height: 27px;
  background: url(../images/newMain/icon_header01.png) 0 0 no-repeat;
}

.newNavMenu li.nav01 a:hover i {
  background: url(../images/newMain/icon_header01.png) -27px 0 no-repeat;
}

.newNavMenu li.nav02 a i {
  width: 23px;
  height: 23px;
  background: url(../images/newMain/icon_header02.png) 0 0 no-repeat;
}

.newNavMenu li.nav02 a:hover i {
  background: url(../images/newMain/icon_header02.png) -23px 0 no-repeat;
}

.newNavMenu li.nav03 a i {
  width: 18px;
  height: 25px;
  background: url(../images/newMain/icon_header03.png) 0 0 no-repeat;
}

.newNavMenu li.nav03 a:hover i {
  background: url(../images/newMain/icon_header03.png) -18px 0 no-repeat;
}

.newNavMenu li.loginJoinBtn a {
  padding: 8px 18px;
  background: #000;
  color: #fff !important;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;
  transition: background 0.2s;
}

.newNavMenu li.loginJoinBtn a:hover {
  background: #333;
  color: #fff !important;
}

/* 로그인 모달 */
.loginModalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.loginModalBox {
  position: relative;
  width: 448px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-sizing: border-box;
}

.loginModalBox .login_body { padding: 48px 32px 32px; box-sizing: border-box; }
.loginModalBox .logotitcenter { margin: 0 0 32px; text-align: center; }
.loginModalBox .login_logo { width: 150px; height: auto; }

.loginModalBox .login_body input[type="text"],
.loginModalBox .login_body input[type="password"] {
  display: block;
  width: 100%;
  height: 51px;
  box-sizing: border-box;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  padding: 0 17px;
  margin: 0 0 12px;
  font-size: 14px;
  color: #18181b;
  background: #fff;
}

.loginModalBox .login_body input::placeholder { color: #9f9fa9; }

.loginModalBox .login_body input.inputError { border-color: #e11d48 !important; }

.loginModalBox .fieldError {
  display: none;
  color: #e11d48;
  font-size: 12px;
  margin: -6px 0 12px;
  text-align: left;
}

.loginModalBox .id_save { margin-bottom: 20px; text-align: left; }

.loginModalBox .ch_save { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.loginModalBox .ch_save input[type="checkbox"] {
  display: inline-block !important;
  -webkit-appearance: none;
  appearance: none;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  margin: 0 !important;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  background: #fff !important;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.loginModalBox .ch_save input[type="checkbox"]:checked { background: #18181b !important; border-color: #18181b; }

.loginModalBox .ch_save input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.loginModalBox .ch_save span { font-size: 13px; color: #71717b; }

.loginModalBox .btn_login {
  display: block;
  background: #000;
  border-radius: 16px;
  padding: 16px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  cursor: pointer;
}

.loginModalBox .m_btn_type { display: flex; gap: 8px; width: 100%; margin-bottom: 24px; box-sizing: border-box; }

.loginModalBox .m_btn_type a {
  flex: 1;
  text-align: center;
  padding: 13px 0;
  border-radius: 14px;
  border: 1px solid #e4e4e7;
  color: #3f3f47;
  font-size: 13px;
  font-weight: 600;
  box-sizing: border-box;
}

.loginModalBox #sns_login {
  margin-top: 4px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  clear: none !important;
}

.loginModalBox #sns_login h3 {
  position: relative;
  text-align: center !important;
  color: #9f9fa9 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding-top: 0 !important;
  margin-bottom: 16px;
}

.loginModalBox #sns_login h3::before,
.loginModalBox #sns_login h3::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28%;
  border-top: 1px solid #f4f4f5;
}

.loginModalBox #sns_login h3::before { left: 0; }
.loginModalBox #sns_login h3::after { right: 0; }

.loginModalBox #sns_login .sns-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: center;
  width: 100%;
  margin: 0 !important;
  text-align: center;
  box-sizing: border-box;
}

.loginModalBox #sns_login .sns-icon {
  position: relative !important;
  flex: 0 0 40px !important;
  min-width: 0 !important;
  max-width: 40px !important;
  width: 40px !important;
  height: 40px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  background-color: var(--sns-bg, #18181b) !important;
  background-image: none !important;
  display: block !important;
  box-shadow: 0 1px 1.5px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 !important;
  border: none !important;
}

.loginModalBox #sns_login .sns-icon .ico,
.loginModalBox #sns_login .sns-icon .txt { display: none !important; }

.loginModalBox #sns_login .sns-icon::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  font-size: 16px;
  font-weight: 700;
  font-family: Arial, "Noto Sans KR", sans-serif;
  color: var(--sns-fg, #fff);
  white-space: nowrap;
}

.loginModalBox #sns_login .sns-naver {
  background-color: #fff !important;
  background-image: url("/img/mobile/event/sif21_icon_naver.png") !important;
  background-size: cover !important;
  background-position: center !important;
}

.loginModalBox #sns_login .sns-kakao {
  background-color: #fff !important;
  background-image: url("/img/mobile/event/sif21_icon_kakao.png") !important;
  background-size: cover !important;
  background-position: center !important;
}

.loginModalBox #sns_login .sns-facebook { --sns-bg: #1877f2; --sns-fg: #fff; }
.loginModalBox #sns_login .sns-facebook::before { content: "f" !important; }

.loginModalBox #sns_login .sns-google {
  background-color: #fff !important;
  background-image: url("/img/mobile/event/sif21_icon_google.png") !important;
  background-size: cover !important;
  background-position: center !important;
}

.loginModalBox #sns_login .sns-twitter { --sns-bg: #1da1f2; --sns-fg: #fff; }
.loginModalBox #sns_login .sns-twitter::before { content: "X" !important; }

.loginModalBox #sns_login .sns-payco { --sns-bg: #ff4e2a; --sns-fg: #fff; }
.loginModalBox #sns_login .sns-payco::before { content: "P" !important; }

.loginModalBox #sns_login .sns-line { --sns-bg: #06c755; --sns-fg: #fff; }
.loginModalBox #sns_login .sns-line::before { content: "L" !important; }

.loginModalBox #sns_login .sns-github { display: none !important; }

.loginModalBox #sns_login .sns-facebook,
.loginModalBox #sns_login .sns-payco {
  display: none !important;
}

.loginModalClose {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  z-index: 1;
}

.loginModalClose:hover {
  color: #000;
}

/* 스크롤 시 헤더의 로그인/회원가입 버튼이 안 보이면 뜨는 플로팅 버튼 */
.floatingLoginBtn {
  display: none;
  position: fixed;
  top: 1px;
  right: 30px;
  z-index: 9999;
  line-height: 0;
  transition: right 0.3s ease;
}

.floatingLoginBtn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 35px;
  padding: 0 18px;
  line-height: normal;
  background: #000;
  color: #fff !important;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;
  transition: background 0.2s;
}

.floatingLoginBtn a:hover {
  background: #333;
  color: #fff !important;
}

.newNavMenu li.nav04 a i {
  width: 23px;
  height: 25px;
  background: url(../images/newMain/icon_header04.png) 0 0 no-repeat;
}

.newNavMenu li.nav04 a:hover i {
  background: url(../images/newMain/icon_header04.png) -23px 0 no-repeat;
}

.newNavMenu li.nav05 a i {
  width: 20px;
  height: 19px;
  background: url(../images/newMain/icon_header05.png) 0 0 no-repeat;
}

.newNavMenu li.nav05 a:hover i {
  background: url(../images/newMain/icon_header05.png) -20px 0 no-repeat;
}

.newNavMenu li.nav06 a i {
  width: 24px;
  height: 23px;
  background: url(../images/newMain/icon_header06.png) 0 0 no-repeat;
}

.newNavMenu li.nav06 a:hover i {
  background: url(../images/newMain/icon_header06.png) -24px 0 no-repeat;
}

.newNavMenu li.nav07 a i {
  width: 20px;
  height: 20px;
  background: url(../images/newMain/icon_header07.png) 0 0 no-repeat;
}

.newNavMenu li.nav07 a:hover i {
  background: url(../images/newMain/icon_header07.png) -20px 0 no-repeat;
}
.newNavMenu li.nav07 span {
  display:inline-block;
  position:relative;
}
.newNavMenu li.nav07 span::after {
  content:'';
  display:block;
  position:absolute;
  right:-5px;
  top:0;
  width:5px;
  height:5px;
  background-color:#FF0000;
  border-radius:50%;
}

#header_gnb {
  position: relative;
  display: block;
  background: #fff;
  box-sizing: border-box;
  height: 50px;
  border-bottom: 1px solid #eee;
}

#header_gnb.noShadow {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-bottom: none; /* 메인페이지(noShadow)에서만 하단 실선 숨김 */
}

.header_gnb_center {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.all_menu {
  position: relative;
  width: 130px;
  height: 50px;
  text-align: center;
  padding-left: 3px;
}

.all_menu h2 {
  position: relative;
  font-family: "Noto Sans KR", "Arial";
  font-size: 16px;
  font-weight: 500;
  padding-top: 0px;
  color: #000000;
}

.all_menu .allMenuBtn {
  position: relative;
  color: #000000;
  line-height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 155px;
  padding-right: 30px;
  transition: all 0.2s;
}

/*

.all_menu .allMenuBtn span.bar01{
    top: 0;
}

.all_menu .allMenuBtn.on span.bar01{
    top: 50%;
    transform: rotate(-45deg);
}

.all_menu .allMenuBtn span.bar02{
    top: 50%;
    margin-top: -0.5px;
}

.all_menu .allMenuBtn.on span.bar02{
    opacity: 0;
}

.all_menu .allMenuBtn span.bar03{
    top: calc(100% - 1px);
}

.all_menu .allMenuBtn.on span.bar03{
    top: 50%;
    transform: rotate(45deg);
}

*/
.all_menu .allMenuBtn > span {
  position: relative;
  display: inline-block;
  transition: all 0.2s;
}

.all_menu .allMenuBtn > span span {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: 0;
  height: 2px;
  background: #7abdff;
  transition: all 0.2s;
}

.all_menu .allMenuBtn:hover > span {
  color: #000;
}

.all_menu .allMenuBtn:hover > span span {
  width: 100%;
}

.all_menu .allMenuBtn.on > span {
  color: #000;
}

.all_menu .allMenuBtn.on > span:last-child span {
  width: 100%;
}

.all_menu_cont {
  position: relative;
  top: -1px;
  height: auto;
  width: 1200px;
  display: none;
  text-align: left;
  padding-top: 0;
  padding-left: 0;
  background: #fff;
  box-sizing: border-box;
}
/* 2026-09-17: 전체메뉴 패널의 배경만 화면 양끝까지 늘리고(JS가 열릴 때 .all_menu_cont의
   width/margin-left을 뷰포트 기준으로 계산해서 채움), 실제 내용은 이 안쪽 래퍼가 기존과
   같은 1200px 폭으로 가운데 유지한다. 상단 여백(5px)은 .select_toggle_menu 띠가 패널
   맨 위에 바로 닿아야 해서 .all_menu_cont가 아니라 여기(띠 아래 콘텐츠)로 옮겨왔다. */
.all_menu_cont_inner {
  /* 2026-09-26: 상단 회색 실선(구분선)을 .all_menu_cont(풀블리드, 화면 끝까지)가 아니라
     여기(1200px 컨텐츠 영역 폭)에 둬서, 네비게이션과 전체메뉴판 사이 선이 좌우 컨텐츠
     영역 폭만큼만 보이도록 잘라준다. */
  border-top: 1px solid #e0e0e0;
  width: 1200px;
  margin: 0 auto;
  padding-top: 20px; /* 2026-09-28: 아래 .select_toggle_menu가 자기 margin으로 여백을 만들므로, 이 패딩은 그 위쪽(구분선 바로 아래) 여백용으로 유지 */
  padding-bottom: 20px; /* 2026-09-28: 전체 메뉴판 하단 여백 추가 요청 */
  box-sizing: border-box;
  /* 2026-09-22: 기존 padding-left:28px 제거 - 그것 때문에 메뉴 목록 왼쪽 끝이 컨텐츠
     영역(.top-area, 1200px)의 왼쪽 끝보다 28px 더 안쪽에서 시작해서 오른쪽 끝(이미 정렬됨)과
     비대칭이었다. */
}
/* 2026-09-28: 전체/아날로그/디지털 필터 버튼 복원(2026-09-22에 마크업과 함께 제거됐던 것).
   기존 회색(#545454) 톤 대신, 리뉴얼된 메뉴판의 검정/흰색 톤에 맞춰 스타일만 새로 맞췄다. */
/* 2026-09-22 패턴과 동일 - #hd ul { margin:0 } (base.css)가 ID 선택자라 클래스 선택자보다
   특이도가 높아서 margin-bottom이 무시되고 있었다 - #hd를 붙여 특이도를 올린다. */
#hd .select_toggle_menu {
  display: flex;
  gap: 8px;
  margin: 0 0 20px; /* 2026-09-28: 버튼-메뉴 사이 공백 20px로 재조정 */
  padding: 0;
  list-style: none;
}
.select_toggle_menu .allNavSort {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0; /* 2026-09-28: 사각형으로 변경 */
  padding: 5px 12px; /* 2026-09-28: 버튼 크기 축소 */
  font-size: 12px;
  font-weight: 500;
  font-family: 'Inter', 'Noto Sans KR', Arial, sans-serif;
  color: #4e5968;
  cursor: pointer;
}
.select_toggle_menu .allNavSort:hover {
  border-color: #191f28;
  color: #191f28;
}
.select_toggle_menu .allNavSort.allNavSortActive {
  background: #191f28;
  border-color: #191f28;
  color: #fff;
}
/* 2026-09-22: Figma(node 10297:84792) 재현 — 7칸씩 자동으로 흘러가는 flex-wrap 대신,
   명시적 2줄(row1/row2)로 나눠서 각 줄이 줄바꿈 없이 한 줄에 다 들어가게 한다.
   각 li의 실제 폭은 ads_header.php가 inline style="flex:<grow> 1 0"으로 직접 지정한다. */
.all_menu_list {
  position: static;
  width: 100%;
  padding: 20px 0 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}
/* 2026-09-22: #hd ul { padding:0 } (base.css)가 ID 선택자라 클래스 선택자보다 특이도가
   높아서 아래 padding-top이 무시되고 있었다 - #hd를 붙여 특이도를 올려서 실제 적용되게 함 */
#hd .all_menu_list.all_menu_row2 {
  padding-top: 15px; /* 2026-09-28: 1행-2행 총 여백 45px -> 30px로 축소 요청 (margin-top 15px + 이 padding-top 15px) */
  margin-top: 15px;
  /* 2026-09-28: "전체" 필터일 때 1행/2행 사이 줄 구분선 제거 요청으로 border-top 삭제 */
}
.all_menu_list > li {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  padding: 0 25px 0 0;
}
/* 2026-09-29: "전체" 배치 자동화(ads_header.php $allMenuCols) - 칼럼 폭 = 가장 긴 소제목/품목명 + 20px,
   1200px 줄이 차면 다음 줄로 자동으로 넘어가고, 줄마다 남는 폭은 칼럼들이 똑같이 나눠 가진다.
   20px는 기존 Figma 2줄 배치(1행 9칸 / 2행 8칸)가 그대로 나오는 범위(약 18~23px) 안의 값 -
   25px 이상으로 올리면 2행 끝 칼럼이 3행으로 떨어진다. 줄 사이 30px는 기존 1행-2행 간격과 동일. */
.all_menu_list.all_menu_auto {
  flex-wrap: wrap;
  row-gap: 30px;
}
.all_menu_list.all_menu_auto > li {
  flex: 1 1 auto;
  padding-right: 20px;
  white-space: nowrap;
}
/* 2026-09-28: 아날로그/디지털 필터 전용 배치 - 기본은 숨김(applyNavPrintTypeFilter가 해당 필터일 때만
   보여줌). 2026-09-29: 전체보기와 같은 .all_menu_auto 자동 배치로 전환(관리자 > 카테고리 설정-전체). */
.all_menu_grid_analog,
.all_menu_grid_digital {
  display: none;
}
.all_menu_list li h4 {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  padding-bottom: 5px;
  box-sizing: border-box;
  font-family: Pretendard, "Noto Sans KR", "Noto Sans", sans-serif;
}
.all_menu_sub {
  position: relative;
  display: block;
  padding-bottom: 10px !important;
  box-sizing: border-box;
}

/* 2026-09-18: 특수명함(151) 칸 안에 홀로그램(157) 그룹을 두 번째 소제목으로 이어붙일 때
   쓰는 여백 - 위 그룹의 all_menu_sub(padding-bottom:10px)과 겹치지 않게만 살짝 띄운다. */
.all_menu_list li h4.all_menu_subgroup {
  margin-top: 2px;
}

.all_menu_sub li {
  padding: 1px 0;
  box-sizing: border-box;
}
.all_menu_sub li a {
  position: relative;
  display: block;
}
.all_menu_sub li a > span {
  position: relative;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: #666;
  font-family: Pretendard, "Noto Sans KR", "Noto Sans", sans-serif;
}
.all_menu_sub li a > span img {
  position: relative;
  top: -2px;
}
.all_menu_sub li a:hover > span {
  color: #000;
  font-weight: 700;
}

.all_menu_sub li a > span span {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: 0%;
  height: 1px;
  background: #000;
  transition: all 0.2s;
}

.all_menu_sub li a:hover > span span {
  width: 100%;
}

/* close 버튼 */
.close.all_menu_close {
  position: absolute;
  bottom: -31px;
  left: 50%;
  text-align: center;
  z-index: 10;
}
.close.all_menu_close a {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: 110px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  background-color: #676767;
  padding: 9px 0;
  padding-left: 13px;
}
.close.all_menu_close a:before {
  position: absolute;
  left: 30px;
  top: 11px;
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url(/images/icon_x.png) center center no-repeat;
}

/* 2026-09-22: Figma(node 10297:84792) 재현 — 전체/아날로그/디지털 필터 버튼과 그 회색 띠
   (구 .select_toggle_menu, #f8f9fa 배경), .all_menu_digital(필터 전용 빈 레이어)를 통째로
   제거함. Figma 디자인엔 이 버튼/띠 자체가 없음. 관련 CSS도 모두 삭제. */
.all_menu_sub li a > span.activePrintType {
  color: #000;
}
.all_menu_sub li a > span.passivePrintType {
  color: #c8c8c8;
}

.gnb {
  position: relative;
  width: calc(100% - 102px);
}
.gnb_list {
  position: relative;
  display: flex;
  justify-content: flex-start;
}
.gnb_list > li {
  height: 50px;
  text-align: center;
  overflow: hidden;
}

.gnb_list > li > h3 {
  font-size: 1em;
  font-family: "Noto Sans KR", "Arial";
  font-weight: bold;
}

.gnb_list > li h3 a {
  position: relative;
  display: inline-block;
  height: 49px;
  line-height: 49px;
  font-size: 14px;
  color: #000000;
  /*padding: 0 39px;*/
  padding: 0 50px;
  position: relative;
  left: 0px;
  white-space: nowrap;
  box-sizing: border-box;
}

.gnb_list > li h3 a > span {
  position: relative;
  display: inline-block;
  transition: all 0.2s;
}

.gnb_list > li h3 a span span {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #000000;
  transition: all 0.2s;
}

.gnb_list > li h3 a:hover > span {
  color: #000;
}

.gnb_list > li.active h3 a > span {
  color: #000;
}

.gnb_list > li:hover > .selColorWrap > .selColor {
  display: block;
}

.gnb_list > li > h3,
.all_menu > h2,
.gnb_sub_wrap > li > h4,
.category__2depth_list > li > h4 {
  display: block;
}

.gnb_list > li > h3 > a,
.all_menu > h2 > a {
  font-size: 16px;
  font-family: "Noto Sans KR", "Arial" !important;
  font-weight: 500;
}
.gnb_list > li:last-child h3 a > span:not(.au-nav-badge)::before {
	content:'';
	display:block;
	position:absolute;
	left:-35px;
	top:50%;
	width:30px;
	height:30px;
	background:url(/images/newMain/icon_gnb_bg3.gif) no-repeat center/100% 100%;
	transform:translateY(-50%);
}

.gnb_sub {
  display: none;
  position: absolute;
  top: 48px;
  left: -130px;
  width: 1200px;
  height: 430px;
  background-color: #fff;
  /* 2026-09-25: #gnbSubBg(풀블리드 흰 배경, z-index:13)가 #header_gnb 안으로 옮겨오면서
     같은 로컬 스태킹 컨텍스트 안에서 .gnb_sub(z-index:auto)보다 위에 그려져 드롭다운
     내용이 안 보이던 문제 - z-index를 그보다 높게 줘서 항상 위에 그려지게 한다. */
  z-index: 14;
}
.gnb_sub_wrap {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.gnb_sub_wrap > li {
  position: relative;
  /* 2026-09-28: 칼럼 폭을 칼럼 개수와 무관하게 고정 - 예전 "배너·실사출력·간판"(7칼럼) 전용
     .gnbSubTight 값을 전체 탭의 기본값으로 승격. flex-grow도 0으로 바꿔서 칼럼 수가 적은
     탭이 남는 공간을 나눠 갖고 넓어지지 않고, 왼쪽부터 고정폭으로만 채워지게 한다. */
  min-width: 145px;
  height: 100%;
  font-size: 13px;
  text-align: left;
  box-sizing: border-box;
  border-left: 1px solid #eceaea;
  padding: 25px 12px;
  transition: all 0.2s;
  flex-grow: 0;
}

.gnb_sub_wrap > li:hover {
  background: #f6fbff;
}

.gnb_sub_wrap > li h4 {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  font-family: Pretendard, "Noto Sans KR", "Noto Sans", sans-serif;
}

.gnb_sub_wrap > li a {
  position: relative;
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #666; /* 2026-09-26: #888 -> #666, 전체메뉴판(.all_menu_sub li a > span)과 동일하게 */
  line-height: 1;
  transition: all 0.2s;
  font-family: Pretendard, "Noto Sans KR", "Noto Sans", sans-serif;
}

.gnb_sub_wrap > li a:hover {
  color: #000;
}

.gnb_sub_wrap > li a > span {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  box-sizing: border-box;
  white-space: nowrap;
}

.gnb_sub_wrap > li a > span span {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 1px;
  background: #000;
  transition: all 0.2s;
}

.gnb_sub_wrap > li a:hover > span span {
  width: 100%;
}

.gnb_sub .gnb_sub_wrap > li:first-child {
  border-left: none;
}

  /*.gnb_sub .gnb_sub_wrap > li:last-child {

    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
}*/

.navSectionIMG {
  /* display: flex; */
  justify-content: flex-end;
  align-items: center;
  background: #fff;
}


.gnb_list li:nth-child(1) .gnb_sub,
.gnb_list li:nth-child(2) .gnb_sub,
.gnb_list li:nth-child(3) .gnb_sub,
.gnb_list li:nth-child(4) .gnb_sub,
.gnb_list li:nth-child(5) .gnb_sub,
.gnb_list li:nth-child(6) .gnb_sub,
.gnb_list li:nth-child(7) .gnb_sub,
.gnb_list li:nth-child(8) .gnb_sub {
  height: 260px;
}

.gnb_list li:nth-child(1) .gnb_sub {
  height: 320px;
}

.gnb_list li:nth-child(2) .gnb_sub {
  height: 430px;
}

.gnb_list li:nth-child(3) .gnb_sub {
  height: 520px;
}
.gnb_list li:nth-child(3) .gnb_sub_wrap > li:last-child {
  width: 50%;
}

.gnb_list li:nth-child(4) .gnb_sub {
  height: 430px;
}
.gnb_list li:nth-child(4) .gnb_sub_wrap > li:last-child {
  width: 33.3%;
}

.gnb_list li:nth-child(5) .gnb_sub_wrap > li:last-child {
  width: 66.6%;
}

.gnb_list li:nth-child(6) .gnb_sub_wrap > li:last-child {
  width: 50%;
}
.gnb_list li:nth-child(6) .gnb_sub {
  height: 320px;
}

.gnb_list li:nth-child(7) .gnb_sub_wrap > li:last-child {
  width: 50%;
}


/*.gnb_list li:nth-child(1) .gnb_sub,
.gnb_list li:nth-child(2) .gnb_sub,
.gnb_list li:nth-child(3) .gnb_sub,
.gnb_list li:nth-child(4) .gnb_sub,
.gnb_list li:nth-child(5) .gnb_sub,
.gnb_list li:nth-child(6) .gnb_sub,
.gnb_list li:nth-child(7) .gnb_sub,
.gnb_list li:nth-child(8) .gnb_sub {
    height: 260px;
}

.gnb_list li:nth-child(2) .gnb_sub {
    height: 445px;
}

.gnb_list li:nth-child(3) .gnb_sub {
    height: 520px;
}

.gnb_list li:nth-child(4) .gnb_sub_wrap > li:last-child{
    width: 50%;
}

.gnb_list li:nth-child(5) .gnb_sub_wrap > li:last-child{
    width: 33.3%;
}

.gnb_list li:nth-child(6) .gnb_sub_wrap > li:last-child{
    width: 66.6%;
}

.gnb_list li:nth-child(7) .gnb_sub_wrap > li:last-child{
    width: 50%;
}

.gnb_list li:nth-child(8) .gnb_sub_wrap > li:last-child{
    width: 50%;
}

.gnb_list li:nth-child(9) .gnb_sub_wrap > li:last-child{
    width: 33.3%;
}*/

/* 카테고리별 고정 높이 대신 콘텐츠 길이에 맞춰 자동으로 늘고 줄게 함 */
.gnb_sub {
  height: auto !important;
}

.gnb_top_item_list > li {
  line-height: 25px;
}

.gnb_top_item_list > li > a {
  color: #666; /* 2026-09-26: #888 -> #666, 전체메뉴판과 동일하게. 이 규칙이 .gnb_sub_wrap > li a
       보다 명시도가 같아 소스 순서상 나중인 이 규칙이 이겨서 실제로는 이 값이 적용되고 있었다. */
}

.gnb_top_item_list > li > a:hover {
  font-weight: bold;
  color: #000; /* 2026-09-26: #404040 -> #000, 전체메뉴판(.all_menu_sub li a:hover > span)과 동일하게 */
}

/**
좌측
 */
.category__1depth {
  box-sizing: border-box;
  text-align: left;
  width: 171px;
  height: 400px;
  position: absolute;
  top: 51px;
  /*    z-index: 1000;*/
}
.category__1depth_list {
  background-color: #4778bb;
  height: 100%;
}
.category__1depth_list > li {
  box-sizing: border-box;
  height: 44.4px;
  background-color: #5384c6;
  padding-left: 13px;
  line-height: 44.4px;
}
.category__1depth_list > li:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #4778bb;
  position: absolute;
  left: 0;
}
.category__1depth_list > li:nth-child(1):after {
  display: none;
}
.category__1depth_list > li > a {
  color: #fff;
  font-size: 13px;
  display: inline-block;
  height: 100%;
  width: 100%;
  line-height: 30px;
}

.category__1depth_list > li:hover {
  background-color: #fff;
}

.category__1depth_list > li:hover > a {
  color: #333;
}

.category__1depth_list > li:hover > .category__2depth {
  display: block;
}

.category__1depth_list > li.active {
  background-color: #fff;
}

.category__1depth_list > li.active > a {
  color: #333;
}

.category__1depth_list > li > a:after {
  content: ">";
  font-size: 11px;
  display: inline-block;
  position: absolute;
  right: 20px;
}

.category__2depth {
  box-sizing: border-box;
  width: 1030px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 171px;
  background-color: #fff;
  z-index: 1000;
  border-bottom: 1px solid #eee;
  display: none;
}

.category__2depth_list {
  box-sizing: border-box;
  width: 1030px;
  height: 400px;
  position: relative;
  padding-top: 2px;
}

category__2depth_list > ul {
  box-sizing: border-box;
  width: 1030px;
  height: 400px;
}

.category__2depth_list > li {
  box-sizing: border-box;
  float: left;
  width: 215px;
  height: 100%;
  font-size: 13px;
  padding-left: 14px;
  line-height: 30px;
}

.category__2depth_list > li > a {
  display: inline-block;
  width: 100%;
}


.gnb_left_item_list > li > a {
  color: #888;
  display: inline-block;
  line-height: 25px;
}

.gnb_left_item_list > li > a:hover {
  font-weight: bold;
  color: #404040;
}

.scroll-btn {
  z-index: 100;
}

.selColorWrap {
  position: relative;
}

/* 공용 토스트 알림 (회원가입 폼 필수항목 누락 안내 등) */
.au-toast-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.au-toast {
  background: #1c1c1e;
  color: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 240px;
  max-width: 340px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
  cursor: pointer;
}
.au-toast.is-show {
  opacity: 1;
  transform: translateX(0);
}
.au-toast-title {
  font-weight: 700;
  margin: 0 0 6px;
}
.au-toast-list {
  margin: 0;
  padding: 0 0 0 16px;
}
.au-toast-list li {
  margin: 2px 0;
}

/* ============================================================
   상단 내비게이션 리뉴얼(신규 추가, 성원애드피아 참고)
   - 전체메뉴: 텍스트 대신 검정 햄버거 아이콘
   - 상단 카테고리: 간격을 좁혀서 왼쪽으로 모음, 굵기 600
   - 말풍선 뱃지: 검정 배경 + 흰 글씨
   ============================================================ */

/* 뱃지(대량/소량/1초 디자인) 제거 후 헤더 행 높이를 원래대로(50px) 되돌림
   - 뱃지가 있을 때는 뱃지가 뜰 공간을 확보하려고 76px로 늘리고 -19px로 당겨놨었음.
   2026-09-10: 카테고리 14개로 늘면서 행이 다소 커 보여 25px로 한 번 더 축소. */
.header_gnb_center { height: 25px; }
#header_gnb { height: 25px; margin-top: 0; }
.all_menu,
.gnb_list > li { height: 25px; }

/* 전체메뉴: 검정 햄버거 아이콘
   주의1: .all_menu_cont(전체메뉴 펼침 레이어)가 .all_menu 안에 형제로 들어있어서
   .all_menu 자체를 flex로 바꾸면 그 레이어까지 flex item이 되어 레이아웃이 깨진다.
   그래서 flex/세로중앙정렬은 h2/allMenuBtn 쪽에만 건다.
   주의2: .all_menu는 원래 폭이 130px로 고정되어 있었는데(그래서 1200px짜리
   .all_menu_cont/.gnb_sub가 옆으로 안 밀고 겹쳐서만 열림), 폭을 auto로 바꾸면
   전체메뉴를 펼쳤을 때 all_menu_cont(1200px)가 부모 폭을 그대로 늘려버려서
   오른쪽 카테고리들이 밀려난다 - 반드시 고정 폭을 줘야 한다. */
.all_menu { width: 34px !important; padding: 0 !important; text-align: left; }
.all_menu > h2 { height: 100%; position: relative; }
.all_menu .allMenuBtn {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}
.all_menu .allMenuBtn > i.au-hamburger {
  display: inline-flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  width: 16px;
  height: 12px;
  padding: 9px;
  background: #fff; /* 반전: 안쪽은 흰색 */
  border: none;
  border-radius: 8px;
  box-sizing: content-box;
  font-style: normal;
}
.all_menu .allMenuBtn > i.au-hamburger > i {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: #000 !important; /* 반전: 선 세개도 검정 */
  border-radius: 1px;
  font-style: normal;
  position: static !important;
  transition: none !important;
}

/* 상단 카테고리: 간격 좁혀서 왼쪽으로 모으고, 글씨 굵기 600 (뱃지 제거 후 세로 중앙 정렬로 복귀).
   2026-09-10 카테고리 14개로 재구성하면서 탭 폭 합이 1200px 컨테이너를 넘어서(1466px),
   폰트 16px→13px, 여백 12px→8px(첫 탭은 20px→16px)로 줄여서 한 줄에 들어오게 함. */
.gnb { width: auto !important; flex: 1 1 auto; }
/* 탭 양 끝(첫 탭 좌측 ~ 마지막 탭 우측)이 로고/검색창이 있는 상단부 좌우 끝과 맞도록,
   기존 justify-content:flex-start(기본값) 대신 space-between으로 폭 전체에 고르게 분산 */
.gnb_list { justify-content: space-between !important; }
.gnb_list > li h3 a {
  height: 25px;
  line-height: normal !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 0 8px !important;
  box-sizing: border-box;
}
.gnb_list > li:first-child h3 a { padding-left: 16px !important; } /* 햄버거 상자와 간격 */
.gnb_list > li > h3 > a { font-weight: 600 !important; font-size: 13px !important; }

/* 셀프에디터(마지막 항목) 왼쪽에 붙던 기존 장식 아이콘 제거 */
.gnb_list > li:last-child h3 a > span::before { content: none !important; display: none !important; }

/* 카테고리별 드롭다운(.gnb_sub)의 위치 보정.
   원래 top:48px/left:-130px 는 "헤더 높이 50px, .all_menu 폭 130px"를 기준으로 한
   하드코딩 값이라, 위에서 .all_menu 폭을 바꾼 만큼 다시 맞춰줘야 전체메뉴(.all_menu_cont)와
   같은 위치/폭으로 열린다. */
.gnb_sub { top: 25px !important; left: -34px !important; }

/* ============================================================
   header_util: 로고 위 상단 유틸리티 바 (신규)
   - 좌측 "애즈랜드" 브랜드 텍스트 + 우측 로그인 정보(로그인 시에만)를
     항상 보이는 색상 띠로 표시한다(이전엔 로고 옆 축약판이 보이고
     header_util 자체는 스크롤해야만 잠깐 보였는데, 이제 이 자리 하나로 통일).
   ============================================================ */
.header_util {
  display: block !important;
  background: #F3F3F3 !important;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header_util .inner {
  padding: 9px 0;
  box-sizing: border-box;
}
.au-hu-brand {
  font-size: 13px !important;
  font-weight: normal !important;
  color: #333 !important;
  letter-spacing: normal;
}
.au-hu-brand:hover { color: #000 !important; }
.au-hu-right {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  color: #333;
}
/* header_util 쪽엔 기존 클래스(numberShape/cart/pay/error/account_money 등)의
   옛날 폰트크기/뱃지크기/간격 CSS가 이미 걸려있어서, 그것들을 확실히 이기도록
   폰트크기/크기/여백까지 전부 !important로 강제 지정한다. */
.au-hu-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  color: #000 !important;
  transition: background 0.2s;
}
.au-hu-icon:hover {
  background: #f0f0f0;
  color: #000 !important;
}
.au-hu-greet {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #000 !important;
  margin-right: 8px !important; /* 이름-첫 항목 간격이 항목 사이 간격과 같도록(au-hu-item과 동일) */
}
.au-hu-item {
  position: relative;
  font-size: 13px !important;
  font-weight: normal !important;
  color: #333 !important;
  transition: color 0.2s;
  margin-right: 8px !important; /* header_util 원래 margin-right:20px보다 좁게 */
}
.au-hu-item:hover { color: #000 !important; }
.au-hu-item.au-hu-red { color: #000 !important; }
.au-hu-badge {
  display: inline !important;
  padding: 0 !important;
  margin-left: 2px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #ff0000 !important;
  background: none !important;
}
.au-hu-money {
  color: #ff0000 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding-left: 0 !important;
  margin-left: 2px !important;
}

/* 검색창을 로고 바로 우측으로 재배치(ads_header.php의 스크립트가 #logo 안으로 DOM을 옮기고
   이 클래스를 붙인다). #logo를 flex 컨테이너로 만들어 그 안에 검색창을 나란히 두되,
   .top-area 전체는 여전히 로고(+검색창) vs 우측 회원메뉴 두 그룹의 space-between을 유지한다.
   주의: 기존 스타일(.newNavMenu li.nav-search ...)은 ".newNavMenu"가 조상이어야 걸리는데
   여기로 옮기면 그 조상이 없어져서 스타일이 깨진다 - 새 위치 기준으로 다시 정의해야 한다.
   주의2: #logo에 layout.css의 고정 width:165px가 있어서, 검색창이 들어갈 공간이 없다 -
   auto로 풀어주는 대신 로고 이미지 자체에 165px를 고정해서 로고 크기는 그대로 유지한다. */
#logo {
  width: auto !important;
  display: flex !important;
  align-items: center;
}
#logo > a > img {
  width: 165px !important;
  flex: none;
}
#logo li.nav-search.au-nav-search-relocated {
  display: flex;
  align-items: center;
  list-style: none;
  margin-left: 24px;
}
#logo li.nav-search.au-nav-search-relocated .searchWrap {
  position: relative;
  display: block;
  width: 500px;
  height: 40px;
  border-radius: 8px;
  background: #ffffff;
  /* vistaprint.com 헤더 검색창 참고: 연회색 테두리 대신 더 진하고 또렷한 테두리 */
  border: 1px solid rgba(0, 0, 0, 0.58);
  overflow: hidden;
  box-sizing: border-box;
}
#logo li.nav-search.au-nav-search-relocated .topsearch_input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 40px;
  border: none !important;
  border-bottom: none !important;
  border-radius: 8px;
  padding: 0 44px 0 16px !important;
  font-size: 13px;
  background: transparent;
  box-sizing: border-box;
  opacity: 1;
}
#logo li.nav-search.au-nav-search-relocated .searchbutton {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}
#logo li.nav-search.au-nav-search-relocated .searchbutton svg {
  width: 20px;
  height: 20px;
  stroke: #000000;
}

/* ============================================================
   2026-09-16: 카테고리 드롭다운 - 아날로그/디지털 상단 타이틀 구획 +
   하단 라운드 + 상단 구분선 + 배경 딤(dim) 처리
   ============================================================ */

/* 헤더/드롭다운을 제외한 나머지 화면을 덮는 반투명 검정 레이어.
   #hd가 z-index:15라 이 레이어는 그보다 낮게 둬서 헤더와 드롭다운은 항상 위에 보이게 한다. */
#gnbDimOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8); /* 2026-09-23: Figma(node 10297:84791) 실측값(80%)으로 맞춤 - 기존 50% */
  z-index: 12;
}

/* 2026-09-24: Figma(node 10297:84791) 재현 - 카테고리 드롭다운(narrow 탭 포함 전부) 뒤에
   화면 양끝까지 이어지는 흰 배경. .gnb_sub 자체를 화면폭으로 늘리지 않는 이유는 위 JS
   주석 참고(narrow 탭이 탭 위치에서 멀어지는 문제). top/height/width는 JS(mouseenter)가
   실제 열린 .gnb_sub 위치를 재서 매번 채운다. #gnbDimOverlay(12)보다 위, #hd(15) 안의
   실제 드롭다운 내용보다는 아래에 오도록 z-index를 그 사이 값으로 둔다. */
#gnbSubBg {
  display: none;
  position: fixed;
  left: 0;
  background: #fff;
  z-index: 13;
}

/* 2026-09-26: 전체메뉴판 상단의 회색 실선(.all_menu_cont_inner의 border-top)과 똑같은 선을
   카테고리별 드롭다운에도 추가 - narrow/wide 탭 모두 폭이 제각각이라 그 콘텐츠 래퍼가 아니라
   항상 화면 전체 폭인 #gnbSubBg 위에 1200px짜리 가운데 정렬 선으로 그린다(탭 종류와 무관하게
   항상 같은 위치/폭).
   처음엔 이 선을 #gnbSubBg(z-index:13)의 ::before로 그렸었는데, .gnb_sub(z-index:14)가 그보다
   위라서 .gnb_sub 박스와 겹치는 구간만 선이 가려져 끊겨 보이는 문제가 있었다(예: 명함·엽서·
   청첩장처럼 .gnb_sub가 narrow해서 왼쪽 일부만 좁게 차지해도, 그 좁은 범위만큼 선이 사라짐).
   그래서 선을 .gnb_sub보다도 위(z-index:15)인 별도 요소(#gnbSubTopLine)로 분리했다. */
#gnbSubTopLine {
  display: none;
  position: fixed;
  left: 50%;
  width: 1200px;
  transform: translateX(-50%);
  border-top: 1px solid #e0e0e0;
  z-index: 15;
}

/* 2026-09-16 추가: #hd 내부의 로고/검색창 줄(.top-area)은 1200px로 가운데 정렬돼 있어
   그 좌우 여백은 배경이 따로 없었다 - 오버레이(z-index:12)보다 #hd(z-index:15)가 위라
   가려지긴 하지만, #hd 자체엔 배경색이 없어서 저 좌우 여백으로 오버레이가 그대로
   비쳐 보였다(헤더 일부가 같이 어두워지는 것처럼 보임). #hd 전체에 불투명 흰 배경을
   깔아서 헤더 영역은 어디도 오버레이가 비치지 않게 한다. */
#hd {
  background: #fff;
}

/* 2026-09-23: Figma(node 10297:84791) 재현 - 아날로그/디지털 2구획 타이틀 바 +
   상단 실선/하단 라운드/그림자 박스를 없애고, 탭바와 이어지는 평평한 흰 배경으로 바꾼다.
   .gnb_sub 자체의 표시/숨김(display:none/block)은 기존 JS(mouseenter/mouseleave, toggle)가
   그대로 담당 - 여기서는 아무 테두리/그림자도 추가하지 않는다. */

/* .gnb_sub(바깥 박스)는 JS(positionGnbSubFullBleed, mouseenter 핸들러 안)가 화면 폭에 맞춰
   left/width를 매번 다시 계산해서 채운다 - 여기 기본값은 JS 실행 전(narrow 탭 포함) 대비 fallback. */
.gnbSubInner {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}

/* Figma 속 "배너·실사출력" 같은 굵은 탭 이름 반복 타이틀 - 칼럼들이 시작되기 전
   왼쪽에 여백을 두고 표시해서, 칼럼(카테고리)이 박스 맨 왼쪽에 바로 붙어 보이지 않게 한다. */
.gnbSubTabTitle {
  flex: 0 0 auto;
  margin: 0;
  padding: 25px 40px 25px 0;
  font-size: 15px;
  font-weight: 700;
  color: #000; /* 2026-09-26: #101419 -> #000, 전체메뉴판(.all_menu_list li h4)과 동일하게 */
  white-space: nowrap;
  box-sizing: border-box;
  font-family: Pretendard, "Noto Sans KR", "Noto Sans", sans-serif;
}

.gnbSubInner .gnb_sub_wrap {
  width: auto;
  flex: 1 1 auto;
}

/* 메뉴판 내부에는 실선이 아예 없어야 한다 - 칼럼 사이를 나누던 기존 세로 실선도 제거 */
.gnb_sub_wrap > li {
  border-left: none;
}

/* 2026-09-22: 위 max-height/overflow-y 스크롤 제거 — Figma(node 10297:84792)는 2줄 그리드에
   22개 카테고리 전체가 스크롤 없이 한 화면에 다 보이는 구조라서(row1=9칸, row2=8칸, 일부 칸은
   2개 카테고리를 세로로 이어붙임), .all_menu_list를 명시적 2줄로 재구성한 이상 이 규칙은
   불필요함. */

/* 전체메뉴 햄버거 아이콘(흰 배경 사각형)이 25px짜리 행보다 커서(30px) 위아래로 살짝
   튀어나와 있었다 - 어두운 배경 위로 흰 조각이 비어져 보이는 원인. 패딩을 줄여 행
   높이(25px) 안에 완전히 들어오게 한다(안쪽 3줄 아이콘 크기는 그대로 유지). */
.all_menu .allMenuBtn > i.au-hamburger {
  padding: 6px;
}

/* 호버로 메뉴판이 열린 카테고리 탭 밑에, 그 탭 폭만큼만 표시하는 두께 2px 검정 강조선.
   탭마다 글자 길이가 달라 위치/폭이 제각각이라 JS(#header_gnb 기준 상대좌표 계산)가
   left/width를 매번 맞춰 넣고, 여기서는 고정된 모양(굵기, 색, 위치)만 정의한다. */
#gnbActiveTabBar {
  display: none;
  position: absolute;
  top: 23px;
  height: 2px;
  background: #000;
  z-index: 2;
  pointer-events: none;
  transition: left 0.15s ease, width 0.15s ease;
}