/* site/layout.css — 누리집 공통 레이아웃 (헤더 · GNB · 메가메뉴 · 드로어 · 서브페이지 밴드 · 푸터)
   원천: 목업 추출 샘플 CSS. 열림/닫힘은 JS(site.js)가 is-open · is-scrolled 클래스로 제어한다. */

/* 2단 헤더 실측값 — 상단 60 + GNB 48 = 108px.
   tokens.css 정본은 --header-h: 90px(1단 시안 기준)라 구현 레이어에서 덮어쓴다. 정본 반영 여부는 판단 대기. */
:root {
  --header-h: 108px;
  --header-top-h: 60px;
  --header-nav-h: 48px;
}
@media (max-width: 767px) {
  :root { --header-h: var(--header-h-mobile); }
}

/* 서브페이지 밴드 높이 — 화면마다 바뀌는 것은 제목과 브레드크럼뿐이라 시안 실측 320px를 내용에 맞춰 낮췄다.
   tokens.css 정본은 시안 값 그대로 두고 여기서 덮어쓴다. 좁은 폭은 문의 정보가 줄바꿈돼 내용이 이 값보다 높으므로 내용 높이를 따른다. */
:root {
  --page-band-h: 160px;
}

/* ── 헤더 · GNB ── */
/* 헤더 상자는 상단 줄 높이만 갖고, 메뉴 줄은 그 아래에 겹쳐 띄운다. 메뉴 줄 자리는 아래 여백으로 비워 둔다.
   메뉴 줄을 숨기고 보일 때 문서 흐름의 높이가 바뀌지 않아야 한다 — 높이가 바뀌면 본문이 밀려 움직이고,
   브라우저가 보던 내용을 붙잡으려고 스크롤 위치를 되돌려 스크롤이 끊긴다. */
.header-wrap {
  position: sticky; top: 0; z-index: var(--z-header);
  margin-bottom: var(--header-nav-h);
  background: var(--c-white);
}
.header-wrap.is-scrolled { box-shadow: var(--shadow-md); }
.header-top {
  position: relative;
  z-index: var(--z-raised);   /* 숨는 메뉴 줄이 이 줄 뒤로 들어간다 */
  height: var(--header-top-h);
  display: grid;
  /* 로고 칸은 0까지 줄어 기관명이 줄을 바꾸고, 유틸 칸은 로그인 인사말까지 든 제 폭 아래로 줄지 않는다 —
     폭이 넉넉하면 두 칸이 같아 검색창이 가운데에 온다 */
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-8);
  background: var(--c-white);
}
.header-top .logo-lockup { justify-self: start; }
.header-search { justify-self: center; }
.header-util { justify-self: end; display: flex; align-items: center; gap: var(--sp-7); }
.header-search {
  display: flex;
  align-items: center;
  width: 360px;
  height: 40px;
  padding: 0 var(--sp-2) 0 var(--sp-4);
  background: var(--c-surface-tint);
  border: var(--bd);
  border-radius: 999px;
}
.header-search:focus-within { border-color: var(--c-primary); background: var(--c-white); }
.header-search__input {
  flex: 1; min-width: 0;
  height: 100%;
  border: none; background: none; outline: none;
  font-size: var(--fs-15); color: var(--c-text);
}
.header-search__input::placeholder { color: var(--c-text-cap); }
.header-search__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: none; color: var(--c-primary);
}
.search-icon-btn { display: none; }
.header-nav-bar {
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: var(--header-nav-h);
  padding: 0 var(--sp-8);
  background: var(--c-white);
  border-top: var(--bd-soft);
  border-bottom: var(--bd-soft);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
/* GNB와 메가메뉴는 같은 8열이어야 대분류 아래에 하위 메뉴가 온다. 두 grid의 칸을 common.css의 min-width: 0 목록에 두어
   영어·베트남어의 긴 글자가 열을 넓히지 못하게 하고, 글자는 열 안에서 줄바꿈한다 */
.site-nav {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: var(--sp-3);
  align-items: stretch;
}
/* 스크롤을 내리면 메뉴 줄만 상단 줄(로고·검색·유틸리티) 뒤로 미끄러져 들어간다. 위치만 옮기므로 본문은 움직이지 않는다.
   메뉴가 숨은 동안 키보드 포커스가 보이지 않는 링크로 들어가지 않도록 visibility로 함께 끈다 —
   visibility는 전환이 끝난 뒤에 꺼지고 되돌아올 때는 즉시 켜지므로 미끄러지는 동안에도 메뉴가 보인다. */
.header-wrap.is-scrolled .header-nav-bar { transform: translateY(-100%); visibility: hidden; }
.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  text-align: center;
  word-break: keep-all;
  line-height: var(--lh-tight);   /* 두 줄이 된 대분류가 메뉴 줄 높이 안에 들도록 */
}
.site-nav a:hover, .site-nav a.is-current {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}
.logo-lockup { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.3; }
/* 기관 이름이 한 줄에 들지 않으면 로고 글자 안에서 줄을 바꾼다 — 줄바꿈 없이 두면 긴 이름이
   PC 머리줄에서는 유틸(인사말·언어 선택)을, 모바일 머리줄에서는 검색·메뉴 버튼을 화면 밖으로 밀어낸다.
   버튼 묶음과 마크는 줄어들지 않고 남는 폭을 로고 글자가 갖는다 */
.header-top .logo-lockup, .logo-text { min-width: 0; }
.logo-lockup svg, .header-util { flex-shrink: 0; }
.logo-cap { font-size: var(--fs-11); color: var(--c-text-mute); font-weight: var(--fw-regular); }
.logo-word { font-size: var(--fs-18); color: var(--c-primary); font-weight: var(--fw-bold); }
.logo-en { font-size: var(--fs-11); color: var(--c-text-cap); font-weight: var(--fw-regular); white-space: nowrap; }
/* PC 헤더는 스크롤 위치와 무관하게 한 가지 크기로 두고, 로고 곁 보조 글자는 표시하지 않는다 */
.logo-cap, .logo-en { display: none; }
.util-links { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text); white-space: nowrap; }
.util-links a { display: inline-flex; align-items: center; gap: var(--sp-1); }
.util-links a svg { color: var(--c-text-cap); }
.util-links a:hover svg { color: var(--c-primary); }
.util-links a:hover { color: var(--c-primary); }
.util-links .u-sep { color: var(--c-line-strong); }
.lang-select {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  background: none;
  border: none;
  white-space: nowrap;
}
.search-icon-btn {
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: none; color: var(--c-text);
}
.lang-wrap { position: relative; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 150px;
  list-style: none;
  background: var(--c-white);
  border: var(--bd);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2) 0;
  margin: 0;
  z-index: var(--z-raised);
  display: none;
}
.lang-menu.is-open { display: block; }
.lang-menu a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-14);
  color: var(--c-text-soft);
  text-decoration: none;
}
.lang-menu a:hover { background: var(--c-surface-tint); color: var(--c-primary); }
.lang-menu a[aria-current] { font-weight: var(--fw-semibold); color: var(--c-primary); }
.hamburger-btn { display: none; background: none; border: none; color: var(--c-primary); width: 44px; height: 44px; align-items: center; justify-content: center; }

/* 로그인 상태 표시 — 서버가 isLoggedIn으로 로그인·회원 변형을 가른다. 로그아웃은 POST 폼이라 폼을 글자처럼 흘린다 */
.util-user { display: inline-flex; align-items: center; gap: var(--sp-2); }
.util-user .u-name { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-bold); color: var(--c-primary); }
.util-user .u-name svg { color: var(--c-primary); }
/* 긴 이름이 유틸 칸을 넓혀 로고를 머리줄 높이 밖으로 밀지 않게, 인사말은 한 줄에서 말줄임으로 줄이고 전체는 title로 보인다 */
.util-user .u-name__text { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-logout-form { display: inline; margin: 0; }
.util-user .u-logout { background: none; border: none; padding: 0; font-family: var(--font-sans); font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text); }
.util-user .u-logout:hover { color: var(--c-primary); }

/* 메가메뉴 — 메뉴 줄 바로 아래 */
.megamenu {
  position: absolute;
  top: calc(100% + var(--header-nav-h));
  left: 0; right: 0;
  background: var(--c-white);
  border-bottom: var(--bd-soft);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6) var(--sp-8) var(--sp-8);
  display: none;
}
.megamenu.is-open { display: block; }
.megamenu__cols {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: var(--sp-3);
}
.megamenu .mm-col { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.megamenu .mm-col a { font-size: var(--fs-14); color: var(--c-text-soft); text-decoration: none; text-align: center; word-break: keep-all; }
.megamenu .mm-col a:hover { color: var(--c-accent); }
/* 채택교 교원에게만 보이는 신청·지원 하위 메뉴(강의시간 등록·현황) — 메가메뉴와 드로어가 같은 클래스를 쓴다 */
.mm-teacher, .drawer .d-sub a.mm-teacher { color: var(--c-accent); font-weight: var(--fw-semibold); }
.mm-teacher:hover, .drawer .d-sub a.mm-teacher:hover { color: var(--c-accent-hover); }

/* ── 모바일 드로어 ── */
.drawer-dim { position: fixed; inset: 0; background: rgba(2, 29, 54, .45); z-index: var(--z-drawer); display: none; }
.drawer-dim.is-open { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--c-white);
  z-index: calc(var(--z-drawer) + 1);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
  overflow-y: auto;
  padding: var(--sp-5) var(--gutter-mobile) var(--sp-10);
}
.drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.drawer-util { display: flex; gap: var(--sp-2); font-size: var(--fs-14); color: var(--c-text-soft); align-items: center; }
.drawer-util .u-name { font-weight: var(--fw-bold); color: var(--c-primary); }
.drawer-util .u-logout { background: none; border: none; padding: 0; font-family: var(--font-sans); font-size: var(--fs-14); color: var(--c-text-soft); }
.drawer-close { background: none; border: none; color: var(--c-text); width: 40px; height: 40px; }
.drawer details { border-bottom: var(--bd-soft); }
.drawer summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) 0;
  font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-text);
  cursor: pointer;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { transition: transform var(--dur-fast) var(--ease); color: var(--c-text-cap); }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer .d-sub { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 0 var(--sp-4) var(--sp-3); }
.drawer .d-sub a { font-size: var(--fs-14); color: var(--c-text-soft); }
.drawer-lang { margin-top: var(--sp-5); font-size: var(--fs-14); color: var(--c-text-soft); }

/* ── 서브페이지 헤더 밴드 ── */
.pageband { position: relative; background: var(--grad-page-band); overflow: hidden; min-height: var(--page-band-h); display: flex; align-items: center; }
.pageband__wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* 워터마크는 밴드 높이에 맞춰 줄어든다 — 비율은 fragments/page-band.html의 viewBox(320×260)다 */
.pageband__wm { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 320 / 260; pointer-events: none; opacity: .34; }
/* 문의 정보가 아랫줄로 내려가는 폭에서는 줄 간격을 좌우 간격보다 좁게 둔다 */
.pageband__inner { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--sp-8) var(--gutter); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-8); flex-wrap: wrap; }
.pageband__h1 { font-size: var(--fs-40); font-weight: var(--fw-bold); color: var(--c-text); letter-spacing: var(--ls-tight); word-break: keep-all; margin: 0 0 var(--sp-3); }
.pageband__desc { font-size: var(--fs-16); color: var(--c-text-mute); line-height: var(--lh-base); word-break: keep-all; margin: 0 0 var(--sp-5); max-width: 560px; }
.crumb-inline { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); color: var(--c-text-soft); flex-wrap: wrap; }
.crumb-inline svg { color: var(--c-text-soft); flex: 0 0 auto; }
.crumb-inline .sep { color: var(--c-navy-300); display: flex; }
.crumb-inline .current { color: var(--c-primary); font-weight: var(--fw-bold); }
/* 홈과 메뉴 링크는 평소 글자와 같은 모양이고 마우스를 올렸을 때만 밑줄이 생긴다 */
.crumb-inline a { color: inherit; text-decoration: none; }
.crumb-inline a.current { color: var(--c-primary); }
.crumb-inline a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.crumb-inline a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }
/* 제목 옆에 들지 않아 아랫줄로 내려가도 오른쪽에 붙는다 */
.infoline { display: inline-flex; align-items: center; gap: var(--sp-3); margin-left: auto; font-size: var(--fs-14); color: var(--c-text-soft); padding-bottom: var(--sp-1); }
.infoline .divider { width: 1px; height: 16px; background: var(--c-line-strong); }
.infoline .label { color: var(--c-primary); font-weight: var(--fw-bold); }
.infoline .hours { display: flex; align-items: center; gap: var(--sp-1); }
.infoline .phone { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-primary); }

.subpage-body { padding-top: var(--sp-14); padding-bottom: var(--sp-24); }   /* 축약형이 .container의 좌우 거터를 0으로 덮어쓰던 결함 수정 (2026-08-21) */

/* ── 푸터 ── */
.site-footer { background: var(--c-primary); margin-top: var(--sp-24); }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: var(--sp-10) var(--gutter) var(--sp-8); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-10); flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: var(--sp-4); }
.footer-brand svg { flex: 0 0 auto; }
.footer-brand-text { display: flex; flex-direction: column; gap: 3px; }
.footer-eyebrow { font-size: var(--fs-11); color: rgba(255, 255, 255, .72); }
.footer-word { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--c-white); letter-spacing: var(--ls-tight); }
.footer-en { font-size: var(--fs-12); color: rgba(255, 255, 255, .68); }
.footer-info { flex: 1; min-width: 280px; }
.footer-info p { margin: 0 0 var(--sp-2); }
.footer-addr, .footer-contact { font-size: var(--fs-14); color: rgba(255, 255, 255, .82); }
.footer-copy { font-size: var(--fs-13); color: rgba(255, 255, 255, .6); margin-top: var(--sp-3) !important; }
.footer-legal { font-size: var(--fs-13); margin-top: var(--sp-2) !important; }
.footer-legal a { color: rgba(255, 255, 255, .72); text-decoration: underline; text-underline-offset: 2px; }
/* 개인정보 처리방침은 색과 굵기로 다른 고지와 구분해 보인다 */
.footer-legal a.footer-legal__privacy { color: var(--c-teal-300); font-weight: var(--fw-bold); }
.footer-legal a:hover { color: var(--c-white); }
.footer-legal__sep { color: rgba(255, 255, 255, .45); margin: 0 var(--sp-2); }
.footer-related { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); }
.footer-related-label { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-white); }
.footer-select-wrap { position: relative; }
.footer-select { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-width: 220px; height: 44px; padding: 0 var(--sp-4); border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-md); color: var(--c-white); font-size: var(--fs-14); background: transparent; }
.footer-select svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
.footer-select.is-open { border-color: var(--c-white); }
.footer-select.is-open svg { transform: rotate(180deg); }
.footer-select-options { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--c-white); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); z-index: var(--z-raised); display: none; }
.footer-select-options.is-open { display: block; }
.footer-select-options a { display: block; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-14); color: var(--c-text); background: none; border: none; }
.footer-select-options a:hover { background: var(--c-surface-tint); }

/* ── 반응형 — 레이아웃 ── */
@media (max-width: 1439px) {
  .header-top, .header-nav-bar, .megamenu { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .header-search { width: 280px; }
  .site-nav a { font-size: var(--fs-15); }
  .logo-en { display: none; }
  /* 로그인 상태 유틸리티가 좁은 PC 폭에서 검색창·로고와 겹치지 않게 */
  .header-util { gap: var(--sp-4); }
  .util-links { gap: 6px; }
}
@media (max-width: 1279px) {
  /* 영어처럼 대분류 글자가 긴 언어에서 좁은 열에 세 줄로 넘쳐 메뉴 줄 밖으로 잘리지 않게 글자와 열 간격을 줄인다.
     열 간격은 GNB와 메가메뉴가 같아야 열이 맞는다 */
  .site-nav, .megamenu__cols { column-gap: var(--sp-2); }
  .site-nav a { font-size: var(--fs-14); }
}
@media (max-width: 1100px) {
  /* 검색창 양옆에 로고와 로그인 유틸이 함께 들지 않는 폭이라 인사말을 빼고 마이페이지·로그아웃만 둔다 */
  .header-util .u-name, .header-util .u-name + .u-sep { display: none; }
}
@media (max-width: 1023px) {
  .header-top { height: var(--header-h-mobile); padding: 0 var(--gutter-mobile); }
  .logo-cap { display: block; }
  .header-wrap { margin-bottom: 0; }
  .header-nav-bar { display: none; }
  .header-top { display: flex; justify-content: space-between; }
  .header-util .util-links, .header-util .u-sep, .header-util .lang-wrap { display: none; }
  .header-util { gap: var(--sp-1); }
  .header-search { display: none; }
  /* 검색 아이콘을 누르면 헤더 바로 아래에 헤더 폭으로 열린다 */
  .header-search.is-open {
    display: flex;
    position: absolute; top: calc(100% + var(--sp-2)); left: var(--gutter-mobile); right: var(--gutter-mobile);
    width: auto; height: 44px; justify-self: stretch;
    background: var(--c-white); box-shadow: var(--shadow-md);
  }
  .search-icon-btn { display: inline-flex; }
  .megamenu { display: none !important; }
  .hamburger-btn { display: inline-flex; }
  .logo-word { font-size: var(--fs-15); }
  .logo-lockup svg { width: 34px; height: 34px; }
  .infoline { padding-bottom: 0; }
}
@media (max-width: 767px) {
  /* 베트남어·영어의 기관 이름은 한국어보다 훨씬 길어 휴대폰 폭에서 두 줄이 되므로, 헤더 높이 안에 들도록 글자를 줄이고
     위 캡션은 숨긴다 — 캡션까지 두면 영어 캡션도 두 줄로 접혀 로고가 헤더 밖으로 나간다. PC 헤더도 캡션을 숨긴다 */
  .logo-word:not(:lang(ko)) { font-size: var(--fs-13); }
  .logo-cap:not(:lang(ko)) { display: none; }
  /* 좁은 폭의 밴드에는 화면 이름과 브레드크럼만 둔다 — 전화번호는 푸터 기관 정보에 있다 */
  .pageband .infoline { display: none; }
  .footer-related { align-items: flex-start; width: 100%; }
  .footer-select { width: 100%; }
}