@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');

body{font-family: 'Paperlogy', sans-serif;font-weight: 400;font-size: 16px;line-height: 140%;color: #696969;}
.over-hidden {overflow:hidden;}
.font-paper{font-family: 'Pretendard', sans-serif;}
.wrap.sub{font-family: 'Pretendard', sans-serif;}

.header-wrap {position: fixed;left: 0;right: 0;top: 0;z-index: 10000;transition: all 0.3s;height: fit-content;background: transparent;border-bottom: 1px solid rgba(255, 255, 255, 0.1);transition: all .5s;}
.header-wrap.active {background: #fff;}
.header-wrap .header-box {margin: 0 auto;max-width: 1600px;}

.main-content-wrap01 {background: url(../img/main/bg-content01.png)no-repeat center;background-size: cover;}
.main-content-wrap01 .main-content-box01 {max-width: 1600px;margin: 0 auto;}
.main-content-wrap02 {background: url(../img/main/bg-sec02.jpg) no-repeat top center;background-size: cover;background-attachment: fixed;}
.main-content-wrap02 .main-content-box02 {max-width: 1600px;margin: 0 auto;width: 100%;}
.main-content-wrap03 {background: url(../img/main/bg-sec03.png) no-repeat top center;background-size: cover;}
.main-content-wrap03 .main-content-box03 {max-width: 1600px;margin: 0 auto;width: 100%;}

.footer-wrap {background: linear-gradient(0deg, #001736, #001736), linear-gradient(90deg, #000D36 0%, #001736 50.95%, #001E3B 100%);}
.footer-wrap .footer-box {margin: 0 auto;width: 100%;max-width: 1600px;}

.path-wrap .path-box {max-width: 1440px;width: 100%;margin: -39px auto 0;position: relative;z-index: 10;}
.content-wrap {max-width: 1440px;margin: 0 auto;width: 100%;padding: 80px 0 100px;box-sizing: border-box;}
.title-box {margin: 0 0 50px;}
.tab-box {padding: 0 0 50px;}

.sub-visual-inner {background-image: linear-gradient(rgba(5,10,22,.28),rgba(5,10,22,.28)), url('/_res/nsu/kbeauty/img/content/bg-subvi-new.jpg') !important; background-size: cover !important; background-position: center !important;}

@media (max-width: 1024px){
.content-wrap {padding: 30px 16px 50px;}
.title-box {margin: 0 0 30px;}
.tab-box {padding: 0 0 30px;}
}

/* ============================================================
   2026-07-30 상단 학과명 이미지화 + 번역 시 헤더 무너짐 수정
   근거: 05.산출물/로고_학과명_260730/적용사양.md
   ============================================================ */

/* ① 학과명을 이미지로 — 대학 로고의 logo-b / logo-scroll 토글과 같은 방식 */
.header-inner .logo a .name img {height: 30px;width: auto;vertical-align: middle;display: block;}
.header-wrap .header-inner .logo .name img.name-scroll {display: none;}
.header-wrap.active .header-inner .logo .name img.name-scroll {display: block;}
.header-wrap.active .header-inner .logo .name img.name-b {display: none;}

/* ② 로고는 절대 찌그러지지 않는다.
      .logo 가 flex:0 1 auto 라 번역으로 메뉴가 길어지면 로고부터 압축돼
      학과명이 4줄로 쪼개지고 헤더가 112px -> 200px 로 벌어졌다. */
.header-inner .logo {flex-shrink: 0;}
.header-inner .logo a {flex-wrap: nowrap;}
.header-inner .logo a .name {white-space: nowrap;flex-shrink: 0;}

/* ③ 번역 중 메뉴 맞춤 (2026-07-31)
      메뉴는 번역해도 그대로 보인다. 대신 언어 전환 버튼과 전체메뉴(≡)는
      어떤 언어·어떤 폭에서도 절대 가려지지 않아야 한다.

      - 글자 22px -> 16px, 항목 좌우 패딩 40px -> 12px 로 줄인다
      - 그래도 안 들어가면 단어를 쪼개지 않고 '항목 단위'로 다음 줄로 넘긴다
        (단어 분리는 Departamento/Mag-aaral 같은 긴 단어가 중간에서 끊겨 보기 나쁘다)
      - 언어 버튼과 ≡ 는 flex-shrink:0 으로 고정해 절대 밀리지 않게 한다

      실측: 4개 언어(en/tl/th/mn) x 4개 폭(1920/1440/1280/1100) 전부
            언어버튼·≡ 밀림 0px, 메뉴 화면밖 0px, 겹침 0px. */
html.translated-ltr .gnb-box,
html.translated-rtl .gnb-box {min-width: 0 !important;}

html.translated-ltr .gnb-box > ul.depth_01,
html.translated-rtl .gnb-box > ul.depth_01 {flex-wrap: wrap !important;justify-content: flex-end !important;row-gap: 2px;min-width: 0 !important;}

html.translated-ltr .gnb-box > ul.depth_01 > li:not(.language) > a,
html.translated-rtl .gnb-box > ul.depth_01 > li:not(.language) > a {font-size: 16px !important;}

html.translated-ltr .gnb-box > ul.depth_01 > li:not(.language) > a span,
html.translated-rtl .gnb-box > ul.depth_01 > li:not(.language) > a span {font-size: 16px !important;padding-left: 12px !important;padding-right: 12px !important;padding-top: 8px !important;padding-bottom: 8px !important;white-space: nowrap !important;}

/* 언어 버튼(li.language)은 .gnb-box 안에 있다 — 밀리면 한국어로 되돌릴 수 없다 */
html.translated-ltr .gnb-box > ul.depth_01 > li.language,
html.translated-rtl .gnb-box > ul.depth_01 > li.language {flex-shrink: 0 !important;}

html.translated-ltr .btn-sitemap,
html.translated-rtl .btn-sitemap {flex-shrink: 0 !important;}

/* 학과명 크기 3단계는 원래 CSS 를 그대로 따라간다 — 22px / (≤1200) 18px / (≤500) 가변 */
@media (max-width: 1200px){
.header-inner .logo a .name img {height: 18px;}
}

@media screen and (max-width: 500px){
.header-inner .logo a .name img {height: calc(18/500*100vw);}
}

@media (max-width: 1024px){
.header-inner .slideMenu.on .logo .name img.name-b {display: none;}
.header-inner .slideMenu.on .logo .name img.name-scroll {display: block;}
}

/* ④ 모바일 슬라이드 메뉴 학과명 (2026-08-03)
      번역 시 학과명이 'K-Beauty Culture Industry' 로 번역되던 자리.
      남색본 이미지로 바꿨고, 뒤에 <br> + 영문 학과명이 이어진다.
      ★ display:block 이면 <br> 과 겹쳐 빈 줄이 하나 더 생긴다 → inline-block 이어야 한다. */
.header-inner .slideMenu .logo .name img.name-m {display: inline-block;vertical-align: middle;}