/* 메인 페이지 navbar를 모든 Django 페이지에서 동일하게 렌더링한다. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #f0f1f2;
  box-shadow: none;
  font-family: "Pretendard", "Pretendard Variable", -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;
}

.site-header__inner {
  width: 100%;
  max-width: 1200px;
  height: 64px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.site-header__logo {
  display: block;
  width: 167px;
  height: 30px;
  max-width: none;
}

.site-nav-desktop {
  display: none;
}

/* 항목이 헤더 높이를 꽉 채워야 링크 → 드롭다운 이동 중 hover가 끊기지 않는다. */
.site-nav-desktop__list {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 45px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* static이라 .site-mega가 헤더(sticky = 위치 지정 요소) 기준으로 전폭 배치된다. */
.site-nav-desktop__item {
  position: static;
  display: flex;
  align-items: center;
}

.site-nav-desktop__link {
  color: #222;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.site-nav-desktop__link:hover {
  color: #ff7900;
}

/* ── 메가 드롭다운 — index_standalone.html 시안(.mega) 이식 ── */
.site-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  z-index: 99;
  background: #fff;
  border-top: 1px solid #f0f1f2;
  box-shadow: inset 0 4px 21px rgba(0, 0, 0, 0.05), 0 24px 32px rgba(0, 0, 0, 0.07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  pointer-events: none;
}

/* 시안은 hover 전용이라 키보드로 접근이 불가능하다. focus-within을 더해 탭 이동에서도 열리게 한다. */
.site-nav-desktop__item--mega:hover .site-mega,
.site-nav-desktop__item--mega:focus-within .site-mega,
.site-mega:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .site-mega {
    transition: none;
  }
}

/* .site-header__inner와 동일한 폭 제약 */
.site-mega__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 40px 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
}

.site-mega__promo {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex-shrink: 0;
}

.site-mega__card {
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}

.site-mega__card-title {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.8px;
  color: #ff7900;
  line-height: 1.3;
}

.site-mega__card-desc {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: #686868;
}

.site-mega__btn {
  margin-top: 2px;
  width: 100%;
  background: #ff7900;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  padding: 14px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.18s;
}

.site-mega__btn:hover {
  background: #ff522c;
}

.site-mega__cols {
  display: flex;
  gap: 47px;
  flex-wrap: wrap;
}

.site-mega__col {
  width: 300px;
}

.site-mega__col-title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.8px;
  color: #222;
  padding-bottom: 14px;
  line-height: 1.3;
}

.site-mega__col-link {
  display: block;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: #222;
  text-decoration: none;
  padding: 12px 0;
  border-top: 1px solid #c7cbce;
  transition: color 0.15s;
}

.site-mega__col-link:hover {
  color: #ff7900;
}

/* 시안 .nav-actions — 미디어쿼리가 없어 모바일에서도 헤더 바에 남는다 */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.site-header__btn {
  min-height: 0;
  display: inline-block;
  padding: 10px 15px;
  color: #222;
  background: transparent;
  border: 1px solid #c7cbce;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* 시안 a.btn-outline-sm:hover — 오렌지 테두리 + 오렌지 텍스트 */
.site-header__btn--outline:hover {
  color: #ff7900;
  border-color: #ff7900;
  transform: none;
}

.site-header__btn--filled {
  min-width: 76px;
  color: #222;
  background: #c7cbce;
  text-align: center;
}

/* 시안 a.btn-fill-sm:hover — 네이비 배경 + 흰 텍스트 */
.site-header__btn--filled:hover {
  color: #fff;
  background: #0d1b3e;
  transform: none;
}

/* 시안 .nav-toggle 수치를 따른다 (40x40, 라인 22x2, gap 5px) */
.site-header__hamburger {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.site-header__hamburger:hover {
  background: #f5f5f5;
}

.site-header__hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #1b1b1b;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-header__hamburger.is-open .site-header__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__hamburger.is-open .site-header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.site-header__hamburger.is-open .site-header__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 시안 .nav-menu 모바일 규칙 이식 — 전체화면 오버레이가 아니라
   헤더 바로 아래에 붙는 드롭다운 패널이다. .site-header가 sticky(위치 지정 요소)라
   top:100%가 헤더 하단을 기준으로 잡힌다. */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* renewal.css가 먼저 로드되며 .mobile-menu에 inset:64px 0 0 0 을 건다.
     여기서 bottom을 되돌리지 않으면 top(100%)과 bottom(0)이 함께 걸려
     높이가 '헤더높이 - 64px - 0' = 0px으로 계산돼 패널이 열려도 보이지 않는다. */
  bottom: auto;
  z-index: 120;
  display: none;
  flex-direction: column;
  padding: 8px 0;
  background: #fff;
  border-top: 1px solid #f0f1f2;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  font-family: "Pretendard", "Pretendard Variable", -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu__link {
  display: block;
  padding: 15px 40px;
  color: #222;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}

.mobile-menu__link:hover {
  color: #ff7900;
}

/* ── 모바일 서브메뉴 아코디언 — index_standalone.html 시안의 @media(max-width:820px) .mega 규칙 이식.
   시안은 데스크톱 .nav-menu를 그대로 패널로 쓰지만 이 프로젝트는 패널이 별도라,
   같은 메가 본문을 파셜(_mega_*.html)로 공유하고 아래 규칙을 패널 안에 적용한다. ── */
.mobile-menu__item--sub {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mobile-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.mobile-menu__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.mobile-menu__item--sub.is-open > .mobile-menu__toggle {
  color: #ff7900;
}

.mobile-menu__item--sub.is-open > .mobile-menu__toggle::after {
  transform: rotate(-135deg);
  border-color: #ff7900;
}

.mobile-menu__sub {
  display: none;
}

.mobile-menu__item--sub.is-open .mobile-menu__sub {
  display: block;
}

/* 데스크톱 드롭다운용 폭 제약을 패널 안에서는 해제한다 */
.mobile-menu__sub .site-mega__inner {
  display: block;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 2px 40px 14px;
  gap: 0;
}

.mobile-menu__sub .site-mega__promo {
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}

.mobile-menu__sub .site-mega__card {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
}

.mobile-menu__sub .site-mega__card-title {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: 18px;
  color: #ff7900;
}

.mobile-menu__sub .site-mega__card-desc {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  font-size: 14px;
  line-height: 1.5;
}

.mobile-menu__sub .site-mega__btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: auto;
  padding: 11px 22px;
  font-size: 14px;
  white-space: nowrap;
}

.mobile-menu__sub .site-mega__cols {
  flex-direction: row;
  gap: 24px;
}

.mobile-menu__sub .site-mega__col {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

.mobile-menu__sub .site-mega__col-title {
  font-size: 18px;
  padding-bottom: 10px;
}

.mobile-menu__sub .site-mega__col-link {
  font-size: 16px;
  padding: 11px 0;
}

/* 데스크톱/모바일 경계는 시안과 동일하게 820px이다.
   (시안 style.css의 @media(max-width:820px)에서 .nav-toggle이 등장하고 .nav-menu가 패널로 바뀐다) */
@media (min-width: 821px) {
  .site-nav-desktop {
    display: flex;
    align-self: stretch;
  }

  .site-header__hamburger {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }
}

/* 시안 @media(max-width:1100px) — 820~1100px 구간에서 메뉴를 좁혀 데스크톱 나열을 유지한다 */
@media (min-width: 821px) and (max-width: 1100px) {
  .site-nav-desktop__list {
    gap: 24px;
  }

  .site-nav-desktop__link {
    font-size: 17px;
  }
}

/* 시안 @media(max-width:820px) — 메가 드롭다운은 모바일에서 숨긴다.
   .site-nav-desktop이 이미 display:none이라 중복이지만 시안 의도를 명시해 둔다. */
@media (max-width: 820px) {
  .site-mega {
    display: none;
  }
}

@media (max-width: 767px) {
  .site-header__inner {
    padding: 0 20px;
  }

  .site-header__logo {
    width: 134px;
    height: auto;
  }
}

/* 시안 @media(max-width:560px) — 좁은 화면에서 링크 패딩 축소 */
@media (max-width: 560px) {
  .mobile-menu__link {
    padding: 14px 20px;
  }

  /* 시안 @media(max-width:560px) .mega .mega-inner{padding:2px 20px 14px} */
  .mobile-menu__sub .site-mega__inner {
    padding: 2px 20px 14px;
  }

  /* 시안에 없는 보정 — 시안은 모바일에서도 문의하기·강의실을 헤더 바에 두는데,
     그 값 그대로면 375px 화면에서 [로고 134 + 버튼 84·71 + 햄버거 40 + 간격]이
     가용 폭(335px)을 넘긴다. 아래 축소로 310px에 맞춘다. */
  .site-header__inner {
    gap: 12px;
  }

  .site-header__logo {
    width: 110px;
  }

  .site-header__actions {
    gap: 8px;
  }

  .site-header__btn {
    padding: 8px 10px;
    font-size: 12px;
  }

  .site-header__btn--filled {
    min-width: 0;
  }
}