@charset "UTF-8";
/* 리뉴얼 공용 (대학교/입학/대학원). 기존 공용 CSS 와 충돌 안 나게 클래스는 rn- 접두어 */

/* =========================================================
   브레이크포인트 (모바일 우선, min-width 만)
     기본  ~767    모바일 (시안 390)
     md    768~    태블릿 세로
     lg    1024~   태블릿 가로, 작은 노트북
     xl    1440~   PC (시안 1920), PC GNB 시작
   @media 엔 변수를 못 써서 숫자 그대로. JS 는 RN.BP
   768/1024 글자 크기는 모바일~PC 시안 3등분, 가까운 짝수 px (예: 36/72 → 48, 60)
   ========================================================= */

/* Pretendard 기존 선언이 리뉴얼 페이지엔 안 들어와서 여기서 선언 */
@font-face { font-family: 'Pretendard'; src: url('/type/common/font/Pretendard-Light.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/type/common/font/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/type/common/font/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/type/common/font/Pretendard-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/type/common/font/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'S-Core Dream'; src: url('/type/common/renewal/font/S-CoreDream-6Bold.woff') format('woff'); font-weight: 600; font-display: swap; }

:root {
    --rn-font: 'Pretendard', 'Malgun Gothic', sans-serif;
    --rn-font-title: 'S-Core Dream', 'Pretendard', sans-serif;
    --rn-point: #363636;    /* 사이트별 CSS 에서 덮어씀 */

    --rn-gutter: 15px;      /* 모바일 15, PC 16 */
    --rn-max-width: 1920px; /* 이보다 넓은 화면은 가운데 정렬 */
    /* 48 고정이면 1440 에서 입학 메뉴와 유틸이 겹침 */
    --rn-gnb-gap: clamp(24px, 5vw - 48px, 48px);

    /* 화살표 호버 모션 — 사이트 CSS 에서 덮어쓸 수 있다 */
    --rn-arrow-shift: 4px;
    --rn-arrow-dur: 0.2s;

    /* 슬라이드 넘김 — 0.5~0.6s 는 휘리릭 지나간다는 의견(11/5). 메인 슬라이더 공통 */
    --rn-slide-dur: 0.9s;
    --rn-slide-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
*{
    font-family: var(--rn-font);
    font-stretch: normal; /* 기본 장평 100% */
    font-feature-settings: 'cv03' on, 'cv04' on, 'cv09' on;    
}
@media screen and (min-width: 768px) {
    :root {
        --rn-gutter: 16px;
    }
}

.rn-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--rn-max-width);
    margin: 0 auto;
    padding: 0 var(--rn-gutter);
}

/* 스크린리더 전용 */
.rn-blind {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 화살표 호버 모션 — 화살표 달린 요소는 세 사이트에서 같은 거리·속도로 민다.
     .rn-arrow        화살표가 ::after 인 요소에
     .rn-arrows       그런 링크 묶음(ul·div)에. 안의 a 전부 걸린다
     .rn-arrow__ico   화살표가 자식 요소일 때 그 자식에. 호버는 감싼 .rn-arrow 가 받는다
     .rn-arrow--self  요소 자체가 화살표 버튼일 때(배경으로 그린 경우)
   이미 transform 을 쓰는 요소(예: translateY 로 세로 가운데를 잡는 박스)에는 달지 않는다 — 그 값이 날아간다.
   그럴 땐 사이트 CSS 에서 호버 transform 에 미는 양을 같이 적는다: translate(var(--rn-arrow-shift), -50%)
   (translate 속성으로 떼어 쓰면 간단하지만 구형 브라우저 지원 밖이라 안 쓴다. 예: KOR_2027 .rn-link__item) */
.rn-arrow::after,
.rn-arrows a::after,
.rn-arrow .rn-arrow__ico,
.rn-arrow--self {
    transition: transform var(--rn-arrow-dur);
}

.rn-arrow:is(:hover, :focus-visible)::after,
.rn-arrows a:is(:hover, :focus-visible)::after,
.rn-arrow:is(:hover, :focus-visible) .rn-arrow__ico,
.rn-arrow--self:is(:hover, :focus-visible) {
    transform: translateX(var(--rn-arrow-shift));
}

/* PC(1440~)/모바일 전용. 마크업 구조가 아예 다를 때만 */
.rn-only-pc { display: none !important; }

@media screen and (min-width: 1440px) {
    .rn-only-pc { display: revert !important; }
    .rn-only-mo { display: none !important; }
}

/* 슬라이더 조작 버튼(이전·정지·다음) — 템플릿 공통 규격 24×24, 버튼 사이 간격 없음.
   선택자를 두 번 겹친 건 특이도 때문이다. 이 파일이 템플릿 CSS 보다 먼저 실려서
   한 번만 쓰면 .rn-dept__btns button 같은 기존 규칙에 밀린다 */
[data-rn-slider-prev][data-rn-slider-prev],
[data-rn-slider-toggle][data-rn-slider-toggle],
[data-rn-slider-next][data-rn-slider-next] {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
}

/* 세 버튼을 담는 묶음. .rn-people__btns 는 국문에도 같은 이름이 있지만 그쪽은
   이 버튼들이 아니라서, 입학 쪽 표시(data-rn-people)로 갈라 잡는다 */
.rn-dept__btns.rn-dept__btns,
.rn-kv__btns.rn-kv__btns,
.rn-sns__btns.rn-sns__btns,
.rn-why__btns.rn-why__btns,
[data-rn-people] .rn-people__btns {
    gap: 0;
}