html {
  overflow-x: hidden;
}

.inner {
    max-width: 144rem;
}


.krds-input[readonly] {
    border: 0.1rem solid #B1B8BE;
    background-color: #E2E4E7;
    color: #1E2124;
}
/* -------------------------------------------------------------- */
/* 헤더 스타일              */
/* -------------------------------------------------------------- */

#krds-header .header-container .logo {
    width: 18.7rem;
    height: 5.2rem;
}
#krds-header .header-container .logo a {
    background-image: url(../img/component/icon/ico_logo_sejong.png);
}


#krds-header .header-container .btn-navi {
    flex-direction: row;
}


#krds-header .header-container .logo.portal {
    width: auto;
    height: 5.2rem;
}

#krds-header .header-container .logo.portal a {
    background-image: none;
    display: inline-flex;
    gap: 1.6rem; /* 로고, 구분선, 텍스트 사이의 간격 */
    height: 5.2rem; /* 헤더 높이에 맞게 조절 */
    text-decoration: none;
}
#krds-header .header-container .logo.portal a .logo-img {
    display: block;
    width: 18.7rem; /* 실제 CI 이미지 비율에 맞게 너비 조절 */
    height: 100%;
    background-image: url('../img/component/icon/ico_logo_sejong.png'); /* 올바른 이미지 경로 */
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* 2. 세로 구분선 (|) */
#krds-header .header-container .logo.portal a .logo-divider {
    display: block;
    /* 로고 줄은 위쪽 정렬이라 4rem 짜리 이 선이 위에 붙는다.
       시안처럼 위아래 가운데에 오게 한다 */
    align-self: center;
    width: 0.1rem;
    height: 4rem; /* 구분선 높이 */
    background-color: #ccc; /* 구분선 색상 */
}

/* 3. 우측 포털명 텍스트 */
#krds-header .header-container .logo.portal a .logo-text {
    /* 왼쪽 CI 이미지 속 '세종연구원' 과 글자 높이를 맞춘 값.
       2.3rem 이면 글자가 0.5px 작고 0.75px 위로 떠서 한 줄로 안 보였다 */
    font-size: 2.35rem;
    /* 0.75px 내려 두 글자의 위·아래 끝을 정확히 맞춘다.
       top 으로 주면 소수점이 반올림돼 먹지 않아 transform 을 쓴다 */
    transform: translateY(0.075rem);
    font-weight: 800;
    color: #1D2088; /* 이미지에 맞춘 메인 딥블루 컬러 */
    letter-spacing: -0.02em;
    white-space: nowrap;
}


.krds-main-menu .gnb-menu .external-link {
     display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: var(--krds-gap-3);
    position: relative;
    height: var(--krds-main-menu--main-trigger-size-height);
    color: var(--krds-main-menu--main-trigger-color-text);
    padding: 0 var(--krds-main-menu--main-trigger-padding-x);
    transition: var(--krds-transition-base);
    font-size: var(--krds-main-menu--main-trigger-font-size);
    font-weight: var(--krds-font-weight-bold);
}
.krds-main-menu .gnb-menu .external-link:hover {
    background-color: var(--krds-main-menu--main-trigger-color-action-hover);
}

.krds-main-menu .gnb-menu .external-link::after {
    content: "";
    display: inline-flex;
    width: var(--krds-icon--size-medium);
    height: var(--krds-icon--size-medium);
    background-color: var(--krds-light-color-text-basic);
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(../img/component/icon/ico_go.svg);
    mask-image: url(../img/component/icon/ico_go.svg);
    background-color: var(--krds-main-menu--main-trigger-color-text);
    transition: var(--krds-transition-base);

}

.krds-main-menu .gnb-menu .external-link.portal-chevron::after {
    width: 1.6rem;
    height: 1.6rem;
    -webkit-mask-image: url(../img/component/icon/ico_angle.svg);
    mask-image: url(../img/component/icon/ico_angle.svg);
    transform: rotate(-90deg);
}

.krds-main-menu .gnb-menu {
    justify-content: space-around;
}


/* 펼친 메뉴판 오른쪽 아래에 상징 도형을 깐다.
   메뉴 글자 뒤에 깔리는 꾸밈이라 보조기기에는 잡히지 않게 배경으로 둔다.
   그림 자체가 이미 옅은 색이라 따로 흐리게 하지 않는다.
   안쪽 판(.gnb-main-list, 139.2rem)이 아니라 화면 폭을 다 쓰는
   .gnb-toggle-wrap 에 깔아야 시안처럼 화면 오른쪽 끝까지 나가서 잘린다 */
.krds-main-menu .gnb-toggle-wrap {
    background-image: url(../img/header_backgroundImage.png);
    background-repeat: no-repeat;
    background-position: right -5rem bottom 2rem;
    background-size: 26rem auto;
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list {
    max-width: 139.2rem;
}

/* 레벨3 가 없는 메뉴(정보/알림, 연구원소개, 알림소통마당, 수강신청)는
   펼쳤을 때 오른쪽이 통째로 빈다. 그 자리에 대표 안내를 깐다.
   레벨3 목록(.gnb-sub-list)이 놓이는 자리와 여백을 똑같이 맞춰,
   레벨3 가 있는 칸으로 옮겨 가도 제목 자리가 흔들리지 않게 한다 */
.krds-main-menu .gnb-toggle-wrap .gnb-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    top: 0;
    right: 0;
    left: var(--krds-main-menu--main-menu-width);
    min-height: 100%;
    /* .gnb-sub-list 와 같은 값(1.6rem 4rem) */
    padding: 1.6rem 4rem;
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list:has(.gnb-sub-list.active) .gnb-intro {
    display: none;
}
/* 제목 칸의 높이와 들여쓰기는 레벨3 제목(.sub-title)과 같게 두어,
   두 화면을 오갈 때 글자가 같은 자리에 놓이게 한다 */
.krds-main-menu .gnb-toggle-wrap .gnb-intro-tit {
    display: flex;
    align-items: center;
    height: var(--krds-main-menu--sub-menu-title-size-height, 5.6rem);
    margin: 0;
    padding: 0 0.8rem;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    /* 흰 바탕에서 15.9:1 */
    color: #1E2124;
    word-break: keep-all;
}
.krds-main-menu .gnb-toggle-wrap .gnb-intro-desc {
    position: relative;
    max-width: 54rem;
    margin: 1.6rem 0 0;
    padding: 1.6rem 0.8rem 0;
    font-size: 1.8rem;
    line-height: 1.8;
    /* 흰 바탕에서 9.0:1 */
    color: #464C53;
    word-break: keep-all;
}
/* 제목과 설명 사이를 가르는 짧은 초록 선 */
.krds-main-menu .gnb-toggle-wrap .gnb-intro-desc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.8rem;
    width: 4rem;
    height: 0.3rem;
    background-color: #008F55;
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list .gnb-sub-trigger:hover, .krds-main-menu .gnb-toggle-wrap .gnb-main-list .gnb-sub-trigger.active {
    background-color: #002770;
    color: #FFFFFF;
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list .gnb-sub-trigger:hover::after, .krds-main-menu .gnb-toggle-wrap .gnb-main-list .gnb-sub-trigger.active::after {
    background-color: #FFFFFF;
}

/* 전체메뉴(모바일) 왼쪽 1차 메뉴 칸 (#nuri-krds-mobile-tabs)
   - 예전: 칸 폭 12.4rem(KRDS 기본, 좌우 여백 1.6rem씩) 에 break-all 이라 '인재평생교/육', '알림소통마/당' 처럼
     단어 중간에서 끊기고, 단추 높이가 고정이라 3줄이 되면 아래 칸과 겹쳤음
   - 칸을 14.8rem 으로 조금 넓히고 좌우 여백을 1.2rem 으로 줄여 6~7글자 메뉴명이 한 줄에 들어가게 함
   - 줄바꿈은 띄어쓰기에서만(keep-all) → '평생교육정보망 / (다모아)', '세종연구원 / 누리집'
     (띄어쓰기 없이 칸보다 긴 이름만 칸 끝에서 끊김)
   - 단추 높이는 글자 줄 수에 맞춰 늘어남(최소 높이 5.6rem 은 그대로) */
.krds-main-menu-mobile .gnb-wrap .gnb-body .gnb-menu .menu-wrap {
    width: 14.8rem;
    flex: 0 0 14.8rem;
}
.krds-main-menu-mobile .gnb-wrap .gnb-body .gnb-menu .menu-wrap .gnb-main-trigger {
    height: auto;
    min-height: 5.6rem;
    padding: 1.2rem;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.krds-main-menu-mobile .menu-wrap li {
    display: flex;
    align-items: stretch;
    min-height: 5.6rem;
}


@media (max-width: 767px) {
    /* 좁은 화면에서는 CI 이미지와 구분선을 접고 포털 이름만 보여 준다.
       두 개를 나란히 두면 오른쪽 통합검색/로그인/전체메뉴와 겹친다 */
    #krds-header .header-container .logo.portal a .logo-img,
    #krds-header .header-container .logo.portal a .logo-divider {
        display: none;
    }
    #krds-header .header-container .logo.portal a .logo-text {
        display: flex;
        align-items: center;
        font-size: 1.8rem;
        /* 이 크기에서는 이미 맞아 있어 위 보정을 되돌린다 */
        transform: none;
    }
    /* 좁은 화면에서는 KRDS 기본값인 세로 배치(아이콘 위 - 글자 아래)를 쓴다.
       가로로 누우면 포털 쪽은 이름이 넓어 세 버튼이 화면 밖으로 밀리고,
       세종연구원 쪽은 밀리지는 않지만 두 누리집의 머리말 모양이 달라진다.
       두 곳을 같게 두려고 머리말 전체에 건다 */
    #krds-header .header-container .header-actions .btn-navi {
        flex-direction: column;
    }
}

@media (max-width: 360px) {
    /* 더 좁아지면 글자만 한 단계 줄여 오른쪽 버튼과 부딪히지 않게 한다 */
    #krds-header .header-container .logo.portal a .logo-text {
        font-size: 1.6rem;
    }
}

@media (max-width: 400px) {
    #krds-header .header-container .btn-navi {
        padding: 0 0.6rem 0;
    }
}


/* -------------------------------------------------------------- */
/* 통합검색 스타일              */
/* -------------------------------------------------------------- */

#popTotalSchType1 .modal-dialog .modal-conts, #popTotalSch .modal-dialog .modal-conts {
    max-width: 79.2rem;
    top: 40%;
}

#popTotalSchType1 .modal-conts, #popTotalSch .modal-conts {
    padding-inline: 0;
}
#popTotalSchType1 .pop-total-serch-wrap, #popTotalSch .pop-total-serch-wrap {
    --pop-total-serch-width-border: var(--krds-light-border-width-variable-regular);
    --pop-total-serch-color-border: var(--krds-light-color-divider-secondary-light);
    --pop-total-serch-color-background: var(--krds-light-color-surface-secondary-subtler);
    --pop-total-serch-state-up-text: var(--krds-light-color-text-point);
    --pop-total-serch-state-up-icon: var(--krds-light-color-icon-point);
    --pop-total-serch-state-down-text: var(--krds-light-color-text-information);
    --pop-total-serch-state-down-icon: var(--krds-light-color-icon-information);
    --pop-total-serch-state-same-text: var(--krds-light-color-text-basic);
}
#popTotalSchType1 .pop-total-serch-wrap .search-total-top, #popTotalSch .pop-total-serch-wrap .search-total-top {
    position: sticky;
    top: 0;
    background-color: var(--pop-total-serch-color-background);
    padding: 0 0.4rem var(--krds-padding-10);
    border-bottom: var(--pop-total-serch-width-border) solid var(--pop-total-serch-color-border);
}
#popTotalSchType1 .pop-total-serch-wrap .search-tit, #popTotalSch .pop-total-serch-wrap .search-tit {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    font-size: var(--krds-pc-font-size-heading-medium);
    font-weight: var(--krds-font-weight-bold);
    letter-spacing: var(--krds-typo-letter-spacing-1);
    line-height: 1;
    margin-bottom: var(--krds-gap-4);
}
#popTotalSchType1 .modal-dialog .btn-close, #popTotalSch .modal-dialog .btn-close {
    top: var(--krds-gap-12);
    right: var(--krds-gap-12);
}
#popTotalSch .modal-dialog .modal-content .modal-conts {
    padding-inline: 0;
    max-width: 79.2rem;
    top: 40%;
}



/* ------------------------------------------------------------------ */
/* 빠른 메뉴 */
/* ------------------------------------------------------------------ */

.quick-menu {
    position: fixed;
    right: 0;
    top: 34rem;
    z-index: 60;
    width: 5.6rem;
    /* 높이는 항목 수 x 4.8rem 으로 자동 (누리집 5개 = 24rem, 포털 7개 = 33.6rem) */
    height: auto;
    background-color: #1F3365;
    border-top-left-radius: 1.6rem;
    border-bottom-left-radius: 1.6rem;
    transform: translateX(80px);
    opacity: 0;
    visibility: hidden;

    /* 자연스러운 애니메이션 전환 설정 */
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.35s ease,
              visibility 0.35s;
}

.quick-menu.is-active {
transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.quick-menu ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    align-items: flex-end;
}

.quick-menu ul li {
    flex: 0 0 4.8rem;
    height: 4.8rem;
    width: 5.6rem;
    min-height: 0;
    padding-block: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: var(--krds-transition-base);
}

.quick-menu a,
.quick-menu button {
    display: flex;
    align-items: center;
    width: 14.5rem;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.quick-menu a span,
.quick-menu button span {
    opacity: 0;
    transition: var(--krds-transition-base);
}


/* ------------------------------------------------------------------ */
/* 빠른 메뉴 아이콘 */
/* ------------------------------------------------------------------ */

.quick-menu__research {
    background-image: url(../img/component/icon/ico_research_report.png);
    background-size: 2rem 2rem;
}

.quick-menu__Recruitment {
    background-image: url(../img/component/icon/ico_Recruitment.png);
    background-size: 2.2rem 1.6rem;
}

.quick-menu__announcement {
    background-image: url(../img/component/icon/ico_announcement.png);
    background-size: 2rem 1.8rem;
}

.quick-menu__Information {
    background-image: url(../img/component/icon/ico_Information.png);
    background-size: 2.2rem 1.8rem;
}

/* 포털(sjlms_front) 전용 아이콘 - 원본 이미지가 4배 크기라 1/4 로 지정 */
.quick-menu__curriculum {
    background-image: url(../img/component/icon/ico_quick_curriculum.png);
    background-size: 1.8rem 2rem;
}

.quick-menu__notice {
    background-image: url(../img/component/icon/ico_quick_announcement.png);
    background-size: 2rem 1.8rem;
}

.quick-menu__faq {
    background-image: url(../img/component/icon/ico_quick_faq.png);
    background-size: 2.1rem 2.05rem;
}

.quick-menu__completion {
    background-image: url(../img/component/icon/ico_quick_completion.png);
    background-size: 1.6rem 2.175rem;
}

.quick-menu__duty {
    background-image: url(../img/component/icon/ico_quick_duty.png);
    background-size: 2.2rem 1.8rem;
}

.quick-menu__data {
    background-image: url(../img/component/icon/ico_quick_data.png);
    background-size: 2.2rem 2.05rem;
}

.quick-menu__top {
    background-image: url(../img/component/icon/ico_top.png);
    background-size: 1.241rem 1.171rem;
}


/* ------------------------------------------------------------------ */
/* 빠른 메뉴 Hover / Focus */
/* ------------------------------------------------------------------ */

.quick-menu ul li:has(a:hover, a:focus) {
    /* 펼쳤을 때 폭. 11.8rem 이면 '평생교육소식'처럼 6글자는
       아이콘 자리(4.5rem) + 글자 폭을 못 담아 끝 글자가 화면 밖으로 잘림.
       가장 긴 메뉴명(6글자) 기준으로 넓힘 */
    width: 16rem;
    background-color: #192951;
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
}

.quick-menu ul li:has(a:hover, a:focus) a,
.quick-menu ul li:has(a:hover, a:focus) button {
    background-position: 1.6rem center;
    /* 펼친 칸 폭에 맞춤 - 원래 14.5rem 이 칸보다 넓어서 칸 가운데 정렬로
       오른쪽이 화면 밖으로 삐져나갔음 */
    width: 100%;
}

.quick-menu ul li:has(a:hover, a:focus) a span,
.quick-menu ul li:has(a:hover, a:focus) button span {
    opacity: 1;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    margin-left: 4.5rem;
}


/* ------------------------------------------------------------------ */
/* 맨 위로 버튼 */
/* ------------------------------------------------------------------ */

.quick-menu ul li:has(a:hover, a:focus):last-child {
    width: 100%;
}

.quick-menu ul li:has(a:hover, a:focus):last-child a,
.quick-menu ul li:has(a:hover, a:focus):last-child button {
    background-position: center;
}


/* ------------------------------------------------------------------ */
/* 기본 상태 */
/* ------------------------------------------------------------------ */

.quick-menu a span,
.quick-menu button span {
    opacity: 0;
    transition: var(--krds-transition-base);
}


@media (max-width: 1023px) {
    .quick-menu {
        display: none;
    }
}


@media (max-width: 767px) {
    #popTotalSchType1 .modal-dialog, #popTotalSch .modal-dialog {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #popTotalSchType1 .modal-dialog .btn-close, #popTotalSch .modal-dialog .btn-close {
        width: var(--krds-size-height-4);
        height: var(--krds-size-height-4);
        top: var(--krds-gap-6);
        right: var(--krds-gap-5);
    }

    #popTotalSchType1 .modal-content, #popTotalSch .modal-content {
        padding: 0;
    }
    #popTotalSch .modal-dialog .modal-content {
        padding: 0;
    }
    #popTotalSchType1 .modal-dialog .modal-conts, #popTotalSch .modal-dialog .modal-conts {
        padding: 0;
    }
    #popTotalSch .modal-dialog .modal-content .modal-conts {
        padding: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    #popTotalSch .modal-dialog .modal-content .modal-conts {
        padding-inline: 0;
        max-width: 79.2rem;
        top: 40%;
    }
    #popTotalSch .modal-dialog .modal-content .modal-conts .pop-total-serch-wrap {
        padding: 4.4rem 0 0;
    }
    #popTotalSch .modal-dialog .modal-content .modal-conts .pop-total-serch-wrap .search-total-top {
        padding: var(--krds-padding-8) var(--krds-padding-6);
    }
    #popTotalSch .modal-dialog .modal-content .modal-conts .pop-total-serch-wrap .search-total-top .search-tit {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        font-size: var(--krds-mobile-font-size-heading-medium);
        letter-spacing: var(--krds-typo-letter-spacing-1);
    }
        #popTotalSch .modal-dialog .modal-content .modal-conts .pop-total-serch-wrap .search-total-top .sch-form-wrap {
        gap: var(--krds-gap-4);
    }
    #popTotalSchType1 .pop-total-serch-wrap .sch-form-wrap .sch-input .krds-input, #popTotalSch .pop-total-serch-wrap .sch-form-wrap .sch-input .krds-input {
        padding: 0 5.6rem 0 var(--krds-padding-6);
        height: var(--krds-size-height-9);
    }
    #popTotalSch .modal-dialog .modal-content .modal-conts .pop-total-serch-wrap .search-total-top .sch-form-wrap .sch-input .krds-input {
        padding: 0 5.6rem 0 var(--krds-padding-6);
        height: var(--krds-size-height-9);
    }
    #popTotalSchType1 .pop-total-serch-wrap .sch-form-wrap .sch-input .krds-btn, #popTotalSch .pop-total-serch-wrap .sch-form-wrap .sch-input .krds-btn {
        width: var(--krds-size-height-5);
        height: var(--krds-size-height-5);
    }
}

@media (max-width: 576px) {
    #krds-header .header-container .logo.portal a .logo-img {
        width: 14.8rem;
    }
}



@media (max-width: 500px) {
    #krds-header .header-container .logo.portal a .logo-img {
        width: 9rem;
        
    }
}

/* ------------------------------------------------------------------ */
/* 서브페이지 공통: 사이드 내비게이션(LNB)                              */
/* ------------------------------------------------------------------ */
/* 마크업/토글 동작(krds_sideNavigation)은 output.css·ui-script.js의
   KRDS 기본 .krds-side-navigation 컴포넌트를 그대로 재사용함. 여기서는
   이 프로젝트 톤에 맞는 타이틀 박스(네이비)와 선택 강조색(그린)만
   얹어서 커스터마이징함. 서브페이지 어디서든 재사용 가능하도록
   일반화된 선택자로 작성. */
.krds-side-navigation {
    --krds-side-navigation--color-border-selected: #008F55;
    --krds-side-navigation--color-text-selected: #008F55;
    flex: 0 0 26.4rem;
    width: 26.4rem;
    padding-top: 0;
}
.krds-side-navigation .lnb-tit {
    position: relative;
    display: flex;
    align-items: center;
    height: 12.9rem;
    padding: 0 2.4rem;
    border-bottom: none;
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
    background: #002770;
    color: #FFFFFF;
    font-size: 2.4rem;
    overflow: hidden;
    justify-content: center;
}
/* 타이틀 박스 우측의 은은한 원형 장식(로고 대체용 - 별도 이미지 없이
   순수 CSS로만 표현해서 이미지 로드 실패/경로 문제에서 자유로움) */
.krds-side-navigation .lnb-tit::before,
.krds-side-navigation .lnb-tit::after {
    content: '';
    position: absolute;
    
}
.krds-side-navigation .lnb-tit::before {
    background: url(../img/component/icon/sub_side_icon01.png) no-repeat;
    width: 9.566rem;
    height: 3.3rem;
    bottom: 0;
    left: 0;
    background-size: contain;
}
.krds-side-navigation .lnb-tit::after {
    background: url(../img/component/icon/sub_side_icon02.png) no-repeat;
    width: 7.618rem;
    height: 3.5rem;
    bottom: 0.9rem;
    right: 1.6rem;
    background-size: contain;
}
.krds-side-navigation .lnb-list {
    border: 0.1rem solid #C6C6C6;
    border-bottom-left-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
    padding-inline: 2rem;
    padding-block: 2rem;
}
.krds-side-navigation .lnb-list .lnb-item.active {
    border-bottom-color: #E5E8EC;
    border-bottom: none;
}
.krds-side-navigation .lnb-list .lnb-item.active:not(:last-child):not(:has(> .lnb-submenu)) {
    border-bottom: var(--krds-side-navigation--item-border-width) solid var(--krds-side-navigation--item-color-border);
}
.krds-side-navigation .lnb-list .lnb-item .lnb-btn.selected {
    font-weight: 700;
    background-color: transparent;
}

.krds-side-navigation .lnb-list .lnb-item [class*=lnb-toggle][aria-expanded=true] {
    color: var(--krds-side-navigation--color-text-selected);

}
.krds-side-navigation .lnb-list .lnb-item .lnb-submenu .lnb-btn {
    font-size: 1.5rem;
    color: #464C53;
    font-weight: 500;
    padding: 0;
    padding-block: 1.6rem;
}
.krds-side-navigation .lnb-list .lnb-item.active .lnb-submenu {
    background-color: #F3F6F9;
    border-radius: 0.8rem;
    margin-top: 1rem;
}
.krds-side-navigation .lnb-list .lnb-item .lnb-submenu > ul {
    padding-inline: 1.6rem;
}
.krds-side-navigation .lnb-list .lnb-item .lnb-submenu > ul li {
    border-bottom: 0.1rem solid #DDE1E9;
}
.krds-side-navigation .lnb-list .lnb-item .lnb-submenu > ul li:last-child {
    border-bottom: none;
}
.krds-side-navigation .lnb-list .lnb-item:last-child {
    border-bottom: none;
}
.krds-side-navigation .lnb-list .lnb-item .lnb-btn:hover {
  font-weight: 700;
}
.krds-side-navigation .lnb-list .lnb-item .lnb-submenu-lv2 {
    /* 기본 output.css는 .krds-side-navigation 전체(=타이틀 박스 포함)
       기준으로 top:0, height:100%라서 팝업이 열리면 네이비 타이틀
       박스(.lnb-tit, 12.9rem)까지 덮어버림 -> 타이틀 높이만큼 아래에서
       시작하게 내려서 타이틀은 항상 보이고 그 아래 목록 영역만 팝업으로
       전환되게 함 */
    top: 12.9rem;
    height: calc(100% - 12.9rem);

    border: 0.1rem solid #C6C6C6;
    border-bottom-left-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
    padding-inline: 2rem;
    padding-block: 2rem;
}
.krds-side-navigation .lnb-list .lnb-item .lnb-submenu-lv2.active { 
    
}
.krds-side-navigation .lnb-list .lnb-item .lnb-submenu-lv2 .lnb-btn:first-child {
    border-top: none;
}


.area-left {
    margin-left: auto;
}
.area-right {
    margin-right: auto;
}

.btn-Secondary, .btn-Secondary:focus {
    background-color: #E6F4EE;
    border: 0.1rem solid #008F55;
    color: #008F55;
    font-weight: 500 !important;
}
.btn-Secondary:disabled {
    background-color: #CDD1D5;
    color: #6D7882;
    border-color: #CDD1D5;
    font-weight: 500 !important;
}

.btn-Secondary:hover {
    background-color: #EAF7F0;
    color: #008F55;
    font-weight: 500 !important;
}

.btn-Primary,.btn-Primary:focus {
    background-color: #008F55;
    border-color: #008F55;
    color: #FFFFFF;
    font-weight: 500 !important;
}
.btn-Primary:hover {
    background-color: #007244;
    border-color: #007244;
    color: #FFFFFF;
    font-weight: 500 !important;
}
.btn-Primary:active {
    color: #FFFFFF;
    background-color: #005633;
    border-color: #005633;
    font-weight: 500 !important;
}
.btn-Primary:disabled {
    background-color: #CDD1D5;
    color: #6D7882;
    border-color: #CDD1D5;
    font-weight: 500 !important;
}
.btn-Danger,.btn-Danger:focus {
    background-color: #D63D4A;
    border-color: #D63D4A;
    color: #FFFFFF;
    font-weight: 500 !important;
}
.btn-Danger:hover {
    background-color: var(--krds-color-light-danger-60, #BD2C0F);
    border-color: var(--krds-color-light-danger-60, #BD2C0F);
    color: #FFFFFF;
    font-weight: 500 !important;
}
.btn-Danger:disabled {
    background-color: #CDD1D5;
    color: #6D7882;
    border-color: #CDD1D5;
    font-weight: 500 !important;
}
.btn-Tertiary, .btn-Tertiary:focus {
    background-color: #ffffff;
    border-color: #58616A;
    color: #1E2124;
    font-weight: 500 !important;
}
.btn-Tertiary:hover {
    background-color: #F4F6F9;
    border-color: #58616A;
    color: #1E2124;
    font-weight: 500 !important;
}
.btn-Tertiary:disabled {
    background-color: #CDD1D5;
    color: #6D7882;
    border-color: transparent !important;
    font-weight: 500 !important;
}
.btn-Dark, .btn-Dark:focus {
    background-color: #333333 !important;
    border-color: #333333;
    color: #FFFFFF;
    font-weight: 500 !important;
}
.btn-Dark:hover {
    background-color: #4f4f4f !important;
    border-color: #4f4f4f;
    color: #FFFFFF;
    font-weight: 500 !important;
}
.btn-Dark:disabled {
    background-color: #CDD1D5;
    color: #6D7882;
    border-color: #CDD1D5;
    font-weight: 500 !important;
}

.btn-Secondary:focus, .btn-Dark:focus, .btn-Tertiary:focus, .btn-Danger:focus, .btn-Primary:focus {
    box-shadow: var(--krds-box-shadow-outline-inset);
    outline-offset: 0.4rem;
}

@media (max-width: 1023px) {
    .krds-side-navigation {
        display: none;
    }
}

#krds-footer .f-logo {
    width: 17.2rem;
    background-image: url(../img/component/icon/ico_logo_sejong_footer.svg);
    background-position: left;
}
#krds-footer .f-cnt {
    align-items: flex-end;
}
#krds-footer .f-cnt .f-info .info-cs li {
    gap: 0.8rem;
}

#krds-footer .f-btm {
    gap: 1.6rem;
}
#krds-footer .privacy-policy {
    color: #1D4FAE;
    font-weight: 700;
}

@media (max-width: 767px) {
    #krds-footer .f-cnt {
        align-items: flex-start;
    }
}


/* ====================================================================== */
/* GNB(주메뉴) 열림 시 배경 스크롤 완전 잠금                                */
/*                                                                        */
/* output.css는 .is-gnb-web 에 overflow:hidden 만 준다. 그런데 이 프로젝트는 */
/* html, body 에 height:100% 가 걸려 있어서 overflow:hidden 이 붙는 순간     */
/* body가 뷰포트 높이로 잘리고 문서 전체 높이가 화면 한 장 크기로 줄어든다.   */
/* 그러면 브라우저가 스크롤을 0으로 되돌려 화면이 맨 위로 튄다.               */
/*                                                                        */
/* 그래서 height를 콘텐츠 높이로 풀고, body를 보고 있던 위치(-스크롤값)에     */
/* 고정해 화면이 그 자리에 그대로 멈춰 있게 한다.                            */
/* 다만 그러면 문서 맨 위에 있는 헤더가 화면 밖으로 밀려나 메뉴가 안 보이므로, */
/* 헤더만 transform으로 같은 값만큼 되돌려 상단에 붙여 놓는다.               */
/* transform은 레이아웃에 영향을 주지 않아 배경이 밀리지 않는다.              */
/*                                                                        */
/* --gnb-lock-top / --gnb-lock-offset 값은 ui-script.js 의 toggleBackdrop   */
/* 에서 넣고 뺀다.                                                          */
/* ====================================================================== */
@media (min-width: 1024px) {
    body.is-gnb-web {
        position: fixed;
        top: var(--gnb-lock-top, 0px);
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
    }
    body.is-gnb-web #krds-header {
        position: relative;
        z-index: 100;
        transform: translateY(var(--gnb-lock-offset, 0px));
    }
}


/* ====================================================================== */
/* 팝업(모달) 열림 시 배경 스크롤 잠금                                      */
/*                                                                        */
/* ui-script.js 가 body 에 .scroll-no 를 붙이는데 정작 이 클래스의 스타일이  */
/* 어디에도 없어서 실제로는 잠기지 않고 오른쪽 스크롤바가 그대로 남아 있었다. */
/*                                                                        */
/* GNB 때와 같은 문제가 있다. 이 프로젝트는 html, body 에 height:100% 가     */
/* 걸려 있어서 overflow:hidden 만 주면 body 가 뷰포트 높이로 잘리고 문서     */
/* 높이가 줄어 스크롤이 맨 위로 튄다. 그래서 height 를 콘텐츠 높이로 풀고    */
/* body 를 보고 있던 위치(-스크롤값)에 고정한다.                            */
/* 팝업은 화면 전체를 덮는 fixed 요소라 헤더를 따로 붙잡을 필요가 없다.      */
/*                                                                        */
/* --modal-lock-top 값은 ui-script.js 의 openModal/closeModal 에서 넣고 뺌  */
/* ====================================================================== */
body.scroll-no {
    position: fixed;
    top: var(--modal-lock-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}
/* ==================================================================== */
/* 펼친 메뉴판 아래 띠                                                   */
/*                                                                      */
/* 원래는 '신규 서비스' 배지와 '○○ 전체보기' 링크가 있었는데 갈 곳이     */
/* 없었다. 그 자리에 이 갈래가 무엇인지 한 줄로 풀어 주는 설명을 둔다     */
/* ==================================================================== */
/* 띠 바탕. 공용값(회색)보다 옅은 남색 기운이 도는 색으로 바꿔,
   앞에 붙는 남색 안내 표시와 한 덩어리로 보이게 한다 */
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-banner {
    background: #F5F6F9;
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-banner .gnb-sub-desc {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.6;
    /* 바탕 #F5F6F9 에서 #464C53 은 8.2:1 */
    color: #464C53;
    word-break: keep-all;
}
/* 안내 글임을 한눈에 알 수 있게 앞에 남색 안내 표시를 둔다.
   가운데 흰 느낌표를 살려야 해서 가림막(mask)이 아니라 그림 자체를 깐다.
   글자가 아니라 꾸밈이라 보조기기에는 잡히지 않는다.
   첫 줄 글자와 가운데가 맞도록 위 여백을 조금 준다 */
.krds-main-menu .gnb-toggle-wrap .gnb-sub-banner .gnb-sub-desc::before {
    content: "";
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.35rem;
    background-image: url(../img/component/icon/ico_information_navy.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/* ==================================================================== */
/* 검색 입력칸의 브라우저 기본 지우기 단추                                 */
/* ==================================================================== */
/* input[type="search"] 는 글자를 넣으면 브라우저가 X 단추를 스스로 그린다.
   마크업에 없어 시안에도 없고, 크롬·사파리에만 나오고 파이어폭스에는 안 나와
   브라우저마다 검색칸 모양이 달라진다. 옆의 돋보기 단추와도 붙어 보인다.
   KRDS 공용 CSS 가 input[type=text] 의 IE ::-ms-clear 를 이미 끄고 있어
   같은 취지로 type="search" 까지 맞춘다.
   메인 두 화면은 sub.css 를 부르지 않으므로 모든 화면이 부르는 여기에 둔다 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
input[type="search"]::-ms-clear {
    display: none;
}

/* ==================================================================== */
/* 누리집 안내지도 레이어                                                 */
/* ==================================================================== */
/* 머리말의 '누리집안내지도' 를 누르면 열리는 전체화면 레이어.
   시안대로 사진 위에 남색(#0F367F)을 덮어 글자가 또렷하게 읽히게 한다.
   사진을 그대로 깔면 대비가 들쭉날쭉해 흰 글자가 묻힌다 */
.krds-modal.pop-sitemap {
    background-image: linear-gradient(rgba(15, 54, 127, 0.92), rgba(15, 54, 127, 0.92)),
        url("../img/map_background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.krds-modal[data-type="full"].pop-sitemap .modal-header {
    padding: 16rem 4rem 0;
}
.pop-sitemap .modal-title {
    max-width: 120rem;
    margin: 0 auto;
    font-size: 2.5rem !important;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}
.krds-modal[data-type="full"].pop-sitemap .modal-conts {
    padding: 2.4rem 4rem 8rem;
    overflow-y: auto;
}
/* 가장 긴 2뎁스 이름(포털의 '평생교육 추진기반 구축' 160px)이 한 줄에
   들어가야 해서 목록 폭을 시안 값(160rem)까지 쓴다. 1456px 화면에서는
   화면 폭에 막혀 1376px 로 잡히고 칸 하나가 173px 이 된다 */
.pop-sitemap .sitemap-list {
    max-width: 120rem;
    margin: 0 auto;
}
/* 1뎁스 한 줄.
   시안에서 구분선이 1뎁스 아래는 지나지 않고 2뎁스 칸부터 시작한다.
   그래서 줄에 border 를 주지 않고, 2뎁스 묶음 쪽에만 선을 깐다.
   치수는 시안 값을 0.75배로 줄여 썼다. 시안이 2560px 캔버스에 그려져
   그 픽셀을 그대로 쓰면 실제 화면(1456px 안팎)에서 혼자 넓게 퍼져 보인다.
   아래 '관련 사이트' 레이어가 이미 같은 비율이라 둘을 맞췄다.
   줄 높이 12.9rem -> 9.6rem, 칸 15.2rem -> 11.4rem, 1뎁스 23.1rem -> 17.2rem */
.pop-sitemap .sitemap-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 4.2rem 0 0;
}
.pop-sitemap .sitemap-d1 {
    flex: 0 0 16rem;
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
}
.pop-sitemap .sitemap-d1 a {
    color: inherit;
    text-decoration: none;
}
/* 2뎁스는 한 줄에 최대 7개까지 놓이고, 8번째부터는 아래 줄로 내려간다.
   이름 하나는 반드시 한 줄로 둔다(a 에 white-space: nowrap).
   그래서 칸 너비를 글자 길이에 맞추고, 최소 너비를 '한 줄의 7분의 1' 로
   잡아 한 줄에 7개를 넘지 않게 한다. 이름이 길면 그만큼 자리를 차지해
   한 줄에 더 적게 들어가고 나머지는 아래 줄로 내려간다.
   grid 로 7칸을 고정하면 긴 이름이 든 줄만 묶음이 넓어져 아래 선 길이가
   줄마다 달라졌다. flex 로 두면 묶음 너비가 늘 같다.
   아래 선은 이 묶음이 갖고 있어 1뎁스 아래를 지나지 않는다 */
.pop-sitemap .sitemap-d2 {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem 1.6rem;
    margin: 0;
    padding: 0 0 4.2rem;
    list-style: none;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
}
.pop-sitemap .sitemap-d2 > li {
    flex: 0 0 auto;
    min-width: calc((100% - 9.6rem) / 7);
    position: relative;
    padding-left: 1.1rem;
}
/* 앞의 점은 눈으로만 읽는 기호라 요소를 두지 않고 CSS 로 그린다 */
.pop-sitemap .sitemap-d2 > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.3rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
}
.pop-sitemap .sitemap-d2 a,
.pop-sitemap .sitemap-d2 span {
    display: inline-block;
    white-space: nowrap;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #fff;
    text-decoration: none;
    word-break: keep-all;
}
/* 올렸을 때·초점일 때만 굵게 + 밑줄. 시안의 강조 상태와 같다 */
.pop-sitemap .sitemap-d2 a:hover,
.pop-sitemap .sitemap-d2 a:focus-visible,
.pop-sitemap .sitemap-d1 a:hover,
.pop-sitemap .sitemap-d1 a:focus-visible {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
}
.pop-sitemap .btn-close .svg-icon {
    background-color: #fff;
}
/* 칸이 7개 다 들어가지 않는 폭에서는 개수를 줄인다.
   칸 너비를 고정해 두었으므로 개수만 바꾸면 세로줄이 그대로 맞는다 */
@media (max-width: 1439px) {
    .pop-sitemap .sitemap-d2 {
        grid-template-columns: repeat(auto-fill, minmax(17.2rem, 1fr));
    }
}
@media (max-width: 767px) {
    .krds-modal[data-type="full"].pop-sitemap .modal-header {
        padding: 6.4rem 2rem 0;
    }
    .pop-sitemap .modal-title {
        font-size: 2.4rem;
    }
    .krds-modal[data-type="full"].pop-sitemap .modal-conts {
        padding: 2.4rem 2rem 4rem;
    }
    /* 좁은 화면에서는 1뎁스를 위에 두고 2뎁스를 아래로 내린다.
       가로로 나란히 두면 2뎁스 칸이 글자 한두 개 너비밖에 안 남는다 */
    .pop-sitemap .sitemap-row {
        flex-direction: column;
        gap: 1.6rem;
        padding-top: 2.8rem;
    }
    .pop-sitemap .sitemap-d1 {
        flex: 0 0 auto;
        font-size: 1.8rem;
    }
    /* 세로로 쌓이면 이 묶음의 너비가 글자 길이만큼으로 줄어, 줄마다 아래
       구분선 길이가 달라진다. 너비를 꽉 채워 선이 가지런히 맞게 한다 */
    .pop-sitemap .sitemap-d2 {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem 1.6rem;
        padding-bottom: 2.8rem;
    }
    /* 1뎁스 아래는 선을 비우지 않고 줄 전체를 가로지른다.
       넓은 화면은 1뎁스가 옆에 있어 비웠지만, 여기서는 위에 있어 비울 자리가 없다 */
    .pop-sitemap .sitemap-d2 > li {
        padding-left: 1.1rem;
    }
    .pop-sitemap .sitemap-d2 a {
        font-size: 1.6rem;
    }
}


/* ==================================================================== */
/* 관련 사이트 · 분야별 업무사이트 레이어                                  */
/* ==================================================================== */
/* 꼬리말의 두 단추로 여는 전체화면 레이어. 둘은 제목과 목록만 다르다 */
.krds-modal.pop-site-list {
    background-color: #EEF2F7;
}
.krds-modal[data-type="full"].pop-site-list .modal-header {
    padding: 16rem 4rem 0;
}
.pop-site-list .modal-title {
    max-width: 120rem;
    margin: 0 auto;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}
.krds-modal[data-type="full"].pop-site-list .modal-conts {
    padding: 4rem 4rem 8rem;
    overflow-y: auto;
}
/* 세로로 채운 뒤 다음 칸으로 넘어간다(시안의 차례와 같다).
   grid 로 하면 가로로 먼저 채워져 차례가 달라진다 */
.pop-site-list .site-list {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    columns: 4;
    column-gap: 2.4rem;
}
.pop-site-list .site-list > li {
    break-inside: avoid;
    margin-bottom: 0.8rem;
}
.pop-site-list .site-link {
    position: relative;
    display: block;
    padding: 1.125rem 1.6rem 1.125rem 2.4rem;
    border-radius: 0.8rem;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    text-decoration: none;
    word-break: keep-all;
}
.pop-site-list .site-link::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: #1E2124;
}
/* 시안의 Hover / Pressed 견본 색 */
.pop-site-list .site-link:hover,
.pop-site-list .site-link:focus-visible {
    background-color: #CDD7E4;
}
.pop-site-list .site-link:active {
    background-color: #B4C4D6;
}

/* 누리집 안내지도·분야별 업무사이트·관련 사이트 세 레이어의 닫기 단추 자리.
   오른쪽 끝을 본문(.sitemap-list / .site-list, 120rem)의 오른쪽 모서리에
   맞춘다. 고정값(8rem)으로 두면 넓은 화면에서는 본문보다 48px 밖으로,
   1280px 에서는 40px 안으로 들어가 제목 줄과 어긋나 보였다.
   본문이 화면 폭에 막히는 구간에서는 좌우 여백(4rem)과 같아진다 */
.krds-modal.pop-sitemap .modal-dialog .btn-close,
.krds-modal.pop-site-list .modal-dialog .btn-close {
    top: 8rem;
    right: max(4rem, calc((100% - 120rem) / 2));
}



@media (max-width: 1024px) {
    .krds-modal[data-type="full"].pop-site-list .modal-header {
        padding: 2.4rem 1.6rem 0;
    }
    .krds-modal[data-type="full"].pop-site-list .modal-conts {
        padding: 2.4rem 1.6rem 4rem;
    }
    .krds-modal[data-type="full"].pop-sitemap .modal-header {
        padding: 2.4rem 1.6rem 0;
    }
    .pop-site-list .site-list {
        columns: 2;
    }
    .pop-site-list .modal-title {
        font-size: 1.9rem !important;
    }
    .krds-modal[data-type=full] .modal-dialog .btn-close {
        width: 2.4rem;
        height: 2.4rem;
        top: 2.4rem;
        right: 1.6rem;
    }
    .pop-sitemap .modal-title {
        font-size: 1.9rem !important;
    }
    .krds-modal[data-type="full"].pop-sitemap .modal-conts {
        padding: 2.4rem 1.6rem 4rem;
    }
}




@media (max-width: 767px) {
    #krds-header .header-container .logo {
        width: 13.7rem;
        height: 3.8rem;
    }
    .pop-site-list .site-list {
        columns: 1;
    }
    
}

/* ==================================================================== */
/* 스크롤 시 헤더 아래 선이 2줄(2px)로 두꺼워지는 문제                    */
/* KRDS 는 스크롤하면(#wrap.scroll-down / scroll-up) .header-in 을 fixed  */
/* 로 띄우면서 아래 선(1px)을 새로 긋는데, 그 바로 위에 GNB(.krds-main-menu)*/
/* 의 원래 아래 선(1px)이 붙어 있어서 선이 겹쳐 2px 로 보임.              */
/* 스크롤 상태일 때만 GNB 쪽 선을 지우고 .header-in 선 하나만 남김.        */
/* (모바일은 GNB 가 안 보이고 .header-in 선만 있으므로 PC 에서만 적용)    */
/* ==================================================================== */
@media (min-width: 1024px) {
    #wrap[class*=scroll] #krds-header:not(.sample) .krds-main-menu {
        border-bottom-color: transparent;
    }
}

/* ==================================================================== */
/* 마우스로 누를 때는 포커스 테두리 숨김 / 키보드(Tab)로 이동할 때만 표시   */
/* KRDS 는 *:focus 에 파란 테두리를 걸어서, 링크·버튼을 마우스로 눌러도    */
/* 포커스가 남아 있는 동안 테두리가 계속 보였음.                          */
/* :focus-visible 은 브라우저가 "키보드 사용"이라고 판단할 때만 켜지므로,  */
/* 그 외(마우스 클릭)일 때만 테두리를 지움.                               */
/* - 키보드 사용자에게는 그대로 보여서 웹접근성(초점의 시각적 구분) 유지  */
/* - 입력창(input, textarea 등)은 마우스로 눌러도 :focus-visible 이라      */
/*   지금처럼 테두리가 보임                                              */
/* ==================================================================== */
*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ==================================================================== */
/* 준비 중 안내 팝업 (세종연구원 · 세종인재평생교육포털 공통)           */
/* - 준비 중인 링크·단추에 data-prepare 속성만 붙이면 누를 때 이 팝업이 뜸 */
/*   (팝업 마크업은 ui-script.js 가 처음 쓸 때 만들어 body 끝에 넣음)       */
/* - 단추: 주 단추 btn-Primary large 값 / 아이콘 바탕: btn-Secondary 연초록   */
/* - 어두운 배경: KRDS 모달과 같은 검정 75%                                */
/* - 다른 스타일과 겹치지 않게 선택자는 모두 .prepare- 로 시작              */
/* ==================================================================== */
.prepare-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2.4rem;
    font-family: var(--krds-font-family-base, "Pretendard GOV", sans-serif);
    color: #1E2124;
    letter-spacing: -0.01em;
}
.prepare-modal.is-open {
    display: flex;
}
.prepare-modal *,
.prepare-modal *::before,
.prepare-modal *::after {
    box-sizing: border-box;
}
.prepare-modal__back {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    animation: prepare-fade 0.2s ease-out;
}
.prepare-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 42rem;
    padding: 4.8rem 3.2rem 3.2rem;
    border-radius: 1.2rem;
    background: #FFFFFF;
    box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.18), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
    text-align: center;
    animation: prepare-pop 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* 아이콘 - 연초록 원 안에 시계 ('곧 열린다') */
.prepare-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.2rem;
    height: 7.2rem;
    margin: 0 auto 2.4rem;
    border-radius: 50%;
    background: #E6F4EE;
    color: #008F55;
}
.prepare-modal__icon svg {
    width: 3.6rem;
    height: 3.6rem;
}
.prepare-modal__title {
    margin: 0;
    color: #1E2124;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
}
.prepare-modal__desc {
    margin: 1.2rem 0 0;
    color: #464C53;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.6;
    word-break: keep-all;
    text-wrap: balance;
}
.prepare-modal__menu {
    color: #1E2124;
    font-weight: 700;
}
.prepare-modal__btns {
    display: flex;
    padding-top: 3.2rem;
}
.prepare-modal__ok {
    flex: 1 1 auto;
    height: 5.6rem;
    padding: 0 2.4rem;
    border: 0.1rem solid #008F55;
    border-radius: 0.8rem;
    background: #008F55;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 1.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.prepare-modal__ok:hover {
    border-color: #007244;
    background: #007244;
}
.prepare-modal__ok:active {
    border-color: #005633;
    background: #005633;
}
.prepare-modal__close {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6D7882;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.prepare-modal__close:hover {
    background: #F4F5F6;
    color: #1E2124;
}
.prepare-modal__close svg {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto;
}
.prepare-modal :is(.prepare-modal__ok, .prepare-modal__close):focus-visible {
    outline: 0.2rem solid #1E2124;
    outline-offset: 0.2rem;
}
/* 팝업이 열려 있는 동안 뒤 화면 스크롤 막기 */
html.prepare-lock,
html.prepare-lock body {
    overflow: hidden;
}
@keyframes prepare-fade {
    from { opacity: 0; }
}
@keyframes prepare-pop {
    from { opacity: 0; transform: translateY(0.8rem) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
    .prepare-modal__back,
    .prepare-modal__dialog {
        animation: none;
    }
}
@media (max-width: 767px) {
    .prepare-modal__dialog {
        padding: 4rem 2.4rem 2.4rem;
    }
    .prepare-modal__icon {
        width: 6.4rem;
        height: 6.4rem;
        margin-bottom: 2rem;
    }
    .prepare-modal__icon svg {
        width: 3.2rem;
        height: 3.2rem;
    }
    .prepare-modal__title {
        font-size: 2.2rem;
    }
    .prepare-modal__desc {
        font-size: 1.6rem;
    }
    .prepare-modal__btns {
        padding-top: 2.8rem;
    }
    .prepare-modal__ok {
        height: 5.2rem;
        font-size: 1.7rem;
    }
}


/* ==================================================================== */
/* 헤더 [마이페이지] 펼침 메뉴 (.my-drop) - 포털·누리집 공통              */
/* KRDS 기본 드롭다운 모양 그대로라 이름·메뉴·로그아웃이 글자만 늘어서 있었음. */
/*  - 단추 오른쪽 끝에 맞춰 열고(가운데 정렬이면 메뉴 줄을 덮음) 폭을 넉넉히  */
/*  - 위: 동그란 사람 아이콘 + '홍길동 님'(이름 굵게)                       */
/*  - 가운데: [마이페이지] 한 줄 단추(아이콘 + 화살표)                       */
/*  - 아래: 구분선 아래 [로그아웃] 한 줄 단추                               */
/* ==================================================================== */
#krds-header .my-drop .drop-menu {
    left: auto;
    right: 0;
    min-width: 24rem;
    padding: 0.8rem;
    border: 0.1rem solid #E5E8EC;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.12);
    transform: none;
}
#krds-header .my-drop .drop-menu::before {
    left: auto;
    right: 4rem;
    margin-left: 0;
    border-color: #E5E8EC;
    border-top-color: transparent;
    border-left-color: transparent;
    background-color: #FFFFFF;
}
#krds-header .my-drop .drop-in {
    gap: 0.4rem;
}
#krds-header .my-drop .drop-top {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.2rem 1.6rem;
    border-bottom: 0.1rem solid #E5E8EC;
}
#krds-header .my-drop .my-avatar {
    display: inline-flex;
    flex: 0 0 4rem;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #EEF2F7;
}
#krds-header .my-drop .my-avatar .svg-icon {
    width: 2rem;
    height: 2rem;
    background-color: #063A74;
}
#krds-header .my-drop .my-name {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #464C53;
    word-break: keep-all;
}
#krds-header .my-drop .my-name strong {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
#krds-header .my-drop .drop-list .item-link,
#krds-header .my-drop .drop-bottom .krds-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    height: 4.8rem;
    padding: 0 1.2rem;
    border-radius: 0.8rem;
    background-color: transparent;
    font-size: 1.6rem;
    font-weight: 500;
    color: #1E2124;
    text-decoration: none;
}
#krds-header .my-drop .drop-list .item-link .svg-icon,
#krds-header .my-drop .drop-bottom .krds-btn .svg-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    background-color: #464C53;
}
#krds-header .my-drop .drop-list .item-link .ico-angle {
    width: 1.6rem;
    height: 1.6rem;
    margin-left: auto;
    background-color: #8A949E;
}
#krds-header .my-drop .drop-list .item-link:hover,
#krds-header .my-drop .drop-bottom .krds-btn:hover {
    background-color: #F4F5F6;
}
#krds-header .my-drop .drop-list .item-link:hover .svg-icon:not(.ico-angle) {
    background-color: #063A74;
}
#krds-header .my-drop .drop-bottom {
    justify-content: stretch;
    padding: 0.4rem 0 0;
    border-top: 0.1rem solid #E5E8EC;
}
#krds-header .my-drop .drop-bottom .krds-btn {
    justify-content: flex-start;
    height: 4.8rem !important;
    min-height: 4.8rem;
    padding: 0 1.2rem !important;
    color: #464C53;
}
#krds-header .my-drop .drop-bottom .krds-btn:hover {
    color: #1E2124;
}