@charset "UTF-8";

/* Mobile first: base -> 768px -> 1024px -> 1440px. */

/* 2027 대학교 헤더·GNB(1440 미만) — layout_mob.css 의 .gnb 규칙을 클래스명만 바꿔 옮긴 것 + 헤더 틀.
   기기(DEVICE_GBN)가 아니라 화면 폭으로 건다 — link media="(max-width: 1439px)" (IncHeaderM · IncHeaderS).
   PC 로 접속해 창을 줄여도 걸리므로 layout.css 의 PC 헤더 값(150px · 좌우 8% · 햄버거 숨김)을 여기서 덮는다. */
/* =========================================================
   헤더 틀 — 값은 layout_mob.css 와 같다. PC(layout.css)로 들어왔을 때만 실제로 덮어쓴다
   ========================================================= */
/* layout.css 의 해상도 구간별 .header { transform: scale(...) } 해제.
   transform 이 걸린 요소는 그 안 position: fixed 자식의 기준(containing block)이 된다
   → 메뉴(.rn-kgnb)의 top/bottom 이 뷰포트가 아니라 120px 짜리 헤더 안에서 계산돼 높이가 0이 됐다.
   1440 미만은 햄버거로 바뀌어 PC 헤더를 축소할 이유가 없다 (.claude/renewal-2027.md §3-8).
   layout.css 가 width 에 !important 를 써서 이쪽도 !important. */
.header {
    /* UNB 42 + GNB 64 (시안 106) — 100 이면 GNB 아래 6px 가 본문과 겹침 */
    --rn-kheader-h: 106px;
    height: auto;
    z-index: 550;
    transform: none !important;
    width: 100% !important;
}

/* 메뉴가 열렸을 때만 퀵메뉴(.rn-quick, body 로 옮겨 붙는 fixed z 9999) 위로.
   renewal_main.css 의 767 이하 .header{z-index:100 !important} 도 덮어야 해서 !important */
.header.active {
    z-index: 10001 !important;
}

/* 덮개도 퀵메뉴 위로 — 1440 미만에서 .dimm 을 쓰는 건 햄버거 메뉴뿐이다 */
.dimm.on {
    z-index: 10000;
}

/* layout.css 의 .inner-header-wrap(높이 150 · absolute · overflow hidden)을 확실히 덮으려고
   클래스 2개짜리 선택자로 쓴다 — 로드 순서가 바뀌어도 특이도로 이긴다.
   overflow 는 PC 에서 내려오는 드롭다운을 헤더 높이로 자르려고 건 것이라 1440 미만에선 메뉴만 잘린다 */
.header .inner-header-wrap {
    position: relative;
    height: var(--rn-kheader-h);
    overflow: visible;
    background: #fff;
}

/* 2027 컬러변경(시안 1202:26694) — PC 와 같은 파랑 그라데이션 띠.
   로고·로그인·햄버거 모두 흰색으로 바뀐다 */
.inner-header {
    height: 64px;
    padding: 0 16px;
    background: linear-gradient(90deg, #002dae 0%, #00115b 100%);
}

/* 로고 — PC 가로형 숨기고 모바일 로고 */
.inner-header .logo {
    display: none;
}

.logo-mob {
    display: flex;
    align-items: center;
}

.logo-mob img {
    display: block;
    margin-top: 0;
    margin-left: 0px;
    height: 32px;
}

/* 햄버거 */
.inner-header .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 4px;    
    z-index: 30;
}

.inner-header .menu-btn:before, .inner-header .menu-btn:after {
    display: none;
}

.inner-header .menu-btn > span {
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    background: url("/type/KOR_2027/img/renewal/gnb/ico-menu-white.svg") 50% no-repeat;
    background-size: 19.4px 15.3781px;
}

.inner-header .menu-btn.off > span {
    background-image: url("/type/KOR_2027/img/renewal/gnb/ico-close-white.svg");
    background-size: 20px;
}

/* 유틸 — PC 로그인·사이트맵 숨기고 모바일 로그인만 */
.header-util-web .main-login-icon, .header-util-web .sitemap {
    display: none;
}

/* 로그인을 띠 안 오른쪽으로 — 시안 1202:26757. 뒤에 햄버거가 와서 구분선은 ::after 로 */
.inner-header .header-util-web {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 8px;
}

.inner-header .header-util-web::after {
    content: "";
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.4);
}

/* layout.css 가 id 로 숨기고 있어서 id 로 되살린다 */
.header-util-web .main-login-icon-mob, #login-icon_mob, #userinfo_mob {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    white-space: nowrap;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600;    
    /* layout_mob.css 는 이걸 띠 바깥 아래에 띄운다 — 띠 안으로 돌리려면 풀어야 한다 */
    position: static;
    right: auto;
    top: auto;
    margin-right: 0;
}

#login-icon_mob img, #userinfo_mob img {
    width: 17.8px;
    height: 19.8px;
    margin: 0 3.1px;
}

.gnb-close {
    display: none;
}

/* =========================================================
   GNB — layout_mob.css 의 .gnb 규칙을 클래스명만 바꿔 그대로 옮김
   ========================================================= */
.rn-kgnb {
    position: fixed;
    left: -100%;
    top: 106px;
    padding-top: 0;
    background-color: #fff;
    bottom: 0;
    width: 100%;
    /* max-width: 768px; */
    overflow-y: hidden;
    overflow-x: auto;
    box-sizing: border-box;
    z-index: 25;
    transition: 0.2s;
}

.rn-kgnb.open {
    top: 106px;
    left: 0;
}

.rn-kgnb .rn-kgnb__desc {
    display: none;
}

.rn-kgnb a {
    font-size: 15px;
    color: #111;
}

.rn-kgnb .rn-kgnb__list {
    overflow: auto;
    height: 100%;
    background: #363636;
    position: relative;
    top: 0;
}

.rn-kgnb .rn-kgnb__item > a {
    font-weight: 300;
    color: #fff;
    width: 136px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 1.48;
    letter-spacing: -0.27px;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 8px 16px;
}

.rn-kgnb .rn-kgnb__item.active > a {
    background-color: #002DAD;
    font-weight: 600;
}

.rn-kgnb__list .rn-kgnb__panel {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    height: 100%;
    width: calc(100% - 136px);
    background: #fff;
    border-top: 1px solid #e9e9e9;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.rn-kgnb__list .rn-kgnb__panel.open {
    z-index: 1;
}

.rn-kgnb__list .rn-kgnb__panel.open .rn-kgnb__dep2 {
    opacity: 1;
    left: 0;
    transition: 0.2s;
}

/* 입학안내 배너는 모바일에서 일반 하위 메뉴와 같은 텍스트 행으로 표시한다. */
.rn-kgnb__list .rn-kgnb__item--effect .gnbSub_ipsi img {
    display: none;
}

.rn-kgnb__list .rn-kgnb__item--effect .gnbSub_ipsi a {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    background: none;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.rn-kgnb__list .rn-kgnb__item--effect .gnbSub_ipsi {
    margin: 0;
    padding: 0 24px;
}

.rn-kgnb__list .rn-kgnb__item--effect .gnbSub_ipsi a > span {
    text-indent: 0;
}

.rn-kgnb__list .rn-kgnb__item--effect .gnbSub_ipsi a:after {
    content: none;
}

.rn-kgnb__list .rn-kgnb__dep2 {
    padding: 0 24px;
    opacity: 0;
    position: relative;
    left: 45%;
}

.rn-kgnb__list .rn-kgnb__dep2 .img-box img {
    width: 100%;
}

.rn-kgnb__list .rn-kgnb__dep2 .img-box + a {
    font-size: 20px;
    border-radius: 45px;
    height: 50px;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 0 0 0 20px;
    background: #d6b059;
    color: #fff;
    width: fit-content;
    margin-top: 30px;
}

.rn-kgnb__list .rn-kgnb__dep2 .img-box + a:after {
    content: '';
    width: 50px;
    height: 50px;
    background: url("/type/KOR_2023/img/main/img-arrow-next.png") 50% no-repeat;
    background-size: 33px;
    margin-top: -9px;
}

.rn-kgnb__list .rn-kgnb__dep2 > li > a,
.rn-kgnb__list .rn-kgnb__item--effect .gnbSub_ipsi a,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_tit,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse > li > .btnGold {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.48;
    letter-spacing: -0.24px;
    color: #222;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    padding: 8px 0;
    border-bottom: 1px solid #e9e9e9;
}

.rn-kgnb__list .rn-kgnb__dep2 > li.child > a:after {
    content: '';
    width: 14px;
    height: 14px;
    flex: none;
    background: url("/type/KOR_2027/img/renewal/gnb/ico-arrow-down.svg") 50% / 14px 14px no-repeat;
}

/* 열린 2depth — 글자·밑줄·화살표 모두 파랑 */
.rn-kgnb__list .rn-kgnb__dep2 > li.on > a {
    color: #002DAD;
    font-weight: 600;
    border-bottom-color: #002DAD;
}

.rn-kgnb__list .rn-kgnb__dep2 > li.child.on > a:after {
    background-image: url("/type/KOR_2027/img/renewal/gnb/ico-arrow-up-on.svg");
}

.rn-kgnb__list .rn-kgnb__dep3 {
    display: none;
}

.rn-kgnb__list .rn-kgnb__dep3,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_ct {
    padding: 8px 0;
    background: rgba(0, 111, 235, 0.05);    
}

.rn-kgnb__list .rn-kgnb__dep3 > li > a,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_ct a {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 36px;
    padding: 4px 16px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.48;
    letter-spacing: normal;
    color: #545454;
    justify-content: flex-start;
    border: 0;
    height: auto;
    background: none;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* 3depth 머리 기호는 점이 아니라 4px 짧은 선 */
.rn-kgnb__list .rn-kgnb__dep3 > li > a:before,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_ct a::before {
    content: '';
    width: 4px;
    height: 1px;
    flex: none;
    display: block;
    background: url("/type/KOR_2027/img/renewal/gnb/line-dep3.svg") 50% / 4px 1px no-repeat;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse {
    margin: 0;
    padding: 0 24px;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse > li,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse dl,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse dt,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse dd {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .btnGold {
    width: 100%;
    height: auto;
    background: none;
    border-radius: 0;
    margin: 0;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .btnC_arrLineR > span {
    display: inline;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    background: none;
    text-align: left;
    padding: 0;
    line-height: inherit;
    color: inherit;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .btnGold:after {
    content: none;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_tit {
    background-image: none !important;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_tit > a {
    color: inherit;
    font: inherit;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .rn-edu-toggle {
    width: 100%;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    outline-offset: -2px;
}

.rn-edu-toggle::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    background: url("/type/KOR_2027/img/renewal/gnb/ico-arrow-down.svg") center / 14px 14px no-repeat;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .rn-edu-toggle[aria-expanded="true"] {
    color: #002DAD;
    font-weight: 600;
    border-bottom-color: #002DAD;
}

.rn-edu-toggle[aria-expanded="true"]::after {
    background-image: url("/type/KOR_2027/img/renewal/gnb/ico-arrow-up-on.svg");
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_ct[hidden] {
    display: none;
}

.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_list,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_list > li,
.rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_list > li + li {
    margin: 0;
    padding: 0;
    list-style: none;
}
@media screen and (max-width:375px){
    .logo-mob img{
        width: stretch;
    }
    .main-login-icon-mob img{
        display: none;
    }
}
@media screen and (min-width: 768px) {
    .header {
        --rn-kheader-h: 120px;
    }
    .rn-kgnb{
        top: 120px;
    }
    .rn-kgnb.open {
        top: 120px;
        left: 0;
    }
    .inner-header {
        height: 80px;
    }

    .inner-header .menu-btn {
        height: 80px;
    }

    .logo-mob img {
        height: 40px;
    }

    .rn-kgnb__list .rn-kgnb__panel {
        width: calc(100% - 200px);
    }

    .rn-kgnb .rn-kgnb__item > a {
        width: 200px;
        font-size: 20px;
        min-height: 60px;
    }

    .rn-kgnb__list .rn-kgnb__dep2,
    .rn-kgnb__list .rn-kgnb__item--effect .gnbSub_ipsi,
    .rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse {
        padding: 0 30px;
    }

    .rn-kgnb__list .rn-kgnb__dep2 > li > a,
    .rn-kgnb__list .rn-kgnb__item--effect .gnbSub_ipsi a,
    .rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_tit,
    .rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse > li > .btnGold {
        font-size: 18px;
        min-height: 60px;
    }

    .rn-kgnb__list .rn-kgnb__dep3,
    .rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_ct {
        padding: 12px 0;
    }

    .rn-kgnb__list .rn-kgnb__dep3 > li > a,
    .rn-kgnb__list .rn-kgnb__item--edu .etc_eduCourse .etc_ct a {
        font-size: 16px;
    }
}
@media screen and (max-width: 375px) {
    .rn-unb .rn-unb__sites li a,
    .rn-unb .rn-unb__sites .rn-unb__current {
        padding: 4px;
        font-size: 14px;
        letter-spacing: -0.15px;
    }

    .rn-unb .rn-unb__sites li:first-child a {
        padding-left: 4px;
    }

    .rn-unb .rn-unb__cta a {
        gap: 4px;
        height: 32px;
        padding: calc(0.04em * 1) 4px 0;
        font-size: 14px;
        letter-spacing: -0.24px;
    }
}
@media screen and (max-width: 450px) {
    .rn-unb__cta > a[href="https://en.sdu.ac.kr/"] {
        display: none;
    }
}