/* layout-mo.css — 기본 레이아웃 모바일 반응형 (≤768px) · scope: .site
 * <link media="(max-width:768px)"> 로만 적용.
 */

.site {
  --dl-header-h: 80px;
}
.header {
  background: #fff;
  border-bottom: 0;
  box-shadow: none;
  transition: background-color 220ms ease;
}
.main .header:not(.active) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header-inner {
  padding: 0 16px;
  gap: 8px;
}
.header-inner > .logo-heading .logo {
  width: min(240px, calc(100vw - 80px));
  height: auto;
  aspect-ratio: 299 / 40;
}
.mobile-head .logo {
  width: min(240px, calc(100vw - 80px));
  height: auto;
  aspect-ratio: 299 / 40;
}
.header-inner > .logo-heading .logo-university,
.mobile-head .logo-university {
  grid-template-columns: 20.833% minmax(0, 76.19%);
  column-gap: 2.977%;
  width: 56.187%;
  height: 100%;
}
.header-inner > .logo-heading .logo .logo-symbol,
.mobile-head .logo .logo-symbol,
.header-inner > .logo-heading .logo .logo-wordmark,
.mobile-head .logo .logo-wordmark {
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.header-inner > .logo-heading .logo-chinese-university,
.mobile-head .logo-chinese-university {
  width: 100%;
  height: 100%;
  font-size: clamp(15px, 5.3vw, 21px);
}
.header-inner > .logo-heading .logo-service,
.mobile-head .logo-service {
  width: 36.789%;
  height: 100%;
  margin-left: 7.024%;
}
.header-inner > .logo-heading .logo-service--zh,
.mobile-head .logo-service--zh {
  font-size: clamp(14px, 4.8vw, 19px);
}
.header-inner > .util {
  margin-left: auto;
}
/* @rule-override: R-1 — 모바일 유틸은 메뉴가 열린 동안 하단 고정 영역에 유지 */
.header-inner > .util > .util-login,
.header-inner > .util > .util-history,
.header-inner > .util > .util-language {
  display: none;
}
.logo img.logo-main-mobile {
  display: none;
}
.main .header:not(.active) .header-inner .logo-default {
  display: none;
}
.main .header:not(.active) .header-inner .logo-main-mobile {
  display: block;
}
.main .header:not(.active) .header-inner .logo-language-variant--en,
.main .header:not(.active) .header-inner .logo-language-variant--zh {
  filter: brightness(0) invert(1);
}
.hamburger {
  width: 24px;
  height: 24px;
  padding: 0;
}
.hamburger-figma {
  display: none;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.main .header:not(.active) .hamburger-figma {
  display: block;
}
.main .header:not(.active) .hamburger span {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .header {
    transition-duration: 0.01ms;
  }
}

/* 서브 비주얼 */
.sub-visual {
  height: 220px;
  background-position: center 41%;
}
.sub-visual > .inner {
  padding-right: 16px;
  padding-left: 16px;
}
.sub-visual .breadcrumb {
  padding-top: 16px;
  overflow: hidden;
}
.sub-visual .breadcrumb-list {
  overflow-x: auto;
  font-size: 13px;
  scrollbar-width: none;
}
.sub-visual .breadcrumb-list::-webkit-scrollbar {
  display: none;
}
.sub-visual .breadcrumb-item {
  flex: 0 0 auto;
}
.sub-visual .page-title {
  top: 88px;
  font-size: 32px;
}

/* 서브 본문 */
.sub-body {
  padding: 0 16px 50px;
}
.breadcrumb-list {
  font-size: 13px;
}

/* 페이지 타이틀 — 액션 버튼 아래로 */
.page-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 30px 0 20px;
}
.page-title {
  font-size: 22px;
}
.content {
  padding-top: 30px;
  min-height: 200px;
}

/* LNB 헤더·타이틀 축소 (접이식은 tb 에서 상속) */
.lnb {
  padding-top: 20px;
}
.lnb-head {
  padding: 14px 16px;
}
.lnb-title {
  font-size: 17px;
}
.lnb-link {
  padding: 13px 16px;
  font-size: 15px;
}

/* @rule-override: R-10 — 모바일에서는 SNB 탭을 드롭다운으로 대체 */
.snb {
  position: relative;
  margin-top: 20px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.snb-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  color: #fff;
  background: #124531;
  border: 0;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}
.snb-toggle-icon {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 220ms ease;
}
.snb-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 20;
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e7ecea;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(18, 69, 49, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.snb.is-open .snb-list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.snb.is-open .snb-toggle-icon {
  transform: translateY(2px) rotate(225deg);
}
.snb-item {
  min-width: 0;
}
.snb-item + .snb-item {
  border-top: 1px solid #e7ecea;
}
.snb-link {
  justify-content: flex-start;
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 0;
  font-size: 15px;
  line-height: 24px;
  text-align: left;
}
.snb-link.is-active {
  color: #124531;
  background: #e7ecea;
}
.snb-link.is-active:hover {
  color: #124531;
}

@media (prefers-reduced-motion: reduce) {
  .snb-toggle-icon,
  .snb-list {
    transition-duration: 0.01ms;
  }
}

/* 전체메뉴 1열 스택 */
.sitemap-cols {
  grid-template-columns: 1fr;
  gap: 20px;
}
.sitemap-inner {
  padding: 30px 16px 50px;
}

/* 모바일 메뉴는 viewport 전체를 덮는 고정 플로팅 패널 */
[data-role="mobile-nav"] {
  top: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
}
.mobile-head .mobile-close {
  margin-left: auto;
}

/* 모바일 메뉴가 열리면 기존 유틸을 복제하지 않고 패널 하단 고정 영역에 포함한다. */
.header:has([data-role="mobile-nav"].is-open) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header:has([data-role="mobile-nav"].is-open) .header-inner > .util {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 161;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 6px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--dl-line);
  background: #fff;
}
.header:has([data-role="mobile-nav"].is-open) .header-inner > .util > .util-login,
.header:has([data-role="mobile-nav"].is-open) .header-inner > .util > .util-history,
.header:has([data-role="mobile-nav"].is-open) .header-inner > .util > .util-language {
  display: inline-flex;
  min-width: 0;
}
.header:has([data-role="mobile-nav"].is-open) .header-inner > .util > .util-login,
.header:has([data-role="mobile-nav"].is-open) .header-inner > .util > .util-history {
  padding-right: 10px;
  padding-left: 10px;
}
.header:has([data-role="mobile-nav"].is-open) .header-inner > .util > .util-language {
  width: 100%;
}
.header:has([data-role="mobile-nav"].is-open) .header-inner > .util > .hamburger {
  display: none;
}
.header:has([data-role="mobile-nav"].is-open) .lang-menu {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom right;
}
.header:has([data-role="mobile-nav"].is-open) [data-role="mobile-nav"] {
  padding-bottom: 70px;
}

/* 푸터 */
.footer-top {
  padding-bottom: 24px;
}
.footer-links {
  justify-content: center;
  gap: 12px 20px;
}
.footer-links a {
  font-size: 15px;
  line-height: 20px;
}
.footer-inner {
  padding: 30px 16px 36px;
}
.footer-info {
  padding-top: 28px;
}
.footer-logo,
.footer-logo img {
  width: 202px;
  height: 48px;
}
.footer-addr,
.footer-contact,
.footer-copy {
  font-size: 14px;
  line-height: 22px;
}
.footer-contact {
  max-width: 330px;
}