@charset "UTF-8";

@media screen and (max-width: 767px) {
    .rn-main [data-rn-slider-track] {
        touch-action: pan-y pinch-zoom;
    }
}
/* 입학 리뉴얼 메인 전용 (Main.jsp, MainPreview.jsp) */

/* top_section.css 의 .site-wrap scale() 축소 해제 */
.typeMain .site-wrap {
    transform: none;
    width: auto;
    height: auto;
    background: #f4f1ef;
}

@media (prefers-reduced-motion: reduce) {
    .rn-main .rn-arrow:is(:hover, :focus-visible)::after { transform: none; }
}

/* =========================================================
   공통 리셋 (기존 공용 CSS 태그 기본값 정리)
   ========================================================= */
.rn-main {
    /* Main navy theme, independent of the header --rn-point. */
    --rn-kv-point: #00105c;
    --rn-ipsi-blue: #002dad;
    --rn-ipsi-sky: #82d4f6;
    --rn-ipsi-dark: #0a2240;
    /* 모바일 시안 본문 좌우 여백 12 (헤더는 공용 15 그대로) */
    --rn-gutter: 12px;
    background: #f4f1ef;
    font-family: var(--rn-font);
    color: #222;
    word-break: keep-all;
}

/* :where() 로 우선순위 0, 아래 규칙이 항상 이기게 */
:where(.rn-main) *,
:where(.rn-main) *::before,
:where(.rn-main) *::after {
    box-sizing: border-box;
}

:where(.rn-main) :where(h1, h2, h3, p, ul, li) {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

:where(.rn-main) em {
    font-style: normal;
}

:where(.rn-main) a {
    color: inherit;
    text-decoration: none;
}

:where(.rn-main) img {
    max-width: none;
    vertical-align: top;
}

:where(.rn-main) button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.rn-main a:focus-visible,
.rn-main button:focus-visible {
    outline-color: #002dad;
    outline-offset: 2px;
}

/* 가로 슬라이드 전환 (KV·WHY 공통, 클래스는 renewal_main.js RN.slideFx)
   다음 = 오른쪽에서 들어오고 왼쪽으로 나감. 나간 장은 부모 overflow 로 잘림 */
.rn-main .is-in-next,
.rn-main .is-in-prev,
.rn-main .is-out-next,
.rn-main .is-out-prev {
    --rn-slide-shift: calc(100%);
    visibility: visible;
}

.rn-main .is-in-next { animation: rn-slide-in-next var(--rn-slide-dur, .9s) var(--rn-slide-ease, ease); }
.rn-main .is-in-prev { animation: rn-slide-in-prev var(--rn-slide-dur, .9s) var(--rn-slide-ease, ease); }
.rn-main .is-out-next { animation: rn-slide-out-next var(--rn-slide-dur, .9s) var(--rn-slide-ease, ease) forwards; }
.rn-main .is-out-prev { animation: rn-slide-out-prev var(--rn-slide-dur, .9s) var(--rn-slide-ease, ease) forwards; }

@keyframes rn-slide-in-next {
    from { transform: translateX(var(--rn-slide-shift)); }
    to { transform: translateX(0); }
}

@keyframes rn-slide-in-prev {
    from { transform: translateX(calc(var(--rn-slide-shift) * -1)); }
    to { transform: translateX(0); }
}

@keyframes rn-slide-out-next {
    from { transform: translateX(0); }
    to { transform: translateX(calc(var(--rn-slide-shift) * -1)); }
}

@keyframes rn-slide-out-prev {
    from { transform: translateX(0); }
    to { transform: translateX(var(--rn-slide-shift)); }
}

@media (prefers-reduced-motion: reduce) {
    .rn-main .is-in-next,
    .rn-main .is-in-prev,
    .rn-main .is-out-next,
    .rn-main .is-out-prev {
        animation: none;
    }
}

/* =========================================================
   첫 화면
   ========================================================= */
.rn-first {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "kv"
        "recruit"
        "service"
        "newmajor";
    gap: 12px;
    padding-top: 12px;
    /* 섹션 간격 = 블록 간격 (모바일 12, PC 16) */
    padding-bottom: 12px;

    /* 캐러셀 높이는 구간별 고정, 화면 높이에 안 맞춤 */
    /* 시안 11/5 수정: 배너 글 1줄 가림 → 640 에서 600 */
    --rn-kv-h: 600px;
    --rn-kv-pt: 40px;
    --rn-kv-pl: 32px;
    --rn-kv-title: 36px;
    --rn-kv-note: 13px;
    --rn-kv-sub: 20px;
    --rn-kv-sub-gap: 8px;
    --rn-kv-more-gap: 32px;
    /* 수치 상자 높이 (컨트롤 위치 계산용) */
    --rn-kv-stats-h: 183px;
}

/* =========================================================
   메인 비주얼 캐러셀
   ========================================================= */
.rn-kv {
    /* 하단의 실제 애니메이션 시간과 전환 잠금 시간을 맞춘다. */
    --rn-slide-dur: 1s;
    grid-area: kv;
    position: relative;
    z-index: 0;
    overflow: hidden;
    height: var(--rn-kv-h);
    border-radius: 10px;
    background: #393939;
    color: #fff;
    /* 슬라이드 전환 애니메이션 중 라운드 풀림 방지 (SNS 카드와 같은 이유) */
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

.rn-kv__track {
    position: absolute;
    inset: 0;
    touch-action: pan-y;
}

.rn-kv-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    visibility: hidden;
    /* 이동 애니메이션 종료 시 visibility가 지연되면 이전 이미지가 다시 보인다. */
    transition-property: none;
}

.rn-kv-slide.is-active {
    visibility: visible;
}

/* 사진에 어둡게 12% 포함. 비율 다르면 cover 로 자름 */
.rn-kv-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rn-slide-bg) var(--rn-slide-pos, 55% 50%) / cover no-repeat;
    transform: scale(1);
    transform-origin: var(--rn-slide-pos, 55% 50%);
}

.rn-kv-slide.is-active::before {
    animation: rn-kv-zoom-in 6s linear forwards;
}

@keyframes rn-kv-zoom-in {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .rn-kv-slide.is-active::before {
        animation: none;
    }
}

/* 글자 대비용 흐린 원 */
.rn-kv-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/renewal/main/kv_ellipse_mo.svg") left -196px bottom -195px / 517px 517px no-repeat;
}

/* 모바일 글자 영역 오른쪽 48 (시안 390 기준 44~342) */
.rn-kv-slide__copy {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: none;
    padding: var(--rn-kv-pt) 36px 0 var(--rn-kv-pl);
}

/* 전환 효과가 이전 슬라이드를 표시해도 문구는 활성 슬라이드만 그린다. */
.rn-kv-slide.is-active .rn-kv-slide__copy {
    opacity: 1;
}

.rn-kv-slide__title {
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: var(--rn-kv-title);
    line-height: 1.2;
    letter-spacing: -.03em;
}

.rn-kv-slide__badge {
    margin-top: 2px;
    font-size: var(--rn-kv-note);
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: -.04em;
}

.rn-kv-slide__sub {
    margin-top: var(--rn-kv-sub-gap);
    font-size: var(--rn-kv-sub);
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.015em;
}

.rn-kv-slide__more {
    display: inline-flex;
    padding-right: 4px;
    align-items: center;
    gap: 8px;
    height: 28px;
    margin-top: var(--rn-kv-more-gap);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.015em;
    text-decoration-color: rgba(255, 255, 255, .6);
    text-underline-offset: 4px;
}
.rn-main .rn-kv-slide__more:focus{
    outline-color: #ffffff;
    outline-offset: 4px;
}
.rn-kv-slide__more::after {
    content: "";
    width: 14px;
    height: 14px;
    background: url("../img/renewal/main/ico_arrow_white.svg") center / 12px auto no-repeat;
}

.rn-kv-slide__more:hover {
    text-decoration: underline;
}

/* 박스는 고정, 묶음(아이콘 포함) 통째로 6px 아래로 사라졌다 새 묶음이 올라온다.
   문구만 움직이면 아이콘·구성이 툭 바뀌어 끊겨 보였다 */
.rn-kv-stats__set {
    transition: opacity .45s ease, transform .45s ease;
}

.rn-kv-stats__set.is-leaving,
.rn-kv-stats__set.is-entering {
    opacity: 0;
    transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
    .rn-kv-stats__set {
        transition: none;
    }
}

/* 수치 박스: 전 구간 세로 목록 */
.rn-kv-stats {
    position: absolute;
    z-index: 1;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 묶음마다 줄 수가 달라도 높이 고정 (컨트롤 위치 계산) */
    min-height: var(--rn-kv-stats-h);
    padding: 16px 24px;
    border-radius: 10px;
    background: rgba(172, 172, 172, .5);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
}

/* 슬라이드별 문구 묶음 */
.rn-kv-stats__set {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: inherit;
}

.rn-kv-stats__set[hidden] {
    display: none;
}

.rn-kv-stats__list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
}

.rn-kv-stats__item {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 36px;
    text-align: right;
}

.rn-kv-stats__item + .rn-kv-stats__item {
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.rn-kv-stats__label {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    width: 100px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.rn-kv-stats__label::before {
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    padding: 3px 1px;
    background: var(--rn-stat-icon) center / 22px 18px no-repeat;
}

.rn-kv-stats__label--students { --rn-stat-icon: url("../img/renewal/main/ico_people.svg"); }
.rn-kv-stats__label--graduates { --rn-stat-icon: url("../img/renewal/main/ico_graduation.svg"); }
.rn-kv-stats__label--partners { --rn-stat-icon: url("../img/renewal/main/ico_handshake.svg"); }

.rn-kv-stats__value {
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.36;
    letter-spacing: -.015em;
    white-space: nowrap;
}

/* 좁은 칸에서 긴 학과명도 줄바꿈 */
.rn-kv-stats__icon {
    flex: none;
    width: 24px;
    height: 24px;
}

.rn-kv-stats__item--single .rn-kv-stats__value {
    font-size: 14px;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}

.rn-kv-stats__note {
    align-self: flex-end;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.48;
    letter-spacing: -.015em;
    white-space: nowrap;
}

/* 인디케이터, 버튼 (수치 상자 위 24) */
.rn-kv__controls {
    position: absolute;
    z-index: 2;
    left: 24px;
    right: 24px;
    bottom: calc(16px + var(--rn-kv-stats-h) + 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rn-kv__count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -.02em;
}

.rn-kv__current {
    font-weight: 600;
}

.rn-kv__total {
    font-weight: 300;
}

.rn-kv__bar {
    position: relative;
    overflow: hidden;
    width: 56px;
    height: 5px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 2px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.rn-kv__bar-fill {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 0;
    background: #fff;
    /* 자동 넘김 간격에 맞춘 transition은 RN.slider에서 설정한다. */
}

.rn-kv__btns {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rn-kv__btn {
    display: block;
    width: 24px;
    height: 24px;
    background: center / 14px 14px no-repeat;
}

.rn-kv__btn--prev { background-image: url("../img/renewal/main/ico_prev.svg"); }
.rn-kv__btn--next { background-image: url("../img/renewal/main/ico_next.svg"); }
.rn-kv__btn--toggle { background-image: url("../img/renewal/main/ico_pause.svg"); }
.rn-kv.is-paused .rn-kv__btn--toggle { background-image: url("../img/renewal/main/ico_play.svg"); }

.rn-kv__btn:focus-visible {
    outline-color: #fff;
}

/* =========================================================
   모집 배너
   ========================================================= */
.rn-recruit {
    grid-area: recruit;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 480px;
    padding: 0 18px 16px;
    border-radius: 10px;
    background: var(--rn-kv-point);
    color: #fff;
}

/* 모바일 시안: 글자 36~354, 그림 27~357, 버튼 30~360 (390 기준) */
.rn-recruit__text {
    padding: 37px 6px 0;
}

.rn-recruit__title {
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.24;
    letter-spacing: -.04em;
}

.rn-recruit__date {
    margin-top: 20px;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.48;
    letter-spacing: -.02em;
    color: var(--rn-ipsi-sky);
}

/* 버튼 뒤로 겹쳐 들어가는 일러스트 */
.rn-recruit__img {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
    margin: 0 0 -59px -3px;
    background: var(--rn-recruit-image) center bottom / contain no-repeat;
}

/* 이미지가 없거나 작아도 버튼은 배너 하단 고정 */
.rn-recruit__btns {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}

.rn-recruit__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 16px;
    border-radius: 10px;
    background: #fff;
    color: #222;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.48;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.rn-main .rn-recruit__btn {
    color: #222;
}

.rn-main .rn-recruit__btn--point {
    background: var(--rn-ipsi-sky);
    color: var(--rn-ipsi-dark);
}

.rn-recruit__btn::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: url("../img/renewal/main/ico_arrow_14.svg") center / 11px auto no-repeat;
}

/* =========================================================
   바로가기 카드
   ========================================================= */
.rn-service {
    grid-area: service;
}

.rn-service__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rn-service__item {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 180px;
    padding: 32px 16px 16px;
    border-radius: 10px;
    background: #fff;
}

.rn-service__head {
    flex: 1 1 auto;
    padding: 0 8px;
}

.rn-service__title,
 .rn-service__title em{
    position: relative;
    z-index: 1;
    font-family: var(--rn-font-title);
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: -.015em;
    font-size: 20px;
}

.rn-service__title em {
    color: var(--rn-ipsi-blue);    
}

/* 일러스트는 모바일도 PC 크기, 버튼 윗선(위 52 + 68)에서 잘림 */
.rn-service__ill {
    position: absolute;
    background: center top / contain no-repeat;
}

.rn-service__ill--book {
    top: 52px;
    right: 24px;
    width: 148px;
    height: 68px;
    background-image: url("../img/renewal/main/service_certificate.svg"),
        url("../img/renewal/main/service_book_right.svg"),
        url("../img/renewal/main/service_book_left.svg");
    background-position: 90.77px 30.1px, 79px 15.19px, 25px 15.22px;
    background-size: 35.5143px 34.8715px, 57px 73.6125px, 56px 73.5674px;
}

.rn-service__ill--coin {
    top: 54px;
    right: 32px;
    width: 100.2px;
    height: 66px;
    background-image: url("../img/renewal/main/service_scholarship.svg");
    background-size: 100.2px 111.3px;
}

.rn-service__ill--cap {
    top: 52px;
    right: 24px;
    width: 148px;
    height: 68px;
    background-image: url("../img/renewal/main/service_cap.svg"),
        linear-gradient(#363636, #363636);
    background-position: .48px 11px, 38.58px 34.45px;
    background-size: 146.537px 54.7072px, 74.245px 46.892px;
}

.rn-service__btns {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.rn-service__btns a:focus{
    outline-color: #002dad;
    outline-offset: 2px;
}
.rn-service__btn {
    display: flex;
    flex: 1 1 110px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 44px;
    padding: 0 6px;
    border-radius: 10px;
    background: #f4f1ef;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.015em;
    white-space: nowrap;
    transition: background-color .2s;
}

.rn-service__btn::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: url("../img/renewal/main/ico_arrow_12.svg") center / 12.2px auto no-repeat;
}

.rn-service__btn:hover {
    background: #ebe6e2;
}

/* =========================================================
   2027 신설 전공
   ========================================================= */
.rn-newmajor {
    grid-area: newmajor;
}

.rn-newmajor__list {
    display: grid;
    gap: 8px;
}

.rn-newmajor__item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 24px;
    border-radius: 10px;
    background: #fff;
}

.rn-newmajor__thumb {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--rn-newmajor-image) center / 100% 100% no-repeat;
}

/* 모바일은 학과명 아래 칩 */
.rn-newmajor__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.rn-newmajor__name {
    min-width: 0;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.36;
    letter-spacing: -.015em;
}

.rn-newmajor__chip {
    flex: none;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--rn-ipsi-sky);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: -.02em;
    color: var(--rn-ipsi-dark);
}

.rn-newmajor__item::after {
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    margin-left: auto;
    background: url("../img/renewal/main/ico_arrow_24.svg") center / 20px auto no-repeat;
}

/* =========================================================
   768~ 캐러셀 위, 모집 배너 + 바로가기 나란히
   ========================================================= */
/* 375px 미만에서는 사진 아래에 학과명·칩을 배치한다. */
@media screen and (max-width: 374.98px) {
    .rn-newmajor__item {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .rn-newmajor__text {
        width: 100%;
        overflow-wrap: anywhere;
    }

    .rn-newmajor__chip {
        max-width: 100%;
    }

    .rn-newmajor__item::after {
        position: absolute;
        top: 44px;
        right: 24px;
    }
}

@media screen and (min-width: 768px) {
    .rn-main {
        --rn-gutter: 16px;
    }

    .rn-first {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kv kv"
            "recruit service"
            "newmajor newmajor";
        gap: 16px 10px;
        padding-top: 16px;
        --rn-kv-h: 520px;
        --rn-kv-pt: 48px;
        --rn-kv-pl: 40px;
        --rn-kv-title: 48px;
        --rn-kv-note: 14px;
        --rn-kv-sub: 24px;
        --rn-kv-sub-gap: 10px;
        --rn-kv-more-gap: 32px;
    }

    .rn-kv-slide__copy {
        padding-right: 20px;
    }

    .rn-kv-slide::after {
        background: url("../img/renewal/main/kv_ellipse.svg") -770px -750px / 1800px 1800px no-repeat;
    }

    .rn-kv-slide__more {
        height: 36px;
        font-size: 16px;
        line-height: 1.48;
    }

    /* 오른쪽 아래 세로 목록 */
    .rn-kv-stats {
        left: auto;
        width: 334px;
    }

    /* 숫자·버튼을 오른쪽으로 모아 왼쪽 문구와 안 겹치게 */
    .rn-kv__controls {
        left: auto;
        right: 16px;
        justify-content: flex-end;
        gap: 24px;
    }

    .rn-kv__controls::before {
        content: "";
        order: 1;
        width: 1px;
        height: 14px;
        background: rgba(255, 255, 255, .3);
    }

    .rn-kv__btns {
        order: 2;
    }

    .rn-recruit {
        height: auto;
        padding: 0 16px 16px;
    }

    .rn-recruit__text {
        padding: 40px 16px 0;
    }

    .rn-recruit__title {
        font-size: 34px;
    }

    .rn-recruit__date {
        font-size: 26px;
    }

    .rn-recruit__img {
        margin-top: 16px;
        margin-left: 0;
    }

    .rn-service__btn {
        height: 48px;
    }

    .rn-newmajor__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rn-newmajor__name {
        font-size: 22px;
    }
}

/* =========================================================
   1024~ 캐러셀 + 모집 배너 한 줄
   첫 화면에 신설 전공까지 보이게 높이를 화면에 맞춤
   ========================================================= */
@media screen and (min-width: 1024px) {
    .rn-first {
        /* 배너 제목 2줄, 날짜 1줄 들어가는 폭 */
        grid-template-columns: minmax(0, 1fr) 420px;
        grid-template-areas:
            "kv recruit"
            "service service"
            "newmajor newmajor";
        --rn-kv-h: 560px;
        --rn-kv-title: 60px;
        --rn-kv-sub: 28px;
    }

    .rn-recruit {
        height: var(--rn-kv-h);
    }

    .rn-recruit__text {
        padding-top: 40px;
    }

    .rn-recruit__title {
        font-size: 42px;
    }

    .rn-recruit__date {
        margin-top: 8px;
        font-size: 28px;
    }

    .rn-recruit__btns {
        gap: 8px;
    }

    .rn-service__list {
        flex-direction: row;
    }

    .rn-service__item {
        flex: 1 1 0;
        min-width: 0;
    }

    .rn-newmajor__item {
        height: 108px;
        gap: 24px;
        padding: 0 24px;
    }

    .rn-newmajor__thumb {
        width: 72px;
        height: 72px;
    }

    /* 학과명 옆 칩 */
    .rn-newmajor__text {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 16px;
    }
}

/* =========================================================
   1440~ PC
   1919 까지는 캐러셀이 좁아 카드를 아랫줄로
   ========================================================= */
@media screen and (min-width: 1440px) {
    .rn-first {
        /* 배너 제목 2줄, 날짜 1줄 최소 폭 */
        grid-template-columns: minmax(0, 1266fr) minmax(500px, 612fr);
        grid-template-areas:
            "kv recruit"
            "service service"
            "newmajor newmajor";
        /* 시안 크기 그대로, 좁은 구간은 줄바꿈으로 */
        --rn-kv-h: 764px;
        --rn-kv-pt: 64px;
        --rn-kv-pl: 64px;
        --rn-kv-title: 72px;
        --rn-kv-note: 16px;
        --rn-kv-sub: 32px;
        --rn-kv-sub-gap: 16px;
        --rn-kv-more-gap: 40px;
        --rn-kv-card-h: 192px;
    }

    .rn-kv-slide__title {
        line-height: 1.24;
    }

    .rn-kv-slide__sub {
        line-height: 1.36;
    }

    .rn-kv-stats {
        gap: 4px;
        width: 302.5px;
        height: var(--rn-kv-card-h);
        padding: 16px 20px;
    }

    .rn-kv-stats__list {
        padding: 4px 0;
    }

    .rn-kv-stats__value {
        font-size: 24px;
    }

    .rn-kv-stats__item--single .rn-kv-stats__value {
        font-size: 20px;
        letter-spacing: -.4px;
    }

    .rn-kv__controls {
        bottom: calc(var(--rn-kv-card-h) + 16px + 34px);
    }

    .rn-kv__btns {
        gap: 0;
        margin-right: -5px;
    }

    .rn-kv__btn {
        width: 26px;
        height: 26px;
    }

    .rn-kv__btn::before {
        inset: -9px 0;
    }

    .rn-recruit {
        padding: 0 16px 16px;
    }

    .rn-recruit__text {
        padding: 64px 32px 0;
    }

    .rn-recruit__title {
        font-size: 48px;
        letter-spacing: -.03em;
        word-break: auto-phrase;
    }

    .rn-recruit__date {
        margin-top: 24px;
        font-size: 32px;
        line-height: 1.24;
        letter-spacing: -.015em;
    }

    /* 배너 폭에 꽉 채우고 버튼 높이만큼 뒤로 겹침 */
    .rn-recruit__img {
        width: calc(100% + 32px);
        max-height: 479px;
        margin: 16px -16px -64px;
    }

    .rn-recruit__btns {
        flex-direction: row;
    }

    .rn-recruit__btn {
        flex: 1 1 0;
        height: 64px;
        font-size: 20px;
    }

    /* 바로가기 카드 */
    .rn-service__list {
        gap: 8px;
    }

    .rn-service__item {
        height: var(--rn-kv-card-h);
        padding: 16px;
    }

    .rn-service__head {
        position: relative;
        padding: 8px 8px 0;
    }
    .rn-service__title,
    .rn-service__title em{
        font-size: 24px;
    }

    /* 일러스트는 제목 영역 오른쪽 아래 기준, 넘치면 버튼 뒤로 */
    .rn-service__ill {
        top: auto;
    }

    .rn-service__ill--book {
        right: 0;
        bottom: -22px;
        width: 148px;
        height: 90px;
    }

    .rn-service__ill--coin {
        right: 8px;
        bottom: -45.3px;
        width: 100.2px;
        height: 111.3px;
    }

    .rn-service__ill--cap {
        right: 0;
        bottom: 0;
        width: 148px;
        height: 68px;
    }

    .rn-service__btn {
        height: 48px;
        padding: 0 4px;
    }

    .rn-newmajor__item {
        padding: 0 40px;
    }

    .rn-newmajor__name {
        font-size: 24px;
    }

    .rn-newmajor__chip {
        padding: 3px 7px;
        font-size: 15px;
    }
}

/* =========================================================
   1920~ 카드가 캐러셀 왼쪽 아래에 겹침
   캐러셀이 1266 근처는 돼야 카드 버튼이 한 줄에 들어가서 1920 부터
   ========================================================= */
@media screen and (min-width: 1920px) {
    .rn-first {
        grid-template-areas:
            "kv recruit"
            "newmajor newmajor";
    }

    /* 시안 모집 글자 영역 1340~1829 */
    .rn-recruit__text {
        padding-right: 59px;
    }

    .rn-kv-stats {
        width: calc((100% - 56px) / 4);
    }

    .rn-service {
        grid-area: kv;
        z-index: 1;
        align-self: end;
        justify-self: start;
        width: calc((100% - 56px) * .75 + 16px);
        margin: 0 0 16px 16px;
    }
}

/* =========================================================
   입학지원 로드맵
   ========================================================= */
.rn-road-wrap {
    padding-bottom: 12px;
}

.rn-road {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 10px;
    background: #002DAD;
    color: #fff;
}

.rn-road__head {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 24px 8px;
    margin-bottom: 8px;
}

.rn-road__title {
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.24;
    letter-spacing: -.03em;
}

.rn-road__desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -.02em;
}

.rn-road__tabs {
    display: flex;
    gap: 24px;
}

.rn-road__tab {
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.24;
    letter-spacing: -.06em;
    opacity: .5;
    transition: opacity .2s;
}

.rn-road__tab:hover,
.rn-road__tab[aria-selected="true"] {
    opacity: 1;
}

.rn-road__tab[aria-selected="true"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.rn-main .rn-road__tab:focus-visible,
.rn-main .rn-road__panel:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* 모바일: 카드 가로 스크롤, 다음 카드 살짝 보이게 */
.rn-road__steps {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-right: -16px;
    padding-right: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.rn-road__steps::-webkit-scrollbar {
    display: none;
}

/* 시안 카드 328 (390 기준, 다음 카드 14 보임) */
.rn-road__step {
    position: relative;
    flex: 0 0 calc(100% - 6px);
    scroll-snap-align: start;
}

/* 모바일 시안 카드 사이 다음 화살표 32 (271:10908) */
@media screen and (max-width: 767px) {
    .rn-road__step:not(:last-child)::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 50%;
        right: -20px;
        width: 32px;
        height: 32px;
        margin-top: -16px;
        border-radius: 50%;
        background: #002dad url("../img/renewal/main/ico_road_next_2027.svg") center / 8.8px 11.2px no-repeat;
    }
}

.rn-road__card {
    position: relative;
    overflow: hidden;
    height: 232px;
    border-radius: 10px;
    background: #fff;
    color: #222;
}

.rn-road__num {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;    
    border-radius: 10px;
    background: var(--rn-ipsi-sky);
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: var(--rn-ipsi-dark);
}

.rn-road__step-title {
    position: absolute;
    top: 16px;
    left: 66px;
    right: 16px;
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.02em;
}

.rn-road__step-desc {
    position: absolute;
    z-index: 1;
    top: 72px;
    left: 24px;
    max-width: calc(100% - 48px);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.48;
    letter-spacing: -.02em;
    color: #707070;
}

.rn-road__ill {
    position: absolute;
    right: 4px;
    bottom: 56px;
    width: 150px;
    height: 128px;
    background: var(--rn-road-image) right bottom / contain no-repeat;
    aspect-ratio: var(--rn-road-ratio);
}

.rn-road__ill--apply-1 { --rn-road-image: url("../img/renewal/main/road_apply_1.png"); --rn-road-ill-w: 236px; --rn-road-ratio: 236 / 190; }
.rn-road__ill--apply-2 { --rn-road-image: url("../img/renewal/main/road_apply_2.svg"); --rn-road-ill-w: 260px; --rn-road-ratio: 260 / 181; }
.rn-road__ill--apply-3 { --rn-road-image: url("../img/renewal/main/road_apply_3.png"); --rn-road-ill-w: 231px; --rn-road-ill-h: 197px; --rn-road-ratio: 231 / 229; }
.rn-road__ill--apply-4 { --rn-road-image: url("../img/renewal/main/road_apply_4.png"); --rn-road-ill-w: 204px; --rn-road-ratio: 204 / 195; }
.rn-road__ill--pass-1 { --rn-road-image: url("../img/renewal/main/road_pass_1.png"); --rn-road-ill-w: 300px; --rn-road-ratio: 300 / 200; }
.rn-road__ill--pass-2 { --rn-road-image: url("../img/renewal/main/road_pass_2.svg"); --rn-road-ill-w: 314px; --rn-road-ratio: 314 / 179.749; }
.rn-road__ill--pass-3 { --rn-road-image: url("../img/renewal/main/road_pass_3.svg"); --rn-road-ill-w: 285px; --rn-road-ratio: 285 / 197; }
.rn-road__ill--pass-4 { --rn-road-image: url("../img/renewal/main/road_pass_4.svg"); --rn-road-ill-w: 278px; --rn-road-ratio: 278 / 200; background-image: none; }

/* 이미지에만 좌우 반전을 적용하여 부모의 가운데 정렬·등장 위치를 유지한다. */
.rn-road__ill--pass-4::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rn-road-image) right bottom / contain no-repeat;
    background-position: inherit;
    transform: scaleX(-1);
}

.rn-road.is-images-ready .rn-road__ill {
    opacity: 0;
    translate: 0 24px;
}

.rn-road.is-images-ready .is-images-visible .rn-road__ill {
    animation: rn-road-image-in .65s cubic-bezier(.22, 1, .36, 1) var(--rn-road-delay, 0ms) both;
}

@keyframes rn-road-image-in {
    from { opacity: 0; translate: 0 24px; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rn-road.is-images-ready .rn-road__panel .rn-road__ill {
        opacity: 1;
        translate: none;
        animation: none;
    }
}

.rn-road__btn {
    position: absolute;
    z-index: 1;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    border-radius: 10px;
    background: #f4f1ef;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.02em;
    white-space: nowrap;
    transition: background-color .2s;
}

.rn-road__btn::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: url("../img/renewal/main/ico_arrow_12.svg") center / 12.2px auto no-repeat;
}

.rn-road__btn:hover {
    background: #ebe6e2;
}

/* 모바일 로드맵: 328×232 카드, 오른쪽 일러스트 영역은 버튼 위에서 자른다. */
@media screen and (max-width: 767px) {
    .rn-road__step {
        flex-basis: 328px;
        max-width: calc(100% - 6px);
    }

    .rn-road__step-title {
        font-family: var(--rn-font);
        white-space: nowrap;
    }

    .rn-road__step-desc {
        width: 170px;
        max-width: calc(100% - 48px);
        word-break: keep-all;
    }

    .rn-road__step:nth-child(2) .rn-road__step-desc { width: 185px; }
    .rn-road__step:nth-child(3) .rn-road__step-desc { width: 109px; }
    .rn-road__step:nth-child(4) .rn-road__step-desc { width: 150px; }
    #rn-road-panel-pass .rn-road__step:nth-child(1) .rn-road__step-desc { width: 140px; }
    #rn-road-panel-pass .rn-road__step:nth-child(2) .rn-road__step-desc { width: 155px; }
    #rn-road-panel-pass .rn-road__step:nth-child(3) .rn-road__step-desc { width: 136px; }
    #rn-road-panel-pass .rn-road__step:nth-child(3) .rn-road__step-desc br { display: none; }

    .rn-road__ill {
        top: 64px;
        right: -22.04px;
        bottom: auto;
        width: 230.04px;
        height: 108px;
        overflow: hidden;
        aspect-ratio: auto;
        background-position: center bottom;
        background-size: var(--rn-road-mobile-w) var(--rn-road-mobile-h);
        pointer-events: none;
    }

    .rn-road__ill--apply-1 { --rn-road-mobile-w: 189.932px; --rn-road-mobile-h: 142.449px; background-position: center -3.299px; }
    .rn-road__ill--apply-2 { --rn-road-mobile-w: 140.4px; --rn-road-mobile-h: 97.74px; }
    .rn-road__ill--apply-3 { --rn-road-mobile-w: 124.74px; --rn-road-mobile-h: 106.38px; }
    .rn-road__ill--apply-4 { --rn-road-mobile-w: 110.16px; --rn-road-mobile-h: 105.3px; }

    #rn-road-panel-pass .rn-road__ill { right: -17.72px; width: 225.72px; }
    .rn-road__ill--pass-1 { --rn-road-mobile-w: 162px; --rn-road-mobile-h: 108px; }
    .rn-road__ill--pass-2 { --rn-road-mobile-w: 169.56px; --rn-road-mobile-h: 97.064px; }
    .rn-road__ill--pass-3 { --rn-road-mobile-w: 153.9px; --rn-road-mobile-h: 106.38px; }
    .rn-road__ill--pass-4 { --rn-road-mobile-w: 150.12px; --rn-road-mobile-h: 108px; }
    .rn-road__ill--pass-4::before { background-size: var(--rn-road-mobile-w) var(--rn-road-mobile-h); }
}

@media screen and (max-width: 374.98px) {
    .rn-road__step-desc {
        font-size: clamp(12px, 4.266667vw, 16px);
    }

    .rn-road__ill {
        /* 버튼 위·오른쪽을 기준으로 일러스트를 화면 폭에 비례해 축소 */
        transform-origin: calc(100% - 22.04px) bottom;
        scale: clamp(.75, calc(100vw / 375px), 1);
    }

    #rn-road-panel-pass .rn-road__ill {
        transform-origin: calc(100% - 17.72px) bottom;
    }
}

/* 768~ 제목·탭 한 줄, 카드 2×2 */
@media screen and (min-width: 768px) {
    .rn-road__head {
        margin-bottom: 0;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        padding: 32px 16px;
    }

    .rn-road__title {
        font-size: 38px;
    }

    .rn-road__tabs {
        flex: none;
    }

    .rn-road__tab {
        font-size: 22px;
    }

    .rn-road__steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        margin-right: 0;
        padding-right: 0;
    }

    .rn-road__card {
        height: 256px;
    }

    .rn-road__num {
        width: 44px;
        height: 44px;
    }

    .rn-road__step-title {
        left: 72px;
        min-height: 44px;
        font-size: 26px;
    }

    .rn-road__step-desc {
        top: 80px;
    }

    .rn-road__ill {
        bottom: 64px;
        width: 170px;
        height: 130px;
    }

    .rn-road__btn {
        height: 48px;
    }
}

@media screen and (min-width: 1024px) {
    .rn-road__title {
        font-size: 48px;
    }

    .rn-road__desc {
        font-size: 18px;
    }

    .rn-road__tabs {
        gap: 32px;
    }

    .rn-road__card {
        height: 300px;
    }

    .rn-road__num {
        width: 48px;
        height: 48px;
        border-radius: 8px;
    }

    .rn-road__step-title {
        left: 80px;
        min-height: 48px;
        font-size: 28px;
    }

    .rn-road__step-desc {
        top: 88px;
    }

    .rn-road__ill {
        width: 210px;
        height: 160px;
    }
}

/* 1440~ 카드 4개 한 줄 */
@media screen and (min-width: 1440px) {
    .rn-road-wrap {
        padding-bottom: 16px;
    }

    .rn-road__head {
        gap: 32px;
        padding: 64px 48px 40px;
    }

    .rn-road__title {
        font-size: 56px;
    }

    .rn-road__desc {
        margin-top: 8px;
        font-weight: 300;
    }

    .rn-road__tab {
        font-size: 24px;
    }

    .rn-road__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rn-road__step:not(:last-child)::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 50%;
        right: -24px;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        border-radius: 50%;
        background: #002DAD url("../img/renewal/main/ico_road_next_2027.svg") center / 11px 14px no-repeat;
    }

    /* 제목이 두 줄이면 설명도 같이 내려가게 */
    .rn-road__card {
        height: 477px;
        padding: 84px 16px 0 32px;
    }

    .rn-road__num {
        width: 52px;
        height: 52px;
    }

    .rn-road__step-title {
        position: static;
        display: block;
        min-height: 0;
        font-family: var(--rn-font-title);
        font-size: 32px;
        letter-spacing: -.015em;
    }

    .rn-road__step-desc {
        position: static;
        max-width: none;
        margin-top: 16px;
    }

    .rn-road__ill {
        left: 50%;
        right: auto;
        bottom: 64px;
        width: var(--rn-road-ill-w);
        height: auto;
        max-height: 150px;
        background-position: center bottom;
        transform: translateX(-50%);
    }
}

/* 1920~ */
@media screen and (min-width: 1920px) {
    /* 시안 제목 위 83 (섹션 16 + 67) */
    .rn-road__head {
        padding-top: 67px;
    }

    .rn-road__card {
        padding-left: 56px;
    }

    .rn-road__ill {
        max-height: 200px;
    }

    /* 시안은 줄이지 않고 아래를 잘라 보임 (3단계 그림 231×197) */
    .rn-road__ill--top {
        height: var(--rn-road-ill-h);
        background-size: cover;
        background-position: center top;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rn-kv__bar-fill {
        transition: none;
    }
}

/* =========================================================
   접근성
   ========================================================= */
/* 사진 위 컨트롤은 흰 외곽선 (.rn-main button:focus-visible 보다 우선) */
.rn-main .rn-kv__btn:focus-visible {
    outline-color: #fff;
}

/* 터치 영역 44px. 컨트롤 버튼은 좌우 간격이 없어 세로만 */
.rn-kv__btn,
.rn-kv-slide__more,
.rn-road__tab { position: relative; }

.rn-kv__btn::before,
.rn-kv-slide__more::before,
.rn-road__tab::before {
    position: absolute;
    content: '';
}

.rn-kv__btn::before { inset: -10px -8px; }

.rn-kv-slide__more::before { inset: -4px 0; }

.rn-road__tab::before { inset: -9px 0; }

/* 768~ 섹션 간격 16 */
@media screen and (min-width: 768px) {
    .rn-first,
    .rn-road-wrap {
        padding-bottom: 16px;
    }
}

/* =========================================================
   입학공지, 등록금 계산기
   ========================================================= */
.rn-notice-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 12px;
}

.rn-notice {
    padding: 40px 24px;
    border-radius: 10px;
    background: #fff;
}

.rn-notice__title {
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.24;
    letter-spacing: -.03em;
}

/* 모바일 시안에 설명 없음 */
.rn-notice__desc {
    display: none;
    margin-top: 12px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.48;
    letter-spacing: -.015em;
    color: #707070;
}

/* 시안은 탭 줄(28) 위가 제목 아래 40. 탭 상자가 44 라 8 올림 */
.rn-notice__board {
    margin-top: 32px;
}

.rn-notice__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rn-notice__tabs {
    display: flex;
    gap: 12px;
}

/* 터치 영역 44px */
.rn-notice__tab {
    min-height: 44px;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.36;
    letter-spacing: -.015em;
    color: #222;
    opacity: .5;
    transition: opacity .2s;
}

.rn-notice__tab:hover,
.rn-notice__tab[aria-selected="true"] {
    opacity: 1;
}

.rn-notice__tab[aria-selected="true"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.rn-notice__more {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.015em;
    padding-right: 4px;
}

.rn-notice__more::after {
    content: "";
    width: 14px;
    height: 14px;
    background: url("../img/renewal/main/ico_arrow_12.svg") center / 12px auto no-repeat;
}

/* 시안 탭 줄(28) 아래에서 목록까지 32 (탭 상자 44, 위로 8 보정) */
.rn-notice__panel {
    margin-top: 24px;
}

.rn-main .rn-notice__panel:focus-visible {
    outline-offset: 4px;
    outline-color: #002dad;
}

/* 시안 행 간격 96 (글 56 + 위아래 20, 구분선 포함) */
.rn-notice__item {
    padding: 19px 0 20px;
}

.rn-notice__item:first-child {
    padding-top: 0;
}

.rn-notice__item:last-child {
    padding-bottom: 0;
}

.rn-notice__item + .rn-notice__item {
    border-top: 1px solid #d9d9d9;
}

/* 한 줄, 끝에 화살표 */
.rn-notice__link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 4px;
}

.rn-notice__link::after {
    content: "";
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    background: url("../img/renewal/main/ico_arrow_24.svg") center / 20px auto no-repeat;
}

.rn-notice__badge {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f4f1ef;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.48;
    letter-spacing: -.02em;
}

.rn-notice__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.rn-notice__date {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.48;
    color: #545454;
}

.rn-notice__subject {
    overflow: hidden;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.015em;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #222;
}

.rn-notice__link:hover .rn-notice__subject {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 등록금 계산기 */
.rn-calc {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    padding: 32px 24px 76px;
    border-radius: 10px;
    background: var(--rn-ipsi-sky);
    color: #222;
}

/* 모바일 시안 기호 150 (카드 기준 x237 y36, 340:4477), 투명도 50% */
.rn-calc__symbols {
    position: absolute;
    right: -21px;
    bottom: 82px;
    width: 150px;
    aspect-ratio: 328 / 310;
    pointer-events: none;
    opacity: .5;
}

.rn-calc__symbols svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rn-calc__symbol { transform-box: fill-box; transform-origin: center; }
.rn-calc.is-inview-ready .rn-calc__symbol { opacity: 0; }
.rn-calc.is-inview-ready.is-inview .rn-calc__symbol {
    animation: rn-calc-roll-in .85s cubic-bezier(.22, 1, .36, 1) var(--rn-symbol-delay) both;
}

@keyframes rn-calc-roll-in {
    from { opacity: 0; transform: translateX(100px) rotate(180deg); }
    to { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rn-calc.is-inview-ready .rn-calc__symbol { opacity: 1; animation: none; transform: none; }
}

.rn-calc__title {
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.24;
    letter-spacing: -.015em;
}

.rn-calc__desc {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.48;
    letter-spacing: -.015em;
    color: var(--rn-ipsi-dark);
}

.rn-calc__btn {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border-radius: 10px;
    background: var(--rn-ipsi-dark);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.015em;
    transition: background-color .2s;
    color: #fff;
}

.rn-calc__btn::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: url("../img/renewal/main/ico_arrow_white.svg") center / 12.2px auto no-repeat;
}

.rn-calc__btn:hover {
    background: #163958;
}

@media screen and (min-width: 768px) {
    .rn-notice-wrap {
        gap: 16px;
        padding-bottom: 16px;
    }

    .rn-notice {
        padding: 48px 40px 32px;
    }

    .rn-notice__title {
        font-size: 38px;
    }

    .rn-notice__desc {
        display: block;
    }

    .rn-notice__board {
        margin-top: 32px;
    }

    .rn-notice__tabs {
        gap: 16px;
    }

    .rn-notice__tab {
        font-size: 22px;
    }

    .rn-notice__badge {
        width: 62px;
        height: 62px;
        font-size: 14px;
    }

    .rn-calc {
        min-height: 280px;
        padding: 32px 32px 88px;
    }

    .rn-calc__symbols { right: -14px; bottom: 80px; width: 190px; opacity: .6; }

    .rn-calc__title {
        font-size: 34px;
    }

    .rn-calc__btn {
        left: 24px;
        right: 24px;
        bottom: 24px;
        height: 48px;
    }
}

/* 1024~ 게시판 + 계산기 나란히 */
@media screen and (min-width: 1024px) {
    .rn-notice-wrap {
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }

    .rn-notice {
        flex: 1 1 auto;
        min-width: 0;
    }

    .rn-notice__title {
        font-size: 48px;
    }

    .rn-notice__desc {
        font-size: 18px;
    }

    .rn-notice__tabs {
        gap: 20px;
    }

    .rn-notice__tab {
        font-size: 24px;
    }

    .rn-notice__more {
        font-size: 16px;
    }

    .rn-notice__badge {
        width: 66px;
        height: 66px;
    }

    .rn-notice__subject {
        font-size: 22px;
        line-height: 1.36;
    }

    /* 높이가 옆 게시판을 따라가서, 기호는 설명과 버튼 사이 남는 칸에 맞춘다 */
    .rn-calc {
        flex: none;
        display: flex;
        flex-direction: column;
        width: 320px;
        padding: 48px 32px 88px;
        background-image: none;
    }

    .rn-calc__symbols {
        content: "";
        flex: 1 1 auto;
        align-self: flex-end;
        width: 240px;
        min-height: 120px;
        margin: 24px -18px 24px 0;
        position: relative;
        right: auto;
        bottom: auto;
        aspect-ratio: auto;
    }

    .rn-calc__title {
        font-size: 40px;
    }
}

/* 1440~ */
@media screen and (min-width: 1440px) {
    .rn-notice {
        padding: 80px 64px;
    }

    .rn-notice__title {
        font-size: 56px;
    }

    .rn-notice__board {
        margin-top: 40px;
    }

    .rn-notice__tabs {
        gap: 24px;
    }

    .rn-notice__tab {
        font-size: 28px;
    }

    /* 탭 글자(38) 아래에서 목록까지 40 */
    .rn-notice__panel {
        margin-top: 37px;
    }

    /* 시안 행 간격 104 (글 72 + 위아래 16, 구분선 포함) */
    .rn-notice__item {
        padding: 15px 0 16px;
    }

    .rn-notice__link {
        min-height: 72px;
    }

    .rn-notice__badge {
        width: 72px;
        height: 72px;
        font-size: 15px;
    }

    .rn-notice__text {
        gap: 4px;
    }

    .rn-notice__subject {
        font-size: 22px;
    }

    .rn-calc {
        width: 466px;
        padding: 80px 48px 88px;
    }

    /* 시안 위치 고정 (카드 위에서 308, 오른쪽 밖으로 23 잘림) */
    .rn-calc__symbols {
        position: absolute;
        top: 308px;
        right: -23px;
        width: 328px;
        height: 310px;
        min-height: 0;
        margin: 0;
    }

    .rn-calc__title {
        font-size: 48px;
        letter-spacing: -.03em;
    }

    .rn-calc__desc {
        margin-top: 16px;
        font-size: 18px;
    }

    .rn-calc__btn {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
}

/* 1920~ 제목과 목록 나란히. 그 아래는 목록이 좁아서 제목을 위로 */
@media screen and (min-width: 1920px) {
    .rn-notice {
        display: flex;
        gap: 64px;
    }

    .rn-notice__head {
        flex: none;
        width: 340px;
    }

    .rn-notice__desc {
        margin-top: 16px;
    }

    /* 시안: 탭 글자 위가 제목 위보다 5 아래(탭 상자 44 보정 후 2), 목록 아래 85 */
    .rn-notice {
        padding-bottom: 85px;
    }

    .rn-notice__board {
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 2px;
    }
}

/* =========================================================
   주요 배너
   ========================================================= */
.rn-banner-wrap {
    padding-bottom: 12px;
}

.rn-banner__list {
    display: grid;
    gap: 8px;
}

.rn-banner__item {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 160px;
    padding: 32px 24px;
    border-radius: 10px;
    background: #fff;
    color: #222;
}

.rn-banner__title {
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.24;
    letter-spacing: -.015em;
}

/* 그림(110) + 간격 16 왼쪽까지만 */
.rn-banner__desc {
    max-width: calc(100% - 126px);
    margin-top: 8px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.48;
    letter-spacing: -.02em;
    color: #707070;
}

.rn-banner__img {
    position: absolute;
    top: 50%;
    right: 24px;
    width: 110px;
    height: 110px;
    margin-top: -55px;
    overflow: hidden;
    border-radius: 50%;
}

.rn-banner__item--scholar .rn-banner__img { border-radius: 50% 7% 50% 7%; }
.rn-banner__item--national .rn-banner__img { border-radius: 7% 50% 50% 7%; }
.rn-banner__item--document .rn-banner__img { border-radius: 7% 7% 50% 50%; }

.rn-banner__item--scholar { --rn-banner-image: url("../img/renewal/main/banner_scholar.jpg"); }
.rn-banner__item--national { --rn-banner-image: url("../img/renewal/main/banner_national.jpg"); }
.rn-banner__item--guide { --rn-banner-image: url("../img/renewal/main/banner_guide.jpg"); }
.rn-banner__item--document { --rn-banner-image: url("../img/renewal/main/banner_document.jpg"); }

.rn-banner__img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rn-banner-image) center / cover no-repeat;
    transition: transform .3s ease;
}

.rn-banner__item:is(:hover, :focus-visible) {
    text-decoration: none;
}

.rn-banner__item:is(:hover, :focus-visible) .rn-banner__img::before {
    transform: scale(1.05);
}

@media screen and (min-width: 768px) {
    .rn-banner-wrap {
        padding-bottom: 16px;
    }

    .rn-banner__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rn-banner__item {
        min-height: 0;
    }

    .rn-banner__title {
        font-size: 26px;
    }
}

@media screen and (min-width: 1024px) {
    .rn-banner__item {
        height: 240px;
        padding: 32px;
    }

    .rn-banner__title {
        font-size: 28px;
    }

    .rn-banner__desc {
        max-width: calc(100% - 166px);
        margin-top: 12px;
    }

    .rn-banner__img {
        top: auto;
        right: 32px;
        bottom: 32px;
        width: 150px;
        height: 150px;
        margin-top: 0;
    }
}

/* 1440~ 4개 한 줄. 1919 까지는 카드가 좁아 그림 축소 */
@media screen and (min-width: 1440px) {
    .rn-banner__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rn-banner__item {
        height: 280px;
        padding: 56px 32px;
    }

    .rn-banner__title {
        font-size: 32px;
    }

    .rn-banner__desc {
        max-width: calc(100% - 152px);
        margin-top: 16px;
    }

    .rn-banner__img {
        right: 24px;
        bottom: 24px;
        width: 120px;
        height: 120px;
    }
}

/* 1920~ */
@media screen and (min-width: 1920px) {
    .rn-banner__desc {
        max-width: 206px;
    }

    .rn-banner__img {
        right: 32px;
        bottom: 50px;
        width: 180px;
        height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rn-banner__img::before {
        transition: none;
    }
}

/* =========================================================
   학과소개
   ========================================================= */
.rn-dept-wrap {
    padding-bottom: 12px;
}

.rn-dept {
    overflow: hidden;
    padding: 40px 16px;
    border-radius: 10px;
    background: #fff;
}

.rn-dept__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 8px 24px;
}

.rn-dept__title {
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.24;
    letter-spacing: -.03em;
    color: #222;
}

.rn-dept__desc {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -.015em;
    color: #707070;
}

/* 글자 폭만큼 */
.rn-dept__find {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    margin-top: 24px;
    padding: 0 16px;
    border-radius: 10px;
    background: #f4f1ef;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.02em;
    color: #222;
    transition: background-color .2s;
}

.rn-dept__find::after,
.rn-dept__link::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: url("../img/renewal/main/ico_arrow_12.svg") center / 12.2px auto no-repeat;
}

.rn-dept__find:hover {
    background: #ebe6e2;
}

/* 모바일: 학부 카드 2줄 가로 스크롤 */
.rn-dept__scroll {
    overflow-x: auto;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
}

.rn-dept__scroll::-webkit-scrollbar {
    display: none;
}

.rn-dept__grid {
    display: grid;
    grid-template-columns: repeat(6, 162px);
    gap: 6px 8px;
    width: max-content;
}

.rn-dept__group {
    max-height: 375px;
    padding: 8px 8px 16px;
    border-radius: 10px;
    background: #f4f1ef;
}

.rn-dept__group-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px;
    border-radius: 10px;
    background: var(--rn-kv-point);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.02em;
    text-align: center;
    color: #fff;
}

.rn-dept__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

/* 시안 40px, 터치 영역 때문에 44px */
.rn-dept__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    /* 모바일 시안 높이 40 (804:6516) */
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.48;
    letter-spacing: -.02em;
    color: #222;
}

.rn-dept__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rn-dept__sub {
    color: #707070;
}

.rn-dept__link:hover .rn-dept__name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rn-dept__chip {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    background: #e9e9e9;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: -.02em;
    color: #707070;
    white-space: nowrap;
    vertical-align: 1px;
}

/* 768~ 3열 */
@media screen and (min-width: 768px) {
    .rn-dept-wrap {
        padding-bottom: 16px;
    }

    .rn-dept {
        padding: 40px 24px;
    }

    .rn-dept__head {
        padding-bottom: 32px;
    }

    .rn-dept__title {
        font-size: 38px;
    }

    .rn-dept__find {
        height: 48px;
    }

    .rn-dept__scroll {
        overflow: visible;
        margin-right: 0;
        padding-right: 0;
    }

    .rn-dept__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: auto;
    }

    .rn-dept__list {
        margin-top: 16px;
    }
}

/* 1024~ 4열 */
@media screen and (min-width: 1024px) {
    .rn-dept {
        padding: 48px 32px;
    }

    .rn-dept__title {
        font-size: 48px;
    }

    .rn-dept__desc {
        font-size: 18px;
        font-weight: 300;
    }

    .rn-dept__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rn-dept__group-title {
        min-height: 56px;
        font-size: 20px;
    }

    .rn-dept__link {
        padding: 12px 20px;
    }
}

/* 1440~ 6열, 제목·버튼은 위 */
@media screen and (min-width: 1440px) {
    .rn-dept {
        padding: 56px 40px 40px;
    }

    .rn-dept__head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px 40px;
        padding: 0 0 40px;
    }

    .rn-dept__title {
        flex: 0 0 100%;
        font-size: 56px;
    }

    .rn-dept__desc {
        margin-top: 0;
    }

    .rn-dept__find {
        margin-top: 0;
    }

    .rn-dept__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    /* 이름 + '폐과예정'이 한 줄에 들어가게 */
    /* 시안 칸 높이 51 */
    .rn-dept__link {
        gap: 6px;
        min-height: 51px;
        padding: 12px 16px;
        font-size: 18px;
    }
}

/* 1920~ 왼쪽 제목 칸 + 학부 6열 */
@media screen and (min-width: 1920px) {
    .rn-dept {
        display: flex;
        gap: 8px;
        padding: 32px 16px;
    }

    .rn-dept__head {
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        width: 458px;
        padding: 32px;
    }

    .rn-dept__title {
        flex: none;
    }

    .rn-dept__desc {
        margin-top: 16px;
    }

    .rn-dept__find {
        margin-top: auto;
    }

    .rn-dept__scroll {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* =========================================================
   SDU PEOPLE (RN.slider mode: 'track')
   ========================================================= */
/* 배경 글자가 SNS 상자 윗변에서 바로 잘려야 해서 간격 없음 */
.rn-people-wrap {
    padding-bottom: 0;
}

.rn-people {
    /* 넘김 속도. 지그재그 접기·펴기 시점도 이 값 기준 (JS 는 computed 값을 읽어 따라감) */
    --rn-people-dur: 1.1s;
    position: relative;
    overflow: hidden;
    /* 모바일 시안: 카드 아래 2 + SNS 까지 12 (사이 여백 없는 섹션) */
    padding: 56px 0 14px;
}

/* 꾸밈용 글자 */
.rn-people__bg {
    position: absolute;
    left: 50%;
    bottom: -111px;
    z-index: 0;
    font-size: 200px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.03em;
    color: rgba(69, 50, 76, .06);
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.rn-people__head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "title title"
        "desc desc"
        "more btns";
    align-items: center;
    justify-content: space-between;
    padding-left: 36px;
    padding-right: 36px;
}

.rn-people__title {
    grid-area: title;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 36px;
    line-height: 1.36;
    letter-spacing: -.03em;
    color: #222;
}

.rn-people__title > span {
    display: block;
}

/* 공용 CSS 의 :lang(en) Oswald 안 씀 */
.rn-people__title :lang(en) {
    font-family: inherit;
}

.rn-people__desc {
    grid-area: desc;
    margin-top: 16px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -.015em;
    color: #545454;
}

.rn-people__more,
.rn-why__more {
    grid-area: more;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    margin-top: 32px;
    padding: 0 16px;
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.015em;
    color: #222;
    transition: background-color .2s;
}

.rn-people__more::after,
.rn-why__more::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: url("../img/renewal/main/ico_arrow_12.svg") center / 12.2px auto no-repeat;
}

.rn-people__more:hover,
.rn-why__more:hover {
    background: #ebe6e2;
}

.rn-people__btns {
    grid-area: btns;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 32px;
    margin-right: -13px;
}

@media screen and (max-width: 374.98px) {
    .rn-people__head {
        padding-left: 16px;
        padding-right: 16px;
        grid-template-columns: max-content minmax(0, 1fr);
    }

    .rn-people__more {
        white-space: nowrap;
    }

    .rn-people__btns {
        margin-right: 0;
    }
}

/* 이전 | 다음 (PEOPLE·WHY·SNS 공통). 터치 영역 40×44, 아이콘 14 */
.rn-people__btn,
.rn-why__btn,
.rn-sns__btn {
    position: relative;
    display: block;
    width: 40px;
    height: 44px;
    background: center / 14px 14px no-repeat;
}

/* 768~ 아이콘 사이 12 (디자이너 요청: 대학교 사이트처럼 좁게). 터치 영역 26×44 */
@media screen and (min-width: 768px) {
    .rn-people__btn,
    .rn-why__btn,
    .rn-sns__btn {
        width: 26px;
    }
}

.rn-people__btn--prev,
.rn-why__btn--prev,
.rn-sns__btn--prev { background-image: url("../img/renewal/main/ico_prev_dark.svg"); }
.rn-people__btn--next,
.rn-why__btn--next,
.rn-sns__btn--next { background-image: url("../img/renewal/main/ico_next_dark.svg"); }

/* 정지/재생: 시안에 없어 KV 정지 버튼 모양을 어두운 색으로, 이전/다음 옆에 */
.rn-people__btn--toggle,
.rn-why__btn--toggle,
.rn-sns__btn--toggle { background-image: url("../img/renewal/main/ico_pause_dark.svg"); }
.rn-people.is-paused .rn-people__btn--toggle,
.rn-why.is-paused .rn-why__btn--toggle,
.rn-sns.is-paused .rn-sns__btn--toggle { background-image: url("../img/renewal/main/ico_play_dark.svg"); }
 
.rn-why__btn[aria-disabled="true"],
.rn-sns__btn[aria-disabled="true"] {
    opacity: .3;
    cursor: default;
}

.rn-people__viewport {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: 44px;
}

/* 가로 이동. 이동 중엔 일직선, 멈출 즈음 바로 지그재그로 (JS RN.peopleZigzag) */
.rn-people__track {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    transition: transform var(--rn-people-dur) cubic-bezier(.4, 0, .2, 1);
}

/* 지그재그: 카드 6장 반복 200·50·150·0·150·50 (시안 PC px, 모바일 0.857배).
   높이는 카드가 아니라 화면 칸에 붙어 있다 — JS 가 칸 번호로 --rn-people-k(-.5~.5)를 주고,
   트랙이 밀리면 칸 번호가 바뀌면서 카드가 옆 칸 높이로 같이 올라탄다 */
.rn-people__slide {
    --rn-people-amp: 171px;
    /* 높이는 rAF가 직접 갱신한다. 원본·복제 카드 모두 지연 전환 없이 따라간다. */
    transition-property: none;
    flex: none;
    width: 257px;
    margin-top: calc(var(--rn-people-amp) / 2);
    /* --rn-people-s: 지그재그 세기(0 = 일직선). 넘길 때 JS 가 1 → 0 → 1 로 움직인다 */
    transform: translateY(calc(var(--rn-people-amp) * var(--rn-people-k, 0) * var(--rn-people-s, 1)));
}

/* 복제본 정리·창 크기 변경으로 트랙이 순간 이동하는 프레임. 높이를 애니메이션 없이 새로 잡는다 */
.rn-people.is-settling .rn-people__slide {
    transition: none;
}

.rn-people__track::after {
    content: "";
    flex: none;
    width: 1px;
    height: 565px;
}

.rn-people__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    height: 394px;
    padding: 0 8.5% 27px;
    border-radius: 300px;
    /* background: #030303; */
    color: #fff;
    text-align: center;
    /* 이동 중 라운드 풀림 방지 (SNS 카드와 같은 이유) */
    isolation: isolate;
}

.rn-people__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    transition: transform .65s ease;
}

/* 글자 대비용, 진하기는 디자인 확인 필요 */
.rn-people__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(34, 34, 34, 0) 40%,
        rgba(34, 34, 34, 0.6) 70%
    );
}

.rn-people__name,
.rn-people__story {
    position: relative;
    z-index: 1;
    width: 100%;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.03em;
}

.rn-people__name {
    font-size: 14px;
}

.rn-people__story {
    margin-top: 7px;
    font-size: 24px;
}

/* 화살표 상자는 글자 아래 */
.rn-people__story::after {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 14px auto 0;
    border-radius: 7px;
    background: #fff url("../img/renewal/main/ico_arrow_12.svg") center / 10px auto no-repeat;
}

.rn-people__story.rn-arrow::after {
    transition: background-position var(--rn-arrow-dur, .2s);
}

.rn-people__story.rn-arrow:is(:hover, :focus-visible)::after {
    transform: none;
    background-position: calc(50% + var(--rn-arrow-shift, 4px)) center;
}

@media (prefers-reduced-motion: reduce) {
    .rn-people__story.rn-arrow:is(:hover, :focus-visible)::after {
        background-position: center;
        transition: none;
    }
}

@media (hover: hover) {
    .rn-people__card:hover .rn-people__photo {
        transform: scale(1.07);
    }
}

@media screen and (min-width: 768px) {
    .rn-people {
        padding: 64px 0 48px;
    }

    .rn-people__bg {
        bottom: -110px;
        font-size: 320px;
    }

    .rn-people__head {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title title"
            "desc desc"
            "btns more";
        padding-left: 40px;
        padding-right: 40px;
    }

    .rn-people__title {
        font-size: 48px;
    }

    .rn-people__btns {
        justify-content: flex-start;
        margin-right: 0;
        margin-left: -6px;
    }

    .rn-people__viewport {
        margin-top: 48px;
    }

    .rn-people__track {
        gap: 8px;
    }

    .rn-people__slide {
        --rn-people-amp: 200px;
        width: 300px;
    }

    .rn-people__track::after {
        height: 660px;
    }

    .rn-people__card {
        height: 460px;
    }

    .rn-people__card {
        padding-bottom: 32px;
    }

    .rn-people__story {
        margin-top: 8px;
        font-size: 26px;
    }

    .rn-people__story::after {
        width: 32px;
        height: 32px;
        margin-top: 16px;
        border-radius: 8px;
        background-size: 11px auto;
    }
}

@media screen and (min-width: 1024px) {
    .rn-people__title {
        font-size: 60px;
    }

    .rn-people__name {
        font-size: 16px;
    }
}

/* 1440~ 제목 왼쪽 위, 설명 오른쪽 아래, 버튼 왼쪽 아래 */
@media screen and (min-width: 1440px) {
    .rn-people {
        padding: 120px 0 60px;
        max-width: 2560px;
        margin: 0 auto;        
    }

    .rn-people__bg {
        bottom: -206px;
        font-size: 450px;
    }

    .rn-people__head {
        grid-template-columns: minmax(0, 1fr) 400px;
        grid-template-areas:
            "title ."
            ". desc"
            "btns more";
        align-items: end;
        max-width: 1376px;
        padding-left: 0;
        padding-right: 0;
    }

    .rn-people__title {
        font-size: 72px;
    }

    .rn-people__desc {
        margin-top: 0;
    }

    .rn-people__more {
        justify-self: start;
        height: 48px;
        margin-top: 24px;
    }

    .rn-people__btns {
        align-self: end;
        margin-top: 24px;
        margin-bottom: -15px;
    }

    .rn-people__story {
        font-size: 28px;
    }

    .rn-people__story::after {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background-size: 12px auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rn-people__track,
    .rn-people__slide,
    .rn-people__photo {
        transition: none;
    }
}

/* =========================================================
   산업체위탁전형 안내 (배경 + 손글씨 2장 + 사람 7장, 화면에 들어오면 차례로 등장)
   ========================================================= */
.rn-indus-wrap {
    padding-bottom: 12px;
}

.rn-indus {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 32px 15px 15px;
    border-radius: 10px;
    background: var(--rn-ipsi-blue);
    color: #fff;
}

/* 시안 글자 영역 36~359 (390 기준) */
.rn-indus__text {
    position: relative;
    z-index: 1;
    padding: 0 4px 0 9px;
}

.rn-indus__title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 24px 6px;
    border-radius: 100px;
    background: #fff;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.48;
    letter-spacing: -.03em;
    color: var(--rn-ipsi-blue);
}

.rn-indus__copy {
    margin-top: 32px;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 44px;
    line-height: 1.16;
    letter-spacing: -.07em;
}

.rn-indus__copy em {
    color: var(--rn-ipsi-sky);
    font-family: var(--rn-font-title);
    font-weight: 600;    
    line-height: 1.16;
    letter-spacing: -.07em;    
}

.rn-indus__info {
    display: flex;
    gap: 16px;
    margin: 20px 0 0;
}

.rn-indus__row {
    flex: 1 1 0;
    min-width: 0;
}

.rn-indus__row + .rn-indus__row {
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .4);
}

/* 첫 칸은 글자 폭만큼, 남는 폭은 문의 칸에 */
.rn-indus__row:first-child {
    flex: none;
    width: min-content;
}

.rn-indus__nowrap {
    white-space: nowrap;
}

.rn-indus__info dt {
    display: inline-block;
    padding: 4px 12px;
    border: 1.5px solid #fff;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.48;
}

.rn-indus__info dd {
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.02em;
}

.rn-indus__info a {
    color: inherit;
    text-decoration-color: #fff;
    text-underline-offset: 3px;
}

.rn-indus__info a:hover {
    text-decoration: underline;
}

/* 모바일은 이메일 줄바꿈 */
.rn-indus__slash {
    display: none;
}

.rn-indus__info a[href^="mailto"] {
    display: block;
}

/* 좁은 화면에서는 대상·문의에 각각 한 줄의 너비를 확보한다. */
@media screen and (max-width: 374.98px) {
    .rn-indus__info {
        flex-direction: column;
    }

    .rn-indus__row,
    .rn-indus__row:first-child {
        flex: none;
        width: 100%;
    }

    .rn-indus__row + .rn-indus__row {
        padding-left: 0;
        border-left: 0;
    }

    .rn-indus__info dd {
        overflow-wrap: anywhere;
    }

    .rn-indus__info .rn-indus__nowrap {
        white-space: normal;
    }
}

.rn-main .rn-indus a:focus-visible {
    outline-color: #fff;
}

/* 그림 상자 = 배경 이미지 크기. 손글씨·사람은 상자 기준 % 위치 */
.rn-indus__img {
    position: relative;
    display: block;
    order: 2;
    margin: 18px -15px 0;
}

/* 모바일 시안: 손글씨 위로 배경 72, 버튼이 배경 아래 36 을 덮음 (271:12986) */
.rn-indus__bg {
    display: block;
    width: 100%;
    padding-top: 55px;
}

.rn-indus__bg::before {
    content: "";
    display: block;
    aspect-ratio: 732 / 436;
    background: url("../img/renewal/main/indus_bg_mo.png") center / 100% 100% no-repeat;
}

.rn-indus__shapes { display: none; }

@media screen and (max-width: 767px) {
    .rn-indus__bg::before { background-image: none; }

    .rn-indus__shapes {
        position: absolute;
        display: flex;
        left: 50%;
        top: 36.6%;
        width: 94.535%;
        aspect-ratio: 346 / 106.462;
        transform: translateX(-50%);
        opacity: .7;
    }

    .rn-indus__shapes > span {
        flex: 0 0 30.769%;
        height: 100%;
        margin-right: -7.692%;
    }

    .rn-indus__shapes > span:nth-child(1) { background: rgb(106 93 255 / 30%); border-radius: 56.25% 1.25% 56.25% 1.25%; }
    .rn-indus__shapes > span:nth-child(2) { background: rgb(129 212 246 / 20%); border-radius: 50%; }
    .rn-indus__shapes > span:nth-child(3) { background: rgb(170 96 255 / 40%); border-radius: 1.25% 62.5% 1.25% 62.5%; }
    .rn-indus__shapes > span:nth-child(4) { background: rgb(88 199 255 / 20%); border-radius: 1.25% 1.25% 62.5% 62.5%; margin-right: 0; }
}

.rn-indus__slogan,
.rn-indus__person {
    background: var(--rn-indus-layer) center / contain no-repeat;
    aspect-ratio: var(--rn-indus-ratio);
}

.rn-indus__slogan--1 { --rn-indus-layer: url("../img/renewal/main/indus_slogan_1.png"); --rn-indus-ratio: 739 / 229; }
.rn-indus__slogan--2 { --rn-indus-layer: url("../img/renewal/main/indus_slogan_2.png"); --rn-indus-ratio: 693 / 189; }
.rn-indus__person--1 { --rn-indus-layer: url("../img/renewal/main/indus_person_1.png"); --rn-indus-ratio: 314 / 858; }
.rn-indus__person--2 { --rn-indus-layer: url("../img/renewal/main/indus_person_2.png"); --rn-indus-ratio: 286 / 768; }
.rn-indus__person--3 { --rn-indus-layer: url("../img/renewal/main/indus_person_3.png"); --rn-indus-ratio: 316 / 802; }
.rn-indus__person--4 { --rn-indus-layer: url("../img/renewal/main/indus_person_4.png"); --rn-indus-ratio: 266 / 780; }
.rn-indus__person--5 { --rn-indus-layer: url("../img/renewal/main/indus_person_5.png"); --rn-indus-ratio: 270 / 782; }
.rn-indus__person--6 { --rn-indus-layer: url("../img/renewal/main/indus_person_6.png"); --rn-indus-ratio: 326 / 868; }
.rn-indus__person--7 { --rn-indus-layer: url("../img/renewal/main/indus_person_7.png"); --rn-indus-ratio: 250 / 774; }

@media screen and (min-width: 768px) {
    .rn-indus__bg {
        padding-top: 140px;
    }

    .rn-indus__bg::before {
        aspect-ratio: 2512 / 831;
        background-image: url("../img/renewal/main/indus_bg_pc.png");
    }
}

.rn-indus__slogan,
.rn-indus__person {
    position: absolute;
    display: block;
    height: auto;
}

.rn-indus__person--1 { left: 10.833%; top: 34.122%; width: 12.875%; }
.rn-indus__person--2 { left: 23.889%; top: 41.377%; width: 11.727%; }
.rn-indus__person--3 { left: 34.444%; top: 38.586%; width: 12.957%; }
.rn-indus__person--4 { left: 47.361%; top: 40.818%; width: 10.907%; }
.rn-indus__person--5 { left: 57.778%; top: 40.818%; width: 11.071%; }
.rn-indus__person--6 { left: 69.028%; top: 33.563%; width: 13.367%; }
.rn-indus__person--7 { left: 82.917%; top: 41.377%; width: 10.251%; }
.rn-indus__slogan--1 { left: 10.972%; top: 4.396%; width: 46.188%; }
.rn-indus__slogan--2 { left: 47.131%; top: 19.78%; width: 43.313%; }

/* 등장 모션: JS 가 is-inview-ready 를 붙였을 때만 숨김 (JS 실패·미지원이면 그대로 보임)
   순서는 글 → '프로의 시작' → '서울디지털대학교' → 사람(왼쪽부터).
   앞 장면이 절반쯤 지난 뒤 다음이 시작되도록 띄웠다 — 간격이 좁으면 한꺼번에 뜬 것처럼 보인다.
   시간 값은 여기 변수만 바꾼다. 마지막 사람 = person + step × 6 + dur (2.9s) */
.rn-indus {
    --rn-indus-dur: 1s;
    --rn-indus-ease: cubic-bezier(.22, .61, .36, 1);
    --rn-indus-d-btns: .15s;
    --rn-indus-d-slogan1: .3s;
    --rn-indus-d-slogan2: .8s;
    --rn-indus-d-person: 1.3s;
    --rn-indus-d-step: .1s;
}

.rn-indus.is-inview-ready .rn-indus__text,
.rn-indus.is-inview-ready .rn-indus__btns,
.rn-indus.is-inview-ready .rn-indus__slogan,
.rn-indus.is-inview-ready .rn-indus__person {
    opacity: 0;
    transition: opacity var(--rn-indus-dur) var(--rn-indus-ease), transform var(--rn-indus-dur) var(--rn-indus-ease);
}

.rn-indus.is-inview-ready .rn-indus__slogan {
    transform: translateY(12px);
}

.rn-indus.is-inview-ready .rn-indus__person {
    transform: translateY(48px);
}

.rn-indus.is-inview .rn-indus__text,
.rn-indus.is-inview .rn-indus__btns,
.rn-indus.is-inview .rn-indus__slogan,
.rn-indus.is-inview .rn-indus__person {
    opacity: 1;
    transform: none;
}

.rn-indus.is-inview .rn-indus__btns { transition-delay: var(--rn-indus-d-btns); }
.rn-indus.is-inview .rn-indus__slogan--1 { transition-delay: var(--rn-indus-d-slogan1); }
.rn-indus.is-inview .rn-indus__slogan--2 { transition-delay: var(--rn-indus-d-slogan2); }
.rn-indus.is-inview .rn-indus__person { transition-delay: calc(var(--rn-indus-d-person) + var(--rn-indus-d-step) * var(--rn-indus-i, 0)); }

/* 사람 순서 (왼쪽부터) */
.rn-indus__person--2 { --rn-indus-i: 1; }
.rn-indus__person--3 { --rn-indus-i: 2; }
.rn-indus__person--4 { --rn-indus-i: 3; }
.rn-indus__person--5 { --rn-indus-i: 4; }
.rn-indus__person--6 { --rn-indus-i: 5; }
.rn-indus__person--7 { --rn-indus-i: 6; }

@media (prefers-reduced-motion: reduce) {
    .rn-indus.is-inview-ready .rn-indus__text,
    .rn-indus.is-inview-ready .rn-indus__btns,
    .rn-indus.is-inview-ready .rn-indus__slogan,
    .rn-indus.is-inview-ready .rn-indus__person {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.rn-indus__btns {
    position: relative;
    z-index: 1;
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: -36px;
}

@media screen and (max-width: 767px) {
    .rn-indus__btns { margin-top: -20px; }
}

.rn-indus__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    border-radius: 10px;
    background: #fff;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.48;
    letter-spacing: -.02em;
    color: #222;
    transition: filter .2s;
}

.rn-main .rn-indus__btn {
    color: #222;
}

.rn-main .rn-indus__btn--point {
    background: var(--rn-ipsi-sky);
    color: var(--rn-ipsi-dark);
}

.rn-indus__btn::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: url("../img/renewal/main/ico_arrow_14.svg") center / 11px auto no-repeat;
}

.rn-indus__btn:hover {
    filter: brightness(.95);
}

.rn-recruit__btn--point::after,
.rn-indus__btn--point::after {
    background-image: url("../img/renewal/main/ico_arrow_navy_2027.svg");
}

/* 768~ 대상·문의 한 줄씩, 그림은 가로 꽉 차게 */
@media screen and (min-width: 768px) {
    .rn-indus-wrap {
        padding-bottom: 16px;
    }

    .rn-indus {
        padding: 48px 40px 40px;
    }

    .rn-indus__text {
        padding: 0;
    }

    .rn-indus__title {
        display: inline-flex;
        padding: 10px 28px 8px;
        font-size: 22px;
    }

    .rn-indus__copy {
        margin-top: 40px;
        font-size: 58px;
    }

    .rn-indus__info {
        flex-direction: column;
        gap: 12px;
        margin-top: 32px;
        padding-left: 4px;
    }

    .rn-indus__row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .rn-indus__row + .rn-indus__row {
        padding-left: 0;
        border-left: 0;
    }

    .rn-indus__row:first-child {
        width: auto;
    }

    .rn-indus__info dt {
        flex: none;
        padding: 5px 16px;
        font-size: 16px;
    }

    .rn-indus__info dd {
        margin-top: 0;
        font-size: 18px;
    }

    .rn-indus__slash {
        display: inline;
    }

    .rn-indus__info a[href^="mailto"] {
        display: inline;
    }

    .rn-indus__img {
        margin: 24px -40px 0;
    }

    /* PC 그림 상자 (1328×740 기준) */
    .rn-indus__person--1 { left: 13.554%; top: 31.959%; width: 11.822%; }
    .rn-indus__person--2 { left: 25.565%; top: 37.905%; width: 10.768%; }
    .rn-indus__person--3 { left: 35.279%; top: 35.608%; width: 11.898%; }
    .rn-indus__person--4 { left: 47.139%; top: 37.365%; width: 10.015%; }
    .rn-indus__person--5 { left: 56.627%; top: 37.432%; width: 10.166%; }
    .rn-indus__person--6 { left: 66.943%; top: 31.419%; width: 12.274%; }
    .rn-indus__person--7 { left: 79.706%; top: 37.838%; width: 9.413%; }
    .rn-indus__slogan--1 { left: 26.468%; top: 10.878%; width: 27.824%; }
    .rn-indus__slogan--2 { left: 49.059%; top: 20.405%; width: 26.092%; }



    .rn-indus__btns {
        flex-direction: row;
        margin-top: 8px;
    }

    .rn-indus__btn {
        flex: 1 1 0;
        height: 64px;
    }
}

@media screen and (min-width: 1024px) {
    .rn-indus__title {
        font-size: 26px;
    }

    .rn-indus__copy {
        font-size: 74px;
    }
}

/* 1440~ 글 왼쪽, 그림 오른쪽 아래 */
@media screen and (min-width: 1440px) {
    .rn-indus {
        display: block;
        min-height: 740px;
        padding: 98px 0 98px 100px;
    }

    .rn-indus__text,
    .rn-indus__btns {
        width: 438px;
    }

    .rn-indus__title {
        margin-left: 4px;
        font-size: 28px;
    }

    /* 시안은 두 줄 사이 2 (줄 상자 102 + 2) */
    .rn-indus__copy {
        margin-top: 47px;
        font-size: 88px;
        line-height: 104px;
    }

    .rn-indus__info dt {
        font-size: 18px;
    }

    .rn-indus__info dd {
        font-size: 20px;
    }

    .rn-indus__img {
        position: absolute;
        right: 0;
        top: 45px;
        width: calc(100% - 632px);
        height: auto;
        aspect-ratio: 1256 / 618;
        margin: 0;
    }

    /* Figma 782:14521: 1256 x 618 image coordinate space. */
    .rn-indus__bg {
        position: absolute;
        top: 22.70351%;
        left: 0;
        width: 100%;
    }

    .rn-indus__bg {
        padding-top: 0;
        height: auto;
    }

    .rn-indus__person--1 { left: 8.59873%; top: 31.20252%; width: 12.46076%; }
    .rn-indus__person--2 { left: 21.33847%; top: 38.08223%; width: 11.30931%; }
    .rn-indus__person--3 { left: 31.54475%; top: 35.42417%; width: 12.54025%; }
    .rn-indus__person--4 { left: 44.11456%; top: 37.61316%; width: 10.53997%; }
    .rn-indus__person--5 { left: 54.56955%; top: 37.61316%; width: 10.28322%; }
    .rn-indus__person--6 { left: 65.05492%; top: 30.42071%; width: 12.92493%; }
    .rn-indus__person--7 { left: 78.58016%; top: 38.08223%; width: 9.84756%; }
    .rn-indus__slogan--1 { --rn-indus-ratio: 1254 / 288; left: 9.55%; top: 2.9%; width: 50.4%; }
    .rn-indus__slogan--2 { left: 45.92038%; top: 17.26537%; width: 27.58758%; }

    .rn-indus__btns {
        position: relative;
        z-index: 1;
        gap: 8px;
        margin-top: 48px;
    }

    .rn-indus__btn {
        font-size: 20px;
    }
}

/* =========================================================
   SDU SNS (RN.slider mode: 'track', align: 'start', loop: false)
   ========================================================= */
.rn-sns-wrap {
    padding-bottom: 12px;
}

.rn-sns {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 40px 16px 24px;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 0;
}

/* 머리글은 섹션 격자에 바로 배치. 버튼은 마크업상 카드 뒤라 768~ 에서 격자로 올림 */
.rn-sns__head {
    display: contents;
}

.rn-sns__title {
    grid-area: title;
    padding: 0 15px;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 36px;
    line-height: 1.36;
    letter-spacing: -.04em;
    color: #222;
}

/* 공용 CSS 의 :lang(en) Oswald 안 씀 */
.rn-sns :lang(en) {
    font-family: inherit;
}

.rn-sns__title:lang(en) {
    font-family: var(--rn-font-title);
}

.rn-sns__side {
    grid-area: side;
    padding: 0 15px;
}

.rn-sns__desc {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -.015em;
    color: #545454;
}

/* 오른쪽 버튼 묶음(120 - 아이콘 여백 13 = 107)과 안 겹치게, 좁아지면 간격을 8 → 2 로 */
.rn-sns__links {
    display: flex;
    gap: clamp(2px, calc((100% - 267px) / 3), 8px);
    margin-top: 24px;
}

/* 모바일 시안 40, 터치 영역은 ::before 로 44 */
.rn-sns__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f1ef;
    transition: background-color .2s;
}

.rn-sns__link::before {
    content: "";
    position: absolute;
    inset: -2px;
}

.rn-sns__link:hover {
    background: #ebe6e2;
}

/* 카드는 SNS 아이콘 줄 아래 40 (버튼이 아이콘 줄보다 2px 길어 38) */
.rn-sns__viewport {
    grid-area: view;
    order: 2;
    overflow: hidden;
    margin-top: 38px;
}

/* 모바일은 SNS 아이콘 줄 오른쪽 (시안 2026-10-21 수정, 대학교 사이트와 같은 자리).
   아이콘 줄(40) 높이만큼 끌어올리고, WHY SDU 모바일처럼 마지막 아이콘이 콘텐츠 오른쪽 끝(머리글 안쪽 15)에 오게
   (버튼 40 안의 아이콘 여백 13 → 섹션 안쪽에서 15 - 13 = 2) */
.rn-sns__btns {
    grid-area: btns;
    order: 1;
    display: flex;
    align-self: flex-end;
    align-items: center;
    margin: -42px 2px 0 0;
}

.rn-sns__track {
    display: flex;
    gap: 8px;
    transition: transform var(--rn-slide-dur, .9s) var(--rn-slide-ease, ease);
}

.rn-sns__slide {
    flex: none;
    width: 100%;
}
a.rn-sns__card:focus{
    outline-offset: 0;
    outline-color: #ffffff00;
}
a.rn-sns__card:focus::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    border: 2px solid #002dad;
    height: 100%;
    z-index: 10;
    border-radius: 10px;
}
/* 트랙 이동 중 합성 레이어(이미지)가 라운드 클리핑을 벗어나는 Safari 버그 → isolation 으로 클리핑 고정
   (마스크는 카드 자신의 포커스 테두리까지 잘라서 안 씀) */
.rn-sns__card {
    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    overflow: hidden;
    height: 100%;
    border-radius: 10px;
    color: #222;
}

.rn-sns__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 1s;
}

.rn-sns__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #83e4bd;
}

.rn-sns__card--facebook .rn-sns__text { background: #a2b4ff; }
.rn-sns__card--youtube .rn-sns__text { background: #ffb3b3; }
.rn-sns__card--instagram .rn-sns__text { background: #ffc6df; }

.rn-sns__channel {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.48;
}

/* 제목 두 줄까지 */
.rn-sns__subject {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.96em;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.015em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rn-sns__card:hover .rn-sns__subject {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 터치 기기는 탭 후 :hover 가 남아 이미지가 확대된 채 넘어가므로 마우스에서만 */
@media (hover: hover) {
    .rn-sns__card:hover .rn-sns__img {
        transform: scale(1.2);

    }
}

@media screen and (min-width: 768px) {
    .rn-sns-wrap {
        padding-bottom: 16px;
    }

    /* 푸터까지 시안 16 = wrap 아래 16 (공용 푸터 margin-top 16 은 bottom:16 으로 상쇄됨). 여기 16 더하면 32 */
    .rn-sns {
        display: grid;
        margin-bottom: 0;
        grid-template-columns: 24px minmax(0, 1fr) auto 24px;
        grid-template-areas:
            ". title title ."
            ". btns side ."
            "view view view view";
        align-items: end;
        padding: 64px 16px 16px;
    }

    .rn-sns__title,
    .rn-sns__side {
        padding: 0;
    }

    .rn-sns__title {
        font-size: 48px;
    }

    .rn-sns__btns {
        grid-area: btns;
        justify-content: flex-start;
        margin: 0 0 0 -6px;
    }

    .rn-sns__links {
        gap: 8px;
    }

    .rn-sns__link {
        width: 48px;
        height: 48px;
    }

    .rn-sns__viewport {
        margin-top: 48px;
    }

    .rn-sns__track {
        gap: 16px;
    }

    .rn-sns__slide {
        width: 300px;
    }

    .rn-sns__subject {
        font-size: 22px;
    }
}

@media screen and (min-width: 1024px) {
    .rn-sns__title {
        font-size: 60px;
    }

    .rn-sns__slide {
        width: 340px;
    }

    .rn-sns__text {
        padding: 32px 40px;
    }
}

/* 1440~ 제목 왼쪽 위, 버튼 왼쪽 아래, 설명 오른쪽 */
@media screen and (min-width: 1440px) {
    .rn-sns {
        padding: 100px 16px 16px;
    }

    /* 머리글 가운데 1376 */
    .rn-sns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 976px) 400px minmax(0, 1fr);
    }

    .rn-sns__title {
        font-size: 72px;
    }

    /* 아이콘(14) 아래 끝을 설명 묶음 아래 끝에 (PEOPLE 과 같은 방식) */
    .rn-sns__btns {
        align-self: end;
        margin-bottom: -15px;
    }

    /* 시안은 제목 바로 아래 설명 */
    .rn-sns__desc {
        margin-top: 0;
    }

    .rn-sns__viewport {
        margin-top: 80px;
    }

    .rn-sns__subject {
        font-size: 24px;
        line-height: 1.36;
        min-height: 2.72em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rn-sns__track,
    .rn-sns__img {
        transition: none;
    }
}

/* =========================================================
   WHY SDU (시안 931:35013 · 816:17433 · 619:6981)
   모든 폭에서 카드 4장 = 묶음 1장, 묶음 단위 가로 슬라이드 (RN.slider 기본 모드 + RN.slideFx, 5초 자동 넘김)
   모바일: 2×2 바둑판 (시안 칸 181, 간격 4). 768~: 4장 한 줄, 카드 영역 폭 / 시안 1792 비율로 축소
   카드 안 크기는 모두 --rn-why-u(시안 1px 이 화면에서 몇 px 인지) 배수. 카드 묶음 상자의 컨테이너 폭(cqw)으로 계산해
   JS 없이 연속으로 줄어든다 (§3-8 고정 px 규칙의 예외, WHY 카드만)
   ========================================================= */
.rn-why-wrap {
    padding-bottom: 12px;
}

.rn-why {
    overflow: hidden;
    padding: 56px 24px 32px;
}

.rn-why__head {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "title title"
        "desc desc"
        "more btns";
    align-items: center;
    justify-content: space-between;
}

.rn-why__title {
    grid-area: title;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 36px;
    line-height: 1.36;
    letter-spacing: -.03em;
    color: #222;
}

.rn-why__title > span {
    display: block;
}

/* 공용 CSS 의 :lang(en) Oswald 안 씀 */
.rn-why__title :lang(en) {
    font-family: inherit;
}

.rn-why__desc {
    grid-area: desc;
    margin-top: 16px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -.015em;
    color: #545454;
}

.rn-why__more {
    margin-top: 24px;
}

.rn-why__btns {
    grid-area: btns;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 24px -13px 0 0;
}

/* 모바일 카드는 섹션 좌우 끝까지 (소제목만 안쪽 24) */
.rn-why__viewport {
    margin: 40px -24px 0;
}

/* 묶음은 한 칸에 겹쳐 두고 가로로 밀어 바꾼다. 밖으로 나간 묶음은 .rn-why 의 overflow 로 잘림.
   묶음이 카드 크기 기준 컨테이너 (cqw = 묶음 폭) */
.rn-why__track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.rn-why__group {
    grid-area: 1 / 1;
    min-width: 0;
    visibility: hidden;
    container-type: inline-size;
}

.rn-why__group.is-active {
    visibility: visible;
}

.rn-why__group-title {
    padding: 0 24px;
    font-family: var(--rn-font-title);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.24;
    letter-spacing: -.015em;
    color: #222;
}

/* 컨테이너 단위 미지원 브라우저는 @supports 밖 값(시안 390 크기) */
.rn-why__cards {
    --rn-why-u: 1px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: 32px;
}

/* 칸 = (묶음 폭 - 간격 4) / 2, 시안 칸 181 */
@supports (width: 1cqw) {
    .rn-why__cards {
        --rn-why-u: calc((100cqw - 4px) / 362);
    }
}

.rn-why__item {
    aspect-ratio: 1 / 1;
    min-width: 0;
}

/* WHY는 묶음 이동 대신 고정 제목 페이드 + 카드별 순차 등장 */
.rn-main .rn-why__group:is(.is-in-next, .is-in-prev, .is-out-next, .is-out-prev) {
    animation: none;
}

.rn-why__group:is(.is-in-next, .is-in-prev) .rn-why__group-title {
    animation: rn-why-fade-in .35s .2s ease both;
}

.rn-main .rn-why__group:is(.is-out-next, .is-out-prev) {
    visibility: hidden;
    pointer-events: none;
}

.rn-why__group:is(.is-out-next, .is-out-prev) .rn-why__group-title,
.rn-why__group:is(.is-out-next, .is-out-prev) .rn-why__cards {
    animation: rn-why-fade-out .2s ease both;
}

.rn-why__item:nth-child(1) { --rn-why-delay: .2s; }
.rn-why__item:nth-child(2) { --rn-why-delay: .32s; }
.rn-why__item:nth-child(3) { --rn-why-delay: .44s; }
.rn-why__item:nth-child(4) { --rn-why-delay: .56s; }

.rn-why__group:is(.is-in-next, .is-in-prev) .rn-why__item {
    animation: rn-why-card-in .4s cubic-bezier(.22, 1, .36, 1) var(--rn-why-delay) both;
}

@keyframes rn-why-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rn-why-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes rn-why-card-in {
    from { opacity: 0; transform: translateX(-32px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rn-why .rn-why__group .rn-why__group-title,
    .rn-why .rn-why__group .rn-why__cards,
    .rn-why .rn-why__group .rn-why__item {
        animation: none;
    }
}

.rn-why__card {
    position: relative;
    overflow: hidden;
    height: 100%;
    margin: 0;
    background: center / 100% 100% no-repeat;
    color: #fff;
}

.rn-why__num,
.rn-why__text {
    position: absolute;
    white-space: nowrap;
}

.rn-why__num {
    top: calc(20 * var(--rn-why-u));
    left: calc(20 * var(--rn-why-u));
    font-size: calc(44 * var(--rn-why-u));
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.06em;
}

.rn-why__text {
    left: calc(20 * var(--rn-why-u));
    bottom: calc(20 * var(--rn-why-u));
    font-size: calc(15 * var(--rn-why-u));
    font-weight: 500;
    line-height: 1.48;
    letter-spacing: -.015em;
}

.rn-why__note {
    display: block;
    margin-top: calc(4 * var(--rn-why-u));
    font-size: calc(12 * var(--rn-why-u));
    font-weight: 300;
    line-height: 1.48;
}

/* 모바일 카드 모양·배경 (시안 816:17433, 그림은 시안에서 글자 없이 받은 칸 크기 이미지) */
.rn-why__card--b1-1 { border-radius: 50%; background: #002dad url("../img/renewal/main/why_b1_1_doodle_2027.svg") no-repeat 91.7% 94.9% / 81.5064% auto; }
.rn-why__card--b1-2 { border-radius: calc(9.954 * var(--rn-why-u)) calc(155.143 * var(--rn-why-u)) calc(155.143 * var(--rn-why-u)) calc(5.171 * var(--rn-why-u)); background-image: url("../img/renewal/main/why_b1_2_mo.jpg"); }
.rn-why__card--b1-3 { background-image: url("../img/renewal/main/why_b1_3_art_2027.svg"), url("../img/renewal/main/why_b1_3_shape_2027.svg"); color: #0a2240; }
.rn-why__card--b1-4 { border-radius: calc(5.171 * var(--rn-why-u)) calc(155.143 * var(--rn-why-u)) calc(155.143 * var(--rn-why-u)) calc(5.171 * var(--rn-why-u)); background-image: url("../img/renewal/main/why_b1_4_mo.jpg"); }
.rn-why__card--b2-1 { border-radius: 50%; background: #81d4f6 url("../img/renewal/main/why_b2_star_2027.svg") no-repeat -71.034% center / 128% 132.571%; color: #0a2240; }
.rn-why__card--b2-2 { border-radius: calc(5.171 * var(--rn-why-u)) calc(103.429 * var(--rn-why-u)) calc(103.429 * var(--rn-why-u)) calc(5.171 * var(--rn-why-u)); background-image: url("../img/renewal/main/why_b2_2_2027.png"); }
.rn-why__card--b2-3 { border-radius: calc(4.641 * var(--rn-why-u)) calc(4.641 * var(--rn-why-u)) calc(69.615 * var(--rn-why-u)) calc(4.641 * var(--rn-why-u)); background-image: url("../img/renewal/main/why_b2_3_2027.png"); }
.rn-why__card--b2-4 { border-radius: calc(5.171 * var(--rn-why-u)) calc(155.143 * var(--rn-why-u)) calc(155.143 * var(--rn-why-u)) calc(5.171 * var(--rn-why-u)); background: #00105c url("../img/renewal/main/why_b2_globe_2027.png") no-repeat right bottom / 55.519% 76.410%; color: #fff; }
.rn-why__card--b3-1 { background-image: url("../img/renewal/main/why_b3_1_mo.png"); }
.rn-why__card--b3-2 { border-radius: calc(69.615 * var(--rn-why-u)) calc(4.641 * var(--rn-why-u)) calc(69.615 * var(--rn-why-u)) calc(4.641 * var(--rn-why-u)); background: #111 url("../img/renewal/main/why_b3_2_2027.png") right center / auto 100% no-repeat; }
.rn-why__card--b3-3 { border-radius: 50%; background: #002dad; color: #fff; }
.rn-why__card--b3-4 { border-radius: calc(4.641 * var(--rn-why-u)) calc(4.641 * var(--rn-why-u)) calc(69.615 * var(--rn-why-u)) calc(4.641 * var(--rn-why-u)); background: #82d4f6 url("../img/renewal/main/why_b3_dots_2027.png") right bottom / 100% 73.369% no-repeat; color: #0a2240; }

/* 모바일 글자 자리. 가운데 정렬 카드 */
.rn-why__card--b1-1,
.rn-why__card--b2-1,
.rn-why__card--b3-1 {
    text-align: center;
}

.rn-why__card--b1-1 .rn-why__num,
.rn-why__card--b1-1 .rn-why__text,
.rn-why__card--b2-1 .rn-why__num,
.rn-why__card--b2-1 .rn-why__text,
.rn-why__card--b3-1 .rn-why__num,
.rn-why__card--b3-1 .rn-why__text {
    left: 0;
    right: 0;
}

.rn-why__card--b1-1 .rn-why__text {
    top: calc(68 * var(--rn-why-u));
    bottom: auto;
}

/* 25: 문구 위, 숫자 아래 (읽는 순서는 마크업대로 숫자 → 문구) */
.rn-why__card--b1-3 .rn-why__text {
    top: calc(24 * var(--rn-why-u));
    left: calc(24 * var(--rn-why-u));
    bottom: auto;    
}

.rn-why__card--b1-3 .rn-why__num {
    top: auto;
    bottom: calc(24 * var(--rn-why-u));
    left: calc(24 * var(--rn-why-u));    
}

.rn-why__card--b2-4::before {
    content: "";
    position: absolute;
    left: 34.448%;
    top: 75.411%;
    width: 73.947%;
    aspect-ratio: 442.207 / 118.29;
    background: url("../img/renewal/main/why_b2_orbit_2027.svg") center / 100% 100% no-repeat;
    transform: rotate(-30deg);
    transform-origin: top left;
    pointer-events: none;
}

.rn-why__card--b2-1 .rn-why__text {
    top: calc(20 * var(--rn-why-u));
    bottom: auto;
}

.rn-why__card--b2-1 .rn-why__num {
    top: calc(117 * var(--rn-why-u));
}

.rn-why__card--b2-3 .rn-why__text {
    letter-spacing: -.02em;
}

.rn-why__card--b2-4 .rn-why__num {
    left: calc(16 * var(--rn-why-u));
}

.rn-why__card--b2-4 .rn-why__text {
    top: calc(105 * var(--rn-why-u));
    left: calc(16 * var(--rn-why-u));
    bottom: auto;
}

.rn-why__card--b3-1 .rn-why__num {
    top: calc(28 * var(--rn-why-u));
}

.rn-why__card--b3-1 .rn-why__text {
    top: calc(76 * var(--rn-why-u));
    bottom: auto;
}

.rn-why__card--b3-2 .rn-why__num {
    top: calc(28 * var(--rn-why-u));
    left: calc(28 * var(--rn-why-u));
}

.rn-why__card--b3-2 .rn-why__text {
    top: calc(80 * var(--rn-why-u));
    left: calc(28 * var(--rn-why-u));
    bottom: auto;
}

/* 3: 가운데 세로 정렬 */
.rn-why__card--b3-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--rn-why-u));
    padding-top: calc(1 * var(--rn-why-u));
    text-align: center;
}

.rn-why__card--b3-3 .rn-why__num,
.rn-why__card--b3-3 .rn-why__text {
    position: static;
}

.rn-why__card--b3-3 .rn-why__num {
    font-size: calc(56 * var(--rn-why-u));
}

.rn-why__card--b3-4 .rn-why__text {
    top: calc(72 * var(--rn-why-u));
    bottom: auto;
}

@media screen and (min-width: 768px) {
    .rn-why-wrap {
        padding-bottom: 16px;
    }

    .rn-why {
        padding: 64px 40px;
    }

    .rn-why__head {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title title"
            "desc desc"
            "btns more";
    }

    .rn-why__title {
        font-size: 48px;
    }

    .rn-why__btns {
        justify-content: flex-start;
        margin: 24px 0 0 -6px;
    }

    .rn-why__viewport {
        margin: 60px 0 0;
    }

    .rn-why__group-title {
        padding: 0;
        font-size: 26px;
    }

    /* 4장 한 줄. 시안 1920: 390 + 598(넓은 카드) + 390 + 390 + 간격 8 × 3 = 1792 */
    .rn-why__cards {
        --rn-why-u: .5px;
        display: flex;
        gap: calc(8 * var(--rn-why-u));
    }

    .rn-why__item {
        flex: none;
        width: calc(390 * var(--rn-why-u));
        height: calc(390 * var(--rn-why-u));
        aspect-ratio: auto;
    }

    .rn-why__item--wide {
        width: calc(598 * var(--rn-why-u));
    }

    @supports (width: 1cqw) {
        .rn-why__cards {
            --rn-why-u: calc(100cqw / 1792);
        }
    }

    /* 모바일에서만 줄바꿈 */
    .rn-why__br-mo {
        display: none;
    }

    /* PC 카드 (시안 1920 값 × --rn-why-u) */
    .rn-why__card,
    .rn-why__card--b1-1,
    .rn-why__card--b2-1,
    .rn-why__card--b3-1 {
        text-align: left;
    }

    .rn-why__num {
        top: calc(40 * var(--rn-why-u));
        left: calc(40 * var(--rn-why-u));
        bottom: auto;
        font-size: calc(120 * var(--rn-why-u));
    }

    .rn-why__text {
        top: auto;
        bottom: auto;
        left: calc(40 * var(--rn-why-u));
        font-size: calc(22 * var(--rn-why-u));
    }

    .rn-why__note {
        margin-top: calc(8 * var(--rn-why-u));
        font-size: calc(18 * var(--rn-why-u));
        line-height: 1.36;
    }

    /* 모양 */
    .rn-why__card--b1-1,   
    .rn-why__card--b3-3 {
        border-radius: 50%;
    }

    .rn-why__card--b1-2,
    .rn-why__card--b1-4,
    .rn-why__card--b2-2,
    .rn-why__card--b2-4 {
        border-radius: calc(12 * var(--rn-why-u)) calc(195 * var(--rn-why-u)) calc(195 * var(--rn-why-u)) calc(12 * var(--rn-why-u));
    }

    .rn-why__card--b2-1,
    .rn-why__card--b3-1 {
        border-radius: 0;
    }

    .rn-why__card--b2-3,
    .rn-why__card--b3-4 {
        border-radius: calc(10 * var(--rn-why-u)) calc(10 * var(--rn-why-u)) calc(150 * var(--rn-why-u)) calc(10 * var(--rn-why-u));
    }

    .rn-why__card--b3-2 {
        border-radius: calc(150 * var(--rn-why-u)) calc(10 * var(--rn-why-u)) calc(150 * var(--rn-why-u)) calc(10 * var(--rn-why-u));
    }

    /* 1묶음: 지금 시작할 수 있는 이유 (그림·사진은 글자 없는 배경) */
    .rn-why__card--b1-1 {
        background: #002dad url("../img/renewal/main/why_b1_1_doodle_2027.svg") no-repeat 91.7% 94.9% / 81.5064% auto;
        text-align: center;
    }

    .rn-why__card--b1-1 .rn-why__num,
    .rn-why__card--b1-1 .rn-why__text {
        left: 0;
        right: 0;
    }

    .rn-why__card--b1-1 .rn-why__num,
    .rn-why__card--b1-2 .rn-why__num,
    .rn-why__card--b1-4 .rn-why__num {
        top: calc(48 * var(--rn-why-u));
    }

    .rn-why__card--b1-1 .rn-why__num,
    .rn-why__card--b1-2 .rn-why__num,
    .rn-why__card--b1-3 .rn-why__num,
    .rn-why__card--b1-4 .rn-why__num,
    .rn-why__card--b3-4 .rn-why__num {
        letter-spacing: -.04em;
    }

    .rn-why__card--b1-1 .rn-why__text,
    .rn-why__card--b1-2 .rn-why__text {
        top: calc(176 * var(--rn-why-u));
    }

    .rn-why__card--b1-2 {
        background: #05051c url("../img/renewal/main/why_b1_2.jpg") left center / cover no-repeat;
    }

    .rn-why__card--b1-2 .rn-why__num { left: calc(48 * var(--rn-why-u)); }
    .rn-why__card--b1-2 .rn-why__text { left: calc(50 * var(--rn-why-u)); }

    .rn-why__card--b1-3 {
        background: url("../img/renewal/main/why_b1_3_art_2027.svg") center / 100% 100% no-repeat, url("../img/renewal/main/why_b1_3_shape_2027.svg") center / 100% 100% no-repeat;
    }

    .rn-why__card--b1-3 .rn-why__num {
        top: calc(208 * var(--rn-why-u));
        left: calc(62 * var(--rn-why-u));
    }

    .rn-why__card--b1-3 .rn-why__text {
        top: calc(56 * var(--rn-why-u));
        left: calc(56 * var(--rn-why-u));
        bottom: auto;
    }

    .rn-why__card--b1-4 {
        background: #222 url("../img/renewal/main/why_b1_4.jpg") center / cover no-repeat;
    }

    .rn-why__card--b1-4 .rn-why__text {
        top: calc(272 * var(--rn-why-u));
        left: calc(42 * var(--rn-why-u));
    }

    /* 2묶음: 검증된 선택, 확실한 신뢰 */
    .rn-why__card--b2-1 {
        border-radius: 50%;
        text-align: center;
        background: #81d4f6 url("../img/renewal/main/why_b2_star_2027.svg") no-repeat -71.034% center / 128% 132.571%;
    }

    .rn-why__card--b2-1 .rn-why__num {
        top: calc(212.1 * var(--rn-why-u));
        left: 0;
        right: 0;
    }

    .rn-why__card--b2-1 .rn-why__text {
        top: calc(93.09 * var(--rn-why-u));
        left: 0;
        right: 0;
    }

    .rn-why__card--b2-2 {
        background: #020b0c url("../img/renewal/main/why_b2_2_2027.png") center / 100% 100% no-repeat;
    }

    .rn-why__card--b2-2 .rn-why__text {
        top: calc(184 * var(--rn-why-u));
        left: calc(44 * var(--rn-why-u));
    }

    .rn-why__card--b2-2 .rn-why__note {
        font-size: calc(20 * var(--rn-why-u));
        font-weight: 500;
    }

    .rn-why__card--b2-3 {
        background: #010c1c url("../img/renewal/main/why_b2_3_2027.png") center / 100% 100% no-repeat;
    }

    .rn-why__card--b2-3 .rn-why__text {
        top: calc(210 * var(--rn-why-u));
    }

    .rn-why__card--b2-4 {
        background: #00105c url("../img/renewal/main/why_b2_globe_2027.png") no-repeat right bottom / 55.519% 76.410%;
    }

    .rn-why__card--b2-4 .rn-why__num {
        left: calc(40 * var(--rn-why-u));
        top: calc(40 * var(--rn-why-u));
    }

    .rn-why__card--b2-4 .rn-why__text {
        top: calc(282 * var(--rn-why-u));
        left: calc(48 * var(--rn-why-u));
    }

    /* 3묶음: 학위 그 이상의 가능성 */
    .rn-why__card--b3-1 {
        background: url("../img/renewal/main/why_b3_1.png") center / 100% 100% no-repeat;
        text-align: center;
    }

    .rn-why__card--b3-1 .rn-why__num,
    .rn-why__card--b3-2 .rn-why__num {
        top: calc(64 * var(--rn-why-u));
    }

    .rn-why__card--b3-1 .rn-why__text,
    .rn-why__card--b3-2 .rn-why__text {
        top: calc(192 * var(--rn-why-u));
    }

    .rn-why__card--b3-2 {
        background: #111 url("../img/renewal/main/why_b3_2_2027.png") right center / auto 100% no-repeat;
    }

    .rn-why__card--b3-2 .rn-why__num {
        left: calc(64 * var(--rn-why-u));
    }

    .rn-why__card--b3-2 .rn-why__text {
        left: calc(65 * var(--rn-why-u));
    }

    .rn-why__card--b3-3 {
        gap: 16px;
        padding-top: 0;
    }

    .rn-why__card--b3-3 .rn-why__num {
        font-size: calc(160 * var(--rn-why-u));
    }

    .rn-why__card--b3-4 {
        background: #82d4f6 url("../img/renewal/main/why_b3_dots_2027.png") right bottom / 100% 73.369% no-repeat;
    }

    .rn-why__card--b3-4 .rn-why__text {
        top: calc(176 * var(--rn-why-u));
    }
    .rn-why__card--b3-4 .rn-why__num {
        top: calc(40 * var(--rn-why-u));
    }

}

/* 1024~ 제목 왼쪽 위, 설명·버튼 오른쪽, 이전/다음 왼쪽 아래 (SDU PEOPLE 과 같은 배치)
   시안 1280 케이스가 1920 과 같은 머리글·글자 크기라 1024 부터 PC 값 (중간 구간 3등분 규칙 대신 시안 우선)
   머리글·소제목은 최대 1376 가운데, 카드 영역은 좌우 48 */
@media screen and (min-width: 1024px) {
    .rn-why__title {
        font-size: 72px;
    }

    .rn-why__group-title {
        font-size: 32px;
    }

    .rn-why-wrap {
        padding-bottom: 0;
    }

    .rn-why {
        padding: 104px 48px 114px;
    }

    .rn-why__head {
        grid-template-columns: minmax(0, 1fr) 400px;
        grid-template-areas:
            "title title"
            ". desc"
            "btns more";
        align-items: end;
        max-width: 1376px;
        margin: 0 auto;
    }

    .rn-why__desc {
        margin-top: 0;
    }

    .rn-why__more {
        justify-self: start;
        height: 48px;
    }

    .rn-why__btns {
        align-self: end;
        margin-bottom: -15px;
    }

    .rn-why__viewport {
        margin-top: 88px;
    }

    .rn-why__group-title {
        max-width: 1376px;
        margin: 0 auto;
    }

    .rn-why__cards {
        margin-top: 48px;
    }
}

/* =========================================================
   박스 안 한 줄 글자 세로 가운데 보정
   한글 잉크가 줄 상자보다 위로 치우쳐서(실측: Pretendard 약 .04em, S-Core Dream 한글 약 .115em)
   위 여백을 보정값만큼 옮긴다. 높이는 그대로, 값은 :root 의 --rn-text-shift(-lg) (renewal_layout.css)
   - 높이 고정 박스: padding-top += 보정 × 2 (가운데가 보정만큼 내려감)
   - 높이 자동 박스: 위 +보정, 아래 -보정 (--rn-pad-y = 원래 위아래 여백)
   - 같이 가운데 정렬된 아이콘(::after)은 박스가 아니라 글자 잉크 가운데에 맞춘다.
     글자와 같이 내려가게 두고(Pretendard 는 이것으로 맞음), S-Core Dream 은 한글 잉크가
     줄 가운데보다 위라 --rn-text-ink-lg 만큼 더 올린다 (flex 가운데 정렬이라 margin 은 × 2)
   ========================================================= */

.rn-notice__badge,
.rn-dept__find,
.rn-road__btn,
.rn-service__btn,
.rn-dept__group-title,
.rn-dept__link,
.rn-indus__info dt {
    --rn-shift: var(--rn-text-shift);
}

.rn-indus__title {
    --rn-shift: var(--rn-text-shift-lg);
}

/* 높이 고정 */
.rn-recruit__btn,
.rn-indus__btn,
.rn-notice__badge,
.rn-dept__find,
.rn-road__btn,
.rn-service__btn {
    padding-top: calc(var(--rn-shift) * 2);
}

.rn-dept__group-title {
    padding-top: calc(8px + var(--rn-shift) * 2);
}

/* 높이 자동 */
.rn-dept__link {
    padding: 12px 16px;
}
/* 모바일 시안 높이 45 (271:13001) */
.rn-indus__title {
    padding: 9px 24px 6px;
}
/* 좌우는 구간별 값(모바일 12, 768~ 16) 유지 */
.rn-indus__info dt {
    padding-top: 4px;
    padding-bottom: 4px;
}
.rn-dept__link { --rn-pad-y: 8px; }
.rn-indus__info dt { --rn-pad-y: 4px; }
/* .rn-indus__title { --rn-pad-y: 7.5px; } */

.rn-recruit__btn::after,
.rn-indus__btn::after {
    margin-top: calc(var(--rn-text-ink-lg) * 2);
}

@media screen and (min-width: 768px) {
    .rn-indus__info dt { --rn-pad-y: 5px; }
    .rn-indus__title { padding: 9px 28px; }
}

@media screen and (min-width: 1024px) {
    .rn-dept__link { --rn-pad-y: 12px; }
}

/* PC 시안 태그 높이 37 (테두리 안쪽 기준이라 여백에서 테두리 1.5 뺌) */
@media screen and (min-width: 1440px) {
    .rn-indus__info dt { --rn-pad-y: 4px; }
}

/* Admissions main footer palette (Figma 778:5587). Shared and subpage styles stay unchanged. */
.typeMain .rn-footer__panel {
    background: #122894;
}

.typeMain .rn-footer__top {
    border-bottom-color: #0a2240;
}

.typeMain .rn-footer__hours,
.typeMain .rn-footer__links a {
    color: #fff;
}

.typeMain .rn-footer__links a.is-highlight {
    color: #82d4f6;
}

.typeMain .rn-footer__remote-btn {
    background: #82d4f6;
    color: #0a2240;
}

.typeMain .rn-footer__remote-btn:hover {
    background: #70c8ed;
}

.typeMain .rn-footer__remote-btn::after {
    background-image: url("../img/renewal/main/ico_arrow_navy_2027.svg");
}

.typeMain .rn-footer__sns a {
    background: rgba(10, 34, 64, 0.40);
}

/* Mobile department cards grow to fit every department link. */
@media screen and (max-width: 767px) {
    .rn-dept__scroll {
        overflow-y: hidden;
    }

    .rn-dept__grid {
        grid-auto-rows: 1fr;
        align-items: stretch;
    }

    .rn-dept__group {
        height: auto;
        max-height: none;
    }

    .rn-dept__link {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 16px;
    }

    .rn-dept__name {
        flex: 1;
    }

    .rn-dept__link::after {
        margin-left: auto;
    }
}

/* Mobile SNS: keep the card width and reveal only the next slide. */
@media screen and (max-width: 767px) {
    .rn-sns__viewport {
        margin-right: -16px;
    }

    .rn-sns__track {
        position: relative;
    }

    .rn-sns__slide {
        width: calc(100% - 16px);
    }
}

/* Auto slides: six seconds at rest, then one second in motion. */
.rn-main .rn-dept__pages,
.rn-main .rn-people__track,
.rn-main .rn-people__item,
.rn-main [data-rn-slider-track],
.rn-main [data-rn-slide] { transition-duration: 0.8s; }
.rn-main .rn-people { --rn-people-dur: 0.8s; }
.rn-main .is-in-next, .rn-main .is-in-prev,
.rn-main .is-out-next, .rn-main .is-out-prev { animation-duration: 0.8s; }
@media (prefers-reduced-motion: reduce) {
    .rn-main .rn-dept__pages, .rn-main .rn-people__track,
    .rn-main .rn-people__item, .rn-main [data-rn-slider-track],
    .rn-main [data-rn-slide] { transition-duration: 0s; }
    .rn-main .is-in-next, .rn-main .is-in-prev,
    .rn-main .is-out-next, .rn-main .is-out-prev { animation-duration: 0s; }
}