.yj-cert-nav{
  display:none;
  width:100%;
  background:#fff;
  border-top:1px solid #e7ebef;
  border-bottom:1px solid #dfe5ea;
  box-sizing:border-box;
  position:relative;
  z-index:30;
  font-family:Arial,"Noto Sans KR","Malgun Gothic",sans-serif;
}
.yj-cert-nav.yj-cert-nav--mounted{display:block}
.yj-cert-nav *{box-sizing:border-box}

/*
 * 자격증 홈 중앙영역과 같은 7:3 비율을 사용합니다.
 * 5개 자격증 메뉴는 왼쪽 7영역을 정확히 5등분하므로
 * 마지막 메뉴의 칸 끝선이 중앙배너 왼쪽 영역의 우측 끝선과 일치합니다.
 */
.yj-cert-nav__inner{
  width:min(1180px,calc(100% - 32px));
  min-height:62px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,3fr);
  column-gap:22px;
  align-items:stretch;
}
.yj-cert-nav__main{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  width:100%;
  min-width:0;
  white-space:nowrap;
}
.yj-cert-nav__link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
  min-height:62px;
  padding:0 8px 0 0;
  color:#172b3b;
  text-decoration:none !important;
  border:0 !important;
  box-shadow:none !important;
  transition:color .15s ease,transform .15s ease;
}
/*
 * 마지막 메뉴의 텍스트 끝점을 왼쪽 7영역의 실제 우측 끝에 맞춥니다.
 * 이 7영역은 중앙배너 열과 동일한 grid 계산을 사용하므로
 * 시니어자격증과정의 오른쪽 끝선 = 중앙배너 오른쪽 끝선이 됩니다.
 */
.yj-cert-nav__link:nth-child(5){
  align-items:flex-end;
  padding-right:0;
  text-align:right;
}
.yj-cert-nav__ko{
  display:block;
  font-size:15px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-0.35px;
}
.yj-cert-nav__en{
  display:block;
  margin-top:7px;
  color:#7b8b98;
  font-size:8px;
  line-height:1;
  font-weight:400;
  letter-spacing:.55px;
  text-transform:uppercase;
}
.yj-cert-nav__link:hover,
.yj-cert-nav__link:focus{
  color:#1772b8;
  transform:translateY(-1px);
}
.yj-cert-nav__link:hover .yj-cert-nav__en,
.yj-cert-nav__link:focus .yj-cert-nav__en{color:#1772b8}

.yj-cert-nav__member{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:15px;
  min-width:0;
  white-space:nowrap;
}
.yj-cert-nav__member-link{
  color:#5b6670;
  text-decoration:none !important;
  font-size:13px;
  font-weight:400;
  border:0 !important;
  box-shadow:none !important;
}
.yj-cert-nav__member-link + .yj-cert-nav__member-link{
  position:relative;
  padding-left:16px;
}
.yj-cert-nav__member-link + .yj-cert-nav__member-link:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:11px;
  background:#dfe4e8;
  transform:translateY(-50%);
}
.yj-cert-nav__member-link:hover,
.yj-cert-nav__member-link:focus{color:#1772b8}

/* JS가 확인한 기존 공통메뉴/서브메뉴 행과 우측 자격증과정 표기만 숨깁니다. */
.yj-cert-oldmenu-hidden,
.yj-cert-legacy-label-hidden{display:none !important}

@media (max-width:1040px){
  .yj-cert-nav__inner{
    grid-template-columns:minmax(0,7fr) minmax(0,3fr);
    column-gap:22px;
  }
  .yj-cert-nav__ko{font-size:14px}
  .yj-cert-nav__en{font-size:7.5px;letter-spacing:.35px}
  .yj-cert-nav__link{padding-right:5px}
}

@media (max-width:980px){
  .yj-cert-nav__inner{
    display:block;
    min-height:auto;
  }
  .yj-cert-nav__main{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:100%;
    min-height:58px;
  }
  .yj-cert-nav__link{
    min-height:58px;
  }
  .yj-cert-nav__member{
    justify-content:flex-end;
    min-height:34px;
    border-top:1px solid #f0f3f5;
  }
}

@media (max-width:720px){
  .yj-cert-nav__inner{
    width:100%;
    padding:0 14px;
    overflow:hidden;
  }
  .yj-cert-nav__main{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .yj-cert-nav__main::-webkit-scrollbar{display:none}
  .yj-cert-nav__link{flex:0 0 auto;padding-right:0}
  .yj-cert-nav__link:nth-child(5){align-items:flex-start;text-align:left}
  .yj-cert-nav__ko{font-size:14px}
  .yj-cert-nav__en{margin-top:6px;font-size:7px}
  .yj-cert-nav__member-link{font-size:12px}
}

/* 통합판 전환 중 구 자격증 메뉴/롤링배너 플러그인이 함께 활성화되어도 중복 노출하지 않습니다. */
.yj-ci32-active #yj-cert-nav,
.yj-ci32-active .yj-cbr-rolling-banner,
.yj-ci32-active #yj-cbr-auto-source{display:none !important}
