/* ---------- Tokens ---------- */
:root{
  --max: 1280px;
  --ink: #0f172a;
  --muted:#64748b;
  --brand:#0ea5a8;
  --line: rgba(2,6,23,.10);

   --item-gap: 10px;      /* 항목 간격 (기존 12px이었다면 살짝 증가) */
   --item-pad-y: .45rem;  /* 항목 클릭 영역 세로 패딩 */

  --nav-gap: 80px;    /* 상단 네비 항목 간격 */
  --mega-max: 1200px;  /* 드롭다운 전체 최대폭(가운데 좁게) */

  --min-col: 160px;   /* 열 최소폭(버튼이 좁을 때) */
  --grow: 1.08;       /* 열=버튼폭*계수 (1.05~1.25 권장) */

  --hilite: #dfe4ea;  /* 열 하이라이트 색 */

   --masthead-pad: 28px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--ink);
  font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,"Malgun Gothic","맑은 고딕",sans-serif;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
.container{ max-width:var(--max); margin:0 auto; padding:0 20px }

/* ---------- Masthead ---------- */
.masthead{ position:relative; z-index:30; padding-top: var(--masthead-pad); }
.masthead::after{
  content:"";
  position:absolute; left:0; right:0; top:calc(var(--masthead-pad) + 64px);  /* nav-row 높이와 동일 */
  height:1px; background: var(--line); z-index: 2;
  pointer-events:none;
}

/* 얇은 유틸 바 자체는 높이만 얹고, 배치는 absolute */
.util-bar{
    position: fixed; top:8px; right: 12px; left:auto; height:auto; z-index:2000px; pointer-events:none;
}

.util-bar .util-inner{
      display:block;            /* 한 버튼만 담는 래퍼 */
     height:auto;
}
.util-bar .login-link{
  pointer-events:auto;      /* 버튼만 클릭 가능 */
}
/* 실제 클릭 가능한 건 링크만 */
.util-bar .login-link{
  pointer-events: auto;              /*  링크만 클릭 허용 */
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.82rem; line-height:1; font-weight:600;
  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.12);
  background:#fff;
  color:#334155;
  text-decoration:none;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.util-bar .login-link:hover{
  background:#f8fafc;
  border-color: rgba(2,6,23,.2);
}





/* ---------- Top Nav ---------- */
.nav-row{
  display:grid; grid-template-columns:160px 1fr auto; align-items:center; gap:8px;
  height:64px;  position:relative; z-index:4;
  /* background:#fff; border-bottom:1px solid var(--line); */
   background: transparent; border-bottom: none;
}
.brand{ display:flex; align-items:center }
.site-nav{ display:flex; justify-content:center; gap:var(--nav-gap) }
.nav-link{ border:0; background:transparent; font:inherit; cursor:pointer; padding:.4rem .6rem; border-radius:10px }
.nav-link::after{ content:none } /* ▾ 제거 */
.nav-link:hover{ color:var(--brand) }
.nav-cta .pill{
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border-radius:999px;
  background:#eef2ff; color:#3730a3; border:1px solid rgba(55,48,163,.2); font-weight:600;
}
/* 기본 (PC에서는 안 보임) */
.nav-toggle{
  display:none;
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.nav-toggle span{
  display:block;
  width:18px; height:2px;
  border-radius:99px;
  background:#0f172a;
  transition:transform .18s ease, opacity .18s ease;
}

/* 열린 상태에서 X 모양 */
.nav-toggle.is-open span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2){
  opacity:0;
}
.nav-toggle.is-open span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

@media (max-width: 768px){
  .nav-toggle{
    display:inline-flex;
    justify-self:end;

    flex-direction: column;  /* ← 세로로 쌓기 */
    align-items: center;
    justify-content: center;
    gap: 4px;

    margin-right: 25px;   /* ⬅️ 오른쪽에서 8px 만큼 안쪽으로 당김 */
  }
}


/* ---------- Mega dropdown ---------- */
.mega{ display:none; position:relative; z-index:4; background:transparent }
.mega.open{ display:block }

/* 드롭다운 컨테이너: 가운데 좁게 */
.mega .container{
  max-width: var(--mega-max);
  margin: 0 auto;
  padding-left: 8px;
  padding-right: 8px;
}

/* 열들을 버튼 위치에 맞춰 절대배치 (JS가 left/width 지정) */
.mega-grid{
  position: relative;
  padding: 18px 0 22px;
  height: auto; /* JS가 최대 높이로 세팅 */
}

/* 컬럼 기본 스타일 */
.mega-col{
  position: absolute; top: 12px;
  text-align: center;
  padding: 8px 6px;
  border-radius: 12px;
}
.mega-col .title{ display: none; margin:0 0 10px; font-weight:800 /*margin-bottom: 14px;*/}
.mega-col ul{ display:flex; flex-direction:column; gap: var(--item-gap); align-items: center; list-style:none; margin:0; padding:0; }
.mega-col a{ display:inline-block; padding: var(--item-pad-y) .6rem; white-space:nowrap; color:#111827 }
.mega-col a:hover{ color:var(--brand) }

/* 2분할 메뉴 레이아웃 */
.mega-item-split{
  display:flex;
  flex-direction:column;   /* 밑으로 두 버튼 → 옆으로 두고 싶으면 row 로 변경 */
  align-items:center;
  gap:0.15rem;
}

.mega-item-title{
  font-weight:600;
  padding: 0.25rem 0.6rem 0.05rem;
}

.mega-item-children{
  display:flex;
  gap:1px;
}

.mega-link-child{
  display:inline-block;

  padding: 0.5rem 0.5rem;    /* 세로 4 → 2, 가로 0.75rem → 0.5rem */
  font-size: 0.78rem;     /* 0.85rem → 0.78rem 정도로 살짝 작게 */

  border-radius:999px;
  border:1px solid #e5e7eb;
  white-space:nowrap;
}

.mega-link-child:hover{
  border-color: var(--brand);
  color: var(--brand);
}


/* 작은 박스 배경은 끔 — 큰 하이라이트만 사용 */
.mega-col,
.mega-col:hover,
.mega-col.active{
  background:transparent !important;
  box-shadow:none !important;
}

/* ---------- Column highlight (버튼~드롭다운 전체) ---------- */
.col-hilite{
  position:absolute; left:0; top:var(--masthead-pad) !important; width:0; height:0;
  background: #dfe4ea;
  border-radius:12px;
  pointer-events:none; opacity:0;
  transition: left .12s ease, width .12s ease, height .12s ease, opacity .12s ease;
  z-index:1;
}
.masthead.open .col-hilite{ opacity:1 }

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  :root{ --mega-max: 900px; --nav-gap: 72px; }
}
@media (max-width:1024px){
  .nav-row{ position: relative; z-index:4; grid-template-columns:120px 1fr auto }
  :root{ --mega-max: 840px; --nav-gap: 56px; }
}

@media (max-width: 768px){
  .util-bar{ display:none; }
  :root{ --masthead-pad: 10px; } /* 모바일에서 여백 축소 */

.masthead{
    position: relative;  /* 아래에서 absolute로 nav/mega를 배치할 기준 */
  }

  /* 위쪽 헤더(로고 + 햄버거)만 한 줄 */
  .nav-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:auto;
    padding:8px 0 6px;
    grid-template-columns:none;      /* 기존 grid 영향 제거 */
  }

  .brand img{
    height:48px;
  }

/*
  //  햄버거 버튼 보이기
  .nav-toggle{
      display:inline-flex;
      justify-self:end;

     // 🍔 세로 3줄로 정렬되게
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;          // 줄 사이 간격
    }

    */

  /* ====== 왼쪽: 세로 네비게이션 ====== */
  .site-nav{
    position:absolute;
    top: calc(10px + 56px - 4px);   /* masthead-pad + 대략 로고 높이 */
    left:0;
    width:40%;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:6px 0 8px;
     padding-left: 8px;   /* 필요하면 12px, 16px 이런 식으로 조절 */
    border-top:1px solid var(--line);
    background:#fff;
    display:none;             /* 기본 숨김, 햄버거로 열기 */
    z-index: 10;
  }
  .site-nav.is-open{
    display:flex;
  }

  .nav-link{
    width:100%;
    text-align:center;
     /* 위/오른쪽/아래/왼쪽 */
    padding: .5rem .6rem .5rem .5rem;  /* ⬅ 왼쪽만 1.4rem 정도로 늘리기 */
    border-radius:8px;
  }

  .nav-link.is-active{
    background:#e5e7eb;
  }

  /* ====== 오른쪽: mega 패널 ====== */
  .mega{
    display:none;
  }

  /* 햄버거가 열렸을 때만 오른쪽 패널도 표시 */
  body.nav-open .mega{
    display:block;
    position:absolute;
    top: calc(10px + 56px+ 8px);   /* nav와 같은 줄에 배치 */
    left:40%;                 /* 왼쪽 40%는 nav, 오른쪽 나머지는 패널 */
    right:0;
    background:#f9fafb;
    border-top:1px solid var(--line);
    padding:6px 8px 10px;
    z-index: 9;
  }

  .mega-grid{
    position: static;
    padding:0;
    height:auto;
  }

  .mega-col{
    position: static;
    width:100%;
    padding:4px 4px 8px;
    border-radius:0;
    border-bottom:1px solid rgba(148,163,184,.35);
    display:none;              /* 기본은 숨김 */
    text-align:left;
  }

  .mega-col.is-open{
    display:block;             /* 선택된 한 개만 보여주기 */
  }

  .mega-col .title{
    display:block;
    font-size:.9rem;
    font-weight:700;
    margin:0 0 4px;
    padding:0 2px;
    color:#4b5563;
  }

  /* 데스크탑용 칼럼 하이라이트는 숨기기 */
  .col-hilite{
    display:none !important;
  }
}

/* ===== Carousel ======================================================== */
.hero-wrap{ margin-top: 12px; }  /* 네비 바로 밑에 살짝 간격 */

.carousel{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background:#0b1f29;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* 16:9 비율 유지 (원하면 21:9, 3:1 등으로 바꿔도 됨) */
.carousel::before{
  content:""; display:block; padding-top: 42%; /* 16:9 ≈ 56.25%; 더 납작하게 42% */
}
.carousel-track{
  position:absolute; inset:0;
}
.carousel-slide{ display:none; width:100%; height:100%; }
.carousel-slide.is-active{ display:block; }
.carousel-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* 좌우 버튼 */
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(2,6,23,.15);
  background: rgba(255,255,255,.85);
  color:#0f172a; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.car-prev{ left:12px; }
.car-next{ right:12px; }
.car-btn:hover{ background:#fff; }

/* 점 네비게이션 */
.car-dots{
  position:absolute; left:16px; bottom:12px; display:flex; gap:8px;
}
.car-dots button{
  width:8px; height:8px; border-radius:999px; border:0;
  background: rgba(255,255,255,.5); cursor:pointer;
}
.car-dots button[aria-selected="true"]{ background:#fff; }

/* ===== Modal =========================================================== */
/* 모달 닫힘 상태 */
.modal-backdrop.is-closed { display: none !important; }

/* 바디 스크롤 잠금(선택) */
body.modal-open { overflow: hidden; }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal{
  width:min(520px, 90vw); background:#fff; border-radius:16px; padding:20px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); position:relative;
}
.modal-close{ position:absolute; right:12px; top:10px; border:0; background:transparent; font-size:26px; cursor:pointer;}
.tabs{ display:flex; gap:8px; margin-bottom:14px; }
.tab{ padding:.45rem .9rem; border-radius:10px; border:1px solid rgba(2,6,23,.1); background:#fff; cursor:pointer; }
.tab.is-active{ background:#eef2ff; color:#3730a3; border-color:rgba(55,48,163,.2); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }
.modal label{ display:block; font-weight:600; margin:.6rem 0 .25rem; }
.modal input{ width:100%; border:1px solid rgba(2,6,23,.12); border-radius:10px; padding:.6rem .7rem; }
.btn{ margin-top:.8rem; padding:.55rem .9rem; border-radius:10px; border:1px solid rgba(2,6,23,.15); background:#f8fafc; }
.btn.primary{ background:#0ea5a8; color:#fff; border-color:#0ea5a8; }
.form-msg{ min-height:1.2rem; color:#0f172a; margin-top:.35rem; }
.form-msg.error{ color:#b91c1c; }
.form-msg.ok{ color:#166534; }

/* 혹시 버튼에 클릭 막힘이 걸려 있으면 해제 */
.btn-pill { pointer-events: auto; }

/* 모달 하단 버튼 정렬 */
.form-actions.dual{
  display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:10px;
}
.btn.ghost{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:.5rem .9rem;
}
.btn.text{
  background:transparent; border:0; color:var(--muted); padding:.5rem .3rem;
}

/* ========== Teacher login button variants ========== */

/* 공통 최소 터치 영역 & 포커스 */
.btn-reset{
  appearance:none; border:0; background:transparent; padding:.25rem .4rem;
  font:inherit; color:inherit; cursor:pointer; line-height:1;
}
.btn-reset:focus-visible{
  outline:2px solid rgba(37,99,235,.45); outline-offset:2px; border-radius:6px;
}


/* (B) 미니 고스트 버튼 (외곽선만) */
.btn-ghost{
  padding:.3rem .6rem; border:1px solid rgba(2,6,23,.15); border-radius:999px;
  color:#475569; background:#fff;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  font-size:.9rem; font-weight:600;
}
.btn-ghost:hover{
  background:#f8fafc; border-color:rgba(2,6,23,.25); color:#0f172a;
}

/* 상단 유틸 바 안에서 너무 튀지 않게 간격/정렬 */
.util-inner{
  display:flex; justify-content:flex-end; align-items:center; gap:.5rem; min-height:38px;
}

/* 아이콘과 함께 쓰고 싶을 때(선택) */
.btn-icon{ display:inline-flex; align-items:center; gap:.3rem; }
.btn-icon svg{ width:14px; height:14px; }

/* 전체 배경을 흰색으로 */
html, body { background:#fff; }

/* masthead 상단 스트립도 흰색(이미 흰색이면 유지) */
.masthead::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height: calc(var(--masthead-pad) + var(--nav-h));
  background:#fff;
  z-index:0;
}

/* 필요 시: 이 페이지에서는 캐러셀 숨김 (campus 페이지에서만) */
.page-campus .hero-wrap{ display:none; }

/* ====== 캠퍼스 선택(중등/고등) 카드 ====== */
.campus-wrap{ padding: 40px 0 60px; }
.campus-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 28px;
  align-items: stretch;
}

.campus-card{
  position: relative;
  display: block;
  padding: 28px 26px;
  border-radius: 18px;
  background: linear-gradient(145deg, #27c3b5 0%, #179e90 100%); /* 청솔 느낌 초록 */
  color:#fff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
}

/* 가벼운 배경 텍스처(선택) */
.campus-card::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(80% 60% at 20% 10%, rgba(255,255,255,.15) 0, rgba(255,255,255,0) 60%),
              radial-gradient(80% 60% at 90% 90%, rgba(0,0,0,.06) 0, rgba(0,0,0,0) 60%);
  pointer-events:none;
}

.campus-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.campus-badge{
  font-weight:800; letter-spacing:.04em;
  opacity:.85; margin-bottom:18px;
}

.campus-title{
  font-size: 64px;
  font-weight: 900;
  letter-spacing: .05em;
  margin: 80px 0 0;
  line-height: 1;
}

/* 해시태그/설명 */
.campus-list{ list-style:none; margin:0; padding:0; }
.campus-list li{ margin: 10px 0; font-weight:700; }

.campus-cta{
  position:absolute; right:20px; bottom:20px;
  width:48px; height:48px; border-radius:999px;
  border:1px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff;
  background: rgba(255,255,255,.08);
}

/* 반응형 */
@media (max-width: 900px){
  .campus-grid{ grid-template-columns: 1fr; }
  .campus-title{ font-size: 48px; margin-top: 50px; }
}


/* 유틸바 내 로그인 트리거는 클릭 허용 */
.util-inner [data-open-modal],
.util-inner .login-link,
.util-inner button {
  pointer-events: auto;
}

/* 스크린 리더용 숨김 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 캠퍼스 상단 헤더 */
.campus-header{
  background:#fff;           /* 페이지 상단은 흰색 */
  padding: 10px 0 6px;
   position: relative;
    z-index: 1000;
}

/* 본문 영역은 헤더보다 아래 레이어 */
.campus-main,
.info-wrap {
  position: relative;
  z-index: 1;
  /* 혹시 숨겨져 있으면 */
  overflow: visible;
}

.campus-top{
  display:flex; align-items:center; gap:14px;
}
.campus-brand img{ display:block; height:56px; }

/* pill 자체 */
.select-pill{
  display: inline-block;
  position: relative;
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  /* pill의 가시/터치 영역 */
  min-width: 160px;              /* 필요시 조절 */
  height: 44px;                  /* 필요시 조절 */
  padding: 0;                    /* select가 채우게 0 */
}

/* 핵심: select가 pill을 100% 채우게 */
.select-pill select{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  display: block;                /* inline → block */
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: #111827;
  cursor: pointer;
  padding: 0 .0rem 0 16px;       /* 좌측 여백만, 우측은 화살표 자리 */
  outline: none;
}

/* 커스텀 화살표 (선택) - 클릭 방해하지 않도록 pointer-events: none */
.select-pill::after{
  content:"";
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -3px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #334155;
  pointer-events: none;          /* ✅ 이게 중요: 화살표가 클릭을 가로채지 않게 */
}

select::-ms-expand{display:none;}


/* 반응형 */
@media (max-width: 600px){
  .campus-top{ gap:10px; }
  .campus-brand img{ height:48px; }
  .select-pill{ padding:7px 34px 7px 10px; }
}

.tt-filter-toggle-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.tt-filter-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: #374151;
}

.tt-filter-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.tt-filter-save-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #16a34a;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
}

.tt-filter-save-btn:hover {
  background: #15803d;
}

.tt-filter-hint {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.4;
}