:root{
  --camp-nav-h: 48px;              /* 네비 높이 */
  --camp-hilite-extra: 2px;
  --camp-hilite-shrink: 16px;        /* 회색 하이라이트 가로 길이 */
  --camp-nav-gap: 40px;           /* ← 네비게이션 바 항목끼리의 간격 */
  --camp-link-pad-x: 14px;        /* 버튼 좌우 패딩 */
  --camp-mega-gap: 4px;   /* 네비와 패널 사이 간격 (기존 8px → 4px) */
}

.camp-masthead{                    /* 기준점 */
  position: relative;
  z-index: 30;
  background:#fff;
  overflow: visible;               /* 드롭다운 잘림 방지 */
}

.camp-navrow{
  display: flex;
  align-items: center;
  gap: var(--camp-nav-gap);
  height: var(--camp-nav-h);
  position: relative;
  z-index: 4;
  margin-left:auto;
}
.camp-link{
  border:0; background:transparent; font:inherit; cursor:pointer;
  padding:.45rem var(--camp-link-pad-x); border-radius:10px;
}
.camp-link:hover{ color:#0ea5a8; }

/* 패널: 닫힘/열림 */
.camp-mega{
  display:none;
  position:absolute;               /* masthead 기준으로 펼치기 */
  left:0; right:0;
  z-index: 3;
}
.camp-mega.open{ display:block; }

/* 그리드 컨테이너: JS가 높이 계산 */
.camp-megagrid{
  position: relative;
  padding: 12px 0 16px;
  background: transparent;
  height: auto;                    /* JS가 grid.style.height로 세팅 */
}

/* 각 열은 버튼 위치에 맞춰 절대배치 (JS가 left/width 지정) */
.camp-col{
  position: absolute;
  top: 10px;
  text-align: center;
  padding: 8px 6px;
  border-radius: 12px;
}

/* 항목 리스트: 불릿 제거 + 간격 */
.camp-col ul{
  list-style: none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.camp-col a{
  display:inline-block; white-space:nowrap;
  padding:.4rem .6rem; color:#0f172a; text-decoration:none;
}
.camp-col a:hover{ color:#0ea5a8; }

/* 버튼~드롭다운 전체를 덮는 하이라이트 바 */
.camp-hilite{
  position:absolute; left:0; top:0; width:0; height:0;
  background:#dfe4ea;
  border-radius:12px;
  pointer-events:none;
  opacity:0;
  transition: left .12s ease, width .12s ease, height .12s ease, top .12s ease;
  z-index:1;
}

/* 컨테이너/헤더가 패널을 자르지 않도록 */
.campus-header .container,
.campus-header,
.camp-masthead{ overflow: visible; }
.camp-masthead.open .camp-hilite{ opacity:1; }




/* ===== Campus Page (gowoon_middle 등 공통) ===== */

/* 배경은 흰색 */
body { background:#fff; }

/* 컨텐츠 래퍼 */
.gm-wrap{ max-width:1200px; margin:36px auto 80px; padding:0 20px; }

/* 상단 헤더 영역 */
.campus-header { background:#fff; }
.campus-top{
  display:flex; align-items:center; justify-content:flex-start;
  gap:24px; padding:18px 0;
  overflow:visible;                 /* 드롭다운 잘림 방지 */
}

/* 로고 */
.campus-brand img{ height:64px; display:block; }

/* 오른쪽 액션 묶음: 지점 드롭다운 + 중/고 탭 */
.campus-actions{
  display:flex; align-items:center; gap:12px;
}

/* -------- 지점 드롭다운 -------- */
.campus-branch{ position:relative; }     /* ✅ 버튼 바로 아래로 떨어지게 하는 핵심 */

.pill-button{
  display:inline-flex; align-items:center; gap:8px;
  padding:.55rem 1rem; border-radius:999px;
  border:1px solid rgba(2,6,23,.12);
  background:#fff; font-weight:700; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.pill-button svg{ width:14px; height:14px; }

.branch-menu{
  position:absolute; left:0; top:calc(100% + 6px);   /* ✅ 버튼 바로 아래 */
  min-width:140px; z-index:1000;
  background:#fff; border:1px solid rgba(2,6,23,.1);
  border-radius:12px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  display:none;
}
.branch-menu.open{ display:block; }                 /* ✅ 열림 상태 */
.branch-menu a{
  display:block; padding:.7rem 1rem; color:#0f172a; text-decoration:none;
}
.branch-menu a:hover{ background:#f8fafc; }

/* -------- 중등/고등 탭 -------- */
.level-tabs{ display:flex; gap:8px; margin:0; }     /* 상단에 붙여 쓰므로 여백 0 */
.level-btn{
  padding:.5rem 1rem; border-radius:10px;
  border:1px solid rgba(2,6,23,.12); background:#fff;
  font-weight:700; text-decoration:none; color:inherit; cursor:pointer;
}
.level-btn.is-active{
  background:#111827; color:#fff; border-color:#111827;
}

/* -------- 5열 링크 -------- */
.gm-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:40px; margin-top:18px;
}
.gm-col h3{ font-size:18px; margin:0 0 14px; text-align:center; }
.gm-col ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.gm-col a{
  color:#0f172a; text-decoration:none; display:block;
  padding:.3rem .2rem; text-align:center;
}
.gm-col a:hover{ color:#0ea5a8; }

/* -------- 반응형 -------- */
@media (max-width: 1200px){
  :root{
    --camp-nav-gap: 22px;
    --camp-link-pad-x: 12px;
  }
}
@media (max-width: 900px){
  :root{
    --camp-nav-gap: 16px;
    --camp-link-pad-x: 10px;
  }
}


/* ===== 우측 상단 강사 로그인 버튼 ===== */
.util-bar{
  position: fixed;          /* 스크롤해도 항상 우측 상단 */
  top: 8px;
  right: 12px;
  z-index: 3000;            /* 드롭다운/하이라이트 위 */
  pointer-events: none;     /* 래퍼는 클릭 막고 */
}
.util-bar .util-inner{ display:block; height:auto; }
.util-bar .login-link{
  pointer-events: auto;     /* 버튼만 클릭 허용 */
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .70rem;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.14);
  background: #fff;
  color: #334155;
  font-weight: 700; font-size: .9rem; line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.util-bar .login-link:hover{
  background: #f8fafc;
  border-color: rgba(2,6,23,.22);
}

/* 모바일에서 조금 작게 */
@media (max-width: 768px){
  .util-bar{ top: 6px; right: 8px; }
  .util-bar .login-link{ padding: .28rem .6rem; font-size: .85rem; }
}



.timetable-section {
  background: #f9fafb;
  padding: 2rem 0;
}

.timetable-container {
  max-width: 1200px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 0 20px;
  justify-items: stretch;
}

/* 카드 스타일 유지 */
.timetable-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.8rem;
  text-align: left;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: all 0.2s ease;
  min-height: 110px;
  color: #111827;
  text-decoration: none;
}

.timetable-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.1);
  border-color: #3b82f6;
}

.timetable-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;                  /* 한 줄로 정렬 */
  align-items: center;            /* 수직 중앙 */
  gap: 0.4rem;
  justify-content: space-between; /* 글자 왼쪽, 아이콘 오른쪽 */
  margin: 0;                      /* 여백 제거 */
}

/* 기본 아이콘 스타일 */
.timetable-card::after {
  content: "";
  font-size: 1.7rem;
}

/* 시간표, 설명회 등 개별 아이콘 */
.timetable-icon::after { content: "📘"; }  /* 시간표 */
.info-icon::after { content: "📅"; }  /* 설명회 예약 */
.teacher-icon::after { content: "🎓"; } /* 선생님 👩‍🏫*/
.trophy-icon::after { content: "🏆"; } /* 명예의 전당 */
.notice-icon::after { content: "📢"; } /* 공지사항 */
.map-icon::after { content: "📍"; } /* 오시는 길 */
.faq-icon::after { content: "❓"; } /* 자주하는 질문 */

/* 정규반, 윈터스쿨, 정시대비반, 특강용 아이콘 */
.regular-class-icon::after {   /* 정규반 */
  content: "📚"; }

.winter-school-icon::after {   /* 윈터스쿨 */
  content: "❄️"; }

.csat-class-icon::after {      /* 정시대비반 */
  content: "📝"; }

.special-lecture-icon::after { /* 특강 */
  content: "💡"; }

.book-icon::after{ /* 책 */
 content: "📖"; }


.badge.new {
  background: #10b981;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  display: inline-block;
}

.icon-area {
  font-size: 1.8rem;   /* ← 원하는 만큼 조정 (예: 2.2rem, 2.4rem 등) */
  margin-left: 0.3rem;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.timetable-card.highlight {
  background: #4ade80;
  color: white;
  border: none;
}

.timetable-card.highlight:hover {
  background: #22c55e;
  transform: translateY(-4px);
}

.timetable-card:hover .icon-area {
  transform: scale(1.15);
}

.title-main {
  font-weight: 700; /* 굵게 */
}

.title-sub {
  font-weight: 700; /* 보통 두께 */
  margin-left: 2px; /* 살짝 간격 */
}

/* 카드 제목은 모두 굵게 */
.timetable-card h3,
.timetable-card h3 span {
  font-weight: 700 !important;
}

/* 반응형 (태블릿 이하에서는 2개씩) */
@media (max-width: 900px) {
  .timetable-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*  모바일에서는 1개씩 */
@media (max-width: 500px) {
  .timetable-container {
    grid-template-columns: 1fr;
  }
}

/* 반응형 */
@media (max-width: 768px) {
  .timetable-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
  .timetable-card h3 {
    font-size: 1.1rem;
  }
}

/* 강사 전용 우측 하단 플로팅 카드 관리 버튼 */
.teacher-card-manage-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
}

.teacher-card-manage-fab__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #2c3e50;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* 호버 시 살짝 강조 */
.teacher-card-manage-fab__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

.teacher-card-manage-fab__icon {
    font-size: 16px;
}


/* ===== 모바일에서 헤더: 로고/지점/중고 밑줄에 네비 나오게 ===== */
@media (max-width: 768px) {

  /* 상단 헤더 전체 여백 줄이기 */
  .campus-header{
    padding: 4px 0 4px;
  }

  /* 위→아래 배치는 유지하되, 간격 줄이기 */
  .campus-top{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;              /* 8px → 6px 정도로 더 촘촘하게 */
  }

  /* 로고 작게 */
  .campus-brand img{
    height: 45px;          /* 64px → 40px */
  }

  /* 지점 선택 pill 버튼 작게 */
  .pill-button{
    height: 32px;
    min-width: 30px;
    font-size: 0.8rem;
    padding: 0 0.7rem;
  }

  /* 중/고 탭도 작게 */
  .level-tabs{
    gap: 6px;
  }

  .level-btn{
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    border-radius: 8px;
  }

  /* 네비게이션 바: 한 줄 유지 + 가로 스크롤 */
  :root{
    --camp-nav-gap: 8px;       /* 메뉴 사이 간격 확 줄이기 */
    --camp-link-pad-x: 6px;    /* 좌우 패딩 줄이기 */
    --camp-nav-h: 38px;        /* 높이도 낮게 */
  }

  .camp-navrow{
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;         /* ★ 두 줄로 안 내려가게 */
    overflow-x: auto;          /* ★ 넘치면 가로 스크롤 */
    -webkit-overflow-scrolling: touch;
    gap: var(--camp-nav-gap);
    height: var(--camp-nav-h);
  }

  .camp-link{
    padding: .25rem var(--camp-link-pad-x);
    font-size: 0.8rem;
    border-radius: 999px;
    white-space: nowrap;       /* 메뉴 텍스트도 한 줄 유지 */
  }
}