@charset "utf-8";
/*
  style.css
  이 프로젝트만의 커스텀 스타일.
  반드시 output.css, font.css, swiper css '뒤에' 불러올 것.

  구성:
  1) 토큰(변수) 재정의   - KRDS 기본값을 우리 프로젝트 색상/사이즈로 덮어쓰기
  2) 컴포넌트 미세조정   - 기존 krds- 클래스의 일부 속성만 살짝 변경
  3) 프로젝트 전용 클래스 - KRDS에 없는 새 레이아웃/컴포넌트
*/

/* ------------------------------------------------------------------ */
/* 1) 토큰(변수) 재정의                                                */
/* krds_tokens.css의 :root 변수를 그대로 덮어쓰면 KRDS 컴포넌트 전체에  */
/* 일괄 반영됩니다. (버튼 색상, 포커스 아웃라인 색 등)                  */
/* ------------------------------------------------------------------ */
:root {
  /* 예시: 메인 컬러를 우리 프로젝트 색으로 바꾸고 싶을 때
  --krds-color-light-primary-50: #0b5ed7;
  */

  /* 예시: 콘텐츠 최대 너비를 프로젝트 기준으로 바꾸고 싶을 때
  --krds-contents-wrap-size: 1320px;
  */
}

/* ------------------------------------------------------------------ */
/* 0) 전역 레이아웃 안전장치                                            */
/* ------------------------------------------------------------------ */
/* .sr-hero-visual 진입 애니메이션(gsap.from(x:160, ...)) 뿐 아니라,    */
/* 스크롤로 화면에 들어올 때 옆에서 슬라이드-인하는 ScrollTrigger      */
/* 애니메이션들(.sr-business-head 등 gsap.from(el, {x: N, ...},        */
/* {scrollTrigger: ...}) 전부)이 같은 패턴의 문제를 만듦: 트리거가      */
/* 발동하기 전까지 해당 요소가 transform: translateX(N px)로 뷰포트     */
/* 오른쪽 밖까지 밀려나 있는 상태라, 그동안 문서의 가로 스크롤 폭에      */
/* 그대로 포함되어 태블릿/모바일 폭에서 가로 스크롤이 생김. 페이지      */
/* 아래로 스크롤할수록 섹션들이 하나씩 트리거되며 transform이 지워지고, */
/* 맨 밑까지 다 내리면 모든 애니메이션이 끝나 우연히 사라진 것처럼       */
/* 보이는 것도 같은 이유.                                              */
/*                                                                     */
/* 예전엔 html,body 전체에 overflow-x:hidden을 걸어 막았었는데, 이후    */
/* quick-menu 스크롤 버그 수정 과정에서 body에 explicit overflow가      */
/* 있으면 body가 자기만의 스크롤 컨테이너가 되어버려 window.scrollY    */
/* 기반 로직(quick-menu 등)이 깨진다는 걸 확인함(body는 overflow        */
/* 미지정 상태로 둬야 window로 정상 위임됨). 그렇다고 html에만 걸면     */
/* 실측 결과 실제로는 가로 스크롤이 여전히 먹혀버리는 걸 확인했음        */
/* (html/body 전파 규칙이 두 축을 함께 취급해서 x축만 따로 못 막음).     */
/* 그래서 html,body 전역 대신, 애니메이션들이 실제로 위치한 컨텐츠      */
/* 영역인 <main id="sr-main-content"> 하나에만 지역적으로 걸어서 두     */
/* 문제를 동시에 해결함. main 안에는 position:sticky 요소가 없어        */
/* (header/모바일 gnb/통합검색 모달 sticky는 전부 main 바깥) 부작용     */
/* 없이 안전함. */
#sr-main-content {
    overflow-x: hidden;
}



/* ------------------------------------------------------------------ */
/* 2) 컴포넌트 미세조정                                                */
/* 기존 krds- 클래스를 완전히 재정의하지 말고, 필요한 속성만 덮어쓰기.   */
/* ------------------------------------------------------------------ */
/* 예시:
.krds-btn.primary {
  border-radius: 8px;
}
*/


/* ------------------------------------------------------------------ */
/* 3) 프로젝트 전용 클래스 (KRDS에 없는 것들)                           */
/* ------------------------------------------------------------------ */
/* 예시:
.my-hero-section {
  padding: 80px 0;
  background-color: var(--krds-light-color-background-white);
}
*/


/* ------------------------------------------------------------------ */
/* 세종연구원 메인화면                       */
/* ------------------------------------------------------------------ */



/* .krds-main-menu .gnb-toggle-wrap {
    background-image: url(../img/component/icon/ico_gnb-toggle-wrap.png);
    background-repeat: no-repeat;
    background-size: 25.9rem;
    background-position: right bottom;
} */


/* 모바일 메뉴 1Depth 라벨: 기본값이 white-space:nowrap이라 "세종인재평생교육포털"처럼
   글자 수가 많은 항목은 줄바꿈 없이 옆(아래 항목 위)으로 삐져나가 겹쳐 보임.
   줄바꿈을 허용하고, 줄바꿈됐을 때 아래 li가 밀리도록 line-height도 같이 정리. */


.btn-more {
    width: 15.7rem;
    height: 5rem;
    border: 0.1rem solid #1E2124;
    border-radius: 999px;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    transition: var(--krds-transition-base);
    color: #1E2124;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.4rem;    
    background-color: #FFFFFF;
}

.btn-more::after {
    content: "";
    background: url(../img/component/icon/ico_more.png) no-repeat;
    width: 3.1rem;
    height: 0.8rem;
    background-size: contain;
}
.btn-more:hover {
    background-color: #1E2124;
    color: #FFFFFF;
}
.btn-more:hover::after {
    content: "";
    background: url(../img/component/icon/ico_more_white.png) no-repeat;
    background-size: contain;
}


.btn-more-dark {
    width: 15.7rem;
    height: 5rem;
    border-radius: 999px;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.4rem;        
    border: 0.1rem solid rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    transition: var(--krds-transition-base);
}
.btn-more-dark::after {
    content: "";
    background: url(../img/component/icon/ico_more_white.png) no-repeat;
    width: 3.1rem;
    height: 0.8rem;
    background-size: contain;
}
.btn-more-dark:hover, .btn-more-dark:focus {
    border: 0.1rem solid #1E2124;
    color: #1E2124;
    background-color: #FFFFFF;
}
.btn-more-dark:hover::after, .btn-more-dark:focus::after {
    content: "";
     background: url(../img/component/icon/ico_more.png) no-repeat;
    background-size: contain;
}

@media (max-width: 767px) {
    .btn-more, .btn-more-dark  {
        width: 12rem;
        height: 3.822rem;
        font-size: 1.2rem;
    }
    .btn-more::after {
        content: "";
        background: url(../img/component/icon/ico_more.png) no-repeat;
        width: 2.5rem;
        height: 0.645rem; 
        background-size: contain;
    }
    .btn-more-dark::after {
        content: "";
        background: url(../img/component/icon/ico_more_white.png) no-repeat;
        width: 2.5rem;
        height: 0.645rem; 
        background-size: contain;
    }
 
}

@media (max-width: 576px) {
    .btn-more, .btn-more-dark {
        width: 9.48rem;
        height: 2.94rem;
        font-size: 0.96rem;
        gap: 1.2rem;
    }
  
    .btn-more::after {
        content: "";
        background: url(../img/component/icon/ico_more.png) no-repeat;
        width: 1.86rem;
        height: 0.48rem; 
        background-size: contain;
    }
    .btn-more-dark::after {
        content: "";
        background: url(../img/component/icon/ico_more_white.png) no-repeat;
        width: 1.86rem;
        height: 0.48rem; 
        background-size: contain;
    }
}




.primary-badge {
    font-weight: 600;
    border-radius: 0.4rem;
    font-size: 1.7rem;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.2);
    padding-block: 0.6rem;
    padding-inline: 1rem;
}

@media (max-width: 767px) {
    .primary-badge {
        font-size: 1.4rem;
    }
    
}




/* ------------------------------------------------------------------ */
/* 캐러셀 공통: vb-swiper는 KRDS 기본 CSS에 없는 클래스라 position이     */
/* 지정 안 되어 있었음 -> 안의 prev/next 버튼이 기준점을 못 찾고         */
/* 뷰포트 우측 끝으로 튀는 버그의 원인. 전역으로 relative 지정.          */
/* ------------------------------------------------------------------ */
.vb-swiper {
    position: relative;
}

.sr-hero-text .krds-badge {
    font-family: "Roboto", var(--krds-font-family-base);
    font-weight: 700;
    font-size: 1.8rem;      /* 18px (html font-size: 62.5% 기준 1rem = 10px) */
    line-height: 1.5;       /* 150% */
    letter-spacing: 0.1em;  /* 자간 10% */
    color: #008F55;
    padding: 0;
    margin-bottom: 1.1rem;
    opacity: 0.8;
}
.sr-hero-title {
    font-size: 6.2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #1E2124;
}
.sr-hero-title > span {
    color: #008F55;
}
/* ------------------------------------------------------------------ */
/* 히어로 통합검색창 (알약형, 카테고리+인풋+원형 검색버튼)                */
/* ------------------------------------------------------------------ */
.sr-hero-in {
    display: flex;
    align-items: stretch;
    gap: 3.235rem;
}
/* 텍스트 컬럼: .inner와 동일한 좌측 정렬 위치를 계산으로 재현 */
.sr-hero-text-col {
    flex: 0 1 auto;
    width: 72rem;
    max-width: 38vw;   /* 46vw -> 38vw: 비주얼 영역에 가로 공간을 더 내어줌 */
    padding-left: max(2.4rem, calc((100% - 144rem) / 2 + 2.4rem));
    box-sizing: content-box;
    padding-top: 7.819rem;
}
.sr-hero-text {
    padding: 0;
}
.sr-hero-search {
    display: flex;
    align-items: center;
    width: 38.88rem;
    height: 6.696rem;
    padding: 0.8rem 0.875rem 0.8rem 2.4rem;
    background-color: #FFFFFF;
    border: 0.1rem solid #D4D4D4;
    border-radius: 999px;
    margin-block: 5.3rem;
}
/* 안쪽 input의 기본 outline을 제거하는 대신(알약형 디자인과 어긋나서),
   포커스가 그 안으로 들어왔을 때 알약 테두리 전체를 강조해서
   키보드 포커스가 어디 있는지 항상 보이도록 함(WCAG 2.4.7) */
.sr-hero-search:focus-within {
    border-color: #00235A;
    box-shadow: 0 0 0 0.2rem rgba(0, 35, 90, 0.25);
}

.sr-hero-search-category.krds-form-select-sort {
    flex-shrink: 0;
    height: 100%;
    background-color: transparent !important;
    background-size: 1.4rem !important; /* 화살표 아이콘 크기 - 숫자만 조절하면 됨 */
    font-family: var(--krds-font-family-base);
    font-size: 1.7rem;
    font-weight: 700;
    color: #464C53;
}
.sr-hero-search-category.krds-form-select-sort:hover,
.sr-hero-search-category.krds-form-select-sort:focus {
    background-color: transparent !important;
}

.sr-hero-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin-left: 2rem;
    border: 0;
    background: transparent;
    font-family: var(--krds-font-family-base);
    font-size: 1.7rem;
    color: #1E2124;
}
.sr-hero-search input::placeholder {
    color: #6E7490;
}
.sr-hero-search input:focus {
    outline: none;
    box-shadow: none;
}

.sr-hero-search-submit.krds-btn.icon.primary {
    flex-shrink: 0;
    width: 5.054rem;
    height: 5.054rem;
    padding: 0;
    background-color: #00235A;
    border: 0;
    border-radius: 50%;
}
.sr-hero-search-submit .ico-sch {
    background-color: #FFFFFF !important;
}

/* ------------------------------------------------------------------ */
/* 히어로 통계 (2,150+ / 1,320+ / 480+, 세로 구분선)                    */
/* ------------------------------------------------------------------ */
.sr-hero-stats {
    display: flex;
    padding: 0;
    list-style: none;
}
.sr-hero-stats li {
    text-align: center;
    padding: 0.34rem;
    height: 10.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sr-hero-stats li.divider {
    flex: 0 0 auto;
    align-self: center;
    width: 0.1rem;
    height: 10.7rem;   /* divider 길이 - 숫자만 조절하면 됨 */
    padding: 0;
    background-color: #EFEEEF;
    margin-inline: 5rem;
}
.sr-hero-stats li strong {
    display: block;
    font-family: var(--krds-font-family-base);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1E2124;
}
.sr-hero-stats li span {
    display: block;
    margin-top: 1.4rem;
    font-family: var(--krds-font-family-base);
    font-size: 3.4rem;
    font-weight: 700;
    color: #202D42;
}


.sr-hero-stats li .stats-item {
    font-weight: 500;
    font-size: 2rem;
}

/* ------------------------------------------------------------------ */
/* .sr-hero-stats 숫자 카운팅(자릿수 롤링) 효과 전용 스타일               */
/* (JS는 Sejong_Research_Main.html 하단 스크립트에서 이 구조를 만듦)      */
/*                                                                      */
/* 주의: 바로 위 ".sr-hero-stats li span"이 원래 "연구보고서 발간" 같은   */
/* 라벨 텍스트용으로 font-size:2rem, margin-top:1.4rem을 주고 있는데,    */
/* 이 규칙은 class 1개 + element 2개(li, span) 조합이라 명시도가         */
/* 아래 클래스 선택자(class 1개 + element 1개)보다 높음. 그래서 숫자      */
/* 릴/정적 문자용 <span>들도 그 규칙에 걸려서 엉뚱한 font-size·margin이   */
/* 강제로 들어가고, 그 결과 자릿수 사이 실제 간격이 JS가 계산한 값과      */
/* 완전히 달라져서 엉뚱한 숫자가 보이거나 반쯤 잘려 보이는 문제가 있었음.  */
/* → font-size/margin을 !important로 명시적으로 초기화해서 무력화함.     */
/* height/line-height는 위 규칙이 애초에 건드리지 않는 속성이라          */
/* !important 없이도 JS가 넣어주는 인라인 px 값이 정상적으로 이김.       */
/* ------------------------------------------------------------------ */
.sr-hero-stats li strong {
    display: inline-flex !important;
    align-items: flex-start;
    line-height: 1;
}
.sr-stat-reel-wrap {
    display: inline-block !important;
    overflow: hidden !important;
    height: 1em; /* JS가 정확한 px로 덮어씀 */
    line-height: 1;
    vertical-align: top;
    margin: 0 !important;
    font-size: inherit !important;
}
.sr-stat-reel {
    display: flex !important;
    flex-direction: column !important;
    will-change: transform;
    margin: 0 !important;
    font-size: inherit !important; /* 릴도 <span> 이라 '.sr-hero-stats li span' 글자 크기가 걸려, 칸(1em) 높이가 숫자 크기와 어긋났음 */
}
.sr-stat-reel span {
    display: block !important;
    height: 1em; /* JS가 정확한 px로 덮어씀 */
    line-height: 1;
    text-align: center;
    margin: 0 !important;          /* 위 ".sr-hero-stats li span"의 margin-top:1.4rem 무력화 */
    font-size: inherit !important; /* 위 규칙의 font-size:2rem 무력화 - strong의 font-size를 그대로 물려받게 함 */
}
.sr-stat-static {
    display: inline-block !important;
    height: 1em; /* JS가 정확한 px로 덮어씀 */
    line-height: 1;
    vertical-align: top;
    margin: 0 !important;
    font-size: inherit !important;
}

/* ------------------------------------------------------------------ */
/* 히어로 바로가기 아이콘 5개 (포털/장학금/공직자/평생교육/정책연구)      */
/* ------------------------------------------------------------------ */
.sr-hero-quicklinks {
    display: flex;
    margin: 7.5rem 0 0;
    padding: 0;
    list-style: none;
    gap: 4.8rem;
}
.sr-hero-quicklinks li {
    flex: 1;
    text-align: center;
    width: 11rem;
}
.sr-hero-quicklinks li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    transition: var(--krds-transition-base);
}
.sr-hero-quicklinks li a:hover span {
    font-weight: 700;
    color: #008F55;
}
.sr-hero-quicklinks li .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
}
.sr-hero-quicklinks li .ico img {
    max-width: 4.805rem;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.sr-hero-quicklinks li span {
    font-family: var(--krds-font-family-base);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    color: #333333;
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* 히어로 우측 비주얼 (좌상단 곡선 + 좌하단 대각선 + 그린 코너 + 컨트롤)  */
/* ------------------------------------------------------------------ */
.sr-hero-visual {
    position: relative;
    flex: 1;
    min-width: 0;
    max-height: 74.1rem;
}
.sr-hero-visual-form {
    position:absolute;
}
.sr-hero-swiper {
    position: relative;
    height: 100%;   /* 부모 .sr-hero-visual 높이(텍스트 컬럼과 stretch로 맞춰짐)를 그대로 채움 */
    min-height: 74.1rem;   /* 텍스트가 짧아도 최소 이 높이는 유지 */
    /* 좌상단 곡선이 좌하단 대각선으로 끊김 없이 바로 이어지도록
       하나의 clip-path 경로로 처리 (objectBoundingBox 단위 - 비율 유지) */
    clip-path: url(#heroVisualClip);
    overflow: hidden;
}
.sr-hero-swiper .swiper,
.sr-hero-swiper .swiper-wrapper,
.sr-hero-swiper .swiper-slide {
    height: 100%;
}
.sr-hero-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 그린 코너 배지 */
.sr-hero-visual-corner {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 30.3rem;
    height: 40.7rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    /* 삼각형 배경/클리핑은 ::before로 분리했음 - clip-path가 걸린 채로
       이 요소 자체에 :focus outline/box-shadow를 그리면 삼각형 바깥으로
       벗어나는 부분(특히 잘려나간 모서리 쪽)이 통째로 같이 클리핑되어
       포커스 표시가 거의 안 보이는 문제가 있었음. */
}
.sr-hero-visual-corner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #007A33;
    /* 우하단 삼각형 모양 - 박스 전체(가로/세로)를 꽉 채움 */
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

.sr-hero-visual-corner:focus {
   outline: 0.2rem solid var(--krds-light-color-border-inverse);
  outline-offset: 0.2rem;
  box-shadow: var(--krds-box-shadow-outline);
  transition: outline 0s, box-shadow 0s !important;
}


.sr-hero-visual-corner::after {
    content: "";
    background: url(../img/component/icon/ico_more_white.png) no-repeat;
    width: 8.253rem;
    height: 2.13rem;
    background-size: contain;
    position: absolute;
    right: 5rem;
    bottom: 5rem;
}

.sr-hero-visual-corner .tit {
    font-family: var(--krds-font-family-base);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #FFFFFF;
    text-align: right;
    position: absolute;
    bottom: 10rem;
    right: 5rem;
}

/* ------------------------------------------------------------------ */
/* 히어로 레이아웃 반전 modifier (세종인재평생교육포털: 비주얼 좌측,       */
/* 텍스트 우측 - 세종연구원 메인과 좌우가 거울처럼 뒤집힌 구성)           */
/* ------------------------------------------------------------------ */
.sr-hero-in.reverse {
    flex-direction: row-reverse;
}
.sr-hero-in.reverse .sr-hero-text-col {
    padding-left: 0;
    padding-right: max(2.4rem, calc((100% - 144rem) / 2 + 2.4rem));
}
.sr-hero-in.reverse .sr-hero-swiper {
    clip-path: url(#heroVisualClipReverse);
}
.sr-hero-in.reverse .sr-hero-visual-corner {
    right: auto;
    left: 0;
    align-items: flex-end;
    justify-content: flex-start;
}
.sr-hero-in.reverse .sr-hero-visual-corner::before {
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}
.sr-hero-in.reverse .sr-hero-visual-corner::after {
    right: auto;
    left: 5rem;
}
.sr-hero-in.reverse .sr-hero-visual-corner .tit {
    text-align: left;
    right: auto;
    left: 5rem;
}
.sr-hero-in.reverse .sr-hero-swiper .swiper-indicator {
    left: auto;
    right: 32%;
}


/* 이전/다음 버튼: swiper-bundle.min.css가 자동으로 낚아채는 이름
   (swiper-button-prev/next)을 아예 안 쓰고 sr-hero-prev/next라는
   전용 클래스로 분리 -> 외부 라이브러리의 position:absolute 규칙이
   원천적으로 적용될 일이 없음 (충돌 자체가 불가능) */
.sr-hero-prev,
.sr-hero-next {
    position: static;
}

/* 하단 컨트롤 바 (페이지네이션 + 재생·정지 + 이전·다음 + 확대) */
.sr-hero-swiper .swiper-indicator {
    position: absolute;
    left: 32%;
    bottom: 4rem;
    z-index: 3;
    gap: 0.8rem;
}
/* KRDS 기본 알약 배경 제거 - 점만 깔끔하게 보이도록
   - 흰 배경 슬라이드 위에서도 경계가 보이게 옆 버튼(.sr-ctrl-btn)과 같은 회색 테두리
   - 점이 4~5개 이상일 때 양 끝 점이 테두리에 붙지 않게 좌우 안쪽 여백 */
.sr-hero-swiper .swiper-indicator .swiper-pagination {
    box-sizing: border-box;
    padding: 0 1.2rem;
    border: 0.1rem solid #CDD1D5;
    background-color: #FFFFFF;
    min-width: 6.4rem;
    position: static;
}
.sr-hero-swiper .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #008F55;
}

/* 재생/정지, 확대 버튼 - 외부 아이콘 파일에 의존하지 않는 인라인 SVG 버튼 */
.sr-ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--krds-size-height-6);
    height: var(--krds-size-height-6);
    flex-shrink: 0;
    border-radius: 999px;
    border: 0.1rem solid #CDD1D5;
    background-color: #FFFFFF;
    color: #33363D;
}
.sr-ctrl-btn:hover {
    background-color: #F4F5F6;
}



/* ------------------------------------------------------------------ */
/* 연구 아카이브  */
/* ------------------------------------------------------------------ */
.sr-archive {
    padding-block: 10rem;
}

/* krds_tab 스크립트가 요구하는 DOM 구조(.krds-tab-area.layer 의 직계 자식으로
   .tab / .tab-conts-wrap이 와야 함) 때문에, 시각적인 좌/우 2단 배치는
   DOM 순서가 아니라 CSS Grid의 grid-area로 재배치한다. */
.sr-archive-in {
    display: grid;
    grid-template-columns: 31.5rem 1fr;
    column-gap: 14.5rem;
    row-gap: 0;
    grid-template-areas:
        "head    featured"
        "tab     featured"
        "more    list"
        "more    list";
}
.sr-archive-head {
    grid-area: head;
}
.sr-archive-in > .tab {
    grid-area: tab;
    margin-top: 4rem;
    /* margin-bottom을 여기 두면 안 됨: .tab은 2행(row2)에 있는데, 이
       2행은 .sr-archive-featured(1~2행에 걸침, 오른쪽 컬럼)와 공유됨.
       .tab에 margin-bottom을 주면 grid가 2행 트랙 자체를 그만큼
       늘려버려서, featured 쪽에는 필요 없는 여백이 featured 밑에
       고스란히 남아 list와의 간격이 tab-conts-wrap의 margin-top보다
       훨씬 넓어 보이는 원인이 됐음. tab→more 사이 여백은 아래
       .btn-more의 margin-top으로 옮겨서(3행은 오른쪽과 트랙을 공유해도
       list는 이미 자기 margin-top이 있어 문제되지 않음) 왼쪽 컬럼의
       시각적 간격은 그대로 유지하면서 오른쪽에 영향이 안 가게 함. */
}
.sr-archive-in > .btn-more {
    grid-area: more;
    align-self: start;
    margin-top: 5rem;
}
.sr-archive-in > .sr-archive-featured {
    grid-area: featured;
}
.sr-archive-in > .tab-conts-wrap {
    grid-area: list;
    margin-top: 6.4rem;
}
/* 탭 6개가 좁은 왼쪽 컬럼 안에서 스크롤 없이 한 줄에 들어오도록
   KRDS 기본 min-width(6.4rem)/패딩/간격을 줄임 */
.sr-archive-in > .tab > ul {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sr-archive-in > .tab .btn-tab {
    min-width: auto;
    padding: 0;
    line-height: 1.5;
    font-weight: 500;
    color: #757575; /* WCAG AA 대비 4.5:1 이상 확보(기존 #999999는 2.85:1로 미달) */
    font-size: 2rem;
}
.sr-archive-in > .tab .btn-tab:focus {
    outline-offset: 0.2rem;
}
.sr-archive-in > .tab .active .btn-tab {
    color: #1E2124;
    font-weight: 700;
}

.sr-archive-in .tab.line .btn-tab:before {
    background-color: #1E2124;
    height: 0.1rem;
}

/* krds_tab 스크립트가 켜는 .active만 보이도록 */
.sr-archive-in > .tab-conts-wrap .tab-conts {
    display: none;
}
.sr-archive-in > .tab-conts-wrap .tab-conts.active {
    display: block;
}

.sr-archive-head .sr-eyebrow {
    color: #1E2124;
    font-weight: 700;
    font-size: 5.4rem;
    line-height: 1.3;
    letter-spacing: -0.1rem;
    max-width: 20rem;
}
.sr-archive-head .sr-desc {
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1.5;
    color: #1E2124;
    margin-top: 1.2rem;
}
.sr-archive-in > .btn-more .svg-icon {
    width: 1.4rem;
    height: 1.4rem;
    background-color: #1E2124;
}

/* 강조 카드 */
.sr-archive-featured {
    position: relative;
    display: block;
    padding-inline: 6rem;
    padding-block: 4.2rem;
    /* 카드 높이가 안에 든 글 길이에 딸려 다녔다. 소제목이 없는 글이 걸리면
       294px -> 206px 로 쭈그러들어 시안과 달라 보인다. 바닥만 잡아 둔다.
       height 로 못 박으면 반대로 제목이 길 때 글자가 박스를 넘친다 */
    min-height: 29.4rem;
    background-color: #00235A;
    border-radius: 1.2rem;
    overflow: hidden;
}

.sr-archive-featured-title {
    margin-top: 0.8rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #FFFFFF;
    max-width: 52rem;
}
.sr-archive-featured-divider {
    width: 52.3rem;
    height: 0.1rem;
    margin-block: 2.4rem;
    background-color: rgba(255, 255, 255, 0.2);
}
.sr-archive-featured-meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0;
    line-height: 1.2;
    list-style: none;
    font-size: 1.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    max-width: 52rem;
}
.sr-archive-featured-thumb {
    position: absolute;
    right: 6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 17.7rem;
    height: 25rem;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 1rem 1rem rgba(255, 255, 255, 0.1);
    background: url(../img/archive_sample.png) no-repeat;
    background-size: cover;
}

/* 2단 리스트 (탭마다 내용이 바뀌는 부분) */
.sr-archive-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 6rem 6.4rem;
}

.sr-archive-list li a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1.2rem;
    transition: var(--krds-transition-base);
}
.sr-archive-list li a:hover .tit {
    text-decoration: underline;
}
.sr-archive-list .cate {
    font-size: 1.9rem;
    line-height: 1.5;
    font-weight: 700;
    display: flex;
    align-items: center;
}
.sr-archive-list .cate::after {
    content: "";
    display: inline-block;
    width: 0.1rem;
    height: 1.6rem;
    margin-left: 1.2rem;
    background-color: #CCCCCC;
}
.sr-archive-list .cate-issue {
    color: #008F55;
}
.sr-archive-list .cate-policy {
    color: #008F55;
}
.sr-archive-list .cate-basic {
    color: #008F55;
}
.sr-archive-list .cate-strategy {
    color: #008F55;
}
.sr-archive-list .cate-etc {
    color: #008F55;
}
/* .sr-archive-list .cate-issue {
    color: #B8752E;
}
.sr-archive-list .cate-policy {
    color: #2E5AAC;
}
.sr-archive-list .cate-basic {
    color: #008F55;
}
.sr-archive-list .cate-strategy {
    color: #7B4CB8;
}
.sr-archive-list .cate-etc {
    color: #6E7490;
} */
.sr-archive-list .date {
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
}
.sr-archive-list .tit {
    flex-basis: 100%;
    margin-top: 1.6rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}
/* ------------------------------------------------------------------ */
/* 지식이 연결되는 변화 (coverflow 캐러셀)                              */
/* ------------------------------------------------------------------ */
.sr-connect {
    padding-block: 9.85rem 19.5rem;
}
.sr-connect .sr-eyebrow {
    color: #1E2124;
    font-weight: 500;
    font-size: 3.4rem;
    line-height: 1;
}
.sr-connect-in {
    text-align: center;
}
.sr-connect-title {
    margin-top: 1.6rem;
    font-size: 5.4rem;
    font-weight: 700;
    line-height: 1;
    color: #1E2124;
}
.sr-desc.ac {
    margin-top: 3.2rem;
    font-size: 2.2rem;
    color: #1E2124;
}

.sr-connect-swiper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6rem;
    height: 55rem;
    overflow: hidden;
    /* 카드끼리 살짝 겹치도록 (겹침 정도는 카드 margin에서 조절) */
}

/* 카드: flex item으로 두고, 좌우 배치는 order(JS가 지정)에 완전히 맡김
   - pixel 단위 translateX 계산이 없어서 좌우가 뒤바뀌는 등의 계산 오류가 날 수 없음 */
.sr-connect-card {
    flex: 0 0 auto;
    width: 60.4rem;
    height: 55rem;
    margin: 0 -9rem;   /* 카드끼리 겹치는 정도 - 숫자(음수)를 줄이면 덜 겹치고 늘리면 더 겹침 */
    border-radius: 1.6rem;
    overflow: hidden;
    cursor: pointer;
    /* Figma 드롭섀도우: #000000 10%
       box-shadow 대신 filter: drop-shadow() 사용 -
       border-radius + overflow:hidden + box-shadow 조합은 Safari/WebKit에서
       그림자가 둥근 모서리를 무시하고 사각형으로 그려지는 버그가 있음.
       drop-shadow는 실제 렌더링된(이미 둥글게 잘린) 모양을 기준으로 그림자를
       만들기 때문에 이 문제가 발생하지 않음. */
    /* filter: drop-shadow(0 0.6rem 1.4rem rgba(0, 0, 0, 0.22)); */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, order 0s;
    transition: var(--krds-transition-base);
}
.sr-connect-card:hover .sr-connect-card-more {
    background-color: #ffffff;
}
/* 카드 자체는 포커스를 못 받는 div라, 안의 "자세히 보기" 링크에 키보드
   포커스가 가면 카드 전체에 테두리를 둘러줘서 "여기로 이동했다"가
   확실히 보이게 함. 카드 배경이 사진이라 색 하나로는 배경에 묻힐 수
   있어서 흰색+어두운색 이중 링을 씀(.sr-business-card와 동일 이유). */
/* .sr-business-card와 동일한 이유: box-shadow를 카드 자신에 걸면 안의
   <img>와 ::after(그라데이션)가 그 위에 그려져서 가려짐. ::after로
   옮겨서 이미지 위에 확실히 보이게 함. */
/* 예전엔 :focus-within 이라 마우스로 카드를 눌러도(안의 링크가 포커스를 받음)
   흰색+검정 1.4rem 두께의 테두리가 생겼음 → 키보드(Tab)로 이동했을 때만 보이게
   :has(:focus-visible) 로 바꾸고, 두께도 다른 카드(.sr-business-card)와 같은
   0.4rem 파란 선으로 맞춤 */
.sr-connect-card:has(:focus-visible)::after {
    box-shadow: inset 0 0 0 0.4rem #256ef4;
}
.sr-connect-card:hover .sr-connect-card-more:after {
    content: "";
    background: url(../img/component/icon/ico_arrow_next.png) no-repeat;
    width: 2.4rem;
    height: 1.8rem;
    background-size: contain;
}
.sr-connect-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sr-connect-card::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Figma 선형 그라데이션: #000000 80% -> 0% -> 0% (텍스트가 상단이라 위쪽을 진하게) */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    transition: var(--krds-transition-base);
}
.sr-connect-card .txt {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 2.8rem 4.5rem 2.8rem 4.5rem;
    text-align: left;
}
.sr-connect-card .tit {
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.6;
    color: #FFFFFF;
    word-break: break-all;
}
.sr-connect-card .desc {
    margin-top: 2rem;
    font-size: 2.4rem;
    line-height: 1.5;
    color: #FFFFFF;
    /* 활성(중앙) 카드가 아니면 설명은 숨김 */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: var(--krds-transition-base);
}
.sr-connect-card-more {
    position: absolute;
    right: 4rem;
    bottom: 4rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: var(--krds-transition-base);
}
.sr-connect-card-more:after {
    content: "";
    background: url(../img/component/icon/ico_arrow_next_white.png) no-repeat;
    width: 2.4rem;
    height: 1.8rem;
    background-size: contain;
}


/* 중앙(활성) 카드만 설명 노출 + 살짝 더 진하게, 나머지는 어둡게 */

.sr-connect-card.is-active .desc {
    opacity: 1;
    max-height: 10rem;
    margin-top: 1rem;
}
.sr-connect-card.is-active .sr-connect-card-more {
    opacity: 1;
}
.sr-connect-card:not(.is-active)::after {
    background: rgba(0, 0, 0, 0.22);
}
/* ------------------------------------------------------------------ */
/* 최신 간행물 (다크 배경, 탭 + 좌측 큰카드 + 우측 3단 리스트)             */
/* ------------------------------------------------------------------ */
.sr-publication {
    position: relative;
    overflow: hidden;
    padding: 8rem 0;
    background-color: #00235A;
    padding-top: 20.5rem;
    padding-bottom: 19.5rem;
}
.sr-publication::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url(../img/sr-publication_background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    mix-blend-mode: luminosity;
    pointer-events: none;
}
.sr-publication > .inner {
    position: relative;
    z-index: 1;
}
.sr-publication .sr-connect-title {
    margin: 0 auto;
}
.sr-publication .sr-connect-title.on-dark {
    color: #FFFFFF;
}

/* 탭: 다크 배경 위에서도 잘 보이게 */
.sr-publication .tab.line {
    width: 100%;
    margin-top: 0.8rem;
    justify-content: flex-start;
}
.sr-publication .tab.line ul {
    justify-content: flex-start;
    gap: 1.2rem;
    padding-inline: 0;
    flex-wrap: wrap;
    overflow: visible;
}
.sr-publication .tab.line .btn-tab {
    position: relative;
    display: inline-grid;
    box-sizing: border-box;
    border: 0.1rem solid transparent;
    line-height: 1.5;
    font-size: 2rem;
    white-space: nowrap;
}
.sr-publication .tab.line .btn-tab .label {
    grid-area: 1 / 1;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}
/* 보이지 않는 bold 사본을 같은 자리에 겹쳐 쌓아서, 실제 글자(.label)가
   700으로 바뀌어도 버튼이 차지하는 폭(grid 셀 크기)이 항상 bold 기준으로
   미리 예약되어 있도록 함 -> active/focus 전환 시 폭 변화로 인한
   탭 목록 흔들림을 방지 */
.sr-publication .tab.line .btn-tab::after {
    content: attr(data-label);
    grid-area: 1 / 1;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    font-weight: 700;
}
.sr-publication .tab.line .btn-tab::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.1rem;
    background-color: transparent;
}
.sr-publication .tab.line .active .btn-tab .label,
.sr-publication .tab.line .btn-tab:focus .label {
    color: #FFFFFF;
    font-weight: 700;
}
.sr-publication .tab.line .active .btn-tab::before {
    background-color: #FFFFFF;
}

.sr-publication .tab-conts-wrap {
    margin-top: 4rem;
}
.sr-publication .tab-conts {
    display: none;
    border: 0.1rem solid rgba(255, 255, 255, 0.5);
    border-radius: 1.6rem;
    padding-inline: 6rem;
    padding-block: 6rem;
    background-color: rgba(255, 255, 255, 0.05);

}
.sr-publication .tab-conts.active {
    display: block;
}
.sr-publication .tab .btn-tab:not(:disabled):hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 1); 
}

/* 모바일 셀렉트박스 트리거 버튼: 767px 이하에서만 노출 (기본값 숨김) */
.sr-publication .tab-select-trigger {
    display: none;
}


.sr-pub-empty {
    padding: 6rem 0;
    text-align: center;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.5);
}

/* 레이아웃: 좌측 큰 카드 + 우측 3단 리스트 */
.sr-pub-layout {
    display: flex;
    gap: 6rem;
}

/* 좌측 큰 카드 */
.sr-pub-featured {
    flex: 0 0 66rem;
    width: 66rem;
    display: flex;
    gap: 5rem;
    transition: var(--krds-transition-base);
}
.sr-pub-featured:hover .tit {
    text-decoration: underline;
}
.sr-pub-featured img {
    flex-shrink: 0;
    align-self: center;   /* 추가 */
    width: 32rem;
    /* aspect-ratio: 3 / 4; */
}

.sr-pub-featured .txt {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block: 4.8rem;
}


.sr-pub-featured .tit {
    margin-top: 0.8rem;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.5;
    color: #FFFFFF;
}
.sr-pub-featured .date {
    margin-top: auto;
    font-size: 2rem;
    color: #ffffff;
}

.sr-publication-divider {
    flex-shrink: 0;
    width: 0.1rem;
    background-color: rgba(255, 255, 255, 0.2);
}

/* 우측 3단 리스트 */
.sr-pub-list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sr-pub-list li {
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
    padding-bottom: 2rem;
}
.sr-pub-list li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.sr-pub-list li a {
    display: flex;
    gap: 1.6rem;
    align-items: stretch;
}

.sr-pub-list li a:hover .tit {
    text-decoration: underline;
}

.sr-pub-list li a img {
    flex-shrink: 0;
    width: 10.6rem;
    object-fit: cover;
}

.sr-pub-list .txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-block: 0.8rem;
}
.sr-pub-list .badge {
    font-size: 1.9rem;
    font-weight: 500;
    color: #47DA95;
    line-height: 1.5;
}
.sr-pub-list .tit {
    margin-top: 0.4rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #FFFFFF;
}
.sr-pub-list .date {
    margin-top: auto;
    padding-top: 0.8rem;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* 오늘의 세종 (탭 + 고정 썸네일 카드 2개 + 탭별 텍스트 리스트)             */
/* .sr-archive-in과 동일한 grid-area 재배치 패턴을 사용:                  */
/* DOM 순서(krds_tab이 요구하는 .tab / .tab-conts-wrap 구조)와            */
/* 시각적 좌/우 2단 배치를 CSS Grid로 분리.                              */
/* ------------------------------------------------------------------ */
.sr-today {
    padding-block: 20rem;
}
.sr-today-in {
    display: grid;
    grid-template-columns: 31.5rem 1fr;
    column-gap: 14.5rem;
    row-gap: 0;
    grid-template-areas:
        "head    thumbs"
        "tab     thumbs"
        "more    list"
        "more    list";
}
.sr-today-head {
    grid-area: head;
}
.sr-today-head .tit {
    color: #1E2124;
    font-weight: 700;
    font-size: 5.4rem;
    line-height: 1.3;
    letter-spacing: -0.1rem;
}
.sr-today-head .desc {
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1.5;
    color: #1E2124;
    margin-top: 1.2rem;
}

.sr-today-in > .tab {
    grid-area: tab;
    margin-top: 4rem;
    /* margin-bottom을 여기 두지 않음 - .sr-archive-in > .tab과 동일한
       이유(간격 통일 참고): .tab은 2행에 있고 이 행은
       .sr-today-thumb-list(1~2행에 걸침, 오른쪽 컬럼)와 공유되므로,
       margin-bottom을 주면 grid가 2행 트랙을 그만큼 늘려버려서
       thumb-list 밑에 불필요한 여백이 남아 list와의 간격이
       tab-conts-wrap의 margin-top보다 더 벌어져 보임. tab→more 사이
       여백은 .btn-more의 margin-top으로 옮김. */
}
.sr-today-in > .tab > ul {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sr-today-in > .tab .btn-tab {
    min-width: auto;
    padding: 0;
    line-height: 1.5;
    font-weight: 500;
    color: #757575; /* WCAG AA 대비 4.5:1 이상 확보(기존 #999999는 2.85:1로 미달) */
    font-size: 2rem;
}
.sr-today-in > .tab .btn-tab:focus {
    outline-offset: 0.2rem;
}
.sr-today-in > .tab .active .btn-tab {
    color: #1E2124;
    font-weight: 700;
}
.sr-today-in .tab.line .btn-tab:before {
    background-color: #1E2124;
    height: 0.1rem;
}

.sr-today-in > .btn-more {
    grid-area: more;
    align-self: start;
    margin-top: 5rem;
}
.sr-today-in > .btn-more .svg-icon {
    width: 1.4rem;
    height: 1.4rem;
    background-color: #1E2124;
}

/* 썸네일 카드 2개: 탭과 무관하게 항상 고정 노출
   - 이미지 높이를 제한해서(max-height) head+tab 영역이 grid row-span 때문에
     억지로 늘어나지 않도록 함 (.sr-archive-featured 카드가 암묵적으로 갖고 있던
     "왼쪽 컬럼과 비슷한 높이" 제약을 명시적으로 부여) */
.sr-today-in > .sr-today-thumb-list {
    grid-area: thumbs;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 그리드 아이템의 기본 min-width는 auto(=내용의 min-content 크기)라서,
       1fr 트랙이라도 내용(이미지 등)의 최소 크기보다는 못 줄어들고 그 밑에서
       버티다가 넘쳐버림(그리드 blowout). 0으로 낮춰서 실제로 줄어들게 함. */
    min-width: 0;
}
.sr-today-thumb-list li a {
    display: block;
    transition: var(--krds-transition-base);
}
.sr-today-thumb-list li a:hover .tit {
    text-decoration: underline;
}
.sr-today-thumb-list img {
    display: block;
    width: 100%;
    height: 29.7rem;
    object-fit: cover;
    border-radius: 1.6rem;
}
.sr-today-thumb-list .cate {
    display: inline-flex;
    align-items: center;
    margin-top: 2rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: #008F55;
}
.sr-today-thumb-list .cate::after {
    content: "";
    display: inline-block;
    width: 0.1rem;
    height: 1.6rem;
    margin-left: 1.2rem;
    background-color: #CCCCCC;
}
.sr-today-thumb-list .date {
    display: inline-block;
    margin-top: 2rem;
    margin-left: 0.8rem;
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
}
.sr-today-thumb-list .tit {
    display: block;
    margin-top: 1.6rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}

/* 탭별 콘텐츠: krds_tab 스크립트가 켜는 .active만 보이도록 */
.sr-today-in > .tab-conts-wrap {
    grid-area: list;
    margin-top: 6.4rem;
    /* .sr-today-thumb-list와 동일한 이유(grid blowout 방지) */
    min-width: 0;
}
.sr-today-in > .tab-conts-wrap .tab-conts {
    display: none;
}
.sr-today-in > .tab-conts-wrap .tab-conts.active {
    display: block;
}

/* 텍스트만 있는 게시판 리스트 (탭마다 내용이 바뀌는 부분) */
.sr-today-text-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sr-today-text-list li {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding-block: 3rem;
    border-bottom: 0.1rem solid #CCCCCC;
}
.sr-today-text-list .cate {
    flex: 0 0 auto;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #008F55;
}
.sr-today-text-list .tit {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    transition: var(--krds-transition-base);
}
.sr-today-text-list li:hover .tit {
    text-decoration: underline;
}
.sr-today-text-list .date {
    flex: 0 0 auto;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
}

/* ------------------------------------------------------------------ */
/* 세종인재평생교육원 배너 (전체폭 배경 비디오 + 좌측 카피 + 버튼)          */
/* ------------------------------------------------------------------ */
.sr-edu-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 62rem;
    overflow: hidden;
}
.sr-edu-banner .btn-more-dark {
    margin-top: 4.6rem;
}

.sr-edu-banner-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 좌측 텍스트 가독성을 위한 그라데이션 - 왼쪽은 진하게, 오른쪽으로 갈수록 투명 */
.sr-edu-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 32%, rgba(0, 0, 0, 0) 62%);
}
.sr-edu-banner-in {
    position: relative;
    z-index: 2;
    width: 100%;
}

.sr-edu-banner-in .kdu-banne-title {
    color: #FFFFFF;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
}
.sr-edu-banner-in .tit {
    margin-top: 1.2rem;
    font-size: 5.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* 사업·연구 / 학술·교육 (2단 카드 캐러셀)                              */
/* ------------------------------------------------------------------ */
/* ============================================================ */
/* 7. 사업·연구 / 학술·교육 (sr-business)                       */
/* ============================================================ */
.sr-business {
  padding-block: 14rem 16rem;
}

/* 2단 좌우 배치 */
.sr-business-in {
  display: flex;
  gap: 4rem;
  
}

/* Flex 자식 영역 내 Swiper 폭 터짐 방지 (min-width: 0 필수!) */
.sr-business-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 상단 타이틀 & 컨트롤러 헤더 */
.sr-business-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.4rem;
}

.sr-business-head h3 {
  font-size: 3.4rem;
  font-weight: 700;
  color: #1E2124;
}

/* 커스텀 네비게이션 컨테이너 */
.sr-business-nav {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.sr-business-nav .cnt {
  font-size: 1.7rem;
  font-weight: 600;
  color: #1E2124;
  text-align: center;
  border: 0.1rem solid #CDD1D5;
  background-color: #ffffff;
  padding-inline: 1.6rem;
  border-radius: 999rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr-business-nav .cnt .num {
  color: #008F55;
}

/* Swiper 기본 절대위치(absolute) 및 스타일 리셋 */
.sr-business-nav .swiper-button-prev,
.sr-business-nav .swiper-button-next {
  position: static;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  margin: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid #ddd;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sr-business-nav .swiper-button-prev svg, .sr-business-nav .swiper-button-next svg {
    width: 1.6rem;
}

/* Swiper 기본 폰트 화살표(::after) 제거 */
.sr-business-nav .swiper-button-prev::after,
.sr-business-nav .swiper-button-next::after {
  display: none;
}

/* 커스텀 SVG 화살표 배경 적용 */
.sr-business-nav .swiper-button-prev {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8L10 13' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center;
}

.sr-business-nav .swiper-button-next {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 3L11 8L6 13' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center;
}

.sr-business-nav .swiper-button-prev:hover,
.sr-business-nav .swiper-button-next:hover {
  background-color: #F4F5F6;
}

.sr-business-nav .swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 인기강좌/최신강좌/프로그램 캐러셀에 추가된 정지·재생(.swiper-button-stop),
   전체보기(.swiper-button-more) 버튼을 기존 이전/다음(.swiper-button-prev/next)
   버튼과 같은 4rem 원형 크기로 맞춤 */
.sr-business-nav .sr-ctrl-btn {
  width: 4rem;
  height: 4rem;
}

/* Swiper 영역 */
.sr-business-swiper,
.sr-academy-swiper {
  width: 100%;
  overflow: hidden;
}

.sr-business-swiper .swiper,
.sr-academy-swiper .swiper {
  width: 100%;
}

/* 카드 UI 커스텀: 사진 전체 배경 + 남색 그라데이션 오버레이 + 흰색 텍스트 */
.sr-business-card {
  position: relative;
  display: block;
  height: 31rem;
  border-radius: 1.6rem;
  overflow: hidden;
  text-decoration: none;
  transition: var(--krds-transition-base);
}
/* .sr-business-card 자신의 overflow:hidden은 자기 outline까지 자르진
   않지만(직접 테스트로 확인함), 이 카드를 감싸는 .sr-business-swiper에도
   overflow:hidden이 걸려있어서, 바깥쪽으로 나가는 outline/box-shadow는
   그 부모 선에서 잘려버림. 그래서 안쪽으로(음수 offset) 넣어야 함.
   또한 카드 배경 자체가 짙은 남색 사진이라 남색 계열 단일 링은 배경에
   묻혀 거의 안 보였음 - 흰색+어두운색 이중 링으로 바꿔서 사진이 밝든
   어둡든 최소 하나는 항상 뚜렷하게 보이도록 함. 프레임워크 변수
   (`--krds-box-shadow-outline`)는 안 씀 - output.css가 @import하는
   krds_tokens.css 체인에 값이 비어있어서 변수를 쓰면 아예 안 보임. */
/* box-shadow를 .sr-business-card 자신에 걸면, 카드 안의 <img>(불투명
   사진)와 ::after(그라데이션 오버레이)가 둘 다 그 위에 그려지면서
   완전히 덮어버려서 안 보였음(box-shadow는 배경/테두리 레이어라 자식
   요소가 그 위에 칠해짐). ::after는 이미 이미지 위에 그려지는
   가상요소라서, 포커스 링을 여기로 옮기면 이미지 위에 확실히 보임. */
.sr-business-card:focus-visible::after { /* 마우스 클릭 때는 링 숨김, 키보드일 때만 */
    box-shadow:
        inset 0 0 0 0.4rem #256ef4;
}
.sr-business-card:hover .btn-more-dark {
    border: 0.1rem solid #1E2124;
    color: #1E2124;
    background-color: #FFFFFF;
}
.sr-business-card:hover .btn-more-dark::after {
    content: "";
     background: url(../img/component/icon/ico_more.png) no-repeat;
    background-size: contain;
}


.sr-business-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 0;
  transition: transform 0.3s ease;
}
.sr-business-card:hover img {
  transform: scale(1.05);
}

.sr-business-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 35, 90, 0.85) 0%, rgba(0, 35, 90, 0.55) 40%, rgba(0, 35, 90, 0.25) 100%);
}

.sr-business-card .tit {
  position: absolute;
  top: 5rem;
  left: 5rem;
  right: 5rem;
  z-index: 1;
  font-size: 2.8rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.5;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-business-card .desc {
  position: absolute;
  top: 10rem;
  left: 5rem;
  right: 5rem;
  z-index: 1;
  font-size: 2rem;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 0;
}

.sr-business-card .btn-more-dark {
  position: absolute;
  left: 5rem;
  bottom: 5rem;
  z-index: 1;
}


/* ================================================================ */
/* 반응형: 태블릿 (~1023px) / 모바일 (~767px)                          */
/* #sr-main-content 내 각 section을 순서대로 대응                       */
/* breakpoint는 output.css(프레임워크)가 실제 쓰는 기준(1023px/767px)에 */
/* 맞춤. .tab > ul은 프레임워크가 기본으로 overflow-x:auto를 이미       */
/* 적용하고 있어 별도 처리 불필요 (여백만 프로젝트 톤에 맞게 보정)        */
/* 참고: 목업 이미지 기준 1차 작업 - 실기기 확인 후 세부 수치는 조정 필요 */
/* ================================================================ */

/* -------------------------------------------------------------- */
/* 1. 히어로                                                        */
/* -------------------------------------------------------------- */

@media (max-width: 1200px) {
    .hero-swiper .swiper-indicator {
        left: 28%;
    }
    .sr-hero-text-col {
        padding-top: 3.4rem;
    }
}
@media (max-width: 1023px) {
    
    .sr-hero-in {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* .sr-hero-text-col / .sr-hero-text 래퍼를 display:contents로 "투명화"해서
       안에 중첩되어 있던 배지/제목/검색폼/통계/퀵링크가 .sr-hero-visual과
       같은 레벨(형제)로 취급되게 함 -> order로 비주얼을 그 사이에 끼워넣을 수 있음 */
    .sr-hero-text-col,
    .sr-hero-text {
        display: contents;
    }
    .sr-hero-text > .krds-badge,
    .sr-hero-title,
    .sr-hero-search,
    .sr-hero-stats,
    .sr-hero-quicklinks {
        margin-left: 1.6rem;
        margin-right: 1.6rem;
    }
    .sr-hero-text .krds-badge {
        order: 1;
        margin-top: 5rem;
        font-size: 1.5rem;
        margin-bottom: 0.9rem;
        justify-content:flex-start;
    }
    .sr-hero-visual-form {
        display: none;
    }
    .sr-hero-title {
        order: 2;
        font-size: 5.2rem;
    }
    .sr-hero-search {
        display: none;
    }
    /* 우측 비주얼: 대각선 클립 도형은 좌우 나란히 배치를 전제로 한
       모양이라, 세로 스택 레이아웃에서는 단순 라운드 카드로 대체 */
    .sr-hero-visual {
        order: 4;
        flex: none;
        width: 100%;
        max-height: none;
        height: auto;
        margin-top: 6.4rem;
        box-sizing: border-box;
    }
    .sr-hero-visual-corner .tit {
        font-size: 2.1rem;
    }
    .sr-hero-visual-corner {
        width: 40%;
        height: 60%;
    }
    .sr-hero-swiper .swiper-indicator {
        left: 5%;
    }
    .sr-hero-swiper {
        border-radius: 0;
        overflow: hidden;
        /* height:100%(부모 .sr-hero-visual의 auto 높이 기준)와
           min-height:auto 조합만으로는 실제 높이가 안 잡힘 - 퍼센트 높이는
           부모 높이가 확정돼 있어야 계산되는데, 이 폭에서 .sr-hero-visual은
           height:auto(내용 기준)라 순환 참조가 생겨 사실상 0에 가깝게
           찌그러짐(96px). 데스크탑의 min-height:74.1rem이 이 순환을
           끊어주는 역할이었는데, 그 min-height를 지우면서 대체 수단 없이
           height:100%만 남아 문제가 생겼음 - width는 이미 확정돼 있으니
           aspect-ratio로 높이를 폭 기준으로 정하도록 바꿔서 해결. */
        height: auto;
        min-height: auto;
        aspect-ratio: 4 / 3;
    }
    /* 데스크탑 전용 .sr-hero-in.reverse .sr-hero-swiper { clip-path: url(#heroVisualClipReverse); }
       규칙이 이 폭에서도 그대로 적용되고 있었음(명시도가 더 높아서 방금 위
       .sr-hero-swiper 규칙만으로는 못 이김 - 그래서 여기도 .sr-hero-in.reverse
       .sr-hero-swiper로 명시도를 맞춤). 그 클립패스를 정의하는
       .sr-hero-visual-form은 바로 위에서 display:none 처리되는데, 참조하는
       도형 정의 자체가 사라지면서 클립 영역이 찌그러져(96px 높이로
       쪼그라듦) 사진이 안 보이는 것처럼 보였던 진짜 원인. 대각선 클립
       대신 이 폭에서는 단순 라운드 카드로 대체하니 클립을 아예 꺼야 함. */
    .sr-hero-in.reverse .sr-hero-swiper {
        clip-path: none;
    }
    .sr-hero-swiper .swiper-slide img {
        clip-path: none;
        border-radius: 0;
    }
    .sr-hero-quicklinks {
        order: 5;
        flex-wrap: wrap;
        gap: 2.4rem 1.6rem;
        margin-top: 6.8rem;
        justify-content: space-between;
        padding-inline: 3rem;
    }
    .sr-hero-quicklinks li {
        flex: 0 0 calc(20% - 1.6rem);
        width: auto;
    }
    .sr-hero-stats {
        order: 6;
        justify-content: center;
        margin-top: 6rem;
    }
   
    
}
@media (max-width: 767px) {
    .sr-hero-text .krds-badge {
        margin-top: 2rem;
        margin-bottom: 0.55rem;
        font-size: 0.9rem;
    }
    .sr-hero-title {
        font-size: 3.2rem;
    }
    .sr-hero-stats {
        margin-top: 4rem;
    }
    .sr-hero-stats li {
        height: auto;
        padding: 0.34rem 0;
    }
    .sr-hero-quicklinks {
        gap: 1rem;
        margin-top: 4rem;
    }
    .sr-hero-quicklinks li {
        flex: 0 0 calc(20% - 1.2rem);
    }
    .sr-hero-quicklinks li .ico img {
        width: 2.8rem;
    }
    .sr-hero-quicklinks li span {
        font-size: 1.6rem;
    }
    .sr-hero-quicklinks li a {
        gap: 1.2rem;
    }
    .sr-hero-visual {
        margin-top: 3.2rem;
    }
    .sr-hero-visual-corner .tit {
        font-size: 1.6rem;
        right: 2rem;
        bottom: 6rem;
    }
    .sr-hero-visual-corner::after {
        right: 2rem;
        bottom: 3rem;
        width: 4rem;
        height: 1.548528rem;
    }
    .sr-hero-visual-corner {
        width: 30%;
    }
    .sr-ctrl-btn {
        width: 3.2rem;
        height: 3.2rem;
    }
    .sr-ctrl-btn.swiper-button-stop svg {
        width: 1rem;
        height: 1.33rem;
    }
    .sr-ctrl-btn.sr-hero-prev svg, .sr-ctrl-btn.sr-hero-next svg {
        width: 1.3rem;
        height: 1.3rem;
    }
    .sr-ctrl-btn.swiper-button-more svg {
        width: 1.3rem;
        height: 1.3rem;
    }
    .sr-hero-swiper .swiper-indicator .swiper-pagination {
        height: 3.2rem;
        padding: 0 1rem;
    }
    .sr-hero-swiper .swiper-indicator {
        bottom: 2rem;
    }
    .sr-hero-stats li strong {
        font-size: 2.4rem;
    }
    .sr-hero-stats li span {
        font-size: 2rem;
    }
    .sr-hero-stats li.divider {
        margin-inline: 2.8rem;
    }
}

@media (max-width: 576px) {
    .sr-hero-visual-corner .tit {
        font-size: 1.6rem;
        right: 1rem;
        bottom: 4rem;
    }
    .sr-hero-visual-corner::after {
        right: 1rem;
        bottom: 2rem;
    }
    .sr-ctrl-btn {
        width: 2.4rem;
        height: 2.4rem;
    }
    .sr-ctrl-btn.swiper-button-stop svg {
        width: 0.8rem;
        height: 1.064rem;
    }
    .sr-ctrl-btn.sr-hero-prev svg, .sr-ctrl-btn.sr-hero-next svg {
        width: 1rem;
        height: 1rem;
    }
    .sr-ctrl-btn.swiper-button-more svg {
        width: 1rem;
        height: 1rem;
    }
    .sr-hero-swiper .swiper-indicator .swiper-pagination {
        height: 2.4rem;
        padding: 0 0.8rem;
    }
    .swiper-pagination .swiper-pagination-bullet {
        width: 0.8rem;
        height: 0.8rem;
    }
    .sr-hero-quicklinks {
        gap: 0.8rem;
        padding-inline: 1rem;
    }
    .sr-hero-quicklinks li .ico img {
        width: 2.4rem;
    }
    .sr-hero-quicklinks li span {
        font-size: 1.4rem;
    }
    .sr-hero-quicklinks li .ico {
        width: 4rem;
        height: 4rem;
    }
    .sr-hero-quicklinks li a {
        gap: 1.2rem;
    }
    .sr-hero-stats li strong {
        font-size: 2rem;
    }
    .sr-hero-stats li span {
        font-size: 1.8rem;
    }
    .sr-hero-stats li .stats-item {
        font-size: 1.6rem;
    }
    
}
@media (max-width: 500px) {
    .sr-hero-visual-corner .tit {
        font-size: 1.4rem;
        bottom: 4rem;
        right: 1rem;
    
    }
    .sr-hero-visual-corner::after {
        right: 1rem;
        bottom: 2rem;
    }
    
    
}
@media (max-width: 400px) {
    .sr-hero-visual-corner .tit {
        bottom: 2.5rem;
        right: 0.5rem;
    
    }
    .sr-hero-visual-corner::after {
        bottom: 1rem;
        width: 3rem;
        height: 0.774264rem;
         right: 0.5rem;
    }
    .sr-hero-stats li span {
        font-size: 1.6rem;
    }
    .sr-hero-stats li .stats-item {
        font-size: 1.4rem;
    }
    .sr-hero-stats li.divider {
        margin-inline: 1.2rem;
    }
    
}

/* -------------------------------------------------------------- */
/* 2. 연구 아카이브                                                  */
/* -------------------------------------------------------------- */


@media (max-width: 1525px) {
    .sr-archive-in {
        padding-right: 3%;
    }
}

@media (max-width: 1400px) {
    .sr-archive-featured-title {
        font-size: 2.6rem;
        max-width: 50%;
    }
   
    .sr-archive-featured {
        padding-inline: 4rem;

    }
    .sr-archive-featured-meta {
        width: 50%;
    }
    .sr-archive-featured-divider {
        margin-block: 1.4rem;
        width: 50%;
    }
}
@media (max-width: 1050px) {
    .sr-archive-featured-title, .sr-archive-featured-divider, .sr-archive-featured-meta {
        max-width: 45%;
    }
}


@media (max-width: 1023px) {
    .sr-archive {
        padding-block: 12rem;
    }
    
    .sr-archive-in {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
        
        padding-right: 0;
    }
    .sr-archive-head,
    .sr-archive-in > .tab,
    .sr-archive-featured,
    .sr-archive-in > .tab-conts-wrap {
        width: 100%;
    }
    .sr-archive-in > .tab {
        margin-top: 0;
        margin-bottom: 5rem;
    }
    .sr-archive-featured-title, .sr-archive-featured-divider, .sr-archive-featured-meta {
        max-width: 60%;
    }
    .sr-archive-featured {
        padding-inline: 4rem;

    }
    .sr-archive-in > .tab-conts-wrap {
        margin-top: 5.4rem;
    }
    .line_break {
        display: none;
    }
    .sr-archive-in > .btn-more {
        position: absolute;
        right: 0;
        top: 3rem;       
        margin-top: 0; 
    }
    .sr-archive-head .sr-eyebrow {
        font-size: 4.6rem;
        max-width: 30rem;
    }
    .sr-archive-in > .tab > ul {
        justify-content: flex-start;
        gap: 2.4rem;
    }
    
    .sr-archive-head .sr-desc {
        font-size: 1.8rem;        
        margin-top: 1rem;
        margin-bottom: 4rem;
    }
   
}
@media (max-width: 767px) {
    .sr-archive {
        padding-block: 8rem 5rem;
    }
    .sr-archive-head .sr-eyebrow {
        font-size: 3.2rem;
    }
    .sr-archive-head .tit {
        font-size: 3.2rem;
        max-width: 100%;
    }
    /* .sr-today와 동일한 방식으로 정리: 예전엔 position:absolute로 픽셀
       좌표(top:11rem)를 수동으로 맞춰뒀는데, 콘텐츠 높이가 조금만
       달라져도 겹치거나 빈 공간이 남기 쉬운 방식이었음.
       → 절대배치를 버리고 정적 배치 + order로, 실제 문서 흐름 안에서
       "설명 아래, 탭 위"에 자연스럽게 놓이도록 함(.sr-today 패턴 참고). */
    .sr-archive-in > .btn-more {
        position: static;
        order: 1;
        align-self: flex-start;
    }
    .sr-archive-head .sr-desc {
        margin-bottom: 2.6rem;
    }
    .sr-archive-in > .tab {
        order: 2;
        margin-top: 4rem;
        margin-bottom: 2.6rem;
    }
    .sr-archive-featured {
        order: 3;
    }
    .sr-archive-in > .tab-conts-wrap {
        order: 4;
    }
    .sr-archive-in > .tab .btn-tab {
        font-size: 1.7rem;
        gap: 2rem;
    }
    .sr-archive-featured-title {
        font-size: 1.7rem;
        margin-top: 1.2rem;
    }
    .sr-archive-featured {
        padding-inline: 2.4rem;
        padding-block: 2.4rem;
        /* 좁은 화면은 여백·글자가 작아 같은 바닥값을 쓰면 아래가 휑하다.
           내용에 맞춰 줄어들게 두되 너무 납작해지지 않을 만큼만 잡는다 */
        min-height: 18rem;
    }
    .sr-archive-featured-divider {
        width: 100%;
    }
    .sr-archive-featured-meta {
        font-size: 1.4rem;
    }
    .sr-archive-featured-thumb {
        position: static;
        transform: translateY(0);
        margin: 1.8rem auto 0;
        width: 50%;
        aspect-ratio: 17.7 / 25;   /* 데스크탑 원본 width:height 비율 */
        height: auto;
    }
    .sr-archive-in > .tab-conts-wrap {
        margin-top: 4rem;
    }
    .sr-archive-list .cate, .sr-archive-list .date {
        font-size: 1.4rem;
    }
    .sr-archive-list {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .sr-archive-list .tit {
        font-size: 1.7rem;
        margin-top: 1.2rem;
    }
    .sr-archive-featured-title, .sr-archive-featured-divider, .sr-archive-featured-meta {
        max-width: 100%;
    }
}

/* -------------------------------------------------------------- */
/* 3. 지식이 연결되는 변화 (커버플로우 카드)                             */
/* -------------------------------------------------------------- */

@media (max-width: 1439px) {
    .sr-connect-swiper {
        height: auto;
        padding: 0 2.4rem;
    }
    .sr-connect-card {
        /* 양옆(비활성) 카드는 작게, 가운데(활성) 카드는 크게.
           살짝 겹치도록 음수 margin을 주되, JS가 이미 지정해둔 z-index
           (가운데 카드가 항상 위)로 겹치는 부분은 가운데 카드가 덮음 */
        flex: 0 0 auto;
        width: 40%;
        margin: 0 -6.5%;
        /* height 고정값 대신 비율로: 폭이 줄어들면 높이도 같이 줄어들어서
           좁은 화면에서 카드가 세로로 길쭉하게 찌그러지는 문제 방지 */
        aspect-ratio: 3 / 4;
        height: auto;
        transition: var(--krds-transition-base);
        /* 데스크탑용 그림자(0.6rem/1.4rem)는 카드가 겹치거나 컨테이너
           가장자리에 붙었을 때 뚝 잘린 것처럼 보이기 쉬워서, 더 작고
           은은한 값으로 축소 */
        /* filter: drop-shadow(0 0.3rem 0.7rem rgba(0, 0, 0, 0.18)); */
    }
    .sr-connect-card.is-active {
        width: 50%;
    }
    /* 카드 자체가 작아진 만큼 안쪽 텍스트/여백/버튼도 비례해서 축소
       (데스크탑 값 그대로 두면 좁아진 카드 안에서 글자가 억지로
       줄바꿈되며 잘려 보임) */
    .sr-connect-card .txt {
        padding: 2rem 2.8rem;
    }
    .sr-connect-card .tit {
        font-size: 2.4rem;
        line-height: 1.4;
    }
    .sr-connect-card .desc {
        margin-top: 1.2rem;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .sr-connect-card-more {
        right: 2.4rem;
        bottom: 2.4rem;
        width: 5rem;
        height: 5rem;
    }
}
@media (max-width: 1023px) {
    .sr-connect {
        padding-block: 8rem 15.6rem;
    }
    .sr-connect .sr-eyebrow {
        font-size: 2.8rem;
    }
    .sr-connect-title {
        margin-top: 1rem;
        font-size: 4.6rem;
    }
    .sr-desc.ac {
        font-size: 1.8rem;
        margin-top: 2.8rem;
    }
}

@media (max-width: 767px) {
    .sr-connect .sr-eyebrow {
        font-size: 1.7rem;
    }
    .sr-connect-title {
        font-size: 2.7rem;
        margin-top: 0.6rem;
    }
    .sr-desc.ac {
        font-size: 1.4rem;
        margin-top: 1.7rem;
    }
    .sr-connect-swiper {
        margin-top: 5rem;
    }
    /* width/margin/aspect-ratio는 1439px 티어의 퍼센트 기반 규칙이 그대로
       이어받아 적용됨 (화면이 좁아질수록 자동으로 비례해서 작아짐) -
       여기서는 좁아진 카드에 맞춰 텍스트 크기만 한 단계 더 축소 */
    .sr-connect-card .txt {
        padding: 1.2rem 1.4rem;
    }
    .sr-connect-card .tit {
        font-size: 1.6rem;
        line-height: 1.35;
    }
    .sr-connect-card .desc {
        font-size: 1.2rem;
    }
    .sr-connect-card-more {
        right: 1.6rem;
        bottom: 1.6rem;
        width: 2.4rem;
        height: 2.4rem;
    }
    .sr-connect-card-more:after {
        content: "";
        background: url(../img/component/icon/ico_arrow_next_white.png) no-repeat;
        width: 1.6rem;
        height: 1.2rem;
        background-size: contain;
    }
    .sr-connect {
        padding-block: 8rem 12rem;
    }
    .sr-connect-card.is-active {
        width: 60%;
    }
    
}

/* -------------------------------------------------------------- */
/* 4. 최신 간행물                                                    */
/* -------------------------------------------------------------- */

@media (max-width: 1525px) {
    .sr-publication .tab-conts-wrap {
        padding-right: 3.5%;
    }
}
@media (max-width: 1440px) {
    .sr-publication {
        padding-top: 14.3rem;
    }
    .sr-publication .tab.line ul {
        gap: 2rem 1.6rem;
        padding-inline: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
        
}
@media (max-width: 1300px) {
    .sr-pub-layout {
        gap: 4rem;
    }
    .sr-pub-featured {
        flex: 0 0 55%;
        width: 55%;
        gap: 2.4rem;
    }
    .sr-pub-featured img {
        flex-shrink: 0;
        width: 24rem;
    }
    .sr-pub-featured .txt {
        padding-block: 10rem;
    }
}

@media (max-width: 1023px) {
    .sr-publication .tab-conts-wrap {
        padding-right: 0;
    }
    .sr-pub-featured .txt {
        padding-block: 2rem;
    }

    .sr-publication {
        padding-top: 14.3rem;
    }
    .sr-publication-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
    }
    .sr-publication .tab.line {
        margin-top: 2.4rem;
    }
    
    .sr-publication .tab-conts {
        padding-inline: 3.2rem;
        padding-block: 3.2rem;
    }
    .sr-pub-layout {
        flex-direction: column;
        gap: 3rem;
    }
    .sr-pub-featured {
        flex: none;
        width: 100%;
         height: 34rem;
         /* border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2); */
        
    }
    .sr-pub-list {
        width: 100%;
        padding-top: 6rem;
        border-top: 0.1rem solid rgba(255, 255, 255, 0.2);
    }
}
@media (max-width: 767px) {
    .sr-publication .tab-conts-wrap {
        margin-top: 0.8rem;
    }
    .sr-publication {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .sr-publication .tab-conts {
        padding-inline: 2.4rem;
        padding-block: 2.4rem;
    }
    .sr-pub-featured {
        height: auto;
        flex-wrap: wrap-reverse;
    }
    .sr-pub-featured img {
        width: 100%;
        height: auto;
    }
    .sr-pub-featured .txt {
        padding-block: 0;
    }
    .sr-pub-featured .tit {
        font-size: 1.7rem;
    }
    .sr-pub-featured .date {
        font-size: 1.6rem;
        margin-top: 2rem;
    }
    .sr-pub-layout {
        gap: 1.8rem;
    }
    .sr-pub-list {
        padding-top: 3.6rem;
    }
    .sr-pub-list .badge, .sr-pub-list .tit {
        font-size: 1.7rem;
    }
    
    .sr-pub-list {
        gap: 1.2rem;
    }
    
    .sr-pub-list li {
        padding-bottom: 1.2rem;
    }
    .sr-pub-list .date {
        font-size: 1.5rem;
    }

    /* ---------------------------------------------------------- */
    /* 최신 간행물 탭 → 셀렉트박스형 UI (모바일 전용)                 */
    /* 마크업/접근성 속성(role="tablist" 등)은 그대로 두고,          */
    /* CSS + 최소한의 JS(open/close, 라벨 동기화)로 겉모습만 변경.    */
    /* ---------------------------------------------------------- */
    .sr-publication .tab.line {
        position: relative;
        margin-top: 2.4rem;
    }

    /* 닫힌 상태: 트리거 버튼 */
    .sr-publication .tab-select-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 1rem 2rem;
        border: 0.1rem solid rgba(255, 255, 255, 0.3);
        border-radius: 1.2rem;
        background-color: #123368;
        color: #FFFFFF;
        font-size: 1.7rem;
        font-weight: 700;
        cursor: pointer;
    }
    .sr-publication .tab-select-trigger::after {
        content: "";
        flex-shrink: 0;
        width: 1.4rem;
        height: 1.4rem;
        margin-left: 1rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: transform 0.2s ease;
    }

    /* 열린 상태: 트리거가 목록 상단과 맞붙는 초록색 헤더로 변신 */
    .sr-publication .tab.line.is-open .tab-select-trigger {
        border-radius: 1.2rem 1.2rem 0 0;
        border-color: #007A33;
        background-color: #007A33;
    }
    .sr-publication .tab.line.is-open .tab-select-trigger::after {
        transform: rotate(180deg);
    }

    /* 목록(드롭다운) */
    .sr-publication .tab.line ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 20;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0;
        border-radius: 0 0 1.2rem 1.2rem;
        overflow: hidden;
        background-color: #FFFFFF;
        box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.35);
    }
    .sr-publication .tab.line.is-open ul {
        display: flex;
    }
    .sr-publication .tab.line ul li {
        width: 100%;
        border-bottom: 0.1rem solid #EEEEEE;
    }
    .sr-publication .tab.line ul li:last-child {
        border-bottom: 0;
    }
    /* 현재 선택된 항목은 트리거(헤더)에 이미 노출되므로 목록에서는 숨김 */
    .sr-publication .tab.line ul li.active {
        display: none;
    }
    .sr-publication .tab.line .btn-tab {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 1.5rem 2rem;
        text-align: left;
        background-color: transparent;
        border: 0;
        font-size: 1.6rem;
    }
    .sr-publication .tab.line .btn-tab::before,
    .sr-publication .tab.line .btn-tab::after {
        content: none;
    }
    .sr-publication .tab.line .btn-tab .label {
        color: #333333;
        font-weight: 500;
    }
    .sr-publication .tab.line .btn-tab:not(:disabled):hover {
        background-color: #F5F5F5;
        color: inherit;
    }
}



/* -------------------------------------------------------------- */
/* 5. 오늘의 세종                                                    */
/* -------------------------------------------------------------- */

@media (max-width: 1525px) {
    .sr-today-in {
        padding-right: 3.5%;
    }
    .sr-today-in > .sr-today-thumb-list {
        gap: 2.4rem;
    }

}

@media (max-width: 1023px) {
    .sr-today {
        padding-block: 12rem;
    }
    .sr-today-in {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
        padding-right: 0;
    }
    .sr-today-in > .sr-today-thumb-list, .sr-today-in > .tab-conts-wrap {
        padding-right: 0;
    }
 
    
  
    .sr-today-head,
    .sr-today-in > .tab,
    .sr-today-in > .sr-today-thumb-list,
    .sr-today-in > .tab-conts-wrap {
        width: 100%;
    }

    .sr-today-head .tit {
        font-size: 4.6rem;
    }
    .sr-today-head .desc {
        font-size: 1.8rem;
        margin-top: 1rem;
        margin-bottom: 4rem;
    }
    /* 더보기 버튼 우측 상단 고정 (sr-archive 패턴) */
    .sr-today-in > .btn-more {
        position: absolute;
        right: 0;
        top: 3rem;
        margin-top: 0;
    }
    .sr-today-in > .tab {
        margin-top: 0;
        margin-bottom: 5rem;
    }
    .sr-today-in > .tab > ul {
        justify-content: flex-start;
        gap: 2.4rem;
    }
    .sr-today-in > .sr-today-thumb-list {
        margin-top: 0;
        grid-template-columns: 1fr 1fr;
        gap: 3.2rem;
    }
    .sr-today-thumb-list img {
        height: 22rem;
    }
    .sr-today-in > .tab-conts-wrap {
        margin-top: 6rem;
    }
}

@media (max-width: 767px) {
    
    .sr-today {
        padding-block: 9.5rem;
    }
    .sr-today-head .tit {
        font-size: 3.2rem;
    }
    /* 모바일에서는 더보기 버튼을 절대배치로 겹쳐 올리는 대신, 설명 아래
       ~ 탭 위에 오는 독립된 한 줄(알약 버튼)로 자연스럽게 흐르게 함.
       DOM 순서(head → tab → more → thumbs → content)와 실제 노출 순서
       (head → more → tab → thumbs → content)가 다르므로 order로 재배치 */
    .sr-today-in > .btn-more {
        position: static;
        order: 1;
        align-self: flex-start;
    }
    .sr-today-in > .tab {
        order: 2;
        margin-top: 4rem;
        margin-bottom: 2.6rem;
    }
    .sr-today-in > .sr-today-thumb-list {
        order: 3;
    }
    .sr-today-in > .tab-conts-wrap {
        order: 4;
    }
    .sr-today-in > .tab .btn-tab {
        font-size: 1.7rem;
        gap: 2rem;
    }
    /* 썸네일 카드 1열 전환 */
    .sr-today-in > .sr-today-thumb-list {
        grid-template-columns: 1fr;
        gap: 3.2rem;
    }
    .sr-today-thumb-list img {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .sr-today-thumb-list .cate,
    .sr-today-thumb-list .date {
        font-size: 1.4rem;
        margin-top: 1.2rem;
    }
    .sr-today-thumb-list .tit {
        font-size: 1.7rem;
        margin-top: 1.2rem;
    }
    .sr-today-in > .tab-conts-wrap {
        margin-top: 2.4rem;
    }
    /* 하단 텍스트 게시판 모바일 줄바꿈 및 간격 최적화 */
    .sr-today-text-list li {
        flex-wrap: wrap;
        gap: 0.8rem 1.6rem;
        padding-block: 1.8rem;
    }
    .sr-today-text-list .cate {
        font-size: 1.4rem;
    }
    .sr-today-text-list .tit {
        flex-basis: 100%;
        order: 3;
        font-size: 1.7rem;
        white-space: normal;
        word-break: break-all;
    }
    .sr-today-text-list .date {
        font-size: 1.4rem;
        margin-left: auto;
    }
    .sr-today-head .desc {
        margin-bottom: 2.6rem;
    }
}

/* -------------------------------------------------------------- */
/* 6. 세종인재평생교육원 배너                                          */
/* -------------------------------------------------------------- */
@media (max-width: 1023px) {
    .sr-edu-banner {
        min-height: 44rem;
    }
    .sr-edu-banner-in .txt {
        max-width: 90%;
    }
}

@media (max-width: 767px) {
    .sr-edu-banner {
        min-height: 36rem;
    }
    .sr-edu-banner-in .kdu-banne-title {
        font-size: 2.1rem;
    }
    .sr-edu-banner-in .tit {
        font-size: 3.2rem;
    }
}

/* -------------------------------------------------------------- */
/* 7. 사업·연구 / 학술·교육                                           */
/* (2단 -> 1단 전환은 위쪽 기존 @media(max-width:1024px) 규칙이 이미    */
/*  처리 중이라 여기서는 767px 세부 보정만 추가)                         */
/* -------------------------------------------------------------- */


@media (max-width: 1525px) {
    .sr-business-in {
        padding-right: 5.5%;
    }
}

@media (max-width: 1023px) {
    .sr-business {
        padding-block: 12.3rem 13rem;
    }
    .sr-business-in {
        flex-direction: column;
        gap: 6rem;
        padding-right: var(--krds-contents-padding-x);
    }
    .sr-business-head {
        margin-bottom: 1.6rem;
    }
}

@media (max-width: 767px) {
    .sr-business-in {
        gap: 3em;
    }
    .sr-business {
        padding-block: 7rem 8rem;
    }
    .sr-business-head h3 {
        font-size: 2.4rem;
    }
    .sr-business-card {
        height: 26rem;
    }
    .sr-business-card .tit {
        font-size: 1.9rem;
    }
    
    .sr-business-card .desc {
        font-size: 1.4rem;
    }

    .sr-business-nav .cnt {
        font-size: 1.4rem;
        height: 3.2rem;
    }
    .sr-business-nav .swiper-button-prev, .sr-business-nav .swiper-button-next {
        
        width: 3.2rem;
        height: 3.2rem;
    }

    
}









/* ------------------------------------------------------------------ */
/* 세종인재평생교육포털 메인화면                       */
/* ------------------------------------------------------------------ */






.sr-hero-visual-corner.portal::before {
    background-color: #00235A;
}
.sr-hero-visual-corner.portal::after {
    transform: scaleX(-1);
}
.sr-hero-in.reverse .sr-hero-swiper .swiper-indicator.portal {
    right: auto;
    left: 32%;
}

.sr-hero-text.portal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* ==================================================================== */
/* 세종인재평생교육포털(Sejong_Portal_Main.html) 전용 섹션               */
/* ==================================================================== */

/* -------------------------------------------------------------- */
/* 강좌 카드 캐러셀 공통 (지금 뜨고 있는 인기강좌 / 새롭게 만나보는 최신 강좌) */
/* -------------------------------------------------------------- */
.sp-course-section {
    padding-block: 10rem;
}
.sp-course-section:first-child {
    padding-top: 12rem;
}

.sp-course-swiper {
    width: 100%;
    overflow: hidden;
}
/* outline / inset box-shadow 둘 다 시도했는데도 링이 한쪽 변(특히
   오른쪽)이 빠진 채로 계속 보였음. 두 방식 다 "요소 자체의 렌더링
   경계"에 얹혀서 그려지는데, 여기 카드들은 이미지에 border-radius,
   카드 자체에 overflow:hidden, Swiper의 transform 기반 위치 이동까지
   겹쳐있어 그 경계 계산이 브라우저 렌더링 파이프라인 안에서 미묘하게
   어긋나는 상황인 것으로 보임. 더는 outline/box-shadow처럼 "기존
   요소에 얹는" 방식에 기대지 않고, 카드 위에 완전히 독립된 사각형
   레이어(::after)를 새로 그려서 확실하게 4변이 다 보이게 함:
   position:absolute; inset:0 으로 카드 콘텐츠 영역에 정확히 겹쳐
   그리고, 포커스가 아닐 때는 투명(border-color: transparent)이라
   평소엔 안 보이다가 포커스 시에만 파란 테두리 색으로 바뀜(테두리
   자체는 항상 존재하되 색만 바뀌는 방식이라 레이아웃이 흔들리지
   않음). ::after는 카드보다 위 레이어에 그려지고 카드 자신의
   overflow:hidden 영향을 안 받으므로 4변 모두 확실히 보임. */
.sp-course-card {
    position: relative;
}
.sp-course-card::after {
    content: '';
    position: absolute;
    inset: 0;
    /* 세로선(좌/우)이 가로선(위/아래)보다 두꺼워 보이는 건 실제
       두께가 달라서가 아니라 잘 알려진 착시 현상(세로 획은 같은
       두께라도 더 두껍게 지각됨) - 타이포그래피에서도 세로 획을
       가로 획보다 얇게 보정하는 것과 같은 원리로, 좌우만 살짝 얇게
       줘서 시각적으로 고르게 보이도록 보정.
       왼쪽만 두꺼워 보인다길래 오른쪽만 더 줄였었는데, 다시 보니
       양쪽 다 위/아래보다 두꺼워 보인다는 피드백이라 오른쪽만 줄인
       게 방향이 잘못됐던 것 - 좌우 둘 다 동일하게, 더 큰 폭으로
       줄임. */
    border-top-width: 0.32rem;
    border-bottom-width: 0.32rem;
    border-left-width: 0.14rem;
    border-right-width: 0.14rem;
    border-style: solid;
    border-color: transparent;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}
.sp-course-swiper .sp-course-card:focus-visible::after,
.sp-course-swiper .swiper-slide:focus-visible .sp-course-card::after { /* 키보드일 때만 링 표시 */
    border-color: #0B5FCC;
}
.sp-course-swiper .sp-course-card:focus-visible,
.sp-course-swiper .sp-course-card:focus,
.sp-course-swiper .swiper-slide:focus-visible,
.sp-course-swiper .swiper-slide:focus {
    outline: none !important;
}
.sp-course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #FFFFFF;
    text-decoration: none;
    transition: var(--krds-transition-base);
}
.sp-course-card img {
    border-radius: 1.2rem;
}
.sp-course-card:hover .sp-course-body .desc {
    text-decoration: underline;
}


.sp-course-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 1.2rem;
}
.sp-course-body .tit {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1E2124;
    margin-bottom: 1rem;
}
.sp-course-body .desc {
    font-size: 1.9rem;
    line-height: 1.5;
    color: #1E2124;
    margin-bottom: 1rem;
    font-weight: 700;
}
.sp-course-tags {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
}
.sp-course-tags .tag {
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    font-weight: 500;
}
.sp-course-tags .tag-recruit {
    background-color: #E6F4EE;
    color: #007A33;
}

.sp-course-meta {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.sp-course-meta div {
    display: flex;
    gap: 1.6rem;
    font-weight: 500;
    font-size: 1.6rem;
}
.sp-course-meta dt {
    flex-shrink: 0;
    color: #464C53;
}
.sp-course-meta dd {
    color: #464C53;
}

/* -------------------------------------------------------------- */
/* 지금 가장 주목받는 프로그램 (2x2 가로형 카드 그리드)                */
/* -------------------------------------------------------------- */
.sp-program {
    padding-block: 6rem;
}
.sp-program-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.4rem;
}
.sp-program-head h2 {
    font-size: 3.4rem;
    font-weight: 700;
    color: #1E2124;
}
/* Swiper를 걷어내고 순수 CSS Grid + JS 페이저로 교체.
   PC(1024px+)에서는 2열 x 2행 고정 그리드로 4장을 보여주고, 그 아래
   폭에서는 1열로 1장씩 보여줌(JS가 cardsPerPage()로 동일 기준 판단).
   .is-leaving / .is-entering 은 페이지 전환 시 JS가 붙였다 떼는
   클래스로, 항상 같은 방향(살짝 오른쪽에서 들어오며 페이드)으로만
   전환되어 "역방향으로 튀는" 모션이 생기지 않음. */
.sp-program-viewport {
    /* overflow:hidden을 걸면 페이지 전환 트랜지션(translateX ±1.2rem)이
       바깥으로 새는 걸 막을 순 있지만, 카드 포커스 링까지 같이 잘라먹는
       부작용이 있었음(공지·안내 섹션에서 겪은 것과 같은 문제). 트랜지션
       이동폭이 1.2rem 정도로 작아서 굳이 여기서 안 잘라도 전역
       html,body{overflow-x:hidden}이 이미 안전망 역할을 하므로 제거함. */
}
.sp-program-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 1;
    transform: translateX(0);
}
    .sp-program-grid.is-leaving {
    opacity: 0;
    transform: translateX(-1.2rem);
}
.sp-program-grid.is-entering {
    opacity: 0;
    transform: translateX(1.2rem);
}
.sp-program-card {
    display: flex;
    gap: 2.4rem;
    padding: 2.4rem;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
    text-decoration: none;
    transition: var(--krds-transition-base);
    border: 0.1rem solid #CCCCCC;
     min-width: 0;
}
.sp-program-card:hover .sp-program-body .tit {
    text-decoration: underline;
}

 /* .sp-program-thumb {
    flex: 0 1 29.4rem;
    width: 29.4rem;
    height: 18.2rem;
    aspect-ratio: 294 / 182;
    align-self: flex-start;
    border-radius: 1.2rem;
    overflow: hidden;
} 

.sp-program-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}*/

/* 썸네일 영역 크기 고정 */
.sp-program-card .sp-program-thumb {
    flex: 0 0 240px; /* 원하는 이미지 영역 너비 지정 (예: 240px, 또는 45% 등) */
    width: 240px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.8rem;
}

.sp-program-card .sp-program-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 텍스트 영역이 고정 너비를 방해하지 않도록 처리 */
.sp-program-card .sp-program-content {
    flex: 1;
    min-width: 0; /* Flex 자식 요소의 텍스트 오버플로우 방지 필수 */
}

.sp-program-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding-block: 1rem;
}
.sp-program-body .tit {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1E2124;
    margin-bottom: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sp-program-card .sp-course-tags {
    margin-top: auto;
    margin-bottom: 1.1rem;
}
.sp-program-card .sp-course-meta {
    border-top: 0;
    padding-top: 0;
}

/* -------------------------------------------------------------- */
/* 공지·안내 / 프로그램 (2단 컬러 카드)                              */
/* -------------------------------------------------------------- */
.sp-notice {
    padding-block: 6rem 10rem;
}
.sp-notice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
.sp-notice-card {
    position: relative;
    min-height: 22rem;
}
.sp-notice-card.sp-notice-card--blue .sp-notice-body {
    background-color: #D7F0FD;
}
.sp-notice-card.sp-notice-card--blue .sp-notice-body::after {
    content: "";
    background: url(../img/notification_background_icon.png) no-repeat;
    display: block;
    width: 16.6rem;
    height: 15.2rem;
    background-size: contain;
    position: absolute;
    right: 5rem;
    bottom: 5rem;
}

.sp-notice-card.sp-notice-card--yellow .sp-notice-body {
    background-color: #FBF0B9;
}

.sp-notice-card.sp-notice-card--yellow .sp-notice-body::after {
    content: "";
    background: url(../img/program_background_icon.png) no-repeat;
    display: block;
    width: 20.23rem;
    height: 15.288rem;
    background-size: contain;
    position: absolute;
    right: 5rem;
    bottom: 5rem;
}

.sp-notice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.4rem;
}
.sp-notice-head h2 {
    font-size: 3.4rem;
    font-weight: 700;
    color: #1E2124;
}
.sp-notice-nav {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.sp-notice-nav .swiper-button-prev,
.sp-notice-nav .swiper-button-next {
    position: static;
    width: 4rem;
    height: 4rem;
    margin: 0;
    border-radius: 50%;
    border: 0.1rem solid #CDD1D5;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-notice-nav .swiper-button-prev svg,
.sp-notice-nav .swiper-button-next svg {
    width: 1.6rem;
}
.sp-notice-nav .swiper-button-prev::after,
.sp-notice-nav .swiper-button-next::after {
    display: none;
}
.sp-notice-nav .cnt {
    font-size: 1.7rem;
    font-weight: 600;
    color: #1E2124;
    text-align: center;
    border: 0.1rem solid #CDD1D5;
    background-color: #ffffff;
    padding-inline: 1.6rem;
    border-radius: 999rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-notice-nav .cnt .num {
    color: #008F55;
}

.sp-notice-body {
    position: relative;
    z-index: 1;
    padding-inline: 5rem;
    padding-block: 5rem;
    border-radius: 1.2rem;
    /* 데코 아이콘(::after)을 카드 모서리 안쪽으로 자르기 위한 overflow.
       예전엔 .sp-notice-card 전체에 overflow:hidden이 걸려있어서, 같은
       카드 안에 있는 .sp-notice-head 쪽 next 버튼 포커스 링(원형 아웃라인)의
       오른쪽이 카드 경계에서 잘려 보이는 부작용이 있었음. body에만
       overflow를 걸어서 head 영역(버튼)은 안 잘리게 분리함. */
    overflow: hidden;
}
.sp-notice-body .tit {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1E2124;
    margin-bottom: 1.6rem;
}
.sp-notice-body .desc {
    font-size: 2rem;
    line-height: 1.6;
    color: #3D3C3F;
    margin-bottom: 4.5rem;
    max-width: 70%;
}


.sp-notice-card.sp-notice-card--blue .btn-more {
    background-color: #D7F0FD;   
}
.sp-notice-card.sp-notice-card--yellow .btn-more {
    background-color: #FBF0B9;   
}
.sp-notice-card.sp-notice-card--blue .btn-more:hover, .sp-notice-card.sp-notice-card--yellow .btn-more:hover {
    background-color: #1E2124;
    color: #FFFFFF;
}

.sp-notice-icon {
    position: absolute;
    right: 2.4rem;
    bottom: 2rem;
    width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
}
.sp-notice-icon svg {
    width: 4rem;
    height: 4rem;
}

.sr-archive.education .sr-eyebrow {
    max-width: 100%;
    letter-spacing: -0.167rem;
}


.sr-archive.education .sr-archive-in > .tab > ul {
    justify-content: flex-start;
    gap: 2.4rem;
}

.sr-archive.education .sr-archive-featured-thumb {
    background: url(../img/education_sample.png) no-repeat;
}

@media (max-width: 1525px) {
    .sp-notice-grid {
        padding-right: 5.5%;
    }
    .sr-business-head, .sp-course-swiper, .sp-program-head, .sp-program-viewport {
        padding-right: 3%;
    }
    
    .sp-notice-card.sp-notice-card--blue .sp-notice-body::after {
        width: 12rem;
        height: 11rem;
    }
    .sp-notice-card.sp-notice-card--yellow .sp-notice-body::after {
        width: 12rem;
        height: 9rem;
    }
}

@media (max-width: 1200px) {
    .sr-hero-in.reverse .sr-hero-swiper .swiper-indicator.portal {
        right: auto;
        left: 32%;
    }
}



/* -------------------------------------------------------------- */
/* 반응형: 태블릿(1023) / 모바일(767)                                */
/* -------------------------------------------------------------- */
@media (max-width: 1023px) {
    
     .sr-hero-in.reverse {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .sr-hero-in.reverse .sr-hero-swiper .swiper-indicator.portal {
        left: auto;
        right: 5%;
    }

    .sr-hero-text.portal .krds-badge, .sr-hero-text.portal .sr-hero-title, .sr-hero-text.portal .sr-hero-search, .sr-hero-text.portal .sr-hero-stats, .sr-hero-text.portal .sr-hero-quicklinks {
        margin-left: 1.6rem;
        margin-right: 1.6rem;
    }

    .sr-hero-text.portal {
        display: contents; /* 위(3177줄 부근) 데스크탑 전용 .sr-hero-text.portal{display:flex}를
        여기서 덮어씀 - 명시도는 같지만 이 규칙이 파일에서 더 뒤에 있어서
        이겨야 하는데, 이전엔 이 덮어쓰는 규칙 자체가 없어서(또는 더 앞쪽
        media query에 있어서 순서상 져서) display:contents가 안 먹혔음.
        그 결과 배지/제목/검색폼/통계/바로가기가 .sr-hero-text 하나의
        flex 박스 안에 갇힌 채로만 순서가 매겨져서, .sr-hero-visual(사진)이
        엉뚱한 위치(통계 다음)에 나왔던 진짜 원인. */
        align-items: flex-start;
    }
    .sr-hero-text.portal .krds-badge {
        order: 1;
        margin-top: 5rem;
        font-size: 1.5rem;
        margin-bottom: 0.9rem;
        justify-content: flex-start;
    }

    .sp-course-section {
        padding-block: 5rem;
    }
    .sr-hero + .sp-course-section {
        padding-top: 12rem;
    }
    
    .sp-notice {
        padding-block: 5rem;
    }



    .sp-notice-grid {
        grid-template-columns: 1fr;
        gap: 6rem;
    }
    .sp-notice-grid {
        padding-right: var(--krds-contents-padding-x);
    }
    .sp-course-section > .inner, .sp-course-swiper {
        padding-right: 0;
    }

    .sr-business-head {
        padding-right: var(--krds-contents-padding-x);
    }


    .sp-program-viewport, .sp-program-head {
        padding-right: 0;
    }
    /* 모바일/태블릿(1023px 이하): PC의 2x2 정적 그리드 대신, 다른 캐러셀
       (인기강좌 등)처럼 카드 하나가 화면에 꽉 차고 다음 카드가 오른쪽에
       살짝 보이는(peek) 가로 스크롤 방식으로 전환. Swiper 없이 순수 CSS
       scroll-snap으로 구현 -> 손가락 스와이프는 브라우저 네이티브 스크롤이
       처리하므로 별도 JS 없이도 항상 안정적으로 동작함. */
    .sp-program-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1.6rem;
        scrollbar-width: none;
        cursor: grab;
        user-select: none;
        /* overflow-x:auto인 요소는 자기 경계에서 자식(카드)의 포커스 링을
           그대로 잘라버림. 안쪽에 여백(padding)을 줘서 링이 들어갈 자리를
           마련함. (이전엔 padding에 음수 margin을 같이 줘서 상쇄하려
           했었는데, box-sizing:border-box 환경에서는 padding이 전체 박스
           크기를 늘리지 않기 때문에 음수 margin이 오히려 전체를 왼쪽으로
           밀어 정렬을 어긋나게 하는 역효과가 있었음 -> margin 제거) */
        padding: 0.6rem;
    }
    .sp-program-grid::-webkit-scrollbar {
        display: none;
    }
    .sp-program-grid.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        scroll-behavior: auto;
    }
    .sp-program-grid .sp-program-card {
        flex: 0 0 46%;
        scroll-snap-align: start;
    }
    /* 카드가 뷰포트 88% 폭으로 넓어지는데, 썸네일은 고정폭(240px)이라
       가로(row)로 눕히면 본문 영역이 남는 공간을 못 채우고 카드 오른쪽에
       빈 공간이 크게 남는 문제가 있었음. 이 구간(peek 스크롤 전체)은
       이미지 위 / 텍스트 아래로 쌓이는 세로형 레이아웃으로 통일해서
       카드 폭 전체를 이미지가 채우도록 함. */
    .sp-program-card {
        flex-direction: column;
        border: none;
        padding: 0;
        gap: 1.2rem;
    }
    .sp-program-card .sp-program-thumb {
        flex: none;
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 294 / 182;
    }
    
    .sp-notice-body {
        max-width: 100%;
    }
    
    .sp-notice-head {
        margin-bottom: 1.6rem;
    }
    .sp-notice-body .desc, .sp-notice-body .tit {
        max-width: 35rem;
    }
    .sp-program {
        padding-block: 5rem;
    }
}
@media (max-width: 767px) {
    .sp-program-head h2 {
        font-size: 2.8rem;
    }
    .sp-program-head {
        margin-bottom: 1.6rem;
    }
    .sp-program-body {
        padding-block: 0;   
    }
  
    
    .sr-hero-in.reverse .sr-hero-visual-corner .tit {
        left: 2rem;
    }
    .sr-hero-in.reverse .sr-hero-visual-corner::after {
        left: 2rem;
    }
    .sp-course-section,
    .sp-program,
    .sp-notice {
        padding-block: 4rem;
    }
    .sp-program-card {
        flex-direction: column;
        border: none;
        padding: 0;
        gap: 1.2rem;
    }
    /* 모바일(767px 이하): 카드 1장이 거의 꽉 차고 다음 카드가 오른쪽에
       살짝 보이도록. 태블릿(768~1023px)의 46%(2장+살짝)와 구분됨. */
    .sp-program-grid .sp-program-card {
        flex: 0 0 85%;
    }
    .sp-program-thumb {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 294 / 182;
    }
    
    .sp-course-meta div, .sp-course-tags .tag { 
        font-size: 1.3rem;
    }
    
    .sp-notice-icon {
        display: none;
    }
    .sp-notice-body {
        max-width: 100%;
    }

    /* 모바일: 인기강좌/최신강좌/주목 프로그램 캐러셀에서 이전·다음·정지 버튼은
       숨기고 '+'(전체보기) 버튼만 노출. 자동 슬라이드(autoplay)와 손가락
       스와이프(Swiper 기본 터치 지원)는 버튼 유무와 무관하게 계속 동작함. */
    .sp-course-section .sr-business-nav .swiper-button-prev,
    .sp-course-section .sr-business-nav .swiper-button-next,
    .sp-course-section .sr-business-nav .swiper-button-stop,
    .sp-program-head .sr-business-nav .swiper-button-prev,
    .sp-program-head .sr-business-nav .swiper-button-next {
        display: none;
    }

    .sp-course-body .desc {
        font-size: 1.6rem;
    }

    .sp-notice-head h2 {
        font-size: 2.8rem;
    }
    .sp-notice-nav .cnt {
        font-size: 1.4rem;
        height: 3.2rem;
    }
    .sp-notice-nav .swiper-button-prev, .sp-notice-nav .swiper-button-next {
        width: 3.2rem;
        height: 3.2rem;
    }
    .sp-notice-body {
        padding-inline: 2.2rem;
        padding-block: 2.2rem;
    }
    .sp-notice-body .tit {
        font-size: 1.9rem;
    }
    .sp-notice-body .desc {
        font-size: 1.4rem;
        margin-bottom: 2rem;
    }
    .sp-notice-body .desc, .sp-notice-body .tit {
        max-width: 23rem;
    }
    .sp-notice-card.sp-notice-card--blue .sp-notice-body::after {
        width: 7.523rem;
        height: 6.889rem;
        right: 2.2rem;
        bottom: 2.2rem;
    }
    .sp-notice-card.sp-notice-card--yellow .sp-notice-body::after {
        width: 9.168rem;
        height: 6.928rem;
        right: 2.2rem;
        bottom: 2.2rem;
    }

    .sr-hero-in.reverse .sr-hero-visual-corner .tit {
        font-size: 1.6rem;
        left: 1rem;
        bottom: 4rem;
    }
    .sr-hero-in.reverse .sr-hero-visual-corner::after {
        left: 1rem;
        bottom: 2rem;
    }
   
}

@media (max-width: 500px) {
    .sr-hero-in.reverse .sr-hero-visual-corner .tit {
        font-size: 1.4rem;
    
    }
    
    
}
@media (max-width: 400px) {
    .sr-hero-in.reverse .sr-hero-visual-corner .tit {
        bottom: 2.5rem;
        left: 0.5rem;
    
    }
    .sr-hero-in.reverse .sr-hero-visual-corner::after {
        bottom: 1rem;
        width: 3rem;
        height: 0.774264rem;
        left: 0.5rem;
    }
}

/* Main popup */
.ico-x { background: url('../../images/icon/ico-x.svg') no-repeat center center / cover; }
.ico-popArrow { background: url('../../images/icon/ico-poparrow.svg') no-repeat center center / cover; }
.popup { opacity: 0; position: fixed; top: 100vh; z-index: 9999999; width: 100%; height: 100%; background: rgba(0,0,0,0.75); display: flex; flex-direction: column; color: #FFF; align-items: center; justify-content: center; }
.popup .main_container { width: 1440px; padding: 0 64px; position: relative; overflow: hidden; }
.popup > p { font-size: 48px; font-weight: 800; }
.popup .popControl { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.popup .popControl > button { border: none; height: 64px; width: 64px; background: transparent; cursor: pointer; pointer-events: auto; }
.popup .popControl > button > i { display: block; width: 100%; height: 100%; }
.popup .popControl > .popPrev > i { rotate: -180deg; }
.popup .popupSwiper { margin: 60px 0; padding: 0; }
.popup .popupSwiper li { margin: 0 15px; height: 550px; border-radius: 16px; overflow: hidden; }
.popup .popupSwiper li a,
.popup .popupSwiper li > span { display: block; width: 100%; height: 100%; }
.popup .popupSwiper li img { width: 100%; height: 100%; object-fit: cover; }
.popup .popBot { display: flex; align-items: center; }
.popup .popBot > li { margin: 0 15px; display: flex; align-items: center; }
.popup .popBot > li > * { border: none; font-size: 18px; font-weight: 400; height: 48px; padding: 0 24px; border-radius: 24px; background: rgba(0,0,0,0.5); color: #FFF; display: flex; align-items: center; }
.popup .popBot > li > button { cursor: pointer; }
.popup .popBot > li > button:first-of-type { margin-right: 30px; }
.popup .popBot > li i { display: block; width: 20px; height: 20px; margin-left: 8px; }
.popup .popBot > li span { color: #FFC700; }

@media all and (max-width: 1520px) {
    .popup .main_container { width: 100%; padding: 0 80px; }
}

@media all and (max-width: 1280px) {
    .popup > p { font-size: 40px; }
    .popup .main_container { padding: 0 40px; }
    .popup .popControl { width: calc(896px + 148px); }
    .popup .popupSwiper { width: 896px; margin: 40px auto; }
    .popup .popupSwiper li { height: 370px; }
}

@media all and (max-width: 1024px) {
    .popup > p { font-size: 32px; }
    .popup .main_container { padding: 0 44px; }
    .popup .popControl { width: calc(680px + 88px); }
    .popup .popControl > button { height: 44px; width: 44px; }
    .popup .popupSwiper { width: 680px; margin: 40px auto; }
    .popup .popupSwiper li { height: 284px; margin: 10px; }
    .popup .popBot > li { margin: 0 10px; }
    .popup .popBot > li > * { font-size: 16px; height: 44px; padding: 0 20px; border-radius: 20px; }
    .popup .popBot > li > button { padding: 0 16px 0 20px; }
    .popup .popBot > li i { width: 18px; height: 18px; margin-left: 4px; }
}

@media all and (max-width: 767px) {
    .popup > p { font-size: 28px; }
    .popup .main_container { padding: 0 44px; }
    .popup .popControl { width: calc(100vw - 16px); }
    .popup .popupSwiper { width: 260px; margin: 30px auto; border-radius: 8px; overflow: hidden; }
    .popup .popupSwiper li { height: 360px; margin: 0; border-radius: 0; }
    .popup .popBot { flex-direction: column; }
    .popup .popBot > li { margin: 0 0 10px; }
    .popup .popBot > li > * { font-size: 16px; height: 44px; padding: 0 20px; border-radius: 20px; }
    .popup .popBot > li > button { padding: 0 16px 0 20px; }
    .popup .popBot > li i { width: 18px; height: 18px; margin-left: 4px; }
    .popup .popBot > li > button:first-of-type { margin-right: 10px; }
}