/* ============================================
   Figma Style Guide - 띠배너 PC → Frame 37 → Frame 1
   서브메뉴 이동바: 홈 > 대메뉴▼ > 서브메뉴▼
   ============================================ */

/* Frame 37: 띠배너 PC 전체 띠 (전체 너비, 배경·보더) */
.breadcrumb-wrap.breadcrumb-frame37,
.breadcrumb-wrap {
  position: relative;
  z-index: 1001;
  width: 100%;
  min-height: var(--breadcrumb-frame37-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--breadcrumb-frame37-bg);
  border-bottom: var(--breadcrumb-frame37-border);
  font-family: var(--font-family);
}

/* Frame 1: 띠배너 PC 내부 프레임 (max-width 1280px, 좌우 패딩) */
.breadcrumb-inner.breadcrumb-frame1,
.breadcrumb-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--breadcrumb-frame1-max-width);
  margin: 0 auto;
  padding: var(--breadcrumb-frame1-padding-y) var(--breadcrumb-frame1-padding-x);
  box-sizing: border-box;
  font-size: var(--breadcrumb-font-size);
  line-height: var(--breadcrumb-line-height);
  letter-spacing: var(--breadcrumb-letter-spacing);
  font-weight: var(--breadcrumb-font-weight);
  color: var(--breadcrumb-color-text);
}

.breadcrumb-wrap a.breadcrumb-item {
  color: var(--breadcrumb-color-link);
  text-decoration: none;
  font-weight: var(--breadcrumb-font-weight);
}

.breadcrumb-wrap a.breadcrumb-item:hover {
  text-decoration: underline;
}

/* 홈 아이콘: 띠 높이만큼 넓이 유지, 옆 메뉴이동(구분자·드롭다운)은 현상유지 */
.breadcrumb-wrap a.breadcrumb-item.breadcrumb-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--breadcrumb-frame37-min-height);
  min-width: var(--breadcrumb-frame37-min-height);
  height: var(--breadcrumb-frame37-min-height);
  flex-shrink: 0;
  text-decoration: none;
}
.breadcrumb-wrap a.breadcrumb-item.breadcrumb-home:hover {
  text-decoration: none;
  opacity: 0.9;
}
.breadcrumb-home-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.breadcrumb-sep {
  margin: 0 8px;
  color: var(--breadcrumb-color-sep);
  user-select: none;
  font-weight: 400;
}

.breadcrumb-current {
  color: var(--breadcrumb-color-text);
  font-weight: var(--breadcrumb-font-weight);
}

/* 드롭다운 (대메뉴 / 서브메뉴) - Frame 1 내 스타일 */
.breadcrumb-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 150px;
  width: 100%;
  padding: 0 4px;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--breadcrumb-color-link);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: inherit;
}

.breadcrumb-trigger:hover {
  text-decoration: underline;
}

.breadcrumb-trigger-text {
  text-align: left;
  flex: 1;
  min-width: 0;
}

.breadcrumb-trigger-arrow {
  font-size: 0.65em;
  opacity: 0.85;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  margin-left: auto;
}

.breadcrumb-dropdown.open .breadcrumb-trigger-arrow {
  transform: rotate(180deg);
}

/* 페이지별 전역 ul 스타일이 드롭다운에 적용되지 않도록 .breadcrumb-wrap 하위로 한정 */
.breadcrumb-wrap .breadcrumb-dropdown-menu,
.breadcrumb-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  margin: 4px 0 0;
  margin-left: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--breadcrumb-dropdown-radius);
  box-shadow: var(--breadcrumb-dropdown-shadow);
}

.breadcrumb-dropdown-item {
  display: block;
  padding: 8px 14px;
  font-size: var(--font-small-size);
  line-height: var(--font-small-line-height);
  letter-spacing: var(--font-small-letter-spacing);
  color: var(--breadcrumb-dropdown-item-color, var(--font-default));
  text-decoration: none;
  white-space: nowrap;
}

.breadcrumb-dropdown-item:hover {
  background: var(--bg-verylight-gray);
  color: var(--breadcrumb-dropdown-item-color, var(--font-default));
}

.breadcrumb-dropdown-item.current {
  font-weight: var(--font-small-bold-weight);
  color: var(--breadcrumb-dropdown-item-color, var(--font-default));
  background: var(--primary-brand-light);
}

/* 띠배너 PC 반응형 (750px 미만: 홈 버튼 제거, 드롭다운만 꽉 차게) */
@media (max-width: 750px) {
  .breadcrumb-wrap {
    min-height: 52px;
  }

  .breadcrumb-inner {
    padding: 12px 16px;
    font-size: 16px;
    width: 100%;
  }

  /* 750px 미만: 홈 버튼 제거 */
  .breadcrumb-wrap a.breadcrumb-item.breadcrumb-home {
    display: none;
  }

  /* 홈 다음 구분자 제거 → 형식: dropdown │ dropdown */
  .breadcrumb-inner > .breadcrumb-sep:first-of-type {
    display: none;
  }

  /* 드롭다운 두 개가 넓이 꽉 차게 */
  .breadcrumb-inner .breadcrumb-dropdown {
    flex: 1;
    min-width: 0;
  }

  .breadcrumb-inner .breadcrumb-dropdown .breadcrumb-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .breadcrumb-sep {
    margin: 0 6px;
    flex-shrink: 0;
  }

  .breadcrumb-dropdown-menu {
    min-width: 160px;
    padding: 4px 0;
  }

  .breadcrumb-dropdown-item {
    padding: 6px 12px;
    font-size: 13px;
  }
}