@charset "UTF-8";
/*
  ips 헤더 우측 유틸(언어 / 서비스 선택) 스타일
  - 도민 포털(/cps)의 헤더 셀렉트를 ips 규칙(rem 10px 기준, Pretendard, 포인트 #029b58)으로 이식
  - styles.css 이후에 로드되어야 상태별 오버라이드가 정상 동작한다.
*/

.head--util {
  gap: 1.2rem;
}

.head-select {
  position: relative;
}

/* 트리거 (기본 : 서브페이지 · 스크롤된 메인 = 밝은 배경) */
.head-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3.4rem;
  padding: 0 1.2rem;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.head-select__trigger:hover,
.head-select__trigger:focus-visible {
  border-color: #029b58;
  color: #029b58;
}

.head-select.is-open .head-select__trigger {
  border-color: #029b58;
  background-color: #029b58;
  color: #fff;
}

.head-select__lang-ico {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  background: url("../images/ico/lang-black.png") no-repeat 50%/contain;
}

.head-select.is-open .head-select__lang-ico {
  filter: brightness(0) invert(1);
}

.head-select__arrow {
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-left: 0.2rem;
  border-top: 5px solid currentColor;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transition: transform 0.2s;
}

.head-select.is-open .head-select__arrow {
  transform: rotate(180deg);
}

/* 드롭다운 */
.head-select__menu {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  z-index: 1200;
  min-width: 14rem;
  padding: 0.6rem;
  border: 1px solid #e5e5e5;
  border-radius: 1.2rem;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.head-select__menu[hidden] {
  display: none;
}

.head-select__menu--service {
  min-width: 19rem;
}

.head-select__option {
  display: block;
  padding: 1rem 1.2rem;
  border-radius: 0.8rem;
  color: #333;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.head-select__option:hover,
.head-select__option:focus-visible {
  background-color: #f2f8f5;
  color: #029b58;
}

.head-select__option.is-active {
  background-color: #f2f8f5;
  color: #029b58;
  font-weight: 700;
}

/* 메인 페이지 투명 헤더 상태 : 흰색 컨트롤
   (.up / .gnb-open 이면 흰 배경으로 바뀌므로 기본 스타일을 그대로 쓴다) */
#header.main-header:not(.up):not(.gnb-open) .head-select__trigger {
  border-color: rgba(255, 255, 255, 0.55);
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

#header.main-header:not(.up):not(.gnb-open) .head-select__trigger:hover,
#header.main-header:not(.up):not(.gnb-open) .head-select__trigger:focus-visible {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

#header.main-header:not(.up):not(.gnb-open) .head-select__lang-ico {
  background-image: url("../images/ico/lang-white.png");
}

#header.main-header:not(.up):not(.gnb-open) .head-select.is-open .head-select__trigger {
  border-color: #fff;
  background-color: #fff;
  color: #029b58;
}

#header.main-header:not(.up):not(.gnb-open) .head-select.is-open .head-select__lang-ico {
  filter: none;
  background-image: url("../images/ico/lang-black.png");
}

/* 모바일 : 서비스 선택은 헤더에서 감추고 모바일 메뉴(#nav)로 내린다.
   언어 선택은 기존 .head-eng 동작대로 아이콘만 남긴다. */
@media (max-width: 768px) {
  .head--util {
    gap: 0.8rem;
  }

  .head-select--service {
    display: none;
  }

  .head-select--lang .head-select__label {
    display: none;
  }

  .head-select__trigger {
    height: 3rem;
    padding: 0 0.9rem;
  }
}

/* 모바일 메뉴(#nav) 상단 서비스 바로가기 */
.nav-services {
  display: none;
}

@media (max-width: 768px) {
  .nav-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid #eee;
    background-color: #fafafa;
  }

  .nav-services__item {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.4rem;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    background-color: #fff;
    color: #333;
    font-size: 1.3rem;
    font-weight: 600;
  }

  .nav-services__item:hover,
  .nav-services__item:focus-visible {
    border-color: #029b58;
    color: #029b58;
  }
}

/* ------------------------------------------------------------------
   신규 서비스 배지 (메뉴 라벨 뒤 NEW 표시)
   - ips 메인/서브 양쪽에서 쓰이므로 이 파일에 둔다(custom.css 는 서브 전용).
   ------------------------------------------------------------------ */
.menu-new {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: #ee5a36;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  vertical-align: 0.15em;
  white-space: nowrap;
}

/* 투명 헤더 위에서는 배지가 튀지 않게 살짝 눌러준다 */
#header.main-header:not(.up):not(.gnb-open) .gnb--dep01 > a .menu-new {
  background-color: rgba(255, 255, 255, 0.9);
  color: #d8451f;
}

/* 모바일 메뉴 1depth 는 > span 에 width:100% 가 걸려 있어 배지를 감싼 span 안에 둔다.
   혹시 직계 자식으로 들어오더라도 깨지지 않도록 방어한다. */
.nav-gnb .lv1-li > a > span.menu-new {
  display: inline-block;
  width: auto;
}

/* 짧은 배지 : 폭이 좁은 메뉴(GNB 2depth)용.
   알약 스타일은 그대로 두고 표기만 N 으로 줄여 라벨과 같은 줄에 유지한다.
   (화면은 N, 스크린리더는 sr-only 의 NEW 를 읽는다) */
.menu-new--short {
  margin-left: 0.4rem;
  padding: 0;
  min-width: 1.7rem;
  height: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
}

/* 2depth 는 컬럼 폭이 좁아 라벨+배지가 줄바꿈되므로 한 줄로 묶는다 */
.total-menu .gnb--inner .gnb--dep02 ul li a {
  white-space: nowrap;
}