/* =============================================
   Group_Homepage_manubar
   기준폭: 1920px
   ============================================= */

:root {
  --manubar-h: 93px;
  --manubar-bg: rgba(255, 255, 255, 0.7);
  --manubar-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  --manubar-grad: linear-gradient(90deg, #8CCBE6 0%, #8E90F3 100%);
  --manubar-text-inactive: #313131;
  --manubar-logo-w: 233.41px;
  --manubar-item-w: 133.13px;
  --manubar-item-h: 29.58px;
  --manubar-item-radius: 73.96px;

  /* ══ 드롭다운 메뉴 색상 변수 (라이트 테마) ══════════════════
     ★ 색상 수정 방법:
        · 라이트 manubar 페이지 → 아래 값 수정
        · 다크 manubar 페이지  → manubar_dark.css 의 동일 변수 수정
     ═══════════════════════════════════════════════════════ */
  --ddn-outer-bg:    transparent;              /* 패널 외곽 배경 (없음) */
  --ddn-outer-border:transparent;             /* 패널 외곽 테두리 (없음) */
  --ddn-panel-bg:    var(--manubar-bg);        /* 내부 패널 배경 = manubar 배경과 동일 */
  --ddn-text:        #313131;                 /* 비활성 항목 글자색 */
  --ddn-active-bg:   linear-gradient(90deg, #8CCBE6 0%, #8E90F3 100%); /* 활성 항목 배경 */
  --ddn-active-text: #FFFFFF;                 /* 활성 항목 글자색 */
  --ddn-overlay-bg:  transparent;              /* 뒷배경 오버레이 (투명) */
}

/* ── 네비 컨테이너 ── */
.manubar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--manubar-h);
  z-index: 1000;
}

/* ── 반투명 배경 ── */
.manubar__bg {
  position: absolute;
  inset: 0;
  background: var(--manubar-bg);
  box-shadow: var(--manubar-shadow);
}

/* ── 콘텐츠 행 (overflow:hidden — JS zoom 적용 전 순간적 넘침 방지) ──
   1920px 기준: 좌우 패딩 275px (외부여백 250px + 콘텐츠패딩 25px)
   화면 줄어들면 clamp로 25px까지 자동 감소 (Phase 1)
*/
.manubar__inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 clamp(25px, calc((100vw - 1420px) / 2 + 25px), 275px);
  overflow: hidden;
}

/* ── 로고 ── */
.manubar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: var(--manubar-logo-w);
  gap: 0;
  text-decoration: none;
}

.manubar__logo-img {
  width: 56.46px;
  height: 36.98px;
  object-fit: cover;
  flex-shrink: 0;
}

.manubar__logo-text {
  font-family: 'A2Z', sans-serif;
  font-weight: 900;
  font-size: 21.75px;
  line-height: 1.2;
  letter-spacing: -0.05em;
  background: var(--manubar-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #fff;
  background-clip: text;
  white-space: nowrap;
  margin-left: 14.95px; /* logo-image 우측에서 텍스트 시작: 71.41 - 56.46 = 14.95 */
}

/* ── 메뉴 아이템 컨테이너 ──
   margin-left: auto → 로고와의 gap을 채움 (Phase 2에서 자동 감소)
*/
.manubar__items {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 1;
}

/* ── 메뉴 아이템 ── */
.manubar__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--manubar-item-w);
  height: var(--manubar-item-h);
  border-radius: var(--manubar-item-radius);
  font-family: 'A2Z', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: var(--manubar-text-inactive);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 활성 아이템 ── */
.manubar__item--active {
  background: var(--manubar-grad);
  color: #ffffff;
  font-weight: 600;
}

/* ── 햄버거 버튼 (기본 숨김) ── */
.manubar__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.manubar__menu-btn img {
  display: block;
}


/* =============================================
   반응형
   ============================================= */

/* Phase 3: 아이템이 더 이상 줄어들 수 없는 시점 — 햄버거 표시
   기준: 로고(233px) + 최소 아이템(6×60=360px) + 패딩(2×25=50px) = 643px
   여유 포함 약 900px에서 전환 */
@media (max-width: 900px) {
  .manubar__items {
    display: none;
  }

  .manubar__menu-btn {
    display: flex;
  }
}

/* 360px 이하: 최소 상태 고정 + 좌우 잘림 */
@media (max-width: 360px) {
  .manubar {
    min-width: 360px;
    overflow: hidden;
  }

  .manubar__inner {
    min-width: 360px;
    justify-content: center;
  }
}


/* =============================================
   드롭다운 메뉴
   Figma: 587×1136px, 우측에서 슬라이드 인
   JS(manubar.js)가 스케일 제어
   ============================================= */

/* 클릭 외부 닫기용 오버레이 */
.manubar__ddn-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: var(--ddn-overlay-bg);
  cursor: pointer;
}
.manubar__ddn-overlay--open {
  display: block;
}

/* 스케일 래퍼 (JS 가 transform: scale() 적용)
   manubar 바로 아래, 우측 끝에 딱 붙음
   overflow 없음 → clip-path 로 애니메이션 */
.manubar__ddn-wrap {
  position: fixed;
  top: var(--manubar-h);   /* manubar 하단에 딱 붙음 */
  right: 0;
  width: 587px;
  z-index: 1100;
  transform-origin: top right;
  pointer-events: none;
}
.manubar__ddn-wrap--open {
  pointer-events: auto;
}

/* 실제 패널 (슬라이드 애니메이션: clip-path 로 위→아래 펼침)
   overflow:hidden 없이 잘림 없음 */
.manubar__ddn {
  position: relative;
  width: 587px;
  background: var(--ddn-outer-bg);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.manubar__ddn-wrap--open .manubar__ddn {
  clip-path: inset(0 0 0% 0);
}

/* 내부 패널 — 우상단 딱 붙게, 높이 자동 */
.manubar__ddn-panel {
  width: 100%;
  background: var(--ddn-panel-bg);
  border-radius: 0 0 2px 2px;
  box-sizing: border-box;
  padding-bottom: 40px;
}

/* 항목 컨테이너 — 상단 여백 줄임 */
.manubar__ddn-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 69px;
  padding: 40px 0 0;
}

/* 비활성 항목 (Figma: h=72, padding=20.4 36.7, radius=102, A2Z 400 26.37px) */
.manubar__ddn-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20.41px 36.73px;
  min-height: 72px;
  border-radius: 102px;
  font-family: 'A2Z', sans-serif;
  font-weight: 400;
  font-size: 26.37px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ddn-text);
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: opacity 0.15s;
}
.manubar__ddn-item:hover {
  opacity: 0.65;
}

/* 활성 항목 (Figma: h=42, padding=4 40, radius=133, A2Z 600 26.67px, grad bg) */
.manubar__ddn-item--active {
  padding: 4px 40px;
  min-height: 42px;
  border-radius: 133px;
  background: var(--ddn-active-bg);
  color: var(--ddn-active-text);
  font-weight: 600;
  font-size: 26.67px;
}
.manubar__ddn-item--active:hover {
  opacity: 0.9;
}