@charset "utf-8";
/*
  sub.css
  서브페이지(콘텐츠형 페이지) 공통 스타일.
  현재는 통합검색 결과 페이지(Integrated_search.html) 전용 스타일을 담고 있음.
  반드시 output.css, font.css, common.css '뒤에' 불러올 것.

  참고: krds-input, krds-btn, krds-badge, krds-pagination, breadcrumb,
  tab(role=tablist 구조) 등 krds- 접두사 클래스의 기본 모양은 output.css가
  이미 제공하므로 여기서는 값을 통째로 재정의하지 않고, 이 페이지 레이아웃에
  맞게 필요한 부분만 얹거나 미세조정함.
*/

/* ------------------------------------------------------------------ */
/* 0) 공통 레이아웃                                                     */
/* ------------------------------------------------------------------ */
/* 시안의 본문 칸은 120rem 이다. 좌우 여백 2.4rem 을 이 안에서 빼면
   내용이 115.2rem 으로 줄어, 탭 줄과 결과 목록이 시안보다 48px 좁아진다.
   여백만큼 폭을 늘려 내용이 120rem 을 그대로 쓰게 한다.
   좁은 화면에서는 화면 폭에 막히므로 여백은 그대로 제 몫을 한다 */
.main-integrated-search .inner {
    max-width: 124.8rem;
    margin-inline: auto;
    padding-inline: 2.4rem;
}

/* ------------------------------------------------------------------ */
/* 1) 페이지 타이틀 + 브레드크럼                                        */
/* ------------------------------------------------------------------ */

.sch-head .krds-breadcrumb-wrap {
    margin-bottom: 4rem;
}
.sch-title {
    margin: 0;
    font-size: 4rem;
    line-height: 1.5;
    font-weight: 700;
    color: #1E2124;
    margin-bottom: 4.8rem;
}

/* ------------------------------------------------------------------ */
/* 2) 검색창                                                            */
/* ------------------------------------------------------------------ */
.sch-search-area {
    background-color: #EEF2F7;
    padding-block: 6.4rem;
    margin-bottom: 6.4rem;
}
.sch-form-wrap {
    max-width: 79.2rem;
    margin-inline: auto;
}
.sch-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.sch-input .krds-input {
    width: 100%;
    height: 8rem;
    padding: 0 6.4rem 0 2.4rem;
    border: 0.1rem solid #58616A;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
    font-size: 2.4rem;
    color: #1E2124;
    box-sizing: border-box;
}
.sch-input .krds-input::placeholder {
    /* 접근성 수정: 기존 #9AA0AC는 흰 배경과 명도대비 2.63:1로 WCAG AA
       기준(4.5:1) 미달이라 저시력 사용자에게 잘 안 보임 -> 4.83:1로
       통과하는 색으로 변경. 원래 있던 "font-size: 400"은 유효하지 않은
       값(400은 font-weight 값)이라 브라우저가 무시하고 있었던 오타라서
       font-weight로 고침. */
    color: #6B7280;
    font-weight: 400;
}
.sch-input .krds-input:focus {
    outline: 0.2rem solid #0B5FCC;
    outline-offset: 0.2rem;
    
}
.sch-input .krds-btn.ico-search {
    position: absolute;
    right: 2.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.sch-input .krds-btn.ico-search .svg-icon.ico-sch {
    width: 100%;
    background-color: #33363D;
}
.sch-input .krds-btn.ico-search:focus-visible {
    outline: 0.2rem solid #0B5FCC;
    outline-offset: 0.2rem;
}

/* 모바일 전체메뉴 머리 - 시안(main_menu__mo)
   - 로그인 전 "로그인을 해주세요"는 링크(a)라 KRDS 굵은 글씨(button 만 대상)가 안 걸려
     로그인 후 "로그아웃"과 굵기가 달랐음 -> 둘 다 굵게 */
.krds-main-menu-mobile .gnb-wrap .gnb-header .gnb-login a {
    font-weight: var(--krds-font-weight-bold);
}
/* 로그인 후 "이름님 | 로그아웃" - 이름과 로그아웃 사이를 띄우고 가는 세로선으로 구분,
   로그아웃은 이름보다 한 단계 가볍게 해서 이름이 먼저 읽히게 */
.krds-main-menu-mobile .gnb-wrap .gnb-header .gnb-login:has(.user) {
    gap: 0.8rem; /* 로그아웃 버튼 자체 안쪽 여백이 있어 세로선 양옆이 같아 보이게 */
}
.krds-main-menu-mobile .gnb-wrap .gnb-header .gnb-login .user {
    display: inline-flex;
    align-items: center;
    gap: 1.6rem;
}
.krds-main-menu-mobile .gnb-wrap .gnb-header .gnb-login .user::after {
    content: "";
    flex: none;
    width: 0.1rem;
    height: 1.4rem;
    background-color: #CDD1D5;
}
.krds-main-menu-mobile .gnb-wrap .gnb-header .gnb-login .user ~ button {
    gap: 0.6rem;
    color: #464C53;
    font-weight: 500;
}
.krds-main-menu-mobile .gnb-wrap .gnb-header .gnb-login .user ~ button .svg-icon {
    background-color: #464C53;
}

/* 모바일 전체메뉴(.krds-main-menu-mobile) 안의 메뉴 검색칸
   - 위 통합검색 페이지용 큰 검색창(높이 8rem, 글자 2.4rem)이 서브 화면에서만 전체메뉴 검색칸까지 덮어
     메인(sub.css 를 안 씀)보다 훨씬 크게 나왔음 -> KRDS 기본 입력칸 크기로 되돌림 (메인과 같은 모양) */
.krds-main-menu-mobile .sch-input .krds-input {
    height: var(--krds-input--size-height-large);
    padding: 0 var(--krds-size-height-7) 0 var(--krds-padding-6);
    border-color: var(--krds-input--color-border);
    border-radius: var(--krds-input--radius-large);
    font-size: var(--krds-input--pc-font-size-large);
}
.krds-main-menu-mobile .sch-input .krds-btn.ico-search {
    right: var(--krds-gap-5);
    width: var(--krds-icon--size-large);
    height: var(--krds-icon--size-large);
}
.krds-main-menu-mobile .sch-input .krds-btn.ico-search .svg-icon.ico-sch {
    width: var(--krds-icon--size-large);
    height: var(--krds-icon--size-large);
    background-color: var(--krds-light-color-text-basic);
}
@media (max-width: 767px) {
    .krds-main-menu-mobile .sch-input .krds-input {
        font-size: var(--krds-input--mobile-font-size-large);
    }
}

/* ------------------------------------------------------------------ */
/* 3) 채움형 탭(.tab.fill) 공통 - 고른 탭 표시                            */
/* ------------------------------------------------------------------ */
/* KRDS 기본값은 파란 채움인데 이 누리집은 초록을 쓴다.                     */
/* 조직도·강의홈·수강이력·장학금·회원정보 수정 등 채움형 탭을 쓰는 화면이   */
/* 여럿이라 화면마다 따로 두지 않고 여기서 한 번만 지정한다.                */
/* 그림자는 시안 값 그대로 - X 0 / Y 14 / 흐림 14 / 번짐 0 / #008F55 20%   */
/* (알약형 .tab.pill 은 모양이 달라 여기에 걸지 않는다)                    */
.tab.fill .active .btn-tab {
    background-color: #008F55;
    border-color: #008F55 !important;
    color: var(--krds-tab--fill-button-color-text);
    box-shadow: 0 1.4rem 1.4rem rgba(0, 143, 85, 0.2);
}
/* 마우스로 누른 직후에도 그림자 유지
   common.css 의 *:focus:not(:focus-visible) { box-shadow: none !important } 가
   (마우스 클릭 때 KRDS 초점 테두리를 숨기려는 규칙) 방금 누른 탭의 그림자까지 지워서,
   다른 곳을 눌러 초점이 빠져야 그림자가 생겼음 → 고른 탭은 초점이 있어도 그림자를 다시 그림
   (키보드 Tab 이동 때의 초점 테두리 :focus-visible 은 그대로) */
.tab.fill .active .btn-tab:focus:not(:focus-visible) {
    box-shadow: 0 1.4rem 1.4rem rgba(0, 143, 85, 0.2) !important;
}
/* 탭 줄(.tab > ul)에는 탭이 많을 때 좌우로 밀어 보라고 overflow-x:auto 가
   걸려 있다. 넘치는 것을 잘라내는 상자라서 위 그림자가 통째로 잘려 나간다.
   넘침을 풀면 탭 밀기가 깨지므로, 그림자가 들어앉을 만큼 아래 여백을 주고
   같은 크기의 음수 바깥 여백으로 자리를 되돌린다.
   2.4rem = 그림자 Y 1.4 + 흐림의 절반 0.7.
   좌우까지 넓히지는 않는다. 강의홈 같은 화면은 탭 줄에
   .le-tab-wrap > .le-tab > ul { max-width: 100% } 이 걸려 있어 넓힌 폭이
   도로 잘리고, 그만큼 줄 오른쪽 끝이 아래 내용과 어긋나기 때문이다.
   대신 맨 앞·맨 뒤 탭의 그림자는 옆으로 번지는 0.7rem 만큼 잘린다 */
.tab.fill > ul {
    margin-bottom: -2.4rem;
    padding-bottom: 2.4rem;
}

/* ------------------------------------------------------------------ */
/* 4) 검색결과 탭 (세그먼트 컨트롤형 필터)                                */
/* ------------------------------------------------------------------ */
/* KRDS 기본 tab 컴포넌트는 밑줄형(line)인데, 이 페이지 디자인은 하나의
   둥근 테두리 안에 구분선으로만 나뉜 세그먼트 컨트롤 모양이라 시각
   스타일만 새로 정의함. 접근성 마크업(role=tablist/tab, aria-selected,
   aria-controls)은 KRDS tab 컴포넌트 그대로 재사용. */
.sch-tab-area .tab.pill.full ul[role="tablist"] {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0 0 0.8rem;
    padding: 0;
    border: 0.1rem solid #B1B8BE;
    border-radius: 0.8rem;
    /* 활성 탭의 초록 배경이 둥근 모서리 밖으로 안 삐져나오게 잘라 내되,
       탭이 넘칠 때는 좌우로 밀 수 있어야 해서 가로만 열어 둔다.
       밀기 막대는 좌우 화살표 단추가 대신하므로 감춘다 */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background-color: #FFFFFF;
    width: 100%;
}

.sch-tab-area .tab.pill.full ul[role="tablist"]::-webkit-scrollbar {
    display: none;
}
/* 좌우로 밀 때는 칸이 눌리지 않고 글자만큼 자리를 갖는다 */
.sch-tab-area.is-scrollable .tab.pill.full li {
    flex: 0 0 auto;
}
/* 접근성 수정: role="tab"/aria-selected/aria-controls는 실제로 포커스를
   받는 .btn-tab(button)에 있어야 스크린리더가 탭 위젯으로 제대로 인식함
   (WAI-ARIA APG Tabs 패턴). <li>는 role="presentation"으로 남기고 CSS도
   li[role="tab"]이 아닌 그냥 li + .btn-tab[aria-selected] 조합으로 바꿔서
   ".active" 클래스를 li에 따로 유지·동기화할 필요 없이 aria-selected
   하나만 상태의 단일 소스가 되게 정리함. */
.sch-tab-area .tab.pill.full li {
    position: relative;
    flex: 1 1 auto;
}
/* 세그먼트 사이 구분선. 활성 탭 자신의 오른쪽, 그리고 활성 탭 "바로
   앞" 탭의 구분선(=활성 탭의 왼쪽 경계)은 초록 배경 위에 선이 겹쳐
   보이지 않도록 숨김(:has()는 최신 브라우저 기준 - 크롬/엣지/사파리/
   파이어폭스 121+ 지원). */
.sch-tab-area .tab.pill.full li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.1rem;
    height: 100%;
    background-color: #D8DBE3;
}
.sch-tab-area .tab.pill.full li:has(> .btn-tab[aria-selected="true"])::after,
.sch-tab-area .tab.pill.full li:has(+ li > .btn-tab[aria-selected="true"])::after {
    display: none;
}
.sch-tab-area .tab.pill.full .btn-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: 5.6rem;
    padding: 0 2.8rem;
    border: none;
    background-color: transparent;
    color: #464C53;
    font-size: 1.9rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--krds-transition-base, all 0.15s ease);
}
.sch-tab-area .tab.pill.full .btn-tab .cnt {
    font-weight: 700;
    color: inherit;
}
.sch-tab-area .tab.pill.full .btn-tab[aria-selected="true"] {
    background-color: #008F55;
    color: #FFFFFF;
    font-weight: 700;
}
.sch-tab-area .tab.pill.full .btn-tab:hover {
    color: #008F55;
}
.sch-tab-area .tab.pill.full .btn-tab[aria-selected="true"]:hover {
    color: #FFFFFF;
}
.sch-tab-area .tab.pill.full .btn-tab:focus-visible {
    outline: 0.2rem solid #0B5FCC;
    outline-offset: -0.2rem;
}

/* ------------------------------------------------------------------ */
/* 4) 검색결과 목록                                                      */
/* ------------------------------------------------------------------ */
.sch-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sch-result-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "top   top"
        "body  thumb";
    column-gap: 2.4rem;
    row-gap: 0.8rem;
    padding-block: 4rem;
    border-bottom: 0.1rem solid #8A949E;
}
.sch-result-item .item-top {
    grid-area: top;
}
.sch-result-item .item-body {
    grid-area: body;
}
.sch-result-item .item-thumb {
    grid-area: thumb;
}
.sch-result-list .sch-result-item:first-child {
    padding-top: 0;
}
.item-body {
    flex: 1 1 auto;
    min-width: 0;
}
.item-top {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 2.4rem;
}
.item-top .date {
    font-size: 1.7rem;
    color: #464C53;
}
.item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.item-title {
    margin: 0 0 1.2rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}
.item-link:hover .item-title,
.item-link:focus-visible .item-title {
    text-decoration: underline;
}
.item-desc {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #464C53;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.item-desc mark,
.item-title mark {
    background-color: #E3F2FD;
    color: #0B50D0;
    font-weight: 700;
    padding: 0 0.2rem;
    border-radius: 0.3rem;
}
.item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 3.2rem;
}
.item-path {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.7rem;
    color: #1E2124;
}
.item-path a {
    color: inherit;
    text-decoration: none;
}
.item-path a:first-child {
    color: #256EF4;
}
.item-path a:hover,
.item-path a:focus-visible {
    text-decoration: underline;
}
.item-path .svg-icon {
    width: 1.6rem;
    height: 1.6rem;
    background-color: #33363D;
}
.item-links {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}
.item-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.7rem;
    font-weight: 400;
    color: #1E2124;
    text-decoration: none;
}
.item-links a:hover,
.item-links a:focus-visible {
    text-decoration: underline;
}
.item-links .svg-icon {
    width: 2rem;
    height: 2rem;
    background-color: currentColor;
}
.item-thumb {
    flex: 0 0 16rem;
    width: 16rem;
    height: 10.8rem;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #F4F6F9;
}
.item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 연구보고서/간행물처럼 실제 표지 이미지가 없는 항목을 위한 대체
   플레이스홀더 - 실제 표지 이미지가 준비되면 img로 교체하면 됨 */
.item-thumb.doc-thumb {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(160deg, #FFEDE0 0%, #FFD9BE 100%);
}
.item-thumb.doc-thumb.doc-thumb--purple {
    background: linear-gradient(160deg, #EDE7FF 0%, #D9CBFF 100%);
}
.item-thumb.doc-thumb.doc-thumb--mint {
    background: linear-gradient(160deg, #E1F5EC 0%, #C3EBDA 100%);
}
.item-thumb.doc-thumb .doc-thumb-badge {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E2124;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
}
.item-thumb.doc-thumb .svg-icon.ico-file {
    width: 3.6rem;
    height: 3.6rem;
    margin-bottom: 1rem;
    background-color: rgba(30, 33, 36, 0.35);
}

/* ------------------------------------------------------------------ */
/* 5) 페이지네이션 여백                                                  */
/* ------------------------------------------------------------------ */
.sch-result-area .krds-pagination {
    margin-top: 4rem;
}

.sch-result-area {
        padding-bottom: 6.4rem;
}

/* ------------------------------------------------------------------ */
/* 6) 반응형 - 모바일 (767px 이하)                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .main-integrated-search .inner {
        padding-left: var(--krds-contents-padding-x);
        padding-right: var(--krds-contents-padding-x);
    }
    .sch-head {
        padding-block: 1.6rem 3.2rem;
    }
    .sch-head .krds-breadcrumb-wrap {
        margin-bottom: 3.2rem;
    }
    .sch-title {
        font-size: 2.8rem;
        margin-bottom: 0;
    }
 
    .sch-search-area {
        padding-block: 2.4rem;
        margin-bottom: 4rem;
    }
    .sch-input .krds-input {
        height: 5.6rem;
        font-size: 1.6rem;
        padding-inline: 1.6rem;
    }
    
    .sch-input .krds-btn.ico-search {
        width: 3.2rem;
        height: 3.2rem;
        right: 1.6rem;
    }

    /* 탭: 스크롤/자르기 담당(overflow-x:auto)은 바깥 래퍼(.tab.pill.full)로,
       둥근 테두리가 있는 실제 박스(ul[role="tablist"])는 콘텐츠 너비만큼만
       차지하게(width: max-content) 분리함. 이렇게 해야 탭 총합 너비가 화면
       보다 넓을 때 "테두리 박스 안쪽에 빈 여백"이 남는 게 아니라, 테두리
       박스 자체가 화면 밖으로 삐져나가면서 오른쪽 끝이 화면 경계에서 뚝
       잘린 모양(스와이프 가능함을 암시)으로 보임. */
    .sch-tab-area .tab.pill.full {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sch-tab-area .tab.pill.full::-webkit-scrollbar {
        display: none;
    }
    .sch-tab-area .tab.pill.full ul[role="tablist"] {
        /* width:max-content(콘텐츠 크기)와 min-width:100%(화면 폭 이상은
           보장)를 같이 걸어두면, 최종 렌더링 폭은 둘 중 큰 쪽으로 정해짐.
           탭 콘텐츠가 화면보다 작을 땐 min-width:100%가 이겨서 이전처럼
           화면에 꽉 차게 늘어나고, 탭이 많아져서 콘텐츠 너비가 화면을
           넘어서면 그때부터 width:max-content가 이겨서 박스 자체가 콘텐츠
           크기만큼 커지며 화면 밖으로 삐져나감(그 순간부터 오른쪽 끝이
           화면 경계에서 잘려 보이면서 스와이프 가능함을 암시). 참고:
           `width: max(100%, max-content)` 한 줄로 쓰면 더 간결하지만
           브라우저에서 퍼센트값과 max-content를 같이 계산하는 걸 안정적으로
           지원하지 않아 width/min-width 두 속성으로 나눠 씀. */
        width: max-content;
        min-width: 100%;
        flex-wrap: nowrap;
        margin-bottom: 0;
    }
    /* 화면에 다 들어갈 때는(ul width가 100%로 결정된 상태) 탭들이 남는
       공간을 균등하게 나눠 채우도록 grow는 허용하되(flex-grow:1), 화면이
       좁아져 ul width가 max-content로 전환된 상태에서는 애초에 남는 공간이
       없으므로 grow가 실질적으로 작동하지 않음. shrink는 항상 막아서
       (flex-shrink:0) 좁아졌을 때 탭이 찌그러지는 대신 ul 자체가 넘치게 함. */
    .sch-tab-area .tab.pill.full li {
        flex: 1 0 auto;
    }
    .sch-tab-area .tab.pill.full .btn-tab {
        height: 4.8rem;
        padding: 0 1.2rem;
        font-size: 1.7rem;
        white-space: nowrap;
    }
    .item-top {
        margin-bottom: 0;
    }

    /* 결과 목록: PC는 오른쪽에 큰 썸네일이 세로로 나란히 오지만, 모바일은
       "제목/설명 → 작은 썸네일 → 출처 경로/PDF·자세히보기" 순서로 세로
       배치되어야 함(이미지2 참고). .item-body는 title/desc(.item-link)와
       경로+링크(.item-foot)를 감싸는 래퍼일 뿐인데, 그 사이에 썸네일을
       끼워 넣으려면 이 래퍼를 grid item 취급에서 빼야 함(display:contents)
       -> 그러면 안에 있던 .item-link/.item-foot이 .sch-result-item의
       grid-template-areas에 직접 등록된 영역(link/foot)을 각각 차지할
       수 있게 됨. */
    .sch-result-item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "top"
            "link"
            "thumb"
            "foot";
        row-gap: 1.6rem;
        padding-block: 2.4rem;
    }
    .item-body {
        display: contents;
    }
    .item-link {
        grid-area: link;
    }
    .item-foot {
        grid-area: foot;
        margin-top: 0;
    }
    .item-title {
        font-size: 1.9rem;
        margin: 0 0 0.8rem;
    }
    .item-thumb {
        grid-area: thumb;
        width: 10rem;
        height: 10rem;
        flex: none;
        aspect-ratio: 1 / 1;
    }
    .item-thumb.doc-thumb .svg-icon.ico-file {
        width: 2.4rem;
        height: 2.4rem;
        margin-bottom: 0.4rem;
    }
    .item-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    .item-links {
        flex-wrap: wrap;
        row-gap: 0.8rem;
    }
    .sch-result-area .krds-pagination {
        margin-top: 0.8rem;
    }
    .sch-result-area {
        padding-bottom: 4rem;
    }
}


/* ==================================================================== */
/* 연구보고서(목록형 서브페이지) 전용 스타일                              */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 1) 서브 상단 비주얼 배너                                              */
/* ------------------------------------------------------------------ */
.sub-visual {
    position: relative;
    height: 16rem;
    display: flex;
    align-items: center;
    overflow: hidden; /* 확대된 배경이 고정 높이 밖으로 삐져나가지 않게 자름 */
}
/* 배경(그라데이션+이미지)을 별도 레이어(::before)로 분리한 이유: 이 레이어에만
   transform: scale 애니메이션을 걸어야 텍스트(.inner)는 확대/축소 영향을
   받지 않고 이미지만 줌아웃되기 때문. background-size 자체를 애니메이션하는
   방법도 있지만 transform은 GPU 가속이 붙어 훨씬 부드럽게 움직임. */
.sub-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.15);
    animation: subVisualZoomOut 6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* 사진 위에 덧씌우는 한 겹.
   예전에는 배너마다 순수 검정 그라데이션을 따로 넣었는데, 검정은 사진의
   색기를 함께 눌러 버려 누렇고 칙칙하게 보였다. 게다가 배너마다 값이 달라
   어떤 곳은 글자가 잘 안 읽혔다(연구보고서 3.3:1).
   브랜드 남색(#00183D)을 옅게 깔면 같은 밝기라도 색이 맑게 남는다.
   화면 전체를 고르게 덮으면 사진이 통째로 어두워진다. 글자가 놓이는
   가운데만 타원으로 받치고 양옆은 손대지 않아, 사진은 밝게 두면서도
   글자는 또렷하게 남는다.
   이 겹은 ::before 와 달리 움직이지 않는다(확대는 사진에만 건다) */
.sub-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        42% 125% at 50% 50%,
        rgb(0 24 61 / 60%) 0%,
        rgb(0 24 61 / 16%) 65%,
        rgb(0 24 61 / 0%) 100%
    );
}

/* 좁은 화면에서는 글자가 배너 폭을 거의 다 차지하고 여러 줄로 늘어난다.
   넓은 화면용 타원(42%)으로는 글자 끝이 받침 밖으로 나가 대비가 4.2:1 까지
   떨어졌다. 이 폭에서는 받침을 넓게 펴서 글자 전체를 덮는다 */
@media (max-width: 1023px) {
    .sub-visual::after {
        background-image: radial-gradient(
            85% 130% at 50% 50%,
            rgb(0 24 61 / 58%) 0%,
            rgb(0 24 61 / 26%) 70%,
            rgb(0 24 61 / 8%) 100%
        );
    }
}
.sub-visual.research-report::before {
    background-image: url(../img/sub_header_image01.jpg);
    /* 시안: 키보드·손가락·안경이 보이는 아래쪽 */
    background-position: center 85%;
}
.sub-visual.information-notice::before {
    background-image: url(../img/sub_header_image02.jpg);
    /* 시안: 가운데 빌딩 꼭대기가 보이는 위쪽 */
    background-position: center 30%;
}
.sub-visual.Information-disclosure::before {
    background-image: url(../img/sub_header_image04.jpg);
}
.sub-visual.portal-visual::before {
    background-image: url(../img/sub_portal_header_image01.jpg);
}
/* 연구원소개 - 지구본/네트워크 배경. 원본이 밝은 편이라 가운데 어둡기를
   다른 배너보다 약하게 줘서 이미지가 죽지 않게 함 */
.sub-visual.institute-intro::before {
    background-image: url(../img/sr-connect_image04.jpg);
    /* 시안: 왼쪽 대륙과 연결선이 함께 보이는 높이 */
    background-position: center 37%;
}
.sub-visual.Instructions::before {
    background-image: url(../img/sub_header_image03.jpg);
    /* 시안: 악수하는 손이 가운데 오른쪽에 오는 높이 */
    background-position: center 37%;
}

/* JSP(누리집) 서브는 배경 클래스를 dynamicMenu.jsp 가 메뉴 조회 뒤에 붙임
   (data-sub-visual 이 달린 배너만 해당. HTML 산출물은 클래스가 처음부터
   박혀 있어 영향 없음). 클래스가 붙기 전에 다른 사진이 잠깐 보였다가
   바뀌는 깜빡임을 막으려고, 붙기 전에는 사진을 숨겼다가 부드럽게 나타나게 함 */
.sub-visual[data-sub-visual]::before {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.sub-visual[data-sub-visual].is-visual-ready::before {
    opacity: 1;
}


/* .sub-visual.portal-visual::before {
    background-image:
        linear-gradient(
            90deg,
            rgba(217, 232, 255, 0.4) 0%,
            rgba(202, 226, 255, 0.4) 100%
        ),
        url(../img/sub_portal_header_image01.jpg);
} */

@keyframes subVisualZoomOut {
    from {
        transform: scale(1.15);
    }
    to {
        transform: scale(1);
    }
}
/* 모션에 민감한 사용자를 위한 배려 - 확대 없이 처음부터 정상 크기로 고정 */
@media (prefers-reduced-motion: reduce) {
    .sub-visual::before {
        animation: none;
        transform: scale(1);
    }
}
.sub-visual .inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.sub-visual-tit {
    margin: 0 0 1.3rem;
    color: #FFFFFF;
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
    /* 덧씌움을 옅게 가져가는 대신 글자에 옅은 그림자를 둬서
       사진의 밝은 부분 위에서도 획이 뭉개지지 않게 한다 */
    text-shadow: 0 0.1rem 0.4rem rgb(0 20 50 / 45%);
}
/* .sub-visual-tit.portal {
    color: #1E2124;
    text-shadow: 0 0.2rem 0.6rem rgba(255, 255, 255, 0.8);
} */
.sub-visual-desc {
    margin: 0;
    color: #FFFFFF;
    font-size: 1.8rem;
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 0.1rem 0.4rem rgb(0 20 50 / 45%);
}
/* .sub-visual-desc.portal {
    color: #464C53;
    text-shadow: 0 0.1rem 0.4rem rgba(255, 255, 255, 0.7);
} */

/* ------------------------------------------------------------------ */
/* 2) 본문 레이아웃 (사이드 내비게이션 + 콘텐츠)                          */
/* ------------------------------------------------------------------ */
.sub-cont-wrap {
    padding-block: 4.8rem 8rem;
}
.sub-layout {
    display: flex;
    align-items: flex-start;
    gap: 6rem;
}
.sub-content {
    flex: 1 1 auto;
    min-width: 0;
}
/* breadcrumb: 사이드바를 제외한 콘텐츠 폭 기준, 단독 줄 (top은 사이드바
   타이틀 박스와 나란히 맞춰짐 - .sub-layout이 align-items: flex-start) */
.krds-breadcrumb-wrap {
    padding-top: 3.2rem;
    margin-bottom: 4rem;
}
/* 타이틀 + 공유/인쇄 버튼을 한 줄에 */
.sub-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 3.6rem;
}
.sub-title-row.line {
    border-bottom: 0.2rem solid #1E2124;
    padding-bottom: 3rem;
}
.sub-content:has(> .report-detail-view) > .sub-title-row {
    border-bottom: 0.2rem solid #1E2124;
    padding-bottom: 3rem;
}
.page-title {
    margin: 0;
    font-size: 3.8rem;
    font-weight: 700;
    color: #1E2124;
}
.sub-util-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
    
}

.sub-util-row .ico-share, .sub-util-row .ico-print {
    width: 1.8rem !important;
}
.sub-util-row .krds-btn.icon {
    border-radius: 50%;
    background-color: #F3F6F9;
    width: 4rem;
    height: 4rem;
    transition: var(--krds-transition-base);
}
.sub-util-row .krds-btn.icon:hover {
    background-color: #e0e3e6;
}
/* ------------------------------------------------------------------ */
/* 3) 검색결과 툴바 (분류 필터 + 검색조건)                                */
/* ------------------------------------------------------------------ */
.filter-wrap {
    background-color: #F5F6F9;
    border-radius: 1rem;
    padding-inline: 4rem;
    padding-block: 4rem;
    margin-bottom: 5rem;
}

.filter-row {
    display: flex;
    align-items: center;
    padding-bottom: 2.4rem;
    margin-bottom: 2.4rem;
    border-bottom: 0.1rem solid #D9D9D9;
}

.filter-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.filter-label {
    flex: 0 0 auto;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
    width: 10rem;
}
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}
/* 통합검색 페이지의 .sch-tab-area .tab.pill.full과 같은 톤: 비선택
   상태는 테두리 없는 순수 텍스트, 선택된 것만 초록 알약 배경 */
.filter-chips .chip {
    display: inline-flex;
    align-items: center;
    height: 4rem;
    padding: 0 1.2rem;
    border-radius: 100rem;
    border: 0.1rem solid #CDD1D5;
    background-color: #FFFFFF;
    color: #1E2124;
    font-size: 1.7rem;
    font-weight: 400;
    cursor: pointer;
    transition: var(--krds-transition-base, all 0.15s ease);

}
.filter-chips .chip:hover {
    color: #008F55;
}
.filter-chips .chip[aria-pressed="true"] {
    font-weight: 700;
    background-color: #008F55;
    border: none;
    color: #FFFFFF;
    border: 0.1rem solid #008F55;
}
/* select/input/버튼 묶음: 이 안에서는 label과의 간격(2.4rem)보다 더
   좁은 간격(1.2rem)으로 서로 붙어있게 함 - 라벨과는 뚜렷이 구분되고,
   입력요소들끼리는 하나의 그룹처럼 보이도록 */
.search-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
}
.search-controls .krds-form-select-sort {
    flex: 0 0 16rem;
    background-color: #FFFFFF !important;
    background-position: center right 1.8rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    height: 4.8rem;
    padding-left: 1.6rem;
}
.search-controls .sch-input {
    flex: 1 1 auto;
}
.search-controls .sch-input .krds-input {
    width: 100%;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    font-size: 1.7rem;
    color: #1E2124;
}
/* 검색/초기화 버튼: 프로젝트 브랜드 블루 대신, 이 툴바 톤(다크 텍스트
   계열)에 맞춘 전용 색상으로 오버라이드 */
.search-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}


.search-btn .svg-icon {
    background-color: #FFFFFF;
}

.search-actions .krds-btn.btn-reset .svg-icon {
    background-color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 4) 목록 개수 / 정렬 행                                                */
/* ------------------------------------------------------------------ */
.result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.4rem;
}
.result-count {
    margin: 0;
    font-size: 1.9rem;
    color: #1E2124;
    font-weight: 700;
}
.result-count strong {
    color: #008F55;
    font-weight: 700;
}
.result-opts {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.7rem;
    color: #1E2124;
    font-weight: 700;
}
.result-opts .divider {
    width: 0.1rem;
    height: 1.6rem;
    background-color: #8A949E;
}
.result-opts .krds-form-select-sort {
    font-weight: 400;
    font-size: 1.7rem;
    padding-left: 1rem;
    padding-right: 2.2rem;
}
.result-sort {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-weight: 700;
}
.result-sort button {
    border: none;
    background: none;
    padding: 0;
    font-size: 1.7rem;
    color: #1E2124;
    cursor: pointer;
    font-weight: 400;
}
.result-sort button[aria-pressed="true"] {
    color: #1E2124;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    background-color: #EEF2F7;
    border-radius: 0.4rem;
    padding-inline: 0.4rem;
}

/* ------------------------------------------------------------------ */
/* 5) 카드 그리드                                                       */
/* ------------------------------------------------------------------ */
.report-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 3.2rem;
    list-style: none;
    padding: 0;
}
.report-card {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
}
.report-card-link {
    display: block;
    width: 100%;
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* 카드에 마우스를 올렸을 때의 표시는 온 화면에서 같게 둔다.
   색은 이 프로젝트의 기본 초록 #008F55, 굵기는 0.2rem.
   outline 대신 테두리 색 + box-shadow 로 그리는 이유 두 가지
     1) outline 은 overflow: hidden 인 카드(.pub-card 등)에서 잘려 안 보인다
     2) box-shadow 는 둥근 모서리를 그대로 따라가고 자리도 밀지 않는다
   테두리 0.1rem + 그림자 0.1rem 이 합쳐져 0.2rem 으로 보인다 */
.report-card:hover {
    border-color: #008F55;
    box-shadow: 0 0 0 0.1rem #008F55;
}

.report-card-image {
    width: 24.3rem;
    aspect-ratio: 3 / 4;
    border: 0.1rem solid #DEDEDE;
    box-shadow: 0px 2px 10px 0px rgba(27, 45, 74, 0.1);
}
.report-card-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F7F8F9;
    padding-block: 1.6rem;
    margin-bottom: 2rem;
    border-bottom: 0.1rem solid #B1B8BE;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.report-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-inline: 2.4rem;
}
.report-card-body .krds-badge {
    align-self: flex-start;
    background-color: #051F48;
    border-radius: 50rem;
    padding-inline: 1.2rem;
    height: 3.1rem;
    font-weight: 600;
}
.report-card-title {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.5;
    min-height: 5.1rem;
    color: #1E2124;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.report-card-link:hover .report-card-title,
.report-card-link:focus-visible .report-card-title {
    text-decoration: underline;
}
.report-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.7rem;
    color: #6B7280;
}
.report-card-meta div {
    display: flex;
    gap: 0.6rem;
}
.report-card-meta dt {
    flex: 0 0 auto;
    min-width: 5.6rem;
    color: #464C53;
}
.report-card-meta dd {
    margin: 0;
    color: #1E2124;
    font-weight: 500;
}
.report-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    margin-top: 2.2rem;
    padding-inline: 2.4rem;
    padding-bottom: 2.4rem;
}
.report-card-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 4.4rem;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: none;
    border: 0.1rem solid transparent;
}
.report-card-actions .btn-download {
    border-color: #008F55;
    color: #008F55;
    background-color: #FFFFFF;
    height: 4.8rem;
}
.report-card-actions .btn-download:hover {
    background-color: #F4F6F9;
}
.report-card-actions .btn-detail {
    border-color: #008F55;
    background-color: #E6F4EE;
    color: #008F55;
    height: 4.8rem;
}
.report-card-actions .btn-detail:hover {
    background-color: #EAF7F0;
}
.report-card-actions .svg-icon {
    width: 1.6rem;
    height: 1.6rem;
    background-color: currentColor;
}

/* ------------------------------------------------------------------ */
/* 6) 페이지네이션 여백                                                  */
/* ------------------------------------------------------------------ */
.sub-content .krds-pagination {
    margin-top: 4rem;
}
/* 고른 카드도 올렸을 때와 같은 굵기로 보이게 한다 */
.report-card.is-active {
    border-color: #008F55;
    box-shadow: 0 0 0 0.1rem #008F55;
}

@media (max-width: 1525px) {
    .sub-content {
        padding-right: 3.4%;
    }
    .report-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .search-controls .krds-form-select-sort {
        flex: 0 0 20%;
    }
}


/* ------------------------------------------------------------------ */
/* 7) 반응형 - 태블릿(1023px 이하): 사이드 내비게이션 숨김(common.css),   */
/*    카드 2열                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 1023px) {
    .sub-layout {
        display: block;
    }
    .report-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sub-util-row {
        display: none;
    }
    .sub-content {
        padding-right: 0;
    }
}

/* ------------------------------------------------------------------ */
/* 8) 반응형 - 모바일(767px 이하)                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .sub-visual {
        height: 16rem;
    }
    .sub-visual-tit {
        font-size: 2.4rem;
        margin-bottom: 0.8rem;
    }
    .sub-visual-desc {
        font-size: 1.5rem;
    }
    .sub-cont-wrap {
        padding-block: 3.2rem 4.8rem;
    }
    .krds-breadcrumb-wrap {
        padding-top: 0;
        margin-bottom: 4.8rem;
    }
    .sub-title-row {
        margin-bottom: 4rem;
    }
    .page-title {
        font-size: 3.2rem;
    }
    .filter-wrap {
        padding: 2.4rem;
        margin-bottom: 3.2rem;
    }
    .filter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        border-bottom: none;
        padding-bottom: 0;
    }
    .search-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 1rem;
    }
    .search-controls .krds-form-select-sort,
    .search-controls .sch-input {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }
    .search-actions {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
    }
    .search-actions .krds-btn {
        width: 100%;
    }
    /* 모바일에서는 "총 게시물" 카운트보다 정렬기준을 먼저 보여줌 */
    .result-head {
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 2.4rem;
    }
    .result-count {
        align-self: flex-start;
    }
    /* 모바일에서는 목록 표시 개수 선택을 노출하지 않음(이미지 참고) */
    .result-list-count,
    .result-opts .divider {
        display: none;
    }
    .report-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }
    .report-search-label {
        display: none;
    }
}


/* ==================================================================== */
/* 공지사항(테이블형 목록) 전용 스타일                                    */
/* .report-* 클래스와 절대 겹치지 않도록 이 페이지 전용은 전부           */
/* .notice- 접두사로 새로 작성함. 박스 테두리/radius 등 시각적으로       */
/* .filter-wrap와 비슷한 부분도 있지만, 일부러 값을 복제해서 분리     */
/* 시켜둠 - 나중에 연구보고서 쪽 스타일을 바꿔도 이 페이지가 영향받지     */
/* 않고, 반대로 이 페이지를 바꿔도 연구보고서가 영향받지 않음.           */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 1) 안내 문구 박스                                                    */
/* ------------------------------------------------------------------ */
.info-box {
    border: 0.1rem solid #CDD1D5;
    border-radius: 1rem;
    padding: 2.4rem;
    margin-bottom: 3.2rem;
}
.info-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.info-box li {
    position: relative;
    padding-left: 2.4rem;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #464C53;
}
.info-box li + li {
    margin-top: 0.8rem;
}
.info-box li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #464C53;
}
.info-box strong {
    color: #008F55;
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 4) 목록 테이블                                                       */
/* ------------------------------------------------------------------ */
.list-table-wrap {
    overflow-x: auto;
}
.list-table.tbl.data {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.list-table.tbl.data th,
.list-table.tbl.data td {
    text-align: center;
    font-size: 1.7rem;
    border-bottom: 0.1rem solid #E5E8EC;
}
.list-table.tbl.data thead th {
    padding: 1.9rem 1.2rem;
    border-top: 0.2rem solid #1E2124;
    border-bottom: 0.1rem solid #1E2124;
    background-color: #FFFFFF;
    color: #1D1D1D;
    font-weight: 700;
    text-align: center;
    font-size: 1.7rem;
}
.list-table.tbl.data tbody th,
.list-table.tbl.data tbody td {
    padding: 1.9rem 1.2rem;
    text-align: center;
    color: #1E2124;
}
.list-table.tbl.data tbody td.col-title {
    text-align: left;
}
/* 표 안에서 눌러서 넘어갈 수 있는 유일한 글자다. 검은 글자에 밑줄이 없으면
   마우스를 올려보기 전까지 어디를 눌러야 하는지 알 수 없다.
   조직도의 구성원 이름(.org-member-btn)과 같은 방식으로, 배경 없이
   초록 글자에 밑줄만 둔다.
   흰 바탕이라 #00804A(5.02:1) 대신 한 톤 진한 #00733D(5.97:1)를 쓴다.
   밑줄이 글자에 바짝 붙으면 받침과 겹쳐 읽기 힘들어 조금 띄운다 */
/* 목록표에서 눌러서 넘어갈 수 있는 유일한 글자다. 시안은 검은 글씨에
   밑줄 없음이었는데, 그러면 링크가 옆 칸의 보통 글자와 색·굵기·밑줄이
   모두 같아져서 올려보기 전에는 링크가 있는지조차 알 수 없다.
   그래서 초록 글씨에 밑줄을 함께 둔다. 표 안에서 눌리는 글자는 이것뿐이다.
   값은 화면정의서 그대로다. #008F55 / 700 / 17px / 행간 150% /
   밑줄 실선 / 오프셋 0 / 두께 auto / 잉크 건너뛰기 켬 */
.list-table.tbl.data td.col-title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 제목은 누를 곳이 뻔해서 색·밑줄로 따로 알릴 필요가 없다.
       올렸을 때만 초록 밑줄을 보인다 */
    color: #1E2124;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.5;
    text-decoration: none;
}

/* 강좌 목록만은 제목을 두 줄까지 보여 준다.
   이 표는 모집기간·운영기간이 이미 두 줄로 접혀 행 높이가 잡혀 있어서,
   강좌명이 한 줄만 쓰면 그 옆에 빈 줄을 놀리면서 제목만 잘렸다.
   1456px 에서 10건 중 6건, 1100px 에서는 10건 모두 잘렸다.
   두 줄로 늘려도 표 높이는 그대로다.
   게시판 목록(data-label="제목")은 행이 한 줄짜리라 같이 걸면 표가
   200px 넘게 길어지므로, 강좌명 칸에만 건다.
   767px 이하는 표가 카드로 바뀌어 높이에 여유가 있으니 걸지 않는다.
   거기서 두 줄로 자르면 멀쩡히 다 보이던 제목이 도리어 잘린다 */
@media (min-width: 768px) {
    .list-table.tbl.data td.col-title[data-label="강좌명"] a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
    }
}
/* 올렸을 때는 조직도와 같이 한 단계 진해지고, 밑줄도 함께 굵어져
   색을 구분하기 어려운 경우에도 반응을 알 수 있다 */
/* 올렸을 때는 한 톤 진해진다. 쉴 때가 이미 굵고 밑줄도 있으니 색만 바꾼다.
   굵기까지 건드리면 글자 너비가 변해 말줄임 위치가 흔들린다.
   #00733D 는 흰 바탕에서 5.97:1 이다 */
.list-table.tbl.data td.col-title a:hover,
.list-table.tbl.data td.col-title a:hover,
.list-table.tbl.data td.col-title a:focus-visible {
    color: #008F55;
    font-weight: 700;
    text-decoration: underline solid;
    text-decoration-skip-ink: auto;
}
/* 공지 행은 늘 위에 붙어 있는 글이라 제목도 초록 굵게 두어 갈린다.
   배경·스피커 아이콘에 더해 글자로도 표가 나게 한다 */
.list-table.tbl.data tr.is-notice td.col-title a {
    color: #008F55;
    font-weight: 700;
}
/* 상단 고정 공지: 번호 대신 스피커 아이콘.
   제목 색은 이제 공용 규칙이 이미 초록이라 따로 지정하지 않고,
   행 배경으로만 구분한다 */

/* 현재 열람중/방문한 게시물: 제목 초록 강조 + 밑줄 (is-notice와 달리
   번호는 그대로 유지하고 배경색도 안 깔림 - "공지"가 아니라 "지금 보고
   있거나 최근 조회한 글"이라는 표시라 시각적 무게감을 더 가볍게 둠) */
/* 상단 고정 공지 / 열람 중인 글 : 예전에는 여기만 초록 굵게였는데,
   이제 일반 제목이 같은 값이라 겉모습이 같아진다. 공지는 행 배경과
   스피커 아이콘으로, 열람 중인 글은 행 배경으로 갈린다 */

.list-table.tbl.data tr.is-notice .svg-icon.ico-volume {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #008F55;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url(../img/component/icon/ico_volume.svg);
    mask-image: url(../img/component/icon/ico_volume.svg);
    vertical-align: middle;
}
.list-table.tbl.data tr:hover td {
    background-color: rgb(0 143 85 / 5%) !important;
}

.list-table .is-notice td {
    background-color: rgb(0 143 85 / 5%) !important;
}

/* ------------------------------------------------------------------ */
/* 5) 페이지네이션 + 글쓰기 버튼                                         */
/* ------------------------------------------------------------------ */

.notice-btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 4rem;
}
.notice-write-btn {    
   
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}


/* ------------------------------------------------------------------ */
/* 6) 반응형 - 모바일(767px 이하): 표를 카드형 목록으로 전환             */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {

    /* .krds-table-wrap 공식 컴포넌트의 기본 모바일 동작(가로 스크롤 +
       min-width 강제)은 우리가 원하는 "표->카드 전환" 방식과 충돌하므로
       이 페이지에서는 해제함 */
    .list-table-wrap.krds-table-wrap {
        overflow-x: visible;
        width: 100%;
    }
    .list-table.tbl.data tr:hover td {
        background-color: transparent !important;
    }

    .list-table-wrap.krds-table-wrap .list-table.tbl.data {
        min-width: 0;
        border-top: 0.2rem solid #1E2124;
    }

    .list-table.tbl.data tbody th, .list-table.tbl.data tbody td {
        border-bottom: none;
        text-align: left;
        padding: 1.2rem 1.6rem;
    }
    .list-table .is-notice td {
        background-color: #FFFFFF !important;
    }

    /* 표 -> 카드형 정의목록으로 전환: thead 숨기고, 각 행을 카드처럼,
       각 셀 앞에 data-label로 라벨을 붙임 */
    .list-table.tbl.data thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .list-table.tbl.data,
    .list-table.tbl.data tbody,
    .list-table.tbl.data tr,
    .list-table.tbl.data td {
        display: block;
        width: 100%;
    }
    .list-table.tbl.data tr {
        border-bottom: 0.1rem solid #CDD1D5;
        padding-block: 1.2rem;
    }
    
    .list-table.tbl.data td {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.6rem 0;
        border-bottom: none;
        text-align: left;
        font-size: 1.5rem;
    }
    .list-table.tbl.data td::before {
        content: attr(data-label);
        flex: 0 0 9rem;
        font-weight: 700;
        color: #1E2124;
        font-size: 1.5rem;
    }
    /* 데스크탑용 아이콘 중앙정렬(justify-content:center)이 모바일까지
       적용되면 라벨(::before)과 아이콘이 겹쳐버림 -> 모바일에서는 다른
       셀과 동일하게 라벨+값 가로배치로 되돌림 */
    .list-table.tbl.data tr.is-notice .col-no {
        justify-content: flex-start;
    }
    .list-table.tbl.data td.col-title a {
        white-space: normal;
    }
    
    .notice-write-btn {
        position: static;
        width: 100%;
        justify-content: center;
        font-size: 1.7rem !important;
    }
    
}

/* ==================================================================== */
/* 공지사항 상세페이지 전용 스타일                                        */
/* .notice-*//*.report-* 클래스와 겹치지 않도록 .detail- 접두사로 새로 작성  */
/* ==================================================================== */

.detail-view {
    margin-bottom: 3.2rem;
}
.detail-head {
    padding-bottom: 2.4rem;
    margin-bottom: 2.8rem;
    border-bottom: 0.2rem solid #1E2124;
}
.detail-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}
.detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 2rem;
    margin: 0;
    font-size: 1.7rem;
    color: #1E2124;
    margin-bottom: 2.4rem;
}
.detail-meta > div {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    position: relative;
    padding-right: 2rem;
}
.detail-meta > div:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.1rem;
    height: 1.4rem;
    background-color: #CDD1D5;
}
.detail-meta dt {
    font-weight: 700;
    color: #1E2124;
}
.detail-meta dd {
    margin: 0;
}

/* 첨부파일: krds-uiux-main의 link.html(아이콘+밑줄 텍스트 링크,
   krds-btn.link.basic) 패턴을 그대로 쓰되, 박스 테두리만 얹음 */
.detail-attach {
    margin-bottom: 4rem;
}
.detail-attach-tit {
    margin: 0 0 1.2rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #333333;
}
.detail-attach-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.detail-attach-list .krds-btn.link {
    justify-content: flex-start;
    width: 100%;
    height: 4.8rem;
    padding-inline: 1.6rem;
    padding-block: 1.6rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 0.8rem;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    gap: 0.763rem;
}
.detail-attach-list .krds-btn.link .svg-icon {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #1E2124;
}

.detail-body {
    padding-block: 2.4rem;
    font-size: 1.7rem;
    line-height: 1.8;
    color: #1E2124;
    /* 본문은 에디터로 쓴 HTML 이라 표·그림에 float(align="left" 등)이 붙어 오기도 한다.
       그러면 본문 상자가 그 높이를 품지 못해 아래 [목록] 줄이 표 오른쪽 옆으로
       올라붙었다. 본문 상자가 떠 있는 내용까지 감싸도록 한다 */
    display: flow-root;
}
/* 에디터 HTML 이 그대로 들어가는 다른 칸에도 같은 이유로 적용한다.
   - .detail_content : 마이페이지 강의실·동아리 게시글 상세(옛 마크업)
   - .div_txt        : 공간·행사 상세 설명
   - .qna-answer-body : 1:1 문의 답변
   - .payment-detail-desc-box : 강좌정보 상세 '주요 내용' 상자(테두리 밖으로 넘치지 않게)
   (표 칸 안의 소개글은 표 칸이 이미 감싸므로 따로 두지 않는다) */
.detail_content,
.div_txt,
.qna-answer-body,
.payment-detail-desc-box {
    display: flow-root;
}
.detail-body p {
    margin: 0 0 1.6rem;
}
.detail-body p:last-child {
    margin-bottom: 0;
}

/* 목록/임시저장/수정/삭제: DOM 순서는 모바일 스택 순서(목록->임시저장->
   수정->삭제) 그대로 두고, 데스크탑에서만 삭제에 order:-1 + margin-right:
   auto를 줘서 시각적으로만 맨 왼쪽으로 옮김(래퍼 div 두 개로 안 나눠도
   됨) */
.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-top: 4rem;
    border-top: 0.1rem solid #CDD1D5;
}

/* 단추 줄에는 처리를 하는 button 과 다른 화면으로 넘어가는 a 가 섞인다.
   (예: '목록' 은 이동이라 a) 태그가 달라도 나란히 놓인 단추이므로
   최소 폭을 함께 준다. 아래 좁은 화면 규칙도 이미 둘을 함께 다룬다 */
.detail-actions a,
.detail-actions button {
    min-width: 9rem;
}


/* 이전글/다음글 */
.detail-nav-list {
    margin-top: 6.2rem;
    border: 0.1rem solid #CDD1D5;
    padding-inline: 4rem;
    border-radius: 1.2rem;
}
.detail-nav-item {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding-block: 2rem;
}
.detail-nav-item:not(:last-child) {
    border-bottom: 0.1rem solid #CDD1D5;
}
.detail-nav-label {
    flex: 0 0 6rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
    position: relative;
        padding-right: 2.4rem;
}

.detail-nav-label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.1rem;
    height: 1.2rem;
    background-color: #D8DBE3;
}
.detail-nav-text {
    flex: 1 1 auto;
    font-size: 1.7rem;
    font-weight: 400;
    color: #1E2124;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.detail-nav-text:hover,
a.detail-nav-text:focus-visible {
    text-decoration: underline;
    color: #1E2124;
}
.detail-nav-text.is-empty {
    color: #9AA0AC;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 데스크탑(768px 이상)에서만 액션 버튼을 가로 배치로 전환       */
/* (모바일 기본값은 세로 스택 - column-reverse로 이미 목록/임시저장/     */
/* 수정/삭제 순서가 맞게 나옴)                                          */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .detail-actions {
        flex-direction: row;
        align-items: center;
        /* 목록·수정 등은 오른쪽에 모은다(퍼블리싱 상세 화면 기준).
           전에는 [삭제]가 있을 때만 삭제가 왼쪽 끝을 밀어 단추들이 오른쪽에 갔고,
           삭제 권한이 없는 사람에게는 [목록]이 왼쪽에 혼자 남았다 */
        justify-content: flex-end;
    }
    /* [삭제]는 마크업 순서와 상관없이 왼쪽 끝(1:1 문의는 수정 뒤에 있어 수정이 삭제 왼쪽에 붙었다) */
    .detail-actions .btn-delete {
        order: -1;
    }
    .detail-actions a,
    .detail-actions button {
        height: 4.8rem;
        padding-inline: 2.4rem;
    }
    .detail-btn-delete {
        order: -1;
        margin-right: auto;
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .detail-actions button {
        font-size: 1.7rem !important;
    }
    .detail-actions .btn-delete {
        order: 1;
    }
    .detail-title {
        font-size: 2.5rem;
    }
    .detail-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
        margin-bottom: 1.6rem;
    }
    .detail-meta > div {
        padding-right: 0;
    }
    .detail-meta > div::after {
        display: none;
    }
    .detail-actions a,
    .detail-actions button {
        width: 100%;
    }
    .detail-nav-label {
        flex: 0 0 5.6rem;
    }

    .detail-head {
        padding-bottom: 2rem;
        margin-bottom: 2.4rem;
    }
}

/* ==================================================================== */
/* 연구보고서 상세페이지 전용 스타일                                      */
/* .report-detail- 접두사로 목록 페이지의 .report-* 클래스와 분리         */
/* ==================================================================== */

.report-detail-head {
    display: flex;
    gap: 4rem;
    margin-bottom: 4rem;
}
.report-detail-cover {
    flex: 0 0 20rem;
}

.report-detail-cover .report-detail-download:focus {
    background-color: #008F55;
    color: #FFFFFF;
}
.report-detail-cover .report-card-image-wrap {
    margin-bottom: 3.8rem;
    background: transparent;
    border: none;
    padding-block: 0;
}
.report-detail-cover .report-card-image {
    width: 100%;
}
.report-detail-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: 4.8rem;
    border-radius: 0.8rem;
    background-color: #008F55;
    border: 0.1rem solid #008F55;
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
}
.report-detail-download:hover {
    background-color: #007A47;
    color: #FFFFFF;
}
.report-detail-download .svg-icon {
    background-color: #FFFFFF;
}
.report-detail-download-mobile {
    display: none;
}

.report-detail-info {
    flex: 1 1 auto;
    min-width: 0;
}
.report-detail-info-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}

.report-detail-info-top .krds-badge {
    align-self: flex-start;
    background-color: #051F48;
    border-radius: 50rem;
    padding-inline: 1.2rem;
    height: 3rem;
}
.report-detail-code {
    font-size: 1.7rem;
    font-weight: 600;
    color: #008F55;
}
.report-detail-title {
    margin: 0 0 2rem;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}
.report-detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 4rem;
    padding-bottom: 3.2rem;
}
.report-detail-meta > div {
    display: flex;
    gap: 1.2rem;
    font-size: 1.7rem;
    padding-bottom: 1.2rem;
    border-bottom: 0.1rem solid #DADEE3;
}
.report-detail-meta dt {
    flex: 0 0 10rem;
    font-weight: 400;
    color: #464C53;
}
.report-detail-meta dd {
    margin: 0;
    font-weight: 600;
    color: #1E2124;
}
.report-detail-keywords {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.report-detail-keywords-tit {
    flex: 0 0 auto;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.report-detail-keywords ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.report-detail-keywords li {
    height: 3.2rem;
    display: inline-flex;
    align-items: center;
    padding: 0 1.4rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 100rem;
    font-size: 1.4rem;
    color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 요약 / 섹션 공통 타이틀                                               */
/* ------------------------------------------------------------------ */
.report-detail-section {
    margin-bottom: 4rem;
}
.report-detail-section-tit {
    margin: 0 0 1.2rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.report-detail-summary {
    padding: 2.4rem;
    background-color: #FFFFFF;
    border-radius: 1rem;
    border: 0.1rem solid #DADEE3;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
}
.report-detail-summary p {
    margin: 0 0 1.2rem;
}
.report-detail-summary p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* 연구진 정보 캐러셀 - krds-uiux-main carousel.html(Swiper) 패턴 적용   */
/* ------------------------------------------------------------------ */
.researcher-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}
.researcher-head .report-detail-section-tit {
    margin: 0;
}
.researcher-nav {
    display: flex;
    gap: 0.8rem;
}
.researcher-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: 0.1rem solid #D8DBE3;
    background-color: #FFFFFF;
    cursor: pointer;
}
.researcher-nav button:hover {
    background-color: #F4F6F9;
}
.researcher-nav button.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}
.researcher-nav .svg-icon {
    width: 1.6rem;
    height: 1.6rem;
    background-color: #464C53;
}
.researcher-swiper .swiper {
    overflow: hidden;
}
.researcher-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 2.4rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1.2rem;
    box-sizing: border-box;
}
.researcher-card-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
/* Swiper 기본값은 .swiper-slide { height:100% }인데, 슬라이드마다
   콘텐츠 높이가 다를 때(특히 .default처럼 짧은 텍스트 한 줄만 있는
   경우) 이게 제대로 stretch되지 않는 경우가 있음(Swiper 커뮤니티에
   잘 알려진 이슈) -> height:auto로 바꾸고 wrapper에 align-items:stretch를
   명시해서 flex 기본 stretch 동작에 확실히 맡김 */
.researcher-swiper .swiper-wrapper {
    align-items: stretch;
}
.researcher-swiper .swiper-slide {
    height: auto;
}
.researcher-card.default {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid #F2F3F8;
    background-color: #F2F3F8;
}
.researcher-card.default span {
    color: #8A949E;
    text-align: center;
    position: relative;
}
.researcher-card.default span::before {
    content: "";
    background: url(../img/component/icon/ico_info_gray.png) no-repeat;
    display: block;
    width: 1.667rem;
    height: 1.667rem;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateX(-2.5rem) translateY(-50%);
}
.researcher-badge {
    display: inline-flex;
    align-items: center;
    height: 3rem;
    padding: 0 1.2rem;
    border-radius: 100rem;
    background-color: #EBF0F9;
    color: #002770;
    font-size: 1.5rem;
    font-weight: 600;
}
.researcher-name {
    font-size: 1.9rem;
    color: #1E2124;
}
.researcher-avatar {
    content: "";
    background: url(../img/component/icon/ico_user_circle.png) no-repeat;
    width: 3.33rem;
    height: 3.33rem;
    background-size: contain;
    margin-left: auto;
}
.researcher-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin: 0;
}
.researcher-meta dt {
    margin-bottom: 0.4rem;
    font-size: 1.7rem;
    color: #464C53;
}
.researcher-meta dd {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 600;
    color: #1E2124;
}
.researcher-card-empty {
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    color: #9AA0AC;
    font-size: 1.5rem;
}
.researcher-empty-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.15rem solid #C6CBD2;
    position: relative;
}
.researcher-empty-icon::before,
.researcher-empty-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    background-color: #C6CBD2;
    transform: translateX(-50%);
}
.researcher-empty-icon::before {
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    top: 0.4rem;
}
.researcher-empty-icon::after {
    width: 0.2rem;
    height: 0.7rem;
    top: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .report-detail-cover .report-card-image-wrap {
        margin-bottom: 0;
    }
    .report-detail-head {
        flex-direction: column;
        gap: 4rem;
        align-items: center;
    }
    .report-detail-cover {
        flex: 0 0 auto;
        max-width: 20rem;
    }
    /* 모바일에서는 표지 아래 다운로드 버튼(PC용)은 숨기고, 정보 영역
       맨 아래의 다운로드 버튼(전체 너비)을 씀 - 이미지 참고 */
    .report-detail-cover .report-detail-download {
        display: none;
    }
    .report-detail-download-mobile {
        display: flex;
        margin-top: 4rem;
    }
    .report-detail-title {
        font-size: 2.4rem;
        margin: 0 0 2.4rem;
    }
    .report-detail-meta {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
   
    .researcher-meta {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .report-detail-actions {
        justify-content: stretch;
    }
    .report-detail-actions a {
        width: 100%;
    }
    .report-detail-info-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }
}

/* ==================================================================== */
/* 등록안내(배움마당 학습공간 등록안내) 전용 스타일                       */

/* ==================================================================== */

.register-guide-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.register-guide-tit::before {
    content: "";
    background: url(../img/component/icon/ico_logo_image.png) no-repeat;
    width: 3rem;
    height: 2.069rem;
    display: block;
    background-size: contain;
}
/* 로고 마크: 별도 아이콘 파일 없이, 헤더에서 이미 쓰고 있는
   ico_logo_sejong.png(가로 748x208)에서 마크(삼각형+원) 부분만
   background-size/position으로 잘라내어 재사용함. 픽셀 단위로 스캔해서
   원의 실제 끝(x=297)과 텍스트 시작(x=394) 사이 여백 구간(x=340)에
   맞춰 크롭 폭을 정확히 계산함(대충 자르면 원이 잘려 보임) */


.register-guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    margin-bottom: 4rem;
}
.register-guide-box {
    padding: 4rem;
    border: 0.1rem solid #C6C6C6;
    border-radius: 1.2rem;
}
.register-guide-box h3 {
    margin: 0 0 2.4rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.register-guide-list,
.register-guide-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.register-guide-list > li + li {
    margin-top: 2.4rem;
}
.register-guide-list > li > strong {
    position: relative;
    display: block;
    margin-bottom: 0.8rem;
    padding-left: 1rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.register-guide-list > li > strong::before {
    content: '·';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #1E2124;
}
.register-guide-list > li > ul > li {
    position: relative;
    padding-left: 2.4rem;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #1E2124;
    margin-bottom: 0.8rem;
}
.register-guide-list > li > ul > li:last-child {
    margin-bottom: 0;
}
.register-guide-list > li > ul > li::before {
    content: '-';
    position: absolute;
    left: 1rem;
    color: #1E2124;
}

.register-guide-cta {
    display: flex;
    justify-content: center;
}

.register-guide-cta .krds-btn:hover {
    background-color: #007A47;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .register-guide-tit {
        font-size: 2rem;
    }
    .register-guide-box h3 {
        font-size: 1.7rem;
    }
    .register-guide-list > li > strong, .register-guide-list > li > ul > li {
        font-size: 1.5rem;
    }
    .register-guide-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        margin-bottom: 2.4rem;
    }
    .register-guide-box {
        padding: 2rem;
    }
    .register-guide-cta .krds-btn {
        width: 100%;
        font-size: var(--krds-button--mobile-font-size-medium);
    }
}

/* ==================================================================== */
/* 공간예약 제공자 등록 신청(4단계 마법사 폼) 전용 스타일                  */
/* .apply- 접두사로 .report-*/.notice-*/.detail-*/.register- 클래스와     */
/* 겹치지 않게 분리                                                      */
/* ==================================================================== */

.apply-step-panel[hidden] {
    display: none !important;
}
.apply-required {
    color: #DE3412;
    font-style: normal;
    font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* 스텝 타이틀 + 스텝 인디케이터                                         */
/* ------------------------------------------------------------------ */
.apply-step-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.4rem;
    margin-bottom: 5rem;
}
.apply-step-count {
    margin: 0 0 0.8rem;
    font-size: 1.7rem;
    color: #464C53;
}
.apply-step-count strong {
    color: #008F55;
    font-weight: 700;
}
.apply-step-main-tit {
    margin: 0;
    font-size: 3.2rem;
    font-weight: 700;
    color: #1E2124;
}
.apply-step-head .krds-step-wrap {
    flex: 0 0 auto;
    width: auto;
    min-width: 32rem;
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* 스텝 패널 공통 박스                                                   */
/* ------------------------------------------------------------------ */
.apply-fieldset {
    padding: 4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
    margin-bottom: 4rem;
}
.apply-fieldset-tit {
    margin: 0 0 2.4rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #131416;
}
.apply-fieldset .form-group {
    margin-bottom: 4rem;
    gap: 1.2rem;
}
.apply-fieldset .form-group:last-child {
    margin-bottom: 0;
}
.apply-fieldset .form-tit,
.apply-agreement .form-tit {
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
    display: flex;
}
.apply-fieldset .form-tit label, .apply-agreement .form-tit label {
    gap: 1rem;
}
/* 묶음 항목(기관분류·주소 등)은 제목이 label 이 아닌 span 이라 "(필수)" 와의
   간격이 label 항목(1rem)보다 좁았다. 같은 간격으로 맞춘다 */
.apply-fieldset .form-tit > span:has(> .apply-required),
.apply-agreement .form-tit > span:has(> .apply-required) {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.apply-fieldset .krds-input,
.apply-fieldset .krds-form-select {
    height: 5.6rem;
    font-size: 1.9rem;
    border-radius: 0.8rem;
}
/* type="url" 이 빠져 있어 누리집·카페 주소 칸만 다른 칸과 폭이 달랐다 */
.apply-fieldset input[type="text"].krds-input,
.apply-fieldset input[type="number"].krds-input, .apply-fieldset input[type="password"].krds-input, .apply-fieldset .krds-form-select {
    width: 100%;
    max-width: 52.7rem;
    box-sizing: border-box;
}

/* 이메일 입력 그룹: input @ input select */
.apply-email-group {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
}
.apply-email-group .krds-input {
    flex: 1 1 24rem;
    max-width: 24rem !important;
}
.apply-email-group .krds-form-select {
    flex: 0 0 28.35rem;
}
.apply-email-at {
    flex: 0 0 auto;
    color: #1D1D1D;
}

/* 연락처 입력 그룹: select - input - input */
.apply-tel-group {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.apply-tel-group .krds-form-select {
    flex: 0 0 16.2rem;
}
.apply-tel-group .krds-input {
    flex: 0 0 16.2rem;
    width: 16.2rem !important;
    max-width: 16.2rem !important;
}

.form-hint .svg-icon {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0.1rem;
    background-color: #6B7280;
}

/* 주소 입력 */
.apply-addr-group {
    display: flex;
    gap: 1.6rem;
    width: 52.7rem;
}
.apply-addr-line {
    width: 100%;
    max-width: 60rem;
    /* margin-bottom: 1.2rem; */
    box-sizing: border-box;
}
.apply-addr-line:last-child {
    margin-bottom: 0;
}

/* 주소는 우편번호 줄·기본주소·상세주소가 한 덩어리다. 그런데 줄 사이는
   .form-conts 의 1.2rem 을 받고 우편번호와 검색 단추 사이만 1.6rem 이라
   같은 묶음 안에서 간격이 두 가지였다. 1.6rem 으로 맞춘다.
   .form-conts 의 1.2rem 은 입력 칸과 그 아래 안내문 사이 값이라 그대로 둔다 */
.form-group .form-conts:has(> .apply-addr-group) {
    gap: 1.6rem;
}

.form-group .form-conts {
    gap: 1.2rem;
}

.krds-check-area {
    gap: 2.4rem;
    flex-wrap: wrap;
}

.krds-check-area.apply-region-grid {
    display: flex !important;
    flex-wrap: wrap !important; /* 공간 부족시 자동 줄바꿈 */
    flex-direction: row !important; /* 가로 방향 배치 강제 */
    gap: 1.2rem 1.8rem;
}

.krds-check-area.apply-region-grid .krds-form-check {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important; /* KRDS 기본 bottom 마진 제거 */
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 시설용도/기자재현황 등 체크박스 그리드                                */
/* ------------------------------------------------------------------ */
.apply-equip-grid {
    display: grid;
    /* 라벨/입력 x3세트 사이사이에 구분선 전용 슬림 트랙(0.1rem)을 끼워넣음:
       라벨1 입력1 [구분선] 라벨2 입력2 [구분선] 라벨3 입력3 */
    grid-template-columns:
        minmax(14rem, auto) 10rem
        0.1rem
        minmax(14rem, auto) 10rem
        0.1rem
        minmax(14rem, auto) 10rem;
    /* 구분선의 grid-row: 1 / -1이 "마지막 줄"을 정확히 찾으려면 행이
       explicit하게 선언되어 있어야 함(안 그러면 -1이 첫 줄로 잘못
       해석됨) - 기자재 8개 항목 = 3행이라 3개로 명시 */
    grid-template-rows: repeat(3, auto);
    column-gap: 3.2rem;
    row-gap: 1.6rem;
    align-items: center;
}

.apply-equip-grid input {
    height: 4.8rem !important;
}
/* 구분선: margin/padding으로 매 행마다 잇는 방식은 gap 값이 바뀌면
   같이 깨지는 임시방편이라, 대신 grid-row: 1 / -1로 "첫 줄부터 마지막
   줄까지"를 명시적으로 지정함 - 행이 몇 개든, row-gap이 얼마든 항상
   처음부터 끝까지 하나로 이어진 선이 되고, 별도의 보정 계산이 필요없음 */
.apply-equip-divider {
    grid-row: 1 / -1;
    align-self: stretch;
    width: 0.1rem;
    background-color: #E5E8EC;
}
.apply-equip-divider:nth-of-type(1) {
    grid-column: 3;
}
.apply-equip-divider:nth-of-type(2) {
    grid-column: 6;
}

.apply-equip-num {
    width: 100% !important;
    max-width: 10rem !important;
    height: 4rem;
    text-align: center;
    box-sizing: border-box;
}
.apply-equip-select {
    width: 100%;
    max-width: 10rem;
    height: 4rem;
    box-sizing: border-box;
}
.apply-parking-row {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    flex-wrap: wrap;
}
.apply-parking-row .apply-equip-num {
    height: 4.8rem;
}
.apply-parking-row .krds-form-select {
    flex: 0 0 10rem;
    height: 4.8rem;
}
.krds-form-check__input {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* 기부기간/기부시간                                                     */
/* ------------------------------------------------------------------ */
.apply-time-range {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
/* 달력 팝업(.calendar-wrap)은 position:absolute인데 KRDS 공식 CSS에는
   그 기준이 되어야 할 .calendar-conts/.krds-calendar-area 어느 쪽에도
   position:relative가 없어서, 절대위치가 엉뚱한 먼 조상 기준으로
   계산되어 화면 위쪽에 붙어버리는 문제가 있었음. 달력은 이 페이지뿐
   아니라 다른 곳에서도 재사용할 예정이라 .apply- 접두사 없이 범용
   규칙으로 추가함 */
.calendar-conts {
    position: relative;
}
/* 기부기간: KRDS 공식 range 패턴(calendar_range.html)을 그대로 사용 -
   달력 하나에서 시작~종료 두 날짜를 순서대로 클릭하면 분할된 두
   입력창(input-group.range.set)에 각각 채워짐. flex 레이아웃은
   input-group.range가 자체적으로 처리하므로 별도 지정 불필요, 전체
   폭만 살짝 제한함 */
.apply-date-range .calendar-input {
    max-width: 44rem;
}
.apply-time-range .krds-form-select {
    flex: 0 0 16.2rem;
}
.apply-time-range .krds-form-select span {
    font-weight: 600;
    color: #1E2124;
    font-weight: 1.7rem;
}

/* ------------------------------------------------------------------ */
/* 개인정보 수집 및 이용 동의서                                          */
/* ------------------------------------------------------------------ */
.apply-agreement {
    margin-bottom: 6.2rem;
}
.apply-agreement-box {
    height: 41.2rem;
    overflow-y: auto;
    padding: 3rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem 1rem 0 0;
    border-bottom: none;
}
.apply-agreement-box dt {
    margin-bottom: 0.4rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.apply-agreement-box dd {
    font-weight: 500;
    margin: 0 0 3.2rem;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #464C53;
}
.apply-agreement-box dd:last-child {
    margin-bottom: 0;
}
.apply-agreement-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 2rem 2.8rem;
    background-color: #F5F6F9;
    border: 0.1rem solid #B1B8BE;
    border-radius: 0 0 1rem 1rem;
}
.apply-agreement-confirm p {
    margin: 0;
    font-size: 1.7rem;
    color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 이미지 첨부(파일 업로드) - krds-file-upload 위에 약간의 여백만 추가    */
/* ------------------------------------------------------------------ */
.apply-file-upload {
    margin-bottom: 4rem;
}
.apply-btn-fileselect {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}
.krds-file-upload .file-head .tit {
    font-size: 2.4rem;
    margin-bottom: 0;
}
.krds-file-upload .file-upload {
    background-color: #F5F6F9;
    border: 0.1rem dashed #CDD1D5;
    padding: 4rem;
}

/* ------------------------------------------------------------------ */
/* 이전으로 / 다음으로                                                   */
/* ------------------------------------------------------------------ */
.apply-step-nav {
    display: flex;
    justify-content: flex-end;
    gap: 1.6rem;
    margin-top: 4rem;
}


/* ------------------------------------------------------------------ */
/* 4단계 신청완료 화면                                                   */
/* ------------------------------------------------------------------ */
.apply-complete-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    padding: 6.4rem 2.4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
    text-align: center;
}
.apply-complete-box::before {
    content: "";
    background: url(../img/complete_image.png) no-repeat;
    width: 23.9rem;
    height: 17rem;
    background-size: contain;
    background-position: center;
}
.apply-complete-icon {
    width: 6.4rem;
    height: 6.4rem;
    background-color: #008F55;
}
.apply-complete-tit {
    margin: 0;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}
.apply-complete-desc {
    margin: 0;
    font-size: 2rem;
    line-height: 1.5;
    color: #464C53;
}
.apply-complete-actions {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 4rem;
}
.apply-complete-actions .krds-btn {
    min-width: 10.6rem;
    border-radius: 0.8rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.calendar-footer .krds-btn.primary {
    background-color: #008F55;
}

.krds-calendar-area .calendar-wrap .calendar-body .calendar-table-wrap .calendar-tbl td.period.start > .btn-set-date, .krds-calendar-area .calendar-wrap .calendar-body .calendar-table-wrap .calendar-tbl td.period.end > .btn-set-date {
    background-color: #008F55;
}
.krds-calendar-area .calendar-wrap:not(.single) .calendar-body .calendar-table-wrap .calendar-tbl td.start::after {
    background-color: #008F55;
}
.krds-calendar-area .calendar-wrap:not(.single) .calendar-body .calendar-table-wrap .calendar-tbl td.end::after {
    background-color: #008F55;
}
/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .apply-step-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
    }
    .apply-step-head .krds-step-wrap {
        width: 100%;
        min-width: 0;
    }
    .apply-fieldset {
        padding: 2rem;
    }
    .apply-email-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
        width: 100%;
    }
    .apply-email-group .krds-input,
    .apply-email-group .krds-form-select {
        flex: 0 0 auto;
        width: 100%;
        max-width: none !important;
    }
    .apply-email-at {
        align-self: center;
        padding: 0.2rem 0;
    }
    /* 연락처(010-1234-5678)는 짧은 패턴이라 세로로 쪼개면 오히려 더
       어색해짐 - 가로는 유지하되 각 조각 폭만 화면에 맞게 줄임 */
    .apply-fieldset .form-conts {
        min-width: 0;
    }
    .apply-tel-group {
        gap: 0.8rem;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
    }
    .apply-tel-group .krds-form-select {
        flex: 0 1 5.6rem;
        min-width: 0;
    }
    .apply-tel-group .krds-input {
        flex: 0 0 5.6rem;
        min-width: 0;
        width: 100% !important;
        max-width: none !important;
    }
    .apply-date-range,
    .apply-time-range {
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
    }
    .apply-time-range .krds-form-select {
        flex: 0 0 5.6rem;
    }
    .apply-region-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .apply-equip-grid {
        grid-template-columns: auto 1fr;
        row-gap: 1.2rem;
    }
    /* 모바일은 2열(라벨/입력) 단순 세로 스택이라 그룹 구분선 자체가
       필요없음 - 완전히 숨김 */
    .apply-equip-divider {
        display: none;
    }
    .apply-equip-num,
    .apply-equip-select {
        max-width: 10rem !important;
        justify-self: end;
    }
    .apply-parking-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }
    .apply-agreement-confirm {
        flex-direction: column;
        align-items: flex-start;
    }
    .apply-step-nav,
    .apply-complete-actions {
        flex-direction: column-reverse;
    }
    .apply-step-nav .krds-btn,
    .apply-complete-actions .krds-btn {
        width: 100%;
    }
    .apply-fieldset input[type="text"].krds-input, .apply-fieldset input[type="number"].krds-input, .apply-fieldset input[type="password"].krds-input, .apply-fieldset input[type="url"].krds-input,
    .apply-fieldset .krds-form-select {
       
        max-width: 100%;
    }
}

/* ==================================================================== */
/* 수강료납부 페이지 전용 스타일                                          */
/* .report-grid/.report-card(연구보고서.html과 공통) 위에 얹어서 씀 -     */
/* 체크박스/뱃지색상/상태색상/단일버튼처럼 이 페이지만 다른 부분만        */
/* .payment- 접두사로 새로 작성. filter-wrap/result-head/krds-pagination */
/* 은 연구보고서.html과 완전히 동일한 클래스를 그대로 재사용함            */
/* ==================================================================== */


/* 카드: report-card(배경/테두리) 위에 padding과 내부 레이아웃만 추가 */
.payment-card {
    position: relative;
    padding: 2.4rem;
    transition: border-color 0.15s ease;
}
/* 체크박스로 선택된 카드는 report-card.is-active와 같은 느낌으로 강조 -
   이 페이지에서는 "결제할 강좌 선택"이라는 실제 기능과 연결되어 있음
   (report-card처럼 장식만이 아니라, 실제로 이 카드가 선택되어 있다는
   뜻이라 의미가 있음) */
.payment-card.is-active {
    border-color: #008F55;
}
.payment-card-select {
    position: absolute;
    top: 2rem;
    left: 2.4rem;
}
.payment-card-select .krds-form-check {
    margin: 0;
}
.payment-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 4.2rem;
}
.payment-card-body .krds-badge {
    align-self: flex-start;
    height: 3rem;
    border-radius: 50rem;
    padding-inline: 1.2rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #FFFFFF;
}
/* 뱃지 색상: 무료(회색) / 미납(빨강) / 납부(초록) */
.payment-badge-free {
    background-color: #051F48;
}
.payment-badge-unpaid {
    background-color: #D63D4A;
}
.payment-badge-paid {
    background-color: #008F55;
}
.payment-card-title {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.payment-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.7rem;
    margin-top: 2rem;
}
.payment-card-meta div {
    display: flex;
    gap: 2.4rem;
}
.payment-card-meta dt {
    flex: 0 0 6.4rem;
    color: #464C53;
}
.payment-card-meta dd {
    margin: 0;
    color: #1E2124;
    font-weight: 500;
    letter-spacing: -0.01rem;
}
.payment-card-meta dd.payment-status-approve {
    color: #008F55;
    font-weight: 700;
}
.payment-card-meta dd.payment-status-cancel {
    color: #DE3412;
    font-weight: 700;
}
.payment-card-actions {
    margin-top: 1.6rem;
}

.payment-method-modal .modal-dialog {
    max-width: 56rem;
}

.payment-method-summary {
    display: grid;
    gap: 1.2rem;
    margin: 0;
    padding: 2rem;
    background: #F4F5F6;
    border-radius: 0.8rem;
}

.payment-method-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.payment-method-summary dt,
.payment-method-summary dd {
    margin: 0;
}

.payment-method-summary dt {
    color: #464C53;
}

.payment-method-summary dd {
    color: #1E2124;
    font-size: 2rem;
}

.payment-method-fieldset {
    margin: 2.4rem 0 0;
    padding: 0;
    border: 0;
}

.payment-method-fieldset legend {
    margin-bottom: 1.6rem;
    color: #1E2124;
    font-size: 1.8rem;
    font-weight: 700;
}

.payment-method-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.payment-method-options .krds-form-check {
    min-width: 0;
    margin: 0;
    padding: 1.6rem;
    border: 1px solid #CDD1D5;
    border-radius: 0.8rem;
}

.payment-method-bank {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.6rem;
}

.payment-method-bank label {
    color: #1E2124;
    font-weight: 700;
}

.payment-method-notice {
    margin: 1.6rem 0 0;
    color: #D50136;
    font-size: 1.5rem;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .payment-method-options {
        grid-template-columns: 1fr;
    }

    .payment-method-bank {
        grid-template-columns: 1fr;
    }
}

.payment-print-btn {
    width: 100%;
    height: 4.4rem;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    border: 0.1rem solid #008F55;
    color: #008F55;
    font-weight: 700;
}
.payment-print-btn:hover:not(:disabled) {
    background-color: #EAF7F0;
}


.payment-pay-btn {
    grid-column: 3;
    justify-self: end;
    height: 4.8rem;
    padding-inline: 3.2rem;
    border-radius: 0.8rem;
    background-color: #008F55;
    border-color: #008F55;
    color: #FFFFFF;
    font-weight: 700;
    min-width: 9rem;
}
.payment-pay-btn:hover {
    background-color: #007A47;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
   
    .payment-pay-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================================================================== */
/* 수강료납부상세 페이지 전용 스타일                                      */
/* .detail-*(연구보고서세부페이지 공통), .payment-status-*//*.payment-print- */
/* btn/.payment-pay-btn(수강료납부 목록 공통)은 그대로 재사용하고, 이     */
/* 페이지만의 2단 레이아웃(본문+sticky 카드)과 정보 테이블만              */
/* .payment-detail- 접두사로 새로 작성                                   */
/* ==================================================================== */

/* grid-template-areas로 데스크탑/모바일의 "납부정보 카드" 위치를
   완전히 다르게 배치함 - 데스크탑은 우측 전체 높이(sticky), 모바일은
   제목 바로 아래(정보 테이블보다 위). flex+order로는 header/table처럼
   서로 다른 요소 "사이"에 카드를 끼워넣는 걸 표현할 수 없어서 grid를
   씀 */
.payment-detail-layout {
    display: grid;
    /* 1fr 은 최소 너비가 auto(내용 폭)라, 띄어쓰기 없는 긴 글이 들어오면
       왼쪽 칸이 줄지 않고 오른쪽 카드까지 밀어냄. 0 까지 줄 수 있게 열어 둠 */
    grid-template-columns: minmax(0, 1fr) 35rem;
    column-gap: 3.2rem;
    grid-template-areas:
        "header  card"
        "table   card"
        "summary card"
        "detail  card"
        "attach  card"
        "listbtn card";
}
.payment-area-header { grid-area: header; }
.payment-area-card   { grid-area: card; }
.payment-area-table  { grid-area: table; }
.payment-area-summary { grid-area: summary; }
.payment-area-detail { grid-area: detail; }
.payment-area-attach { grid-area: attach; }
.payment-area-listbtn { grid-area: listbtn; }
.payment-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.4rem;
}

.payment-area-attach {
    border-bottom: 0.1rem solid #CDD1D5;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
}
.payment-detail-head .detail-title {
    flex: 1 1 auto;
}
.krds-badge.payment-badge-degree {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 3.1rem;
    padding-inline: 1.2rem;
    border-radius: 50rem;
    background-color: #051F48;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
}

/* 강좌 정보 테이블: 행마다 라벨/값 + 아래쪽 구분선 */
.payment-detail-table {
    margin: 0 0 3.2rem;
}
.payment-detail-table > div {
    display: flex;
    padding: 1.2rem 0;
    border-bottom: 0.1rem solid #DADEE3;
    font-size: 1.7rem;
}
.payment-detail-table > div:first-child {
    padding-top: 0;
}
.payment-detail-table dt {
    flex: 0 0 16rem;
    color: #464C53;
}
.payment-detail-table dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    /* 띄어쓰기 없이 긴 글(강의실명 등)은 칸 끝에서 줄바꿈.
       평소 글은 keep-all 그대로 단어 단위로 넘어가고, 한 단어가
       칸보다 길 때만 글자 단위로 끊김 */
    overflow-wrap: anywhere;
    color: #1E2124;
    font-weight: 600;
}
.payment-detail-table dd.payment-detail-accent {
    color: #008F55;
}

.payment-detail-summary-box {
    padding: 2.4rem;
    margin-bottom: 4rem;
    background-color: #F5F6F9;
    border-radius: 1rem;
}
.payment-detail-summary-box p {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
}

.payment-detail-section {
    margin-bottom: 4rem;
}
.payment-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;
}
.payment-detail-section-tit {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.payment-schedule-btn {
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    height: 3.2rem !important;
    padding-inline: 1rem !important;
}
.payment-schedule-btn:hover {
    background-color: #F4F6F9;
}
.payment-detail-desc-box {
    padding: 2.4rem;
    border: 0.1rem solid #DADEE3;
    border-radius: 1rem;
    font-size: 1.7rem;
    color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 우측 납부정보 카드 - 스크롤 시 고정(sticky)                          */
/* ------------------------------------------------------------------ */
.payment-detail-side {
    align-self: start;
    position: sticky;
    /* --sticky-header-offset : 지금 화면 위에 보이는 헤더의 아래쪽 끝 위치(px).
       스크롤할 때마다 스크립트가 재서 넣어줌
       (HTML: ui-script.js 맨 아래 / JSP: layout.jsp).
       헤더가 보이면 그 아래로 2.4rem 띄움.
       스크립트가 없을 때는 헤더(sticky, 약 16.7rem)가 항상 보인다고 보고 그만큼 띄움 */
    top: calc(var(--sticky-header-offset, 16.7rem) + 2.4rem);
}
.payment-side-card {
    padding: 2.4rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1rem;
}
.payment-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}
.payment-side-tit {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #1E2124;
}
.payment-side-course-tit {
    margin: 0 0 2rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.payment-side-meta {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0 0 2rem;
    font-size: 1.7rem;
}
.payment-side-meta > div {
    display: flex;
    gap: 2.4rem;
}
.payment-side-meta dt {
    flex: 0 0 6.8rem;
    color: #464C53;
}
.payment-side-meta dd {
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
    color: #1E2124;
}
.payment-side-meta dd.payment-status-approve {
    color: #008F55;
    font-weight: 700;
}
.payment-side-meta dd.payment-status-cancel {
    color: #D63D4A;
    font-weight: 700;
}
.payment-side-actions {
    display: flex;
    gap: 1.6rem;
}
/* 단추 자리에 링크가 오기도 한다(타 기관은 기관 홈페이지로 나간다).
   button 만 잡으면 링크는 글자 폭에 맞춰 줄어든다 */
.payment-side-actions > .krds-btn {
    width: 100%;
}
.payment-detail-attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    /* 단추가 둘 이상(수정·삭제·목록)일 때 서로 붙지 않도록 */
    gap: 0.8rem;
}
/* 신청정보 카드에 단추 줄이 하나 더 있을 때(비회원 수강신청 확인/취소) 위 줄과 간격 */
.payment-side-actions + .payment-side-actions {
    margin-top: 0.8rem;
}
.payment-area-listbtn {
    min-width: 9rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 태블릿 이하(1023px 이하): sticky 카드를 본문 아래로 내려서   */
/* 일반 흐름으로 전환(좁은 화면에서 sticky 사이드바는 UX상 부적절함)     */
/* ------------------------------------------------------------------ */
@media (max-width: 1023px) {
    .payment-detail-layout {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 2.4rem;
        grid-template-areas:
            "header"
            "card"
            "table"
            "summary"
            "detail"
            "attach"
            "listbtn";
    }
    .payment-detail-side {
        position: static;
        width: 100%;
    }
    /* 카드 안에 페이지 제목과 거의 동일한 텍스트가 또 나오면 중복이라
       모바일/태블릿에서는 생략(페이지 제목이 바로 위에 이미 보임) */
    .payment-side-course-tit {
        display: none;
    }
    .payment-area-attach {
        margin-bottom: 0.8rem;
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .payment-detail-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
        margin-bottom: 0;
    }
    .payment-detail-table dt {
        flex: 0 0 10rem;
    }
    .payment-detail-table > div {
        gap: 2.4rem;
    }
    .payment-detail-table {
        margin: 0;
    }
    .payment-detail-summary-box {
        margin-bottom: 1rem;
    }
    
}

/* ==================================================================== */
/* 로그인 페이지 전용 스타일                                              */
/* .login- 접두사로 다른 서브페이지 클래스와 겹치지 않게 분리              */
/* ==================================================================== */

.login-tit {
    margin: 0 0 3.2rem;
    padding-bottom: 4.8rem;
    border-bottom: 0.1rem solid #B1B8BE;
    font-size: 4rem;
    font-weight: 700;
    color: #1E2124;
}

.login-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    border-bottom: 0.1rem solid #B1B8BE;
    padding-bottom: 3.2rem;
}
.login-form {
    padding-inline: 3.2rem;
}
.login-form .form-group {
    margin-bottom: 2.4rem;
}
.login-form .form-tit {
    font-size: 1.5rem;
    font-weight: 400;
    color: #464C53;
}

.login-form .krds-input {
    width: 100%;
    height: 5.6rem;
    box-sizing: border-box;
}

.login-save-id {
    margin-bottom: 2.4rem;
}

.login-submit-btn {
    width: 100%;
}
.login-submit-btn:hover {
    background-color: #007A47;
}

.login-sub-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2.4rem;
    font-size: 1.7rem;
}
.login-sub-links a {
    color: #1E2124;
    text-decoration: none;
}
.login-sub-links a:hover {
    color: #1E2124;
    text-decoration: underline;
}
.login-sub-links span {
    color: #CDD1D5;
}

/* 간편 로그인 (네이버·카카오)
   - 네이버 : 네이버 그린 #03C75A, 로고·글자 흰색
   - 카카오 : 카카오 공식 로그인 버튼(kakao_sync_login) 실측값
             바탕 #FEE500 / 말풍선 검정 90% / 글자 #191919
   높이·모서리는 위 로그인 버튼과 맞춘다 (카카오 공식 모서리는 높이의 13%, 56px 기준 7.5px) */
.login-sns {
    margin-top: 3.2rem;
}
/* 양옆 가는 선 사이에 '간편 로그인' */
.login-sns-tit {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0 0 1.6rem;
    font-size: 1.5rem;
    color: #6D7882;
}
.login-sns-tit::before,
.login-sns-tit::after {
    content: "";
    flex: 1 1 0;
    height: 0.1rem;
    background-color: #DCE0E5;
}
.login-sns-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}
.login-sns-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 5.6rem;
    padding: 0 1.6rem;
    border-radius: 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease;
}
.login-sns-btn:hover {
    filter: brightness(0.95);
    text-decoration: none;
}
.login-sns-btn:focus-visible {
    outline: 0.2rem solid #1E2124;
    outline-offset: 0.2rem;
}
.login-sns-ico {
    flex: 0 0 auto;
}
.login-sns-btn.is-naver {
    background-color: #2FB403;
    color: #FFFFFF;
}
.login-sns-btn.is-naver .login-sns-ico {
    width: 1.4rem;
    height: 1.4rem;
}
.login-sns-btn.is-kakao {
    background-color: #F9E007;
    color: #191919;
}
.login-sns-btn.is-kakao .login-sns-ico {
    width: 2rem;
    height: 2rem;
    color: rgba(0, 0, 0, 0.9);
}
@media (max-width: 767px) {
    .login-sns-btn {
        height: 5.2rem;
        font-size: 1.6rem;
    }
}

.login-notice {
    grid-column: 2;
    padding-left: 4rem;
    border-left: 0.1rem solid #B1B8BE;
    align-self: stretch;
}
.login-notice ul {
    margin: 0;
    padding-left: 1.8rem;
    list-style: disc;
    padding-block: 2.4rem;
}
.login-notice li {
    margin-bottom: 1.2rem;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #464C53;
}
.login-notice li::marker {
    color: #464C53;
}
.login-notice li:last-child {
    margin-bottom: 0;
}

/* 로그인 도움 안내박스 */
.login-help-box {
    margin-top: 4rem;
    padding: 1.8rem 2.4rem;
    background-color: #F5F6F9;
    border: 0.1rem solid #D6E0EB;
    border-radius: 1.2rem;
}
.login-help-tit {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.2rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #052B57;
}

.login-help-tit::before {
    content: "";
    background: url(../img/component/icon/ico_info.png) no-repeat;
    width: 1.667rem;
    height: 1.667rem;
    background-size: contain;
}

.login-help-box ul {
    margin: 0;
    padding-left: 2rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #464C53;
}
.login-help-box li + li {
    margin-top: 0.8rem;
}
.login-help-link {
    color: #008F55 !important;
    font-weight: 700;
    text-decoration: underline;
    font-size: 1.7rem !important;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하): 세로 스택, 구분선 제거                   */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .login-tit {
        font-size: 2.8rem;
        margin-top: 1.6rem;
        padding-bottom: 2.4rem;
        margin: 0 0 2.4rem;
    }
    .login-form {
        padding-inline: 0;
    }
    .login-form .form-group, .login-save-id {
        margin-bottom: 1.6rem;
    }
    .login-layout {
        display: block;
        padding-bottom: 0;
    }
    .login-layout::before {
        display: none;
    }
    .login-notice {
        margin-top: 3.2rem;
        border-left: none;
        border-top: 0.1rem solid #B1B8BE;
        padding-left: 0;
    }
    .login-notice ul {
        padding-block: 3.2rem 2.4rem;
    }
    .login-help-box {
        margin-top: 2.4rem;
        padding: 2rem;
    }
}


/* ==================================================================== */
/* 아이디/비밀번호 찾기 페이지 전용 스타일                                */
/* .findaccount- 접두사로 다른 서브페이지 클래스와 겹치지 않게 분리        */
/* 모달 자체(.krds-modal/.modal-dialog/.modal-content 등)는 KRDS 공식     */
/* 컴포넌트를 그대로 쓰고, 이 페이지만의 커스텀 부분만 새로 작성함        */
/* ==================================================================== */

.findaccount-method-card {
    display: flex;
    align-items: flex-start;
    gap: 2.4rem;
    width: 100%;
    padding: 3.2rem;
    margin-bottom: 4rem;
    background-color: #F5F6F9;
    border: none;
    border-radius: 1.2rem;
    text-align: left;
    cursor: pointer;
}
.findaccount-method-card::before {
    content: "";
    background: url(../img/component/icon/ico_phone.png) no-repeat;
    width: 2.8rem;
    height: 2.8rem;
    background-size: contain;
    margin-top: 0.8rem;
}
.findaccount-method-card::after {
    content: "";
    background: url(../img/component/icon/ico_next_arrow_black.png) no-repeat;
    width: 3.2rem;
    height: 2.4rem;
    background-size: contain;
}
.findaccount-method-card:hover {
    background-color: #F0F2F5;
}
.findaccount-method-card:focus-visible {
    outline: 0.2rem solid #0B5FCC;
    outline-offset: 0.2rem;
}

.findaccount-method-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.findaccount-method-tit {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1E2124;
}
.findaccount-method-desc {
    font-size: 1.7rem;
    line-height: 1.5;
    color: #464C53;
}


.findaccount-nav {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
}


/* ------------------------------------------------------------------ */
/* 결과 모달 - KRDS 공식 modal 구조에 이 페이지 전용 내용만 얹음          */
/* ------------------------------------------------------------------ */
.findaccount-modal-header {
    text-align: left;
}
.findaccount-modal-brand {
    margin: 0 0 0.8rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E2124;
}
.findaccount-result-list {
    margin: 0;
    padding-left: 1.7rem;
    list-style: disc;
}
.findaccount-result-list li {
    margin-bottom: 0.8rem;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #1E2124;
}
.findaccount-result-list li:last-child {
    margin-bottom: 0;
}
.findaccount-result-id {
    color: #008F55;
}
.findaccount-result-link {
    color: #008F55;
    font-weight: 700;
    text-decoration: none;
}
.findaccount-result-link:hover, .findaccount-result-link:focus {
    text-decoration: underline;
    color: #008F55;
}
.krds-modal .modal-dialog .modal-btn {
    gap: 1.6rem;
}


/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .findaccount-method-card::before {
        width: 9rem;
    }
    .findaccount-method-card::after {
        width: 10rem;
    }
    .findaccount-nav {
        flex-direction: column-reverse;
    }
    .findaccount-nav .krds-btn {
        width: 100%;
    }
}


/* ==================================================================== */
/* 회원가입 페이지 전용 스타일                                            */
/* .join- 접두사로 다른 서브페이지 클래스와 겹치지 않게 분리. 폼          */
/* 필드(.form-group/.apply-tel-group/.apply-addr-group/.apply-email-     */
/* group/.apply-required 등)는 공간예약제공자등록신청.html과 완전히      */
/* 동일한 클래스를 그대로 재사용함                                       */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* STEP 1: 약관동의                                                     */
/* ------------------------------------------------------------------ */

.join-terms-tit {
    margin: 0 0 1.4rem;
    font-size: 2rem;
    font-weight: 700;
    color: #1E2124;
}
.join-terms-block {
    margin-bottom: 6.2rem;
}

.join-terms-block:has(+ .join-terms-all-agree) {
    margin-bottom: 0;
}
.join-terms-box {
    height: 35.5rem;
    overflow-y: auto;
    padding: 3rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem 1rem 0 0;
    border-bottom: none;
    font-size: 1.9rem;
    line-height: 1.8;
    color: #464C53;
}
.join-terms-box h4 {
    margin: 1.6rem 0 2rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.join-terms-box h4:first-child {
    margin-top: 0;
}
.join-terms-box h5 {
    margin: 1.6rem 0 1.6rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.join-terms-box p {
    font-size: 1.7rem;
    margin: 0 0 5rem;
    line-height: 1.8;
}
.join-terms-table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    font-size: 1.4rem;
}
.join-terms-table th,
.join-terms-table td {
    padding: 1rem 1.2rem;
    border: 0.1rem solid #CDD1D5;
    text-align: center;
    color: #464C53;
    font-size: 1.7rem;
}
.join-terms-table th {
    border-top: 0.2rem solid #1E2124;
    background-color: #EEF2F7;
    font-weight: 700;
    color: #1E2124;    
    border-bottom: none;
}
.join-terms-table th:first-child, .join-terms-table td:first-child {
    border-left: none;
}
.join-terms-table th:last-child, .join-terms-table td:last-child {
    border-right: none;
}
.join-terms-agree {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 1.6rem 2.8rem;
    background-color: #F5F6F9;
    border: 0.1rem solid #B1B8BE;
    border-radius: 0 0 1.2rem 1.2rem;
}
.join-terms-agree p {
    margin: 0;
    font-size: 1.7rem;
    color: #464C53;
}

.join-terms-all-agree {
    padding-top: 4rem;
}
.join-terms-all-agree .krds-form-check label {
    font-size: 1.9rem !important;
    font-weight: 700;
    gap: 1.6rem !important;
}
.join-terms-all-agree p {
    margin: 1.2rem 0 0 4rem;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #464C53;
}

/* ------------------------------------------------------------------ */
/* STEP 3: 회원정보 입력                                                */
/* ------------------------------------------------------------------ */
.join-id-group {
    display: flex;
    gap: 1.2rem;
    width: 52.7rem;
}
.join-id-group .krds-input {
    flex: 1 1 auto;
}
.join-id-check-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.join-id-check-btn:hover {
    background-color: #D5EFE0;
}

/* 비밀번호 불일치 등 에러 상태 입력 */
.join-input-error {
    border-color: #DE3412 !important;
}
.form-hint.join-hint-error {
    color: #DE3412;
}
.form-hint.join-hint-error .svg-icon {
    background-color: #DE3412;
}

.join-info-box {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 2rem 2.4rem;
    margin-top: 3.2rem;
    background-color: #F2F3F9;
    border: 0.1rem solid #E4E4E4;
    border-radius: 1rem;
}
.join-info-box .svg-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin-top: 0.2rem;
    background-color: #0B5FCC;
}
.join-info-box p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #464C53;
}
.join-info-box strong {
    color: #173E99;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
}
.join-info-box strong::before {
    content: "";
    background: url(../img/component/icon/ico_info_blue.png) no-repeat;
    width: 2rem;
    height: 2rem;
    background-size: contain;
    display: block;
}

.join-info-box p span {
    position: relative;
    display: block;
    padding-left: 3.2rem;
}

.join-info-box p span::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 2rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: currentColor;
}
.krds-step-wrap > li.active > span::after {
    background-color: #008F55;
}

.krds-step-wrap > li.active > span::before {
    border-color: #008F55;
}

.apply-complete-box.membership::before {
    content: "";
    background: url(../img/ico_join_membership.png) no-repeat;
    width: 22.7rem;
    height: 17rem;
    background-size: contain;
    background-position: center;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .join-terms-agree {
        flex-direction: column;
        align-items: flex-start;
    }
    .join-id-group {
        flex-direction: column;
        width: 100%;
    }
    .join-id-check-btn {
        width: 100%;
    }
    .krds-check-area {
        margin-left: auto;
    }   
    .apply-addr-group .krds-input {
        flex: 0 0 5.6rem;
        height: 5.6rem;
    }
    .apply-addr-group {
        flex-direction: column;
        /* 넓은 화면에서 가로로 놓일 때와 같은 1.6rem. 세로로 바뀐다고
           간격까지 달라질 이유가 없고, 주소 세 줄과도 값이 같아진다 */
        gap: 1.6rem;
        width: 100%;
    }
}


/* ==================================================================== */
/* 개인정보처리방침 페이지 전용 스타일                                    */
/* .privacy- 접두사로 다른 서브페이지 클래스와 겹치지 않게 분리           */
/* ==================================================================== */

.privacy-summary-box {
    padding: 4rem;
    margin-bottom: 4rem;
    background-color: #F5F6F9;
    border-radius: 1rem;
    color: #1E2124;
}
.privacy-summary-box p {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.8;
    color: #464C53;
}

.privacy-article {
    margin-bottom: 4rem;
}
.privacy-article-tit {
    margin: 0 0 1.2rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.privacy-article > p {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
}
.privacy-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.privacy-list li {
    position: relative;
    padding-left: 2.8rem;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    margin-bottom: 0.8rem;
}
.privacy-list li:last-child {
    margin-bottom: 0;
}

.privacy-list li strong {
    color: #008F55;
}
.privacy-list li::before {
    content: '';
    position: absolute;
    left: 0.8rem;
    top: 1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #1E2124;
}
.privacy-article > p + .privacy-list {
    margin-top: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .privacy-summary-box {
        padding: 2rem;
        margin-bottom: 3.2rem;
    }
    .privacy-article-tit {
        font-size: 2.4rem;
    }
    
}


/* ==================================================================== */
/* 이용안내 페이지 전용 스타일                                            */
/* .usage- 접두사로 다른 서브페이지 클래스와 겹치지 않게 분리             */
/* ==================================================================== */

.usage-chapter-tit {
    margin: 4rem 0 1.6rem;
    font-size: 3.2rem;
    line-height: 1.5;
    font-weight: 700;
    color: #1E2124;
}
.usage-chapter-tit:first-of-type {
    margin: 0 0 1.6rem;
}
.usage-chapter-tit:first-child {
    margin-top: 2.4rem;
}
.usage-article {
    margin-bottom: 4rem;
}
.usage-article:has(+ .usage-chapter-tit) {
    margin-bottom: 6.2rem;
}
.usage-article-tit {
    margin: 0 0 1.2rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.usage-plain-p {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
}

/* ①②③ 순번 항목 - 초록 원형 뱃지 */
.usage-numbered-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.usage-numbered-list + .usage-plain-p {
    margin-top: 2.4rem;
}
.usage-numbered-list > li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}
.usage-numbered-list > li:last-child {
    margin-bottom: 0;
}
.usage-num-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: rgba(0, 143, 85, 0.1);
    color: #008F55;
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 0.2rem;
}
.usage-num-text {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 0.1rem;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
}

/* 하위 항목 - 회색 박스 안에 일반 번호 목록 */
.usage-nested-box {
    flex: 1 1 100%;
    margin-block: 1.2rem;
    padding: 3.2rem;
    background-color: #F5F6F9;
    border-radius: 1rem;
}
.usage-nested-box ol {
    margin: 0;
    padding-left: 1.8rem;
    list-style: decimal;
}

.usage-nested-box li {
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
   
    .usage-nested-box {
        padding: 2rem;
    }
}


/* ==================================================================== */
/* 간행물 페이지 전용 스타일                                              */
/* .report-grid/.report-card/.report-card-image-wrap/.report-card-title  */
/* (연구보고서.html과 공통)은 그대로 재사용하고, 이 페이지만 배지/메타/    */
/* 버튼이 없는 간단한 카드라 그 차이나는 부분만 .pub- 접두사로 새로 작성  */
/* ==================================================================== */

/* report-card-image-wrap의 회색 배경은 문서 썸네일용이라 표지 이미지가
   꽉 차는 매거진 커버에는 안 맞음 - 배경/여백 제거하고 표지가 카드
   전체 폭을 채우게 함 */
/* pub-card-link: 이제 진짜 <a> 태그라(더 이상 .report-card-link의
   div+role=button 토글 방식이 아님) 링크 기본 스타일(밑줄/색상)을
   지우는 리셋을 직접 정의함 */
.pub-card-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.pub-card-link:focus-visible {
    outline: 0.2rem solid #0B5FCC;
    outline-offset: 0.2rem;
    border-radius: 1rem;
}
.pub-card-link:hover .pub-card-title {
    text-decoration: underline;
}
.pub-card-image-wrap {
    padding-block: 0;
    margin-bottom: 1.6rem;
    background-color: transparent;
    border-bottom: none;
    padding-inline: 2.4rem;
    padding-top: 2.4rem;
}
.pub-card-image-wrap .report-card-image {
    width: 100%;
    aspect-ratio: 210 / 297;
    object-fit: cover;
}
.gallery-card .pub-card-image-wrap img {
    border-radius: 0.8rem;
    aspect-ratio: 303 / 228;
}

.pub-card-body {
    padding-inline: 2rem;
    padding-bottom: 2rem;
}
.pub-card-date {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.6rem;
    color: #666666;
}
.pub-card-date::before {
    content: "";
    background: url(../img/component/icon/ico_clock.png) no-repeat;
    width: 1.333rem;
    height: 1.333rem;
    background-size: contain;
}
.pub-card-date .svg-icon {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    background: none;
    border: 0.15rem solid #9AA0AC;
    border-radius: 50%;
    box-sizing: border-box;
}
.pub-card-date .svg-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.4rem;
    height: 0.15rem;
    background-color: #9AA0AC;
    transform-origin: left center;
    transform: translateY(-50%) rotate(0deg);
}
.pub-card-date .svg-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.3rem;
    height: 0.15rem;
    background-color: #9AA0AC;
    transform-origin: left center;
    transform: translateY(-50%) rotate(90deg);
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하): 1열로 전환                               */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .pub-grid {
        grid-template-columns: 1fr;
        gap: 3.2rem;
    }
}


/* ==================================================================== */
/* 채용정보 페이지 전용 스타일                                            */
/* 목록 테이블 자체는 공지사항.html과 완전히 동일한 클래스(.list-table/    */
/* .col-no 등)를 그대로 재사용하고, "첨부" 컬럼만 이 페이지에서 추가로     */
/* 필요해서 .job- 접두사로 새로 작성                                     */
/* ==================================================================== */

.col-attach {
    text-align: center;
}
.job-attach-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
}
.job-attach-link:hover {
    background-color: #F4F6F9;
}
.job-attach-link .svg-icon {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #6B7280;
}


/* ==================================================================== */
/* 포토갤러리세부페이지 전용 스타일                                       */
/* .detail-view/.detail-head/.detail-attach/.detail-meta/.detail-body/    */
/* .report-detail-actions는 공지사항세부페이지·연구보고서세부페이지와      */
/* 완전히 동일한 클래스를 그대로 재사용하고, 이 페이지에만 필요한 실제     */
/* 동작하는 이미지 갤러리 뷰어만 .gallery- 접두사로 새로 작성함           */
/* ==================================================================== */

.gallery-viewer {
    margin: 3.2rem 0 0;
    padding-bottom: 4rem;
    border-bottom: 0.1rem solid #CDD1D5;
}
.gallery-main {
    border-radius: 1.2rem;
    overflow: hidden;
    background-color: #F4F6F9;
}
.gallery-main img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.photo-view-body {
    padding-block: 4rem;
}

/* 썸네일 스트립: 회색 박스 안에서 가로 스크롤(overflow-x:auto)로
   슬라이드됨 - 이전/다음 버튼 클릭 시 JS의 scrollIntoView가 이 스크롤을
   부드럽게 움직여줌 */
.gallery-thumbs {
    /* overflow-x:auto만으로는 부족했음 - flex-wrap:nowrap인 상태에서
       이 요소가 새로운 포지셔닝 컨텍스트(containing block)를 만들지
       않으면, 내부 flex 아이템들의 실제(스크롤 전) 렌더링 크기가 이
       요소를 넘어 document.scrollWidth 계산에까지 그대로 새어들어가는
       브라우저 동작이 있음 - 이게 모바일에서 스와이프하면 body 전체가
       가로로 밀리던 진짜 원인이었음(overflow-x 자체는 무관했음).
       position:relative로 새 컨테이닝 블록을 만들어서 완전히 격리함
       (실제로 이 한 줄만으로 scrollWidth가 정상 범위로 돌아옴을 확인함) */
    position: relative;
    --thumb-w: 14rem;
    --thumb-gap: 1.2rem;
    --thumb-pad: 3rem;
    display: flex;
    gap: var(--thumb-gap);
    padding: var(--thumb-pad);
    width: 100%;
    margin: 4rem 0 0;
    list-style: none;
    background-color: #F2F3F9;
    border-radius: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    height: 16.5rem;
    align-items: center;
    /* 네이티브 스크롤바를 시각적으로 숨김(이전/다음 버튼으로만
       넘기게 하려는 의도) - overflow-x:auto 자체는 유지해야
       JS의 scrollIntoView가 계속 작동함(스크롤 기능 자체는 살아있고,
       그 UI만 숨기는 것) */
    /* 모바일에서 이 안을 가로로 스와이프하다가 스크롤 끝(맨 왼쪽/
       맨 오른쪽)에 닿으면, 그 스와이프 제스처가 그대로 부모(페이지
       전체)로 넘어가서 body 전체가 가로로 밀려버리는 "스크롤 체이닝"
       현상이 있었음(overflow-x:auto만으로는 이 전파를 못 막음).
       overscroll-behavior-x:contain으로 스크롤을 이 요소 안에 완전히
       가둬서 부모로 새어나가지 않게 함 */
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* 구형 Edge/IE */
}
.gallery-thumbs::-webkit-scrollbar {
    display: none;               /* Chrome/Safari/Edge(Chromium) */
}
.gallery-thumbs li {
    display: flex;
}
.gallery-thumb-btn {
    flex: 0 0 auto;
    width: var(--thumb-w, 14rem);
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0.2rem solid transparent;
    overflow: hidden;
    cursor: pointer;
    background: none;
}
.gallery-thumb-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-thumb-btn.is-active {
    border-color: #008F55;
}
.gallery-thumb-btn:focus-visible {
    outline: 0.2rem solid #0B5FCC;
    outline-offset: 0.2rem;
}

.gallery-nav {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 2.4rem;
}
/* 전용 화살표 아이콘 파일이 없어서 순수 CSS로 그림(원형 버튼 +
   border 삼각형) */
.gallery-nav-btn {
    position: relative;
    width: 4rem;
    height: 4rem;
    border: 0.1rem solid #D8DBE3;
    border-radius: 50%;
    background-color: #FFFFFF;
    cursor: pointer;
    flex: 0 0 4rem;
}
.gallery-nav-btn:hover {
    background-color: #F4F6F9;
}
.gallery-nav-btn:focus-visible {
    outline: 0.2rem solid #0B5FCC;
    outline-offset: 0.2rem;
}
.gallery-nav-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.9rem;
    height: 0.9rem;
    border-top: 0.2rem solid #1E2124;
    border-right: 0.2rem solid #1E2124;
}
.gallery-nav-btn.prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}
.gallery-nav-btn.next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.detail-view.photo-view {
    border-bottom: 0.1rem solid #CDD1D5;
    margin-bottom: 4rem;
}
.report-detail-actions.photo-controls {
    display: flex;
    justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .gallery-thumbs {
        
        --thumb-gap: 0.8rem;
        --thumb-pad: 1.2rem;
        height: 10.2rem;
    }
  
}


/* ==================================================================== */
/* ESG 경영 페이지 전용 스타일                                            */
/* .esg- 접두사로 다른 서브페이지 클래스와 겹치지 않게 분리                */
/* ==================================================================== */

.esg-section {
    margin-bottom: 6.2rem;
}
.esg-section:last-child {
    margin-bottom: 0;
}
.esg-section-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}

.esg-section-tit::before {
    content: "";
    background: url(../img/component/icon/ico_logo_mini.png) no-repeat;
    width: 3rem;
    height: 2.069rem;
    background-size: contain;
}


/* ------------------------------------------------------------------ */
/* ESG 경영 추진전략 박스                                                */
/* ------------------------------------------------------------------ */
.esg-strategy-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1.2rem;
}
.esg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 1.6rem;
    width: 14.8rem;
    border-radius: 50rem;
    font-size: 2rem;
    font-weight: 700;
}
.esg-pill-dark {
    background-color: #51657E;
    color: #FFFFFF;
}
.esg-strategy-headline {
    margin: 3.2rem 0 2.3rem;
    font-size: 3.2rem;
    font-weight: 700;
    color: #1E2124;
    text-align: center;
}
.esg-connector {
    content: "";
    background: url(../img/esg-connector.png) no-repeat;
    width: 34.7rem;
    height: 5.1rem;
    background-size: contain;
    margin-bottom: 7.2rem;
}

.esg-egs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    width: 100%;
    margin-top: 3.2rem;
}
.esg-egs-col {
    display: flex;
    flex-direction: column;
    border-radius: 1.2rem;
    overflow: hidden;
}

.esg-egs-col.esg-egs-e {
    border: 0.1rem solid #99D2BB;
}

.esg-egs-col.esg-egs-s {
    border: 0.1rem solid #91A7FF;
}
.esg-egs-col.esg-egs-g {
    border: 0.1rem solid #FFC078;
}


.esg-egs-head {
    margin: 0;
    padding: 1.6rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
}
.esg-egs-e .esg-egs-head {
    background-color: #E6F4EE;
    color: #008F55;
}
.esg-egs-s .esg-egs-head {
    background-color: #EDF2FF;
    color: #1F42C0;
}
.esg-egs-g .esg-egs-head {
    background-color: #FFF4E6;
    color: #E8590C;
}
.esg-egs-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.4rem 1.6rem;
    text-align: center;
}
.esg-egs-body p {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    font-weight: 700;
}
.esg-egs-body-divided {
    border-top: 0.1rem solid #91A7FF;
}

/* ------------------------------------------------------------------ */
/* ESG 경영 실천헌장 박스                                                */
/* ------------------------------------------------------------------ */
.esg-charter-box {
    padding: 4rem 3.2rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
}
.esg-charter-intro {
    display: flex;
    align-items: center;
    gap: 8.5rem;
    padding: 4rem;
    margin-bottom: 6.2rem;
    background-color: #F5F6F9;
    border-radius: 1.2rem;
}
.esg-charter-text {
    flex: 1 1 auto;
    min-width: 0;
}
.esg-charter-text p {
    margin: 0 0 1.2rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
}
.esg-charter-text p:last-child {
    margin-bottom: 0;
}
/* 실제 사진이 없어서 영역만 점선박스로 표시함(추후 실제 이미지로 교체 예정) */
.esg-charter-image-placeholder {
    background: url(../img/esg_human_image.jpg) no-repeat;
    min-width: 22%;
    height: 13.1rem;
    border-radius: 0.8rem;
    box-shadow: 0.8rem 0.8rem 0.8rem 0 rgb(46 46 46 / 10%);
    background-size: cover;
    background-position: center;
}

.esg-charter-list {
    margin: 0 0 4rem;
    padding: 0;
    list-style: none;
}
.esg-charter-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.8rem;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #464C53;
}
.esg-charter-list li:last-child {
    margin-bottom: 0;
}
.esg-charter-list li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #464C53;
}
.esg-charter-list strong {
    color: #008F55;
    font-weight: 700;
}

.esg-charter-sign {
    margin: 0;
    text-align: right;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .esg-strategy-box {
        padding: 3.2rem 2rem;
    }
   
    .esg-egs-grid {
        grid-template-columns: 1fr;
    }
    .esg-charter-box {
        padding: 2rem;
    }
    .esg-charter-intro {
        flex-direction: column;
        padding: 2rem;
        gap: 4rem;
    }
    .esg-charter-image-placeholder {
        width: 80%;
        height: 16rem;
        background-position: top;
    }
}

/* ==================================================================== */
/* 윤리경영 / 인권경영 / 친환경경영 공통 스타일                            */
/* 세 페이지가 "추진전략 + 실천헌장"으로 구조가 똑같아서 .mng- 접두사로     */
/* 한 벌만 작성하고, 색상만 .mng-theme-* 로 갈아끼우는 방식.               */
/* ESG경영 페이지(.esg-)는 전략 박스 구성이 달라서 그대로 두고 건드리지 않음 */
/* ==================================================================== */

/* 페이지별 포인트 컬러 - 박스에 테마 클래스를 걸면 하위가 전부 따라감 */
.mng-theme-orange {
    --mng-accent: #E8590C;
    --mng-accent-bg: #FFF4E6;
    --mng-accent-line: #FFC078;
}
.mng-theme-blue {
    --mng-accent: #002770;
    --mng-accent-bg: #EAF0FF;
    --mng-accent-line: #D4E2FC;
}
.mng-theme-green {
    --mng-accent: #008F55;
    --mng-accent-bg: #E6F4EE;
    --mng-accent-line: #99D2BB;
}

.mng-section {
    margin-bottom: 6.2rem;
}
.mng-section:last-child {
    margin-bottom: 0;
}
.mng-section-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.mng-section-tit::before {
    content: "";
    background: url(../img/component/icon/ico_logo_mini.png) no-repeat;
    width: 3rem;
    height: 2.069rem;
    background-size: contain;
}

/* ------------------------------------------------------------------ */
/* 추진전략 박스                                                        */
/* 비전 → 헤드라인 → 연결선 → 목표/슬로건/방침 → 방향 → 방향 카드         */
/* ------------------------------------------------------------------ */
.mng-strategy-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1.2rem;
}

.mng-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 1.6rem;
    min-width: 14.8rem;
    padding-inline: 2.4rem;
    border-radius: 50rem;
    background-color: #51657E;
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 700;
}

.mng-strategy-headline {
    margin: 3.2rem 0 2.3rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1E2124;
    text-align: center;
}

/* ESG경영 페이지와 동일한 V자 연결선 이미지를 그대로 재사용 */
.mng-connector {
    width: 34.7rem;
    height: 5.1rem;
    background: url(../img/esg-connector.png) no-repeat;
    background-size: contain;
    /* 상자보다 그림이 작아질 때 왼쪽에 붙지 않게 한다 */
    background-position: center;
    margin-bottom: 5.6rem;
}

/* 목표 / 슬로건 / 방침 카드 - 1개든 2개든 자동으로 균등 분할 */
.mng-define-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2.4rem;
    width: 100%;
    margin-bottom: 7.2rem;
}
.mng-define-card {
    display: flex;
    flex-direction: column;
    border: 0.1rem solid #E3E4E4;
    border-radius: 1.2rem;
    overflow: hidden;
    background-color: #FFFFFF;
}
.mng-define-head {
    margin: 0;
    padding: 1.6rem;
    background-color: #F2F3F9;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #002770;
}
.mng-define-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11.2rem;
    padding: 2.4rem 1.6rem;
    text-align: center;
}
.mng-define-body p {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}

/* 방향 카드 - 3개(윤리) / 4개(인권·친환경) 모두 균등 분할 */
.mng-direction-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2.4rem;
    width: 100%;
    margin: 4rem 0 0;
    padding: 0;
    list-style: none;
}
.mng-direction-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    padding: 2.4rem 1.6rem;
    border: 0.1rem solid var(--mng-accent-line, #CDD1D5);
    border-radius: 1.2rem;
    background-color: var(--mng-accent-bg, #F5F6F9);
    text-align: center;
}
.mng-direction-item p {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--mng-accent, #1E2124);
}

/* ------------------------------------------------------------------ */
/* 실천헌장 박스                                                        */
/* ------------------------------------------------------------------ */
.mng-charter-box {
    padding: 4rem 3.2rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
}
.mng-charter-intro {
    display: flex;
    align-items: center;
    gap: 8.5rem;
    padding: 4rem;
    margin-bottom: 4rem;
    background-color: #F5F6F9;
    border-radius: 1.2rem;
}
.mng-charter-text {
    flex: 1 1 auto;
    min-width: 0;
}
.mng-charter-text p {
    margin: 0 0 2.4rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
}
.mng-charter-text p:last-child {
    margin-bottom: 0;
}

/* 페이지별 헌장 이미지.
   ※ 아직 실제 사진 파일이 없어서 경로만 잡아둠 - assets/img/ 에 아래 이름으로
     넣어주면 바로 붙음. 없을 때는 회색 배경만 보이도록 background-color 유지 */
.mng-charter-image {
    flex: 0 0 auto;
    min-width: 22%;
    height: 13.1rem;
    border-radius: 0.8rem;
    box-shadow: 0.8rem 0.8rem 0.8rem 0 rgb(46 46 46 / 10%);
    background-color: #E4E7EA;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.mng-charter-image.type-ethics {
    background-image: url(../img/Ethical_management.jpg);
}
.mng-charter-image.type-human-rights {
    background-image: url(../img/human_rights.jpg);
}
.mng-charter-image.type-eco {
    background-image: url(../img/eco_friendly.jpg);
}

.mng-charter-list {
    margin: 0 0 4rem;
    padding: 0;
    list-style: none;
}
.mng-charter-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.8rem;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #464C53;
}
.mng-charter-list li:last-child {
    margin-bottom: 0;
}
.mng-charter-list li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #464C53;
}
.mng-charter-list strong {
    color: #008F55;
    font-weight: 700;
}

.mng-charter-sign {
    margin: 0;
    text-align: right;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 태블릿(1024px 이하)                                         */
/* 방향 카드가 4개일 때 한 줄에 다 넣으면 글자가 깨져서 2열로 접음         */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    
    .mng-direction-grid {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mng-charter-intro {
        gap: 4rem;
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .mng-strategy-box {
        padding: 3.2rem 2rem;
    }
  
    .mng-connector {
        width: 100%;
        max-width: 34.7rem;
        margin-bottom: 4rem;
    }
    .mng-define-grid {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }
    .mng-define-body {
        min-height: 8.8rem;
    }
    .mng-define-body p {
        font-size: 1.8rem;
    }
    .mng-direction-grid {
        grid-template-columns: 1fr;
        margin-top: 3.2rem;
    }
    .mng-direction-item {
        min-height: auto;
        padding: 2rem 1.6rem;
    }
    .mng-charter-box {
        padding: 2rem;
    }
    .mng-charter-intro {
        flex-direction: column;
        padding: 2rem;
        gap: 4rem;
    }
    .mng-charter-image {
        width: 80%;
        height: 16rem;
        background-position: top;
    }
}

/* ==================================================================== */
/* 원장소개 페이지 전용 스타일                                            */
/* .ceo- 접두사. 상단 네임바 + (사진 / 주요 이력) 2단 구성                 */
/* ==================================================================== */

.ceo-profile {
    border-radius: 1.2rem;
    overflow: hidden;
}

/* 상단 네임바 */
.ceo-profile-head {
    padding: 1.6rem 4rem;
    background-color: #51657E;
}
.ceo-profile-name {
    margin: 0;
    color: #FFFFFF;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
}
/* 한자/영문 병기는 한 톤 작게. PC에서는 이름과 같은 줄, 모바일에서는 줄바꿈 */
.ceo-profile-name span {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

/* 본문(사진 + 이력) */
.ceo-profile-body {
    display: flex;
    align-items: flex-start;
    gap: 6rem;
    padding: 4rem 4rem 6rem 4rem;
    background-color: #F5F6F9;
}

/* ------------------------------------------------------------------ */
/* 사진 영역                                                            */
/* ------------------------------------------------------------------ */
.ceo-photo-col {
    flex: 0 0 auto;
    width: 28rem;
}
.ceo-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1.2rem;
    background-color: #E4E7EA;
}
.ceo-photo-name {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1.7rem;
    margin: 2.4rem 0 0;
    color: #1E2124;
}
.ceo-photo-name span {
    font-weight: 500;
    font-size: 2rem;
}
/* 이름은 크게 + 자간을 벌려서 시안의 "권 영 걸" 느낌을 냄.
   마지막 글자 뒤 자간 때문에 왼쪽으로 밀려 보이는 것만 보정 */
.ceo-photo-name strong {
    font-family: "SongMyung", "Pretendard GOV", serif;
    font-size: 3.4rem;
    font-weight: 400;
    margin-right: -0.6rem;
}

/* ------------------------------------------------------------------ */
/* 주요 이력 영역                                                        */
/* ------------------------------------------------------------------ */
.ceo-career {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 3.2rem;
}
.ceo-career-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.ceo-career-tit::before {
    content: "";
    background: url(../img/component/icon/ico_logo_mini.png) no-repeat;
    width: 3rem;
    height: 2.069rem;
    background-size: contain;
}

.ceo-career-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 이력 묶음이 바뀔 때마다 구분선. ul을 끊어 쓰기만 하면 알아서 그려짐 */
.ceo-career-list + .ceo-career-list {
    margin-top: 3.2rem;
    padding-top: 3.2rem;
    border-top: 0.1rem solid #D9D9D9;
}
.ceo-career-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.8rem;
    font-size: 1.9rem;
    line-height: 1.7;
    color: #464C53;
    word-break: keep-all;
}
.ceo-career-list li:last-child {
    margin-bottom: 0;
}
.ceo-career-list li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 1.2rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #008F55;
}
.history-wrap {
    gap: 6.2rem;
}
.history-wrap .tab.fill.full > ul > li:last-of-type .btn-tab {
    border-top-right-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}
.history-wrap .tab.fill.full > ul > li:first-of-type .btn-tab {
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 태블릿(1024px 이하)                                         */
/* 사진 옆에 이력이 붙으면 줄이 너무 잘게 끊겨서 위아래로 쌓음             */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .ceo-profile-body {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
    }
    .ceo-career {
        width: 100%;
        padding-top: 1.4rem;
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .ceo-profile-head {
        padding: 2rem;
    }
  
    /* 이름과 한자/영문 병기를 줄바꿈 */
    .ceo-profile-name span {
        display: block;
        margin-top: 0.8rem;
        font-size: 1.8rem;
    }
    .ceo-profile-body {
        padding: 2rem 2rem 6rem 2rem;
        gap: 4.8rem;
    }
    .ceo-photo-col {
        width: 100%;
        max-width: 32rem;
    }
    .ceo-photo-name {
        justify-content: flex-end;
        margin-top: 1.6rem;
    }

}


/* ==================================================================== */
/* 연혁 - 세로 타임라인                                                   */
/* 탭 색과 그림자는 위쪽 '채움형 탭 공통' 규칙이 맡고, 모서리는 아래       */
/* .history-wrap 규칙에서 지정하므로 여기서는 건드리지 않음                */
/* ==================================================================== */

.history-wrap {
    /* 색과 축 위치를 변수로 빼둠 - 여기만 고치면 전체가 따라감 */
    --history-accent: #008F55;
    --history-year-w: 10.6rem;   /* 연도 칸 너비 */
    --history-line-h: 2.9rem;   /* 본문 첫 줄 높이 = 연도/점/선의 정렬 기준 */
    --history-gap: 12.4rem;     /* 연도 칸과 내용 사이 */
    --history-rail: 17.3rem;    /* 세로선/점의 x 위치 */

    /* 위에 적어둔 gap: 6.2rem 이 실제로 먹으려면 flex 컨테이너여야 함.
       (탭 ↔ 타임라인 사이 간격을 이 값 하나로 조절) */
    display: flex;
    flex-direction: column;
}
/* KRDS 기본 여백을 끄고 위 gap 하나로 간격을 통일 */
.history-wrap .tab-conts {
    margin-top: 0;
}

.history-tab .btn-tab {
    height: 5.6rem;
    font-size: 1.7rem;
    font-weight: 500;
}
.history-tab .active .btn-tab {
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 타임라인                                                             */
/* ------------------------------------------------------------------ */
.history-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.history-item {
    position: relative;
    display: grid;
    grid-template-columns: var(--history-year-w) 1fr;
    -moz-column-gap: var(--history-gap);
         column-gap: var(--history-gap);
    padding-bottom: 6.4rem;
}
.history-item:last-child {
    padding-bottom: 0;
}

/* 세로선 - 자기 점의 중심에서 시작해 다음 항목 점의 중심까지 이어짐.
   bottom을 반 줄 높이만큼 음수로 빼주는 이유: bottom을 0으로 두면 선이
   항목 아래 끝에서 멈추는데, 다음 점의 위쪽 테두리는 거기서 반지름만큼
   더 내려간 자리라 그 사이가 빈 채로 남음. 겹치는 부분은 다음 항목의
   점(::after)이 나중에 그려지면서 흰 배경으로 덮어줌.
   마지막 항목은 선을 그리지 않아 시안처럼 마지막 점에서 끊김 */
.history-item::before {
    content: '';
    position: absolute;
    left: var(--history-rail);
    top: calc(var(--history-line-h) / 2);
    bottom: calc(var(--history-line-h) / -2);
    width: 0.1rem;
    margin-left: -0.05rem;
    background-color: var(--history-accent);
}
.history-item:last-child::before {
    display: none;
}

/* 점 - 기본은 속이 빈 원, 최신 연도(.is-current)만 꽉 찬 원 */
.history-item::after {
    content: '';
    position: absolute;
    left: var(--history-rail);
    top: calc(var(--history-line-h) / 2);
    width: 1.6rem;
    height: 1.6rem;
    margin: -0.8rem 0 0 -0.8rem;
    border: 0.3rem solid var(--history-accent);
    border-radius: 50%;
    background-color: #FFFFFF;
}
.history-item.is-current::after {
    background-color: var(--history-accent);
}

/* 연도 - 글자 크기와 무관하게 줄 상자를 본문 첫 줄 높이에 맞춰서
   점·날짜와 정확히 같은 선상에 오게 함.
   (글자가 상자보다 커서 위아래로 넘치지만 연도 칸에는 다른 요소가
    없으므로 겹칠 일이 없음. 여기에 1.5 같은 배수를 쓰면 정렬이 깨짐) */
.history-year {
    margin: 0;
    font-size: 4.2rem;
    font-weight: 700;
    line-height: var(--history-line-h);
    color: #1E2124;
    text-align: right;
}

.history-detail {
    min-width: 0;
}

/* 기관별 묶음 */
.history-org + .history-org {
    margin-top: 1.6rem;
}
.history-org-tit {
    margin: 0 0 0.4rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--history-accent);
}

/* 날짜 + 내용 */
.history-events {
    display: grid;
    grid-template-columns: -webkit-max-content 1fr;
    grid-template-columns: max-content 1fr;
    -moz-column-gap: 2.4rem;
         column-gap: 2.4rem;
    row-gap: 0.8rem;
    margin: 0;
}
.history-events dt {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    white-space: nowrap;
}
.history-events dd {
    margin: 0;
    font-size: 2rem;
    line-height: 1.7;
    color: #1E2124;
    word-break: keep-all;
}
/* 같은 날짜에 사건이 둘 이상일 때 줄만 나눔 */
.history-txt {
    display: block;
    font-size: 2rem;
}
.history-txt + .history-txt {
    margin-top: 0.8rem;
}

/* 조례명처럼 한 사건에 딸린 세부 항목 */
.history-sub-list {
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
}
.history-sub-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 1.8rem;
    line-height: 1.7;
    color: #464C53;
}
.history-sub-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.3rem;
    width: 0.7rem;
    height: 0.1rem;
    background-color: #6D7882;
}


/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* 시안대로 세로선/점을 없애고 연도를 본문 위로 올림                       */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .history-item {
        display: block;
        padding-bottom: 7rem;
    }
    .history-item::before,
    .history-item::after {
        display: none;
    }
    .history-year {
        margin-bottom: 1.2rem;
        line-height: 1.2;
        text-align: left;
    }

    /* KRDS 기본값은 모바일에서 탭을 내용 폭으로 줄이고 테두리를 없애는데,
       시안은 모바일에서도 좌우 반반이라 그 부분만 되돌림 */
    .history-tab.tab.fill.full > ul {
        gap: 0;
    }
    .history-tab.tab.fill.full > ul > li {
        width: auto;
        flex: 1 1 0;
    }
    .history-tab.tab.fill.full .btn-tab {
        border-width: 0.1rem;
    }
    .history-wrap .tab.fill.full > ul > li:first-of-type .btn-tab {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .history-wrap .tab.fill.full > ul > li:last-of-type .btn-tab {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .history-tab.tab.fill.full > ul > li + li .btn-tab {
        border-left: none;
    }
    
}

/* ==================================================================== */
/* 상징(CI) 페이지 전용 스타일                                            */
/* .ci- 접두사. 심볼 소개 / 시그니처 / 컬러시스템 3개 블록                  */
/* ==================================================================== */

/* 모눈종이 배경 틀 - 시안의 격자는 이미지가 아니라 CSS 그라디언트로 그림.
   심볼·시그니처 이미지가 아직 없어서 지금은 빈 틀만 보임 */
.ci-grid-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
    background-color: #FCFCFC;
    background-image:
        repeating-linear-gradient(to right, #F1F2F4 0 0.1rem, transparent 0.1rem 0.9rem),
        repeating-linear-gradient(to bottom, #F1F2F4 0 0.1rem, transparent 0.1rem 0.9rem);
}
.ci-grid-box img {
    max-width: 60%;
    height: auto;
}

/* ------------------------------------------------------------------ */
/* 심볼 소개                                                            */
/* ------------------------------------------------------------------ */
.ci-intro {
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: 5.6rem;
    align-items: center;
    margin-bottom: 7.2rem;
}
.ci-symbol-box {
    min-height: 32rem;
}

.ci-headline {
    margin: 0 0 1.4rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.45;
    color: #222222;
    word-break: keep-all;
}
.ci-desc {
    margin: 0 0 6rem;
    font-size: 2rem;
    line-height: 1.5;
    color: #464C53;
    word-break: keep-all;
}

.ci-download-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 다운로드 버튼 - DB 콘텐츠(htmlView)에서 krds-btn / btn-Secondary 클래스가
   빠져도 시안대로 보이도록 버튼 모양을 이 클래스 하나로 완결시킴 */
.ci-download-btn,
.ci-download-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem !important;
    width: 19.9rem;
    height: 5.6rem;
    padding: 0 2rem;
    border: 0.1rem solid #008F55;
    border-radius: 0.8rem;
    background-color: #E6F4EE;
    color: #008F55;
    font-size: 1.9rem;
    font-weight: 500 !important;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}
.ci-download-btn:hover {
    background-color: #D5EDE2;
    color: #008F55;
    text-decoration: none;
}
.ci-download-btn:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}
.ci-download-btn .svg-icon {
    flex: 0 0 auto;
    width: 1.8rem !important;
    height: 1.8rem !important;
    background-color: #008F55;
}
@media (max-width: 767px) {
    .ci-download-btn,
    .ci-download-btn:focus {
        height: 4.8rem;
        font-size: 1.7rem;
    }
}

/* ------------------------------------------------------------------ */
/* 공통 섹션 제목                                                        */
/* ------------------------------------------------------------------ */
.ci-section {
    margin-bottom: 6.2rem;
}
.ci-section:last-child {
    margin-bottom: 0;
}
.ci-section-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.ci-section-tit::before {
    content: "";
    background: url(../img/component/icon/ico_logo_mini.png) no-repeat;
    width: 3rem;
    height: 2.069rem;
    background-size: contain;
}

/* ------------------------------------------------------------------ */
/* 시그니처                                                             */
/* ------------------------------------------------------------------ */
.ci-signature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ci-signature-tit {
    margin: 0 0 1.2rem;
    font-size: 2rem;
    font-weight: 700;
    color: #1E2124;
}
.ci-signature-box {
    min-height: 16rem;
}

/* ------------------------------------------------------------------ */
/* 컬러시스템                                                           */
/* ------------------------------------------------------------------ */
.ci-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 카드 배경색은 마크업에서 --ci-color 로 넘김 */
.ci-color-item {
    position: relative;
    flex: 0 1 25.9rem;
    min-height: 16rem;
    display: flex;
    align-items: center;
    padding-inline: 4rem;
    border-radius: 1rem;
    background-color: var(--ci-color, #1E2124);
    overflow: hidden;
}
.ci-color-item::after {
    content: "";
    background: url(../img/background_symbol.png) no-repeat;
    width: 14.862rem;
    height: 10.251rem;
    background-size: contain;
    position: absolute;
    bottom: -1.8rem;
    right: 0;
}
/* 시안 우측 하단의 심볼 워터마크 자리.
   심볼 파일을 받으면 아래 두 줄만 살리면 됨
.ci-color-item::after {
    content: '';
    position: absolute;
    right: -1.6rem;
    bottom: -2.4rem;
    width: 12rem;
    height: 8rem;
    background: url(../img/ci_symbol_white.png) no-repeat center / contain;
    opacity: 0.12;
}
*/
.ci-color-spec {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ci-color-spec li {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.7;
    /* 카드 배경이 브랜드 색 그 자체라 배경은 못 바꿈.
       대신 밝은 색 카드는 --ci-text 로 어두운 글자를 넘겨 대비를 확보 */
    color: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 태블릿(1024px 이하)                                         */
/* 심볼 박스와 설명을 위아래로 쌓음                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .ci-intro {
        grid-template-columns: 1fr;
        gap: 3.2rem;
    }
   
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .ci-intro {
        margin-bottom: 6.2rem;
    }
    .ci-symbol-box {
        min-height: 24rem;
    }
    .ci-desc {
        margin: 0 0 4.7rem;
    }

    /* 좁은 화면에서는 버튼을 가로로 꽉 채워 누르기 쉽게 */
    .ci-download-list {
        display: block;
    }
    .ci-download-list li + li {
        margin-top: 1.2rem;
    }
    .ci-download-btn {
        justify-content: space-between;
        width: 100%;
    }


    .ci-signature-list {
        grid-template-columns: 1fr;
        gap: 3.2rem;
    }
    .ci-signature-box {
        min-height: 14rem;
    }
    .ci-color-item {
        flex: 1 1 100%;
    }
}

/* ==================================================================== */
/* 조직도 페이지 전용 스타일                                              */
/* .org- 접두사. 조직도표 / 부서 탭 / 구성원 표 / 상세 팝업               */
/* ==================================================================== */

.org-chart-box {
    font-family: "Paperlogy", "Pretendard GOV", sans-serif;
    --org-line: #B1B8BE;      /* 연결선 색 */
    --org-gap: 4rem;          /* 세로 연결선 한 칸 높이 */
    padding: 5.6rem 4rem;
    margin-bottom: 4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
    background-color: #FFFFFF;
    overflow-x: auto;
}

/* ------------------------------------------------------------------ */
/* 도표 공통 - 상자                                                     */
/* ------------------------------------------------------------------ */
.org-node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

/* 이사장 - 원형 */
.org-node-chair {
    width: 11.2rem;
    height: 11.2rem;
    font-weight: 700;
    gap: 0.4rem;
    border-radius: 50%;
    background-color: #008F55;
    color: #FFFFFF;
    font-size: 2rem;
}
.org-node-chair::before {
    content: "";
    background: url(../img/component/icon/ico_chair_human.png) no-repeat;
    width: 1.6rem;
    height: 2.1rem;
    background-size: contain;
}

/* 이사회 · 감사 */
.org-node-aside {
    min-width: 12rem;
    padding-block: 1.4rem;
    border-radius: 50rem;
    background-color: #51657E;
    color: #FFFFFF;
}

/* 원장 */
.org-node-ceo {
    min-width: 11.2rem;
    padding-block: 1.4rem;
    border-radius: 50rem;
    background-color: #1F3365;
    color: #FFFFFF;
}

/* 실 - 흰 바탕에 초록 테두리 */
.org-node-office {
    min-width: 12rem;
    padding-block: 0.92rem;
    border: 0.1rem solid #008F55;
    background-color: #FFFFFF;
    /* 시안대로 테두리와 같은 #008F55 (요청으로 #00854D 에서 되돌림) */
    color: #008F55;
    font-weight: 600;
}

/* 부 · 센터 - 연한 파랑 */
.org-node-dept,
.org-node-center {
    min-width: 11.2rem;
    padding-block: 0.92rem;
    background-color: #EAF0FF;
    color: #002770;
    border: 0.1rem solid #D4E2FC;
    font-weight: 600;

}
/* 센터는 부보다 한 톤 진한 파랑. 시안 색(바탕 #D9ECFE, 테두리 #A9D0F4)으로 맞춤 */
.org-node-center {
    background-color: #D9ECFE;
    border-color: #A9D0F4;
}

/* ------------------------------------------------------------------ */
/* 도표 - 단(段)과 연결선                                                */
/* 각 단(.org-row)과 그 위 연결선(.org-branch)에 --org-cols 로 칸 수만    */
/* 맞춰 주면 세로선이 상자 한가운데로 자동 정렬됨                          */
/* ------------------------------------------------------------------ */
.org-top {
    display: flex;
    justify-content: center;
}
/* 이사장 → 아래로 내려가는 세로선 */
.org-top::after {
    content: '';
    display: block;
}

.org-aside {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24rem;
    margin-block: 2.4rem;
}
/* 이사회 ─── 감사 를 잇는 가로선 (상자 뒤로 지나감) */
.org-aside::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24rem;
    height: 0.1rem;
    background-color: var(--org-line);
    transform: translateX(-50%);
}
/* 이사장에서 원장까지 내려오는 세로선 */
.org-aside::after {
    content: '';
    position: absolute;
    top: -2.4rem;
    bottom: -2.4rem;
    left: 50%;
    width: 0.1rem;
    background-color: var(--org-line);
}
.org-aside .org-node {
    position: relative;
    z-index: 1;
}

.org-row {
    display: grid;
    grid-template-columns: repeat(var(--org-cols, 3), 1fr);
    justify-items: center;
    align-items: start;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 위 단에서 내려온 선 → 가로로 펼침 → 각 칸으로 내려꽂는 구간 */
.org-branch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--org-cols, 3), 1fr);
    height: var(--org-gap);
}
/* 가로선 : 첫 칸 가운데부터 마지막 칸 가운데까지만 그림 */
.org-branch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(50% / var(--org-cols, 3));
    right: calc(50% / var(--org-cols, 3));
    height: 0.1rem;
    background-color: var(--org-line);
}
/* 위쪽 절반 : 부모 상자에서 가로선까지 */
.org-branch::after {
    content: '';
    position: absolute;
    top: 0;
    height: 50%;
    left: 50%;
    width: 0.1rem;
    background-color: var(--org-line);
}
/* 아래쪽 절반 : 가로선에서 각 칸으로 */
.org-branch-line {
    position: relative;
}
.org-branch-line::before {
    content: '';
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 50%;
    width: 0.1rem;
    background-color: var(--org-line);
}
/* 자식이 하나뿐일 때 : 가로선 없이 세로선만 */
.org-branch-stem::before {
    top: -50%;
}

/* 센터 단은 부서 단보다 한 칸 더 내려오므로 연결 구간을 길게 */
.org-branch-deep {
    height: 6.4rem;
}

.org-row + .org-branch::after {
    display: none;
}
/* 부서 단 아래에서 센터 단으로 이어지는 세로선은 왼쪽 끝에서 내려옴 */
.org-branch-deep::after {
    display: block;
    left: calc(50% / var(--org-cols, 5));
    top: 0;
    height: 50%;
}

/* 실 → 두 갈래(세종연구실 계열 / 인재평생교육실 계열) */
.org-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
.org-subtree {
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* 부서 탭                                                              */
/* ------------------------------------------------------------------ */
.org-tab-wrap {
    display: flex;
    flex-direction: column;
    gap: 6.2rem;
    margin-bottom: 4rem;
}
.org-tab-wrap .tab-conts {
    margin-top: 0;
}
.org-tab .btn-tab {
    height: 5.6rem;
    font-weight: 500;
}
.org-tab .active .btn-tab {
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 부서별 구성원 표                                                      */
/* ------------------------------------------------------------------ */
.org-group + .org-group {
    margin-top: 6.2rem;
}
.org-group-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.org-group-tit::before {
    content: "";
    background: url(../img/component/icon/ico_logo_mini.png) no-repeat;
    width: 3rem;
    height: 2.069rem;
    background-size: contain;
}

.org-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 0.2rem solid #1E2124;
}

/* 표는 어느 폭에서든 모양을 그대로 두고, 자리가 모자라면 가로로 민다.
   폭으로 나누면 1024px 부터 왼쪽 메뉴가 생겨 표 자리가 오히려 좁아지는
   구간(619px)을 놓친다. '자리가 73.2rem 보다 좁으면 민다' 한 가지 규칙으로 둔다.
   73.2rem 은 이 프로젝트 표의 공용 최소 폭이다 */
.org-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.org-table-wrap.krds-table-wrap .org-table.tbl {
    min-width: 73.2rem;
}
/* 업무분장 표는 칸이 셋뿐이라 그만큼 넓힐 까닭이 없다 */
.org-table-wrap.krds-table-wrap .org-table-duty.tbl {
    min-width: 48rem;
}
/* KRDS 기본값(.krds-table-wrap .tbl.data ...)이 우선순위가 높아 밀리던 자리라
   전에는 !important 로 눌러 두었는데, 그러면 모바일 카드형 전환에서
   되돌릴 수가 없다. 선택자를 같은 수준으로 올려서 !important 없이 이김 */
.org-table-wrap.krds-table-wrap .org-table.tbl.data th,
.org-table-wrap.krds-table-wrap .org-table.tbl.data td {
    padding: 1.6rem 1.2rem;
    border-bottom: 0.1rem solid #CDD1D5;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all;
}
.org-table thead th {
    font-weight: 700;
    color: #1E2124 !important;
    font-size: 1.7rem !important;
}
.org-table tbody th,
.org-table tbody td {
    color: #464C53;
    font-weight: 400;
}
/* 업무분장 표는 담당분야가 길어서 왼쪽 정렬 */
.org-table-duty tbody td:first-of-type {
    text-align: left;
    padding-left: 2.4rem;
}
.org-duty-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.org-duty-list li {
    position: relative;
    padding-left: 1.4rem;
    text-align: left;
}
.org-duty-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.2rem;
    width: 0.7rem;
    height: 0.1rem;
    background-color: #6D7882;
}

/* 이름 - 누르면 상세 팝업 */
.org-member-btn {
    padding: 0;
    border: 0;
    background: none;
    /* 성명 칸 배경이 흰색이 아니라 #F3F6F9 라 그만큼 대비가 낮아진다.
       #00854D 는 이 배경에서 4.34:1 로 여전히 미달이라 한 톤 더 어둡게(4.62:1) */
    color: #008F55;
    font-size: 1.7rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.org-member-btn:hover,
.org-member-btn:focus {
    color: #005C31;
}

/* ------------------------------------------------------------------ */
/* 구성원 상세 팝업                                                      */
/* ------------------------------------------------------------------ */
.org-member-head {
    display: flex;
    align-items: flex-start;
    gap: 2.4rem;
    padding: 1.6rem;
    margin-bottom: 1.6rem;
    background-color: #F5F6F9;
    border-radius: 1rem;
}
.org-member-photo {
    flex: 0 0 auto;
    width: 12rem;
}
.org-member-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0.8rem;
    background-color: #E4E7EA;
}
.org-member-info {
    flex: 1 1 auto;
    min-width: 0;
}
.org-member-name {
    margin: 0 0 0.6rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #008F55;
}
.org-member-meta {
    display: grid;
    grid-template-columns: -webkit-max-content 1fr;
    grid-template-columns: max-content 1fr;
    -moz-column-gap: 1.6rem;
         column-gap: 1.6rem;
    row-gap: 0.6rem;
    margin: 0;
}
.org-member-meta dt {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.org-member-meta dd {
    margin: 0;
    font-size: 1.7rem;
    color: #1E2124;
    word-break: keep-all;
}

.org-member-block + .org-member-block {
    margin-top: 3.2rem;
}
.org-member-block-tit {
    margin: 0 0 1.2rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.org-member-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.org-member-block-list li {
    position: relative;
    padding-left: 2.4rem;
    margin-bottom: 0.8rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
    word-break: keep-all;
}
.org-member-block-list li:last-child {
    margin-bottom: 0;
}
.org-member-block-list li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 1.1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #464C53;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 태블릿(1024px 이하)                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .org-chart-box {
        padding: 4rem 2.4rem;
    }
    .org-node {
        font-size: 1.4rem;
    }
    .org-node-office,
    .org-node-dept,
    .org-node-center {
        min-width: 0;
        width: 100%;
        padding-inline: 0.8rem;
    }
    .org-aside {
        gap: 16rem;
    }
    .org-aside::before {
        width: 16rem;
    }
    .org-split {
        gap: 2.4rem;
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* 도표는 통째로 줄여서 한 화면에 넣고, 표는 가로 스크롤                   */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .org-chart-box {
        padding: 3.2rem 1.2rem;
        margin-bottom: 4rem;
    }
    .org-chart-box {
        --org-gap: 2.8rem;
    }
    .org-node {
        padding: 0.8rem 0.4rem;
        font-size: 1.1rem;
        white-space: normal;
    }
    .org-node-chair {
        width: 6.4rem;
        height: 6.4rem;
        font-size: 1.2rem;
    }
    .org-node-chair .svg-icon {
        width: 1.4rem;
        height: 1.4rem;
    }
    .org-node-aside,
    .org-node-ceo {
        min-width: 7.2rem;
        padding-block: 0.8rem;
    }
    .org-aside {
        gap: 9.6rem;
    }
    .org-aside::before {
        width: 9.6rem;
    }
    .org-node-office,
    .org-node-dept,
    .org-node-center {
        padding-block: 0.8rem;
    }
    .org-row {
        gap: 0.6rem;
    }
    .org-branch-deep {
        height: 4rem;
    }
    .org-split {
        gap: 1.2rem;
    }

    .org-tab-wrap {
        gap: 4rem;
    }
    /* KRDS 기본값은 모바일에서 탭을 내용 폭으로 줄이는데 시안은 균등 분할 */
    /* 갈래 줄을 미는 것과 좌우 단추는 .le-tab-* 컴포넌트가 맡는다
       (생활문해교육센터와 같은 방식). 여기서는 칸 사이 선만 정리한다 */
    .org-tab.tab.fill.full > ul {
        gap: 0;
    }
    .org-tab.tab.fill.full .btn-tab {
        border-width: 0.1rem;
    }
    .org-tab.tab.fill.full > ul > li + li .btn-tab {
        border-left: none;
    }

    /* 표는 좁은 화면에서 모양을 그대로 두고 가로로 밀어서 본다.
       최소 폭은 공용값(.krds-table-wrap .tbl = 73.2rem)을 그대로 쓴다.
       다른 화면의 표와 미는 느낌을 같게 하려는 것이다 */
    .org-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 업무분장 표는 칸이 셋뿐이라 공용값만큼 넓힐 까닭이 없다.
       공용값과 같은 무게로 올려야 먹힌다 */
    .org-table-wrap.krds-table-wrap .org-table-duty.tbl {
        min-width: 48rem;
    }

    .org-member-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }
    .org-member-photo {
        width: 14rem;
    }
    .org-member-info {
        width: 100%;
    }
    .org-member-meta {
        justify-items: start;
        text-align: left;
    }
}


/* --- 조직도 보정 ------------------------------------------------- */
/* 자식이 하나뿐인 갈래는 가로선 없이 세로선만 (문해교육센터) */
.org-branch-single::before {
    display: none;
}

/* KRDS .tbl 기본값이 왼쪽 정렬이라 시안대로 가운데 정렬로 되돌림 */
.org-table-wrap .org-table th,
.org-table-wrap .org-table td {
    text-align: center;
}
.org-table-wrap .org-table th:first-child {
    background-color: #F3F6F9 !important;
}
.org-table-wrap .org-table-duty tbody td:first-of-type {
    text-align: left;
}
/* 열 구분선 */
.org-table th + th,
.org-table td + td,
.org-table td + th,
.org-table th + td {
    border-left: 0.1rem solid #CDD1D5;
}
/* 업무분장 표의 직위 칸은 옅은 배경으로 구분 */
.org-table-duty tbody th {
    background-color: #F5F7FA;
}


/* 연결선과 상자의 칸 중심을 정확히 맞추기 위해 .org-row 의 gap 을 없애고
   여백은 칸 안쪽 padding 으로 준다. gap 이 있으면 .org-branch(간격 없음)와
   칸 중심이 어긋나 세로선이 상자를 비껴간다 */
.org-row {
    gap: 0;
}
.org-row > li {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-inline: 0.8rem;
}


/* 왼쪽(세종연구실) 계열은 센터가 5개라 오른쪽보다 넓은 폭이 필요함 */
.org-split {
    grid-template-columns: 5fr 3fr;
    gap: 3.2rem;
}
.org-node-center {
    min-width: 9.6rem;
}
/* 부서 단에서 센터 단으로 내려가는 세로선은 가운데에서 -
   왼쪽 끝에서 내려오면 부서 단 가로선과 만나지 않아 선이 끊겨 보임 */
.org-branch-deep::after {
    left: 50%;
}

@media (max-width: 767px) {
    .org-split {
        gap: 1.2rem;
    }
    .org-node-center {
        min-width: 0;
    }
}


/* --- 조직도 : 실 단과 하위 갈래의 칸 맞춤 --------------------------- */
/* 원장에서 내려오는 갈래와 실 아래 갈래가 같은 칸 구성을 써야
   세로선이 실 상자 한가운데로 정확히 떨어진다 */
.org-split,
.org-branch-office {
    display: grid;
    grid-template-columns: 1fr 12.8rem 1fr;
    gap: 3.2rem;
    align-items: start;
}
.org-branch-office {
    position: relative;
    height: var(--org-gap);
}
/* 가로선 : 왼쪽 칸 가운데 ~ 오른쪽 칸 가운데 */
.org-branch-office::before {
    left: calc((100% - 19.2rem) / 4);
    right: calc((100% - 19.2rem) / 4);
}
.org-subtree {
    min-width: 0;
}
.org-subtree .org-top {
    margin-bottom: 0;
}

/* 센터 단은 5칸이라 갈래 폭보다 넓어야 함. 시안처럼 오른쪽으로 더 뻗어
   가운데 칸 아래까지 차지한다 */
.org-wide-row {
    width: 148%;
}
/* 그만큼 부서 단에서 내려오는 세로선 위치도 보정 */
.org-branch-deep.org-wide-row::after {
    left: calc(50% / 1.48);
}

@media (max-width: 1024px) {
    .org-split,
    .org-branch-office {
        grid-template-columns: 1fr 9.6rem 1fr;
        gap: 1.6rem;
    }
    .org-branch-office::before {
        left: calc((100% - 12.8rem) / 4);
        right: calc((100% - 12.8rem) / 4);
    }
}
@media (max-width: 767px) {
    .org-split,
    .org-branch-office {
        grid-template-columns: 1fr 6.4rem 1fr;
        gap: 0.8rem;
    }
    .org-branch-office::before {
        left: calc((100% - 8rem) / 4);
        right: calc((100% - 8rem) / 4);
    }
}


/* 이사장 원형의 흰 글씨가 #00954E 위에서 3.88:1 로 AA 미달이라
   눈으로는 거의 같은 톤인 #00854D(4.71:1)로 조정 */
.org-node-chair {
    background-color: #008F55;
    border: 0.4rem solid rgba(255, 255, 255, 0.8);
}


/* --- 조직도 모바일 보정 -------------------------------------------- */
/* 센터가 5칸이라 좁은 화면에서는 아무리 줄여도 한 줄에 들어가지 않는다.
   억지로 줄이면 글자가 깨지므로 도표만 가로 스크롤로 두고 크기는 유지한다.
   (.org-chart-box 에 overflow-x: auto 가 걸려 있음) */
@media (max-width: 767px) {
    .org-chart-box {
        padding-inline: 2rem;
    }
    .org-chart-box > * {
        min-width: 62rem;
    }
    .org-node {
        font-size: 1.3rem;
    }
    .org-node-chair {
        width: 7.6rem;
        height: 7.6rem;
        font-size: 1.3rem;
    }
    .org-node-office,
    .org-node-dept,
    .org-node-center {
        min-width: 8.8rem;
    }
    .org-split,
    .org-branch-office {
        grid-template-columns: 1fr 10rem 1fr;
        gap: 1.6rem;
    }
    .org-branch-office::before {
        left: calc((100% - 13.2rem) / 4);
        right: calc((100% - 13.2rem) / 4);
    }
    .org-aside {
        gap: 16rem;
    }
    .org-aside::before {
        width: 16rem;
    }
}


/* .org-chart-box 가 스크롤 컨테이너가 되려면 자기 폭이 부모를 넘지 않아야 한다.
   sub-content 안에서 자동으로 늘어나는 것을 막음 */
.org-chart-box {
    max-width: 100%;
    min-width: 0;
}

/* ==================================================================== */
/* 조직도 - 부서 단 ~ 센터 단을 잇는 왼쪽 세로선(레일)                     */
/*                                                                      */
/* 센터는 부서 소속이 아니라 실 소속이라, 부서 가로선의 왼쪽 끝에서         */
/* 센터 가로선까지 한 줄로 내려온다. 중간에 부서 상자 단이 끼어 있어        */
/* 가상요소 하나로는 이을 수 없으므로, 두 단을 감싼 .org-rail-wrap 에      */
/* 위아래 가로선 높이만큼만 띄운 세로선을 그린다.                          */
/* ==================================================================== */

/* 센터 갈래 높이를 변수로 빼서 레일 계산과 항상 같은 값을 쓰게 함 */
.org-chart-box {
    --org-deep-gap: 6.4rem;
}
.org-branch-deep {
    height: var(--org-deep-gap);
}

/* 센터 단(5칸)은 상자 최소폭 때문에 일정 크기 아래로는 더 줄지 않는다.
   폭을 148%로만 잡으면 실제 칸 위치와 레일이 어긋나므로 최소 폭을 함께 검.
   5칸 x (센터 상자 9.6rem + 칸 좌우 여백 1.6rem) = 56rem
   레일 x = 센터 첫 칸 중심 = 그 폭의 10% */
.org-wide-row {
    width: max(148%, 56rem);
}

.org-rail-wrap {
    position: relative;
}
.org-rail-wrap::before {
    content: '';
    position: absolute;
    left: max(14.8%, 5.6rem);
    top: calc(var(--org-gap) / 2);
    bottom: calc(var(--org-deep-gap) / 2);
    width: 0.1rem;
    margin-left: -0.05rem;
    background-color: var(--org-line);
}

/* 레일이 연구조정부 상자를 관통하지 않도록 부서 단을 오른쪽으로 물림.
   부서 단은 갈래 폭의 80%를 왼쪽 18% 지점부터 쓰므로 그 기준으로 환산
     - 레일 x       : 갈래의 14.8% → 부서 단 기준 18.5%
     - 물린 양      : 갈래의 18%   → 부서 단 기준 22.5%
     - 세종연구실 x : 갈래의 50%   → 부서 단 기준 40% */
.org-rail-wrap > .org-branch:not(.org-branch-deep),
.org-rail-wrap > .org-row {
    width: 80%;
    margin-left: 18%;
}
.org-rail-wrap > .org-branch:not(.org-branch-deep)::before {
    left: calc(max(18.5%, 5.6rem) - 22.5%);
}
.org-rail-wrap > .org-branch:not(.org-branch-deep)::after {
    left: 40%;
}

/* 레일이 대신 그려주므로 센터 갈래의 반쪽짜리 세로선은 끔 */
.org-branch-deep::after,
.org-branch-deep.org-wide-row::after {
    display: none;
}

/* 도표가 이보다 좁아지면 칸이 뭉개지므로 최소 폭을 두고 가로 스크롤 */
.org-chart-box > * {
    min-width: 95rem;
}

/* 모바일에서도 도표는 같은 크기로 두고 가로 스크롤로 본다.
   상자 최소폭을 줄이면 센터 단 폭과 레일 계산이 어긋나므로 PC 값을 유지 */
@media (max-width: 767px) {
    .org-chart-box {
        --org-gap: 4rem;
        --org-deep-gap: 6.4rem;
    }
    .org-chart-box > * {
        min-width: 95rem;
    }
    .org-node {
        font-size: 1.5rem;
    }
    .org-node-chair {
        width: 9.6rem;
        height: 9.6rem;
        font-size: 1.6rem;
    }
    .org-node-office,
    .org-node-dept {
        min-width: 11.2rem;
    }
    .org-node-center {
        min-width: 9.6rem;
    }
    .org-split,
    .org-branch-office {
        grid-template-columns: 1fr 12.8rem 1fr;
        gap: 3.2rem;
    }
    .org-branch-office::before {
        left: calc((100% - 19.2rem) / 4);
        right: calc((100% - 19.2rem) / 4);
    }
    .org-aside {
        gap: 24rem;
    }
    .org-aside::before {
        width: 24rem;
    }
}


/* --- 끊긴 선 보정 --------------------------------------------------- */
/* .org-split 과 칸 구성을 공유하느라 .org-branch-office 에도
   align-items: start 가 걸려 있었다. 그러면 내용이 빈 내림선 span 들의
   높이가 0이 되어 원장 → 3개 실 구간의 세로선이 아예 그려지지 않는다.
   갈래는 칸 높이를 꽉 채워야 하므로 stretch 로 되돌림 */
.org-branch-office {
    align-items: stretch;
}

/* 자식이 하나뿐인 갈래(평생교육부 → 문해교육센터)의 세로선은
   갈래 높이를 그대로 쓴다. -50% 로 두면 위 상자 안쪽까지 20px 파고든다 */
.org-branch-stem::before {
    top: 0;
}

/* --- 끊긴 선 보정 2 : 각 상자 위로 꽂히는 세로선 -------------------- */
/* 가로선에서 각 상자로 내려가는 세로선은 원래 .org-branch 안의 빈 span
   (.org-branch-line) 이 그렸다. 그런데 관리자 HTML관리(에디터)에 등록하면
   내용이 빈 span 이 지워져서, 가로선만 남고 상자로 내려가는 선이 모두
   사라졌다(원장 → 3개 실, 실 → 부, 센터 가로선 → 센터, 평생교육부 → 문해교육센터).
   빈 태그에 기대지 않도록, 선을 받는 쪽 상자 칸이 자기 위로 선을 그린다.
   span 이 남아 있는 화면에서는 같은 자리에 겹쳐 그려지므로 차이가 없다 */
.org-row > li,
.org-branch-office + .org-split > * {
    position: relative;
}
/* 가로선(갈래 높이의 가운데) → 상자 위끝 : 갈래 높이의 절반 */
.org-branch-office + .org-split > *::before,
.org-branch + .org-row > li:has(.org-node)::before,
.org-rail-wrap + .org-row > li:has(.org-node)::before {
    content: '';
    position: absolute;
    top: calc(var(--org-gap) / -2);
    left: 50%;
    width: 0.1rem;
    height: calc(var(--org-gap) / 2);
    /* 위쪽 선(.org-branch::after 등)과 같은 기준(left: 50%, 보정 없음)으로 맞춰야
       위아래 선이 한 줄로 이어진다. 보정을 넣으면 1px 어긋나 보였다 */
    background-color: var(--org-line);
}
/* 센터 갈래는 더 길다.
   센터 단은 레일(.org-rail-wrap) 바깥에 있고 센터 갈래(.org-branch-deep)는
   레일 안 마지막에 있어서, '갈래 바로 다음 줄'로는 잡히지 않는다.
   레일 묶음 바로 다음 줄도 같이 잡는다 */
.org-branch-deep + .org-row > li:has(.org-node)::before,
.org-rail-wrap + .org-row > li:has(.org-node)::before {
    top: calc(var(--org-deep-gap) / -2);
    height: calc(var(--org-deep-gap) / 2);
}
/* 자식이 하나뿐인 갈래(부 단 바로 아래 갈래, 예: 평생교육부 → 문해교육센터)는
   가로선이 없으므로 위 상자 아래끝부터 갈래 높이 전체를 잇는다.
   이 갈래 높이를 센터 갈래(--org-deep-gap)와 같게 해서
   문해교육센터가 왼쪽 센터 줄(지역경제교육센터 등)과 같은 높이에 오게 한다 */
.org-row + .org-branch:not(.org-branch-deep) {
    height: var(--org-deep-gap);
}
.org-row + .org-branch:not(.org-branch-deep) + .org-row > li:has(.org-node)::before {
    top: calc(var(--org-deep-gap) * -1);
    height: var(--org-deep-gap);
}

/* 레일 → 국가균형발전지원센터 : 레일과 첫 센터 내림선을 따로 그리면
   기준점이 달라 1px 꺾여 보였다. 레일을 센터 상자 위끝까지 한 번에
   내려 긋고, 첫 센터의 내림선은 끈다 */
.org-rail-wrap:has(> .org-branch-deep:last-child)::before {
    bottom: 0;
}
.org-rail-wrap:has(> .org-branch-deep:last-child) + .org-row > li:first-child::before {
    display: none;
}


/* --- 부서 단 내림선이 상자 중심에서 어긋나던 문제 -------------------- */
/* 부서 상자(11.2rem)가 칸 폭보다 넓어 줄이 넘치면서, 상자는 밀려나고
   연결선은 원래 칸 위치에 남아 갈수록 벌어졌다.
   상자를 센터와 같은 9.6rem 으로 맞춰 넘치지 않게 하고,
   도표 최소 폭을 정해 그 아래로는 줄지 않고 가로 스크롤되게 함.
   이렇게 하면 모든 값이 비율로만 계산돼 화면 폭과 무관하게 일치한다.

   기준(갈래 폭 = .org-subtree 기준)
     - 부서 단  : 왼쪽 16% 지점부터 86%  (3칸 x 11.2rem 이상 확보)
     - 레일 x   : 14.8%  = 센터 첫 칸 중심
     - 부서 가로선 왼쪽 끝 : (14.8 - 16) / 0.86 = -1.4%  (부서 단 기준)
     - 세종연구실 x        : (50 - 16)  / 0.86 = 39.5%   (부서 단 기준) */
.org-chart-box > * {
    min-width: 98rem;
}
.org-node-dept {
    min-width: 9.6rem;
}
.org-wide-row {
    width: 148%;
}
.org-rail-wrap::before {
    left: 14.8%;
}
.org-rail-wrap > .org-branch:not(.org-branch-deep),
.org-rail-wrap > .org-row {
    width: 86%;
    margin-left: 16%;
}
.org-rail-wrap > .org-branch:not(.org-branch-deep)::before {
    left: -1.4%;
}
.org-rail-wrap > .org-branch:not(.org-branch-deep)::after {
    left: 39.5%;
}

@media (max-width: 767px) {
    .org-chart-box > * {
        min-width: 98rem;
    }
    .org-node-dept {
        min-width: 9.6rem;
    }
}


/* --- 좁은 화면에서 도표 전체 축소 ------------------------------------ */
/* 칸을 줄이면 연결선 계산이 어긋나므로, 도표는 설계 크기(98rem)를 그대로
   두고 통째로 축소한다. --org-scale 값은 스크립트가 담는다.
   transform: scale 이 아니라 zoom 을 쓰는 이유는 레이아웃 높이까지 같이
   줄어서 도표 아래에 빈 공간이 남지 않기 때문.
   스크립트가 동작하지 않는 환경에서는 값이 1이라 기존처럼 가로 스크롤됨 */
.org-chart-box > * {
    zoom: var(--org-scale, 1);
}

/* 도표 폭(min-width)은 눈에 보이는 칸에만 걸어야 한다.
   .org-chart-box > * 가 화면에 안 보이는 제목(.sr-only)까지 잡아
   그 자리를 98rem 으로 늘려 놓는 바람에, 실제로는 아무것도 안 보이는데
   문서 폭만 화면 밖으로 뻗어 나갔다(360px 화면에서 742px 로 잡힘).
   html 에 overflow-x: hidden 이 있어 실제로 밀리지는 않지만,
   폭을 재는 검사에서 늘 가로 넘침으로 잡히므로 여기서 되돌린다 */
.org-chart-box > .sr-only {
    min-width: 0;
}


/* --- 도표는 어떤 폭에서도 같은 모양을 유지 --------------------------- */
/* 이제 좁아지면 통째로 축소하므로, 앞서 넣어 둔 태블릿/모바일용 축소
   규칙(상자 폭 100%, 글자 축소, 칸 간격 축소 등)은 오히려 레이아웃을
   바꿔 연결선 계산을 깨뜨린다. PC 값으로 되돌려 고정한다 */
@media (max-width: 1024px) {
    .org-chart-box {
        padding: 5.6rem 4rem;
        --org-gap: 4rem;
        --org-deep-gap: 6.4rem;
    }
    .org-node {
        font-size: 1.5rem;
        padding: 1rem 1.6rem;
        white-space: nowrap;
    }
    .org-node-chair {
        width: 9.6rem;
        height: 9.6rem;
        font-size: 1.6rem;
    }
    .org-node-chair .svg-icon {
        width: 2rem;
        height: 2rem;
    }
    .org-node-office {
        min-width: 12rem;
        width: auto;
        padding-block: 0.92rem;
        padding-inline: 1.6rem;
    }
    .org-node-dept,
    .org-node-center {
        min-width: 9.6rem;
        width: auto;
        padding-block: 1.6rem;
        padding-inline: 1.6rem;
    }
    .org-node-aside,
    .org-node-ceo {
        min-width: 13.6rem;
        padding-block: 1.4rem;
    }
    .org-node-ceo {
        min-width: 11.2rem;
    }
    .org-aside {
        gap: 24rem;
    }
    .org-aside::before {
        width: 24rem;
    }
    .org-row {
        gap: 0;
    }
    .org-branch-deep {
        height: var(--org-deep-gap);
    }
    .org-split,
    .org-branch-office {
        grid-template-columns: 1fr 12.8rem 1fr;
        gap: 3.2rem;
    }
    .org-branch-office::before {
        left: calc((100% - 19.2rem) / 4);
        right: calc((100% - 19.2rem) / 4);
    }
}


/* --- 조직도 탭 : 모바일 모서리 처리 ---------------------------------- */
/* 모바일에서는 탭을 붙여서 균등 분할하는데, 버튼마다 네 모서리가 모두
   둥글어서 맞닿는 지점이 어긋나 보였다. 바깥쪽 두 모서리만 남기고
   가운데는 각지게 해서 한 덩어리로 보이게 함 */
@media (max-width: 767px) {
    .org-tab.tab.fill.full > ul > li .btn-tab {
        border-radius: 0;
    }
    .org-tab.tab.fill.full > ul > li:first-of-type .btn-tab {
        border-top-left-radius: var(--krds-tab--fill-button-radius, 0.6rem);
        border-bottom-left-radius: var(--krds-tab--fill-button-radius, 0.6rem);
    }
    .org-tab.tab.fill.full > ul > li:last-of-type .btn-tab {
        border-top-right-radius: var(--krds-tab--fill-button-radius, 0.6rem);
        border-bottom-right-radius: var(--krds-tab--fill-button-radius, 0.6rem);
    }
    .org-group + .org-group {
        margin-top: 4.8rem;
    }
}

/* --- 조직도 탭 : 좌우 화살표(.le-tab-*) 연결 ---------------------------- */
/* 관리자에 등록한 조직도 HTML 에는 .le-tab-wrap / .le-tab 과 좌우 단추가 없어,
   모바일에서 탭이 화면을 다 채우지 못하고 넘쳐도 화살표가 나오지 않았다.
   페이지 스크립트(introductionView.jsp)가 탭 영역에 .le-tab-wrap / .le-tab 을
   붙이고 단추를 만들어 넣으면, 다른 탭과 같은 .le-tab-* 규칙으로
   자리가 남으면 꽉 채우고, 넘칠 때만 양쪽에 < > 가 나온다.
   이때 .le-tab-wrap 의 탭-내용 간격(6.2rem + 0.2rem)이 끼어들어
   조직도 원래 간격(넓은 화면 6.2rem, 좁은 화면 4rem)과 달라지므로 되돌린다 */
.org-tab-wrap.le-tab-wrap.krds-tab-area {
    row-gap: 6.2rem;
}
.org-tab-wrap.le-tab-wrap .tab-conts {
    margin-top: 0;
}
@media (max-width: 767px) {
    .org-tab-wrap.le-tab-wrap.krds-tab-area {
        row-gap: 4rem;
    }
}

/* --- 조직도 가로 스크롤바 모양 --------------------------------------- */
/* 좁은 화면에서는 축소를 멈추고 가로로 넘기므로, 기본 스크롤바 대신
   도표 아래에 얇게 붙는 형태로 다듬음 */
.org-chart-box {
    scrollbar-width: thin;
    scrollbar-color: #C6CBD0 transparent;
    overscroll-behavior-x: contain;
}
.org-chart-box::-webkit-scrollbar {
    height: 0.8rem;
}
.org-chart-box::-webkit-scrollbar-track {
    background-color: transparent;
}
.org-chart-box::-webkit-scrollbar-thumb {
    border-radius: 50rem;
    background-color: #C6CBD0;
}
.org-chart-box::-webkit-scrollbar-thumb:hover {
    background-color: #9BA3AB;
}


/* ==================================================================== */
/* 조직도 표 - 좁은 화면 처리                                              */
/*                                                                      */
/* 예전에는 좁은 화면에서 한 줄을 카드 한 장으로 세워 보여 줬는데,          */
/* 표 모양이 달라져 같은 화면으로 안 보였다. 이제는 모양을 그대로 두고      */
/* 자리가 모자라면 가로로 밀어서 보게 한다.                                */
/* 미는 값(overflow-x, min-width)은 위 @media (max-width: 767px) 안의     */
/* .org-table-wrap / .org-table 규칙이 이미 맡고 있다                     */
/* ==================================================================== */
@media (max-width: 767px) {
    /* 마크업의 data-label 은 카드형에서 쓰던 값이라 이 폭에서도 쓰지 않는다.
       표 머리글이 그대로 보이므로 칸 이름을 두 번 보여 줄 까닭이 없다 */
    .org-member-name {
        text-align: left;
    }
}


/* 좁은 화면에서 도표가 가로 스크롤될 때, 키보드만 쓰는 사용자도
   스크롤할 수 있도록 초점을 받게 함(axe: scrollable-region-focusable).
   role/aria-label 은 HTML 에서 부여 */
.org-chart-box:focus-visible {
    outline: 0.2rem solid #1D4FAE;
    outline-offset: 0.2rem;
}

/* --- 구성원 상세 팝업 보정 ------------------------------------------- */
/* 사진은 자료가 없어도 자리를 지키도록 빈 액자로 둔다.
   ORG_MEMBERS 에 photo 를 넣으면 그 자리에 그대로 채워짐 */
.org-member-photo {
    position: relative;
    overflow: hidden;
    border-radius: 0.8rem;
    background-color: #E4E7EA;
    aspect-ratio: 3 / 4;
}
.org-member-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

/* 시안에 있는 초록색 소제목 */
.org-member-block-sub {
    margin: 0 0 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #008F55;
}

/* --- 구성원 상세 팝업 : 항목별 박스 --------------------------------- */
/* 주요학력·주요경력·주요저서를 각각 박스로 감싸 구분이 분명해지게 함
   (현재 누리집 상세화면과 같은 형태) */

.org-member-block + .org-member-block {
    margin-top: 4rem;
}
.org-member-block-tit {
    margin-bottom: 1.2rem;
}
.org-member-block-sub {
    margin: 0 0 1.2rem;
}


/* --- 팝업 안 초록 글자 대비 보정 ------------------------------------- */
/* 팝업 배경이 흰색이 아니라 회색(#F5F6F9 / #FAFBFC)이라 #008F55 는
   3.84~4.01:1 로 AA 미달(17px 굵은 글씨는 4.5:1 필요).
   눈으로는 거의 같은 톤으로 한 단계만 어둡게 조정 */
.org-member-name {
    color: #00804A;
}
.org-member-block-sub {
    color: #00804A;
}

/* ==================================================================== */
/* 센터소개 5개 페이지 공용 스타일                                        */
/* .center- 접두사. 센터소개 카드 / 센터 기능 / 구성원 표 / 바로가기 버튼   */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 센터소개 카드                                                        */
/* ------------------------------------------------------------------ */
.center-intro {
    display: flex;
    align-items: stretch;
    gap: 4rem;
    /* 위아래 여백은 글 영역(.center-intro-text)에만 줌 -
       카드 높이는 글 높이로만 정해지고 그림은 거기에 맞춰 들어감 */
    padding: 0 3rem 0 6rem;
    margin-bottom: 4rem;
    border-radius: 2.4rem;
    background-color: #F5F6F9;
}
.center-intro-text {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    padding-block: 6rem;
}
.center-intro-tit {
    margin: 0 0 2.4rem;
    font-size: 3.2rem;
    font-weight: 700;
    color: #002770;
}
.center-intro-text p {
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}
.center-intro-text p:last-child {
    margin-bottom: 0;
}
/* 일러스트 자리. 그림은 카드 높이 계산에서 빠지도록 absolute 로 띄우고,
   글 영역이 만든 높이 안에서 비율 유지한 채 최대 21.44rem 까지만 커짐 */
.center-intro-img {
    position: relative;
    flex: 0 0 auto;
    width: 21.44rem;
}
.center-intro-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100% - 3.2rem);
    object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* 섹션 공통 제목                                                       */
/* ------------------------------------------------------------------ */
.center-section {
    margin-bottom: 6.2rem;
}
.center-section:last-child {
    margin-bottom: 0;
}
.center-section-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.center-section-tit::before {
    content: "";
    background: url(../img/component/icon/ico_logo_mini.png) no-repeat;
    width: 3rem;
    height: 2.069rem;
    background-size: contain;
}

/* ------------------------------------------------------------------ */
/* 센터 기능                                                            */
/* ------------------------------------------------------------------ */
.center-func-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.center-func-list li {
    position: relative;
    padding-left: 2.4rem;
    margin-bottom: 0.8rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
    word-break: keep-all;
}
.center-func-list li:last-child {
    margin-bottom: 0;
}
.center-func-list li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 1.1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #464C53;
}

/* 기능이 여러 갈래인 센터(지역학·경제교육)의 소제목 */
.center-func-group + .center-func-group {
    margin-top: 3.2rem;
}
.center-func-group-tit {
    margin: 0 0 1.2rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 구성원 표                                                            */
/* ------------------------------------------------------------------ */
.center-table-wrap.krds-table-wrap .center-table.tbl.data {
    width: 100%;
    border-collapse: collapse;
    border-top: 0.2rem solid #1E2124;
}
.center-table-wrap.krds-table-wrap .center-table.tbl.data th,
.center-table-wrap.krds-table-wrap .center-table.tbl.data td {
    padding: 1rem 1.2rem;
    border-bottom: 0.1rem solid #CDD1D5;
    font-size: 1.7rem;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all;
}
.center-table-wrap.krds-table-wrap .center-table.tbl.data thead th {
    background-color: #EEF2F7;
    font-weight: 700;
    color: #1E2124;
}
.center-table-wrap.krds-table-wrap .center-table.tbl.data tbody th {
    font-weight: 400;
    color: #464C53;
}
/* 담당분야는 목록이라 왼쪽 정렬 */
.center-table-wrap.krds-table-wrap .center-table.tbl.data tbody td:first-of-type {
    text-align: left;
    padding-left: 2.4rem;
}
.center-table th + th,
.center-table td + td,
.center-table td + th,
.center-table th + td {
    border-left: 0.1rem solid #E3E4E4;
}

/* 구성원 표는 어느 폭에서든 모양을 그대로 두고, 자리가 모자라면 가로로 민다.
   조직도 표와 같은 방식·같은 최소 폭을 쓴다 */
.center-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.center-table-wrap.krds-table-wrap .center-table.tbl {
    min-width: 73.2rem;
}
.center-duty-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.center-duty-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 1.7rem;
}
.center-duty-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.2rem;
    width: 0.7rem;
    height: 0.1rem;
    background-color: #6D7882;
}

/* ------------------------------------------------------------------ */
/* 외부 누리집 바로가기 버튼                                             */
/* ------------------------------------------------------------------ */
.center-link-wrap {
    display: flex;
    justify-content: center;
    margin-top: 4.8rem;
}

/* ==================================================================== */
/* 오시는길                                                              */
/* ==================================================================== */
.visit-map {
    position: relative;
    margin-bottom: 3.2rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1.2rem;
    overflow: hidden;
    background-color: #F5F6F9;
}
.visit-map-canvas {
    width: 100%;
    height: 48rem;
}
/* 지도를 못 띄웠을 때 대신 보이는 안내 */
.visit-map-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 48rem;
    padding: 2.4rem;
    text-align: center;
}
.visit-map-fallback[hidden] {
    display: none;
}
.visit-map-fallback-txt {
    margin: 0;
    font-size: 1.6rem;
    color: #6D7882;
}
.visit-map-fallback-addr {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E2124;
}
.visit-map-fallback-link {
    color: #00733D;
    font-size: 1.6rem;
    font-weight: 700;
}

.visit-info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.visit-info-item {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding: 3rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
    background-color: #FFFFFF;
}
.visit-info-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: #E9F4EE;
    color: #00733D;
    background-color: rgba(0, 143, 85, 0.05);
}
.visit-info-icon.icon-address::before {
    content: "";
    background: url(../img/component/icon/ico_address.png) no-repeat;
    width: 2.667rem;
    height: 2.8rem;
    background-size: contain;
}
.visit-info-icon.icon-tel::before {
    content: "";
    background: url(../img/component/icon/ico_tel.png) no-repeat;
    width: 2.933rem;
    height: 2.933rem;
    background-size: contain;
}
.visit-info-body {
    min-width: 0;
}
.visit-info-tit {
    margin: 0 0 0.4rem;
    font-size: 2.2rem;
    font-weight: 600;
    color: #1E2124;
}
.visit-info-desc {
    margin: 0;
    font-size: 1.9rem;
    line-height: 1.6;
    color: #1E2124;
    word-break: keep-all;
}
.visit-info-desc a {
    color: inherit;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 태블릿(1024px 이하)                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .visit-map-canvas,
    .visit-map-fallback {
        height: 40rem;
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* 센터소개는 글이 먼저, 그림은 아래. 표는 카드형으로 전환                 */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {

    .center-intro {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 2.4rem;
        padding: 4rem 2rem;
        margin-bottom: 4rem;
    }
    .center-intro-text {
        padding-block: 0;
    }
    .center-intro-img {
        display: none;
    }

 
    .center-section {
        margin-bottom: 4rem;
    }

    .center-func-group-tit {
        font-size: 1.7rem;
    }

    /* 구성원 표는 좁은 화면에서도 모양을 그대로 둔다.
       예전에는 한 줄을 카드 한 장으로 세웠는데, 표가 다른 화면으로 보였다.
       이제는 자리가 모자라면 가로로 밀어서 본다.
       미는 값은 아래 .center-table-wrap 전역 규칙이 맡는다 */
    .center-duty-list {
        flex: 1 1 auto;
        min-width: 0;
    }

    .center-link-wrap {
        margin-top: 4rem;
    }
    /* 센터 이름이 긴 곳(국가균형발전지원센터 등)은 단추 글자가 한 줄에
       안 들어가 화면 밖으로 나갔다. 좁은 화면에서는 가로를 다 쓰고
       글자가 낱말 단위로 접히게 한다 */
    .center-link-btn {
        width: 100%;
        height: auto;
        min-height: 5.6rem;
        padding-block: 1.2rem;
        line-height: 1.5;
        white-space: normal;
        word-break: keep-all;
    }


    .visit-map-canvas,
    .visit-map-fallback {
        height: 32rem;
    }
    .visit-info-list {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .visit-info-icon {
        display: none;
    }
}


/* 지도 대체 안내문: 회색 배경 위 #6D7882 는 4.17:1 로 미달 */
.visit-map-fallback-txt {
    color: #5F6873;
}

/* ==================================================================== */
/* 장학금 신청 페이지 전용 스타일                                          */
/* .scholar- 접두사. 사업 3개를 가로로 나누고 각 사업 아래에 신청 항목 나열  */
/* ==================================================================== */

/* 사업이 몇 개든 균등하게 나뉘도록 자동 열 배치.
   .scholar-group 을 더하거나 빼기만 하면 칸이 맞춰짐 */
.scholar-group-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: start;
}

.scholar-group {
    padding-inline: 3.2rem;
}
.scholar-group:first-child {
    padding-left: 0;
}
.scholar-group:last-child {
    padding-right: 0;
}
/* 사업 사이 세로 구분선 */
.scholar-group + .scholar-group {
    border-left: 0.1rem solid #CDD1D5;
}

.scholar-group-tit {
    margin: 0 0 2rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1E2124;
    word-break: keep-all;
}
.scholar-group-desc {
    margin: 0 0 4rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
    word-break: keep-all;
}

.scholar-link-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.scholar-link-list li + li {
    margin-top: 1.6rem;
}

/* 신청 항목 버튼 : 글자는 가운데, 화살표는 오른쪽 끝 */
.scholar-link {
    position: relative;
    width: 100%;
    /* KRDS 버튼 기본값이 white-space: nowrap 이라, 사용자가 브라우저 글꼴을
       키우면 글자가 버튼 밖으로 삐져나오고 화살표와 겹친다(WCAG 1.4.4).
       줄바꿈을 허용해 버튼이 세로로 늘어나도록 함.
       기본 크기에서는 항목명이 한 줄에 들어가므로 지금 모양은 그대로 유지됨 */
    height: auto;
    min-height: 5.6rem;
    white-space: normal;
    word-break: keep-all;
}
.scholar-link-txt {
    white-space: normal;
}

/* ico-angle 은 아래를 향한 꺾쇠라 오른쪽을 보도록 돌려 씀 */
.scholar-link .svg-icon {
    position: absolute;
    right: 1.6rem;
    top: 50%;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    background-color: currentColor;
    transform: rotate(-90deg);
}

.form-group .form-conts.calendar-conts {
    gap: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 태블릿(1024px 이하)                                         */
/* ------------------------------------------------------------------ */
/* 3단을 유지하면 칸이 좁아 "모범(초,/중고)" 처럼 항목명이 세 줄까지 쪼개진다.
   1200px 이하에서는 2단, 767px 이하에서는 1단으로 접어 읽기 쉽게 함 */
/* px 대신 em 을 쓴 이유: 사용자가 브라우저 기본 글꼴을 키우면 그만큼
   더 이른 시점에 단이 접혀야 글자가 버튼 밖으로 넘치지 않는다.
   기본값(16px)에서는 75em = 1200px 이라 지금 화면과 똑같이 동작함 */
@media (max-width: 75em) {
    .scholar-group-list {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4rem 3.2rem;
    }
    .scholar-group {
        padding: 0;
    }
    /* 2단에서는 오른쪽 칸에만 세로 구분선 */
    .scholar-group + .scholar-group {
        border-left: none;
    }
    .scholar-group:nth-child(2n) {
        border-left: 0.1rem solid #E3E4E4;
        padding-left: 3.2rem;
    }
    
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* 가로 3칸으로는 글자가 깨져서 세로로 쌓고, 구분선도 가로선으로 바꿈       */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    .scholar-group-list {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .scholar-group:nth-child(2n) {
        border-left: none;
        padding-left: 0;
    }
    .scholar-group + .scholar-group {
        border-top: 0.1rem solid #CDD1D5;
        margin-top: 2.4rem;
        padding-top: 2.4rem;
    }
 
    .scholar-group-desc {
        margin-bottom: 2.4rem;
    }
    .scholar-link {
        min-height: 5.2rem;
        padding-inline: 4rem;
    }
    .scholar-link-list li + li {
        margin-top: 2.4rem;
    }
}

/* ==================================================================== */
/* 장학금 신청 질의 페이지                                                */
/* .quiz- 접두사. 문항 하나가 카드 한 장                                   */
/* ==================================================================== */

.quiz-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.quiz-item + .quiz-item {
    margin-top: 2.4rem;
}

/* fieldset 기본 테두리·여백을 지우고 카드 모양으로 다시 잡음 */
.quiz-box {
    margin: 0;
    padding: 2.4rem 3.2rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
}

/* KRDS 기본 CSS(output.css)가 legend 를 caption·sr-only 와 함께 화면에서
   숨겨 버린다(position:absolute; clip; !important). 여기서는 질문 문구가
   보여야 하므로 그 규칙만 되돌림. !important 로 걸려 있어 같은 방식이 필요 */
.quiz-box > .quiz-question {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 1.6rem !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: 0 !important;
    display: flex;
    align-items: baseline;
    gap: 2.4rem;
    /* fieldset 은 legend 자리만큼 테두리를 파내는데, 여기서는 테두리가
       카드 모양이라 끊겨 보인다. legend 를 띄우면(float) 일반 블록처럼
       흘러서 테두리를 파내지 않는다 */
    float: left;
}
.quiz-answer {
    clear: both;
}
.quiz-num {
    flex: 0 0 auto;
    font-size: 1.9rem;
    font-weight: 700;
    color: #002770;
}
.quiz-txt {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}

/* 답변 - PC 는 가로 나열 */
.quiz-answer {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    padding-left: 4.6rem;   /* 질문 번호 폭만큼 들여쓰기 */
}

/* 버튼 */
.quiz-btn-wrap {
    display: flex;
    justify-content: flex-end;
    gap: 1.6rem;
    margin-top: 4rem;
}
.quiz-btn {
    min-width: 9rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(47.9375em = 767px 이하)                              */
/* 답변을 세로로 쌓고, 버튼은 화면 폭을 채움                              */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    .quiz-box {
        padding: 2rem;
    }
    .quiz-box > .quiz-question {
        gap: 1.6rem;
        margin: 0 0 2.4rem !important;
    }
   
    .quiz-answer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        padding-left: 2.6rem;
    }

    /* 시안대로 기본 동작인 '다음으로'를 위로 올림.
       DOM 순서는 목록 → 다음으로 그대로라 초점 이동 순서는 유지됨 */
    .quiz-btn-wrap {
        flex-direction: column-reverse;
    }
    .quiz-btn {
        width: 100%;
    }
}

/* ==================================================================== */
/* 장학금 신청서 (세부페이지02)                                            */
/* 공간예약 제공자 등록 신청의 .apply- 구조를 그대로 쓰고,                   */
/* 여기서만 필요한 것 세 가지만 추가함                                      */
/*   1) 카드 제목 옆 배지                                                 */
/*   2) 첨부파일 오류 표시                                                */
/*   3) 하단 취소/신청완료 버튼                                            */
/* ==================================================================== */

/* 1) 카드 제목 + 배지 : 제목은 왼쪽, 배지는 오른쪽 끝 */
.apply-fieldset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 1.6rem;
}
.apply-fieldset-head .apply-fieldset-tit {
    margin-bottom: 0;
}
.apply-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 3.2rem;
    padding: 0 1.6rem;
    border-radius: 50rem;
    background-color: #E8EEFB;
    color: #1D4FAE;
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

/* 2) 첨부파일 오류 : 해당 항목만 붉게 표시 */
.apply-file-upload .upload-list li.is-error {
    padding: 1.2rem 1.6rem;
    border: 0.1rem solid #DE3412;
    border-radius: 0.8rem;
    background-color: #FDF3F2;
}
.apply-file-error {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.8rem 0 0;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #C4290B;
    word-break: keep-all;
}
.apply-file-error .svg-icon {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.2rem;
    background-color: #C4290B;
}

/* 3) 하단 버튼 */
.apply-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.6rem;
    margin-top: 4rem;
}
.apply-form-actions .krds-btn {
    min-width: 9rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(47.9375em = 767px 이하)                              */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    .apply-fieldset-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    /* 시안대로 기본 동작인 '신청완료'를 위로.
       DOM 순서는 취소 → 신청완료 그대로라 초점 이동 순서는 유지됨 */
    .apply-form-actions {
        flex-direction: column-reverse;
        gap: 1.2rem;
        margin-top: 3.2rem;
    }
    .apply-form-actions .krds-btn {
        width: 100%;
    }
}


/* 날짜 입력의 달력 버튼은 .calendar-input 을 기준으로 오른쪽 끝에 절대 배치된다.
   .calendar-input 이 칸 전체 폭을 차지하면 아이콘이 입력창에서 멀리 떨어지므로,
   다른 입력들과 같은 폭(52.7rem)으로 맞춰 아이콘이 입력창 안쪽에 오게 함 */
.apply-form .calendar-conts .calendar-input {
    max-width: 52.7rem;
}

@media (max-width: 47.9375em) {
    .apply-form .calendar-conts .calendar-input {
        max-width: 100%;
    }

    .apply-form .apply-fieldset .apply-fieldset-head .apply-badge {
        align-self: flex-end;
    }
}

/* 날짜가 하나뿐인 입력은 KRDS 의 기간(range) 배치가 아니라 칸을 꽉 채워야
   달력 아이콘이 입력창 안쪽 오른편에 놓인다 */
.apply-form .calendar-input .input-group > li {
    flex: 1 1 auto;
    width: 100%;
}
.apply-form .calendar-input .input-group > li .krds-input {
    width: 100%;
    max-width: 100%;
    padding-right: 5.2rem;
}

/* ==================================================================== */
/* 달력(datepicker) 보정                                                  */
/* ==================================================================== */

/* 1) 달력이 열릴 때 아래 내용이 12px 밀리는 문제                          */
/*    .calendar-conts 는 세로 flex 이고 gap:12px 이 걸려 있다.            */
/*    달력 영역은 높이 0 이지만 display:none -> block 으로 바뀌는 순간     */
/*    flex 항목이 하나 늘어 gap 만큼 칸이 커진다.                          */
/*    달력 자체는 absolute 로 떠 있으므로 흐름에서 빼서 높이를 고정시킴 */
/* 장학금 신청서와 공간예약 제공자 등록 신청 두 곳 모두 해당돼 공용으로 둠 */
.calendar-conts {
    position: relative;
}
.calendar-conts > .krds-calendar-area {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
}

/* 2) 하루만 고르는 달력의 선택 표시                                       */
/*    KRDS 달력은 기간 선택 기준이라 시작일은 왼쪽만, 종료일은 오른쪽만     */
/*    둥근 알약 모양이 된다. 하루만 고르는 .single 에서는 시작 표시만       */
/*    붙어 반쪽짜리로 보이므로 원형으로 되돌림 */
/* KRDS 는 시작/종료일 모서리를 border-top-left-radius 같은 개별 속성으로
   지정한다. 축약형(border-radius)만 쓰면 나중에 오는 개별 속성에 덮이므로
   같은 수준의 선택자로 네 모서리를 각각 되돌림 */
.krds-calendar-area .calendar-wrap.single .calendar-body .calendar-table-wrap .calendar-tbl td.period > .btn-set-date,
.krds-calendar-area .calendar-wrap.single .calendar-body .calendar-table-wrap .calendar-tbl td.period.start > .btn-set-date,
.krds-calendar-area .calendar-wrap.single .calendar-body .calendar-table-wrap .calendar-tbl td.period.end > .btn-set-date {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}
/* 기간 사이를 잇는 띠도 하루 선택에서는 필요 없음 */
.calendar-wrap.single td.period::before,
.calendar-wrap.single td.period::after {
    display: none;
}

/* 3) 좁은 화면에서 달력이 화면 밖으로 나가는 문제                         */
/*    KRDS 달력 패널은 38.4rem 고정 폭이고, 여는 칸의 왼쪽 끝에 맞춰       */
/*    펼쳐진다. 화면이 좁거나(시안 기준 360px) 여는 칸이 라벨 오른쪽처럼   */
/*    안쪽에서 시작하면 패널이 오른쪽으로 삐져나가 페이지 전체에 가로      */
/*    스크롤이 생겼다.                                                    */
/*    - 왼쪽이 아니라 오른쪽 끝을 기준으로 펴서 오른쪽으로는 넘어가지      */
/*      않게 하고, 폭은 화면 안에 들어오는 크기로 줄인다.                  */
/*      여는 칸의 오른쪽 끝은 대개 화면 가장자리에서 4rem 안쪽이라         */
/*      100vw - 8rem 이면 왼쪽도 화면 안에 남는다                          */
/*    - 폭이 줄면 44px 고정인 날짜 버튼이 칸을 넘치므로 함께 줄인다        */
/*    화면 하나에만 두면 다른 화면의 달력이 그대로 남으므로 공용으로 둔다  */
@media (max-width: 767px) {
    .krds-calendar-area .calendar-wrap {
        left: auto;
        right: 0;
        width: calc(100vw - 8rem);
        min-width: 28rem;
        max-width: 38.4rem;
    }
    /* 머리(연/월 고르기)와 날짜 사이 여백을 줄여 좁은 폭에서도 한 줄에 */
    .krds-calendar-area .calendar-wrap .calendar-head {
        padding: 1.6rem;
        gap: 0.8rem;
    }
    .krds-calendar-area .calendar-wrap .calendar-body .calendar-table-wrap {
        padding: 0 1.2rem;
    }
    /* 날짜 버튼은 칸 폭을 따르되 원래 크기(4.4rem)를 넘지 않게 하고,
       가로세로 비를 1:1 로 묶어 선택 표시가 찌그러지지 않게 한다 */
    .krds-calendar-area .calendar-wrap .calendar-body .calendar-table-wrap .calendar-tbl td > button {
        width: 100%;
        max-width: 4.4rem;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* ==================================================================== */
/* 장학금 신청내역                                                        */
/* 탭은 조직도, 검색·목록은 공지사항 구조를 그대로 재사용했으므로            */
/* 여기서는 이 페이지에만 필요한 것만 둔다                                  */
/* ==================================================================== */

.aid-tab-wrap {
    display: flex;
    flex-direction: column;
    gap: 6.2rem;
    margin-bottom: 4rem;
}
.aid-tab-wrap .tab-conts {
    margin-top: 0;
}
.aid-tab .btn-tab {
    height: 5.6rem;
    font-weight: 500;
}
.aid-tab .active .btn-tab {
    font-weight: 700;
}

/* 안내 문구 중 강조하는 줄 */
.info-box .is-point {
    color: #008F55;
    font-weight: 700;
}

/* 진행상태 · 선발여부는 값에 따라 색이 달라지는 자리.
   지금은 한 가지 값만 있어 초록으로 두고, 나중에 상태가 늘어나면
   .is-done / .is-hold 처럼 클래스를 덧붙여 쓰면 됨 */
.aid-state,
.aid-result {
    font-weight: 700;
    color: #008F55;
}


/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(47.9375em = 767px 이하)                              */
/* 표는 .list-table 공용 카드형 전환이 그대로 적용되므로 추가 처리 없음    */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    .aid-tab-wrap {
        gap: 3.2rem;
    }
    .aid-tab-wrap .tab-conts {
        gap: 0;
    }
    .aid-tab.tab.fill.full > ul {
        gap: 0;
    }
    .aid-tab.tab.fill.full > ul > li {
        width: auto;
        flex: 1 1 0;
    }
    /* 높이·글자 크기는 넓은 화면과 같게 둔다(5.6rem / 1.9rem).
       좁은 화면에서는 좌우 여백만 줄여 글자가 들어갈 자리를 만든다 */
    .aid-tab.tab.fill.full .btn-tab {
        padding: 0 0.8rem;
    }
    /* 붙어 있는 탭의 바깥쪽 모서리만 둥글게 */
    .aid-tab.tab.fill.full > ul > li .btn-tab {
        border-radius: 0;
    }
    .aid-tab.tab.fill.full > ul > li:first-of-type .btn-tab {
        border-top-left-radius: var(--krds-tab--fill-button-radius, 0.6rem);
        border-bottom-left-radius: var(--krds-tab--fill-button-radius, 0.6rem);
    }
    .aid-tab.tab.fill.full > ul > li:last-of-type .btn-tab {
        border-top-right-radius: var(--krds-tab--fill-button-radius, 0.6rem);
        border-bottom-right-radius: var(--krds-tab--fill-button-radius, 0.6rem);
    }
    .aid-tab.tab.fill.full > ul > li + li .btn-tab {
        border-left: none;
    }

}


/* 날짜·접수번호처럼 한 덩어리로 읽어야 하는 값은 줄바꿈 금지.
   폭이 모자라면 글자가 쪼개지는 대신 열이 넓어지도록 함 */
.aid-table-wrap .list-table.tbl.data td.col-date,
.aid-table-wrap .list-table.tbl.data td.col-code,
.aid-table-wrap .list-table.tbl.data td.col-round,
.aid-table-wrap .list-table.tbl.data td.col-state,
.aid-table-wrap .list-table.tbl.data td.col-result {
    white-space: nowrap;
}

@media (max-width: 47.9375em) {
    /* 카드형에서는 라벨과 값이 나란히 놓이므로 다시 줄바꿈 허용 */
    .aid-table-wrap .list-table.tbl.data td.col-date,
    .aid-table-wrap .list-table.tbl.data td.col-code,
    .aid-table-wrap .list-table.tbl.data td.col-round,
    .aid-table-wrap .list-table.tbl.data td.col-state,
    .aid-table-wrap .list-table.tbl.data td.col-result {
        white-space: normal;
    }
}


/* 목록에 자료가 없을 때. 다른 목록 페이지에서도 쓸 수 있게 공용으로 둠
   tr.list-no-data 를 안 붙인 목록(수강이력, 게시판, 1:1문의, 메시지함 등)도
   '한 칸이 줄 전체를 차지하는 줄'(td[colspan] 하나뿐) = 자료 없음 안내 줄이므로 같은 모양으로 */
.list-table.tbl.data tbody tr:has(> td[colspan]:only-child) > td,
.list-table.tbl.data tr.list-no-data td {
    padding: 6.4rem 2rem;
    text-align: center;
    font-size: 1.6rem;
    color: #5F6873;
}

@media (max-width: 47.9375em) {
    /* 카드형 전환에서는 라벨을 붙이지 않고 한 줄로 보여줌.
       아래 선은 자료 줄(카드)과 같은 #CDD1D5 - 빼 두면 넓은 화면(td 아래 선)과 달리
       표가 위 굵은 선만 있고 끝이 열린 채로 보인다 */
    .list-table-wrap.krds-table-wrap .list-table.tbl.data tbody tr:has(> td[colspan]:only-child),
    .list-table-wrap.krds-table-wrap .list-table.tbl.data tbody tr.list-no-data {
        padding-block: 0;
        border-bottom: 0.1rem solid #CDD1D5;
    }
    .list-table-wrap.krds-table-wrap .list-table.tbl.data tbody tr:has(> td[colspan]:only-child) > td,
    .list-table-wrap.krds-table-wrap .list-table.tbl.data tbody tr.list-no-data td {
        display: block;
        padding: 4.8rem 2rem;
        text-align: center;
    }
    .list-table-wrap.krds-table-wrap .list-table.tbl.data tbody tr:has(> td[colspan]:only-child) > td::before,
    .list-table-wrap.krds-table-wrap .list-table.tbl.data tbody tr.list-no-data td::before {
        content: none;
    }
}

/* ==================================================================== */
/* 배움마당 소개                                                          */
/* .yard- 접두사. 소개 카드 / 특징 2개 / 공간 이용자의 약속                 */
/* ==================================================================== */

.yard-section {
    margin-bottom: 6.4rem;
}
.yard-section:last-child {
    margin-bottom: 0;
}

/* 다른 페이지(조직도·센터소개)와 같은 로고 아이콘 붙은 제목 */
.yard-section-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.yard-section-tit::before {
    content: "";
    background: url(../img/component/icon/ico_logo_mini.png) no-repeat;
    width: 3rem;
    height: 2.069rem;
    background-size: contain;
}

/* ------------------------------------------------------------------ */
/* 소개 - 바깥 흰 상자 안에 옅은 회색 상자                                */
/* ------------------------------------------------------------------ */
.yard-intro {
    padding: 4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
    background-color: #FFFFFF;
}
.yard-intro-inner {
    display: flex;
    align-items: center;
    gap: 12.5rem;
    padding: 3.2rem 4rem;
    border-radius: 1.6rem;
    background-color: #F5F6F9;
}
.yard-intro-text {
    flex: 1 1 auto;
    min-width: 0;
}
.yard-intro-text p {
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}
.yard-intro-text p:last-child {
    margin-bottom: 0;
}
/* 사진 자리. 파일이 없으면 옅은 사각형만 보임 */
.yard-intro-img {
    flex: 0 0 auto;
    width: 20.4rem;
    aspect-ratio: 4 / 2.7;
    box-shadow: 0.8rem 0.8rem 0.8rem 0 rgba(46, 46, 46, 0.1);
}
.yard-intro-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.8rem;    
}

/* ------------------------------------------------------------------ */
/* 특징 두 가지                                                         */
/* ------------------------------------------------------------------ */
.yard-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
    margin: 3.2rem 0 0;
    padding: 0;
    list-style: none;
}
.yard-feature {
    overflow: hidden;
    border: 0.1rem solid #E3E4E4;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
}
.yard-feature-head {
    margin: 0;
    padding: 1.6rem 2rem;
    color: #FFFFFF;
    /* 18.66px 이상 굵은 글씨는 "큰 글씨"로 분류돼 대비 기준이 3:1 로 완화된다.
       초록 배경(#3E9A2A)이 3.58:1 이라 1.8rem(18px)에서는 미달이지만
       1.9rem(19px)으로 한 단계만 키우면 기준을 넘긴다.
       시안 색(#4BB134)에 최대한 가깝게 두려고 글자 크기 쪽을 조정함 */
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
}
.yard-feature-head.is-green {
    background-color: #4AB134;
}
.yard-feature-head.is-navy {
    background-color: #1D2088;
}
.yard-feature-body {
    margin: 0;
    padding: 2.4rem 3rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
    text-align: center;
    word-break: keep-all;
}

/* ------------------------------------------------------------------ */
/* 공간 이용자의 약속                                                    */
/* 안내 카드는 마크업상 맨 앞(설명 → 약속 순으로 읽히도록)이지만            */
/* PC 에서는 시안대로 두 번째 줄 왼쪽에 놓이도록 자리만 옮김               */
/* ------------------------------------------------------------------ */
.yard-promise-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.yard-promise {
    position: relative;
    min-height: 27rem;
    padding: 2.4rem 3.2rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
}
.yard-promise-num {
    margin: 0 0 1.2rem;
    font-size: 2.2rem;
    font-weight: 700;
    color: #002770;
}
.yard-promise-txt {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}
.yard-promise-note {
    margin: 0.6rem 0 0;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #D63D4A;
    word-break: keep-all;
}

/* 아이콘 자리 - 카드 오른쪽 아래 원형 */
.yard-promise-icon {
    position: absolute;
    right: 2.4rem;
    bottom: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7.3rem;
    height: 7.3rem;
    border-radius: 50%;
    background-color: #EEF1F5;
    overflow: hidden;
}
.yard-promise-icon img {
    display: block;
    width: 60%;
    height: 60%;
    object-fit: contain;
}
.yard-promise-icon.is-blue   { background-color: #EAF4FF; }
.yard-promise-icon.is-blue::after {
    content: "";
    width: 3.317rem;
    height: 3.53rem;
    background: url(../img/component/icon/ico_calender.png);
    background-size: contain;
}
.yard-promise-icon.is-purple { background-color: #EFECFF; }
.yard-promise-icon.is-purple::after {
    content: "";
    width: 3.7rem;
    height: 3.5rem;
    background: url(../img/component/icon/ico_question.png);
    background-size: contain;
}
.yard-promise-icon.is-mint   { background-color: #E5FBEF; }
.yard-promise-icon.is-mint::after {
    content: "";
    width: 3.6rem;
    height: 3.5rem;
    background: url(../img/component/icon/ico_computer.png);
    background-size: contain;
}
.yard-promise-icon.is-pink   { background-color: #FFE4E8; }
.yard-promise-icon.is-pink::after {
    content: "";
    width: 4.4rem;
    height: 3.5rem;
    background: url(../img/component/icon/ico_heart.png);
    background-size: contain;
}
.yard-promise-icon.is-orange { background-color: #FFEBE3; }
.yard-promise-icon.is-orange::after {
    content: "";
    width: 3.1rem;
    height: 3.5rem;
    background: url(../img/component/icon/ico_lock.png);
    background-size: contain;
}

/* 안내 카드 */
.yard-promise-intro {
    border-color: transparent;
    background-color: #F5F6F9;
}
.yard-promise-intro-label {
    margin: 0 0 1.2rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #002770;
}
.yard-promise-intro-tit {
    margin: 0 0 3.3rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.6;
    color: #1E2124;
    word-break: keep-all;
}
.yard-promise-intro-desc {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #464C53;
    word-break: keep-all;
}

/* PC 배치 : 1행 01·02·03 / 2행 안내·04·05 */
@media (min-width: 48em) {
    .yard-promise-intro            { grid-column: 1; grid-row: 2; }
    .yard-promise[data-promise="01"] { grid-column: 1; grid-row: 1; }
    .yard-promise[data-promise="02"] { grid-column: 2; grid-row: 1; }
    .yard-promise[data-promise="03"] { grid-column: 3; grid-row: 1; }
    .yard-promise[data-promise="04"] { grid-column: 2; grid-row: 2; }
    .yard-promise[data-promise="05"] { grid-column: 3; grid-row: 2; }
}

@media (max-width: 1350px) {
    .yard-promise-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .yard-intro-inner {
        gap: 4.8rem;
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 태블릿(1024px 이하)                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 64em) {
    .yard-intro-inner {
        gap: 2.4rem;
    }
    .yard-intro-img {
        width: 18rem;
    }

}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(47.9375em = 767px 이하)                              */
/* 소개는 글이 먼저·사진이 아래, 나머지는 한 줄에 하나씩                   */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  

    .yard-intro {
        padding: 2rem;
    }
    .yard-intro-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 4rem;
        padding: 2rem;
    }
 
    .yard-intro-img {
        width: 100%;
    }

    .yard-feature-list {
        grid-template-columns: 1fr;
        margin-top: 3.2rem;
    }

    .yard-promise-list {
        grid-template-columns: 1fr;
    }
    .yard-promise {
        min-height: 0;
        padding-bottom: 9.6rem;   /* 아이콘 자리 확보 */
    }
    .yard-promise-intro {
        padding-bottom: 2rem;
    }
  
    .yard-promise-icon {
        right: 2rem;
        bottom: 2rem;
    }
}


/* 약속 카드는 3단으로 두면 1350px 부근부터 칸이 좁아 글이 답답해진다.
   그 아래에서는 2단으로 접음.
   위쪽 @media (min-width: 48em) 에서 준 칸 지정을 풀어야 자동 배치가 되고,
   모바일 1단 규칙이 뒤에 오지 않으므로 min-width 를 함께 걸어 구간을 한정함 */
@media (min-width: 48em) and (max-width: 84.375em) {
    .yard-promise-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .yard-promise-intro,
    .yard-promise[data-promise] {
        grid-column: auto;
        grid-row: auto;
    }
}

/* ==================================================================== */
/* 공간현황                                                              */
/* .space- 접두사. 분류 필터 / 선택된 필터 칩 / 카드 목록 /               */
/* 좁은 화면용 검색 필터 시트                                             */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 분류 필터 (PC)                                                       */
/* ------------------------------------------------------------------ */
.space-filter-row {
    align-items: flex-start;
}
.space-check-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1.2rem 2rem;
}
/* '전체'는 한 줄을 통째로 차지해 지역 목록과 구분되게 함 */
.space-check-grid > .krds-form-check:first-child {
    grid-column: 1 / -1;
}
.space-check-grid .krds-form-check label {
    font-size: 1.6rem;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 선택된 필터 칩                                                       */
/* ------------------------------------------------------------------ */
.space-selected {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.space-selected:empty,
.space-selected[hidden] {
    display: none;
}
.space-selected-label {
    margin-right: 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.space-selected-count {
    color: #00874F;
}
.space-selected-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 50%;
    background-color: #FFFFFF;
    cursor: pointer;
}
.space-selected-reset .svg-icon {
    width: 1.6rem;
    height: 1.6rem;
    background-color: #33363D;
}
.space-chip-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.space-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 4rem;
    padding: 0 1.2rem 0 1.2rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 50rem;
    background-color: #FFFFFF;
    color: #1E2124;
    font-size: 1.7rem;
    cursor: pointer;
}
.space-chip:hover,
.space-chip:focus {
    border-color: #1D4FAE;
    color: #1D4FAE;
}
.space-chip .svg-icon {
    width: 1.4rem;
    height: 1.4rem;
    background-color: #33363D;
}

/* ------------------------------------------------------------------ */
/* 좁은 화면용 필터 열기 줄 (PC 에서는 숨김)                              */
/* ------------------------------------------------------------------ */
.space-mobile-bar {
    display: none;
    align-items: center;
    gap: 1.6rem;
    margin-top: 2.4rem;
}
.space-mobile-bar .divider {
    width: 0.1rem;
    height: 1.6rem;
    background-color: #8A949E;
}
.space-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
    cursor: pointer;
}
.space-filter-btn .svg-icon {
    width: 2rem;
    height: 2rem;
    background-color: #1E2124;
}
.space-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.6rem;
    border-radius: 50rem;
    background-color: #00874F;
    color: #FFFFFF;
    font-size: 1.3rem;
    font-weight: 700;
}
/* 고른 조건이 없으면 스크립트가 이 요소에 hidden 을 건다.
   그런데 브라우저 기본값인 [hidden] { display: none } 보다 위의
   .space-filter-count { display: inline-flex } 가 더 세서 그대로 보이고,
   결과적으로 "필터 0" 이 늘 붙어 있었다. 같은 선택자 세기로 되돌려 준다
   (공간현황/세종배움터/진흥원프로그램/강좌별검색에 함께 적용됨) */
.space-filter-count[hidden] {
    display: none;
}

/* ------------------------------------------------------------------ */
/* 카드 목록                                                            */
/* ------------------------------------------------------------------ */
.space-card-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}
.space-card {
    border: 0.1rem solid #DADEE3;
    border-radius: 1rem;
    background-color: #FFFFFF;
    overflow: hidden;
}
/* 시안에서 두 번째 카드가 선택된 상태로 표시돼 있어 그 모양을 남겨둠 */
.space-card.is-active {
    border-color: #008F55;
    box-shadow: 0 0 0 0.1rem #008F55;
}
.space-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
/* 마우스를 올리거나 키보드 초점이 들어오면 카드 테두리를 강조.
   링크가 아니라 .space-card 에 걸어야 하는 이유 두 가지
     1) 테두리와 모서리 둥글기는 .space-card 가 갖고 있고, 링크에는
        border-width 가 없어서 border-color 만 줘서는 아무것도 안 보인다
     2) .space-card 에 overflow: hidden 이 있어 안쪽 요소의 box-shadow 는
        바깥으로 나오지 못하고 잘린다
   :focus-within 은 안에 있는 링크가 초점을 받았을 때도 같이 반응하게 함 */
.space-card:hover {
    border-color: #008F55;
    box-shadow: 0 0 0 0.1rem #008F55;
}
.space-card:focus-within {
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
  outline-offset: 0;
  box-shadow: var(--krds-box-shadow-outline);
  transition: outline 0s, box-shadow 0s !important;
}
.space-card-link:hover .space-card-tit,
.space-card-link:focus .space-card-tit {
    text-decoration: underline;
}
/* 사진 자리. 파일이 없으면 옅은 사각형만 보임 */
.space-card-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    background-color: #E4E7EA;
}
.space-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.space-card-body {
    display: block;
    padding: 2.4rem;
}
.space-card-badge {
    display: inline-flex;
    align-items: center;
    height: 3.1rem;
    padding: 0 1.2rem;
    margin-bottom: 1rem;
    border-radius: 50rem;
    background-color: #051F48;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 600;
}
.space-card-tit {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.space-card-addr {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #464C53;
    font-weight: 500;
    word-break: keep-all;
}
.space-card-meta {
    display: block;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    font-weight: 500;
}
.space-card-meta-row {
    display: block;
}
.space-card-meta-tit {
    display: inline-block;
    min-width: 3.6rem;
    margin-right: 2.4rem;
    color: #464C53;
}

.krds-pagination {
    margin-top: 4rem;
}

/* ------------------------------------------------------------------ */
/* 검색 필터 시트 (좁은 화면)                                            */
/* 공용 모달을 아래에서 올라오는 형태로만 바꿔 씀                          */
/* ------------------------------------------------------------------ */
.space-sheet-group + .space-sheet-group {
    margin-top: 2.4rem;
}
.space-sheet-tit {
    margin: 0;
    border-bottom: 0.1rem solid #E3E4E4;
}
.space-sheet-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.6rem 0;
    border: 0;
    background: none;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E2124;
    cursor: pointer;
}
.space-sheet-toggle .svg-icon {
    width: 2.4rem;
    height: 2.4rem;
    background-color: #1E2124;
    transition: transform 0.2s;
}
.space-sheet-toggle[aria-expanded="false"] .svg-icon {
    transform: rotate(180deg);
}
.space-sheet-panel {
    padding-top: 1.6rem;
}
.space-sheet-panel[hidden] {
    display: none;
}
/* 시트 안에서는 한 줄에 하나씩 */
.space-filter-modal .space-check-grid {
    grid-template-columns: 1fr;
    gap: 0;
}
.space-filter-modal .space-check-grid > .krds-form-check {
    padding: 1.2rem 0;
}
.space-filter-modal .space-check-grid label {
    font-size: 1.7rem;
}
.space-filter-modal .space-selected {
    margin: 0 0 1.6rem;
    padding: 1.6rem;
    border-top: 0;
    border-radius: 0.8rem;
    background-color: #F0F2F6;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.space-filter-modal .space-chip-list {
    flex-wrap: nowrap;
}
.space-filter-modal .space-chip {
    white-space: nowrap;
}
.space-sheet-actions {
    display: flex;
    gap: 1.2rem;
}
.space-sheet-actions .krds-btn {
    flex: 1 1 0;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 1350px 이하 : 카드 2단, 분류 4열                             */
/* ------------------------------------------------------------------ */
@media (max-width: 84.375em) {
    .space-check-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .space-card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 1024px) {
    .space-check-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
/* ------------------------------------------------------------------ */
/* 반응형 - 767px 이하 : 필터는 시트로, 카드는 한 줄에 하나               */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    /* 펼쳐둔 분류·선택된 필터는 감추고 검색만 남김 */
    .space-filter-wrap .space-filter-row,
    .space-filter-wrap .space-selected[data-selected-for="pc"] {
        display: none;
    }
    .space-filter-wrap .space-search-row .filter-label {
        display: none;
    }
    .space-filter-wrap .space-search-row {
        margin-bottom: 0;
    }
    .space-mobile-bar {
        display: flex;
        justify-content: flex-end;
    }
    /* 정렬기준은 필터 줄로 옮겼으므로 결과 머리에서는 숨김 */
    .space-result-head .result-opts {
        display: none;
    }
    .space-result-head {
        justify-content: flex-start;
        margin-top: 2.4rem;
    }

    .space-card-list {
        grid-template-columns: 1fr;
        gap: 3.2rem;
    }
 
    /* 아래에서 올라오는 시트 */
    .space-filter-modal .modal-dialog {
        align-items: flex-end;
        max-width: 100%;
        margin: 0;
    }
    .space-filter-modal .modal-content {
        width: 100%;
        max-height: 90vh;
        border-radius: 1.6rem 1.6rem 0 0;
    }
    .krds-modal:not([data-type=bottom-sheet]) .modal-dialog .modal-header {
        padding: 2.4rem 1.6rem 1.6rem 1.6rem;
    }
}


/* --- 공간현황 보정 --------------------------------------------------- */
/* ico-angle 은 아래를 향한 꺾쇠. 펼친 상태에서는 위를 보게 뒤집는다
   (기본값이 '접힘'인 다른 컴포넌트와 방향이 반대라 규칙도 반대로 둠) */
.space-sheet-toggle .svg-icon {
    transform: rotate(180deg);
}
.space-sheet-toggle[aria-expanded="false"] .svg-icon {
    transform: rotate(0deg);
}

/* 시트 안 선택된 필터 줄: 칩이 겹쳐 보이지 않게 간격 확보 */
.space-filter-modal .space-selected {
    gap: 1.2rem;
}
.space-filter-modal .space-chip-list {
    gap: 0.8rem;
}
.space-filter-modal .space-selected-reset {
    flex: 0 0 auto;
}
.space-filter-modal .space-chip-list > li {
    flex: 0 0 auto;
}

/* 시트를 화면 아래에 붙임 */
@media (max-width: 47.9375em) {
    .space-filter-modal .modal-dialog {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        height: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        transform: none;
        top: 0;
        left: 0;
    }
    .space-filter-modal .modal-content {
        width: 100%;
        max-height: 88vh;
        border-radius: 1.6rem 1.6rem 0 0;
    }
    .space-filter-modal .modal-conts {
        max-height: calc(88vh - 18rem);
    }
}

/* --- 검색 필터 시트 : 선택된 필터 줄 보정 ----------------------------- */
/* .modal-conts 가 세로 flex 라 칩 줄이 눌려 40px 짜리 칩이 32px 칸에
   갇혀 위아래가 잘려 나왔다. 줄어들지 않도록 고정 */
.space-filter-modal .space-selected {
    flex: 0 0 auto;
}

/* 칩 줄은 좌우로 밀어 보는 영역이라 스크롤 막대는 감춘다.
   (막대가 보이면 칩 아래에 회색 띠가 하나 더 있는 것처럼 보임) */
.space-filter-modal .space-selected {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.space-filter-modal .space-selected::-webkit-scrollbar {
    display: none;
}

/* 회색 띠가 시트 좌우 끝까지 닿아야 한다.
   음수 여백으로 늘리는 방법은 .modal-conts 가 flex 컨테이너라 먹지 않아,
   본문의 좌우 여백을 없애고 각 요소가 직접 여백을 갖게 함 */
/* KRDS 의 .krds-modal .modal-dialog .modal-conts 가 padding 축약형으로
   좌우 여백을 주고 있어, 같은 수준의 선택자로 올려야 지워진다 */
.krds-modal.space-filter-modal .modal-dialog .modal-conts {
    padding-left: 0;
    padding-right: 0;
}
.space-filter-modal .space-sheet-group {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}
.space-filter-modal .space-selected {
    margin: -1.6rem 0 1.6rem;
    padding: 1.6rem 2.4rem;
    border-radius: 0;
}


/* 가로로 스크롤되는 요소는 콘텐츠 폭이 아니라 보이는 폭을 기준으로 배경이
   그려져서, 스크롤한 만큼 오른쪽 끝에 배경이 비는 것처럼 보인다.
   안쪽에 감싸는 줄을 두는 대신 배경을 고정해 항상 꽉 차게 함 */
/* .modal-conts 가 align-items: flex-start 라 자동으로 늘어나지 않는다.
   좌우 여백(2.4rem)을 상쇄한 만큼 폭을 직접 지정해 띠가 끝까지 닿게 함 */
.space-filter-modal .space-selected {
    align-self: stretch;
    background-color: #EEF2F7;
}
/* 오른쪽 끝까지 밀었을 때 마지막 칩이 모서리에 붙지 않도록 여백 확보 */
.space-filter-modal .space-selected::after {
    content: '';
    flex: 0 0 0.8rem;
}

/* --- 검색 필터 시트 마무리 보정 --------------------------------------- */

/* 1) 시트 본문에 가로 스크롤이 생기던 문제
   칩 버튼 안의 .sr-only 는 position: absolute 인데 칩에 기준점(position)이
   없어서 스크롤 영역 밖으로 빠져나가 본문 폭을 넓히고 있었다.
   칩을 기준으로 삼아 안쪽에 머물게 함 */
.space-chip {
    position: relative;
}
.krds-modal.space-filter-modal .modal-dialog .modal-conts {
    overflow-x: hidden;
}

/* 2) '분류'를 접으면 시트가 확 쪼그라들어 버튼이 위로 튀어 오르던 문제
   시트 높이를 고정해 두고 안쪽 내용만 늘었다 줄었다 하게 함 */
@media (max-width: 47.9375em) {
    .space-filter-modal .modal-content {
        height: 78vh;
        max-height: 78vh;
        display: flex;
        flex-direction: column;
    }
    .krds-modal.space-filter-modal .modal-dialog .modal-conts {
        flex: 1 1 auto;
        max-height: none;
    }
    .space-filter-modal .space-sheet-actions {
        flex: 0 0 auto;
    }
}


/* --- 선택된 필터가 많을 때 좌우로 더 있다는 표시 ---------------------- */
/* 25개를 다 고르면 칩 줄이 화면의 7배까지 늘어난다.
   스크롤바는 기기·브라우저마다 겹침(overlay) 방식이라 평소엔 보이지 않아
   더 있다는 걸 알리는 수단으로 쓸 수 없다.
   대신 넘치는 쪽 가장자리를 흐리게 처리해서 "더 있다"를 알린다.
   어느 쪽에 더 있는지는 스크립트가 클래스로 알려줌 */
.space-filter-modal .space-selected.is-more-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
}
.space-filter-modal .space-selected.is-more-left {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 4rem), transparent);
}
.space-filter-modal .space-selected.is-more-left.is-more-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

/* ==================================================================== */
/* 공간현황 상세                                                          */
/* .sd- 접두사. 사진 / 이용정보 / 안내사항 / 예약 달력                     */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 머리 : 이름 + 길찾기 + 기본정보                                       */
/* ------------------------------------------------------------------ */
.sd-head {
    padding-top: 2.7rem;
    border-top: 0.2rem solid #1E2124;
}
.sd-head-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 2.4rem;
}
.sd-name {
    margin: 0;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1E2124;
    word-break: keep-all;
}
.sd-map-btn {
    flex: 0 0 auto;
}

.sd-info-list {
    margin: 0;
}
.sd-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 1.2rem 0;
    border-bottom: 0.1rem solid #DADEE3;
}
.sd-info-row dt {
    flex: 0 0 10.6rem;
    font-size: 1.7rem;
    font-weight: 400;
    color: #464C53;
}
.sd-info-row dd {
    margin: 0;
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}
.sd-info-row dd.is-point {
    font-weight: 600;
    color: #00874F;
}
.sd-info-row dd a {
    color: inherit;
}

/* ------------------------------------------------------------------ */
/* 본문 2단                                                            */
/* ------------------------------------------------------------------ */
.sd-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 43rem;
    gap: 3.2rem;
    margin-top: 4rem;
}
.sd-main {
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* 사진                                                                */
/* ------------------------------------------------------------------ */
.sd-gallery-main {
    aspect-ratio: 16 / 10;
    border-radius: 0.8rem;
    background-color: #E4E7EA;
    overflow: hidden;
}
.sd-gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 한 번에 4칸만 보이고, 5장부터는 이전·다음 버튼으로 한 칸씩 넘긴다.
   스크롤 막대는 만들지 않는다(overflow: hidden).
   안쪽 줄을 통째로 옆으로 밀어 보여 주는 방식 */
.sd-gallery-thumbs-viewport {
    overflow: hidden;
    margin-top: 1.2rem;
}
.sd-gallery-thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3.6rem) / 4);
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(var(--thumb-offset, 0px));
    transition: transform 0.3s;
}


.sd-gallery-thumbs button {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 0.2rem solid transparent;
    border-radius: 0.6rem;
    background-color: #E4E7EA;
    overflow: hidden;
    cursor: pointer;
}
.sd-gallery-thumbs .is-active button {
    border-color: #00874F;
}
.sd-gallery-thumbs button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-gallery-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 2.4rem;
}
.sd-gallery-count {
    font-size: 1.7rem;
    padding: 0.8rem 1.6rem;
    color: #1E2124;
    background: #FFFFFF;
    height: 4rem;
    border-radius: 100rem;
    border: 0.1rem solid #CDD1D5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.sd-gallery-count strong {
    color: #008F55;
}
.sd-gallery-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 50%;
    background-color: #FFFFFF;
    cursor: pointer;
}
.sd-gallery-btn .svg-icon {
    width: 2.4rem;
    height: 2.4rem;
    background-color: #33363D;
}
/* ico-angle 은 아래를 향한 꺾쇠라 좌·우로 돌려 씀 */
.sd-gallery-btn.prev .svg-icon {
    transform: rotate(90deg);
}
.sd-gallery-btn.next .svg-icon {
    transform: rotate(-90deg);
}

/* ------------------------------------------------------------------ */
/* 카드 공통                                                           */
/* ------------------------------------------------------------------ */
.sd-card {
    margin-top: 3.2rem;
    padding: 2.4rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1rem;
    background-color: #FFFFFF;
}
.sd-card-tit {
    margin: 0 0 1.6rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E2124;
}

.sd-use-list {
    margin: 0;
    padding-top: 1.6rem;
}
.sd-use-row {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 0.8rem 0;
}
.sd-use-row dt {
    flex: 0 0 14rem;
    font-size: 1.7rem;
    color: #464C53;
}
.sd-use-row dd {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}

.sd-equip-tit {
    margin: 2.4rem 0 1.25rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.sd-equip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-equip-list li {
    padding: 0.6rem 1rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 100rem;
    font-size: 1.5rem;
    color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 안내사항                                                            */
/* ------------------------------------------------------------------ */
.sd-notice {
    margin-top: 4rem;
    padding: 2.4rem;
    border-radius: 1rem;
    background-color: #F2F3F9;
}
.sd-notice-tit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #173E99;
}
.sd-notice-tit::before {
    content: "";
    background: url(../img/component/icon/ico_information_fill.png) no-repeat;
    width: 2rem;
    height: 2rem;
    background-size: contain;
}
.sd-notice ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-notice li {
    position: relative;
    padding-left: 3.4rem;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #464C53;
    word-break: keep-all;
}
.sd-notice li::before {
    content: '';
    position: absolute;
    left: 2.2rem;
    top: 1.1rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: #464C53;
}

/* ------------------------------------------------------------------ */
/* 예약 달력                                                           */
/* ------------------------------------------------------------------ */
.sd-cal-card {
    margin-top: 0;
}
.sd-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 2.4rem;
}

.sd-cal-head .sd-cal-selects select {
    color: #1E2124;
    font-size: 1.9rem;
    font-weight: 700;
}
.sd-cal-selects {
    display: flex;
    gap: 0.4rem;
}
.sd-cal-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 50%;
    background-color: #FFFFFF;
    cursor: pointer;
}
.sd-cal-move .svg-icon {
    width: 1.6rem;
    height: 1.6rem;
    background-color: #1E2124;
}
.sd-cal-move.prev .svg-icon {
    transform: rotate(90deg);
}
.sd-cal-move.next .svg-icon {
    transform: rotate(-90deg);
}

.sd-cal-tbl {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.sd-cal-tbl th {
    padding: 0.8rem 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: #1E2124;
    text-align: center;
}
.sd-cal-tbl th.sun,
.sd-cal-tbl td.sun {
    color: #D63D4A;
}
.sd-cal-tbl td {
    padding: 0.2rem;
    font-size: 1.7rem;
    text-align: center;
}
/* 다른 달 날짜도 화면에 글자로 보이므로 대비 기준을 지켜야 한다.
   #B1B8BE 는 2:1 로 크게 미달이라 #6D7882(4.51:1)로 조정 */
.sd-cal-tbl td.is-other {
    color: #8A949E;
}

.sd-cal-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border: 0.1rem solid transparent;
    border-radius: 50%;
    background-color: transparent;
    font-size: 1.7rem;
    color: inherit;
    cursor: pointer;
}
.sd-cal-date:active {
    box-shadow: none;
    border: none;
}
/* 이용 가능 : 진한 초록 바탕 */
.sd-cal-date.is-open {
    background-color: #00874F;
    color: #FFFFFF;
    font-weight: 700;
}
/* 예약 완료 : 옅은 초록 바탕 */
.sd-cal-date.is-done {
    background-color: #DCF0E6;
    color: #1E2124;
}
/* 이용 불가 : 바탕 없음 */
.sd-cal-date.is-closed {
    color: #8A929B;
    cursor: default;
}
.sd-cal-date.is-today {
    border-color: #1E2124;
}
.sd-cal-date.is-selected {
    background-color: #12295E;
    color: #FFFFFF;
    font-weight: 700;
}

.sd-cal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 0.1rem solid #CDD1D5;
}
.sd-cal-today {
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.5rem;
    color: #1E2124;
    cursor: pointer;
}
.sd-cal-btns {
    display: flex;
    gap: 0.8rem;
}

.sd-cal-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem 0.8rem;
    margin: 4.8rem 0 0;
    padding: 0;
    list-style: none;
}
.sd-cal-legend li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.7rem;
    color: #1E2124;
}
.sd-cal-dot {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border: 0.1rem solid transparent;
    border-radius: 50%;
}
.sd-cal-dot.is-open     { background-color: #00874F; }
.sd-cal-dot.is-done     { background-color: #DCF0E6; }
.sd-cal-dot.is-closed   { background-color: #EEF1F5; }
.sd-cal-dot.is-today    { border-color: #1E2124; background-color: #FFFFFF; }
.sd-cal-dot.is-selected { background-color: #12295E; }

.sd-cal-help {
    margin-top: 3.2rem;
    padding: 2.4rem;
    border-radius: 1rem;
    background-color: #FFFFFF;
    border: 0.1rem solid #CDD1D5;
}
.sd-cal-help ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-cal-help li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #464C53;
    word-break: keep-all;
    margin-bottom: 0.6rem;
}
.sd-cal-help li:last-child {
    margin-bottom: 0;
}
.sd-cal-help li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 1rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: #464C53;
}
/* 회색 배경 위에서는 #00874F 가 4.24:1 로 미달 */
.sd-cal-help strong {
    color: #008F55;
}

/* ------------------------------------------------------------------ */
/* 하단 버튼                                                           */
/* ------------------------------------------------------------------ */
.sd-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 0.1rem solid #D8DDE5;
}
.sd-actions .krds-btn {
    min-width: 9rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 1350px 이하 : 달력을 아래로                                  */
/* ------------------------------------------------------------------ */
@media (max-width: 84.375em) {
    .sd-body {
        grid-template-columns: minmax(0, 1fr);
    }
    .sd-side {
        max-width: 44rem;
    }
    .sd-cal-card {
        margin-top: 2.4rem;
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 767px 이하                                                  */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    .sd-head-top {
        gap: 2.4rem;
    }

    /* 이름과 버튼이 한 줄에 다 안 들어가므로 값은 라벨 아래로 */
    .sd-info-row {
        flex-direction: column;
        gap: 0.8rem;
        padding: 1.2rem 0;
    }
    .sd-info-row dt {
        flex: 0 0 auto;
    }

    .sd-card {
        padding: 2rem 1.6rem;
    }
    .sd-use-row {
        flex-direction: column;
        gap: 0.2rem;
    }
    .sd-use-row dt {
        flex: 0 0 auto;
    }

    .sd-side {
        max-width: none;
    }
    .sd-cal-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sd-cal-actions {
        flex-wrap: wrap;
    }

    .sd-actions .krds-btn {
        width: 100%;
    }
}

/* ==================================================================== */
/* 공간현황 상세 - 시안 대조 후 보정                                       */
/* ==================================================================== */

/* 1) 카드 제목에 회색 띠 (시안의 '공간 이용정보' 머리) */
/* 카드가 안쪽 여백을 갖고, 머리띠만 음수 여백으로 끝까지 늘린다.
   자식마다 폭을 계산하는 방식은 표(width:100%)에서 어긋나 넘쳤다 */
.sd-card {
    padding: 2.4rem;
    overflow: hidden;
}
.sd-card .sd-card-tit {
    margin: -2.4rem -2.4rem 0;
    padding: 1.2rem 2.4rem;
    border-bottom: 0.1rem solid #CDD1D5;
    background-color: #F5F6F9;
    font-size: 2rem;
    font-weight: 700;
}

/* 달력 카드는 시안에서 머리에 띠가 없다 */
.sd-cal-card .sd-card-tit {
    margin: 0 0 1.6rem;
    padding: 0;
    border-bottom: 0;
    background-color: transparent;
}

/* 2) 달력 : 연·월 안내 줄 */
.sd-cal-caption td {
    padding: 0.4rem 0 0.8rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #464C53;
    text-align: left;
}

/* 3) 날짜 상태별 색을 시안에서 뽑은 값으로 맞춤 */
/* 이용 가능 : 진한 초록. 시안값(#039C5B)은 흰 글씨 대비가 3.6:1 이라
   기준(4.5:1)을 넘기도록 #00874F 로 한 톤만 낮춤 */
.sd-cal-date.is-open {
    background-color: #00874F;
    color: #FFFFFF;
}
/* 예약 완료 : 아주 연한 초록 바탕 + 초록 글씨 */
.sd-cal-date.is-done {
    background-color: #E5F4ED;
    color: #00733D;
    font-weight: 700;
}
/* 이용 불가 : 연회색 원 */
.sd-cal-date.is-closed {
    background-color: #F3F4F6;
    color: #464C53;
}
/* 상태가 정해지지 않은 날은 원 없이 글자만 (시안의 5·6·7일 등) */
.sd-cal-date.is-none {
    background-color: transparent;
    color: #1E2124;
    cursor: default;
}
/* 오늘 : 흰 바탕 + 초록 테두리 */
.sd-cal-date.is-today {
    border-color: #00874F;
    background-color: #FFFFFF;
    color: #00733D;
    font-weight: 700;
}
/* 선택 : 진한 남색. 오늘 표시보다 우선 */
.sd-cal-date.is-selected,
.sd-cal-date.is-today.is-selected {
    border-color: transparent;
    background-color: #012770;
    color: #FFFFFF;
    font-weight: 700;
}

.sd-cal-dot.is-open     { background-color: #039C5B; }
.sd-cal-dot.is-done     { background-color: #E6F4EE; }
.sd-cal-dot.is-closed   { background-color: #F3F4F6; }
.sd-cal-dot.is-today    { border-color: #039C5B; background-color: #FFFFFF; }
.sd-cal-dot.is-selected { background-color: #002770; }

/* 4) 안내사항 배경을 시안값으로 */
.sd-notice {
    background-color: #F2F3F8;
}

@media (max-width: 47.9375em) {
    .sd-card {
        padding: 1.6rem;
    }
    .sd-card .sd-card-tit {
        margin: -1.6rem -1.6rem 0;
    }
    .sd-use-list {
        padding-inline: 0.8rem;
    }
}

/* ==================================================================== */
/* 예약 달력 - 연·월 고르기와 상태 표시 보정                                */
/* ==================================================================== */

/* 시안처럼 눌러서 목록을 펼치는 방식 */
.sd-cal-select {
    position: relative;
}
.sd-cal-select-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 0;
    border-radius: 0.6rem;
    background: none;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
    cursor: pointer;
}
.sd-cal-select-btn[aria-expanded="true"] {
    background-color: #EEF1F5;
}
.sd-cal-select-btn .svg-icon {
    width: 1.6rem;
    height: 1.6rem;
    background-color: #1E2124;
}
.sd-cal-select-btn[aria-expanded="true"] .svg-icon {
    transform: rotate(180deg);
}

.sd-cal-select-list {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 10;
    width: 11rem;
    max-height: 24rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.8rem 0;
    border: 0.1rem solid #CDD1D5;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
    list-style: none;
}
.sd-cal-select-list[hidden] {
    display: none;
}
.sd-cal-select-list button {
    display: block;
    width: 100%;
    padding: 0.8rem 1.6rem;
    border: 0;
    background: none;
    font-size: 1.6rem;
    color: #464C53;
    text-align: center;
    cursor: pointer;
}
.sd-cal-select-list button:hover,
.sd-cal-select-list button:focus {
    background-color: #F0F2F6;
}
.sd-cal-select-list button.is-current {
    font-weight: 700;
    color: #00733D;
}

/* 이용 불가는 연회색 원으로 (시안의 토요일 표시) */
.sd-cal-date.is-closed {
    background-color: #F3F4F6;
    color: #464C53;
    cursor: default;
}


/* --- 대비 보정 (되돌아가 있어 다시 맞춤) ------------------------------- */
/* 다른 달 날짜: #8A949E 는 흰 배경에서 3.08:1 로 미달 */
.sd-cal-tbl td.is-other {
    color: #6D7882;
}
/* 안내문 강조: 회색 배경 위 #008F55 는 4.15:1 로 미달 */
.sd-cal-help strong {
    color: #00804A;
}

/* --- 모바일 달력 카드 보정 -------------------------------------------- */
/* 모바일에서 .sd-card .sd-card-tit 에 준 음수 여백(머리띠를 카드 끝까지
   늘리는 규칙)이 달력 카드 제목에도 걸려, 제목이 모서리에 붙어 버렸다.
   달력 카드는 머리띠가 없으므로 되돌린다 */
@media (max-width: 47.9375em) {
    .sd-cal-card .sd-card-tit {
        margin: 0 0 1.6rem;
        padding: 0;
        border-bottom: 0;
        background-color: transparent;
    }
    /* 제목과 연·월 줄이 붙지 않도록 간격 확보 */
    .sd-cal-head {
        margin-bottom: 1.6rem;
    }
    /* 범례는 시안대로 3칸. 마지막 줄에 하나만 남는 어색함이 줄어든다 */
    .sd-cal-legend {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.2rem 0.4rem;
    }
}


/* 좁은 화면에서 날짜 칸 44px x 7 이 안 들어가 표가 넘쳤다.
   칸을 조금 줄여 맞춘다. 터치 영역은 표 칸(td)이 받쳐 준다 */
@media (max-width: 23.4375em) {
    .sd-cal-date {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.4rem;
    }
    .sd-cal-tbl td {
        padding: 0.1rem;
    }
}

/* --- 썸네일 초점 표시가 잘리던 문제 ----------------------------------- */
/* 줄을 옆으로 밀어 보여 주려고 .sd-gallery-thumbs-viewport 에 걸어 둔
   overflow: hidden 이 초점 테두리까지 잘라 냈다.
   창에 테두리 두께만큼 여백을 주고 그만큼 밖으로 물려서,
   보이는 위치는 그대로 두고 테두리만 살린다 */
.sd-gallery-thumbs-viewport {
    padding: 0.4rem;
    margin: 0.8rem -0.4rem 0;
}

/* 초점은 안쪽이 아니라 바깥으로 그려 사진을 가리지 않게 */
.sd-gallery-thumbs button:focus-visible {
    outline: 0.2rem solid #1D4FAE;
    outline-offset: 0.2rem;
}

/* ==================================================================== */
/* 공간 이용신청                                                          */
/* 공간예약 제공자 등록 신청과 같은 .apply- 구조를 그대로 쓰므로              */
/* 여기서만 필요한 것만 둔다                                                */
/* ==================================================================== */

/* 희망시간 : 시안처럼 한 줄에 나란히 */
.use-time-area {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem;
}

/* 희망기간 : 시작 - 종료 */
.apply-period-group {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.apply-period-group .krds-form-select {
    width: auto;
    min-width: 12.8rem;
}

@media (max-width: 47.9375em) {
    .use-time-area {
        gap: 1.2rem 1.6rem;
    }
    .apply-period-group .krds-form-select {
        flex: 1 1 0;
        min-width: 0;
    }
}


/* 이메일 칸이 다른 칸보다 넓게 나오던 문제.
   기존 폭 규칙이 text·number·password 만 잡고 있어 email 이 빠져 있었다 */
.apply-fieldset input[type="email"].krds-input,
.apply-fieldset input[type="tel"].krds-input {
    width: 100%;
    max-width: 52.7rem;
    box-sizing: border-box;
}

/* --- 진행상태·선발여부 대비 (되돌아가 있어 다시 맞춤) ------------------ */
/* 흰 배경 위 #008F55 는 4.15:1 로 AA 미달(17px 굵은 글씨는 4.5:1 필요).
   목록에 여러 번 반복되는 글자라 눈으로 거의 같은 톤인 #00874F(4.59:1)로 조정 */
.aid-state,
.aid-result {
    color: #00874F;
}

/* --- 표가 좁아질 때 글자가 겹치던 문제 -------------------------------- */
/* 열이 8개라 1280px 아래로 내려가면 칸이 내용보다 좁아지는데,
   날짜·접수번호 등에 white-space: nowrap 을 걸어 둬서 줄바꿈 대신
   옆 칸을 침범해 글자가 겹쳐 보였다.
   내용이 들어갈 최소 폭을 정하고, 그보다 좁아지면 표를 좌우로 밀어 보게 함 */
.aid-table-wrap.krds-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #C6CBD0 transparent;
}
.aid-table-wrap.krds-table-wrap .list-table.tbl.data {
    min-width: 96rem;
}
.aid-table-wrap.krds-table-wrap::-webkit-scrollbar {
    height: 0.8rem;
}
.aid-table-wrap.krds-table-wrap::-webkit-scrollbar-track {
    background-color: transparent;
}
.aid-table-wrap.krds-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 50rem;
    background-color: #C6CBD0;
}

/* 카드형으로 바뀌는 구간에서는 최소 폭과 가로 스크롤을 되돌린다 */
@media (max-width: 47.9375em) {
    .aid-table-wrap.krds-table-wrap {
        overflow-x: visible;
    }
    .aid-table-wrap.krds-table-wrap .list-table.tbl.data {
        min-width: 0;
    }
}


/* 표를 좌우로 밀 수 있을 때 키보드 초점이 어디 있는지 보이게 */
.aid-table-wrap.krds-table-wrap:focus-visible {
    outline: 0.2rem solid #1D4FAE;
    outline-offset: 0.2rem;
}


/* --- 좁은 화면에서 표가 겹치던 문제 (마무리) --------------------------- */
/* 열이 8개라 표가 온전히 보이려면 1067px 이 필요한데,
   1366px 화면에서도 본문은 994px 뿐이라 노트북에서도 밀어 봐야 했다.
   1367px 미만에서는 셀 여백과 글자를 한 단계 줄여 필요한 폭을 840px 로
   낮췄다. 이것만으로 1280px 노트북까지는 스크롤 없이 다 보인다.

   카드형 전환 시점은 다른 목록(공지사항·연구보고서 등)과 같은 767px 로
   둔다. 여기만 앞당기면 태블릿에서 페이지마다 모양이 달라지고,
   목록은 여러 건을 한눈에 훑는 게 목적이라 카드형은 손해가 크다.
   768~1200 구간은 표를 유지하고 좌우로 밀어 본다 */
@media (max-width: 85.375em) {
    .aid-table-wrap.krds-table-wrap .list-table.tbl.data th,
    .aid-table-wrap.krds-table-wrap .list-table.tbl.data td {
        padding: 1.4rem 0.6rem;
        font-size: 1.5rem;
    }
    .aid-table-wrap.krds-table-wrap .list-table.tbl.data .aid-state,
    .aid-table-wrap.krds-table-wrap .list-table.tbl.data .aid-result {
        font-size: 1.5rem;
    }
    /* 압축한 만큼 최소 폭도 낮춘다.
       작성일 칸(11%)이 내용(92px)보다 좁아지지 않는 값 */
    .aid-table-wrap.krds-table-wrap .list-table.tbl.data {
        min-width: 84rem;
    }
}

/* 카드형으로 바뀌는 구간에서는 최소 폭과 가로 스크롤을 되돌린다 */
@media (max-width: 47.9375em) {
    .aid-table-wrap.krds-table-wrap {
        overflow-x: visible;
    }
    .aid-table-wrap.krds-table-wrap .list-table.tbl.data {
        min-width: 0;
    }
}

/* --- 로그인 도움 안내 : 목록 점 되살리기 ------------------------------- */
/* KRDS 기본 CSS 가 li 의 list-style 을 없애 버려 시안의 점이 사라졌다.
   .login-notice 와 같은 방식으로 점을 직접 그린다.
   두 로그인 페이지(연구원·포털)에 함께 적용된다 */
.login-help-box ul {
    padding-left: 0;
}
.login-help-box li {
    position: relative;
    padding-left: 5.2rem;
}
.login-help-box li::before {
    content: '';
    position: absolute;
    left: 3rem;
    top: 1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #464C53;
}


/* ==================================================================== */
/* 집현전소개                                                            */
/* 비전·정책목표·연결선은 인권경영 등에서 쓰는 .mng- 구조를 그대로 쓰고,     */
/* 여기서만 필요한 인재상·교육이념 카드만 .jhj- 로 덧붙였다                 */
/* ==================================================================== */

.jhj-box .mng-pill + .jhj-card-grid {
    margin-top: 3.2rem;
}
.jhj-box .jhj-card-grid + .mng-pill {
    margin-top: 7.2rem;
}

.jhj-card-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jhj-card {
    overflow: hidden;
    border: 0.1rem solid #E3E4E4;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
}

/* 인재상처럼 머리·몸 구분이 없는 카드 : 색 바탕 하나로 */
.jhj-card-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8.8rem;
    padding: 2rem 1.6rem;
}
.jhj-card-tit {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all;
}

.jhj-card-tit strong {
    font-size: 2rem;
}

/* 교육 이념처럼 머리·몸이 나뉜 카드 */
.jhj-card-head {
    margin: 0;
    padding: 2.4rem 1.6rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
}
.jhj-card-body {
    padding: 2.4rem;
}
.jhj-card-body p {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.5;
    color: #464C53;
    text-align: center;
    word-break: keep-all;
}

/* 세 가지 색. 글자색은 옅은 바탕에서도 대비 기준(4.5:1)을 넘는 값으로 */
.jhj-card.is-green  { border-color: #99D2BB; }
.jhj-card.is-blue   { border-color: #91A7FF; }
.jhj-card.is-orange { border-color: #FFC078; }

.jhj-card-simple.is-green  { background-color: #E6F4EE; }
.jhj-card-simple.is-blue   { background-color: #EDF2FF; }
.jhj-card-simple.is-orange { background-color: #FFF4E6; }

.jhj-card.is-green  .jhj-card-head { background-color: #E6F4EE; }
.jhj-card.is-blue   .jhj-card-head { background-color: #EAF0FF; }
.jhj-card.is-orange .jhj-card-head { background-color: #FFF4E6; }

/* 옅은 초록 바탕(#E6F4EE) 위에서 #008F55 는 3.66:1 로 미달 */
.jhj-card.is-green  .jhj-card-tit,
.jhj-card.is-green  .jhj-card-head { color: #008F55; }
.jhj-card.is-blue   .jhj-card-tit,
.jhj-card.is-blue   .jhj-card-head { color: #002770; }
/* 옅은 주황 바탕(#FFF4E6) 위에서 #E8590C 는 3.29:1 로 미달 */
.jhj-card.is-orange .jhj-card-tit,
.jhj-card.is-orange .jhj-card-head { color: #E8590C; }

/* ------------------------------------------------------------------ */
/* 반응형 - 1200px 이하 : 카드 2단 / 767px 이하 : 1단                    */
/* ------------------------------------------------------------------ */
@media (max-width: 75em) {
    .jhj-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
    }
}

@media (max-width: 47.9375em) {
    .jhj-card-grid {
        grid-template-columns: 1fr;
    }
    .jhj-box .jhj-card-grid + .mng-pill {
        margin-top: 3.2rem;
    }
    .jhj-card-simple {
        min-height: 0;
    }
   
}

/* --- 집현전소개 : 시안 색 맞춤 ---------------------------------------- */
/* 시안의 파란 카드 글자는 #1F42C0(남색 #002770 이 아님).
   교육 이념 카드 본문도 시안은 회색이 아니라 본문 진한 색, 굵게(700)다.
   .jhj-card 는 명예학위제 등 다른 화면도 함께 쓰는데, 그쪽 시안은 남색·회색이
   맞으므로 집현전소개 상자(.jhj-box) 안에서만 바꾼다 */
.jhj-box .jhj-card.is-blue .jhj-card-tit,
.jhj-box .jhj-card.is-blue .jhj-card-head {
    color: #1F42C0;
}
.jhj-box .jhj-card-body p {
    color: #1E2124;
    font-weight: 700;
}

/* ==================================================================== */
/* 명예학위제                                                            */
/* 단계별 카드는 집현전소개의 .jhj-card 를 그대로 재사용하고,               */
/* 여기서만 필요한 4칸 배치·단계 제목·연결 표시·표만 .hd- 로 둔다            */
/* ==================================================================== */

/* 로고 아이콘 붙은 제목. 조직도·센터소개와 같은 모양 */
.hd-section-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}

.hd-section-tit + .gi-table-wrap {
    margin-top: 0;
}
.hd-section-tit::before {
    content: "";
    /* 제목이 flex 라 이 표시도 flex 칸이 된다. 기본값(flex-shrink: 1)이면
       글자가 길어 두 줄이 되는 좁은 화면에서 표시가 눌려 작아진다
       (390px 에서 30px -> 23px). 줄어들지 않게 못 박는다 */
    flex: 0 0 auto;
    background: url(../img/component/icon/ico_logo_mini.png) no-repeat;
    width: 3rem;
    height: 2.069rem;
    background-size: contain;
}

.hd-step-tit {
    margin: 0 0 1.6rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}

/* 카드 4칸 배치 */
.jhj-card-grid.hd-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;
}

/* 단계 사이 연결 표시. 꺾쇠 두 개를 겹쳐 아래를 가리키게 */
.hd-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 2.4rem 0;
}
/* 화살표 모양은 아래 .hd-arrow-chev 에서 테두리 두 변으로 그린다.
   예전에는 .svg-icon 을 쓰는 규칙이 있었으나 마크업에 없어 죽은 값이었다 */

/* 담당자 표 */
.hd-table-wrap {
    margin-top: 3.2rem;
}
.hd-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.hd-table th,
.hd-table td {
    padding: 1.6rem 1.2rem;
    border-bottom: 0.1rem solid #E3E4E4;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #1E2124;
    vertical-align: middle;
    word-break: keep-all;
}
.hd-table thead th {
    border-top: 0.2rem solid #1E2124;
    border-bottom: 0.1rem solid #8A929B;
    background-color: #F5F6FA;
    font-weight: 700;
    text-align: center;
}
.hd-table tbody th {
    font-weight: 500;
    text-align: center;
}
.hd-table .hd-col-tel {
    text-align: center;
    white-space: nowrap;
}
/* 표 안 링크는 초록 글씨에 밑줄로 알린다. 전화(tel:)·메일(mailto:) 링크도
   눌리는 글자라 마찬가지다. 목록표 제목 칸과 같은 값을 쓴다 */
.hd-table.tbl.data tbody a {
    color: #008F55;
    font-weight: 700;
    text-decoration: underline solid;
    text-decoration-skip-ink: auto;
}

/* KRDS 링크 단추(.krds-btn.link)로 만든 표 안 링크도 같은 색으로 맞춘다.
   전화번호(학당 수강자 목록)와 누리집 주소(기관정보)가 여기 해당한다.
   밑줄은 부품이 안쪽 span 으로 이미 갖고 있다. 그래서 바깥 a 에는 밑줄을
   두지 않는다. 둘 다 그으면 선이 두 줄로 겹쳐 보인다.
   이 부품은 글자 크기가 1.9rem 이라 옆 칸(1.7rem)보다 혼자 커 보인다.
   표 안에서는 칸 글자와 같은 크기로 맞춘다 */
.list-table.tbl.data tbody .krds-btn.link,
.hd-table.tbl.data tbody .krds-btn.link {
    color: #008F55;
    font-weight: 700;
    font-size: 1.7rem;
    text-decoration: none;
}
/* 담당분야는 여러 줄이라 앞에 짧은 선을 붙여 항목을 구분 */
.hd-col-duty ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hd-col-duty li {
    position: relative;
    padding-left: 1.4rem;
}
.hd-col-duty li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.2rem;
    width: 0.8rem;
    height: 0.1rem;
    background-color: #464C53;
}

.hd-note {
    margin: 2rem 0 0;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #D63D4A;
    word-break: keep-all;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 1200px 이하 : 카드 2칸                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 75em) {
    .jhj-card-grid.hd-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 767px 이하 : 카드 1칸, 표는 카드형                            */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    .jhj-card-grid.hd-grid-4 {
        grid-template-columns: 1fr;
    }
    .hd-arrow {
        margin: 2rem 0;
    }

    .hd-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .hd-table,
    .hd-table tbody,
    .hd-table tbody tr,
    .hd-table tbody th,
    .hd-table tbody td {
        display: block;
        width: 100%;
    }
    .hd-table tbody tr {
        padding-block: 1.2rem;
    }
    .hd-table tbody tr:last-child {
        border-bottom: none;
    }
    .hd-table tbody th,
    .hd-table tbody td {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 0.6rem 0;
        border: none;
        text-align: left;
    }
    .hd-table tbody th::before,
    .hd-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 7rem;
        font-weight: 700;
        color: #1E2124;
    }
    .hd-table .hd-col-tel {
        text-align: left;
    }
}


/* --- 명예학위제 보정 --------------------------------------------------- */
/* KRDS 의 .tbl.data 규칙이 더 강해 가운데 정렬이 밀렸다.
   같은 수준으로 선택자를 올려 맞춘다 */
.hd-table-wrap .hd-table.tbl.data thead th {
    text-align: center;
    background-color: #EEF2F7;
    font-size: 1.7rem;
    padding: 1.6rem 1.2rem;
}
.hd-table-wrap .hd-table.tbl.data tbody th {
    text-align: center;
    font-weight: 500;
}
.hd-table-wrap .hd-table.tbl.data .hd-col-duty {
    text-align: left;
}
.hd-table-wrap .hd-table.tbl.data .hd-col-tel {
    text-align: center;
}

/* 꺾쇠 두 개가 거의 겹쳐 하나처럼 보였다. 간격을 벌림 */
.hd-arrow .svg-icon + .svg-icon {
    margin-top: -0.4rem;
}

@media (max-width: 47.9375em) {
    /* 카드형에서는 값이 라벨 옆에 오므로 왼쪽 정렬 */
    .hd-table-wrap .hd-table.tbl.data tbody th,
    .hd-table-wrap .hd-table.tbl.data .hd-col-tel {
        text-align: left;
    }
}


/* 카드형으로 바뀌면 colgroup 의 열 폭이 남아 표가 화면 밖으로 나갔다.
   표를 블록으로 바꿀 때 열 지정과 고정 배치를 함께 풀어 준다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hd-table.tbl.data {
        table-layout: auto;
        width: 100%;
    }
    .hd-table-wrap .hd-table.tbl.data colgroup {
        display: none;
    }

}


/* 카드형에서 표 폭이 화면을 넘던 문제.
   블록으로 바꿔도 width:100% 만으로는 안쪽 긴 글이 밀어내므로,
   최대 폭을 함께 묶고 줄바꿈을 허용한다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hd-table.tbl.data,
    .hd-table-wrap .hd-table.tbl.data tbody,
    .hd-table-wrap .hd-table.tbl.data tbody tr,
    .hd-table-wrap .hd-table.tbl.data tbody th,
    .hd-table-wrap .hd-table.tbl.data tbody td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .hd-table-wrap .hd-table.tbl.data tbody th,
    .hd-table-wrap .hd-table.tbl.data tbody td {
        display: flex;
        white-space: normal;
        word-break: keep-all;
    }
    .hd-table-wrap .hd-table.tbl.data .hd-col-duty ul {
        min-width: 0;
    }
    .hd-table-wrap .hd-table.tbl.data .hd-col-tel {
        white-space: normal;
    }
}


/* KRDS 의 .krds-table-wrap 이 표에 min-width 를 줘서, 카드형으로 바꿔도
   폭이 732px 로 고정돼 화면 밖으로 나갔다. 카드형에서는 풀어 준다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap.krds-table-wrap .hd-table.tbl.data {
        min-width: 0;
    }
    .hd-table-wrap.krds-table-wrap {
        overflow-x: visible;
    }
}


/* --- 명예학위제 : 꺾쇠와 모바일 표 보정 -------------------------------- */

/* 1) 단계 사이 꺾쇠
   아이콘 글꼴 대신 테두리 두 변으로 직접 그린다.
   시안처럼 남색에 두툼하고, 두 개가 겹쳐 아래를 가리킨다 */
.hd-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3.2rem 0;
}
/* .svg-icon 은 mask 로 모양을 오려내는 클래스라 테두리가 잘려 안 보인다.
   그래서 아이콘 클래스를 쓰지 않고 테두리 두 변으로 직접 그린다 */
/* 꺾쇠 하나. 네모의 오른쪽·아래 두 변만 그려 45도 돌린다.
   시안을 재어 맞춘 값이다(돌린 뒤 폭 15.6px, 두 개 합쳐 높이 17px).
   모서리는 시안대로 둥글리지 않는다 */
.hd-arrow-chev {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    border: 0 solid currentColor;
    border-right-width: 0.3rem;
    border-bottom-width: 0.3rem;
    transform: rotate(45deg);
}
/* 두 꺾쇠는 겹치듯 붙여 둔다. 예전 값(-0.4rem)은 크기가 컸을 때 기준이라
   지금 크기에서는 사이가 벌어져 보였다 */
.hd-arrow-chev + .hd-arrow-chev {
    margin-top: -0.45rem;
}

/* 화살표 색은 바로 위 단계 카드와 같게 둔다.
   학사 다음은 초록, 석사 다음은 남색 */
.hd-arrow.is-green {
    color: #2B8A3E;
}
.hd-arrow.is-blue {
    color: #002770;
}

/* 2) 모바일 카드형 표 : 다른 목록(.list-table)과 같은 모양으로 맞춤 */
@media (max-width: 47.9375em) {
    /* 셀마다 그어지던 구분선 제거. 행 사이에만 선을 둔다 */
    .hd-table-wrap .hd-table.tbl.data tbody th,
    .hd-table-wrap .hd-table.tbl.data tbody td {
        padding: 0.6rem 0;
        border: none;
        background-color: transparent;
    }
    .hd-table-wrap .hd-table.tbl.data tbody tr {
        padding-block: 1.2rem;
    }

    /* 라벨 폭·굵기를 다른 표와 동일하게 */
    .hd-table-wrap .hd-table.tbl.data tbody th::before,
    .hd-table-wrap .hd-table.tbl.data tbody td::before {
        flex: 0 0 9rem;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.6;
        color: #1E2124;
    }
}

/* --- 명예학위제 : 단계 사이 쌍꺾쇠를 시안 크기·색으로 ------------------ */
/* 시안을 재어 맞춘 값: 꺾쇠 폭 19px, 선 두께 약 2.8px, 두 꺾쇠 간격 약 9.3px,
   끝은 둥글리지 않음. 색은 바로 위 단계 카드와 같게(학사 다음 초록, 석사 다음 남색).
   본문 HTML 은 DB(TB_MENU_HTML)에 들어 있어 안의 마크업이 화면마다 다를 수 있다.
   (꺾쇠 i 두 개 / 예전 .svg-icon 두 개 / 색 클래스 없음 등)
   그래서 안쪽 요소는 숨기고 .hd-arrow 자신이 ::before·::after 로 두 꺾쇠를 그리고,
   색 클래스가 없어도 첫 화살표는 초록, 그다음부터는 남색이 되게 한다 */
.hd-section .hd-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3.2rem 0 3.6rem;
    color: #2B8A3E;
    line-height: 0;
    font-size: 0;
}
.hd-section .hd-arrow ~ .hd-arrow {
    color: #002770;
}
.hd-section .hd-arrow.is-green {
    color: #2B8A3E;
}
.hd-section .hd-arrow.is-blue {
    color: #002770;
}
.hd-section .hd-arrow > * {
    display: none;
}
.hd-section .hd-arrow::before,
.hd-section .hd-arrow::after {
    content: "";
    display: block;
    width: 1.36rem;
    height: 1.36rem;
    border: 0 solid currentColor;
    border-right-width: 0.3rem;
    border-bottom-width: 0.3rem;
    transform: rotate(45deg);
}
.hd-section .hd-arrow::after {
    margin-top: -0.41rem;
}

/* --- 명예학위제 이수 기준 표(구분 / 상세내용) --------------------------- */
/* 상세내용 칸은 설명 한 줄(p) 아래에 붙임표 목록(ul)이 오기도 한다 */
.hd-table .hd-col-duty p {
    margin: 0;
}
.hd-table .hd-col-duty p + ul {
    margin-top: 0.4rem;
}

/* --- 명예학위제 표 : 모바일 카드형을 다른 게시판과 똑같이 --------------- */
/* 공간공유내역 등에서 쓰는 .list-table 카드형과 값이 달라 들쭉날쭉했다.
   셀 여백·글자크기·정렬을 그대로 맞춘다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hd-table.tbl.data tbody th,
    .hd-table-wrap .hd-table.tbl.data tbody td {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 1.4rem 0.6rem;
        border: none;
        background-color: transparent;
        font-size: 1.5rem;
        line-height: 1.6;
        text-align: left;
    }
    /* 담당분야는 항목이 여러 줄이라 라벨과 세로로 맞추는 대신 위쪽 정렬 */
    .hd-table-wrap .hd-table.tbl.data tbody .hd-col-duty {
        align-items: flex-start;
    }
    .hd-table-wrap .hd-table.tbl.data tbody th::before,
    .hd-table-wrap .hd-table.tbl.data tbody td::before {
        flex: 0 0 9rem;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.6;
        color: #1E2124;
    }
    /* 담당분야 라벨은 다시 가로로(위에서 세로로 바꿔 뒀던 것 되돌림) */
    .hd-table-wrap .hd-table.tbl.data tbody .hd-col-duty::before {
        flex: 0 0 9rem;
        margin-bottom: 0;
    }
    .hd-table-wrap .hd-table.tbl.data .hd-col-duty li {
        line-height: 1.6;
    }
}


/* 카드형에서 표 위쪽 굵은 선이 사라지던 문제.
   그 선을 thead th 에만 줘서, thead 를 숨기면 함께 없어졌다.
   다른 목록 표처럼 표 자체에 걸어 카드형에서도 남게 한다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hd-table.tbl.data {
        border-top: 0.2rem solid #1E2124;
    }
}

/* ==================================================================== */
/* 평생교육 추진기반 구축                                                  */
/* 탭은 조직도와 같은 KRDS 탭, 로고 붙은 제목은 명예학위제의                 */
/* .hd-section-tit 를 그대로 재사용. 여기서만 필요한 것만 .le- 로 둔다      */
/* ==================================================================== */

.le-lead {
    margin: 0 0 4rem;
    padding: 3.2rem 5.3rem;
    border-radius: 1rem;
    background-color: #F5F6F9;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}

.le-tab-wrap .tab-conts {
    margin-top: 6.2rem;
}
/* 공용 탭 내용칸은 좁은 화면에서 flex 세로 gap(2.4rem)이 붙는다.
   이 화면의 묶음 간격은 .le-block + .le-block 의 6.2rem 이 맡고 있어,
   그대로 두면 모바일에서만 24px 이 더 벌어진다(62px -> 86px).
   gap 을 꺼서 넓은 화면과 같은 간격으로 맞춘다 */
.le-tab-wrap .tab-conts {
    row-gap: 0;
}

/* 항목이 5개라 좁은 화면에서는 한 줄에 다 들어가지 않는다.
   줄바꿈 대신 좌우로 밀어 보게 해서 탭 높이를 일정하게 유지 */
.le-tab.tab.fill.full > ul {
    flex-wrap: nowrap;
}
.le-tab .btn-tab {
    height: 5.6rem;
    padding: 0 1.6rem;
    font-weight: 500;
    white-space: nowrap;
}
.le-tab .active .btn-tab {
    font-weight: 700;
}
/* 탭 칸은 자리가 남을 때만 늘어나고(1), 모자라면 글자 폭을 지킨다(0).
   그래야 글자가 눌리지 않고 좌우로 밀어 보는 쪽으로 넘어간다.
   예전에는 이 값을 1400px 아래에서만 줘서, 그보다 넓은 화면에서 탭이 많은
   화면(강사출석체크 9개 등)은 칸을 균등 분할하다 글자가 눌려 답답해 보였다.
   폭과 상관없이 같게 두면 탭 개수가 몇 개든 같은 방식으로 동작한다 */
.le-tab.tab.fill.full > ul > li {
    flex: 1 0 auto;
    width: auto;
}

/* 블록 제목은 본문 제목보다 한 단계 작게 */
.le-block + .le-block {
    margin-top: 6.2rem;
}
.le-block .hd-table-wrap.Lifelong {
    margin-top: 0;
}
/* 표가 블록 제목 바로 아래 오면 제목의 아래 여백(1.6rem)이 간격을 만든다.
   그런데 점 목록 다음에 표가 오면 사이가 0 이 되어 붙어 버린다.
   이 프로젝트가 제목과 내용 사이에 두는 값과 같은 1.6rem 을 준다 */
.le-block .le-list + .hd-table-wrap.Lifelong {
    margin-top: 1.6rem;
}
.le-block-tit {
    margin-bottom: 1.6rem;
    font-size: 2.4rem;
}

.le-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.le-list > li {
    position: relative;
    padding-left: 3.2rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
    word-break: keep-all;
}
.le-list > li + li {
    margin-top: 0.4rem;
}
.le-list > li::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #464C53;
}
/* 예시 문구는 앞 항목에 딸린 설명이라 점 없이 들여쓰기만 */
.le-list > li.le-note {
    margin-top: 0.4rem;
    padding-left: 3.2rem;
    color: #D63D4A;
}
.le-list > li.le-note::before {
    content: none;
}
/* 앞 항목에 딸린 하위 항목. 붙임표로 한 단계 들여쓰고 색은 본문과 같게 둔다.
   .le-note 는 붉은 강조라 '※' 로 시작하는 알림에만 쓴다 */
.le-list > li.le-sub {
    margin-top: 0.4rem;
    padding-left: 4.6rem;
}
.le-list > li.le-sub::before {
    content: "-";
    left: 3.2rem;
    top: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    color: #6D7882;
}

.hd-table-wrap.gi-table-wrap .hd-table.tbl.data.gi-table tbody th {
    font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 767px 이하                                                  */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    .le-lead {
        padding: 2.4rem 2.1rem;
        text-align: left;
    }

    .le-tab.tab.fill.full > ul > li {
        flex: 0 0 auto;
        width: auto;
    }
    /* 높이·글자 크기는 넓은 화면과 같게 둔다(5.6rem / 1.9rem) */
    .le-tab .btn-tab {
        padding: 0 1.2rem;
    }


}


/* --- 탭 좌우 밀기 ------------------------------------------------------ */
/* 버튼은 평소에 감춰 두고, 실제로 밀 곳이 있을 때(.is-scrollable) 만 나온다.
   모양은 폭과 상관없이 그린다. 예전에는 767px 이하에서만 그려 두어, 그보다
   넓은 폭에서 밀기가 시작되면 테두리도 꺾쇠도 없는 민무늬 단추로 보였다.
   크기만 좁은 화면에서 한 단계 줄인다(아래 미디어 블록) */
.le-tab-nav {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    min-height: 4rem;
    padding: 0;
    border: 0.1rem solid #CDD1D5;
    border-radius: 50%;
    background-color: #FFFFFF;
    cursor: pointer;
    align-self: center;
}
.le-tab-nav:disabled {
    border-color: #E3E4E4;
    cursor: default;
}
/* 꺾쇠는 테두리 두 변으로 그린다(.svg-icon 은 mask 라 테두리가 잘림) */
.le-tab-chev {
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    border: 0 solid #1E2124;
    border-top-width: 0.2rem;
    border-right-width: 0.2rem;
}
.le-tab-nav.prev .le-tab-chev {
    transform: rotate(-135deg);
    margin-left: 0.3rem;
}
.le-tab-nav.next .le-tab-chev {
    transform: rotate(45deg);
    margin-right: 0.3rem;
}
.le-tab-nav:disabled .le-tab-chev {
    border-color: #B1B8BE;
}
/* 스크롤 막대는 숨기고 버튼으로만 민다 */
.le-tab.tab.fill.full > ul {
    scrollbar-width: none;
}
.le-tab.tab.fill.full > ul::-webkit-scrollbar {
    display: none;
}
/* 탭 줄과 좌우 버튼을 한 줄에 놓는다.
   버튼은 .tab 의 형제라 탭 영역(.le-tab-wrap)에 flex 를 건다.
   KRDS 의 .krds-tab-area 가 flex-direction: column 이라 그대로 두면
   버튼이 위아래로 쌓이므로 가로 방향으로 되돌린다 */
.le-tab-wrap.krds-tab-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: space-between;
}
.le-tab-wrap > .le-tab {
    flex: 1 1 auto;
    min-width: 0;
}
.le-tab-wrap > .tab-conts-wrap {
    flex: 1 0 100%;
}

@media (max-width: 47.9375em) {
    .le-tab-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 3.6rem;
        border: 0.1rem solid #CDD1D5;
        border-radius: 50%;
        background-color: #FFFFFF;
        cursor: pointer;
        align-self: center;
    }
    .le-tab-nav:disabled {
        border-color: #E3E4E4;
        cursor: default;
    }
    /* 꺾쇠는 테두리 두 변으로 그린다(.svg-icon 은 mask 라 테두리가 잘림) */
    .le-tab-chev {
        display: block;
        width: 0.8rem;
        height: 0.8rem;
        border: 0 solid #1E2124;
        border-top-width: 0.2rem;
        border-right-width: 0.2rem;
    }
    .le-tab-nav.prev .le-tab-chev {
        transform: rotate(-135deg);
        margin-left: 0.3rem;
    }
    .le-tab-nav.next .le-tab-chev {
        transform: rotate(45deg);
        margin-right: 0.3rem;
    }
    .le-tab-nav:disabled .le-tab-chev {
        border-color: #B1B8BE;
    }
    /* 스크롤 막대는 숨기고 버튼으로만 민다 */
    .le-tab.tab.fill.full > ul {
        scrollbar-width: none;
    }
    .le-tab.tab.fill.full > ul::-webkit-scrollbar {
        display: none;
    }
}


/* flex 자식은 기본적으로 내용보다 작아지지 않아, 탭 줄이 화면 밖까지
   늘어나 버렸다(1042px). min-width: 0 을 줘야 안에서 밀린다 */
.le-tab-wrap > .le-tab,
.le-tab-wrap > .le-tab > ul {
    min-width: 0;
    max-width: 100%;
}


/* 버튼이 세로로 눌려 납작해졌다. 높이를 폭과 같게 고정 */
@media (max-width: 47.9375em) {
    .le-tab-nav {
        height: 3.6rem;
        min-height: 3.6rem;
        padding: 0;
    }
}


/* 좁은 화면에서 좌우 버튼이 위아래로 갈라졌다.
   .le-tab-wrap 은 탭 줄·버튼·내용을 함께 담고 있어 wrap 이 필요한데,
   버튼과 탭 줄만 한 줄에 묶이도록 각자의 자리를 정해 준다 */
.le-tab-wrap > .le-tab-nav {
    order: 1;
}
.le-tab-wrap > .le-tab {
    order: 2;
}
.le-tab-wrap > .le-tab-nav.next {
    order: 3;
}
.le-tab-wrap > .tab-conts-wrap {
    order: 4;
}


/* 탭 줄이 부모 폭을 다 차지해 좌우 버튼이 아래위로 밀려났다.
   버튼 두 개와 사이 간격만큼 빼서 한 줄에 들어가게 함 */
@media (max-width: 47.9375em) {
    .le-tab-wrap > .le-tab {
        flex: 1 1 0;
        width: auto;
        /* 버튼 2개(3.6rem)와 사이 간격(0.8rem)을 빼고도 여유를 조금 더 둔다.
           딱 맞게 계산하면 반올림 때문에 줄이 넘어간다 */
        max-width: calc(100% - 10rem);
    }
}

/* --- 탭이 좁아질 때 글자가 잘리던 문제 ---------------------------------- */
/* 탭 5개를 균등분할하면 본문이 954px 아래로 내려가는 순간 칸이 글자보다
   좁아져 잘리고, 그 때문에 스크롤 막대까지 생겨 지저분했다.
   탭 전체가 온전히 들어가는 폭(약 1400px) 아래에서는 균등분할을 풀고
   좌우 버튼으로 밀어 보게 한다. 767px 이하와 같은 방식이라 일관된다 */
@media (max-width: 87.5em) {
    /* 버튼 모양·크기는 여기서 한 번에 정한다.
       (전에는 767px 이하에만 있어 그 위 구간에서 폭이 0 이 됐다) */
    .le-tab-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        flex: 0 0 auto;
        width: 3.6rem;
        height: 3.6rem;
        padding: 0;
        border: 0.1rem solid #CDD1D5;
        border-radius: 50%;
        background-color: #FFFFFF;
        cursor: pointer;
    }
    .le-tab-nav:disabled {
        border-color: #E3E4E4;
        cursor: default;
    }
    /* 꺾쇠는 테두리 두 변으로 그린다(.svg-icon 은 mask 라 테두리가 잘림) */
    .le-tab-chev {
        display: block;
        width: 0.8rem;
        height: 0.8rem;
        border: 0 solid #1E2124;
        border-top-width: 0.2rem;
        border-right-width: 0.2rem;
    }
    .le-tab-nav.prev .le-tab-chev {
        transform: rotate(-135deg);
        margin-left: 0.3rem;
    }
    .le-tab-nav.next .le-tab-chev {
        transform: rotate(45deg);
        margin-right: 0.3rem;
    }
    .le-tab-nav:disabled .le-tab-chev {
        border-color: #B1B8BE;
    }
    .le-tab-wrap > .le-tab {
        flex: 1 1 0;
        width: auto;
        /* 버튼 2개와 사이 간격을 뺀 만큼. 딱 맞추면 반올림으로 줄이 넘어간다 */
        max-width: calc(100% - 10rem);
    }
    .le-tab.tab.fill.full > ul > li {
        flex: 0 0 auto;
        width: auto;
    }
    .le-tab .btn-tab {
        white-space: nowrap;
    }
    /* 스크롤 막대는 숨기고 버튼으로만 민다 */
    .le-tab.tab.fill.full > ul {
        scrollbar-width: none;
        gap: 0;
    }
    .le-tab.tab.fill.full > ul::-webkit-scrollbar {
        display: none;
    }
}

/* --- 모바일에서 탭 선이 사라지던 문제 ----------------------------------- */
/* KRDS 는 767px 이하에서 .tab.fill.full .btn-tab 의 테두리를 0 으로 지운다.
   화면 폭에 꽉 채우는 탭이라 칸 구분이 필요 없다는 전제인데,
   이 페이지는 좌우로 밀어 보는 방식이라 칸 경계가 보여야 한다.
   테두리를 되살리고, 붙어 있는 칸끼리 선이 겹치지 않게 정리한다 */
@media (max-width: 47.9375em) {
    .le-tab.tab.fill.full .btn-tab {
        border-width: 0.1rem;
        border-style: solid;
        border-color: #B1B8BE;
    }
    .le-tab.tab.fill.full > ul > li + li .btn-tab {
        border-left: none;
    }
    .le-tab.tab.fill.full > ul > li .btn-tab {
        border-radius: 0;
    }
    .le-tab.tab.fill.full > ul > li:first-of-type .btn-tab {
        border-top-left-radius: 0.6rem;
        border-bottom-left-radius: 0.6rem;
    }
    .le-tab.tab.fill.full > ul > li:last-of-type .btn-tab {
        border-top-right-radius: 0.6rem;
        border-bottom-right-radius: 0.6rem;
    }
}


/* 위 87.5em 블록이 뒤에 와서 767px 이하 글자 크기 지정을 덮어 버렸다.
   좁은 화면에서는 탭 글자가 커서 한 칸이 화면 절반을 차지했다.
   순서상 마지막에 다시 지정해 확실히 적용되게 함 */
@media (max-width: 47.9375em) {
    .le-tab.tab.fill.full .btn-tab {
        padding: 0 1.2rem;
    }
}

/* --- 표에 세로 구분선과 직위 칸 색 ------------------------------------- */
/* 시안처럼 칸마다 세로선을 넣고, 첫 칸(직위)에 옅은 바탕을 깔아
   무엇에 대한 행인지 눈으로 바로 구분되게 한다 */
.hd-table-wrap .hd-table.tbl.data th,
.hd-table-wrap .hd-table.tbl.data td {
    border-right: 0.1rem solid #CDD1D5;
}
/* 맨 오른쪽 칸은 표 바깥선과 겹치므로 뺀다 */
.hd-table-wrap .hd-table.tbl.data th:last-child,
.hd-table-wrap .hd-table.tbl.data td:last-child {
    border-right: none;
}
/* 직위 칸 : 머리행과 같은 계열의 옅은 바탕 */
.hd-table-wrap .hd-table.tbl.data tbody th {
    background-color: #F3F6F9;
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 카드형(767px 이하)에서는 세로선과 바탕을 되돌린다.                      */
/* 칸이 위아래로 쌓이므로 세로선은 뜻이 없고, 바탕이 있으면 라벨 줄만       */
/* 색이 들어가 어색해진다                                                */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hd-table.tbl.data tbody th,
    .hd-table-wrap .hd-table.tbl.data tbody td {
        border-right: none;
        background-color: transparent;
        font-weight: 400;
    }
}

/* 앞말을 강조하는 목록 항목(지정형 : ~ / 공모형 : ~).
   흰 배경 위 4.5:1 을 넘는 초록으로 둔다 */
.le-list .le-term {
    color: #008F55;
    font-weight: 700;
}

/* ==================================================================== */
/* 공유 학습공간 배움마당                                                 */
/* 로고 붙은 제목(.hd-section-tit)·안내 상자(.le-lead)·단계 카드            */
/* (.jhj-card)를 그대로 재사용하고, 여기서만 필요한 것만 .ys- 로 둔다        */
/* ==================================================================== */

.ys-section + .ys-section {
    margin-top: 4rem;
}

/* 붉은 주의 문구. 색만으로 구분되지 않도록 ※ 기호를 함께 쓴다 */
.ys-caution {
    color: #D63D4A;
}

/* 신청 절차 : 3단계를 가로로 놓고 사이에 화살표 */
.ys-step-list {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ys-step {
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
}
.ys-step-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.ys-step-card .jhj-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    flex: 1 1 auto;
    padding: 2.4rem 1.6rem 3.2rem;
}
.ys-step-card.step-01::after {
    content: "";
    background: url(../img/component/icon/ys_step_01.png) no-repeat;
    width: 7.1rem;
    height: 7.1rem;
    background-size: contain;
    margin: 0 auto 4rem;
    
}
.ys-step-card.step-02::after {
    content: "";
    background: url(../img/component/icon/ys_step_02.png) no-repeat;
    width: 7.1rem;
    height: 7.1rem;
    background-size: contain;
    margin: 0 auto 4rem;
}

.ys-step-card.step-03::after {
    content: "";
    background: url(../img/component/icon/ys_step_03.png) no-repeat;
    width: 7.1rem;
    height: 7.1rem;
    background-size: contain;
    margin: 0 auto 4rem;
}


/* 단계 사이 화살표. 테두리 두 변으로 그린다
   (.svg-icon 은 mask 로 모양을 오려내는 클래스라 테두리가 잘림) */
.ys-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 0;
    margin: 0;
    padding: 0 2rem;
}
.ys-arrow-chev {
    display: block;
    width: 1rem;
    height: 1rem;
    border: 0 solid #2B8A3E;
    border-top-width: 0.3rem;
    border-right-width: 0.3rem;
    border-radius: 0.2rem;
    transform: rotate(45deg);
}
.ys-arrow-chev + .ys-arrow-chev {
    margin-left: -0.3rem;
}

/* 문의사항 */
.ys-help {
    margin-top: 4rem;
    padding: 2.4rem;
    border: 0.1rem solid #D6E0EB;
    border-radius: 0.8rem;
    background-color: #F5F6F9;
}
.ys-help-tit {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.2rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #052B57;
}
.ys-help-tit::before {
    content: "";
    background: url(../img/component/icon/ico_inquiry.png) no-repeat;
    width: 1.833rem;
    height: 1.833rem;
    background-size: contain;
}
.ys-help ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ys-help li {
    position: relative;
    padding-left: 5.6rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #464C53;
    word-break: keep-all;
}
.ys-help li + li {
    margin-top: 0.4rem;
}
.ys-help li::before {
    content: "";
    position: absolute;
    left: 3.6rem;
    top: 1.2rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #464C53;
}
.ys-help a {
    font-weight: 700;
    color: #008F55;
}

.ys-actions {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 767px 이하 : 단계를 세로로 쌓고 화살표도 아래를 가리키게        */
/* ------------------------------------------------------------------ */
@media (max-width: 47.9375em) {
    .ys-lead {
        text-align: left;
    }
    .ys-step-list {
        flex-direction: column;
    }
    .ys-step {
        flex-direction: column;
    }
    .ys-arrow {
        padding: 1.6rem 0;
    }
    .ys-arrow-chev {
        transform: rotate(135deg);
    }
    .ys-arrow-chev + .ys-arrow-chev {
        margin-left: 0;
        margin-top: -0.3rem;
    }
    .ys-help {
        padding: 2rem 1.6rem;
    }

    .ys-actions .krds-btn {
        width: 100%;
    }
}


/* --- 카드가 가로를 다 채우지 않던 문제 ---------------------------------- */
/* 화살표가 li 안에서 자리를 차지해, 마지막 카드 오른쪽에 그만큼(63px)
   늘 빈 곳이 남았다.
   화살표를 칸 사이 여백에 띄워 두면 자리를 먹지 않아
   세 카드가 가로를 고르게 나눠 쓴다 */
.ys-step-list {
    gap: 4.8rem;
}
.ys-step {
    position: relative;
}
.ys-step-card {
    width: 100%;
}
.ys-arrow {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    padding: 0;
}

@media (max-width: 47.9375em) {
    /* 세로로 쌓이는 구간에서는 카드 아래에 그대로 놓는다 */
    .ys-step-list {
        gap: 0;
    }
    .ys-arrow {
        position: static;
        transform: none;
        padding: 1.6rem 0;
    }
}

/* --- 화살표가 왼쪽으로 치우쳐 보이던 문제 ------------------------------- */
/* left: 100% 는 카드가 끝나는 지점, 즉 '틈의 시작'이라
   화살표가 틈 가운데가 아니라 왼쪽 카드에 붙어 보였다.
   틈(4.8rem)의 절반만큼 더 밀어 가운데에 놓는다 */
.ys-arrow {
    left: calc(100% + 2.4rem);
}

@media (max-width: 47.9375em) {
    /* 세로로 쌓이는 구간에서는 흐름대로 놓이므로 되돌린다 */
    .ys-arrow {
        left: auto;
    }
}

/* --- 모바일 화살표가 W 모양으로 나오던 문제 ----------------------------- */
/* .ys-arrow 가 가로 배치(flex row)라 꺾쇠 두 개가 옆으로 나란히 붙어
   아래를 가리키는 이중 꺾쇠가 아니라 W 처럼 보였다.
   세로로 쌓이는 구간에서는 꺾쇠도 위아래로 겹치게 한다 */
@media (max-width: 47.9375em) {
    .ys-arrow {
        flex-direction: column;
    }
    .ys-arrow-chev + .ys-arrow-chev {
        margin-left: 0;
        margin-top: -0.6rem;
    }
}

/* 묶음(.le-block) 밖에 홀로 놓인 표는 앞뒤로 간격을 스스로 챙겨야 한다.
   뒤쪽은 다음 묶음의 소제목이 붙어 보이지 않게 .le-block 끼리의 간격인
   6.2rem 을 준다. 767px 이하에서 2.4rem 으로 줄어 붙어 보이던 것도 막는다.
   앞쪽은 표가 바로 위 목록에 딸린 내용으로 읽히는 자리라 굳이 벌리지 않고
   .hd-table-wrap 이 본래 갖고 있는 3.2rem 을 그대로 쓴다 */
.tab-conts .hd-table-wrap + .le-block {
    margin-top: 6.2rem;
}

/* --- 지원 개요 표 위쪽 선 --------------------------------------------- */
/* 다른 목록 표는 머리행(thead th)이 2px 선을 갖는데,
   이 표는 머리행이 없어 위쪽 선이 통째로 사라졌다.
   표 자체에 걸어 같은 모양을 만든다 */
/* 표와 첫 행에 모두 걸면 선이 겹쳐 두 배로 두꺼워 보인다.
   표 자체에만 건다 */
.hd-table-wrap .hk-info-table.tbl.data {
    border-top: 0.2rem solid #1E2124;

}


/* --- 지원 개요 표 모바일 (되돌아가 있어 다시 맞춤) ---------------------- */
/* 두 칸 표라 앞칸이 곧 항목 이름이다. 카드형에서 라벨을 따로 붙이면
   '항목 / 선발기준' 처럼 같은 말이 두 번 나오므로 쓰지 않고,
   항목명을 굵게 해 값과 구분한다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hk-info-table.tbl.data tbody th::before,
    .hd-table-wrap .hk-info-table.tbl.data tbody td::before {
        content: none;
    }
    .hd-table-wrap .hk-info-table.tbl.data tbody th {
        padding: 1.2rem 0 0.2rem;
        font-weight: 700;
        color: #1E2124;
        text-align: left;
        background-color: transparent;
    }
    .hd-table-wrap .hk-info-table.tbl.data tbody td {
        padding: 0 0 1.2rem;
    }
}

/* ==================================================================== */
/* 탭 줄 : 가변 폭에서 갑자기 쪼그라들던 문제                               */
/* ==================================================================== */
/* 1400px 아래에서 탭을 자연 폭(flex: 0 0 auto)으로 두다 보니,
   탭 수가 적은 페이지(2~3개)는 남는 자리를 못 채우고 확 줄어 보였다.
   늘어나기는 하되 줄어들지는 않게(flex: 1 0 auto) 바꾸면
   자리가 남을 땐 고르게 채우고, 모자랄 땐 자연 폭을 지켜 밀어 볼 수 있다 */
@media (max-width: 87.5em) {
    .le-tab.tab.fill.full > ul > li {
        flex: 1 0 auto;
        width: auto;
    }
}

/* --- 좌우 버튼은 밀 곳이 있을 때만 ------------------------------------- */
/* 탭 개수가 페이지마다 달라(2~5개) 폭만으로 판단하면 어긋난다.
   스크립트가 실제로 넘치는지 재서 .is-scrollable 을 붙이면 그때만 보인다 */
.le-tab-wrap .le-tab-nav {
    display: none;
}
.le-tab-wrap.is-scrollable .le-tab-nav {
    display: inline-flex;
}
/* 버튼이 없을 때는 탭 줄이 폭을 다 쓰게 */
.le-tab-wrap:not(.is-scrollable) > .le-tab {
    max-width: 100%;
}

/* --- 지원 개요 표 모바일 : 공지사항 목록과 같은 모양으로 -------------------- */
/* 앞서 항목명 아래로 값을 내렸는데, 다른 목록(공지사항 등)은
   왼쪽에 항목 이름, 오른쪽에 값이 한 줄로 놓인다.
   두 칸 표라 앞칸이 곧 항목 이름이므로 라벨을 새로 붙이지 않고
   앞칸 자체를 라벨 자리(9rem)로 고정해 같은 모양을 만든다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hk-info-table.tbl.data tbody th {
        flex: 0 0 9rem;
        padding: 1.4rem 0.6rem;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.6;
        color: #1E2124;
        text-align: left;
    }
    .hd-table-wrap .hk-info-table.tbl.data tbody td {
        padding: 1.4rem 0.6rem;
        font-size: 1.7rem;
        line-height: 1.6;
        color: #1E2124;
    }
    /* 한 행의 항목과 값이 같은 줄에 오도록 행을 가로 배치로 */
    .hd-table-wrap .hk-info-table.tbl.data tbody tr {
        display: flex;
        align-items: flex-start;
        padding-block: 1.2rem;
    }
}


/* 값 칸을 flex 로 두면 안쪽 <strong> 이 별개 칸처럼 떨어져 배치된다.
   문장은 한 덩어리로 흘러야 하므로 값 칸은 일반 블록으로 둔다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hk-info-table.tbl.data tbody td {
        display: block;
    }
}

/* --- 지원 개요 표 모바일 : 공지사항과 완전히 같게 -------------------------- */
/* 공지사항 목록은 한 건(tr)이 블록이고, 그 안에서 각 셀이
   [라벨 90px + 값] 로 놓이며 셀 사이에는 줄이 없다.
   지원 개요 표도 표 하나가 한 건이므로 같은 방식으로 맞춘다 */
@media (max-width: 47.9375em) {
    /* 행끼리 줄을 긋지 않는다(항목마다 선이 그어져 답답했다) */
    .hd-table-wrap .hk-info-table.tbl.data tbody tr {
        display: block;
        padding-block: 0;
        border-bottom: none;
    }
    /* 각 항목은 라벨(90px) + 값 한 줄. 여백·글자 모두 공지사항과 동일 */
    .hd-table-wrap .hk-info-table.tbl.data tbody th,
    .hd-table-wrap .hk-info-table.tbl.data tbody td {
        display: flex;
        align-items: flex-start;
        padding: 1.2rem 1.6rem;
        border: none;
        font-size: 1.7rem;
        line-height: 1.6;
        color: #1E2124;
        text-align: left;
        background-color: transparent;
    }
    .hd-table-wrap .hk-info-table.tbl.data tbody th {
        flex: 0 0 13rem;
        padding-right: 0;
        font-weight: 400;
    }
    .hd-table-wrap .hk-info-table.tbl.data tbody td {
        padding-left: 0;
    }
    /* 항목과 값이 한 줄에 놓이도록 둘을 감싸는 행을 가로로 */
    .hd-table-wrap .hk-info-table.tbl.data tbody tr {
        display: flex;
        align-items: flex-start;
    }
    /* 표 전체를 감싸는 아래 줄만 남긴다 */
    .hd-table-wrap .hk-info-table.tbl.data {
        border-bottom: 0.1rem solid #CDD1D5;
        padding-block: 1.2rem;
    }
   
}


/* 공지사항은 라벨(::before)이 굵은 15px 이다.
   지원 개요 표는 앞칸 자체가 라벨이므로 같은 굵기·크기로 맞춘다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hk-info-table.tbl.data tbody th {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.7;
    }
}


/* 아주 좁은 화면(320px)에서는 라벨 9rem 이 고정이라 값 칸이 모자라 넘쳤다.
   라벨을 조금 줄이고, 값이 어떤 길이든 줄바꿈되게 한다 */
@media (max-width: 23.4375em) {
    .hd-table-wrap .hk-info-table.tbl.data tbody th {
        flex: 0 0 7rem;
        padding-left: 0.4rem;
    }
    .hd-table-wrap .hk-info-table.tbl.data tbody td {
        min-width: 0;
        padding-right: 0.4rem;
        word-break: break-all;
    }
}


/* 값 칸을 flex 로 두면 안쪽 <strong> 이 별개 칸처럼 떨어져 배치되고,
   break-all 은 숫자를 중간에서 끊는다. 값 칸은 일반 블록에 낱말 단위 줄바꿈으로 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hk-info-table.tbl.data tbody td {
        display: block;
        min-width: 0;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}

/* --- 디딤돌 장학사업에서 새로 쓰는 것 ----------------------------------- */
/* 선발기준처럼 항목 이름에 조건이 딸릴 때(예: 모두 충족 시) 줄을 바꿔 작게 */
.hk-info-sub {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    color: #464C53;
}

/* 표 안에서 값이 여러 개일 때. 점을 붙여 항목을 구분한다 */
.hk-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hk-info-list > li {
    position: relative;
    padding-left: 1.4rem;
    line-height: 1.7;
    word-break: keep-all;
}
.hk-info-list > li + li {
    margin-top: 0.4rem;
}
.hk-info-list > li::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 1.2rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: #464C53;
}

/* 서류에 딸린 조건 설명.
   윗단계가 동그란 점이므로 여기는 ※ 를 붙여 단계와 성격이 함께 드러나게 한다.
   ※ 는 글자라서 본문과 같은 색으로 두어야 흐리게 뜨지 않는다 */
.le-sublist {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}
.le-sublist > li {
    position: relative;
    padding-left: 2rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
    word-break: keep-all;
}
.le-sublist > li + li {
    margin-top: 0.2rem;
}
.le-sublist > li::before {
    content: "\203B";
    position: absolute;
    left: 0;
    top: 0;
}

/* 목록에 딸린 안내 상자 */
.le-note-box {
    margin-top: 1.6rem;
    padding: 1.6rem 2rem;
    border-radius: 0.8rem;
    background-color: #F5F6FA;
}
.le-note-tit {
    margin: 0 0 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}

/* 차례대로 눌러 가는 길 안내.
   원본은 화살표로 이은 한 문장이라 어디서 끊어 읽을지 알기 어려웠다 */
.le-step-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: le-step;
}
.le-step-list > li {
    position: relative;
    padding-left: 3rem;
    font-size: 1.5rem;
    line-height: 1.7;
    color: #464C53;
    word-break: keep-all;
    counter-increment: le-step;
}
.le-step-list > li + li {
    margin-top: 0.4rem;
}
.le-step-list > li::before {
    content: counter(le-step);
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    border: 0.1rem solid #CDD1D5;
    border-radius: 50%;
    background-color: #FFFFFF;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.8rem;
    text-align: center;
    color: #00733D;
}

.kd-lead-text {
    margin-bottom: 0.4rem;
}
/* 지원 불가 조건 같은 유의 문구.
   조건 설명과 같은 ※ 를 쓰되, 놓치면 안 되는 내용이라 색으로 무게를 준다 */
.le-caution {
    position: relative;
    margin: 0.8rem 0 0;
    padding-left: 2rem;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #D63D4A;
    word-break: keep-all;
}
.le-caution::before {
    content: "\203B";
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 47.9375em) {
    .hk-info-list > li::before {
        top: 1.1rem;
    }
    .le-note-box {
        padding: 1.2rem 1.4rem;
    }
    .le-step-list > li {
        padding-left: 2.6rem;
    }
}


/* 항목 이름에 딸린 조건 설명은 좁은 화면에서 옆으로 붙어 라벨 칸을 밀어냈다.
   라벨 칸을 flex 세로 배치로 두어 이름 아래로 내려가게 한다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap .hk-info-table.tbl.data tbody th {
        display: block;
    }
    .hk-info-sub {
        margin-top: 0.2rem;
        font-size: 1.3rem;
    }
}

/* ==================================================================== */
/* 해외유학지원사업                                                      */
/* ==================================================================== */

/* 번호가 붙는 목록. 점 대신 숫자를 놓는 것이라 .le-list 의 점 모양을
   되돌려야 해서, 클래스 두 개를 겹쳐 우선순위를 올린다 */
.le-list.le-list-num {
    counter-reset: le-num;
}
.le-list.le-list-num > li {
    counter-increment: le-num;
}
.le-list.le-list-num > li::before {
    content: counter(le-num) ".";
    left: 0.4rem;
    top: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    /* 번호를 글자보다 작게(1.6rem) 두면서 줄 높이는 li 의 1.7배를 그대로 받아,
       번호 줄 상자가 글자 줄보다 낮아 번호가 위로 떠 보였다.
       글자 크기·줄 높이를 li 와 똑같이 받아 같은 기준선에 놓는다 */
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
    color: #464C53;
}

/* 동그라미 번호 목록. 원본이 &#9312;&#9313;&#9314; 로 매긴 자리에 쓴다.
   그 문자를 글자로 넣으면 읽어 주는 프로그램이 건너뛰거나 '원 문자 일'로
   읽으므로, ol 의 번호를 CSS 로 동그라미 안에 그린다.
   흰 바탕 위 #464C53 은 7.8:1, 테두리 #58616A 는 4.8:1 로 기준을 넘는다 */
.le-list.le-list-circle {
    counter-reset: le-num;
}
.le-list.le-list-circle > li {
    counter-increment: le-num;
    padding-left: 2.8rem;
}
.le-list.le-list-circle > li::before {
    content: counter(le-num);
    left: 0;
    top: 0.3rem;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    border: 0.1rem solid #58616A;
    border-radius: 50%;
    background-color: transparent;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.8rem;
    text-align: center;
    color: #464C53;
}

/* 표 안에서 값 아래에 딸린 목록은 값 줄에 바로 붙어 답답해 보였다 */
.hk-info-table td > .hk-info-list:not(:first-child) {
    margin-top: 0.4rem;
}

/* 탭이 없는 화면이라 .tab-conts 를 기준으로 걸어 둔 표 앞뒤 간격이
   먹지 않았다. .le-section 을 기준으로 같은 간격을 준다 */
/* 앞뒤를 같은 6.2rem 으로 둔다. 탭 안(.tab-conts)에 놓인 표와 같은 값이라
   표가 어느 자리에 있든 묶음 사이 리듬이 같다 */
.le-section > .le-block + .hd-table-wrap,
.le-section > .hd-table-wrap + .le-block {
    margin-top: 6.2rem;
}

/* 다만 큰제목 바로 아래 오는 머리말 묶음은 제목에 딸린 한 줄이라
   아래를 6.2rem 이나 벌리면 표가 따로 떨어져 나온 것처럼 보인다.
   표가 본래 갖고 있는 3.2rem 을 그대로 쓴다 */
.le-section > .hd-section-tit + .le-block + .hd-table-wrap {
    margin-top: 3.2rem;
}

/* --- 심사 단계 흐름 --------------------------------------------------- */
/* 칸 사이의 +, » 는 눈으로만 읽는 기호라 요소를 두지 않고 CSS 로 그린다.
   요소로 두면 읽어 주는 프로그램이 "더하기", "오른쪽 이중 꺾쇠" 를
   단계 사이에 끼워 읽어 흐름이 끊긴다.
   기호가 앉을 자리는 칸 사이 간격(7.2rem)으로 비워 둔다 */
.ov-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 7.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ov-step {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 0.1rem solid #99D2BB;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
}

/* 옅은 초록 바탕(#E6F4EE) 위 #008F55 는 3.66:1 이라 보통 글자 기준(4.5:1)에
   못 미친다. 20px 굵은 글씨는 큰 글자로 쳐서 3:1 이 기준이므로 이 크기를 지킨다 */
.ov-step-tit {
    margin: 0;
    padding: 2.4rem 1.6rem;
    border-radius: 1.1rem 1.1rem 0 0;
    background-color: #E6F4EE;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: #008F55;
    word-break: keep-all;
}

/* 배점이 두 줄인 칸과 세 줄인 칸의 높이가 같아야 해서,
   몸통을 늘린 뒤 그 안에서 가운데로 모은다 */
.ov-step-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.4rem 1.6rem;
}
.ov-score-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ov-score-list > li {
    font-size: 1.7rem;
    line-height: 1.5;
    text-align: center;
    color: #464C53;
    word-break: keep-all;
}
.ov-score-val {
    font-weight: 700;
    color: #1E2124;
}

/* 결과 칸은 머리·몸 구분 없이 한 덩어리로 */
.ov-step.is-result {
    align-items: center;
    justify-content: center;
    background-color: #E6F4EE;
}
.ov-result-tit {
    margin: 0;
    padding: 2.4rem 1.6rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: #008F55;
    word-break: keep-all;
}

/* 칸 사이 기호. 흰 바탕 위 #2B8A3E 는 3.96:1 로 글자 아닌 요소 기준(3:1)을 넘는다 */
.ov-flow > li:nth-child(1)::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: -5.4rem;
    width: 3.6rem;
    height: 3.6rem;
    margin-top: -1.8rem;
    border-radius: 50%;
    background-color: #2B8A3E;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 3.6rem;
    text-align: center;
    color: #FFFFFF;
}

/* 두 번째 기호는 글꼴의 » 를 쓰면 글꼴마다 크기와 굵기가 제각각이라 작아 보였다.
   다른 화면의 단계 화살표(.ys-arrow-chev)와 같이 테두리 두 변을 돌려
   겹친 이중 꺾쇠로 그린다.
   (.svg-icon 은 mask 로 모양을 오려내는 클래스라 테두리가 잘려 쓸 수 없다) */
.ov-flow > li:nth-child(2)::before,
.ov-flow > li:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -0.7rem;
    border: 0 solid #2B8A3E;
    border-top-width: 0.4rem;
    border-right-width: 0.4rem;
    border-radius: 0.2rem;
    transform: rotate(45deg);
}
.ov-flow > li:nth-child(2)::before {
    right: -3.8rem;
}
.ov-flow > li:nth-child(2)::after {
    right: -4.8rem;
}

/* 좁은 화면에서는 세로로 쌓고, 기호도 칸 아래 가운데로 내린다.
   꺾쇠는 45도 대신 135도로 돌려 아래를 가리키게 한다 */
@media (max-width: 75em) {
    .ov-flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 6.4rem;
    }
    .ov-flow > li:nth-child(1)::after {
        top: auto;
        right: auto;
        bottom: -5rem;
        left: 50%;
        margin-top: 0;
        margin-left: -1.8rem;
    }
    .ov-flow > li:nth-child(2)::before,
    .ov-flow > li:nth-child(2)::after {
        top: auto;
        right: auto;
        left: 50%;
        margin-top: 0;
        margin-left: -0.7rem;
        transform: rotate(135deg);
    }
    .ov-flow > li:nth-child(2)::before {
        bottom: -3.4rem;
    }
    .ov-flow > li:nth-child(2)::after {
        bottom: -4.4rem;
    }
}

/* ==================================================================== */
/* 진흥원프로그램 목록                                                   */
/* 검색 상자는 .filter-wrap / .search-controls / .search-actions 를,      */
/* 목록 위 줄은 .result-head 를 그대로 쓴다.                              */
/* 표는 .list-table 이 좁은 화면에서 카드형으로 바뀌어 쓸 수 없으므로       */
/* (이 화면은 시안대로 표를 유지하고 가로로 밀어 본다) 따로 둔다            */
/* ==================================================================== */

/* --- 검색 상자 -------------------------------------------------------- */
/* 한 줄에 두 항목씩. 기관명·강좌명은 값이 길어 한 줄을 다 쓴다 */
.pgm-search-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem 6.5rem;
}
.pgm-field {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    min-width: 0;
}
.pgm-field.is-wide {
    grid-column: 1 / -1;
}

/* 공용 값은 select 를 16rem 으로 고정하는데, 여기서는 칸을 꽉 채운다 */
.pgm-search .search-controls .krds-form-select-sort {
    flex: 1 1 auto;
    min-width: 0;
}
.pgm-search .search-controls .krds-form-select-sort.is-narrow {
    flex: 0 0 12rem;
}


/* 진행 상태. 색만으로 뜻을 전하지 않도록 글자를 함께 둔다.
   접수중 #00733D on #E6F4EE 5.27:1, 접수마감 #464C53 on #EFF1F3 7.8:1 */
.pgm-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8rem;
    height: 3.2rem;
    padding: 0 1.2rem;
    border-radius: 100rem;
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}
.pgm-state.is-open {
    background-color: #E6F4EE;
    color: #008F55;
}
.pgm-state.is-closed {
    background-color: #EFF1F3;
    color: #464C53;
}

/* --- 페이지 목록 ------------------------------------------------------ */
.pgm-paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 4rem;
}
.pgm-paging ul {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pgm-paging a,
.pgm-paging-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 4rem;
    height: 4rem;
    padding: 0 0.8rem;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    color: #464C53;
    text-decoration: none;
}
.pgm-paging a:hover {
    background-color: #F0F2F5;
    color: #1E2124;
}
/* 흰 글자 대비 11:1 */
.pgm-paging a[aria-current="page"] {
    background-color: #063A74;
    color: #FFFFFF;
    font-weight: 700;
}
.pgm-paging .svg-icon {
    width: 1.6rem;
    height: 1.6rem;
    background-color: currentColor;
}

/* --- 반응형 ----------------------------------------------------------- */
/* 1200px 이하 : 검색 항목을 한 줄에 하나씩 */
@media (max-width: 75em) {
    .pgm-search-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem 6.5rem;
    }
}

/* --- 좁은 화면 검색 필터 시트 ------------------------------------------ */
/* 시트 안에서는 항목을 위아래로 쌓는다 */
.pgm-sheet-fields {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.btn-interest::after {
    content: "";
    background: url(../img/component/icon/ico_interest.png) no-repeat;
    width: 1.667rem;
    height: 1.54rem;
    background-size: contain;
}

/* 767px 이하 : 라벨을 값 위로 올리고 버튼은 가로를 다 쓴다.
   표는 카드로 바꾸지 않고 .krds-table-wrap 의 가로 밀기를 그대로 둔다 */
@media (max-width: 47.9375em) {
    .pgm-field {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    /* 지역~기관명은 '필터' 시트로 옮기고, 검색 상자에는 강좌명만 남긴다.
       남는 칸은 라벨 없이 입력 칸과 버튼만 보이게 한다 */
    .pgm-search .pgm-field.is-adv {
        display: none;
    }
    .pgm-search .pgm-field.is-search .filter-label {
        display: none;
    }
    .pgm-search .filter-label {
        width: auto;
    }
    /* 필터 시트가 없어 검색 상자에 그대로 남는 조건 칸은 라벨을 옆에 둔다.
       시트로 옮겨지는 칸(.is-adv)은 여기서 숨겨지고, 검색어 칸(.is-search)은
       라벨을 감추므로 둘 다 이 규칙에 걸리지 않는다.
       라벨을 위로 올리면 칸 하나가 두 줄을 먹어 검색 상자만 길어진다 */
    .pgm-search .pgm-field:not(.is-adv):not(.is-search) {
        flex-direction: row;
        align-items: center;
        gap: 1.2rem;
    }
    .pgm-search .pgm-field:not(.is-adv):not(.is-search) > .filter-label {
        flex: 0 0 6.4rem;
        width: 6.4rem;
    }
    .pgm-search .pgm-field:not(.is-adv):not(.is-search) > .search-controls {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* 이 구간에서는 .search-controls 가 세로 배치로 바뀐다.
       가로 기준으로 준 flex-basis 를 그대로 두면 그 값이 높이가 되어
       선택 상자만 길쭉해진다 */
    .pgm-search .search-controls .krds-form-select-sort,
    .pgm-search .search-controls .krds-form-select-sort.is-narrow {
        flex: 0 0 auto;
        width: 100%;
    }
    .pgm-search .search-actions {
        width: 100%;
    }

 
    .pgm-paging {
        flex-wrap: wrap;
        gap: 0.8rem;
    }
}

/* ==================================================================== */
/* 진흥원프로그램 상세 (.pgm-view)                                       */
/* 짜임은 결제내역 상세(.payment-detail-)를 그대로 쓰고,                  */
/* 이 화면에서 폭이 모자라 생기는 문제만 여기서 바로잡는다                 */
/* ==================================================================== */

/* 목록 버튼을 감싼 묶음의 자리.
   grid-area 는 격자의 바로 밑 자식에만 먹히는데 마크업에서는 안쪽 <a> 가
   .payment-area-listbtn 을 달고 있어, 감싼 <div> 가 자리를 못 받은 채
   남아 빈 칸(첨부파일 앞)으로 밀려 들어갔다.
   마크업을 그대로 두고 감싼 쪽에 자리를 지정한다 */
.pgm-view .payment-detail-attach {
    grid-area: listbtn;
}

/* 격자 칸의 기본 최소 너비는 auto 라, 표의 라벨 칸(16rem)과 값이         */
/* 줄어들지 못해 두 칸이 서로를 밀어낸다. 0 까지 줄 수 있게 열어 둔다 */
.payment-detail-layout.pgm-view {
    grid-template-columns: minmax(0, 1fr) 35rem;
}

/* 1279px 이하에서는 카드(35rem)를 뺀 왼쪽이 55rem 아래로 내려간다.
   그 폭에서는 제목이 네 줄로 접히고 표의 값 칸이 라벨에 눌려서,
   두 칸을 억지로 유지하기보다 카드를 제목 아래로 내리는 편이 낫다.
   1023px 이하 규칙과 내용은 같고, 적용 구간만 앞당긴 것이다 */
@media (max-width: 1279px) {
    .payment-detail-layout.pgm-view {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2.4rem;
        grid-template-areas:
            "header"
            "card"
            "table"
            "summary"
            "detail"
            "attach"
            "listbtn";
    }
    .pgm-view .payment-detail-side {
        position: static;
        width: 100%;
    }
    /* 바로 위 제목과 같은 글이라 카드 안에서는 생략 */
    .pgm-view .payment-side-course-tit {
        display: none;
    }
    .pgm-view .payment-area-attach {
        margin-bottom: 0.8rem;
    }
}

/* 주요 내용 안의 작은 제목과, 첨부파일이 없을 때의 안내 문구 */
.pgm-desc-tit {
    margin: 1.6rem 0 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.pgm-attach-empty {
    margin: 0;
    padding: 2rem 1.6rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 0.8rem;
    font-size: 1.7rem;
    color: #464C53;
}

/* 첨부파일 이름 뒤에 붙는 용량. 이름보다 한 단계 옅게 */
.pgm-attach-size {
    margin-left: 0.4rem;
    font-size: 1.5rem;
    color: #464C53;
}

/* ==================================================================== */
/* 세종시 평생교육정보망 소개                                            */
/* 안내 상자는 .le-lead, 제목은 .hd-section-tit 를 그대로 쓰고            */
/* 현황 카드만 여기서 새로 둔다                                          */
/* ==================================================================== */

/* 칸 수를 못 박지 않고 최소 폭(28rem)만 정해, 화면이 좁아지면
   3칸 → 2칸 → 1칸으로 알아서 줄어들게 한다 */
.intro-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 그림이 앉을 자리를 아래쪽 여백으로 비워 둔다 */
.intro-card {
    position: relative;
    padding: 3.2rem 3.2rem 10rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
}
.intro-card-tit {
    margin: 0 0 1.8rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #008F55;
    word-break: keep-all;
}

/* 뜻을 담지 않은 그림이라 마크업이 아니라 CSS 로 넣는다 */
.intro-card-ico {
    position: absolute;
    right: 5.2rem;
    bottom: 3.2rem;
    width: 5.6rem;
    height: 5.6rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.intro-card-ico.ico_operate {
    background-image: url(../img/component/icon/ico_operate.png);
}
.intro-card-ico.ico_organization {
    background-image: url(../img/component/icon/ico_organization.png);
}
.intro-card-ico.ico_club {
    background-image: url(../img/component/icon/ico_club.png);
}

@media (max-width: 47.9375em) {
    .intro-card {
        padding: 2.4rem 2rem 9rem;
    }
    .intro-card-ico {
        right: 2rem;
        bottom: 2rem;
        width: 4.8rem;
        height: 4.8rem;
    }
}

/* ==================================================================== */
/* 기관정보 상세                                                        */
/* ==================================================================== */

/* 기관소개처럼 칸 안에 여러 문단이 오는 경우의 줄 간격 */
.hk-info-table td > p {
    margin: 0;
}
.hk-info-table td > p + p {
    margin-top: 0.4rem;
}

/* 표 바로 뒤에 오는 목록 버튼 줄 */
.le-section > .hd-table-wrap + .payment-detail-attach {
    margin-top: 4rem;
}

.le-section.org-detail {
    margin-bottom: 6.2rem;
}
.le-section.org-detail:last-child {
    margin-bottom: 0;
}

.le-section.org-detail .hd-table-wrap {
    margin-top: 0;
}

/* 기관정보 상세 : 표는 화면 폭을 다 쓰되, 기관소개처럼 긴 글만 줄 길이를
   묶는다. 표 전체를 좁히면 오른쪽이 비어 보이고, 그냥 두면 한 줄에
   예순 자를 넘겨 다음 줄 첫머리를 찾기 어렵다 */
.org-detail .hk-info-table td > p {
    max-width: 78rem;
}

/* ==================================================================== */
/* 기관 등록 신청                                                       */
/* 공간예약 제공자 등록 신청의 .apply- 컴포넌트를 그대로 쓰고,            */
/* 이 화면에서만 나오는 두 가지만 여기서 둔다                             */
/* ==================================================================== */

/* 기관분류 : 대분류 - 중분류 - 직접 입력 세 칸이 한 줄에 온다.
   공용 규칙이 선택 상자 폭을 못 박고 있어, 여기서는 나눠 쓰도록 푼다 */
.orgreg-class-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    /* 묶음이 글자 폭만큼 줄어 대분류·세부분류 두 칸이 위아래로 갈라지고
       폭도 서로 달랐다. 다른 입력 칸 폭(52.7rem)에 맞추고 반씩 나눈다 */
    width: 100%;
    max-width: 52.7rem;
}
.apply-fieldset .orgreg-class-group .krds-form-select {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}
.apply-fieldset .orgreg-class-group .krds-form-select:first-child {
    flex: 1 1 0;
}

/* 기관명 : 검색 줄과 결과 선택 상자가 붙어 있었다. 주소 묶음과 같은 1.6rem */
.orgreg-search-area {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
/* 기관 상세정보 상자 제목 아래 안내문. 다른 안내문과 같은 모양(파란 글씨 + 안내 아이콘)이
   되도록 .form-group 으로 감쌌고, 첫 항목과의 간격만 줄인다 */
.apply-fieldset .form-group.orgreg-guide {
    margin-bottom: 2.4rem;
}
/* 증빙서류 [파일 선택][파일 추가] 단추가 붙어 있었다 */
.orgreg-file-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}
.apply-fieldset .orgreg-class-group .krds-input {
    flex: 1 1 18rem;
    width: auto;
    min-width: 0;
}

/* 공용 규칙이 text·number·password 만 잡고 있어 url·email 은
   폭이 잡히지 않는다. 같은 폭으로 맞춘다 */
.apply-fieldset input[type="url"].krds-input,
.apply-fieldset input[type="email"].krds-input {
    width: 100%;
    max-width: 52.7rem;
    box-sizing: border-box;
}

/* 기관소개 : 여러 줄 입력 칸. 공용 .krds-input 은 한 줄용이라 따로 둔다 */
.orgreg-textarea {
    display: block;
    width: 100%;
    max-width: 70rem;
    /* 안쪽 여백과 테두리까지 폭에 넣지 않으면 칸보다 34px 넓어져,
       아래 글자 수 표시와 오른쪽 끝이 어긋난다 */
    box-sizing: border-box;
    min-height: 9rem;
    padding: 1.2rem 1.6rem;
    border: 0.1rem solid #58616a;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    font-family: inherit;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    resize: vertical;
    resize: none;
}


@media (max-width: 47.9375em) {
    .apply-fieldset .orgreg-class-group .krds-form-select,
    .apply-fieldset .orgreg-class-group .krds-form-select:first-child,
    .apply-fieldset .orgreg-class-group .krds-input {
        flex: 1 1 100%;
    }
}

/* 기관 등록 신청의 설립(개관일) 달력.
   한 칸짜리 달력에 필요한 보정이 .apply-form 아래에만 있어서, 이 화면
   (.apply-wizard)에서는 하나도 걸리지 않았다. 같은 내용을 여기에 둔다.
   .apply-form 쪽 규칙을 넓히지 않은 이유는, 공간예약 제공자 등록 신청의
   기간(range) 달력까지 폭이 함께 바뀌기 때문이다 */

/* 달력 열기 버튼은 .calendar-input 오른쪽 끝에 절대 배치된다.
   .calendar-input 이 칸 전체를 차지하면 아이콘이 입력창에서 멀리 떨어지므로
   다른 입력과 같은 폭으로 맞춰 아이콘이 입력창 안쪽에 오게 한다 */
.orgreg-date .calendar-input {
    position: relative;
    max-width: 52.7rem;
}
/* KRDS 달력 입력은 .input-group > li 안에 들어가는 것을 전제로 짜여 있다.
   input 을 .calendar-input 바로 밑에 두면 flex 항목 구성이 달라져
   초점이 오갈 때 폭이 다시 계산된다 */
.orgreg-date .calendar-input .input-group > li {
    flex: 1 1 auto;
    width: 100%;
}
.orgreg-date .calendar-input .input-group > li .krds-input {
    width: 100%;
    max-width: 100%;
    padding-right: 5.2rem;
}

/* 달력이 열릴 때 아래 내용이 밀리지 않도록 흐름에서 빼 둔다.
   폭도 입력창에 맞춰야 입력창 아래에 가지런히 붙는다 */
.orgreg-date > .krds-calendar-area {
    max-width: 52.7rem;
}

@media (max-width: 47.9375em) {
    .orgreg-date .calendar-input,
    .orgreg-date > .krds-calendar-area {
        max-width: 100%;
    }
}

/* ==================================================================== */
/* 강사정보 상세                                                        */
/* ==================================================================== */

/* 강의지역·교육대상처럼 낱말이 여러 개 나열되는 칸.
   원본은 띄어쓰기로만 이어 붙여 어디까지가 한 지역인지 알기 어려웠다.
   목록으로 두면 읽어 주는 프로그램도 '목록 33개 항목'으로 알려 준다 */
.tc-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tc-chip-list > li {
    padding: 0.4rem 1.2rem;
    border-radius: 100rem;
    background-color: #EFF1F3;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #464C53;
    white-space: nowrap;
}

/* 강사정보 목록 표(.tc-list).
   제목 칸이 강사명 서너 글자라, 다른 목록의 긴 강좌명과 달리 왼쪽에 붙이면
   넓은 칸에서 혼자 떠 보인다. 이 표에만 가운데로 맞춘다.
   좁은 화면에서는 표가 카드로 바뀌어 '강사명 정우순'처럼 라벨과 값이
   가로로 놓이므로, 그때는 공용 규칙의 왼쪽 정렬을 그대로 둔다 */
@media (min-width: 48em) {
    .list-table.tbl.data.tc-list tbody td.col-title {
        text-align: center;
    }
}

/* .le-section 사이 간격.
   지금까지는 한 화면에 .le-section 이 하나뿐이라 드러나지 않았는데,
   소개·강사등록안내처럼 여러 개가 이어지는 화면에서 제목이 앞 내용에
   바짝 붙는다. .le-block 사이와 같은 6.2rem 으로 맞춘다 */
.le-section + .le-section,
.le-section + .apply-agreement {
    margin-top: 6.2rem;
}


/* ==================================================================== */
/* 일반강사 등록 안내                                                    */
/* 단계 카드는 배움마당의 .jhj-card + .ys-step-card 를 그대로 쓰고,        */
/* 그림과 화살표만 이 화면 것으로 둔다                                    */
/* ==================================================================== */

/* 배움마당은 화살표를 요소로 두는데, 그러면 ol 의 항목 수가 세 개가 아니라
   다섯 개가 된다. 여기서는 CSS 로만 그려 차례가 정확히 읽히게 한다.
   칸 사이 간격(4.8rem)이 화살표가 앉을 자리다 */
.tb-step-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 4.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tb-step-list > li {
    position: relative;
    display: flex;
}
.tb-step-list > li > .jhj-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* 이중 꺾쇠. 글꼴의 » 는 굵기가 제각각이라 테두리 두 변을 돌려 그린다.
   흰 바탕 위 #2B8A3E 는 3.96:1 로 글자 아닌 요소 기준(3:1)을 넘는다 */
.tb-step-list > li:not(:last-child)::before,
.tb-step-list > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: -0.6rem;
    border: 0 solid #2B8A3E;
    border-top-width: 0.3rem;
    border-right-width: 0.3rem;
    border-radius: 0.2rem;
    transform: rotate(45deg);
}
.tb-step-list > li:not(:last-child)::before {
    right: -2.6rem;
}
.tb-step-list > li:not(:last-child)::after {
    right: -3.5rem;
}

/* 카드 그림 */
.ys-step-card.tb-step-01::after,
.ys-step-card.tb-step-02::after,
.ys-step-card.tb-step-03::after {
    content: "";
    width: 7.1rem;
    height: 7.1rem;
    /* 카드 몸통 아래 여백(3.2rem)만으로는 그림이 바닥에 붙어 보인다 */
    margin: 0 auto 4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.ys-step-card.tb-step-01::after {
    background-image: url(../img/component/icon/ico_registration.png);
}
.ys-step-card.tb-step-02::after {
    background-image: url(../img/component/icon/ico_examine.png);
}
.ys-step-card.tb-step-03::after {
    background-image: url(../img/component/icon/ico_approval.png);
}

/* 동의 상자 : 공용 규칙은 41.2rem 으로 높이를 못 박고 스크롤을 두는데,
   이 화면은 내용이 짧아 빈 공간만 남는다. 내용만큼만 차지하게 한다 */
.tb-agree .apply-agreement-box {
    height: auto;
}

.tb-agree .apply-fieldset-tit {
    font-size: 2rem;
    margin: 0 0 1.6rem;
}
.tb-agree-tit {
    margin: 0 0 1.6rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}

@media (max-width: 63.9375em) {
    /* 화살표가 놓일 가로 자리가 없어지므로 세로로 쌓고 아래를 가리키게 한다 */
    .tb-step-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 5.6rem;
    }
    .tb-step-list > li:not(:last-child)::before,
    .tb-step-list > li:not(:last-child)::after {
        top: auto;
        right: auto;
        left: 50%;
        margin-top: 0;
        margin-left: -0.6rem;
        transform: rotate(135deg);
    }
    .tb-step-list > li:not(:last-child)::before {
        bottom: -3.1rem;
    }
    .tb-step-list > li:not(:last-child)::after {
        bottom: -4rem;
    }
}

/* ==================================================================== */
/* 일반강사 등록                                                        */
/* 기관 등록 신청과 같은 .apply- 컴포넌트를 쓰고,                         */
/* 이미 등록한 항목을 보여 주는 목록만 여기서 새로 둔다                    */
/* ==================================================================== */

/* 첨부파일 상자를 .form-group 안에 넣으면, form-group 의 아래 여백(4rem)과
   상자 자신의 여백(4rem)이 겹쳐 다음 내용과 두 배로 벌어진다.
   .form-conts 가 flex 라 여백이 합쳐지지 않고 그대로 더해진다 */
.apply-fieldset .form-group .apply-file-upload {
    margin-bottom: 0;
}

/* 등록된 목록도 항목 사이와 같은 간격(4rem)으로 맞춘다 */
.tc-added {
    margin-top: 4rem;
}
.tc-added-tit {
    margin: 0 0 1.2rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.tc-added-tit strong {
    color: #008F55;
}
.tc-added-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tc-added-list > li {
    padding: 2.4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
    background-color: #FFFFFF;
}
.tc-added-list > li + li {
    margin-top: 1.2rem;
}
.tc-added-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem;
}
.tc-added-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
    word-break: keep-all;
}

/* 항목 이름과 값이 짝을 이루므로 dl 로 두고, 한 짝씩 가로로 놓는다 */
.tc-added-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 3.2rem;
    margin: 1.6rem 0 0;
}
.tc-added-meta > div {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.tc-added-meta dt {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.tc-added-meta dd {
    margin: 0;
    font-size: 1.7rem;
    color: #464C53;
}
.tc-added-file {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.6rem 0 0;
    padding: 1.6rem;
    border-radius: 0.8rem;
    background-color: #F5F6F9;
    font-size: 1.7rem;
    color: #1E2124;
}
.tc-added-file .svg-icon {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    background-color: #464C53;
}

/* 강사소개 글자 수 */
.tc-intro {
    max-width: 100%;
}
/* 같은 이유로 폭을 주지 않으면 글자 폭(34px)만 차지해서
   오른쪽 정렬이 눈에 보이지 않는다. 입력 칸과 같은 폭으로 맞춘다 */
.tc-count {
    /* 강사소개 칸(.tc-intro)이 폭 제한 없이 꽉 차므로 여기도 같게 둔다 */
    width: 100%;
    margin: 0.8rem 0 0;
    font-size: 1.5rem;
    color: #464C53;
    text-align: right;
}
.tc-count strong {
    color: #0B50D0;
    font-weight: 400;
}

/* 자격사항·강의이력 입력 묶음(.apply-repeat-item, [추가]로 늘어남).
   [추가]는 상자 제목 오른쪽, [삭제]는 묶음마다 머리줄('자격사항 2' 오른쪽)에 둔다.
   묶음 사이는 줄과 4rem 간격으로 나눈다 */
.apply-repeat-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.apply-repeat-item + .apply-repeat-item {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 0.1rem solid #CDD1D5;
}
/* 묶음 머리줄 : 번호 제목 + 그 묶음만 지우는 [삭제] */
.apply-repeat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
}
.apply-repeat-tit {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1E2124;
}
.apply-repeat-tit:focus {
    outline: none;
}
.apply-repeat-tit:focus-visible {
    outline: 0.2rem solid #256EF4;
    outline-offset: 0.2rem;
}
.apply-repeat-head .apply-repeat-del,
.apply-repeat-head .apply-repeat-del:is(:focus, :active) {
    flex: 0 0 auto;
    min-width: 6.4rem;
    border-color: #58616A;
    background-color: #FFFFFF;
    color: #1E2124;
}
/* 마우스를 올렸을 때만 옅은 회색 (다른 흰 테두리 단추와 같음) */
.apply-repeat-head .apply-repeat-del:hover {
    background-color: #F4F6F9;
}
/* 묶음이 하나뿐이면 번호·[삭제] 머리줄은 필요 없으므로 숨김 */
.apply-repeat-list:not(:has(> .apply-repeat-item + .apply-repeat-item)) .apply-repeat-head {
    display: none;
}

/* 강의기간 시작일 - 종료일: 두 칸이 세로로 늘어서 있었다. 한 줄로 놓는다 */
.apply-fieldset .form-group .form-conts.apply-date-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
}
.apply-fieldset .form-conts.apply-date-row input[type="text"].krds-input {
    flex: 0 1 20rem;
    width: 20rem;
}


/* 좁은 화면에서 .krds-check-area 에 margin-left:auto 가 걸려 있다(4105행).
   회원가입 화면처럼 라벨 오른쪽 끝에 체크 하나를 붙이려고 넣은 값인데,
   신청 폼은 라벨이 값 위로 올라가는 짜임이라 선택지 묶음이 통째로 오른쪽으로
   밀린다. 글자 길이에 따라 밀리는 정도가 달라 줄마다 시작점이 어긋난다.
   (선택지가 많아 폭을 꽉 채우는 줄만 밀릴 자리가 없어 왼쪽에 남는다)
   신청 폼 안에서는 왼쪽에 가지런히 놓는다 */
@media (max-width: 47.9375em) {
    .apply-fieldset .krds-check-area,
    .apply-agreement .krds-check-area {
        margin-left: 0;
    }
}

/* 강의지역·교육대상 체크박스.
   .apply-region-grid 는 flex 라 항목 글자 길이에 따라 줄마다 시작점이
   어긋난다. 같은 폭의 칸으로 나눠 세로줄이 맞도록 격자로 둔다.
   칸 수를 못 박지 않아 화면이 좁아지면 줄 수가 알아서 줄어든다 */
.krds-check-area.apply-region-grid.tc-check-grid {
    display: grid !important;
    /* .form-conts 가 세로 flex 라 폭을 주지 않으면 내용만큼만 차지한다.
       그러면 격자가 한 칸으로 접혀 항목이 세로로 한 줄씩 늘어선다 */
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1.2rem 1.6rem;
}
.krds-check-area.apply-region-grid.tc-check-grid .krds-form-check {
    display: flex !important;
    width: auto !important;
    min-width: 0;
}

@media (max-width: 47.9375em) {
    .krds-check-area.apply-region-grid.tc-check-grid {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    }
}

/* ==================================================================== */
/* 지식기부강사 등록                                                    */
/* ==================================================================== */

.le-lead .le-caution {
    margin-top: 0;
}
.le-lead .le-caution + .le-caution {
    margin-top: 0.4rem;
}

/* 활동과정 여섯 칸. 칸 사이 간격(3.2rem)이 화살표가 앉을 자리다 */
.kd-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 3.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kd-flow > li {
    position: relative;
    display: flex;
}
.kd-flow > li > .jhj-card {
    flex: 1 1 auto;
}
/* '지식기부강사' 처럼 붙여 쓴 낱말이 칸보다 길면 칸 밖으로 삐져나온다.
   낱말 단위로 끊되, 그래도 넘치면 그때만 쪼갠다 */
.kd-flow .jhj-card-tit {
    font-size: 1.6rem;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 이중 꺾쇠. 테두리 두 변을 돌려 그린다.
   흰 바탕 위 #1D4FAE 는 7.55:1 로 기준을 넉넉히 넘는다 */
.kd-flow > li:not(:last-child)::before,
.kd-flow > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.8rem;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    border: 0 solid #1D4FAE;
    border-top-width: 0.3rem;
    border-right-width: 0.3rem;
    border-radius: 0.2rem;
    transform: rotate(45deg);
}
.kd-flow > li:not(:last-child)::after {
    right: -2.5rem;
}

/* 활동과정 아래 주의 문구 */
.kd-flow + .le-caution {
    margin-top: 1.6rem;
}

.kd-agree-subtit {
    margin: 3.2rem 0 1.6rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.kd-agree-subtit + .hd-table-wrap {
    margin-top: 0;
}
.kd-agree-table.tbl.data {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.kd-agree-table.tbl.data th,
.kd-agree-table.tbl.data td {
    padding: 1.1rem 1.2rem;
    border-bottom: 0.1rem solid #CDD1D5;
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* 칸을 나누는 세로선. 표 바깥(첫 칸 왼쪽, 마지막 칸 오른쪽)에는 선이 없다 */
.kd-agree-table.tbl.data th + th,
.kd-agree-table.tbl.data td + td {
    border-left: 0.1rem solid #CDD1D5;
}
/* 머리는 옅은 바탕에 위쪽만 굵은 선.
   아래쪽은 본문과 같은 옅은 선이라 따로 지정하지 않는다.
   공용 규칙(.hd-table-wrap .hd-table.tbl.data thead th)이 글자 크기와
   여백을 따로 정하고 있어, 같은 깊이의 선택자로 되돌린다 */
.hd-table-wrap .kd-agree-table.tbl.data thead th {
    padding: 1.1rem 1.2rem;
    border-top: 0.2rem solid #1E2124;
    background-color: #EEF2F7;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1D1D1D;
}
.kd-agree-table.tbl.data tbody td {
    color: #464C53;
}


/* 지식기부활동과정 - 화면 폭에 따른 칸 수와 화살표 방향.
   여섯 칸이 한 줄에 다 들어가지 않으면 뱀이 기어가듯 방향을 바꿔 놓는다.
   왼쪽 &rarr; 오른쪽 &rarr; 아래 &rarr; 오른쪽 &rarr; 왼쪽 &rarr; 아래 &hellip; 순서라,
   줄이 바뀌는 자리의 아래 화살표가 바로 다음 칸을 가리킨다.
   차례는 ol 의 순서(1~6)로도 전달되므로 읽어 주는 프로그램에는 영향이 없다 */

/* 1279px 이하 : 세 칸씩 두 줄. 둘째 줄은 오른쪽에서 왼쪽으로 */
@media (max-width: 79.9375em) {
    .kd-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4.8rem 3.2rem;
    }
    .kd-flow > li:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }
    .kd-flow > li:nth-child(2) {
        grid-row: 1;
        grid-column: 2;
    }
    .kd-flow > li:nth-child(3) {
        grid-row: 1;
        grid-column: 3;
    }
    .kd-flow > li:nth-child(4) {
        grid-row: 2;
        grid-column: 3;
    }
    .kd-flow > li:nth-child(5) {
        grid-row: 2;
        grid-column: 2;
    }
    .kd-flow > li:nth-child(6) {
        grid-row: 2;
        grid-column: 1;
    }
    .kd-flow > li:nth-child(1)::before,
    .kd-flow > li:nth-child(1)::after {
        content: "";
        top: 50%;
        right: -1.8rem;
        bottom: auto;
        left: auto;
        margin-top: -0.5rem;
        margin-left: 0;
        transform: rotate(45deg);
    }
    .kd-flow > li:nth-child(1)::after {
        right: -2.5rem;
    }
    .kd-flow > li:nth-child(2)::before,
    .kd-flow > li:nth-child(2)::after {
        content: "";
        top: 50%;
        right: -1.8rem;
        bottom: auto;
        left: auto;
        margin-top: -0.5rem;
        margin-left: 0;
        transform: rotate(45deg);
    }
    .kd-flow > li:nth-child(2)::after {
        right: -2.5rem;
    }
    .kd-flow > li:nth-child(3)::before,
    .kd-flow > li:nth-child(3)::after {
        content: "";
        top: auto;
        right: auto;
        bottom: -2.9rem;
        left: 50%;
        margin-top: 0;
        margin-left: -0.5rem;
        transform: rotate(135deg);
    }
    .kd-flow > li:nth-child(3)::after {
        bottom: -3.6rem;
    }
    .kd-flow > li:nth-child(4)::before,
    .kd-flow > li:nth-child(4)::after {
        content: "";
        top: 50%;
        right: auto;
        bottom: auto;
        left: -1.8rem;
        margin-top: -0.5rem;
        margin-left: 0;
        transform: rotate(225deg);
    }
    .kd-flow > li:nth-child(4)::after {
        left: -2.5rem;
    }
    .kd-flow > li:nth-child(5)::before,
    .kd-flow > li:nth-child(5)::after {
        content: "";
        top: 50%;
        right: auto;
        bottom: auto;
        left: -1.8rem;
        margin-top: -0.5rem;
        margin-left: 0;
        transform: rotate(225deg);
    }
    .kd-flow > li:nth-child(5)::after {
        left: -2.5rem;
    }
    .kd-flow > li:nth-child(6)::before,
    .kd-flow > li:nth-child(6)::after {
        content: none;
    }
}

/* 1023px 이하 : 두 칸씩 세 줄. 둘째 줄만 오른쪽에서 왼쪽으로 */
@media (max-width: 63.9375em) {
    .kd-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4.8rem 3.2rem;
    }
    .kd-flow > li:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }
    .kd-flow > li:nth-child(2) {
        grid-row: 1;
        grid-column: 2;
    }
    .kd-flow > li:nth-child(3) {
        grid-row: 2;
        grid-column: 2;
    }
    .kd-flow > li:nth-child(4) {
        grid-row: 2;
        grid-column: 1;
    }
    .kd-flow > li:nth-child(5) {
        grid-row: 3;
        grid-column: 1;
    }
    .kd-flow > li:nth-child(6) {
        grid-row: 3;
        grid-column: 2;
    }
    .kd-flow > li:nth-child(1)::before,
    .kd-flow > li:nth-child(1)::after {
        content: "";
        top: 50%;
        right: -1.8rem;
        bottom: auto;
        left: auto;
        margin-top: -0.5rem;
        margin-left: 0;
        transform: rotate(45deg);
    }
    .kd-flow > li:nth-child(1)::after {
        right: -2.5rem;
    }
    .kd-flow > li:nth-child(2)::before,
    .kd-flow > li:nth-child(2)::after {
        content: "";
        top: auto;
        right: auto;
        bottom: -2.9rem;
        left: 50%;
        margin-top: 0;
        margin-left: -0.5rem;
        transform: rotate(135deg);
    }
    .kd-flow > li:nth-child(2)::after {
        bottom: -3.6rem;
    }
    .kd-flow > li:nth-child(3)::before,
    .kd-flow > li:nth-child(3)::after {
        content: "";
        top: 50%;
        right: auto;
        bottom: auto;
        left: -1.8rem;
        margin-top: -0.5rem;
        margin-left: 0;
        transform: rotate(225deg);
    }
    .kd-flow > li:nth-child(3)::after {
        left: -2.5rem;
    }
    .kd-flow > li:nth-child(4)::before,
    .kd-flow > li:nth-child(4)::after {
        content: "";
        top: auto;
        right: auto;
        bottom: -2.9rem;
        left: 50%;
        margin-top: 0;
        margin-left: -0.5rem;
        transform: rotate(135deg);
    }
    .kd-flow > li:nth-child(4)::after {
        bottom: -3.6rem;
    }
    .kd-flow > li:nth-child(5)::before,
    .kd-flow > li:nth-child(5)::after {
        content: "";
        top: 50%;
        right: -1.8rem;
        bottom: auto;
        left: auto;
        margin-top: -0.5rem;
        margin-left: 0;
        transform: rotate(45deg);
    }
    .kd-flow > li:nth-child(5)::after {
        right: -2.5rem;
    }
    .kd-flow > li:nth-child(6)::before,
    .kd-flow > li:nth-child(6)::after {
        content: none;
    }
}

/* 767px 이하 : 한 칸씩 위에서 아래로. 화살표는 모두 아래를 가리킨다 */
@media (max-width: 47.9375em) {
    .kd-flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 4.8rem;
    }
    .kd-flow > li:nth-child(n) {
        grid-row: auto;
        grid-column: auto;
    }
    .kd-flow > li:not(:last-child)::before,
    .kd-flow > li:not(:last-child)::after {
        content: "";
        top: auto;
        right: auto;
        bottom: -2.9rem;
        left: 50%;
        margin-top: 0;
        margin-left: -0.5rem;
        transform: rotate(135deg);
    }
    .kd-flow > li:not(:last-child)::after {
        bottom: -3.6rem;
    }
    .kd-flow > li:last-child::before,
    .kd-flow > li:last-child::after {
        content: none;
    }
}


/* 개인정보 3자 제공 표 - 좁은 화면.
   강사정보 목록(.list-table)의 카드형과 같은 값으로 맞춘다.
   공용 .hd-table 카드형은 라벨을 7rem 에 위쪽 맞춤으로 두는데,
   그러면 이 화면만 다른 표처럼 보였다.
   머리 줄은 화면에서만 숨고 읽어 주는 프로그램에는 그대로 남아,
   th scope="col" 로 맺어 둔 관계가 끊기지 않는다 */
@media (max-width: 47.9375em) {
    .kd-agree-table.tbl.data {
        border-top: 0.2rem solid #1E2124;
    }
    .kd-agree-table.tbl.data tbody tr {
        border-bottom: 0.1rem solid #CDD1D5;
        padding-block: 1.2rem;
    }
    /* 공용 .hd-table 규칙이 마지막 줄의 아래 선을 지운다.
       이 표는 줄이 하나뿐이라 그러면 표가 끝나는 자리가 안 보인다.
       강사정보 목록과 같이 줄마다 아래 선을 둔다 */
    .kd-agree-table.tbl.data tbody tr:last-child {
        border-bottom: 0.1rem solid #CDD1D5;
    }
    /* 넓은 화면용 여백을 정하는 공용 규칙이 더 깊어서, 같은 깊이로 되돌린다.
       값은 강사정보 목록과 같은 1.2rem 1.6rem */
    .hd-table-wrap .kd-agree-table.tbl.data tbody td {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 1.2rem 1.6rem;
        border: none;
        text-align: left;
        font-size: 1.7rem;
        color: #1E2124;
    }
    .kd-agree-table.tbl.data tbody td::before {
        content: attr(data-label);
        flex: 0 0 9rem;
        font-size: 1.5rem;
        font-weight: 700;
        color: #1E2124;
    }
}

/* 덩어리 제목 아래에 오는 안내 문구.
   .le-caution 은 아래 여백이 없어 바로 다음 항목 이름과 붙어,
   '성명'에 딸린 설명처럼 보였다.
   제목과의 간격(2.4rem)보다 아래를 넉넉히 둬서 제목 쪽에 묶이게 한다 */
.apply-fieldset > .le-caution {
    margin-top: -0.8rem;
    margin-bottom: 3.2rem;
}

/* ==================================================================== */
/* 게시물 본문(.detail-body) 안의 제목과 목록                            */
/* 지금까지 본문이 문단(p)뿐이라 제목·목록 규칙이 없었고, 브라우저 기본값이 */
/* 그대로 나와 h4 가 본문과 같은 크기(17px)라 구분이 안 되고 위아래 여백도  */
/* 들쭉날쭉했다                                                          */
/* ==================================================================== */

/* 본문 안 큰 제목. 게시물 제목(.detail-title 2.8rem)보다 한 단계 작게 */
.detail-body h3 {
    margin: 0 0 1.6rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}

/* 본문 안 작은 제목. 위쪽을 넉넉히 둬서 앞 덩어리와 끊어 읽히게 하고,
   아래쪽은 붙여 바로 뒤 목록과 한 묶음으로 보이게 한다 */
.detail-body h4 {
    margin: 3.2rem 0 1.2rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}
.detail-body > :first-child {
    margin-top: 0;
}
.detail-body > :last-child {
    margin-bottom: 0;
}

/* 본문 안 목록. 항목 사이(0.4rem)가 본문 줄 간격보다 좁아 붙어 보였다 */
.detail-body .le-list {
    margin-bottom: 1.6rem;
}
.detail-body .le-list > li + li {
    margin-top: 1rem;
}
.detail-body .le-list > li {
    line-height: 1.8;
}

/* 게시물 본문의 번호 목록.
   공용 값은 번호를 16px 굵게, 왼쪽 0.4rem 에 두는데 본문(17px)과 크기가
   달라 번호가 한 줄 위로 뜬 것처럼 보이고, 번호와 글 사이가 28px 이나
   벌어져 있었다. 본문 글자와 같은 크기·줄 간격으로 맞춘다 */
.detail-body .le-list.le-list-num > li {
    padding-left: 2.6rem;
}
.detail-body .le-list.le-list-num > li::before {
    left: 0;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.8;
}

/* ==================================================================== */
/* FAQ                                                                  */
/* 여닫기는 KRDS 아코디언(.krds-accordion)이 맡고,                        */
/* 여기서는 Q/A 표시와 검색 줄만 둔다                                     */
/* ==================================================================== */

/* --- 검색 상자 -------------------------------------------------------- */
.faq-search {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}
.faq-field {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    min-width: 0;
}
/* 시안대로 분류와 검색 사이에 가로선을 둔다.
   두 줄이 성격이 달라(고르기 / 찾기) 선으로 끊어 주는 편이 읽기 쉽다 */
.faq-field + .faq-field {
    padding-top: 2.4rem;
    border-top: 0.1rem solid #DDE1E5;
}
.faq-search .filter-label {
    flex: 0 0 10rem;
}
/* 검색 줄.
   flex 기본값(1 1 auto)만 두면 자리가 모자랄 때 선택 상자와 입력 칸이
   끝없이 줄어든다. 1024px 근처에서 선택 상자가 76px 까지 좁아져
   '질문' 글자가 잘렸다.
   각 칸에 더 이상 줄어들지 않을 폭을 정하고, 그래도 모자라면
   버튼을 아랫줄로 내린다 */
/* 줄바꿈은 두지 않는다. 한 줄만 아랫줄로 내려가면 라벨 아래가 비어
   들쭉날쭉해 보인다. 좁아지면 아래 media query 에서 통째로 세로로 쌓는다 */
.faq-search .search-controls {
    flex: 1 1 32rem;
    min-width: 0;
}
.faq-search .search-controls .krds-form-select-sort {
    flex: 0 0 12rem;
}
.faq-search .search-controls .sch-input {
    flex: 1 1 20rem;
    min-width: 0;
}
.faq-search .search-actions {
    flex: 0 0 auto;
}

/* 분류 칩. 여닫는 동작은 라디오가, 기본 모양은 KRDS 컴포넌트가 맡고
   여기서는 시안에 맞춰 크기와 색만 조정한다 */
.faq-chip-list {
    flex: 1 1 auto;
    gap: 0.8rem;
    min-width: 0;
}


/* --- 질문 / 답변 ------------------------------------------------------ */
/* 동그란 Q/A 표시. 글자는 뜻을 담지 않고(옆에 sr-only 질문/답변이 있다)
   눈으로만 읽는 표시라 aria-hidden 으로 둔다 */
.faq-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}
.faq-badge-q {
    background-color: #008F55;
    color: #FFFFFF;
}
.faq-badge-a {
    background-color: #007244;
    color: #FFFFFF;
}


.faq-list .btn-accordion {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.faq-list .faq-q-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: keep-all;
}
/* 오른쪽 여백은 화살표 자리(2.4rem + 화살표 + 1.6rem)만큼 비워 둔다.
   예전엔 padding-inline: 2.4rem 이 KRDS 의 화살표 자리 여백을 덮어써서,
   화면이 좁아져 질문이 길어지면 글자가 화살표 밑까지 밀려 닿았다.
   화살표는 질문 줄 높이 가운데에 둔다(두 줄이어도 가운데) */
.krds-accordion.type-line.faq-list .accordion-item .btn-accordion {
    padding-block: 2rem;
    padding-left: 2.4rem;
    padding-right: calc(2.4rem + var(--krds-accordion--button-icon-size, 2.4rem) + 1.6rem);
}
.krds-accordion.type-line.faq-list .accordion-item .btn-accordion::after {
    top: calc(50% - var(--krds-accordion--button-icon-size, 2.4rem) / 2);
    right: 2.4rem;
}
.krds-accordion.type-line.faq-list .accordion-item.active .accordion-collapse {
    background-color: #F3FAF7;
    padding-inline: 2.4rem;
    padding-top: 3.2rem;
}
.krds-accordion.type-line.faq-list .accordion-item .btn-accordion.active {
    color: #1E2124;
}

.krds-accordion.type-line.faq-list .accordion-item.active {
    border-top: 0.1rem solid var(--krds-accordion--color-divider);
    
}

/* --- 라인형 아코디언 공통 : 칸 사이 선을 아래로 -------------------------- */
/* KRDS 라인형은 칸마다 '위'에 선을 둬서 칸과 칸 사이를 나눈다. 그러면 맨 첫
   칸은 위에 나눌 것이 없는데도 선이 그려져 바로 위 요소와 겹쳐 보인다.
   :first-child 로 그 칸만 지우면 분류를 걸러 첫 칸이 바뀌었을 때 새로
   맨 앞에 온 칸은 잡히지 않아 선이 다시 나타난다.
   선을 '아래'로 옮기면 맨 앞 칸은 언제나 선이 없고 마지막 칸이 목록을
   닫아 주므로, 어느 칸이 앞에 오든 같은 모습이 된다.
   펼친 칸에 위 선을 다시 그리는 규칙이 공용(output.css)과 위쪽에 하나씩
   있어 그 둘까지 덮도록 선택자를 나란히 붙였다.
   FAQ·이용안내 등 라인형 아코디언을 쓰는 화면에 모두 걸린다 */
.krds-accordion.type-line .accordion-item,
.krds-accordion.type-line .accordion-item.active,
.krds-accordion.type-line.faq-list .accordion-item.active {
    border-top: 0;
    border-bottom: 0.1rem solid var(--krds-accordion--color-divider);
}
/* 감싸개도 아래에 선을 하나 갖고 있다(.krds-accordion 의 border-bottom).
   .type-line 은 위 선만 지우고 아래는 남겨 두는데, 이제 마지막 칸이 스스로
   아래 선을 그리므로 그대로 두면 두 줄이 겹쳐 두꺼워 보인다 */
.krds-accordion.type-line {
    border-bottom: 0;
}

/* 답변 칸. 질문과 구분되도록 옅은 초록 바탕(시안 #F4FAF8).
   바탕과 여백을 .accordion-body 가 아니라 안쪽 .faq-answer 에 두는 이유는,
   .accordion-body 가 접히는 칸의 직접 자식이라 여백이 남아 있으면
   다 접혀도 그 높이만큼(2.4rem) 남기 때문이다 */
/* KRDS 라인형은 .krds-accordion.type-line .accordion-item .accordion-body
   깊이로 아래 여백을 준다. 같은 깊이로 맞춰야 0 이 먹는다.
   여백이 남으면 접어도 그만큼(2.4rem) 자리가 남는다 */
.krds-accordion.type-line.faq-list .accordion-item .accordion-body {
    padding: 0;
    background: none;
}
.faq-list .faq-answer {
    margin-bottom: 1.6rem;
    background-color: #F4FAF8;
    border-radius: 0.8rem;
}
/* 질문 줄과 답변 칸의 글이 같은 세로선에서 시작하도록 배지 폭만큼 맞춘다 */
.faq-answer-tit + p {
    margin-top: 1.2rem;
}
.faq-answer {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}
.faq-answer-body {
    flex: 1 1 auto;
    min-width: 0;
}
.faq-answer-tit {
    margin: 0 0 2.0rem !important;
    font-size: 1.7rem;
    font-weight: 700 !important;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}
.faq-answer-body p {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
    font-weight: 400;
    word-break: keep-all;
}

/* 1023px 이하 : 라벨을 위로 올리고 칸을 가로로 꽉 채운다.
   한 줄에 라벨 + 선택 + 입력 + 버튼 넷을 넣기에는 자리가 모자라
   칸이 잘려 보이기 시작하는 지점이다 */
@media (max-width: 63.9375em) {
    .faq-field {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    /* 세로로 쌓으면 flex 의 기준 축이 높이로 바뀐다.
       가로용으로 준 flex-basis(32rem 등)가 그대로 높이가 되어
       칸 사이가 크게 벌어지므로 여기서 되돌린다 */
    .faq-search .faq-chip-list,
    .faq-search .search-controls,
    .faq-search .search-actions {
        flex: 0 0 auto;
    }
    .faq-search .filter-label {
        flex: 0 0 auto;
    }
    .faq-search .search-actions {
        width: 100%;
    }
  

}

/* 767px 이하 : 공용 규칙이 검색 줄까지 세로로 바꾼다.
   가로용으로 준 flex-basis(12rem/20rem)가 높이가 되어 칸이 세로로
   늘어나므로 여기서 되돌린다 */
@media (max-width: 47.9375em) {
    .faq-search .search-controls .krds-form-select-sort,
    .faq-search .search-controls .sch-input {
        flex: 0 0 auto;
    }

    /* 분류는 라벨을 왼쪽에 두고 칩이 그 옆으로 흐르게 한다.
       라벨이 한 줄을 통째로 쓰면 좁은 화면에서 아깝다 */
    .faq-search .faq-field:first-of-type {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.2rem;
    }
    .faq-search .faq-field:first-of-type > .filter-label {
        flex: 0 0 auto;
        padding-top: 0.9rem;
        width: 5.7rem;
    }
    /* 라벨 옆 남는 자리를 칩이 채우고, 모자라면 줄이 바뀌게 한다.
       min-width:0 이 없으면 칩 묶음이 줄지 않아 상자 밖으로 나간다 */
    .faq-search .faq-field:first-of-type .faq-chip-list {
        flex: 1 1 auto;
        min-width: 0;
        gap: 1.2rem 0.8rem;
    }

    /* 검색 라벨은 화면에서만 감춘다.
       선택 상자와 입력 칸에 자리 표시글이 있어 눈으로는 알 수 있고,
       읽어 주는 프로그램에는 라벨이 그대로 전달된다 */
    .faq-search .faq-field:last-of-type > .filter-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* 라벨이 없어 두 덩어리가 이미 떨어져 보이므로 가로선은 두지 않는다 */
    .faq-search .faq-field + .faq-field {
        padding-top: 0;
        border-top: 0;
    }
}

/* 답변 펼침 효과.
   KRDS 는 max-height 를 0 에서 100vh 까지 1.5초에 걸쳐 늘린다.
   100vh 는 실제 답변 높이(200~300px)보다 훨씬 커서, 눈에 보이는 변화는
   앞부분에서 끝나고 남은 시간 동안 아래쪽 여백만 뒤늦게 드러난다.
   그래서 '여백이 나중에 먹히는' 것처럼 보였다.

   grid-template-rows 를 0fr 에서 1fr 로 바꾸면 내용 높이만큼만 늘어나
   여백까지 한 몸으로 움직인다. 0.3초면 스르륵 열리는 느낌은 남으면서
   글을 읽으려는 사람을 기다리게 하지 않는다 */
.krds-accordion.faq-list .accordion-collapse {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none;
    /* 닫을 때는 다 접힌 뒤에 숨겨야 내용이 갑자기 사라지지 않는다 */
    transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}
.krds-accordion.faq-list .accordion-item.active .accordion-collapse {
    grid-template-rows: 1fr;
    max-height: none;
    transition: grid-template-rows 0.3s ease, visibility 0s;
}
/* 0fr 일 때 내용이 삐져나오지 않도록.
   접히는 칸은 아래가 잘리는 방식이라, 높이만 줄이면 닫는 동안 답변 아래
   여백부터 사라져 글이 잘리는 것처럼 보인다.
   높이가 줄어드는 사이 내용을 함께 흐리게 해서 잘리는 순간을 감춘다 */
.krds-accordion.faq-list .accordion-collapse > * {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.krds-accordion.faq-list .accordion-item.active .accordion-collapse > * {
    opacity: 1;
    /* 열 때는 칸이 어느 정도 벌어진 뒤에 글이 떠오르게 조금 늦춘다 */
    transition: opacity 0.25s ease 0.1s;
}

/* 화면 움직임을 줄이도록 설정한 분에게는 효과를 끈다 */
@media (prefers-reduced-motion: reduce) {
    .krds-accordion.faq-list .accordion-collapse,
    .krds-accordion.faq-list .accordion-item.active .accordion-collapse,
    .krds-accordion.faq-list .accordion-collapse > *,
    .krds-accordion.faq-list .accordion-item.active .accordion-collapse > * {
        transition: none;
    }
}

/* ==================================================================== */
/* 수강안내                                                             */
/* ==================================================================== */

/* 칸 안에 여러 줄이 들어가는 목록(제출서류) */
.gi-cell-list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.gi-cell-list > li {
    position: relative;
    padding-left: 1.2rem;
    line-height: 1.6;
}
.gi-cell-list > li + li {
    margin-top: 0.4rem;
}
.gi-cell-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.1rem;
    width: 0.4rem;
    height: 0.1rem;
    background-color: #58616A;
}

/* 감면신청 같은 앞머리 강조 */
.gi-strong {
    color: #008F55;
}

/* 칸을 나누는 세로선.
   공용 규칙은 border-right 를 주고 :last-child 에서 지우는데,
   칸을 합친(rowspan) 표에서는 줄마다 마지막 칸이 달라져
   '발급처' 오른쪽 선이 몇 줄만 사라졌다.
   첫 칸을 뺀 나머지에 왼쪽 선을 주면 합쳐진 칸도 제 높이만큼 선이 이어진다 */
.hd-table-wrap .gi-table.tbl.data th,
.hd-table-wrap .gi-table.tbl.data td {
    border-right: none;
}
.hd-table-wrap .gi-table.tbl.data th + th,
.hd-table-wrap .gi-table.tbl.data th + td,
.hd-table-wrap .gi-table.tbl.data td + td,
.hd-table-wrap .gi-table.tbl.data td + th {
    border-left: 0.1rem solid #CDD1D5;
}
/* 표의 모든 선을 #CDD1D5 로 맞춘다.
   공용 .hd-table 은 가로선 #E3E4E4, 머리 위 굵은 선 #1E2124,
   머리 아래 선 #8A929B 로 세 가지를 섞어 쓴다 */
.hd-table-wrap .gi-table.tbl.data th,
.hd-table-wrap .gi-table.tbl.data td {
    border-bottom-color: #CDD1D5;
}
/* 표 맨 위 굵은 선만 진하게 두어 표가 시작하는 자리를 알린다 */
.hd-table-wrap .gi-table.tbl.data thead th {
    border-top-color: #1E2124;
    border-bottom-color: #CDD1D5;
}

/* 왼쪽 칸이 여러 줄로 합쳐진 경우(수강료 반환 규정의 '학습비 징수 기간'),
   둘째 줄부터는 그 오른쪽에 형제 칸이 없어 왼쪽 선을 그릴 대상이 없다.
   합쳐진 칸 자신에게 오른쪽 선을 준다.
   합쳐진 칸이 맨 오른쪽에 오는 표(교육비 감면의 '감면액')는 td 라
   여기에 걸리지 않으므로 표 바깥에 선이 생기지 않는다 */
.hd-table-wrap .gi-table.tbl.data th[rowspan] {
    border-right: 0.1rem solid #CDD1D5;
}

/* 안내 문구 안의 링크도 같은 색으로. 밑줄로 링크임을 알린다 */
.le-caution a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
}

/* 줄 이름이 왼쪽 칸에 오는 표라 글을 왼쪽에 맞춘다 */
.gi-table.tbl.data tbody th {
    text-align: center;
    word-break: keep-all;
}
.gi-table.tbl.data tbody td {
    word-break: keep-all;
}

/* 좁은 화면 : 칸을 합친(rowspan/colspan) 표라 카드형으로 바꾸면
   어느 값이 어느 줄인지 알 수 없다. 표 모양을 지키고 가로로 민다 */
@media (max-width: 47.9375em) {
    .hd-table-wrap.krds-table-wrap.gi-table-wrap {
        overflow-x: auto;
    }
    .hd-table-wrap.krds-table-wrap .gi-table.tbl.data {
        display: table;
        width: 100%;
        min-width: 60rem;
        table-layout: fixed;
    }
    .hd-table-wrap .gi-table.tbl.data colgroup {
        display: table-column-group;
    }
    /* 공용 규칙이 머리 줄을 화면 밖으로 숨긴다.
       이 표는 항목 이름이 머리 줄에만 있어 숨기면 안 된다 */
    .hd-table-wrap .gi-table.tbl.data thead {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    .hd-table-wrap .gi-table.tbl.data thead tr,
    .hd-table-wrap .gi-table.tbl.data tbody tr {
        display: table-row;
    }
    .hd-table-wrap .gi-table.tbl.data tbody {
        display: table-row-group;
    }
    /* 공용 카드형 규칙이 칸 여백을 0.6rem 0 으로 줄이고, 글을 왼쪽으로 몰고,
       테두리를 통째로 지운다. 표 모양을 지키는 이 표에서는 되돌린다 */
    .hd-table-wrap .gi-table.tbl.data thead th,
    .hd-table-wrap .gi-table.tbl.data tbody th,
    .hd-table-wrap .gi-table.tbl.data tbody td {
        display: table-cell;
        width: auto;
        max-width: none;
        padding: 1.6rem 1.2rem;
        text-align: center;
        border-bottom: 0.1rem solid #CDD1D5;
    }
    .hd-table-wrap .gi-table.tbl.data thead th {
        border-top: 0.2rem solid #1E2124;
        background-color: #EEF2F7;
    }
    /* 좁은 화면에서 줄 이름 칸의 바탕색이 사라졌다.
       넓은 화면과 같은 값으로 다시 지정한다 */
    .hd-table-wrap .gi-table.tbl.data tbody th {
        background-color: #F3F6F9;
    }
    /* 칸 안 목록은 왼쪽에 맞춘다 */
    .hd-table-wrap .gi-table.tbl.data .gi-cell-list {
        text-align: left;
    }
    .hd-table-wrap .gi-table.tbl.data tbody td::before {
        content: none;
    }
}

/* ==================================================================== */
/* 발간물 목록                                                          */
/* 검색 상자는 FAQ 와 같은 규칙(.faq-search)을 함께 쓰고,                 */
/* 여기서는 카드 목록만 둔다                                             */
/* ==================================================================== */

.pub-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}
.pub-card {
    display: flex;
    flex-direction: column;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
    overflow: hidden;
}
/* 카드 안 어디에 초점이 가도 테두리로 알 수 있게 한다.
   굵기·색은 .report-card:hover 와 같은 값 */
.pub-card:hover,
.pub-card:focus-within {
    border-color: #008F55;
    box-shadow: 0 0 0 0.1rem #008F55;
}/* 분류 표시. 흰 글자라 바탕이 진해야 한다(#12295E {
    align-self: flex-start;
    margin: 0 0 1.2rem;
    padding: 0.4rem 1.2rem;
    border-radius: 100rem;
    background-color: #12295E;
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFFFFF;
}

@media (max-width: 63.9375em) {
    .pub-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 47.9375em) {
    .pub-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
    }
}

/* 카드를 .report-card-link 로 감싸지 않은 목록(발간물)의 올렸을 때 표시.
   연구보고서는 카드를 role="button" 요소로 감싸 거기에 효과를 거는데,
   버튼 안에 링크가 들어가면 읽어 주는 프로그램이 안쪽 링크를 제대로
   알리지 못한다. 감싸지 않고 카드 자신에 같은 효과를 준다.
   :focus-within 을 함께 둬서 키보드로 넘길 때도 어느 카드인지 보인다 */
/* 올렸을 때 표시는 공용 .report-card-link:hover 가 맡는다.
   여기서는 키보드로 넘길 때도 보이도록 :focus-within 만 더한다.
   연구보고서는 감싼 요소 자체가 초점을 받지만, 이 목록은 안쪽 링크가
   초점을 받기 때문이다 */
.report-grid.no-cardlink .report-card-link:focus-within {
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
    outline-offset: 0;
    box-shadow: var(--krds-box-shadow-outline);
    transition: outline 0s, box-shadow 0s !important;
}
/* 제목은 h3 안의 링크라 기본 링크색이 나온다. 카드 글자색을 물려받게 한다 */
.report-grid.no-cardlink .report-card-title a {
    color: inherit;
    text-decoration: none;
}
.report-grid.no-cardlink .report-card-link:hover .report-card-title a,
.report-grid.no-cardlink .report-card-link:focus-within .report-card-title a {
    text-decoration: underline;
}

/* ==================================================================== */
/* 1:1 문의(목록 / 상세) 전용 스타일                                      */
/*                                                                      */
/* 목록은 공지사항/자료실의 .list-table, 상세는 공지사항 상세의 .detail-* */
/* 를 그대로 쓴다. 이 게시판에만 있는 것은 아래 세 가지뿐이라 .qna-       */
/* 접두사로만 덧붙였다.                                                  */
/*   1) 비밀글 자물쇠                                                    */
/*   2) 진행현황(답변완료/답변대기)                                       */
/*   3) 관리자 답변 상자                                                 */
/* ==================================================================== */

/* --------------------------------------------------------------- */
/* 자물쇠 아이콘                                                     */
/* 컴포넌트 아이콘 세트(assets/img/component/icon)에 자물쇠 svg가     */
/* 없어서, 다른 .svg-icon 과 똑같이 mask 방식으로 여기서만 새로       */
/* 정의한다. 색은 .svg-icon 기본값대로 background-color 로 바꾼다     */
/* --------------------------------------------------------------- */
.svg-icon.ico-lock {
    -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("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* 목록                                                                */
/* ------------------------------------------------------------------ */

/* 제목 셀은 [자물쇠 + 제목] 두 덩어리라 가로로 세운다.
   .list-table td.col-title a 에 걸린 display:block + 말줄임은 그대로
   살려야 하므로, a 를 flex 아이템으로 두고 min-width:0 만 풀어 준다 */
.qna-table-wrap .qna-title-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.qna-table-wrap .qna-title-cell a {
    min-width: 0;
}
.qna-table-wrap .qna-lock-inline {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    background-color: #464C53;
}

/* 진행현황: 색만으로 구분하지 않도록 글자를 그대로 두고 굵기로도 구분.
   흰 바탕에서 #008F55 는 4.6:1, #DE3412 는 4.6:1 로 굵은 글씨(18px
   미만이지만 700) 기준을 넘긴다. 수강료납부의 상태 색과 같은 값 */
.qna-state {
    font-weight: 700;
}
.qna-state.is-done {
    color: #008F55;
}
.qna-state.is-wait {
    color: #D63D4A;
}

/* 비밀글 전용 칸은 모바일 카드에서만 쓴다(데스크탑은 제목 앞 자물쇠).
   display:none 이면 colgroup 계산에서도 빠져 6칸 그대로 맞는다 */
.qna-table-wrap .list-table.tbl.data td.col-secret {
    display: none;
}

@media (max-width: 767px) {
    /* 모바일 카드형에서는 시안대로 "비밀글" 이 독립된 줄이 되므로,
       제목 안 자물쇠는 감추고 별도 칸을 되살린다.
       읽어 주는 프로그램용 sr-only "비밀글" 은 제목 셀에 그대로 있다 */
    .qna-table-wrap .qna-lock-inline {
        display: none;
    }
    .qna-table-wrap .list-table.tbl.data td.col-secret {
        display: flex;
    }
    .qna-table-wrap .list-table.tbl.data td.col-secret .svg-icon {
        width: 1.8rem;
        height: 1.8rem;
        background-color: #464C53;
    }
    /* 카드형 목록의 라벨 폭/정렬/글자 크기는 공지사항(.list-table 공용
       규칙)을 그대로 따른다. 여기서는 제목 칸이 [자물쇠 + 제목] 두
       덩어리로 감싸져 있어 생기는 차이만 되돌려, 공지사항의 제목 칸과
       똑같이 라벨 옆을 채우고 줄바꿈되게 한다 */
    .qna-table-wrap .qna-title-cell {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------------------------------ */
/* 상세                                                                */
/* ------------------------------------------------------------------ */

/* 제목과 진행현황 뱃지를 한 줄에. 제목이 길어지면 뱃지는 줄지 않고
   제목만 줄바꿈된다 */
.qna-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.qna-detail-head .detail-title {
    margin: 0;
    min-width: 0;
}
.qna-lock-title {
    width: 2.2rem;
    height: 2.2rem;
    background-color: #1E2124;
    vertical-align: -0.3rem;
    margin-right: 0.6rem;
}

/* 진행현황 뱃지: 수강료납부의 .payment-badge-* 와 같은 알약형 */
.krds-badge.qna-badge {
    flex: 0 0 auto;
    height: 3.1rem;
    border-radius: 50rem;
    padding-inline: 1.2rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #FFFFFF;
}
.krds-badge.qna-badge.is-done {
    background-color: #008F55;
}
.krds-badge.qna-badge.is-wait {
    background-color: #D63D4A;
}
/* 강사정보 요청 처리이력(damoa/teacher/requestHistory.jsp) 처리상태.
   예전엔 '요청'은 문의 대기 뱃지(빨강), '반려'는 수강료 미납 뱃지(빨강)를 빌려 써서
   두 상태가 같은 색이었고 '반려'만 모양(알약형)이 달랐다.
   같은 알약형으로 맞추고 색으로 구분: 요청(처리 전) 남색 / 승인 초록 / 반려 빨강 */
.krds-badge.qna-badge.is-request {
    background-color: #051F48;
}
.krds-badge.qna-badge.is-reject {
    background-color: #D63D4A;
}

/* 문의 본문 끝을 실선으로 닫고, 그 아래에 답변 상자와 버튼이 온다.
   (.detail-actions 의 기본 border-top 은 선이 두 번 겹치므로 끈다) */
.qna-view {
    margin-bottom: 0;
    padding-bottom: 1.6rem;
    border-bottom: 0.1rem solid #CDD1D5;
}
.detail-actions.qna-actions {
    border-top: 0;
}

/* 관리자 답변 상자 */
.qna-answer {
    margin-top: 4rem;
    padding: 4rem;
    border-radius: 1.2rem;
    background-color: #F5F6F9;
}
.qna-answer-tit {
    margin: 0 0 2.4rem;
    font-size: 2rem;
    font-weight: 700;
    color: #1E2124;
}
.qna-answer .detail-meta {
    margin-bottom: 2.4rem;
    font-size: 1.7rem;
}
.qna-answer-body {
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
}
.qna-answer-body p {
    margin: 0 0 1.6rem;
}
.qna-answer-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .qna-detail-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }
    .qna-lock-title {
        width: 2rem;
        height: 2rem;
    }
    .qna-answer {
        margin-top: 3.2rem;
        padding: 2.4rem 2rem;
    }
    .qna-answer .detail-meta {
        gap: 1.2rem;
        margin-bottom: 1.6rem;
    }
}

/* ==================================================================== */
/* 강좌별검색(목록 / 상세) 전용 스타일                                    */
/*                                                                      */
/* 검색 상자는 진흥원프로그램 목록의 .pgm-search / .pgm-field 를,         */
/* 좁은 화면 필터 시트는 공간현황의 .space-filter-modal 을,               */
/* 상세는 결제내역 상세의 .payment-detail-layout 을 그대로 쓴다.          */
/* 여기서 새로 두는 것은 목록의 강좌 카드와, 상세에서 이 화면에만 있는     */
/* 몇 가지 손질뿐이라 .course- 접두사로만 덧붙였다                        */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 목록 - 강좌 카드                                                     */
/* ------------------------------------------------------------------ */
.course-card-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.2rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}
.course-card {
    display: flex;
    flex-direction: column;
    /* 링크를 카드 전체로 넓히기 위한 기준점 */
    position: relative;
    padding: 2.4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
    background-color: #FFFFFF;
}
/* 시안에서 가운데 카드가 선택된 상태로 표시돼 있어 그 모양을 남겨둠 */
.course-card.is-active,
.course-card:hover {
    border-color: #008F55;
    box-shadow: 0 0 0 0.1rem #008F55;
}
/* 카드 안 링크가 초점을 받으면 카드 전체를 강조한다.
   테두리와 모서리 둥글기를 .course-card 가 갖고 있어 링크에 걸면
   아무것도 보이지 않는다 */
.course-card:focus-within {
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
    outline-offset: 0;
    box-shadow: var(--krds-box-shadow-outline);
    transition: outline 0s, box-shadow 0s !important;
}
.course-card-link {
    display: block;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}
/* 초점 표시는 위 .course-card:focus-within 이 카드 바깥쪽에 한 번만
   그린다. 링크 자체에도 테두리가 생기면 네모가 두 겹으로 보이므로 끈다.
   (초점이 어디 있는지는 바깥 테두리로 이미 알 수 있다) */
.course-card-link:focus,
.course-card-link:focus-visible {
    outline: 0;
    box-shadow: none;
}
/* 누를 수 있는 곳을 카드 전체로 넓힌다. 링크가 감싸지 않는 여백이나
   진행상태 표시를 눌러도 상세로 넘어간다.
   진행상태는 누를 수 있는 요소가 아니라서 이 덮개에 가려도 문제없다 */
.course-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
/* 카드를 눌렀을 때(=링크에 초점) 어디를 눌러 넘어가는지 알 수 있게
   제목에 밑줄을 둔다. 마우스를 올렸을 때도 같다 */
.course-card:hover .course-card-tit,
.course-card:focus-within .course-card-tit {
    text-decoration: underline;
}

/* 교육분야. 흰 글자 대비 14.3:1 */
.course-card-badge {
    display: inline-flex;
    align-items: center;
    height: 3.1rem;
    padding: 0 1.2rem;
    border-radius: 50rem;
    background-color: #051F48;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 600;
}
/* 제목은 두 줄까지만 보이고 넘치면 말줄임 */
.course-card-tit {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 1rem 0 2rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
}
.course-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 1.7rem;
    line-height: 1.5;
}
.course-card-meta-row {
    display: flex;
    gap: 1.6rem;
}
.course-card-meta-tit {
    flex: 0 0 6rem;
    color: #464C53;
}
.course-card-meta-val {
    flex: 1 1 auto;
    min-width: 0;
    color: #1E2124;
    font-weight: 500;
}
/* 흰 바탕에서 #008F55 는 4.6:1. 굵은 글씨 기준을 넘긴다 */
.course-card-meta-val.is-accent {
    color: #008F55;
    font-weight: 700;
}

/* 진행 상태. 눌러서 하는 일이 없는 '지금 상태' 표시라 단추가 아니다.
   색만으로 뜻을 전하지 않도록 글자를 그대로 두고, 테두리 모양으로도
   접수중/접수완료가 구분되게 한다.
   접수중 #00733D on #E6F4EE 5.27:1, 접수완료 #464C53 on #EFF1F3 7.8:1 */
.course-card-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.8rem;
    margin: 2rem 0 0;
    border-radius: 0.8rem;
    font-size: 1.7rem;
    font-weight: 500;
}
.course-card-state.is-open {
    border: 0.1rem solid #008F55;
    background-color: #E6F4EE;
    color: #008F55;
}
.course-card-state.is-closed {
    border: 0.1rem solid #CDD1D5;
    background-color: #CDD1D5;
    color: #6D7882;
}
/* 인원마감. 접수완료(회색)와 뜻이 달라 색을 따로 둔다.
   #B62C38 on #FCECEE 는 5.39:1. 색을 못 봐도 글자로 구분된다 */
.course-card-state.is-full {
    border: 0.1rem solid #DE3412;
    background-color: #FDEFEC;
    color: #BD2C0F;
}

/* 좁은 화면 검색 필터 시트의 칸 배치.
   예전에는 화면 이름을 하나씩 늘어놓았는데(.crs- .inst- .onl- ...), 화면을
   새로 만들 때마다 여기에 이름을 더해야 해서 빠뜨리면 칸이 시트 밖으로
   삐져나갔다. 그래서 시트 공통 클래스(.space-filter-modal)로 건다.
   다만 여백만은 .modal-conts 바로 아래 있는 목록에만 준다.
   평생교육정보망 계열은 .space-sheet-panel 로 한 겹 더 감싸 여백을 이미
   갖고 있어서, 같이 걸면 여백이 두 번 들어간다 */
.space-filter-modal .modal-conts > .pgm-sheet-fields {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}
/* 시트 안에서는 라벨을 칸 위로 올리고, 칸은 가로를 다 쓴다.
   테두리/높이는 검색 상자와 같은 .search-controls 규칙을 그대로 받고,
   거기서 준 16rem 고정 폭과 10rem 라벨 폭만 풀어 준다 */
.space-filter-modal .pgm-field {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
}
.space-filter-modal .filter-label {
    width: auto;
}
.space-filter-modal .search-controls .krds-form-select-sort {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* 상세 - 강의상세 일정 팝업                                             */
/* ------------------------------------------------------------------ */
/* 시안의 표는 목록표(.list-table)와 뼈대는 같지만 색이 다르다.
   머리글 줄과 왼쪽 '제목' 칸에 옅은 바탕을 깔고, 칸 사이에도 세로선을
   둔다. 머리글 아래 선은 검정이 아니라 다른 줄과 같은 옅은 회색이다 */
.crs-schedule-wrap .list-table.tbl.data thead th,
.onl-schedule-wrap .list-table.tbl.data thead th,
.ofc-schedule-wrap .list-table.tbl.data thead th,
.lh-schedule-wrap .list-table.tbl.data thead th {
    background-color: #EEF2F7;
    border-bottom: 0.1rem solid #CDD1D5;
}
/* 회차(1차/2차/3차) 칸. #F3F6F9 위 #1E2124 는 15.9:1 */
.crs-schedule-wrap .list-table.tbl.data tbody th,
.onl-schedule-wrap .list-table.tbl.data tbody th,
.ofc-schedule-wrap .list-table.tbl.data tbody th,
.lh-schedule-wrap .list-table.tbl.data tbody th {
    background-color: #F3F6F9;
    font-weight: 400;
}
/* 줄 사이와 칸 사이 선을 같은 색으로 맞춘다 */
.crs-schedule-wrap .list-table.tbl.data th,
.onl-schedule-wrap .list-table.tbl.data th,
.ofc-schedule-wrap .list-table.tbl.data th,
.lh-schedule-wrap .list-table.tbl.data th,
.crs-schedule-wrap .list-table.tbl.data td,
.onl-schedule-wrap .list-table.tbl.data td,
.ofc-schedule-wrap .list-table.tbl.data td,
.lh-schedule-wrap .list-table.tbl.data td {
    border-bottom: 0.1rem solid #CDD1D5;
}
.crs-schedule-wrap .list-table.tbl.data th:not(:last-child),
.onl-schedule-wrap .list-table.tbl.data th:not(:last-child),
.ofc-schedule-wrap .list-table.tbl.data th:not(:last-child),
.lh-schedule-wrap .list-table.tbl.data th:not(:last-child),
.crs-schedule-wrap .list-table.tbl.data td:not(:last-child),
.onl-schedule-wrap .list-table.tbl.data td:not(:last-child),
.ofc-schedule-wrap .list-table.tbl.data td:not(:last-child),
.lh-schedule-wrap .list-table.tbl.data td:not(:last-child) {
    border-right: 0.1rem solid #CDD1D5;
}
/* 내용 칸은 문장이라 가운데 정렬하면 읽기 어렵다 */
.crs-schedule-wrap .list-table.tbl.data td.col-desc,
.onl-schedule-wrap .list-table.tbl.data td.col-desc,
.ofc-schedule-wrap .list-table.tbl.data td.col-desc,
.lh-schedule-wrap .list-table.tbl.data td.col-desc {
    text-align: left;
    line-height: 1.6;
}

/* 눌러서 넘어갈 곳이 없는 표라 줄에 마우스를 올려도 반응하지 않게 한다.
   공용 목록표는 tr:hover 에 초록 바탕을 !important 로 걸어 두었으므로,
   같은 무게로 각 칸의 원래 바탕을 다시 지정해 되돌린다 */
.crs-schedule-wrap .list-table.tbl.data tr:hover td,
.onl-schedule-wrap .list-table.tbl.data tr:hover td,
.ofc-schedule-wrap .list-table.tbl.data tr:hover td,
.lh-schedule-wrap .list-table.tbl.data tr:hover td {
    background-color: transparent !important;
}
.crs-schedule-wrap .list-table.tbl.data tbody tr:hover th,
.onl-schedule-wrap .list-table.tbl.data tbody tr:hover th,
.ofc-schedule-wrap .list-table.tbl.data tbody tr:hover th,
.lh-schedule-wrap .list-table.tbl.data tbody tr:hover th {
    background-color: #F3F6F9 !important;
}
.crs-schedule-wrap .list-table.tbl.data thead tr:hover th,
.onl-schedule-wrap .list-table.tbl.data thead tr:hover th,
.ofc-schedule-wrap .list-table.tbl.data thead tr:hover th,
.lh-schedule-wrap .list-table.tbl.data thead tr:hover th {
    background-color: #EEF2F7 !important;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 1350px 이하 : 카드 2단                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 84.375em) {
    .course-card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 1023px 이하                                                 */
/* ------------------------------------------------------------------ */
@media (max-width: 1023px) {
    /* 카드가 제목 바로 아래로 내려오면 과정분류 뱃지가 제목 옆에 이미
       보이므로 카드 안 뱃지는 생략(같은 말이 두 번 읽히지 않게 함) */
    .course-view .payment-side-head .krds-badge {
        display: none;
    }

    /* 한 단 배치로 바뀌면 영역 사이 간격이 grid 의 row-gap(2.4rem) 과 각
       영역의 margin-bottom 을 더한 값이 된다. 그대로 두면 소개 상자 아래는
       3.4rem, 상세설명 아래는 6.4rem 이 되어 들쭉날쭉하다.
       넓은 화면과 같은 4rem 이 되도록 모자란 1.6rem 만 margin 으로 준다 */
    .course-view .payment-detail-summary-box,
    .course-view .payment-detail-section {
        margin-bottom: 1.6rem;
    }
}

/* ------------------------------------------------------------------ */
/* 반응형 - 767px 이하 : 카드 1단                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .course-card-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 3.2rem;
    }
    /* ---------------------------------------------------------- */
    /* 강의상세 일정 팝업의 표는 좁은 화면에서도 표 모양을 유지한다.  */
    /* 회차 - 내용 - 교육일시가 나란히 보여야 일정으로 읽히기 때문에, */
    /* 공용 목록표의 '표 -> 카드' 전환을 이 표에서만 되돌린다.        */
    /* 대신 표가 화면보다 넓어지므로 가로로 밀어 본다               */
    /* ---------------------------------------------------------- */
    .crs-schedule-wrap,
    .onl-schedule-wrap,
    .ofc-schedule-wrap,
    .lh-schedule-wrap {
        overflow-x: auto;
    }
    .crs-schedule-wrap .list-table.tbl.data,
    .onl-schedule-wrap .list-table.tbl.data,
    .ofc-schedule-wrap .list-table.tbl.data,
    .lh-schedule-wrap .list-table.tbl.data {
        display: table;
        width: 100%;
        /* 세 칸이 다 읽히는 최소 폭. 이보다 좁아지면 가로로 민다 */
        min-width: 58rem;
    }
    .crs-schedule-wrap .list-table.tbl.data thead,
    .onl-schedule-wrap .list-table.tbl.data thead,
    .ofc-schedule-wrap .list-table.tbl.data thead,
    .lh-schedule-wrap .list-table.tbl.data thead {
        display: table-header-group;
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    .crs-schedule-wrap .list-table.tbl.data tbody,
    .onl-schedule-wrap .list-table.tbl.data tbody,
    .ofc-schedule-wrap .list-table.tbl.data tbody,
    .lh-schedule-wrap .list-table.tbl.data tbody {
        display: table-row-group;
    }
    .crs-schedule-wrap .list-table.tbl.data tr,
    .onl-schedule-wrap .list-table.tbl.data tr,
    .ofc-schedule-wrap .list-table.tbl.data tr,
    .lh-schedule-wrap .list-table.tbl.data tr {
        display: table-row;
        width: auto;
        padding-block: 0;
        border-bottom: 0;
    }
    .crs-schedule-wrap .list-table.tbl.data th,
    .onl-schedule-wrap .list-table.tbl.data th,
    .ofc-schedule-wrap .list-table.tbl.data th,
    .lh-schedule-wrap .list-table.tbl.data th,
    .crs-schedule-wrap .list-table.tbl.data td,
    .onl-schedule-wrap .list-table.tbl.data td,
    .ofc-schedule-wrap .list-table.tbl.data td,
    .lh-schedule-wrap .list-table.tbl.data td {
        display: table-cell;
        width: auto;
        padding: 1.6rem 1.2rem;
        font-size: 1.5rem;
        text-align: center;
    }
    /* 카드형에서 칸 앞에 붙던 항목 이름은 머리글이 다시 보이므로 뺀다 */
    .crs-schedule-wrap .list-table.tbl.data th::before,
    .onl-schedule-wrap .list-table.tbl.data th::before,
    .ofc-schedule-wrap .list-table.tbl.data th::before,
    .lh-schedule-wrap .list-table.tbl.data th::before,
    .crs-schedule-wrap .list-table.tbl.data td::before,
    .onl-schedule-wrap .list-table.tbl.data td::before,
    .ofc-schedule-wrap .list-table.tbl.data td::before,
    .lh-schedule-wrap .list-table.tbl.data td::before {
        content: none;
    }
    .crs-schedule-wrap .list-table.tbl.data td.col-desc,
    .onl-schedule-wrap .list-table.tbl.data td.col-desc,
    .ofc-schedule-wrap .list-table.tbl.data td.col-desc,
    .lh-schedule-wrap .list-table.tbl.data td.col-desc {
        text-align: left;
    }
    /* 바탕과 선은 넓은 화면과 같은 값으로 되살린다 */
    .crs-schedule-wrap .list-table.tbl.data thead th,
    .onl-schedule-wrap .list-table.tbl.data thead th,
    .ofc-schedule-wrap .list-table.tbl.data thead th,
    .lh-schedule-wrap .list-table.tbl.data thead th {
        background-color: #EEF2F7;
    }
    .crs-schedule-wrap .list-table.tbl.data tbody th,
    .onl-schedule-wrap .list-table.tbl.data tbody th,
    .ofc-schedule-wrap .list-table.tbl.data tbody th,
    .lh-schedule-wrap .list-table.tbl.data tbody th {
        background-color: #F3F6F9;
    }
    .crs-schedule-wrap .list-table.tbl.data th,
    .onl-schedule-wrap .list-table.tbl.data th,
    .ofc-schedule-wrap .list-table.tbl.data th,
    .lh-schedule-wrap .list-table.tbl.data th,
    .crs-schedule-wrap .list-table.tbl.data td,
    .onl-schedule-wrap .list-table.tbl.data td,
    .ofc-schedule-wrap .list-table.tbl.data td,
    .lh-schedule-wrap .list-table.tbl.data td {
        border-bottom: 0.1rem solid #CDD1D5;
    }
    .crs-schedule-wrap .list-table.tbl.data th:not(:last-child),
    .onl-schedule-wrap .list-table.tbl.data th:not(:last-child),
    .ofc-schedule-wrap .list-table.tbl.data th:not(:last-child),
    .lh-schedule-wrap .list-table.tbl.data th:not(:last-child),
    .crs-schedule-wrap .list-table.tbl.data td:not(:last-child),
    .onl-schedule-wrap .list-table.tbl.data td:not(:last-child),
    .ofc-schedule-wrap .list-table.tbl.data td:not(:last-child),
    .lh-schedule-wrap .list-table.tbl.data td:not(:last-child) {
        border-right: 0.1rem solid #CDD1D5;
    }
}

/* ------------------------------------------------------------------ */
/* 온라인강좌                                                           */
/* 강좌별검색과 같은 카드/검색 컴포넌트를 쓰고, 이 화면에만 있는          */
/* 썸네일과 뱃지 두 개, 상세설명 안 작은 제목만 덧붙인다                  */
/* ------------------------------------------------------------------ */

/* 썸네일. 시안대로 카드 안쪽 여백 안에 들어가고 네 모서리가 둥글다.
   파일이 늦게 오면 빈 자리가 흔들리므로 비율과 바탕색을 미리 잡아 둔다 */
.course-card-thumb {
    display: block;
    margin: 0 0 1.6rem;
    aspect-ratio: 16 / 9;
    border-radius: 0.8rem;
    overflow: hidden;
    background-color: #E4E7EA;
}
.course-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 분류 + 교육분야, 뱃지 두 개가 나란히. 좁아지면 다음 줄로 내린다 */
.course-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* 분류 칩 줄 아래에 구분선. 다른 칩 검색 상자(.filter-row - 다모아 강좌 목록 등)와
   같은 선·간격으로, 칩 고르기와 아래 조건 칸을 나눠 보이게 한다.
   아래 칸과의 간격은 검색 상자 줄 간격(2.4rem)이 맡는다 */
.onl-search .onl-field-cat {
    padding-bottom: 2.4rem;
    border-bottom: 0.1rem solid #D9D9D9;
}
/* 분류 칩 줄은 라벨을 왼쪽에 두고 칩이 남는 폭을 채운다 */
.onl-field-cat .filter-chips {
    flex: 1 1 auto;
    min-width: 0;
}

/* 상세설명 상자 안의 작은 제목(학습목표 / 차시목록 / 제작 및 배포) */
.onl-desc-tit {
    margin: 2.4rem 0 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.onl-desc-tit:first-child {
    margin-top: 0;
}

@media (max-width: 767px) {
    /* 좁은 화면에서는 .pgm-field 가 세로 배치로 바뀌어 라벨이 칩 위로
       올라가는데, 분류는 시안대로 라벨을 칩 왼쪽에 그대로 둔다.
       칩은 남는 폭을 채우고 넘치면 다음 줄로 흐른다 */
    .onl-field-cat {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.2rem;
    }
    .onl-field-cat .filter-label {
        flex: 0 0 auto;
        width: auto;
        /* 칩(4rem) 첫 줄 글자와 눈높이를 맞춘다 */
        padding-top: 0.9rem;
    }
    .onl-field-cat .filter-chips {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ------------------------------------------------------------------ */
/* 공직자강좌 - 상세설명 안의 정의형 목록                                */
/* 교육명 / 교육일정 / 교육장소 처럼 항목과 값이 짝을 이루는 줄이라       */
/* 글머리표 대신 <dl> 로 두고 항목 이름을 왼쪽에 고정폭으로 세운다        */
/* ------------------------------------------------------------------ */
.ofc-desc-lead {
    margin: 0 0 2rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.ofc-desc-list {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #1E2124;
}
.ofc-desc-list > div {
    display: flex;
    gap: 1.6rem;
}
.ofc-desc-list > div + div {
    margin-top: 0.4rem;
}
.ofc-desc-list dt {
    flex: 0 0 8rem;
    color: #464C53;
}
.ofc-desc-list dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    word-break: keep-all;
}
/* ※ 로 시작하는 덧붙임 안내. 값 바로 아래 줄에 따로 세운다.
   색은 다른 화면의 ※ 안내(.hd-note / .ys-caution / .yard-promise-note)와
   같은 #D63D4A 로 맞췄다. 흰 바탕에서 4.54:1 이고, 색을 못 봐도 뜻이
   통하도록 ※ 기호를 글에 함께 둔다 */
.ofc-desc-note {
    display: block;
    margin-top: 0.4rem;
    color: #D63D4A;
    font-size: 1.5rem;
    line-height: 1.6;
    word-break: keep-all;
}
.ofc-desc-contact {
    margin: 2.4rem 0 0;
    font-size: 1.7rem;
    color: #1E2124;
}

@media (max-width: 767px) {
    /* 좁은 화면에서는 항목 이름을 값 위로 올린다 */
    .ofc-desc-list > div {
        flex-direction: column;
        gap: 0.2rem;
    }
    .ofc-desc-list dt {
        flex: 0 0 auto;
        font-weight: 700;
    }
    .ofc-desc-list > div + div {
        margin-top: 1.2rem;
    }
}

/* ==================================================================== */
/* 강의홈(마이페이지 > 나의 수강내역 > 강좌) 전용 스타일                  */
/*                                                                      */
/* 머리말은 공지사항 상세의 .detail-head + 결제내역 상세의               */
/* .payment-detail-table, 탭은 디딤돌장학사업의 .le-tab-wrap,            */
/* 목록표는 공용 .list-table 을 그대로 쓴다.                             */
/* 여기서 새로 두는 것은 강좌개요 카드와 출석/제출 상태 표시뿐이라        */
/* .lh- 접두사로만 덧붙였다                                              */
/* ==================================================================== */

.lh-course-head {
    margin-bottom: 2.4rem;
}
.lh-course-meta {
    margin-bottom: 4rem;
}
/* 탭 줄 바로 아래 내용(강좌개요·강의계획 등, Ajax로 바뀌는 칸)이 탭에 붙어 있었다.
   강사·매니저 강의홈의 탭(.course_tabArea)과 같은 4rem 을 띄운다.
   강의홈·온라인 강의홈(lctreHome.jsp, lctrOnlineInfo.jsp) 모두 이 구조다 */
.lh-tab-wrap + #ajaxContent {
    margin-top: 4rem;
}

/* --- 강좌개요 카드 ---------------------------------------------------- */
.lh-outline-card {
    padding: 2.4rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1rem;
    background-color: #FFFFFF;
}
.lh-outline-card + .lh-outline-card {
    margin-top: 2.4rem;
}
.lh-outline-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 0 0 1.6rem;
}
/* 과정분류. 옅은 남색 바탕에 진한 남색 글자 (14.3:1) */
.lh-badge {
    display: inline-flex;
    align-items: center;
    height: 3.2rem;
    padding: 0 1.2rem;
    border-radius: 50rem;
    background-color: #EBF0F9;
    color: #002770;
    font-size: 1.5rem;
    font-weight: 600;
}
.lh-outline-tit {
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.lh-outline-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: 0 0 1.6rem;
    font-size: 1.7rem;
}
.lh-outline-field-tit {
    font-weight: 700;
    color: #1E2124;
}
/* 값은 위 정보표의 교육분야와 같은 초록으로 맞춘다 */
.lh-outline-field-val {
    font-weight: 600;
    color: #008F55;
}
/* 카드 안에서는 소개 상자가 마지막 요소라 아래 여백을 없앤다 */
.lh-outline-card .payment-detail-summary-box {
    margin-bottom: 0;
}.lh-table-wrap .list-table.tbl.data th.lh-col-name,
.lh-table-wrap .list-table.tbl.data td.lh-col-name {
    text-align: left;
}

/* --- 출석 / 제출 상태 -------------------------------------------------- */
/* 색만으로 뜻을 전하지 않도록 글자를 그대로 둔다.
   출석 #00733D on #E6F4EE 5.27:1, 수업 전 #464C53 on #EFF1F3 7.8:1 */
.lh-att {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    height: 3.2rem;
    padding: 0 1.2rem;
    border-radius: 100rem;
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}
/* 색은 강좌 목록의 진행상태 뱃지(.course-card-state)와 같은 값을 쓴다.
   같은 사이트 안에서 상태 표시가 화면마다 달라 보이지 않게 맞춘 것이다.
   색만으로 뜻이 전해지지 않도록 '출석 / 결석 / 수업 전' 글자를 그대로 둔다 */
.lh-att.is-present {
    border: 0.1rem solid #008F55;
    background-color: #E6F4EE;
    color: #008F55;
}
.lh-att.is-ready {
    border: 0.1rem solid #CDD1D5;
    background-color: #CDD1D5;
    color: #6D7882;
}
.lh-att.is-absent {
    border: 0.1rem solid #DE3412;
    background-color: #FDEFEC;
    color: #BD2C0F;
}

/* 눌러서 넘어갈 곳이 없는 표(출석 / 시험 / 설문 / 과제)라 줄에 마우스를
   올려도 반응하지 않게 한다. 공용 목록표는 tr:hover 에 초록 바탕을
   !important 로 걸어 두었으므로 같은 무게로 되돌린다.
   지금은 td 에만 걸려 행의 절반만 색이 들어가 더 어색했다 */
.lh-table-wrap .list-table.tbl.data tr:hover td,
.lh-table-wrap .list-table.tbl.data tr:hover th {
    background-color: transparent !important;
}

/* 글쓰기 단추는 목록 오른쪽 아래 */
.lh-board-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.6rem;
}

@media (max-width: 767px) {
    .lh-outline-card {
        padding: 2rem 1.6rem;
    }
    .lh-outline-card + .lh-outline-card {
        margin-top: 1.6rem;
    }/* 카드형으로 바뀐 표에서는 값이 라벨 옆에서 왼쪽 정렬된다 */
    .lh-table-wrap .list-table.tbl.data th.lh-col-name,
.lh-table-wrap .list-table.tbl.data td.lh-col-name {
        text-align: left;
    }
    .lh-board-actions .krds-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* 강의홈 - 탭 안 게시판 / 시험·설문                                     */
/* ------------------------------------------------------------------ */
/* 목록의 제목은 상세 화면으로 가는 링크다. 색·굵기·밑줄은 다른 게시판
   목록과 같은 공용 규칙(.list-table td.col-title a)을 그대로 받고,
   여기서는 한 줄 말줄임과 왼쪽 정렬만 맞춘다.
   예전에는 여기서 색을 검정으로 덮어써서 이 화면만 링크가 검게 나왔다 */
.lh-board .list-table.tbl.data td.col-title .lh-board-open {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    /* 위 목록표 제목과 같은 값 */
    color: #1E2124;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.5;
    text-decoration: none;
}
.lh-board .list-table.tbl.data td.col-title .lh-board-open:hover,
.lh-board .list-table.tbl.data td.col-title .lh-board-open:focus-visible {
    color: #008F55;
    text-decoration: underline solid;
    text-decoration-skip-ink: auto;
}
/* 상세 제목은 초점을 받기만 하고 눌리지는 않으므로 테두리만 보인다 */
.lh-board-view .detail-title:focus {
    outline: 0.2rem solid var(--krds-light-color-border-inverse);
    outline-offset: 0.4rem;
}
.lh-board-view .detail-title:focus:not(:focus-visible) {
    outline: 0;
}
/* 목록 단추 줄 위에는 본문과 나누는 가로선을 둔다(.detail-actions 기본값).
   본문 아래 여백만 조금 줄여 선이 글에 너무 붙지 않게 한다 */
.lh-board-view .detail-view {
    margin-bottom: 3.2rem;
}
.lh-file-size {
    margin-left: 0.4rem;
    color: #464C53;
    font-size: 1.5rem;
}
/* 값이 아직 없는 칸 */
.lh-empty,
.lh-dash {
    color: #6D7882;
}
/* 강의계획 표 : 머리행이 없으므로 표 위 굵은 선을 직접 둔다 */
.lh-plan-wrap {
    margin-top: 0;
}
.lh-plan-table.hd-table {
    border-top: 0.2rem solid #1E2124;
}
.lh-plan-table.hd-table tbody td {
    text-align: left;
}
/* 표 안에서 강조하는 값. 위쪽 강좌 정보표의 교육분야와 같은 초록 */
.lh-accent {
    color: #008F55;
    font-weight: 700;
}
/* 강좌상세설명 : 설명 글 아래 줄에 '강의상세 일정' 단추를 둔다.
   글자 옆에 붙어 있으면 어디까지가 설명인지 눈에 잘 들어오지 않는다 */
.lh-plan-desc {
    margin: 0;
}
.lh-plan-btn {
    display: inline-flex;
    margin-top: 1.2rem;
}

/* 탭 패널은 flex 라 좁은 화면에서 공용 규칙이 row-gap(2.4rem)을 붙인다.
   그러면 제목의 아래 여백(1.6rem) 위에 더해져 4rem 으로 벌어지고,
   넓은 화면(1.6rem)과 간격이 달라진다.
   이 화면의 갈래들은 안쪽 요소가 저마다 여백을 갖고 있으므로
   (표->쪽이동 4rem, 카드 사이 1.6rem 처럼) gap 을 끄고 그 여백만 쓴다 */
.lh-tab-wrap .tab-conts {
    row-gap: 0;
}

@media (max-width: 47.9375em) {
    /* 항목/값 두 칸짜리 표라 좁은 화면에서도 표 모양이 더 읽기 쉽다.
       공용 카드형 전환을 이 표에서만 되돌린다.
       공용 규칙이 .hd-table-wrap .hd-table.tbl.data ... 로 잡혀 있어
       같은 깊이로 써야 이긴다 */
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data {
        display: table;
        width: 100%;
    }
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data colgroup {
        display: table-column-group;
    }
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data tbody {
        display: table-row-group;
    }
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data tbody tr {
        display: table-row;
        padding-block: 0;
    }
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data tbody th,
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data tbody td {
        display: table-cell;
        width: auto;
        padding: 1.2rem 1rem;
        border-bottom: 0.1rem solid #E3E4E4;
        font-size: 1.5rem;
        vertical-align: middle;
    }
    /* 카드형에서 붙던 항목 이름은 항목 칸이 그대로 보이므로 뺀다 */
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data tbody th::before,
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data tbody td::before {
        content: none;
    }
    /* 항목 칸 바탕과 세로선은 넓은 화면과 같게 되살린다 */
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data tbody th {
        background-color: #F3F6F9;
        border-right: 0.1rem solid #CDD1D5;
        font-weight: 700;
        text-align: center;
        word-break: keep-all;
    }
    .hd-table-wrap .lh-plan-table.hd-table.tbl.data tbody td {
        text-align: left;
    }
}

/* 시험 / 설문 묶음 */
.lh-exam-block + .lh-exam-block {
    margin-top: 5.6rem;
}
.lh-exam-block .result-count {
    margin-bottom: 1.6rem;
}
/* 시안대로 날짜 부분만 초록으로 강조한다.
   시각 표기는 그대로 두어 색을 못 봐도 뜻이 달라지지 않는다 */
.lh-exam-date {
    color: #008F55;
    font-weight: 700;
    /* 좁은 칸에서 '04-' / '18' 로 쪼개지지 않게 한 덩어리로 둔다 */
    white-space: nowrap;
}
/* 응시 단추 : 표 안에 들어가는 작은 단추라 높이를 3.2rem 으로 맞춘다 */
.lh-exam-btn.krds-btn {
    height: 3.2rem;
    min-height: 3.2rem;
    padding-inline: 1.6rem;
}

/* 팝업 제목이 오른쪽 위 닫기 단추 아래로 파고들지 않게 자리를 비운다.
   공용 제목은 한 줄로 잘라(-webkit-line-clamp:1) 버리는데, 강의명이
   들어가는 제목은 그러면 무슨 강의인지 알 수 없어 두 줄까지 흐르게 한다 */
.lh-study-modal .modal-dialog .modal-header .modal-title,
.lh-quiz-modal .modal-dialog .modal-header .modal-title,
.lh-schedule-modal .modal-dialog .modal-header .modal-title {
    padding-right: 4rem;
    -webkit-line-clamp: 2;
}

/* 시험 / 설문 응시 팝업 */
.lh-quiz-notice {
    margin-bottom: 2.4rem;
}
/* 흰 바탕에서 #008F55 는 4.15:1 이지만 굵은 글씨로 쓰고,
   대괄호 표기로 색 없이도 강조가 드러나게 한다 */
.lh-quiz-em {
    color: #008F55;
    font-weight: 700;
}
.lh-quiz-item + .lh-quiz-item {
    margin-top: 3.2rem;
}
.lh-quiz-item fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}
/* 프로젝트 공용 스타일은 legend 를 화면에서 숨기도록(!important) 잡혀
   있다. 여기서는 질문 글이 눈에도 보여야 하므로 되살린다 */
legend.lh-quiz-q {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 1.6rem !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}
.lh-quiz-q {
    margin: 0 0 1.2rem;
    padding: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #1E2124;
    line-height: 1.5;
}
.lh-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.lh-quiz-textarea {
    max-width: none;
}
.lh-quiz-count {
    max-width: none;
}

@media (max-width: 767px) {
    .lh-exam-block + .lh-exam-block {
        margin-top: 4rem;
    }
    /* 공용 카드형 전환 규칙은 td 만 다룬다. 행의 머리칸(th)은 표 칸으로
       남아 항목 이름 없이 값만 나온다. td 와 같게 맞춰 준다 */
    .lh-table-wrap .list-table.tbl.data tbody th {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        width: 100%;
        /* 같은 카드 안의 td 와 여백·글자 크기를 맞춰야 항목 이름이
           같은 줄맞춤으로 보인다 */
        padding: 1.2rem 1.6rem;
        border: none;
        background-color: transparent;
        text-align: left;
        font-size: 1.7rem;
        font-weight: 400;
    }
    .lh-table-wrap .list-table.tbl.data tbody th::before {
        content: attr(data-label);
        flex: 0 0 9rem;
        font-weight: 700;
        color: #1E2124;
    }
    .lh-quiz-q {
        font-size: 1.7rem;
    }
    .lh-quiz-item + .lh-quiz-item {
        margin-top: 3.2rem;
    }
    /* 카드형으로 바뀐 표에서는 제목이 두 줄까지 흐른다 */
    .lh-board .list-table.tbl.data td.col-title .lh-board-open {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ------------------------------------------------------------------ */
/* 마이페이지 > 나의 수강내역 > 온라인강좌                                */
/* 수강신청 > 온라인강좌와 같은 카드를 쓰고, 남은 수강일만 덧붙인다        */
/* ------------------------------------------------------------------ */
/* 남은 수강일. 시안대로 붉은 글씨로 눈에 띄게 두되, 'D-29' 라는 글자가
   그대로 있어 색을 못 봐도 뜻이 전해진다.
   흰 바탕에서 #DE3412 는 4.56:1 */
.onc-dday {
    margin-left: 0.4rem;
    color: #DE3412;
    font-weight: 700;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 마이페이지 > 온라인강좌 > 강의홈 - 학습하기 탭                          */
/* 표·안내상자·팝업은 모두 공용 컴포넌트를 쓰고, 이 탭에만 있는            */
/* 제목 줄과 진도율, 영상 자리만 덧붙인다                                 */
/* ------------------------------------------------------------------ */
.lh-study-notice {
    margin-bottom: 3.2rem;
}
/* 흰 바탕에서 #008F55 는 4.15:1 이지만 굵은 글씨로 쓰고,
   앞뒤 문장이 그대로 있어 색을 못 봐도 뜻이 전해진다 */
.lh-study-em {
    color: #008F55;
    font-weight: 700;
}

/* 제목과 남은 기간을 한 줄에 */
.lh-study-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem 1.6rem;
    margin-bottom: 1.6rem;
}
.lh-study-tit {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.lh-study-dday {
    margin: 0;
    font-size: 1.7rem;
    color: #1E2124;
}
/* 남은 날수. 'D-DAY : 28일' 이라는 글자가 그대로 있어
   색을 못 봐도 뜻이 전해진다. 흰 바탕에서 #DE3412 는 4.56:1 */
.lh-study-dday strong {
    color: #DE3412;
    font-weight: 700;
}

/* 진도율. 다 들은 과목만 초록으로 짚어 준다 */
.lh-rate {
    font-weight: 700;
    color: #1E2124;
}
.lh-rate.is-done {
    color: #008F55;
}

/* 목록 안 학습하기 단추 */
.lh-study-btn.krds-btn {
    height: 3.2rem;
    min-height: 3.2rem;
    padding-inline: 1.6rem;
}

/* 영상 자리 : 실제 재생기가 붙기 전에도 자리를 잡아 둔다 */
.lh-study-player {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: 0.8rem;
    background-color: #1E2124;
}
/* #FFFFFF on #1E2124 는 15.9:1 */
.lh-study-player-txt {
    margin: 0;
    color: #FFFFFF;
    font-size: 1.7rem;
}
.lh-study-modal-notice {
    margin-top: 2.4rem;
}

/* 수강기간에서 남은 날수를 짚어 주는 글자 */
.lh-accent-warn {
    color: #DE3412;
    font-weight: 700;
}

@media (max-width: 767px) {
    .lh-study-notice {
        margin-bottom: 2.4rem;
    }
    /* 제목이 2rem 인데 줄 높이가 1.5 라, 글자 아래로 생기는 빈 자리가
       머리 줄의 아래 여백에 더해져 표와 필요 이상으로 벌어진다.
       줄 높이를 좁히고 아래 여백도 한 단계 줄인다 */
    .lh-study-tit {
        font-size: 2rem;
        line-height: 1.3;
    }
    .lh-study-head {
        margin-bottom: 0;
    }
    .lh-study-dday {
        font-size: 1.5rem;
    }
    .lh-study-player-txt {
        font-size: 1.5rem;
    }


}

/* ==================================================================== */
/* 마이페이지 > 나의 수강내역 > 시간표 (UI-NURI-01-005)                   */
/*                                                                      */
/* 검색 상자는 수강이력·진흥원프로그램 목록의 .filter-wrap /              */
/* .pgm-search-grid / .pgm-field / .search-controls / .search-actions 를 */
/* 그대로 쓴다. 다만 이 화면은 조건이 넷뿐이라 좁은 화면에서도 '필터'      */
/* 시트로 접지 않고 시안대로 라벨을 왼쪽에 둔 채 펼쳐 두므로, 그 부분만    */
/* .tt-search 안에서 되돌린다.                                           */
/*                                                                      */
/* 표의 색은 강의홈·강좌별검색의 일정 표(.lh-schedule-wrap 등)와 같은      */
/* 값을 쓴다. 머리글 #EEF2F7, 왼쪽 첫 칸 #F3F6F9, 선 #CDD1D5.             */
/*                                                                      */
/* 시간표는 표 마크업 하나만 두고 화면 폭에 따라 보이는 범위를 바꾼다.      */
/*   - 넓은 화면   : 요일 7칸을 모두 펼친 주간 표                         */
/*   - 표가 넘칠 때 : 같은 표를 가로로 밀어 본다                           */
/*   - 767px 이하  : 고른 요일 한 칸만 남겨 하루치 목록처럼 보인다          */
/* 요일을 감추는 일은 CSS 가 맡고, 어느 요일을 고를지는 화면 아래 스크립트가 */
/* .is-shown 으로 표시한다                                                */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 1) 검색 상자                                                         */
/* ------------------------------------------------------------------ */

/* 일자 칸. .calendar-input 의 자리잡기(달력 버튼을 오른쪽 끝에 절대 배치)
   와 .calendar-conts 의 position:relative 는 공용 규칙이 이미 갖고 있어,
   여기서는 다른 검색 칸과 폭·높이만 맞춘다 */
.tt-search .calendar-conts {
    flex: 1 1 auto;
    min-width: 0;
}
/* KRDS 달력 입력은 .input-group > li 안에 들어가는 것을 전제로 짜여 있다.
   li 가 폭을 다 쓰지 않으면 초점이 오갈 때 폭이 다시 계산된다 */
.tt-search .calendar-input .input-group > li {
    flex: 1 1 auto;
    width: 100%;
}
.tt-search .calendar-input .input-group > li .krds-input {
    width: 100%;
    max-width: 100%;
    height: 4.8rem;
    padding: 0 5.2rem 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    font-size: 1.7rem;
    color: #1E2124;
}
/* 달력 여는 버튼. 공용 .krds-btn.icon.medium 은 4rem 짜리 아이콘을 넣는데,
   시안의 달력 그림은 1.8rem 이고 입력칸 오른쪽에서 1.8rem 떨어져 있다.
   버튼이 4rem 이므로 가운데 정렬을 감안해 0.7rem 만 띄운다
   (0.7 + (4 - 1.8) / 2 = 1.8) */
.tt-search .calendar-input .form-btn-datepicker {
    right: 0.7rem;
}
.tt-search .calendar-input .form-btn-datepicker .svg-icon {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #33363D;
}

/* ------------------------------------------------------------------ */
/* 2) 주 이동 줄                                                        */
/* ------------------------------------------------------------------ */
.tt-week {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    align-items: center;
}
/* 초록 띠는 가운데 세 칸만이 아니라 줄 전체를 덮어야 하므로,
   배경만 그리는 칸을 하나 따로 깔아 둔다. 격자에서 맨 앞 항목이라
   뒤따르는 버튼·글자가 그 위에 그려진다 */
.tt-week::before {
    content: "";
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: stretch;
    background-color: #008F55;
    border-radius: 0.8rem 0.8rem 0 0;
}
.tt-week-range {
    grid-row: 1;
    grid-column: 3;
    margin: 0;
    padding: 1.8rem 3.2rem;
    color: #FFFFFF;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}
.tt-week-nav {
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* 흰 글자와의 대비를 지켜야 해서 띠를 밝히지 않고 어둡게 눌러 쓴다.
       #008F55 위 20% 검정 = #007244, 그 위 흰 아이콘은 6.0:1 */
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: var(--krds-transition-base, all 0.15s ease);
}
.tt-week-nav.prev {
    grid-column: 2;
}
.tt-week-nav.next {
    grid-column: 4;
}
/* 눌린 느낌이 나도록 한 단계 더 어둡게. #005D37 위 흰 아이콘은 7.9:1 */
.tt-week-nav:hover {
    background-color: rgba(0, 0, 0, 0.35);
}
.tt-week-nav:active {
    background-color: rgba(0, 0, 0, 0.45);
}
.tt-week-nav:focus-visible {
    outline: 0.2rem solid #FFFFFF;
    outline-offset: 0.2rem;
}
.tt-week-nav .svg-icon {
    width: 1.6rem;
    height: 1.6rem;
    background-color: #FFFFFF;
}

/* 요일 선택은 좁은 화면 전용. 넓은 화면에서는 표 머리글이 같은 정보를
   담고 있어 화면에서도 읽어 주는 프로그램에서도 빼 둔다 */
.tt-daynav {
    grid-row: 2;
    grid-column: 1 / -1;
    display: none;
}

/* ------------------------------------------------------------------ */
/* 3) 시간표                                                            */
/* ------------------------------------------------------------------ */

/* 표가 화면보다 넓을 때 가로로 밀어 본다. 밀 곳이 있을 때만 초점을 받도록
   tabindex 는 화면 아래 스크립트가 붙였다 뗀다 */
.tt-scroll {
    overflow-x: auto;
}
.tt-scroll:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}
/* 시안은 시간 칸까지 여덟 칸이 모두 같은 폭이라 <col> 에 폭을 주지 않고
   table-layout:fixed 에 맡긴다. 최소 폭은 '09:00 ~ 10:00' 이 한 줄로
   들어가는 크기(약 12.5rem)를 여덟 칸으로 잡은 값 */
.tt-table {
    width: 100%;
    min-width: 100rem;
    border-collapse: collapse;
    table-layout: fixed;
    background-color: #FFFFFF;
}
/* 날짜 제목은 하루치만 보이는 좁은 화면에서만 쓴다.
   공용 리셋이 <caption> 을 무조건 화면에서 감춰(1px 로 잘라낸다) 표 안에
   둘 수 없어, 마크업에서 표 바로 앞에 따로 세워 둔 요소다 */
.tt-day-title {
    display: none;
}
.tt-table th,
.tt-table td {
    padding: 1.2rem;
    border: 0.1rem solid #CDD1D5;
    font-size: 1.5rem;
    color: #1E2124;
    text-align: center;
    vertical-align: middle;
}
/* 표 양옆은 선을 두지 않는다. 시안처럼 칸과 칸 사이만 나뉘어 보인다 */
.tt-table tr > *:first-child {
    border-left: 0;
}
.tt-table tr > *:last-child {
    border-right: 0;
}
/* 머리글과 첫 줄이 맞닿는 자리는 양쪽이 각각 선을 갖고 있어 두 겹으로
   보였다. 머리글 쪽 선만 남겨 다른 줄과 같은 굵기로 맞춘다 */
.tt-table tbody tr:first-child > th,
.tt-table tbody tr:first-child > td {
    border-top: 0;
}
/* 머리글 위쪽은 초록 띠가 경계 노릇을 하므로 선을 두지 않는다 */
.tt-table thead th {
    height: 4.7rem;
    border-top: 0;
    background-color: #EEF2F7;
    font-size: 1.7rem;
    font-weight: 700;
}
.tt-table .tt-col-time {
    padding-inline: 0.4rem;
    background-color: #F3F6F9;
    color: #464C53;
    font-size: 1.7rem;
    font-weight: 600;
    white-space: nowrap;
}
/* 머리글 줄의 '시간' 칸은 왼쪽 칸 색이 아니라 머리글 색을 따른다 */
.tt-table thead .tt-col-time {
    background-color: #EEF2F7;
    color: #1E2124;
    font-size: 1.7rem;
    font-weight: 700;
}
.tt-table tbody .tt-col-time,
.tt-table .tt-cell {
    height: 5.5rem;
}

/* 요일 색. 색만으로 뜻을 전하지 않도록 머리글 글자에 요일 이름과
   '오늘'을 함께 넣어 두었다.
   흰 바탕 대비 - 일 #D63D4A 4.5:1, 토 #0B50D0 6.8:1.
   오늘은 시안의 #008F55 를 옅은 초록 바탕(#F3FAF7)에 얹으면 4.0:1 이라
   17px 굵은 글씨(큰 글자 아님) 기준 4.5:1 에 못 미친다. 그래서 눈으로는
   거의 같고 프로젝트에 이미 있는 #00733D 로 한 단계만 낮춰 5.8:1 을 만든다.
   점·바탕·초록 띠는 글자가 아니므로 시안의 #008F55 그대로 */
.tt-table .tt-col-day.is-sun {
    color: #D63D4A;
}
.tt-table .tt-col-day.is-sat {
    color: #0B50D0;
}
.tt-table .tt-col-day.is-today {
    color: #008F55;
}
/* 오늘 요일은 머리글부터 아래 끝까지 옅은 초록으로 세로줄을 따라간다 */
.tt-table .is-today {
    background-color: #F3FAF7;
}

/* 등록된 일정. 시안은 가운데가 아니라 왼쪽에 붙고, 점은 제목 왼쪽으로
   내밀어 둔다. 그래서 아래 두 줄은 점 폭(0.8rem)과 사이 간격(0.6rem)만큼
   들여써야 제목 글자와 첫머리가 맞는다 */
.tt-event {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.tt-event-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E2124;
}
.tt-dot {
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #008F55;
}
.tt-event-sub,
.tt-event-time {
    padding-left: 1.4rem;
    font-size: 1.4rem;
    color: #1E2124;
}
.tt-event-sub {
    margin-top: 0.8rem;
}
/* 같은 시간 칸에 일정이 둘 이상이면 앞 일정의 시간 줄과 다음 일정의 제목이
   붙어 한 덩어리처럼 보였다. 일정 안쪽 간격(0.8rem)보다 넉넉히 띄워
   일정끼리 나뉘어 보이게 한다 (수강생·강사·매니저 시간표 공통) */
.tt-event + .tt-event {
    margin-top: 2rem;
}

/* 빈 칸의 '등록된 일정이 없습니다.'
   넓은 화면에서는 칸마다 적으면 표가 읽기 어려워지므로 화면에서는 빼고
   읽어 주는 프로그램에만 남긴다. 좁은 화면에서는 시안대로 드러난다 */
.tt-none {
    position: absolute;
    width: 0.1rem;
    height: 0.1rem;
    margin: -0.1rem;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.tt-note {
    margin: 2.4rem 0 0;
    font-size: 1.7rem;
    color: #D63D4A;
}

/* ------------------------------------------------------------------ */
/* 4) 반응형 - 모바일(767px 이하)                                       */
/*    요일 하나만 남겨 하루치 목록처럼 보인다                             */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* --- 검색 상자 --- */
    /* 검색 상자와 시간표 사이에 '필터' 줄이 끼어들었다.
       5rem 을 검색 상자 아래에 그대로 두면 그 여백이 통째로 필터 줄 위에만
       쏠려서, 필터 줄이 시간표에 바짝 붙어 버린다(위 5rem / 아래 0).
       그래서 다른 시트 화면과 같은 값으로 나눠 준다.
       위 3.2rem(공용 .filter-wrap 값) / 아래 2.4rem */
    .tt-search {
        margin-bottom: 3.2rem;
    }
    .tt-mobile-bar {
        margin-bottom: 2.4rem;
    }
    /* 공용 격자의 줄 간격은 2.4rem 인데 시안은 1.6rem */
    .tt-search .pgm-search-grid {
        gap: 1.6rem;
    }
    /* 공용 .pgm-field 는 이 구간에서 라벨을 값 위로 올리는데, 이 화면은
       시안대로 라벨을 왼쪽에 둔 채로 한 줄에 하나씩 놓는다.
       가로 간격(라벨-값)은 1.2rem, 줄이 바뀔 때(강좌명-버튼)는 1rem */
    .tt-search .pgm-field {
        flex-direction: row;
        align-items: center;
        gap: 1rem 1.2rem;
    }
    .tt-search .filter-label {
        width: 8rem;
    }
    /* 공용 규칙은 강좌명 라벨을 display:none 으로 감춘다. 그러면 읽어 주는
       프로그램에서 입력 칸의 이름까지 사라질 수 있어, 자리만 빼고 이름은
       남기는 방식으로 바꾼다(칸 안 안내 문구가 이름을 대신하지 못한다) */
    .tt-search .pgm-field.is-search .filter-label {
        display: block;
        position: absolute;
        width: 0.1rem;
        height: 0.1rem;
        margin: -0.1rem;
        padding: 0;
        overflow: hidden;
        border: 0;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    /* 강좌명 줄은 입력 칸이 한 줄, 검색·초기화가 그다음 줄 */
    .tt-search .pgm-field.is-search {
        flex-wrap: wrap;
    }
    .tt-search .pgm-field.is-search .search-controls {
        flex: 1 1 100%;
    }
    /* 검색·초기화 사이도 같은 1rem. 공용값은 0.8rem 이라 위 칸 사이보다
       좁아 보였다 */
    .tt-search .search-actions {
        flex: 1 1 100%;
        gap: 1rem;
    }
    /* 이 구간에서 .search-controls 는 세로 배치로 바뀐다. 가로 기준으로
       준 flex 값을 그대로 두면 그 값이 높이로 읽혀 칸만 길쭉해진다 */
    .tt-search .calendar-conts {
        flex: 0 0 auto;
        width: 100%;
    }

    /* --- 주 이동 줄 : 날짜 띠 / 요일 / 이동 버튼 세 줄로 --- */
    .tt-week {
        grid-template-columns: 1fr auto auto;
    }
    .tt-week-range {
        grid-column: 1 / -1;
        padding: 1.4rem 1.6rem;
        font-size: 1.7rem;
    }
    /* 띠 밖으로 나오면 바탕이 흰색이라 눌러 쓰던 방식을 그대로 둘 수 없다.
       테두리 있는 흰 버튼으로 바꾸고 색도 같이 뒤집는다 */
    .tt-week-nav {
        grid-row: 3;
        margin-top: 1.6rem;
        border: 0.1rem solid #CDD1D5;
        background-color: #FFFFFF;
    }
    .tt-week-nav.prev {
        grid-column: 2;
    }
    .tt-week-nav.next {
        grid-column: 3;
        margin-left: 0.8rem;
    }
    .tt-week-nav:hover {
        border-color: #58616A;
        background-color: #F3F6F9;
    }
    .tt-week-nav:active {
        background-color: #EEF2F7;
    }
    .tt-week-nav:focus-visible {
        outline-color: #008F55;
    }
    .tt-week-nav .svg-icon {
        background-color: #1E2124;
    }

    /* --- 요일 선택 --- */
    /* 위쪽은 초록 띠가 경계 노릇을 하므로 선을 두지 않는다 */
    .tt-daynav {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        overflow: hidden;
        border: 0.1rem solid #CDD1D5;
        border-top: 0;
        border-radius: 0 0 0.8rem 0.8rem;
        background-color: #FFFFFF;
    }
    .tt-daynav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.6rem 0.2rem;
        border: 0;
        background-color: transparent;
        color: #1E2124;
        cursor: pointer;
    }
    /* 요일 사이 구분선. 고른 칸은 바탕이 한 덩어리로 보이도록 양옆 선을
       지우되, 색만 없애 칸 폭이 어긋나지 않게 한다 */
    .tt-daynav-btn + .tt-daynav-btn {
        border-left: 0.1rem solid #CDD1D5;
    }
    .tt-daynav-btn[aria-pressed="true"],
    .tt-daynav-btn[aria-pressed="true"] + .tt-daynav-btn {
        border-left-color: transparent;
    }
    .tt-daynav-name {
        font-size: 1.5rem;
        font-weight: 700;
    }
    .tt-daynav-num {
        font-size: 1.5rem;
        font-weight: 700;
    }
    .tt-daynav-btn.is-sun {
        color: #D63D4A;
    }
    .tt-daynav-btn.is-sat {
        color: #0B50D0;
    }
    /* 다른 요일을 골라 봐도 오늘이 어느 날인지는 남아 있어야 한다.
       읽어 주는 프로그램에는 버튼 이름에 '오늘'을 넣어 두었다 */
    .tt-daynav-btn.is-today {
        color: #008F55;
    }
    /* 고른 요일은 글자색과 함께 옅은 초록 바탕으로 표시한다.
       읽어 주는 프로그램에는 aria-pressed 로 전해진다 */
    .tt-daynav-btn[aria-pressed="true"] {
        background-color: #F3FAF7;
        color: #008F55;
    }
    .tt-daynav-btn:focus-visible {
        outline: 0.2rem solid #008F55;
        outline-offset: -0.2rem;
    }

    /* --- 시간표 : 고른 요일 한 칸만 --- */
    .tt-scroll {
        overflow-x: visible;
    }
    .tt-table {
        min-width: 0;
        /* 칸 하나가 사라지면 남은 칸이 폭을 나눠 가져야 한다 */
        table-layout: auto;
    }
    /* 요일 머리글 줄은 위 요일 선택이 대신한다 */
    .tt-table thead {
        display: none;
    }
    /* 보이는 칸이 표의 마지막 칸이 아닐 수도 있어(예: 수요일), 요일 칸의
       오른쪽 선은 모두 뺀다. 시간 칸과 나누는 선은 시간 칸이 갖고 있다 */
    .tt-table .tt-cell {
        display: none;
        border-right: 0;
    }
    .tt-table .tt-cell.is-shown {
        display: table-cell;
    }
    /* 좁은 화면에서는 요일이 하나뿐이라 오늘 표시 바탕은 뺀다 */
    .tt-table .tt-cell.is-today {
        background-color: #FFFFFF;
    }
    /* 표 위 날짜 제목. 넓은 화면에서는 초록 띠에 표가 바로 붙지만,
       좁은 화면에서는 요일 줄과 이동 버튼 아래에 이 줄이 따로 서므로
       위쪽을 띄운다. 아래 굵은 선이 표의 첫 줄 경계를 대신한다 */
    .tt-day-title {
        display: block;
        margin: 2.8rem 0 0;
        padding-bottom: 2rem;
        border-bottom: 0.2rem solid #1E2124;
        font-size: 1.7rem;
        font-weight: 700;
        color: #008F55;
    }
    .tt-none {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
        font-size: 1.4rem;
        color: #464C53;
    }
    /* 시안은 시간을 '09:00' / '~ 10:00' 두 줄로 끊어 칸을 좁게 쓴다.
       줄이 갈리는 자리는 마크업에서 '~' 와 끝 시각을 붙여(&nbsp;) 잡았다 */
    .tt-table .tt-col-time {
        width: 8rem;
        padding: 1.2rem 0.8rem;
        font-size: 1.5rem;
        /* 두 줄(30px) + 위아래 여백(24px) = 54px 로, 빈 줄 높이 5.5rem 과
           맞아떨어진다. 줄 간격을 늘리면 이 줄만 높아진다 */
        line-height: 1;
        white-space: normal;
    }
    .tt-table td {
        padding: 1.2rem 1.6rem;
        text-align: left;
    }

}

/* ------------------------------------------------------------------ */
/* 5) 인쇄                                                              */
/*    화면 폭과 상관없이 한 주를 모두 찍고, 누를 수 없는 것은 뺀다        */
/* ------------------------------------------------------------------ */
@media print {
    .tt-search,
    .tt-daynav,
    .tt-week-nav {
        display: none;
    }
    .tt-scroll {
        overflow: visible;
    }
    .tt-table {
        min-width: 0;
        table-layout: fixed;
    }
    .tt-table thead {
        display: table-header-group;
    }
    .tt-table .tt-cell {
        display: table-cell;
    }
    .tt-day-title {
        display: none;
    }
    .tt-week::before {
        background-color: transparent;
    }
    .tt-week-range {
        color: #1E2124;
    }
}

/* ==================================================================== */
/* 마이페이지 > 나의 수강내역 > 수강이력                                  */
/*                                                                      */
/* 안내 상자는 .info-box, 검색 상자는 .filter-wrap / .pgm-search-grid,   */
/* 목록 위 줄은 .result-head, 표는 .list-table, 쪽 이동은                */
/* .krds-pagination 을 그대로 쓴다. 이 화면에만 있는 것은 머리글의 두 줄  */
/* 표시, '이수여부' 칸, '증명서' 칸의 확인서 단추뿐이라 .hist- 접두사로    */
/* 덧붙였다                                                              */
/* ==================================================================== */

/* 머리글 '이수여부 / (학점인정)'. 칸 폭이 바뀌어도 늘 두 줄이 되도록
   줄바꿈 자리를 잡아 둔다. 굵기는 머리글 그대로 둔다 */
.hist-th-sub {
    display: block;
}

/* 이수여부 칸. 넓은 화면에서는 두 줄, 카드형으로 바뀌는 좁은 화면에서는
   라벨 옆에 한 줄로 붙는다.
   시안 색은 #008F55 인데 흰 바탕에서 4.2:1 이라 17px 굵은 글씨(큰 글자가
   아님) 기준 4.5:1 에 못 미친다. 눈으로는 거의 같고 프로젝트에 이미 있는
   #00733D 로 한 단계만 낮춰 6.0:1 을 만든다 */
.hist-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    color: #008F55;
}

/* 증명서 칸의 확인서 단추. 진흥원프로그램 목록의 상태 알약(.pgm-state)과
   같은 톤이지만 이쪽은 눌러서 여는 단추라 따로 둔다.
   시안은 연초록 바탕에 같은 초록 테두리를 두른 알약이다.
   테두리 #008F55 는 흰 바탕 4.2:1 로 요소 경계 기준(3:1)을 넘긴다.
   글자 #008F55 는 #E6F4EE 위 3.7:1 로 글자 기준(4.5:1)에는 못 미친다.
   이수여부 글자와 같은 색으로 맞춰 둔 것이라, 기준을 채우려면 두 곳
   (.hist-result / .hist-cert-btn)의 color 를 #00733D 로 바꾸면 된다 */
.hist-cert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.2rem;
    padding: 0 1rem;
    border: 0.1rem solid #008F55;
    border-radius: 0.8rem;
    background-color: #E6F4EE;
    color: #008F55;
    font-size: 1.5rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--krds-transition-base, all 0.15s ease);
}
.hist-cert-btn:hover {
    border-color: #00733D;
    background-color: #D5EBE0;
}
.hist-cert-btn:active {
    background-color: #C4E2D3;
}
.hist-cert-btn:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}

/* 줄 높이. 공용 목록표(.list-table)는 위아래 여백 1.9rem 에 줄 간격 1.5 로
   한 줄짜리 목록에 맞춰져 있는데, 이 화면은 학기와 이수여부가 두 줄이라
   그대로 두면 한 줄이 90px 이 된다. 시안은 63px 안팎이다.
   공지사항·자료실 등 다른 게시판이 같은 컴포넌트를 쓰므로 공용 값은 그대로
   두고, 이 화면 표를 감싼 .hist-table-wrap 안에서만 좁힌다 */
.hist-table-wrap .list-table.tbl.data thead th {
    padding: 0.8rem 1.2rem;
    line-height: 1.3;
}
.hist-table-wrap .list-table.tbl.data tbody th,
.hist-table-wrap .list-table.tbl.data tbody td {
    padding: 0.9rem 1.2rem;
    line-height: 1.3;
}

/* 강좌명은 문장이라 길어지면 줄이 바뀌어야 한다 */
.hist-table-wrap .list-table.tbl.data td.col-course {
    word-break: keep-all;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* 표는 .list-table 공용 카드형 전환이 그대로 걸리므로, 그때 어긋나는     */
/* 것만 되돌린다                                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* 위에서 좁혀 둔 줄 높이는 넓은 화면 표에만 필요하다. 카드형으로
       바뀌면 공용 값(위아래 0.6rem, 좌우 없음)으로 되돌린다 */
    .hist-table-wrap .list-table.tbl.data tbody th,
    .hist-table-wrap .list-table.tbl.data tbody td {
        padding: 0.6rem 0;
        line-height: 1.5;
    }
    /* 카드형에서는 칸이 [이름][값] 가로 배치라 이수여부도 한 줄로 둔다 */
    .hist-result {
        flex-direction: row;
        align-items: baseline;
        gap: 0.4rem;
    }
    /* 공용 규칙은 강좌명 라벨을 display:none 으로 감춘다. 그러면 읽어 주는
       프로그램에서 입력 칸의 이름까지 사라질 수 있어, 자리만 빼고 이름은
       남기는 방식으로 바꾼다(칸 안 안내 문구가 이름을 대신하지 못한다) */
    .hist-search .pgm-field.is-search .filter-label {
        display: block;
        position: absolute;
        width: 0.1rem;
        height: 0.1rem;
        margin: -0.1rem;
        padding: 0;
        overflow: hidden;
        border: 0;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ==================================================================== */
/* 마이페이지 > 나의 수강내역 > 나의 학위 (목록 / 신청)                   */
/*                                                                      */
/* 표는 명예학위제의 .hd-table, 신청 폼은 공간 이용신청의 .apply-form /   */
/* .form-group / .apply-tel-group / .krds-file-upload 를 그대로 쓴다.    */
/* 이 화면에만 있는 것은 구역 제목, '나의 학위'·'학위 취득현황' 줄,       */
/* 그리고 신청 폼의 몇 가지 손질뿐이라 .deg- 접두사로 덧붙였다            */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 1) 구역 제목                                                         */
/* ------------------------------------------------------------------ */
/* 시안의 제목 앞 표시는 세종연구원 심볼이다. 뜻을 담지 않는 장식이라
   글자로 읽히지 않게 배경으로 그린다 */
.deg-sec-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.deg-sec-tit::before {
    content: "";
    flex: 0 0 auto;
    width: 3rem;
    height: 2.1rem;
    background: url(../img/ci_symbol.png) no-repeat center / contain;
}
/* 구역과 구역 사이 */
.deg-my-list,
.deg-status-list,
.deg-apply .deg-sec-tit {
    margin-top: 0;
}
.deg-sec-tit + .hd-table-wrap {
    margin-top: 0;
}
.deg-my-list + .deg-sec-tit,
.hd-table-wrap + .deg-sec-tit,
.deg-status-list + .deg-sec-tit {
    margin-top: 6.2rem;
}

/* ------------------------------------------------------------------ */
/* 2) 학위 안내 표                                                      */
/* ------------------------------------------------------------------ */
/* 머리글의 '(학사)' 는 늘 아랫줄에 오도록 자리를 잡아 둔다 */
.deg-th-sub {
    display: block;
}
.deg-guide-wrap .hd-table .deg-col-center,
.deg-subject-wrap .hd-table .deg-col-center {
    text-align: center;
}
/* 이수시간 칸 안쪽 목록.
   항목 앞 표시는 공용 .hd-col-duty li::before 가 이미 그리는데, 그 값이
   안쪽 항목에도 그대로 걸려 바깥 항목과 똑같은 짧은 선이 붙었다.
   한 단계 아래라는 것이 보이도록 작은 점으로 바꾸고, 색도 한 톤 낮춘다.
   상자 자체는 공용 규칙이 만들어 두므로 모양만 덮어쓴다 */
.deg-sub-list {
    margin: 0.4rem 0 0;
}
.deg-sub-list li {
    padding-left: 1.2rem;
    color: #464C53;
}
.deg-sub-list li::before {
    top: 1.1rem;
    left: 0.2rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: #6D7882;
}
.deg-note {
    margin: 0.4rem 0 0;
    color: #464C53;
}
/* 시간(학점) 강조. 시안은 붉은색인데 흰 바탕 4.5:1 로 기준을 넘긴다 */
.hd-col-duty strong {
    color: #D63D4A;
    font-weight: 700;
}
/* 과목명은 문장이라 왼쪽 정렬 */
.deg-subject-wrap .hd-table .deg-col-name {
    text-align: left;
}

/* 칸 안 글자는 1.6rem.
   .hd-table 은 1.6rem 을 주고 있지만 KRDS 의
   .krds-table-wrap .tbl.data tbody th/td 규칙이 더 강해 그 값이 밀린다.
   명예학위제 등 .hd-table 을 쓰는 다른 화면은 그대로 두고, 이 두 표에서만
   같은 무게로 선택자를 올려 되돌린다 */
.deg-guide-wrap .hd-table.tbl.data tbody th,
.deg-guide-wrap .hd-table.tbl.data tbody td,
.deg-subject-wrap .hd-table.tbl.data tbody th,
.deg-subject-wrap .hd-table.tbl.data tbody td {
    font-size: 1.6rem;
}

/* ------------------------------------------------------------------ */
/* 3) 나의 학위 / 학위 취득현황 줄                                       */
/* ------------------------------------------------------------------ */
.deg-my-list,
.deg-status-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.deg-my-item,
.deg-status-item {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    min-height: 8rem;
    padding: 2.4rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1rem;
    background-color: #FFFFFF;
}
.deg-my-info,
.deg-status-info {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    /* 남는 자리를 밀어내어 오른쪽 요소가 끝에 붙게 한다 */
    flex: 1 1 auto;
    min-width: 0;
}
.deg-name {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
/* '현재학위' 표시. 옅은 남색 바탕 위 #002770 은 15.2:1 */
.deg-badge {
    display: inline-flex;
    align-items: center;
    height: 3.2rem;
    padding: 0 1.2rem;
    border-radius: 50rem;
    background-color: #EBF0F9;
    color: #002770;
    font-size: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
}
/* 학사·석사·박사. 흰 바탕 위 #002770 은 16.4:1 */
.deg-level {
    flex: 0 0 auto;
    color: #002770;
    font-size: 1.5rem;
    font-weight: 600;
}

/* 학위증 출력 단추 */
.deg-print-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.2rem;
    padding: 0 1rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    color: #1E2124;
    font-size: 1.5rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--krds-transition-base, all 0.15s ease);
}
.deg-print-btn:hover {
    border-color: #58616A;
    background-color: #F3F6F9;
}
.deg-print-btn:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}

/* 이수시간 / 필요시간 */
.deg-hours {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}
.deg-hours-label {
    font-size: 1.7rem;
    color: #464C53;
}
.deg-hours-val {
    font-size: 1.7rem;
    font-weight: 600;
    color: #1E2124;
}
.deg-hours-val strong {
    color: #008F55;
    font-weight: 700;
}

/* 신청 상태.
   '신청가능'만 신청 화면으로 넘어가는 링크이고 나머지 둘은 글자다.
   색만으로 뜻을 전하지 않도록 상태 이름을 그대로 적어 둔다.
   대비 - 취득완료 #464C53 on #CDD1D5 5.5:1, 신청불가 #FFFFFF on #D63D4A
   4.5:1, 신청가능 #00733D on #E6F4EE 5.3:1 */
.deg-state {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.2rem;
    height: 3.2rem;
    padding: 0 1rem;
    border: 0.1rem solid transparent;
    border-radius: 0.8rem;
    font-size: 1.5rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
.deg-state.is-done {
    background-color: #CDD1D5;
    color: #6D7882;
}
.deg-state.is-open {
    border-color: #008F55;
    background-color: #E6F4EE;
    color: #008F55;
    cursor: pointer;
}
.deg-state.is-open:hover {
    border-color: #00733D;
    background-color: #D5EBE0;
}
.deg-state.is-open:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}
.deg-state.is-close {
    background-color: #D63D4A;
    color: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* 4) 학위 신청 화면                                                    */
/* ------------------------------------------------------------------ */
/* 시안은 입력 칸 전체를 테두리 상자로 감싼다 */
.deg-apply-box {
    position: relative;
    padding: 4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 1rem;
}
/* 상자 오른쪽 위의 총 이수시간 */
.deg-total-hours {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: 0 0 2.4rem;
    font-size: 1.7rem;
    color: #1E2124;
}
.deg-total-hours::before {
    content: "";
    background: url(../img/component/icon/ico_document.png) no-repeat;
    width: 1.5rem;
    height: 1.667rem;
    background-size: contain;
}
.deg-total-hours strong {
    color: #008F55;
}

/* 주소. 공간예약 제공자 등록 신청과 같은 .apply-addr-group /
   .apply-addr-line 을 쓴다.
   시안의 우편번호 칸은 36rem 인데, 그 값은 원래 그 자리에 '우편번호 검색'
   단추가 들어갔을 때 남는 폭(52.7 - 1.6 - 단추)이다. 이 화면은 회원정보에서
   가져와 보여 주기만 하므로 단추가 없고, 그대로 두면 다섯 자리 숫자 하나에
   칸이 지나치게 길어진다. 담기는 값에 맞춰 18rem 으로 줄인다.
   나중에 우편번호 검색 단추를 넣게 되면 이 규칙을 지우면 다른 화면과 같은
   폭(36rem)으로 돌아간다 */
/* 공용 .apply-fieldset input[type="text"].krds-input 이 width:100% 를 주는데
   속성 선택자가 클래스 한 개 몫이라 무게가 더 높다. 같은 모양으로 맞춰야
   폭이 먹는다. 기본주소·상세주소는 공용 값(52.7rem)이 그대로 맞다 */
.deg-apply .apply-addr-group input[type="text"].krds-input {
    width: 35.672rem;
    max-width: 35.672rem;
}

/* 연락처 앞자리 선택.
   <select> 에는 readonly 를 쓸 수 없어 값을 고치지 못하게 하려면 disabled
   뿐인데, 공용 스타일의 disabled 는 바탕이 비고 화살표까지 흐려져 '쓸 수
   없는 칸'으로 보인다. 이 화면의 연락처는 회원정보에서 가져와 그대로 보여
   주는 값이라, common.css 의 .krds-input[readonly] 와 같은 값으로 맞추고
   화살표도 평소 모양으로 되돌린다. #E2E4E7 위 #1E2124 는 13.0:1 */
.deg-apply .apply-tel-group .krds-form-select[disabled] {
    background-color: #E2E4E7 !important;
    background-image: url(../img/component/icon/ico_angle.svg);
    border-color: #B1B8BE;
    color: #1E2124;
    opacity: 1;
    cursor: default;
}

/* 첨부파일.
   공용 .krds-file-upload 는 점선 테두리인데 시안은 옅은 실선에 모서리가
   둥근 상자다. 공간예약 제공자 등록 신청 등 다른 화면은 그대로 두려고
   이 화면 안에서만 바꾼다 */
.deg-apply .krds-file-upload .file-upload {
    border: 0.1rem solid #E3E4E8;
    border-radius: 0.8rem;
    background-color: #F5F6FA;
    text-align: center;
}
.deg-apply .krds-file-upload .file-list .upload-list li {
    margin-top: 1.2rem;
    padding: 1.2rem 1.6rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 0.8rem;
}
.deg-apply .krds-file-upload .file-list .file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    width: 100%;
}
.deg-apply .krds-file-upload .file-list .file-name {
    min-width: 0;
    font-size: 1.6rem;
    color: #1E2124;
    word-break: break-all;
}

/* 첨부파일 묶음은 마지막 칸이라 아래 여백을 지운다 */
.deg-apply-box .deg-file {
    margin-bottom: 0;
}

.deg-apply .apply-form-actions {
    margin-top: 4rem;
}

/* ------------------------------------------------------------------ */
/* 5) 반응형 - 모바일(767px 이하)                                       */
/*    표는 .hd-table 공용 카드형 전환이 그대로 걸린다                    */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
   


    /* 줄 하나에 다 담기지 않으므로 위아래로 쌓고, 단추는 가로를 다 쓴다 */
    .deg-my-item,
    .deg-status-item {
        flex-direction: column;
        align-items: stretch;
        gap: 1.6rem;
        min-height: 0;
    }
    .deg-hours {
        justify-content: space-between;
    }
    .deg-print-btn,
    .deg-state {
        width: 100%;
        height: 3.2rem;
    }
    .deg-apply-box {
        padding: 2rem 1.6rem;
    }
    .deg-total-hours {
        margin-bottom: 1.6rem;
    }

}

/* ------------------------------------------------------------------ */
/* 항목-값 표는 좁은 화면에서도 표 그대로 둔다                             */
/* 나의 학위(학위 안내·이수과목), 수강취소및환불 상세(강좌개요·강좌개설),  */
/* 강사 정보 관리(최종학력·경력)                                          */
/*                                                                      */
/* 공용 .hd-table 은 767px 이하에서 칸마다 이름을 붙인 카드로 바뀌는데,   */
/* 이 표들은 칸 안에 목록이 들어 있거나 글이 길어 카드로 접으면 짜임이    */
/* 무너진다. 카드 전환을 되돌리고 대신 가로로 밀어 보게 한다.             */
/* 되돌릴 것이 여러 곳에 흩어져 있어(모양 / 세로선·바탕 / 최소 폭) 여기에 */
/* 모아 두었다. 공용 규칙과 무게가 같은 선택자가 있어 몇 군데는            */
/* .hd-table-wrap 까지 붙여 한 단계 올렸다.                              */
/* 명예학위제 등 .hd-table 을 쓰는 다른 화면은 그대로 카드로 바뀐다        */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* --- 표 모양 되돌리기 --- */
    .deg-guide-wrap .hd-table.tbl.data,
    .deg-subject-wrap .hd-table.tbl.data,
    .rfd-view-wrap .hd-table.tbl.data,
    .tci-table-wrap .hd-table.tbl.data {
        display: table;
        table-layout: fixed;
    }
    .deg-guide-wrap .hd-table.tbl.data colgroup,
    .deg-subject-wrap .hd-table.tbl.data colgroup,
    .rfd-view-wrap .hd-table.tbl.data colgroup,
    .tci-table-wrap .hd-table.tbl.data colgroup {
        display: table-column-group;
    }
    .deg-guide-wrap .hd-table.tbl.data thead,
    .deg-subject-wrap .hd-table.tbl.data thead,
    .rfd-view-wrap .hd-table.tbl.data thead,
    .tci-table-wrap .hd-table.tbl.data thead {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    .deg-guide-wrap .hd-table.tbl.data tbody,
    .deg-subject-wrap .hd-table.tbl.data tbody,
    .rfd-view-wrap .hd-table.tbl.data tbody,
    .tci-table-wrap .hd-table.tbl.data tbody {
        display: table-row-group;
        width: auto;
    }
    .deg-guide-wrap .hd-table.tbl.data tbody tr,
    .deg-subject-wrap .hd-table.tbl.data tbody tr,
    .rfd-view-wrap .hd-table.tbl.data tbody tr,
    .tci-table-wrap .hd-table.tbl.data tbody tr {
        display: table-row;
        width: auto;
        padding-block: 0;
    }
    .deg-guide-wrap .hd-table.tbl.data tbody th,
    .deg-subject-wrap .hd-table.tbl.data tbody th,
    .rfd-view-wrap .hd-table.tbl.data tbody th,
    .tci-table-wrap .hd-table.tbl.data tbody th,
    .deg-guide-wrap .hd-table.tbl.data tbody td,
    .deg-subject-wrap .hd-table.tbl.data tbody td,
    .rfd-view-wrap .hd-table.tbl.data tbody td,
    .tci-table-wrap .hd-table.tbl.data tbody td {
        display: table-cell;
        width: auto;
        max-width: none;
        padding: 1.6rem 1.2rem;
        border-bottom: 0.1rem solid #E3E4E4;
        text-align: left;
        vertical-align: middle;
    }
    /* 카드형에서 칸 앞에 붙던 이름(data-label)은 머리글이나 항목 칸이
       대신하므로 뺀다 */
    .deg-guide-wrap .hd-table.tbl.data tbody th::before,
    .deg-subject-wrap .hd-table.tbl.data tbody th::before,
    .rfd-view-wrap .hd-table.tbl.data tbody th::before,
    .tci-table-wrap .hd-table.tbl.data tbody th::before,
    .deg-guide-wrap .hd-table.tbl.data tbody td::before,
    .deg-subject-wrap .hd-table.tbl.data tbody td::before,
    .rfd-view-wrap .hd-table.tbl.data tbody td::before,
    .tci-table-wrap .hd-table.tbl.data tbody td::before {
        content: none;
    }
    .deg-guide-wrap .hd-table.tbl.data tbody th,
    .deg-subject-wrap .hd-table.tbl.data tbody th,
    .rfd-view-wrap .hd-table.tbl.data tbody th,
    .tci-table-wrap .hd-table.tbl.data tbody th,
    .deg-guide-wrap .hd-table.tbl.data .deg-col-center,
    .deg-subject-wrap .hd-table.tbl.data .deg-col-center,
    .rfd-view-wrap .hd-table.tbl.data .deg-col-center,
    .tci-table-wrap .hd-table.tbl.data .deg-col-center {
        text-align: center;
    }
    .deg-subject-wrap .hd-table.tbl.data .deg-col-name {
        text-align: left;
    }

    /* --- 세로선과 첫 칸 바탕 되돌리기 --- */
    /* 카드형에서는 칸이 위아래로 쌓여 세로선과 바탕을 지우는데,
       표를 그대로 두는 이 화면들에서는 넓은 화면과 같아야 한다 */
    .deg-guide-wrap .hd-table.tbl.data thead th,
    .deg-subject-wrap .hd-table.tbl.data thead th,
    .rfd-view-wrap .hd-table.tbl.data thead th,
    .tci-table-wrap .hd-table.tbl.data thead th,
    .deg-guide-wrap .hd-table.tbl.data tbody th,
    .deg-subject-wrap .hd-table.tbl.data tbody th,
    .rfd-view-wrap .hd-table.tbl.data tbody th,
    .tci-table-wrap .hd-table.tbl.data tbody th,
    .deg-guide-wrap .hd-table.tbl.data tbody td,
    .deg-subject-wrap .hd-table.tbl.data tbody td,
    .rfd-view-wrap .hd-table.tbl.data tbody td,
    .tci-table-wrap .hd-table.tbl.data tbody td {
        border-right: 0.1rem solid #CDD1D5;
    }
    .deg-guide-wrap .hd-table.tbl.data thead th:last-child,
    .deg-subject-wrap .hd-table.tbl.data thead th:last-child,
    .rfd-view-wrap .hd-table.tbl.data thead th:last-child,
    .tci-table-wrap .hd-table.tbl.data thead th:last-child,
    .deg-guide-wrap .hd-table.tbl.data tbody th:last-child,
    .deg-subject-wrap .hd-table.tbl.data tbody th:last-child,
    .rfd-view-wrap .hd-table.tbl.data tbody th:last-child,
    .tci-table-wrap .hd-table.tbl.data tbody th:last-child,
    .deg-guide-wrap .hd-table.tbl.data tbody td:last-child,
    .deg-subject-wrap .hd-table.tbl.data tbody td:last-child,
    .rfd-view-wrap .hd-table.tbl.data tbody td:last-child,
    .tci-table-wrap .hd-table.tbl.data tbody td:last-child {
        border-right: none;
    }
    /* 첫 칸(구분 / 과목분류 / 항목)은 머리행과 같은 계열의 옅은 바탕 */
    .deg-guide-wrap .hd-table.tbl.data tbody th,
    .deg-subject-wrap .hd-table.tbl.data tbody th,
    .rfd-view-wrap .hd-table.tbl.data tbody th,
    .tci-table-wrap .hd-table.tbl.data tbody th {
        background-color: #F3F6F9;
        font-weight: 700;
    }

    /* --- 가로로 밀어 보기 --- */
    /* 공용 규칙이 카드형을 전제로 최소 폭을 풀고 넘침도 막아 두었다.
       칸이 눌리지 않을 폭을 되살리고 밀어 볼 수 있게 한다 */
    .hd-table-wrap.deg-guide-wrap.krds-table-wrap,
    .hd-table-wrap.deg-subject-wrap.krds-table-wrap,
    .hd-table-wrap.rfd-view-wrap.krds-table-wrap,
    .hd-table-wrap.tci-table-wrap.krds-table-wrap {
        overflow-x: auto;
    }
    /* 강사 정보 관리의 두 표는 칸이 하나뿐이라 밀 것이 없다 */
    .hd-table-wrap.tci-table-wrap.krds-table-wrap .hd-table.tbl.data {
        min-width: 0;
    }
    .hd-table-wrap.deg-guide-wrap.krds-table-wrap .hd-table.tbl.data {
        min-width: 72rem;
    }
    /* 이수과목은 다섯 칸이라 조금 더 넓게 */
    .hd-table-wrap.deg-subject-wrap.krds-table-wrap .hd-table.tbl.data {
        min-width: 80rem;
    }
    /* 강좌개요·강좌개설 상세는 항목-값 두 칸이라 그만큼만 */
    .hd-table-wrap.rfd-view-wrap.krds-table-wrap .hd-table.tbl.data {
        min-width: 60rem;
    }
    /* 카드형으로 접힐 때 위 굵은 선이 사라지지 않도록 공용 규칙이 표 자체에
       border-top 을 걸어 둔다. 표를 그대로 두는 이 화면들에서는 머리행이나
       첫 줄이 이미 같은 선을 갖고 있어 두 겹으로 보이므로 표 쪽을 지운다 */
    .hd-table-wrap.deg-guide-wrap .hd-table.tbl.data,
    .hd-table-wrap.deg-subject-wrap .hd-table.tbl.data,
    .hd-table-wrap.rfd-view-wrap .hd-table.tbl.data,
    .hd-table-wrap.tci-table-wrap .hd-table.tbl.data {
        border-top: 0;
    }

    .deg-guide-wrap:focus-visible,
    .deg-subject-wrap:focus-visible,
    .rfd-view-wrap:focus-visible,
    .tci-table-wrap:focus-visible {
        outline: 0.2rem solid #008F55;
        outline-offset: 0.2rem;
    }
}

/* ==================================================================== */
/* 마이페이지 > 나의 수강내역 > 설문관리                                  */
/*                                                                      */
/* 검색 상자는 진흥원프로그램 목록의 .filter-wrap / .pgm-field,          */
/* 목록 위 줄은 .result-head, 표는 .list-table, 쪽 이동은                */
/* .krds-pagination, 설문지 팝업은 강의홈의 .lh-quiz-modal 을 그대로     */
/* 쓴다. 이 화면에만 있는 것은 '설문' 단추와 표의 몇 가지 손질뿐이라      */
/* .svy- 접두사로 덧붙였다                                               */
/* ==================================================================== */

/* 검색 : 조건이 둘뿐이라 한 줄이다. '검색' 은 묶음 전체의 이름이므로
   라벨 폭을 좁게 잡아 값 쪽을 넓게 쓴다.
   강좌바구니(.cart-search)도 같은 짜임이라 함께 묶는다 */
.svy-search .filter-label,
.cart-search .filter-label {
    width: 6rem;
}
.svy-search .search-controls .krds-form-select-sort.is-narrow,
.cart-search .search-controls .krds-form-select-sort.is-narrow {
    flex: 0 0 13.6rem;
}

/* 설문 참여 단추. 표 안에 들어가는 작은 단추라 시안 치수를 그대로 잡는다.
   6rem x 3.2rem, 모서리 0.6rem, 연초록 채움에 초록 테두리.
   테두리 #008F55 는 흰 바탕 4.2:1 로 요소 경계 기준(3:1)을 넘긴다.
   글자는 #E6F4EE 위 #008F55 가 3.7:1 이라 기준(4.5:1)에 못 미쳐, 눈으로는
   거의 같고 프로젝트에 이미 있는 #00733D(5.3:1)로 한 단계만 낮춘다.
   참여 기간이 지난 줄은 눌러도 하는 일이 없어 disabled 로 둔다 */
.svy-btn.krds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6rem;
    height: 3.2rem;
    min-height: 3.2rem;
    padding-inline: 1.2rem;
    border: 0.1rem solid #008F55;
    border-radius: 0.8rem;
    background-color: #E6F4EE;
    color: #00733D;
    font-size: 1.5rem;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--krds-transition-base, all 0.15s ease);
}
.svy-btn.krds-btn:hover:not(:disabled) {
    border-color: #00733D;
    background-color: #D5EBE0;
}
.svy-btn.krds-btn:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}
/* 시안의 비활성 단추는 테두리 없이 회색 한 덩어리다 */
.svy-btn.krds-btn:disabled {
    border-color: #CDD1D5;
    background-color: #CDD1D5;
    color: #6D7882;
    cursor: default;
}

/* 강좌명·설문지명은 문장이라 낱말 단위로 줄이 바뀌게 한다 */
.svy-table-wrap .list-table.tbl.data .svy-col-course,
.svy-table-wrap .list-table.tbl.data .svy-col-name {
    word-break: keep-all;
}
/* 시간은 '04-18 00:00 AM ~ 05-16 00:00 AM' 한 덩어리라 칸이 좁으면
   두 줄로 흐르게 두되, 날짜(.lh-exam-date)만 쪼개지지 않는다 */
.svy-table-wrap .list-table.tbl.data .svy-col-date {
    line-height: 1.5;
}

/* 팝업 안 '유의사항' 제목 */
.svy-notice-tit {
    margin: 0 0 1.2rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* 표는 .list-table 공용 카드형 전환이 그대로 걸린다                     */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* 라벨을 값 위로 올리지 않고 시안처럼 한 줄에 하나씩 쌓는다 */
    .svy-search .pgm-field,
    .cart-search .pgm-field {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    .svy-search .filter-label,
    .cart-search .filter-label {
        width: auto;
    }
    .svy-search .search-controls .krds-form-select-sort.is-narrow,
    .cart-search .search-controls .krds-form-select-sort.is-narrow {
        flex: 0 0 auto;
        width: 100%;
    }
    .svy-search .search-actions,
    .cart-search .search-actions {
        width: 100%;
        margin-top: 0.4rem;
    }
    /* 카드형에서 단추가 라벨 옆에 붙으므로 가로를 다 쓰지 않게 둔다 */
    .svy-table-wrap .list-table.tbl.data .svy-col-btn {
        align-items: center;
    }
}

/* ==================================================================== */
/* 마이페이지 > 메시지함                                                  */
/*                                                                      */
/* 검색 상자는 진흥원프로그램 목록의 .filter-wrap / .pgm-search-grid,     */
/* 발송일 달력은 기관 등록 안내의 KRDS 달력, 목록은 .list-table,          */
/* 쪽 이동은 .krds-pagination, 상세 팝업은 공용 krds-modal 을 쓴다.       */
/* 이 화면에만 있는 것은 발송일 두 칸 배치, 제목 단추, 삭제 단추 자리,     */
/* 팝업 안 보기 전용 칸뿐이라 .msg- 접두사로 덧붙였다                     */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 1) 검색 상자                                                         */
/* ------------------------------------------------------------------ */
/* 발송일 : KRDS 기간 달력(.input-group.range.set).
   시작일-종료일 두 칸이 한 묶음이고 달력 여는 단추는 오른쪽 끝에 하나만
   붙는다. 가운데 '-' 는 li.mark 가 그리는 장식이라 읽어 주는 프로그램에서는
   빼고, 칸마다 title 로 이름을 따로 주었다.
   묶음 전체에 폭을 주면 가운데 '-' 만큼이 두 칸에서 빠져 아래 발송자
   칸과 어긋난다. 그래서 묶음이 아니라 날짜 칸 하나하나에 폭(21rem)을
   주고, 묶음은 그 합만큼만 차지하게 둔다 */
/* 공용 .pgm-search-grid 는 한 줄에 두 항목이라, 폭이 넓은 발송일(두 칸 + 달력 단추)이
   옆 칸의 발송자 이름표를 덮었다. 시안 설명대로 이 화면은 한 줄에 한 항목씩 놓는다 */
.msg-search .pgm-search-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
}
.msg-search .msg-date-range,
.msg-search .msg-date-range .calendar-input {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.msg-search .msg-date-range .input-group.range > li:not(.mark) {
    flex: 0 0 21rem;
}
/* 가운데 '-' 칸은 공용 값이 5.6rem 인데 이 화면의 입력 칸은 4.8rem 이다.
   묶음이 아래쪽 기준으로 붙는(align-items:flex-end) 구조라 '-' 가 입력
   칸 가운데보다 0.4rem 위로 올라가고, 묶음 높이가 5.6rem 이 되는 바람에
   그 가운데에 맞춰 놓인 달력 단추는 반대로 0.4rem 아래로 내려간다.
   '-' 칸 높이를 입력 칸과 같게 맞추면 둘 다 제자리로 온다 */
.msg-search .msg-date-range .input-group.range > li.mark {
    flex: 0 0 1rem;
    justify-content: center;
    height: 4.8rem;
}
.msg-search .calendar-input .input-group > li .krds-input {
    width: 100%;
    max-width: 100%;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    font-size: 1.7rem;
    color: #1E2124;
}
/* 달력 단추가 겹치는 마지막 칸만 오른쪽을 비워 준다 */
.msg-search .calendar-input .input-group > li:last-child .krds-input {
    padding-right: 5.2rem;
}
/* 달력 여는 단추. 공용 아이콘 단추는 4rem 짜리 그림을 넣어 칸을 꽉 채운다 */
.msg-search .calendar-input .form-btn-datepicker {
    right: 0.7rem;
}
.msg-search .calendar-input .form-btn-datepicker .svg-icon {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #33363D;
}

/* 발송자는 발송일 묶음 전체(21 + 1.6 + 1 + 1.6 + 21 = 46.2rem)와 같은 폭.
   첫 칸 폭(21rem)만 주면 위아래 칸 오른쪽 끝이 어긋나 혼자 짧아 보인다.
   그래서 가운데 '-' 칸 폭도 1rem 으로 정해 두 줄 끝을 맞춘다 */
.msg-search .msg-sender {
    flex: 0 0 46.2rem;
}
.msg-search .msg-sender .krds-input {
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* 2) 목록                                                              */
/* ------------------------------------------------------------------ */
/* 선택 칸의 체크상자는 칸 가운데에 둔다 */
.msg-table-wrap .list-table.tbl.data .msg-col-chk {
    text-align: center;
}
.msg-table-wrap .list-table.tbl.data .msg-col-chk .krds-form-check {
    display: inline-flex;
    justify-content: center;
}
/* 이름이 sr-only 라 label 이 폭 0 이 되면 체크상자와 겹친다 */
.msg-table-wrap .list-table.tbl.data .msg-col-chk .krds-form-check label {
    padding-left: 0;
}

/* 제목 : 다른 화면으로 넘어가는 것이 아니라 이 자리에서 팝업을 여는
   것이라 링크가 아니라 단추다. 겉모습과 반응은 공지사항·자료실 등의
   제목 링크(.list-table.tbl.data td.col-title a)와 똑같이 맞춘다.
   - 평소 : 검은 글씨(#1E2124), 굵기 400, 밑줄 없음, 한 줄 말줄임
   - 올렸을 때 : 초록(#008F55) 굵은 글씨에 밑줄. 색을 가려내기 어려워도
     굵기와 밑줄로 반응을 알 수 있다 */
.msg-subject {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1E2124;
    font-size: inherit;
    font-family: inherit;
    font-weight: 400;
    text-align: left;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}
.msg-subject:hover,
.msg-subject:focus-visible {
    color: #008F55;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
}
.msg-subject:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}

/* 발송일시는 '2026.05.12 16:20' 한 덩어리라 쪼개지지 않게 둔다 */
.msg-table-wrap .list-table.tbl.data .msg-col-date {
    white-space: nowrap;
}

/* 삭제 단추는 쪽 이동 아래 왼쪽에 선다 */
.msg-actions {
    display: flex;
    margin-top: 4rem;
}
.msg-del-btn.krds-btn {
    min-width: 9rem;
}

/* ------------------------------------------------------------------ */
/* 3) 메시지 상세 팝업                                                   */
/* ------------------------------------------------------------------ */
/* 받은 메시지를 보여 주기만 하는 자리라 세 칸 모두 readonly 다.
   발송자는 회원정보에서 그대로 오는 값이라 common.css 의 읽기 전용 색
   (#E2E4E7 위 #1E2124, 13.0:1), 제목·내용은 시안대로 흰 바탕 */
.msg-view {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.msg-view-row {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.msg-view-tit {
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.msg-view .krds-input {
    width: 100%;
    height: 5.6rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    font-size: 1.9rem;
    color: #1E2124;
}
.msg-view .msg-view-sender {
    background-color: #E2E4E7;
    color: #1E2124;
    border: 0.1rem solid #B1B8BE;
}
.msg-view .msg-view-body {
    height: auto;
    min-height: 16rem;
    padding: 1.4rem 1.6rem;
    line-height: 1.6;
    resize: none;
}

/* ------------------------------------------------------------------ */
/* 4) 반응형 - 모바일(767px 이하)                                       */
/* 표는 .list-table 공용 카드형 전환이 그대로 걸린다                     */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* 좁은 화면에서는 기간 달력도 가로를 다 쓴다 */
    .msg-search .msg-date-range,
    .msg-search .msg-sender {
        flex: 0 0 auto;
        width: 100%;
    }
    .msg-search .msg-date-range .calendar-input {
        width: 100%;
        max-width: none;
    }
    /* 좁은 화면에서는 날짜 두 칸이 남는 폭을 나눠 갖는다 */
    .msg-search .msg-date-range .input-group.range > li:not(.mark) {
        flex: 1 1 0;
        min-width: 0;
    }
    /* 카드형에서는 제목을 한 줄로 자르지 않고 흐르게 둔다.
       공용 .list-table td.col-title a 와 같은 처리다 */
    .msg-subject {
        white-space: normal;
    }
    /* 카드형에서는 선택 칸도 라벨 옆에 붙는다 */
    .msg-table-wrap .list-table.tbl.data .msg-col-chk {
        text-align: left;
    }
    .msg-actions {
        margin-top: 2.4rem;
    }
    .msg-del-btn.krds-btn {
        width: 100%;
    }
}

/* ==================================================================== */
/* 마이페이지 > 내정보 > 회원정보 수정 (비밀번호 확인 / 정보 수정)         */
/*                                                                      */
/* 비밀번호 확인은 로그인 화면의 .login-layout / .login-form /           */
/* .login-notice / .login-help-box 를 그대로 쓴다.                       */
/* 정보 수정은 평생학습문화조성과 같은 KRDS 탭에, 입력 칸은 공간 이용신청  */
/* 과 같은 .apply-form / .form-group / .apply-tel-group /                */
/* .apply-email-group / .apply-addr-group 을 쓴다.                       */
/* 이 화면에만 있는 것은 탭 색, 상자 제목, 우편번호 검색 단추, 고칠 수     */
/* 없는 선택 칸뿐이라 .pwchk- / .mi- 접두사로 덧붙였다                    */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* 1) 비밀번호 확인                                                     */
/* ------------------------------------------------------------------ */
/* 아이디는 이미 로그인한 사람의 것이라 고칠 수 없다.
   읽기 전용 칸의 색은 common.css 의 .krds-input[readonly] 가 공통으로
   맡으므로 여기서는 따로 지정하지 않는다 */

/* ------------------------------------------------------------------ */
/* 2) 회원정보 수정 - 탭                                                */
/* ------------------------------------------------------------------ */
.mi-tab .btn-tab {
    height: 5.6rem;
    font-weight: 500;
}
.mi-tab .active .btn-tab {
    font-weight: 700;
}
.mi-tab.tab.fill.full > ul > li:first-of-type .btn-tab {
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
}
.mi-tab.tab.fill.full > ul > li:last-of-type .btn-tab {
    border-top-right-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}


/* ------------------------------------------------------------------ */
/* 3) 회원정보 수정 - 입력 상자                                          */
/* ------------------------------------------------------------------ */
/* 시안은 입력 칸 전체를 테두리 상자로 감싼다 */

/* 공용 .apply-fieldset 는 아래로 4rem 을 둔다. 이 화면에서는 상자가 탭
   내용의 마지막이고 그 아래 단추 줄이 이미 4rem 을 갖고 있어, 그대로 두면
   8rem 으로 벌어진다. 상자 쪽 여백을 지우고 단추 줄 값만 쓴다 */
.mi-box {
    margin-bottom: 0;
}
.mi-box-tit {
    margin: 0 0 2.4rem;
    font-size: 2rem;
    font-weight: 700;
    color: #1E2124;
}

/* 성별처럼 고칠 수 없는 선택 칸.
   <select> 에는 readonly 를 쓸 수 없어 disabled 로 두는데, 공용 스타일의
   disabled 는 바탕이 비고 화살표까지 흐려져 '쓸 수 없는 칸'으로 보인다.
   common.css 의 .krds-input[readonly] 와 같은 값으로 맞추고 화살표도
   평소 모양으로 되돌린다. #E2E4E7 위 #1E2124 는 13.0:1 */
.mi-readonly-select[disabled] {
    background-color: #E2E4E7 !important;
    background-image: url(../img/component/icon/ico_angle.svg);
    border-color: #B1B8BE;
    color: #1E2124;
    opacity: 1;
    cursor: default;
}

/* 우편번호 검색 단추. 시안은 연초록 채움에 같은 초록 테두리다.
   설문관리의 설문 단추와 같은 짜임이다.
   테두리 #008F55 는 흰 바탕 4.2:1 로 요소 경계 기준(3:1)을 넘긴다.
   글자는 #E6F4EE 위 #008F55 가 3.7:1 로 글자 기준(4.5:1)에 못 미쳐,
   눈으로는 거의 같은 #00733D(5.3:1)로 한 단계만 낮춘다 */
.mi-zip-btn.krds-btn {
    flex: 0 0 auto;
    border: 0.1rem solid #008F55;
    background-color: #E6F4EE;
    color: #008F55;
    font-weight: 400;
}
.mi-zip-btn.krds-btn:hover {
    border-color: #00733D;
    background-color: #D5EBE0;
}
.mi-zip-btn.krds-btn:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}

.mi-actions {
    margin-top: 4rem;
}

/* ------------------------------------------------------------------ */
/* 4) 반응형 - 모바일(767px 이하)                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* 높이·글자 크기는 넓은 화면과 같게 둔다(5.6rem / 1.9rem) */
    .mi-tab .btn-tab {
        padding: 0 1.2rem;
    }
    .mi-tab-wrap .tab-conts {
        margin-top: 2.4rem;
    }
    .mi-box {
        padding: 2rem 1.6rem;
    }
    .mi-box-tit {
        margin-bottom: 1.6rem;
        font-size: 1.8rem;
    }
    /* 우편번호 칸과 검색 단추가 위아래로 쌓이면 단추도 가로를 다 쓴다 */
    .mi-zip-btn.krds-btn {
        width: 100%;
    }
    .mi-actions {
        margin-top: 3.2rem;
    }
}

/* ==================================================================== */
/* 마이페이지 > 수강결제관리 > 강좌바구니                                  */
/*                                                                      */
/* 검색 상자는 설문관리와 같은 한 줄짜리 .filter-wrap,                    */
/* 목록 위 줄은 강좌별검색과 같은 .result-head.space-result-head,         */
/* 카드는 강좌별검색의 .course-card, 쪽 이동은 .krds-pagination 을 쓴다.   */
/* 이 화면에만 있는 것은 카드마다 붙는 체크상자와 아래 단추 줄뿐이라       */
/* .cart- 접두사로 덧붙였다                                              */
/* ==================================================================== */

/* 이 화면의 카드는 눌러 넘어갈 곳이 없어 상세 링크(.course-card-link)를
   빼고 글자만 담았다. 누를 수 있는 것은 체크상자와 아래 단추뿐이다.
   그래서 마우스를 올렸을 때 눌리는 것처럼 보이던 표시도 끈다.
   (나중에 상세로 넘어가야 하면 마크업의 .course-card-body 를 다시
    .course-card-link 인 <a> 로 되돌리고 아래 세 규칙을 지우면 된다) */
.cart-card .course-card-body {
    flex: 1 1 auto;
}
.cart-card:hover {
    border-color: #B1B8BE;
    box-shadow: none;
}
.cart-card:hover .course-card-tit {
    text-decoration: none;
}

/* 카드 안 체크상자 */
.cart-check {
    margin-bottom: 1.6rem;
}
/* 이름이 sr-only 라 label 이 폭 0 이 되면 체크상자와 겹친다 */
.cart-check label {
    padding-left: 0;
}

/* 고른 카드는 시안대로 초록 테두리로 표시한다.
   색만이 아니라 체크상자가 켜진 것으로도 알 수 있다.

   테두리를 box-shadow 로 그리면 카드에 초점이 남아 있는 동안
   공용 .course-card:focus-within 의 초점 그림자에 덮여 선이 얇아졌다가,
   다른 곳을 눌러 초점이 빠지면 그제야 두꺼워져 보인다.
   초점 표시와 부딪히지 않도록 선택 표시는 따로 그린다 */
.cart-card:has(.cart-check input:checked) {
    border-color: #008F55;
}
.cart-card:has(.cart-check input:checked)::before {
    content: "";
    position: absolute;
    inset: -0.1rem;
    border: 0.2rem solid #008F55;
    border-radius: inherit;
    /* 위에 덮이지만 눌리는 것은 아래 체크상자여야 한다 */
    pointer-events: none;
}

/* 지우는 쪽과 신청하는 쪽을 양 끝으로 갈라 놓아 되돌릴 수 없는 삭제를
   실수로 누르지 않게 한다 */
.cart-actions {
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
    margin-top: 4rem;
}
.cart-actions .krds-btn {
    min-width: 10rem;
}

@media (max-width: 767px) {
    .cart-actions {
        margin-top: 2.4rem;
    }
    .cart-actions .krds-btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ==================================================================== */
/* 마이페이지 > 수강결제관리 > 수강취소및환불                              */
/*                                                                      */
/* 안내는 .info-box, 검색 상자는 시간표·수강이력과 같은 .filter-wrap +    */
/* .pgm-search-grid, 목록 위 줄은 .result-head.space-result-head,        */
/* 카드는 강좌별검색의 .course-card, 쪽 이동은 .krds-pagination 을 쓴다.  */
/* 이 화면에만 있는 것은 카드 뱃지 두 가지, '수강상태' 의 붉은 값,        */
/* 그리고 카드 아래 취소·환불 단추뿐이라 .rfd- 접두사로 덧붙였다          */
/* ==================================================================== */

/* 이 화면의 카드는 눌러 넘어갈 곳이 없어 상세 링크(.course-card-link)를
   쓰지 않는다. 마우스를 올렸을 때 눌리는 것처럼 보이던 표시도 끈다.
   (나중에 상세로 넘어가야 하면 .course-card-body 를 .course-card-link 인
    <a> 로 되돌리고 아래 세 규칙을 지우면 된다) */
.rfd-card .course-card-body {
    flex: 1 1 auto;
}
.rfd-card:hover {
    border-color: #B1B8BE;
    box-shadow: none;
}
.rfd-card:hover .course-card-tit {
    text-decoration: none;
}

/* 결제 상태 뱃지. 기본(무료)은 공용 .course-card-badge 의 남색 그대로 쓰고,
   미납·납부만 색을 바꾼다. 색만으로 뜻을 전하지 않도록 글자를 그대로 둔다.
   흰 글자 대비 - 미납 #D63D4A 4.5:1, 납부 #008F55 4.2:1(큰 글씨 기준 3:1) */
.course-card-badge.is-unpaid {
    background-color: #D63D4A;
}
.course-card-badge.is-paid {
    background-color: #008F55;
}

/* 수강상태 중 눈여겨봐야 할 값(취소·대기).
   흰 바탕에서 #D63D4A 는 4.5:1 */
.course-card-meta-val.is-warn {
    color: #D63D4A;
    font-weight: 700;
}

/* 카드 아래 취소·환불 단추.
   공용 .course-card-state 가 있던 자리라 위 여백을 같은 2rem 으로 둔다 */
.rfd-card-actions {
    display: flex;
    gap: 1.6rem;
    margin-top: 2rem;
}
.rfd-card-actions .krds-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 4.8rem;
    min-height: 4.8rem;
    padding-inline: 1.2rem;
}

/* 환불은 연초록 채움에 초록 테두리. 설문관리의 설문 단추와 같은 짜임이다.
   테두리 #008F55 는 흰 바탕 4.2:1 로 요소 경계 기준(3:1)을 넘긴다.
   글자는 #E6F4EE 위 #008F55 가 3.7:1 로 글자 기준(4.5:1)에 못 미쳐,
   눈으로는 거의 같은 #00733D(5.3:1)로 한 단계만 낮춘다 */
.rfd-refund-btn.krds-btn {
    border: 0.1rem solid #008F55;
    background-color: #E6F4EE;
    color: #00733D;
    font-weight: 500;
}
.rfd-refund-btn.krds-btn:hover:not(:disabled) {
    border-color: #00733D;
    background-color: #D5EBE0;
}
.rfd-refund-btn.krds-btn:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}
/* 쓸 수 없는 단추는 두 개가 같은 회색 한 덩어리로 보인다.
   왜 쓸 수 없는지는 카드 안 '수강상태' 값이 알려 준다 */
.rfd-card-actions .krds-btn:disabled {
    border-color: #CDD1D5;
    background-color: #CDD1D5;
    color: #6D7882;
    cursor: default;
}

/* ------------------------------------------------------------------ */
/* 상세 화면                                                            */
/* ------------------------------------------------------------------ */
/* 구역 제목은 아래로 1.6rem 을 두는데 .hd-table-wrap 이 다시 위로 3.2rem
   을 얹어 4.8rem 이 된다. 제목 바로 뒤에 오는 표는 제목 여백만 쓰게 한다.
   기관정보의 .hd-section-tit + .gi-table-wrap 과 같은 처리다 */
.hd-section-tit + .rfd-view-wrap {
    margin-top: 0;
}

/* 표 맨 위 검은 굵은 선은 공용 .hd-table thead th 가 그린다.
   이 화면의 두 표는 항목-값 구조라 <thead> 가 없어 그 선이 붙지 않으므로,
   첫 줄 위에 같은 선을 그려 준다 */
.rfd-view-wrap .hd-table.tbl.data tbody tr:first-child > th,
.rfd-view-wrap .hd-table.tbl.data tbody tr:first-child > td {
    border-top: 0.2rem solid #1E2124;
}

/* 표 두 개가 이어지므로 두 번째 제목 위를 띄운다 */
.rfd-view-tit2 {
    margin-top: 5.6rem;
}
.rfd-view-actions {
    margin-top: 4rem;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .rfd-view-tit2 {
        margin-top: 4rem;
    }
    .rfd-view-actions {
        margin-top: 3.2rem;
    }
    /* 시안대로 라벨을 왼쪽에 둔 채 한 줄에 하나씩 놓는다 */
    .rfd-search .pgm-field {
        flex-direction: row;
        align-items: center;
        gap: 1rem 1.2rem;
    }
    .rfd-search .filter-label {
        width: 6.4rem;
    }
    /* 공용 규칙은 강좌명 라벨을 display:none 으로 감춘다. 그러면 읽어 주는
       프로그램에서 입력 칸의 이름까지 사라질 수 있어, 자리만 빼고 이름은
       남기는 방식으로 바꾼다 */
    .rfd-search .pgm-field.is-search .filter-label {
        display: block;
        position: absolute;
        width: 0.1rem;
        height: 0.1rem;
        margin: -0.1rem;
        padding: 0;
        overflow: hidden;
        border: 0;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .rfd-search .pgm-field.is-search {
        flex-wrap: wrap;
    }
    .rfd-search .pgm-field.is-search .search-controls {
        flex: 1 1 100%;
    }
    .rfd-search .search-actions {
        flex: 1 1 100%;
        gap: 1rem;
    }
    .rfd-card-actions {
        gap: 1.2rem;
    }
}

/* ==================================================================== */
/* 마이페이지 > 학습상담실 > 이용안내                                     */
/*                                                                      */
/* 알림소통마당 FAQ 와 같은 화면이라 그 구성을 그대로 쓴다.               */
/* (.filter-wrap.faq-search / .filter-chips / .result-head /             */
/*  .krds-accordion.faq-list / .krds-pagination)                         */
/* 이 화면에만 있는 것은 고른 분류에 질문이 없을 때 보이는 안내뿐이다      */
/* ==================================================================== */
/* 분류 탭.
   모양·좌우 밀기·좁은 화면 처리 모두 강의홈(.le-tab)이 그대로 맡는다.
   여기서 칸 높이나 글자 크기를 다시 주면 .le-tab 의 좁은 화면 규칙과
   부딪혀 탭이 눌리거나 글자가 잘리므로, 아래 여백만 둔다.
   고른 칸의 초록 채움과 그림자는 위쪽 '채움형 탭 공통' 규칙이 맡는다 */
/* 탭 줄 배치는 .le-tab-wrap.krds-tab-area 규칙이 하는데, 이 화면은 공용 탭
   스크립트에 물리지 않으려고 .krds-tab-area 를 떼었으므로 같은 값을 여기서
   준다 (탭 줄과 좌우 화살표를 한 줄에 놓는 배치) */
.guide-cat-area.le-tab-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: space-between;
    width: 100%;
}
.guide-cat-area {
    margin-bottom: 6.2rem;
}
/* 분류 이름이 짧아 여섯 칸이 웬만큼 좁아져도 다 들어간다. 그러면 칸만
   자꾸 눌려 보기 나쁘므로, 강의홈 탭처럼 칸마다 최소 폭을 두어 그 아래로
   내려가면 좌우로 밀게 한다(6 x 14rem = 84rem 부터 밀기 시작) */
@media (max-width: 87.5em) {
    .guide-cat-tab.tab.fill.full > ul > li {
        min-width: 14rem;
    }
}
@media (max-width: 47.9375em) {
    .guide-cat-tab.tab.fill.full > ul > li {
        min-width: 10rem;
    }
}

/* 고른 분류에 질문이 없을 때만 보인다.
   이때는 아코디언이 비어 선을 그릴 칸이 없으므로, 이 안내가 위아래 선을
   직접 갖는다. 색은 아코디언 칸 사이 선과 같은 #CDD1D5 */
.guide-faq-empty {
    margin: 0;
    padding: 6rem 2rem;
    border-top: 0.1rem solid #CDD1D5;
    border-bottom: 0.1rem solid #CDD1D5;
    color: #6D7882;
    font-size: 1.7rem;
    text-align: center;
}

/* FAQ 는 검색 상자에 '분류' 줄과 '검색' 줄이 있어, 좁은 화면 규칙이
   :first-of-type(분류)과 :last-of-type(검색)을 나눠 다룬다.
   이 화면은 분류를 탭으로 뺐기 때문에 남은 '검색' 한 줄이 first 이자
   last 가 되어 두 규칙을 동시에 맞아 라벨과 칸이 어긋난다.
   분류 줄을 겨냥한 쪽만 되돌린다 */
@media (max-width: 47.9375em) {
    .guide-search .faq-field:first-of-type {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .guide-search .faq-field:first-of-type > .filter-label {
        padding-top: 0;
        width: auto;
    }
}

/* ==================================================================== */
/* 마이페이지 > 학습상담실 > 1:1 문의                                     */
/*                                                                      */
/* 목록은 자료실과 같은 .filter-wrap / .result-head / .list-table /      */
/* .krds-pagination, 상세는 자료실 상세와 같은 .detail- 컴포넌트를        */
/* 그대로 쓴다. 이 화면에만 있는 것은 첨부파일 크기 표시뿐이다            */
/* ==================================================================== */

/* 첨부파일 이름 뒤 크기. 파일 이름과 구분되도록 한 톤 옅게 둔다.
   흰 바탕에서 #6D7882 는 4.7:1 */
.detail-attach-size {
    margin-left: 0.4rem;
    color: #6D7882;
    font-weight: 400;
}

/* ==================================================================== */
/* 마이페이지 > 나의 강의내역 > 강사 정보 관리 (보기 / 수정)              */
/*                                                                      */
/* 구역 제목은 공용 .hd-section-tit, 표는 .hd-table, 수정 폼은 강사등록과 */
/* 같은 .apply-form / .apply-fieldset / .apply-addr-group /              */
/* .apply-tel-group / .krds-file-upload, 안내는 .login-help-box,         */
/* 글자 수는 .tc-count 를 그대로 쓴다.                                    */
/* 이 화면에만 있는 것은 이름 줄과 사진 붙은 기본정보 부분뿐이라           */
/* .tci- 접두사로 덧붙였다                                               */
/* ==================================================================== */

/* 강사 이름. 이름 '아래' 굵은 선으로 기본정보 묶음이 시작된다 */
.tci-name {
    margin: 0;
    padding-bottom: 2rem;
    border-bottom: 0.2rem solid #1E2124;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.tci-profile {
    margin-bottom: 6.2rem;
}
.tci-profile-body {
    display: flex;
    /* 사진을 왼쪽 글 목록의 세로 가운데에 맞춘다 */
    align-items: center;
    gap: 2.2rem;
    margin-top: 1rem;
}

/* 항목-값 목록. 표가 아니라 dl 이라 좁은 화면에서 접을 것이 없다 */
.tci-info {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.tci-info-row {
    display: flex;
    align-items: baseline;
    gap: 1.6rem;
    padding: 1.4rem 0;
    border-bottom: 0.1rem solid #E3E4E4;
}
.tci-info-row dt {
    flex: 0 0 12rem;
    font-size: 1.7rem;
    color: #464C53;
}
.tci-info-row dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.7rem;
    font-weight: 600;
    color: #1E2124;
    word-break: break-all;
}
/* 시안에서 생년월일만 초록으로 강조한다.
   흰 바탕에서 #008F55 는 4.6:1 로 굵은 글씨 기준을 넘긴다 */
.tci-info-row dd.is-accent {
    color: #008F55;
}

/* 사진. 세로로 조금 긴 증명사진 비율 */
.tci-photo {
    flex: 0 0 16rem;
    overflow: hidden;
    border: 0.1rem solid #E3E4E4;
    border-radius: 0.8rem;
}
.tci-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
/* 사진이 없을 때. 글자로 뜻을 전하므로 그림 없이 안내만 둔다 */
.tci-photo.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    background-color: #F5F6FA;
}
.tci-photo-empty {
    margin: 0;
    padding: 0 1.2rem;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #6D7882;
    text-align: center;
}

/* 두 표 사이 간격. 제목 바로 뒤 표는 제목 여백만 쓰게 한다 */
.tci-sec-tit2 {
    margin-top: 5.6rem;
}
.hd-section-tit + .tci-table-wrap {
    margin-top: 0;
}
/* 두 표는 칸이 하나뿐이라 머리글도 값도 가운데로 둔다.
   공용 .hd-table 은 위아래로 1.6rem 을 둬서 한 줄이 5.8rem 이 되는데
   시안은 4.6rem 이다. 값이 짧은 표라 여백을 한 단계 줄인다.
   KRDS .krds-table-wrap .tbl.data 규칙이 더 강해 선택자를 한 단계 올렸다 */
.tci-table-wrap .hd-table.tbl.data thead th,
.tci-table-wrap .hd-table.tbl.data tbody th,
.tci-table-wrap .hd-table.tbl.data tbody td {
    padding: 1rem 1.2rem;
    text-align: center;
}

/* 등록된 내용이 없을 때의 한 줄 */
.tci-empty {
    color: #6D7882;
}


.tci-form .apply-addr-group input[type="text"].krds-input {
    width: 35.672rem;
    max-width: 35.672rem;
}

/* 경력 입력칸은 시안대로 가로를 다 쓴다.
   공용 .orgreg-textarea 는 max-width: 70rem 으로 묶여 있다 */
.tci-textarea {
    max-width: none;
}

.tci-actions {
    margin-top: 4rem;
}
/* 안내상자는 단추 줄 바로 위라 아래 여백을 지운다 */
.tci-notice {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* 반응형 - 모바일(767px 이하)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* 시안대로 사진을 이름 바로 아래, 목록 위로 올린다 */
    .tci-profile-body {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
        margin-top: 2.4rem;
    }
    /* 시안대로 사진이 이름 바로 아래, 정보 목록 위로 온다.
       마크업에서는 정보 목록이 먼저라 자리만 앞으로 당긴다 */
    .tci-photo {
        order: -1;
        flex: 0 0 auto;
        width: 16rem;
    }
    .tci-info {
        width: 100%;
    }
    .tci-info-row dt {
        flex: 0 0 9rem;
    }

    .tci-form .apply-addr-group input[type="text"].krds-input {
        width: 100%;
        max-width: 100%;
    }
    .tci-actions .krds-btn {
        width: 100%;
    }
}

/* ==================================================================== */
/* 마이페이지(강사) > 나의 강의내역 > 강사출석체크 - 출석부 팝업          */
/*                                                                      */
/* 팝업은 공용 krds-modal, 목록 위 줄은 .result-head, 표는 .list-table,  */
/* 쪽 이동은 .krds-pagination 을 그대로 쓴다. 이 화면에만 있는 것은       */
/* 출석부 단추와 팝업 머리말·아래 단추 줄뿐이라 .att- 접두사로 덧붙였다   */
/* ==================================================================== */

/* 표 안 '출석부' 단추. 설문관리의 설문 단추와 같은 짜임이다.
   테두리 #008F55 는 흰 바탕 4.2:1 로 요소 경계 기준(3:1)을 넘긴다.
   글자는 #E6F4EE 위 #008F55 가 3.7:1 로 글자 기준(4.5:1)에 못 미쳐,
   눈으로는 거의 같은 #00733D(5.3:1)로 한 단계만 낮춘다 */
.att-open-btn.krds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.2rem;
    height: 3.2rem;
    min-height: 3.2rem;
    padding-inline: 1.2rem;
    border: 0.1rem solid #008F55;
    border-radius: 0.6rem;
    background-color: #E6F4EE;
    color: #00733D;
    font-size: 1.5rem;
    font-weight: 500;
    white-space: nowrap;
}
.att-open-btn.krds-btn:hover {
    border-color: #00733D;
    background-color: #D5EBE0;
}
.att-open-btn.krds-btn:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}

/* 팝업 폭. 공용 모달은 76rem 인데 이 팝업의 표는 칸이 일곱이라 좁다.
   시안 비율(화면의 58%쯤)에 맞춰 112rem 으로 넓히고, 창이 그보다 좁으면
   좌우에 2rem 씩만 남기고 줄어들게 한다 */
.att-modal .modal-dialog {
    width: 112rem;
    max-width: calc(100% - 4rem);
}

/* 팝업 머리말. 강좌명·학기는 한 줄에 둘, 차시는 한 줄을 다 쓴다 */
.att-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 4rem;
    margin: 0 0 4rem;
}
.att-meta-row {
    display: flex;
    align-items: baseline;
    gap: 1.6rem;
    padding: 1.2rem 0;
    border-bottom: 0.1rem solid #DADEE3;
}
.att-meta-row.is-wide {
    grid-column: 1 / -1;
}
.att-meta-row dt {
    flex: 0 0 8rem;
    font-size: 1.7rem;
    color: #464C53;
}
.att-meta-row dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.7rem;
    font-weight: 600;
    color: #1E2124;
    word-break: keep-all;
}
/* 강좌명만 초록으로 강조. 흰 바탕에서 #008F55 는 4.6:1 */
.att-meta-row dd.is-accent {
    color: #008F55;
}

/* 출석결과 선택 칸.
   정렬 기준에 쓰는 .krds-form-select-sort 는 테두리 없이 글자만 보이는
   컴포넌트라 표 안에서는 무엇을 고르는 칸인지 알 수 없다. 네모난 선택
   상자인 .krds-form-select 를 쓰고, 표 안에 들어가는 칸이라 폭만 잡아 준다 */
.att-table-wrap .att-state {
    width: 100%;
    max-width: 9rem;
    min-width: 0;
    color: #464C53;
}

/* 아래 단추 줄. 저장만 채운 단추라 눈에 먼저 들어온다.
   공용 .modal-btn 은 팝업 바깥 여백을 전제로 좌우 여백을 두는데, 이 줄은
   .modal-conts 안에 있어 그 여백이 한 번 더 붙어 표보다 안쪽으로 들어간다.
   좌우 여백만 지우고, 아래는 남겨 둔다. 공용 규칙에서는 이 줄이 팝업 맨
   아래에서 4rem 을 만들어 주는데 지금은 .modal-conts 의 1.2rem 밖에 없어,
   그대로 두면 단추가 팝업 아래 끝에 붙는다 */
.att-modal .modal-btn.att-actions {
    justify-content: flex-end;
    gap: 1.6rem;
    margin-top: 6.2rem;
    padding: 0 0 2.8rem;
}
/* 고른 사람의 값을 한꺼번에 바꾸는 단추. 시안대로 연초록 채움에 초록 테두리.
   테두리 #008F55 는 흰 바탕 4.2:1 로 요소 경계 기준(3:1)을 넘긴다.
   글자는 #E6F4EE 위 #008F55 가 3.7:1 로 글자 기준(4.5:1)에 못 미쳐,
   눈으로는 거의 같은 #00733D(5.3:1)로 한 단계만 낮춘다 */
.att-change-btn.krds-btn {
    border: 0.1rem solid #008F55;
    background-color: #E6F4EE;
    color: #00733D;
    font-weight: 500;
}
.att-change-btn.krds-btn:hover {
    border-color: #00733D;
    background-color: #D5EBE0;
}
.att-change-btn.krds-btn:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}

@media (max-width: 767px) {
    /* 좁은 화면에서는 공용 모달 규칙(가로 꽉 채움)에 맡긴다 */
    .att-modal .modal-dialog {
        width: 100%;
        max-width: 100%;
    }
    /* 강좌명·학기도 한 줄에 하나씩 */
    .att-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-bottom: 2.4rem;
    }
    .att-meta-row dt {
        flex: 0 0 7rem;
    }
    .att-actions {
        flex-wrap: wrap;
    }
    .att-actions .krds-btn {
        flex: 1 1 0;
        min-width: 0;
    }
    /* 카드형에서 출석부 단추가 라벨 옆에 붙는다 */
    .lh-table-wrap .list-table.tbl.data td[data-label="출석부"] {
        align-items: center;
    }
}

/* ==================================================================== */
/* 마이페이지(강사) > 강좌관리 > 강좌 이력                                */
/*                                                                      */
/* 검색은 수강취소및환불과 같은 .filter-wrap + .pgm-search-grid,          */
/* 표는 수강이력·메시지함과 같은 .list-table, 확인서 단추는 수강이력의     */
/* .hist-cert-btn, 쪽 이동은 .krds-pagination 을 그대로 쓴다.            */
/* 이 화면에만 있는 것은 선택 칸과 아래 단추 줄뿐이라 .lec- 로 덧붙였다   */
/* ==================================================================== */

/* 선택 칸의 체크상자는 칸 가운데에 둔다 */
.lec-table-wrap .list-table.tbl.data .lec-col-chk {
    text-align: center;
}
.lec-table-wrap .list-table.tbl.data .lec-col-chk .krds-form-check {
    display: inline-flex;
    justify-content: center;
}
/* 이름이 sr-only 라 label 이 폭 0 이 되면 체크상자와 겹친다 */
.lec-table-wrap .list-table.tbl.data .lec-col-chk .krds-form-check label {
    padding-left: 0;
}

/* 마우스를 올린 줄의 배경.
   공용 규칙(.list-table.tbl.data tr:hover td)이 td 만 다뤄서, 강좌 칸처럼
   th 로 둔 자리는 배경이 안 깔리고 그 칸만 하얗게 남는다 */
.lec-table-wrap .list-table.tbl.data tbody tr:hover th {
    background-color: rgb(0 143 85 / 5%) !important;
}

/* 강좌명은 문장이라 낱말 단위로 줄이 바뀌게 한다 */
.lec-table-wrap .list-table.tbl.data .lec-col-name {
    word-break: keep-all;
}
/* 교육기간의 '(4 주간)' 은 기간에 딸린 값이라 한 톤 옅게 둔다.
   흰 바탕에서 #6D7882 는 4.7:1 */
.lec-week {
    color: #6D7882;
}

/* 아래 단추 줄. 오른쪽 끝에 둔다 */
.lec-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 3.2rem;
}

@media (max-width: 767px) {
    /* 카드형 전환도 공용 규칙이 td 만 다뤄, 강좌 칸(th)은 제자리에 남고
       (여백은 KRDS 공용 .krds-table-wrap .tbl.data tbody th, td 가 두 칸에
        똑같이 주고 있으므로 여기서 다시 주지 않는다. 주면 그 칸만 왼쪽으로
        밀려 다른 줄과 어긋난다)
       항목 이름도 안 붙는다. 강의홈 표(.lh-table-wrap)와 같은 방식으로
       th 도 다른 칸과 똑같이 '항목 이름 + 값' 한 줄이 되게 한다 */
    .lec-table-wrap .list-table.tbl.data tbody th {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
        border-bottom: none;
        text-align: left;
        font-weight: 400;
    }
    .lec-table-wrap .list-table.tbl.data tbody th::before {
        content: attr(data-label);
        flex: 0 0 9rem;
        font-weight: 700;
        color: #1E2124;
        font-size: 1.5rem;
    }
    .lec-table-wrap .list-table.tbl.data tbody tr:hover th {
        background-color: transparent !important;
    }
    /* 카드형에서는 선택 칸도 라벨 옆에 붙는다 */
    .lec-table-wrap .list-table.tbl.data .lec-col-chk {
        text-align: left;
    }
    .lec-actions {
        margin-top: 2.4rem;
    }
    .lec-actions .krds-btn {
        width: 100%;
    }
}

/* 좁은 화면 전용 필터 줄·시트는 강좌별검색·기관별검색과 같은 컴포넌트
   (.space-mobile-bar / .space-filter-modal)를 그대로 쓴다.
   시트로 옮기는 칸(년도·학기)에는 마크업에서 .is-adv 를 붙여 두었고,
   좁은 화면에서 그 칸을 감추는 것은 공용 .pgm-search .pgm-field.is-adv
   규칙이 맡는다. 단추 자리도 공용 값(오른쪽 끝) 그대로 둔다 */

/* ==================================================================== */
/* 마이페이지(강사) > 강좌관리 > 강사료 현황                              */
/*                                                                      */
/* 검색·필터 시트는 강좌 이력과, 표는 수강이력·강좌 이력과 같은           */
/* 컴포넌트를 그대로 쓴다. 이 화면에만 있는 것은 지급상태 표시뿐이다      */
/* ==================================================================== */

/* 마우스를 올린 줄의 배경.
   공용 규칙(.list-table.tbl.data tr:hover td)이 td 만 다뤄서, 강좌명처럼
   th 로 둔 자리는 배경이 안 깔리고 그 칸만 하얗게 남는다 */
.fee-table-wrap .list-table.tbl.data tbody tr:hover th {
    background-color: rgb(0 143 85 / 5%) !important;
}

/* 강좌명은 문장이라 낱말 단위로 줄이 바뀌게 한다 */
.fee-table-wrap .list-table.tbl.data .fee-col-name {
    word-break: keep-all;
}

/* 지급상태. 색만으로 뜻을 전하지 않도록 글자를 그대로 두고 색만 더한다.
   흰 바탕에서 미지급 #B62C38 은 5.4:1, 지급완료 #00733D 는 6.0:1 */
.fee-state {
    font-weight: 700;
}
.fee-state.is-wait {
    color: #D63D4A;
}
.fee-state.is-done {
    color: #008F55;
}

@media (max-width: 767px) {
    /* 카드형 전환은 공용 규칙이 td 만 다뤄, 강좌명 칸(th)은 제자리에 남고
       항목 이름도 안 붙는다. 강의홈 표(.lh-table-wrap)와 같은 방식으로
       th 도 다른 칸과 똑같이 '항목 이름 + 값' 한 줄이 되게 한다.
       (여백은 KRDS 공용 규칙이 두 칸에 똑같이 주고 있어 여기서 주지 않는다) */
    .fee-table-wrap .list-table.tbl.data tbody th {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
        border-bottom: none;
        text-align: left;
        font-size: 1.5rem;
        font-weight: 400;
    }
    .fee-table-wrap .list-table.tbl.data tbody th::before {
        content: attr(data-label);
        flex: 0 0 9rem;
        font-weight: 700;
        color: #1E2124;
        font-size: 1.5rem;
    }
    .fee-table-wrap .list-table.tbl.data tbody tr:hover th {
        background-color: transparent !important;
    }
}

/* ==================================================================== */
/* 마이페이지(학습매니저) > 나의 학당내역 > 학당 신청 및 관리             */
/*                                                                      */
/* 목록은 메시지함의 KRDS 기간 달력 + 시간표·수강이력의 .filter-wrap,     */
/* 표는 .list-table, 쪽 이동은 .krds-pagination.                        */
/* 신청 폼은 공간예약 제공자 등록 신청과 같은 .apply-form /              */
/* .apply-fieldset / .apply-addr-group / .orgreg-textarea 를 그대로 쓴다 */
/* ==================================================================== */

/* --- 목록 ------------------------------------------------------------ */
/* 신청일 기간 달력. 메시지함과 같은 값 */
.hall-search .hall-date-range,
.hall-search .hall-date-range .calendar-input {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.hall-search .hall-date-range .input-group.range > li:not(.mark) {
    flex: 0 0 21rem;
}
/* '-' 칸은 공용 값이 5.6rem 인데 입력 칸은 4.8rem 이라, 그대로 두면
   '-' 가 위로 올라가고 달력 단추는 아래로 내려간다 */
.hall-search .hall-date-range .input-group.range > li.mark {
    height: 4.8rem;
}
.hall-search .calendar-input .input-group > li .krds-input {
    width: 100%;
    max-width: 100%;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    font-size: 1.7rem;
    color: #1E2124;
}
.hall-search .calendar-input .input-group > li:last-child .krds-input {
    padding-right: 5.2rem;
}
.hall-search .calendar-input .form-btn-datepicker {
    right: 0.7rem;
}
.hall-search .calendar-input .form-btn-datepicker .svg-icon {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #33363D;
}
/* 기관명은 기관 전체 이름을 적는 칸이라 날짜 한 칸(21rem)으로는 좁다.
   같은 줄 오른쪽에 있는 '상태' 고르기 칸과 같은 폭이 되도록
   제 자리(.search-controls) 를 다 쓰게 둔다 */
.hall-search .hall-org-input {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}
.hall-search .hall-org-input .krds-input {
    width: 100%;
    max-width: 100%;
}

/* 표 머리. '희망 학당명' 한 칸만 두 줄(희망<br>학당명)이라 머리 줄 전체가
   두 줄 높이가 되고, 거기에 공용 위아래 여백 1.9rem 이 그대로 얹혀
   본문 한 줄짜리 칸보다 훨씬 높은 띠처럼 두꺼워 보인다.
   두 줄을 바짝 붙이고(1.3) 위아래 여백을 줄여 본문 줄과 높이를 맞춘다 */
.hall-table-wrap .list-table.tbl.data thead th {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    line-height: 1.3;
}

/* 마우스를 올린 줄의 배경.
   공용 규칙(.list-table.tbl.data tr:hover td)이 td 만 다뤄서, 기관명처럼
   th 로 둔 자리는 배경이 안 깔리고 그 칸만 하얗게 남는다 */
.hall-table-wrap .list-table.tbl.data tbody tr:hover th {
    background-color: rgb(0 143 85 / 5%) !important;
}
/* 선택 칸의 체크상자는 칸 가운데에 둔다 */
.hall-table-wrap .list-table.tbl.data .hall-col-chk {
    text-align: center;
}
.hall-table-wrap .list-table.tbl.data .hall-col-chk .krds-form-check {
    display: inline-flex;
    justify-content: center;
}
.hall-table-wrap .list-table.tbl.data .hall-col-chk .krds-form-check label {
    padding-left: 0;
}
/* 주소는 문장이라 낱말 단위로 줄이 바뀌게 한다 */
.hall-table-wrap .list-table.tbl.data .hall-col-addr {
    word-break: keep-all;
}
/* 날짜는 한 덩어리라 쪼개지지 않게 둔다 */
.hall-table-wrap .list-table.tbl.data .hall-col-date,
.hall-table-wrap .list-table.tbl.data .hall-col-tel {
    white-space: nowrap;
}

/* 기관명은 신청 내용으로 넘어가는 유일한 링크다. 공용 목록표는 제목 칸
   (td.col-title)만 링크로 보아 여기는 규칙을 따로 써 준다.
   다른 목록표 링크와 같이 초록(#00733D)에 밑줄을 둔다. 예전에 쓰던
   #008F55 는 흰 바탕에서 4.15:1 이라 본문 크기 글자에는 쓰지 않는다 */
.hall-table-wrap .list-table.tbl.data .hall-col-org a {
    /* 제목은 누를 곳이 뻔해서 색·밑줄로 따로 알릴 필요가 없다.
       올렸을 때만 초록 밑줄을 보인다 */
    color: #008F55;
    font-weight: 700;
    text-decoration: underline solid;
    text-decoration-skip-ink: auto;
}
/* 올렸을 때는 한 톤 진해진다. #00733D 는 흰 바탕에서 5.97:1 */
.hall-table-wrap .list-table.tbl.data .hall-col-org a:hover,
.hall-table-wrap .list-table.tbl.data .hall-col-org a:hover,
.hall-table-wrap .list-table.tbl.data .hall-col-org a:focus-visible {
    color: #00733D;
}
.hall-table-wrap .list-table.tbl.data .hall-col-org a:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}

/* 상태. 색만으로 뜻을 전하지 않도록 글자를 그대로 두고 색만 더한다.
   흰 바탕에서 승인 #00733D 는 6.0:1, 신청 #464C53 은 9.0:1,
   반려 #B62C38 은 5.4:1 */
.hall-state {
    font-weight: 700;
}
.hall-state.is-done {
    color: #008F55;
}
.hall-state.is-apply {
    color: #464C53;
}
.hall-state.is-reject {
    color: #B62C38;
}

/* 지우는 쪽과 새로 만드는 쪽을 양 끝으로 갈라 놓는다 */
.hall-actions {
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
    margin-top: 4rem;
}
.hall-actions .krds-btn {
    min-width: 10rem;
}

/* --- 신청 폼 --------------------------------------------------------- */
/* 전화번호·상태처럼 값이 짧은 칸은 절반만 쓴다 */
.hall-form .hall-half {
    max-width: 26rem;
}
/* 신청개요는 여러 줄을 적는 칸이라 가로를 다 쓴다 */
.hall-form .hall-textarea {
    max-width: none;
    min-height: 18rem;
}
/* 설립일은 한 칸짜리 달력 */
.hall-form .hall-date-one .calendar-input {
    max-width: 21rem;
}
/* 임기는 시작일-종료일 두 칸 */
.hall-form .hallTerm-range .input-group.range > li:not(.mark) {
    flex: 0 0 21rem;
}
.hall-form .hallTerm-range .input-group.range > li.mark {
    height: 5.6rem;
}
.hall-form .hallTerm-range,
.hall-form .hallTerm-range .calendar-input {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
/* 이 폼의 다른 입력 칸은 모두 5.6rem 이다. 달력이 붙은 칸만 4.8rem 이라
   설립일·임기 줄에서 칸이 혼자 낮아 보여 같은 값으로 맞춘다 */
.hall-form .calendar-input .input-group > li .krds-input {
    width: 100%;
    max-width: 100%;
    height: 5.6rem;
    padding: 0 5.2rem 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    font-size: 1.7rem;
    color: #1E2124;
}
.hall-form .calendar-input .form-btn-datepicker {
    right: 0.7rem;
}
.hall-form .calendar-input .form-btn-datepicker .svg-icon {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #33363D;
}
/* 안내 문구와 글자 수는 입력칸 아래 한 줄에 좌우로 나눠 놓는다.
   .form-conts 가 세로 방향 묶음이라 둘을 따로 묶어야 한 줄에 온다 */
.hall-textarea-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    width: 100%;
}
.hall-textarea-foot .form-hint-information {
    flex: 1 1 auto;
    min-width: 0;
}
/* 글자 수는 글자 폭만 쓰고 오른쪽 끝에 붙는다.
   공용값(width:100% + 오른쪽 정렬)을 그대로 두면 안내 문구를 밀어낸다 */
.hall-textarea-foot .tc-count {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

/* 화면이 좁아지면 열 개나 되는 칸이 그대로 눌려, 줄바꿈을 막아둔
   연락처·날짜 글자가 옆 칸으로 삐져나와 서로 겹친다.
   카드로 바뀌기 전(768px 이상)까지는 표를 줄이지 말고 최소 폭을 지켜
   감싼 자리(.krds-table-wrap)가 가로로 밀리게 한다.
   좌우 여백을 1.2rem -> 0.8rem 으로 줄이면 102rem 에서 모든 칸이 한 줄에
   들어가고, 1439px 화면부터는 밀 것도 없이 다 보인다 */
@media (min-width: 768px) {
    .hall-table-wrap.krds-table-wrap .list-table.tbl.data {
        min-width: 102rem;
    }
    .hall-table-wrap .list-table.tbl.data thead th,
    .hall-table-wrap .list-table.tbl.data tbody th,
    .hall-table-wrap .list-table.tbl.data tbody td {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
    /* 가로로 미는 자리는 마우스가 없어도 움직일 수 있어야 한다.
       마크업에서 tabindex="0" 을 준 자리의 초점 표시 */
    .hall-table-wrap.krds-table-wrap:focus-visible {
        outline: 0.2rem solid #008F55;
        outline-offset: 0.2rem;
    }
}

/* 좁은 화면 전용 필터 줄·시트는 기관별검색·강좌이력과 같은 컴포넌트
   (.space-mobile-bar / .space-filter-modal)를 그대로 쓴다.
   시트로 옮기는 칸(신청일·기관명·상태)에는 마크업에서 .is-adv 를 붙여
   두었고, 좁은 화면에서 그 칸을 감추는 것은 공용
   .pgm-search .pgm-field.is-adv 규칙이 맡는다 */

/* 시트 안의 날짜 칸(.sheet-date). 학당신청및관리에서 처음 만들었는데
   메시지함·시간표도 같은 칸을 쓰게 되어 화면 이름(.hall-)을 떼고
   시트 공통 클래스로 옮겼다.
   날짜 묶음은 KRDS 기본 폭(39.8rem)을 그대로 물려받아, 시트가 넓어지면
   다른 칸만 늘어나고 이 칸만 짧게 남는다. 제 자리를 다 쓰게 푼다 */
.space-filter-modal .sheet-date,
.space-filter-modal .sheet-date .calendar-input {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}

/* 시트 안 신청일 달력.
   KRDS 기본값은 달력 속 .calendar-wrap 이 떠오르는 층인데, 그 층은
   높이가 정해진 시트 본문에서 잘려 나온다. 그렇다고 통째로 제자리에
   펼치면 아래 기관명·상태 칸이 그만큼 밀려 내려간다.
   그래서 감싸는 .krds-calendar-area 를 신청일 칸 바로 아래에 띄우고,
   그 안의 .calendar-wrap 은 제자리에 둔다. 아래 칸들은 움직이지 않고
   달력이 그 위를 덮으며, 달력이 시트 본문보다 길면 본문을 굴려서 본다 */
.space-filter-modal .sheet-date .krds-calendar-area {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: auto;
    margin-top: 0.8rem;
    z-index: 20;
}
.space-filter-modal .sheet-date .calendar-wrap {
    position: static;
    width: 100%;
}
/* 시트에서는 시작·종료 칸이 좁아 'YYYY.MM.DD' 가 잘린다. 두 칸을
   위아래로 쌓고, 가로로 놓을 때만 뜻이 있는 가운데 '-' 는 지운다.
   기간(.range)이 아니라 날짜 하나만 받는 칸(시간표 일자)도 같은 규칙을
   받아야 한다. 안 그러면 그 칸만 KRDS 기본값(39.8rem, 5.6rem, 19px)으로
   남아 옆 선택상자보다 짧고 굵어지고, 달력 단추가 칸에서 떨어져 나온다 */
.space-filter-modal .sheet-date .input-group {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
}
.space-filter-modal .sheet-date .input-group > li.mark {
    display: none;
}
.space-filter-modal .sheet-date .input-group > li:not(.mark) {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    height: auto;
}
/* 쌓아 놓으면 어느 쪽이 시작이고 끝인지 알 수 없어 칸마다 이름을 붙인다.
   흰 바탕에서 #58616A 는 7.0:1 */
.sheet-date-sub {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    color: #58616A;
}
/* 시트는 폼 바깥이라 검색 상자에 준 칸 모양
   (.hall-search .calendar-input .input-group > li .krds-input)이 안 닿는다.
   그대로 두면 이 두 칸만 5.6rem 에 19px 글씨로 혼자 커진다.
   같은 시트의 기관명·상태 칸과 맞춰 같은 값을 다시 준다 */
.space-filter-modal .sheet-date .input-group > li .krds-input {
    width: 100%;
    max-width: 100%;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    font-size: 1.7rem;
    color: #1E2124;
}
/* 아이콘 단추가 글자 위에 겹치지 않게 아래(종료일) 칸만 오른쪽을 비운다 */
.space-filter-modal .sheet-date .input-group > li:last-child .krds-input {
    padding-right: 5.2rem;
}
/* 달력 단추는 검색 상자와 같은 2.4rem 아이콘 단추 그대로다. 다만 칸이
   세로로 쌓여 공용 값(묶음 전체의 세로 가운데)대로 두면 두 칸 사이에 뜬다.
   아래쪽 종료일 칸(4.8rem)의 가운데에 오도록 내린다 */
.sheet-date-btn.form-btn-datepicker {
    top: auto;
    bottom: calc((4.8rem - 2.4rem) / 2);
    right: 0.7rem;
    transform: none;
}
.sheet-date-btn .svg-icon {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #33363D;
}

/* --- 반응형 - 모바일(767px 이하) -------------------------------------- */
@media (max-width: 767px) {
    /* 기간 달력 두 칸은 위아래로 쌓는다 */
    .hall-search .hall-date-range,
    .hall-search .hall-date-range .calendar-input,
    .hall-search .hall-org-input,
    .hall-form .hallTerm-range,
    .hall-form .hallTerm-range .calendar-input {
        width: 100%;
    }
    .hall-search .hall-date-range .input-group.range > li:not(.mark),
    .hall-form .hallTerm-range .input-group.range > li:not(.mark) {
        flex: 1 1 0;
        min-width: 0;
    }
    /* 가운데 '-' 칸은 공용값이 width:100% 라, 좁아지면 이 칸이 줄 폭을
       통째로 차지하고 양옆 입력 칸이 0 으로 눌려 종료일이 화면 밖으로
       밀려난다(가로 스크롤까지 생긴다). 글자 폭만 쓰게 고정한다 */
    .hall-search .hall-date-range .input-group.range > li.mark,
    .hall-form .hallTerm-range .input-group.range > li.mark {
        flex: 0 0 auto;
        width: auto;
    }
    .hall-form .hall-date-one .calendar-input,
    .hall-form .hall-half {
        max-width: none;
    }
    /* 카드형 전환은 공용 규칙이 td 만 다뤄, 기관명 칸(th)은 제자리에 남고
       항목 이름도 안 붙는다. 강의홈 표와 같은 방식으로 맞춘다 */
    .hall-table-wrap .list-table.tbl.data tbody th {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
        border-bottom: none;
        text-align: left;
        font-weight: 400;
    }
    .hall-table-wrap .list-table.tbl.data tbody th::before {
        content: attr(data-label);
        flex: 0 0 9rem;
        font-weight: 700;
        color: #1E2124;
        font-size: 1.5rem;
    }
    .hall-table-wrap .list-table.tbl.data tbody tr:hover th {
        background-color: transparent !important;
    }
    .hall-table-wrap .list-table.tbl.data .hall-col-chk {
        text-align: left;
    }
    /* 단추는 장학금 신청서(.quiz-btn-wrap)와 같이 한 줄에 하나씩 쌓고
       가로를 다 쓴다. 보이는 순서는 마크업 순서 그대로 삭제 -> 등록 */
    .hall-actions {
        flex-direction: column;
        gap: 1.6rem;
        margin-top: 4rem;
    }
    .hall-actions .krds-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ==================================================================== */
/* 마이페이지(학습매니저) > 나의 학당내역 > 학당 운영 계획서 관리          */
/*                                                                      */
/* 목록은 학당 신청 및 관리와 같은 .filter-wrap + .list-table,           */
/* 상세는 기관정보 상세와 같은 .hd-table / .hk-info-table,               */
/* 등록 폼은 학당 신청과 같은 .apply-form / .apply-fieldset 를 쓴다.      */
/* 여기에는 이 화면에만 필요한 것만 적는다                                */
/* ==================================================================== */

/* --- 목록 : 검색 상자 ------------------------------------------------- */
/* 학당명·기관명 모두 이름을 적는 칸이라 제 자리를 다 쓴다 */
.plan-search .plan-sch-input {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}
.plan-search .plan-sch-input .krds-input {
    width: 100%;
    max-width: 100%;
}
/* 고를 칸이 둘뿐이라 단추는 아래 한 줄에 오른쪽으로 몰아 둔다 */
.plan-search .plan-btn-row {
    justify-content: flex-end;
}

/* --- 목록 : 표 -------------------------------------------------------- */
/* 마우스를 올린 줄의 배경.
   공용 규칙(.list-table.tbl.data tr:hover td)이 td 만 다뤄서, 강좌명처럼
   th 로 둔 자리는 배경이 안 깔리고 그 칸만 하얗게 남는다 */
.plan-table-wrap .list-table.tbl.data tbody tr:hover th {
    background-color: rgb(0 143 85 / 5%) !important;
}
/* 표 머리와 본문 줄의 좌우 여백. 칸이 일곱이라 공용값(1.2rem)이면
   1200px 아래에서 날짜가 옆 칸으로 삐져나온다 */
.plan-table-wrap .list-table.tbl.data thead th,
.plan-table-wrap .list-table.tbl.data tbody th,
.plan-table-wrap .list-table.tbl.data tbody td {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}
/* 강좌명은 문장이라 낱말 단위로 줄이 바뀌게 하고, 왼쪽에 맞춰 읽기 쉽게 둔다 */
.plan-table-wrap .list-table.tbl.data .plan-col-course {
    word-break: keep-all;
}
/* 날짜와 정원은 한 덩어리라 쪼개지지 않게 둔다 */
.plan-table-wrap .list-table.tbl.data .plan-col-date,
.plan-table-wrap .list-table.tbl.data .plan-col-cap {
    white-space: nowrap;
}
/* 강좌명은 상세로 넘어가는 유일한 링크다. 공용 목록표는 제목 칸
   (td.col-title)만 링크로 보아 여기는 그냥 검은 글씨로 남는다.
   다른 목록표 링크와 같이 초록(#00733D)에 밑줄을 둔다.
   공지·열람 중인 글은 같은 색에 굵기(700)로 갈린다 */
.plan-table-wrap .list-table.tbl.data .plan-col-course a {
    /* 제목은 누를 곳이 뻔해서 색·밑줄로 따로 알릴 필요가 없다.
       올렸을 때만 초록 밑줄을 보인다 */
    color: #008F55;
    font-weight: 700;
    text-decoration: underline solid;
    text-decoration-skip-ink: auto;
}
.plan-table-wrap .list-table.tbl.data .plan-col-course a:hover,
.plan-table-wrap .list-table.tbl.data .plan-col-course a:hover,
.plan-table-wrap .list-table.tbl.data .plan-col-course a:focus-visible {
    color: #00733D;
}
.plan-table-wrap .list-table.tbl.data .plan-col-course a:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}

/* 상태. 색만으로 뜻을 전하지 않도록 글자를 그대로 두고 색만 더한다.
   흰 바탕에서 모집중 #00733D 는 6.0:1, 진행중 #0B50D0 은 6.9:1,
   종료 #464C53 은 9.0:1 */
.plan-state {
    font-weight: 700;
}
.plan-state.is-open {
    color: #008F55;
}
.plan-state.is-ing {
    color: #0B50D0;
}
.plan-state.is-done {
    color: #464C53;
}

/* 새로 만드는 쪽만 있는 화면이라 오른쪽 끝에 하나만 둔다 */
.plan-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 3.2rem;
}
.plan-actions .krds-btn {
    min-width: 10rem;
}

/* --- 상세 ------------------------------------------------------------ */
/* 항목 이름 칸은 시안대로 왼쪽에 맞춘다.
   공용값(.hd-table-wrap.krds-table-wrap ... th)이 가운데라 같은 무게로 올린다 */
.plan-view-wrap.krds-table-wrap .hd-table.tbl.data th,
.plan-view-wrap.krds-table-wrap .hd-table.tbl.data td {
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
}
/* 여러 줄짜리 값(주소·이력·세부내용)은 줄 사이를 띄워 문단으로 보이게 한다 */
.plan-view-wrap .hd-table.tbl.data td > p {
    margin: 0;
    line-height: 1.6;
}
.plan-view-wrap .hd-table.tbl.data td > p + p {
    margin-top: 0.4rem;
}
/* 우편번호는 주소보다 한 단계 여린 정보다. 흰 바탕에서 #58616A 는 7.0:1 */
.plan-addr-zip {
    color: #58616A;
}

/* --- 등록 폼 ---------------------------------------------------------- */
/* 고르는 칸이 많아 한 줄에 다 못 들어간다. 줄이 바뀌어도 간격이 고르게 */
.krds-check-area.plan-check-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1.2rem 2.4rem;
}
.krds-check-area.plan-check-grid .krds-form-check {
    display: inline-flex;
    width: auto;
    margin: 0;
    white-space: nowrap;
}
/* 정원·수강료처럼 숫자 뒤에 단위가 붙는 칸.
   단위는 눈으로만 읽는 꾸밈이라 입력 칸 이름에는 넣지 않는다 */
.plan-unit-group {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.plan-unit-group .krds-input {
    flex: 0 0 16rem;
    max-width: 16rem;
}
.plan-unit {
    flex: 0 0 auto;
    font-size: 1.7rem;
    color: #1E2124;
}
/* 여러 줄 적는 칸은 가로를 다 쓴다 */
.plan-form .plan-textarea {
    width: 100%;
    max-width: 100%;
}
/* 안내 문구와 글자 수는 칸 아래 한 줄에 좌우로 나눠 놓는다.
   .form-conts 가 세로 방향 묶음이라 둘을 따로 묶어야 한 줄에 온다 */
.plan-textarea-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    width: 100%;
}
.plan-textarea-foot .form-hint-information {
    flex: 1 1 auto;
    min-width: 0;
}
/* 글자 수는 글자 폭만 쓰고 오른쪽 끝에 붙는다.
   공용값(width:100% + 오른쪽 정렬)을 그대로 두면 안내 문구를 밀어낸다 */
.plan-textarea-foot .tc-count {
    flex: 0 0 auto;
    width: auto;
    /* 안내 문구가 없는 칸(강사이력)에서도 오른쪽 끝에 붙게 한다 */
    margin: 0 0 0 auto;
    white-space: nowrap;
}

/* --- 반응형 - 태블릿 이하 --------------------------------------------- */
/* 칸이 일곱이라 좁아지면 글자가 옆 칸으로 삐져나온다.
   카드로 바뀌기 전(768px 이상)까지는 표를 줄이지 말고 최소 폭을 지켜
   감싼 자리(.krds-table-wrap)가 가로로 밀리게 한다 */
@media (min-width: 768px) {
    .plan-table-wrap.krds-table-wrap .list-table.tbl.data {
        min-width: 86rem;
    }
    /* 가로로 미는 자리는 마우스가 없어도 움직일 수 있어야 한다.
       마크업에서 tabindex="0" 을 준 자리의 초점 표시 */
    .plan-table-wrap.krds-table-wrap:focus-visible,
    .plan-view-wrap.krds-table-wrap:focus-visible {
        outline: 0.2rem solid #008F55;
        outline-offset: 0.2rem;
    }
}

/* --- 반응형 - 모바일(767px 이하) -------------------------------------- */
@media (max-width: 767px) {
    /* 카드형 전환은 공용 규칙이 td 만 다뤄, 강좌명 칸(th)은 제자리에 남고
       항목 이름도 안 붙는다. 학당 신청 및 관리와 같은 방식으로 맞춘다 */
    .plan-table-wrap .list-table.tbl.data tbody th {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
        border-bottom: none;
        text-align: left;
        font-weight: 400;
    }
    .plan-table-wrap .list-table.tbl.data tbody th::before {
        content: attr(data-label);
        flex: 0 0 7rem;
        font-weight: 700;
        color: #1E2124;
        font-size: 1.5rem;
    }
    .plan-table-wrap .list-table.tbl.data tbody td::before {
        flex: 0 0 7rem;
    }
    .plan-table-wrap .list-table.tbl.data tbody tr:hover th {
        background-color: transparent !important;
    }
    /* 카드형에서는 좌우 여백을 공용값으로 되돌린다 */
    .plan-table-wrap .list-table.tbl.data tbody th,
    .plan-table-wrap .list-table.tbl.data tbody td {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }
    .plan-actions {
        margin-top: 2.4rem;
    }
    .plan-actions .krds-btn {
        width: 100%;
        min-width: 0;
    }
    /* 상세 표도 항목 이름을 값 위로 올려 두 줄짜리 카드처럼 만든다 */
    .plan-view-wrap.krds-table-wrap {
        overflow-x: visible;
        width: 100%;
    }
    .plan-view-wrap.krds-table-wrap .hd-table.tbl.data,
    .plan-view-wrap.krds-table-wrap .hd-table.tbl.data tbody,
    .plan-view-wrap.krds-table-wrap .hd-table.tbl.data tr,
    .plan-view-wrap.krds-table-wrap .hd-table.tbl.data th,
    .plan-view-wrap.krds-table-wrap .hd-table.tbl.data td {
        display: block;
        width: 100%;
    }
    .plan-view-wrap.krds-table-wrap .hd-table.tbl.data tr {
        padding-block: 1.2rem;
        border-bottom: 0.1rem solid #CDD1D5;
    }
    /* 항목 이름은 값 위로 올린다. 이름 칸의 옅은 바탕은 줄을 가로로
       가르는 표에서만 뜻이 있어, 쌓아 놓는 이 폭에서는 없앤다 */
    .plan-view-wrap.krds-table-wrap .hd-table.tbl.data th {
        padding: 0 1.6rem 0.4rem;
        border-bottom: none;
        background-color: transparent;
        font-size: 1.5rem;
    }
    .plan-view-wrap.krds-table-wrap .hd-table.tbl.data td {
        padding: 0 1.6rem;
        border-bottom: none;
    }
    /* 단추는 한 줄에 하나씩 쌓고 가로를 다 쓴다 */
    .plan-view-actions,
    .plan-form-actions {
        flex-direction: column;
        gap: 1.6rem;
    }
    .plan-view-actions .krds-btn,
    .plan-form-actions .krds-btn {
        width: 100%;
        min-width: 0;
        margin-right: 0;
    }
    /* 숫자 칸도 가로를 다 쓴다 */
    .plan-unit-group .krds-input {
        flex: 1 1 auto;
        max-width: none;
    }
}

/* ==================================================================== */
/* 마이페이지(학습매니저) > 나의 학당내역 > 학당 학습자 카드 관리          */
/*                                                                      */
/* 목록은 학당 운영 계획서 관리와 같은 .filter-wrap + .list-table,        */
/* 상세의 두 갈래는 연혁 화면과 같은 .tab.fill.full + .tab-conts,         */
/* 첨부파일은 공지사항 상세와 같은 .detail-attach-list 를 그대로 쓴다.     */
/* 여기에는 이 화면에만 필요한 것만 적는다                                */
/* ==================================================================== */

/* --- 단추에 붙는 아이콘 ----------------------------------------------- */
/* 올리기·내려받기·엑셀 세 가지는 이 화면에서만 쓴다.
   그림을 그대로 깔지 않고 가림막(mask)으로 두어, 단추 글자색을 따라
   같은 색으로 칠해지게 한다. 그래야 단추 종류가 바뀌어도 안 어긋난다 */
.svg-icon.ico-upload,
.svg-icon.ico-download,
.svg-icon.ico-excel {
    background-color: currentColor;
    -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;
}
.svg-icon.ico-upload {
    -webkit-mask-image: url(../img/component/icon/ico_upload.png);
    mask-image: url(../img/component/icon/ico_upload.png);
    width: 1.5rem !important;
    height: 1.583rem !important;
}
.svg-icon.ico-download {
    -webkit-mask-image: url(../img/component/icon/ico_download.png);
    mask-image: url(../img/component/icon/ico_download.png);
    width: 1.5rem !important;
    height: 1.583rem !important;
}
.svg-icon.ico-excel {
    -webkit-mask-image: url(../img/component/icon/ico_excel.png);
    mask-image: url(../img/component/icon/ico_excel.png);
    width: 1.5rem !important;
    height: 1.667rem !important;
}

/* --- 목록 : 검색 상자 ------------------------------------------------- */
/* 학당명·기관명 모두 이름을 적는 칸이라 제 자리를 다 쓴다 */
.card-search .card-sch-input {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}
.card-search .card-sch-input .krds-input {
    width: 100%;
    max-width: 100%;
}
.card-search .card-btn-row {
    justify-content: flex-end;
}

/* --- 목록·수강자·이수자 표 공통 --------------------------------------- */
/* 마우스를 올린 줄의 배경.
   공용 규칙(.list-table.tbl.data tr:hover td)이 td 만 다뤄서, 학당명처럼
   th 로 둔 자리는 배경이 안 깔리고 그 칸만 하얗게 남는다 */
.card-table-wrap .list-table.tbl.data tbody tr:hover th {
    background-color: rgb(0 143 85 / 5%) !important;
}
/* 칸이 많아 공용 좌우 여백(1.2rem)이면 좁은 폭에서 글자가 옆 칸으로 삐져나온다 */
.card-table-wrap .list-table.tbl.data thead th,
.card-table-wrap .list-table.tbl.data tbody th,
.card-table-wrap .list-table.tbl.data tbody td {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}
/* 강좌명은 문장이라 낱말 단위로 줄이 바뀌게 한다 */
.card-table-wrap .list-table.tbl.data .card-col-course {
    word-break: keep-all;
}
/* 한 덩어리로 읽는 값은 쪼개지지 않게 둔다 */
.card-table-wrap .list-table.tbl.data .card-col-date,
.card-table-wrap .list-table.tbl.data .card-col-birth,
.card-table-wrap .list-table.tbl.data .card-col-tel,
.card-table-wrap .list-table.tbl.data .card-col-cap,
.card-table-wrap .list-table.tbl.data .card-col-hour {
    white-space: nowrap;
}


.card-table-wrap .list-table.tbl.data .card-col-tel .krds-btn:hover {
    font-weight: 700;
    color: #008F55;
}


/* 학당명은 수강자 등록 관리로 넘어가는 유일한 링크다. 공용 목록표는 제목
   칸(td.col-title)만 링크로 보아 여기는 그냥 검은 글씨로 남는다.
   다른 목록표 링크와 같이 초록(#00733D)에 밑줄을 둔다.
   공지·열람 중인 글은 같은 색에 굵기(700)로 갈린다 */
.card-table-wrap .list-table.tbl.data .card-col-hall a {
    /* 제목은 누를 곳이 뻔해서 색·밑줄로 따로 알릴 필요가 없다.
       올렸을 때만 초록 밑줄을 보인다 */
    color: #008F55;
    font-weight: 700;
    text-decoration: underline solid;
    text-decoration-skip-ink: auto;
}
.card-table-wrap .list-table.tbl.data .card-col-hall a:hover,
.card-table-wrap .list-table.tbl.data .card-col-hall a:hover,
.card-table-wrap .list-table.tbl.data .card-col-hall a:focus-visible {
    color: #00733D;
}
.card-table-wrap .list-table.tbl.data .card-col-hall a:focus-visible,
.card-table-wrap.krds-table-wrap:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}
/* 선택 칸의 체크상자는 칸 가운데에 둔다 */
.card-table-wrap .list-table.tbl.data .card-col-chk {
    text-align: center;
}
.card-table-wrap .list-table.tbl.data .card-col-chk .krds-form-check {
    display: inline-flex;
    justify-content: center;
}
.card-table-wrap .list-table.tbl.data .card-col-chk .krds-form-check label {
    padding-left: 0;
}
/* 아이디는 영문·숫자라 줄바꿈 자리를 못 찾으면 칸을 밀어낸다 */
.card-table-wrap .list-table.tbl.data .card-col-id {
    word-break: break-all;
}

/* 이수시간은 그 자리에서 고치는 칸이라 표 안에 입력 칸을 둔다 */
.card-hour-input {
    width: 100%;
    max-width: 8rem;
    height: 4rem;
    padding: 0 0.8rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    text-align: center;
    font-size: 1.6rem;
    color: #1E2124;
}

/* 이수 여부. 색만으로 뜻을 전하지 않도록 글자를 그대로 두고,
   화면에 안 보이는 풀이말을 함께 둔다.
   흰 바탕에서 이수 #00733D 는 6.0:1, 미이수 #B62C38 은 5.4:1 */
.card-pf {
    font-weight: 700;
}
.card-pf.is-pass {
    color: #008F55;
}
.card-pf.is-fail {
    color: #D63D4A;
}

/* --- 상세 : 강좌 정보 ------------------------------------------------- */
.card-course {
    margin-bottom: 6.2rem;
}
.card-course-head {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding-bottom: 1.6rem;
    border-bottom: 0.2rem solid #1E2124;
}
.card-course-tit {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1E2124;
    word-break: keep-all;
}
/* 과정분류 딱지. #002770 바탕에 흰 글자는 13.9:1 */
.card-course-badge {
    flex: 0 0 auto;
    padding: 0.4rem 1.2rem;
    border-radius: 50rem;
    background-color: #002770;
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFFFFF;
}
/* 항목과 값이 짝을 이루는 짧은 정보라 정의 목록으로 둔다.
   화면에서는 두 칸이지만 읽는 차례는 마크업 그대로 이어진다 */
.card-info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 4rem;
    margin: 0.8rem 0 4rem;
}
.card-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 1.6rem 0;
    border-bottom: 0.1rem solid #E5E8EC;
}
.card-info-item dt {
    flex: 0 0 12rem;
    font-size: 1.7rem;
    color: #464C53;
}
.card-info-item dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.7rem;
    font-weight: 600;
    color: #1E2124;
    word-break: keep-all;
}
.card-attach-list {
    margin-bottom: 4rem;
}
.card-course-actions {
    display: flex;
    justify-content: flex-end;
}
.card-course-actions .krds-btn {
    min-width: 10rem;
}

/* --- 상세 : 두 갈래 --------------------------------------------------- */
/* 갈래 단추는 연혁 화면과 같이 양 끝을 둥글린다 */
.card-tab.tab.fill.full {
    margin-bottom: 3.2rem;
}
.card-tab.tab.fill.full > ul > li:first-of-type .btn-tab {
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
}
.card-tab.tab.fill.full > ul > li:last-of-type .btn-tab {
    border-top-right-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}
.card-tab .btn-tab {
    height: 5.6rem;
    font-size: 1.7rem;
    font-weight: 500;
}
.card-tab .active .btn-tab {
    font-weight: 700;
}
/* 갈래 안쪽 여백은 위 gap 하나로 맞춘다.
   갈래는 flex 묶음이라 좁은 화면에서 공용 규칙이 row-gap(2.4rem)을 붙인다.
   그러면 '총 게시물' 줄이 이미 가진 아래 여백(2.4rem) 위에 더해져 4.8rem 으로
   벌어지고, 한 덩어리로 감싼 이수자 갈래(2.4rem)와 간격이 달라진다.
   안쪽 요소가 저마다 여백을 갖고 있으므로 gap 을 끄고 그 여백만 쓴다 */
.card-tab-wrap .tab-conts {
    margin-top: 0;
    row-gap: 0;
}
/* 갈래를 키보드로 옮겨 왔을 때 어디에 왔는지 보이게 한다 */
.card-tab-wrap .tab-conts:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.4rem;
}

/* 갈래 아래 단추 줄 */
.card-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.6rem;
    margin-top: 4rem;
}
.card-panel-actions .krds-btn {
    min-width: 9rem;
}
/* 이수자 갈래는 문서를 주고받는 단추가 왼쪽, 저장이 오른쪽 끝 */
.card-fin-actions {
    justify-content: space-between;
    align-items: flex-start;
}
.card-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

/* --- 학습자 검색 팝업 ------------------------------------------------- */
/* 칸이 일곱인 표가 들어가는 팝업이라 공용 폭(76rem)으로는 좁다.
   공용값과 같은 무게로 올려야 넓어진다 */
.krds-modal.card-find-modal .modal-dialog {
    width: 100%;
    max-width: 108rem;
}
.card-find-search {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 4rem;
}
.card-find-search .search-controls {
    flex: 1 1 auto;
    min-width: 0;
}
/* 1023px 이하에서는 공용값이 고르기 칸을 20% 로 줄여 '연락처' 가 잘린다.
   가장 긴 항목이 들어갈 만큼은 남긴다 */
.card-find-search .card-find-type {
    min-width: 11rem;
}
.card-find-search .card-find-input .krds-input {
    max-width: 100%;
}

/* 단추 줄은 본문 밖 .modal-btn 자리라 여백은 공용값을 그대로 쓰고
   사이 간격만 좁힌다 */
.krds-modal.card-find-modal .modal-dialog .modal-btn {
    gap: 1.2rem;
}

/* --- 반응형 - 태블릿 이하 --------------------------------------------- */
/* 칸이 많아 좁아지면 글자가 옆 칸으로 삐져나온다.
   카드로 바뀌기 전(768px 이상)까지는 표를 줄이지 말고 최소 폭을 지켜
   감싼 자리(.krds-table-wrap)가 가로로 밀리게 한다 */
@media (min-width: 768px) {
    .card-table-wrap.krds-table-wrap .list-table.tbl.data {
        min-width: 82rem;
    }
    .card-fin-wrap.krds-table-wrap .list-table.tbl.data {
        min-width: 96rem;
    }
}

/* --- 반응형 - 모바일(767px 이하) -------------------------------------- */
@media (max-width: 767px) {
    /* 카드형 전환은 공용 규칙이 td 만 다뤄, 학당명·아이디 칸(th)은 제자리에
       남고 항목 이름도 안 붙는다. 학당 신청 및 관리와 같은 방식으로 맞춘다 */
    .card-table-wrap .list-table.tbl.data tbody th {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
        border-bottom: none;
        text-align: left;
        font-weight: 400;
    }
    .card-table-wrap .list-table.tbl.data tbody th::before {
        content: attr(data-label);
        flex: 0 0 7rem;
        font-weight: 700;
        color: #1E2124;
        font-size: 1.5rem;
    }
    .card-table-wrap .list-table.tbl.data tbody td::before {
        flex: 0 0 7rem;
    }
    .card-table-wrap .list-table.tbl.data tbody tr:hover th {
        background-color: transparent !important;
    }
    .card-table-wrap .list-table.tbl.data tbody th,
    .card-table-wrap .list-table.tbl.data tbody td {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }
    /* 카드형에서는 선택 칸도 항목 이름 옆에 붙는다 */
    .card-table-wrap .list-table.tbl.data .card-col-chk {
        text-align: left;
    }
    .card-hour-input {
        max-width: 10rem;
    }

    /* 강좌 정보는 한 칸으로 쌓는다. 항목 이름을 값 위로 올리면 줄 수가
       두 배가 되고 이름과 값이 한눈에 안 묶인다. 강사출석체크 화면
       (.payment-detail-table)과 같이 이름은 왼쪽에 10rem 으로 두고
       값이 그 옆에 붙게 한다 */
    .card-info-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-bottom: 3.2rem;
        margin-top: 2.4rem;
    }
    .card-course-head {
        padding-bottom: 2rem;
    }
    .card-info-item {
        gap: 2.4rem;
        padding: 1.2rem 0;
    }
    /* 첫 줄은 위 검은 선에 바짝 붙인다 */
    .card-info-item:first-child {
        padding-top: 0;
    }
    .card-info-item dt {
        flex: 0 0 10rem;
    }
    .card-course-tit {
        font-size: 2.5rem;
    }

    /* KRDS 기본값은 좁은 화면에서 탭을 글자 폭으로 줄이고 테두리를 없앤다.
       탭이 여럿일 때 좌우로 밀어 보라는 뜻인데, 여기는 갈래가 둘뿐이라
       단추만 덩그러니 뜬 것처럼 보인다. 연혁 화면과 같이 그 부분만 되돌려
       좁은 화면에서도 좌우 반반으로 자리를 다 쓰게 한다 */
    .card-tab.tab.fill.full > ul {
        gap: 0;
    }
    .card-tab.tab.fill.full > ul > li {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }
    .card-tab.tab.fill.full .btn-tab {
        border-width: 0.1rem;
    }
    /* 가운데가 맞붙는 자리라 둥근 모서리와 겹치는 선을 없앤다 */
    .card-tab.tab.fill.full > ul > li:first-of-type .btn-tab {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .card-tab.tab.fill.full > ul > li:last-of-type .btn-tab {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .card-tab.tab.fill.full > ul > li + li .btn-tab {
        border-left: none;
    }

    /* 단추는 한 줄에 하나씩 쌓고 가로를 다 쓴다.
       이수자 갈래는 기본 동작인 '저장'을 맨 위로 올린다 */
    .card-course-actions .krds-btn,
    .card-panel-actions .krds-btn {
        width: 100%;
        min-width: 0;
    }
    .card-panel-actions {
        flex-direction: column;
    }
    .card-fin-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 1.2rem;
    }
    .card-file-actions {
        flex-direction: column;
        gap: 1.2rem;
    }
    .card-file-actions .krds-btn {
        width: 100%;
    }

    /* 공용값이 '목록 표시 개수' 를 좁은 화면에서 감춘다. 이 팝업의 개수 줄은
       그것 하나뿐이라, 감싸는 자리만 남아 위에 빈 칸이 생긴다. 같이 감춘다 */
    .card-find-modal .result-opts {
        display: none;
    }

    /* 팝업 : 검색 줄을 위아래로 쌓고, 단추는 가로를 다 쓴다 */
    .card-find-search {
        flex-direction: column;
        align-items: stretch;
    }
    .card-find-search .card-find-type {
        flex: 0 0 auto;
        width: 100%;
    }

    /* 단추 줄은 공용 .modal-btn 이 가로로 잡아 두므로 같은 무게로 올린다.
       기본 동작인 '등록'을 맨 위로 올린다 */
    .krds-modal.card-find-modal .modal-dialog .modal-btn {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .krds-modal.card-find-modal .modal-dialog .modal-btn .krds-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ==================================================================== */
/* 인트로 (Intro.html)                                                   */
/*                                                                      */
/* 다섯 장면을 한 자리에 겹쳐 두고 차례로 하나씩만 보인 뒤 메인으로 넘어간다. */
/* 이 화면에서만 쓰는 규칙이라 body 의 .intro-page 안쪽으로 묶어,          */
/* 다른 화면의 값과 부딪히지 않게 한다                                     */
/* ==================================================================== */
.intro-page {
    overflow: hidden;
    background-color: #FFFFFF;
}

/* 화면을 다 쓰는 무대 */
.intro-page .intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 4rem;
}

.intro-page .intro-stage {
    position: relative;
    width: 100%;
    max-width: 128rem;
    height: 100%;
    /* 보기만 하는 자리다. 화면을 다 덮고 있어 그냥 두면 위에 있는
       건너뛰기 단추가 안 눌린다 */
    pointer-events: none;
}

/* 장면. 평소에는 안 보이고, 차례가 오면 살짝 떠오르며 나타난다 */
.intro-page .intro-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(2.4rem) scale(0.98);
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.intro-page .intro-scene.is-in {
    opacity: 1;
    transform: none;
}

/* 글월. 화면 폭에 따라 글자 크기가 같이 줄고 늘어난다.
   흰 바탕에서 #1E2124 는 15.9:1, 강조색 #008F55 는 4.2:1 인데
   6.4rem 굵은 글씨(대형 텍스트)라 AA 기준 3:1 을 넘는다 */
.intro-page .intro-copy {
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 6.4rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #1E2124;
    text-align: center;
    word-break: keep-all;
}
.intro-page .intro-copy em {
    font-style: normal;
    color: #008F55;
}
/* 넉 장째는 글월 전체가 강조색이다 */
.intro-page .intro-copy.is-point {
    color: #008F55;
    letter-spacing: 0;
}

/* 재는 동안만 제자리에 세워 둔다. 눈에는 보이지 않는다 */
.intro-page .intro-scene.is-measuring {
    transform: none;
    transition: none;
}

/* 넉 장째 글월. 가운데 '+' 가 앞 장면의 십자가가 내려앉을 자리다 */
.intro-page .intro-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.34em;
}
/* '+' 는 글자가 아니라 두 줄로 그린다. 그래야 자리와 크기가 딱 정해져
   십자 사진이 정확히 그 위에 내려앉는다 */
.intro-page .intro-plus {
    position: relative;
    flex: 0 0 auto;
    width: 0.62em;
    height: 0.62em;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.intro-page .intro-plus.is-on {
    opacity: 1;
}
.intro-page .intro-plus::before,
.intro-page .intro-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #008F55;
}
.intro-page .intro-plus::before {
    width: 100%;
    height: 0.17em;
    transform: translate(-50%, -50%);
}
.intro-page .intro-plus::after {
    width: 0.17em;
    height: 100%;
    transform: translate(-50%, -50%);
}

/* 십자 사진.
   사진 파일(intro_image.jpg)은 네모난 그림이고, 십자 모양은 여기서 잘라 낸다.
   가로 팔은 위아래 36.5~62%, 세로 기둥은 좌우 35.5~65% 자리로,
   시안의 십자와 같은 비율이다.
   장면 사이를 건너다니므로 무대 한가운데에 따로 세워 둔다 */
.intro-page .intro-cross {
    --intro-cross-height: min(56vh, 46rem);
    position: absolute;
    top: 50%;
    left: 50%;
    /* 원본 십자의 가로세로비(2291 : 2433) */
    width: calc(var(--intro-cross-height) * 0.9417);
    height: var(--intro-cross-height);
    transform: translate(-50%, -50%);
    transform-origin: center center;
    opacity: 0;
    background-image: url(../img/intro_image.jpg);
    background-position: center center;
    background-size: cover;
    clip-path: polygon(
        35.5% 0, 65% 0, 65% 36.5%,
        100% 36.5%, 100% 62%, 65% 62%,
        65% 100%, 35.5% 100%, 35.5% 62%,
        0 62%, 0 36.5%, 35.5% 36.5%
    );
    transition: opacity 0.6s ease;
    will-change: opacity, transform;
}
.intro-page .intro-cross.is-in {
    opacity: 1;
}

/* 로고. 인트로 전용 그림(intro_logo.png)이라 크게 키워도 흐려지지 않는다.
   높이는 원본 비율대로 따라간다 */
.intro-page .intro-logo {
    width: min(80%, 44rem);
    height: auto;
    object-fit: contain;
}

/* 남은 시간을 알려 주는 가는 줄. 뜻을 나르지 않으므로 보조기기에서는 뺀다 */
.intro-page .intro-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.3rem;
    background-color: #E5E8EC;
}
.intro-page .intro-progress-bar {
    width: 0;
    height: 100%;
    background-color: #008F55;
}

/* 건너뛰기. 기다리지 않고 바로 들어갈 수 있어야 한다 */
.intro-page .intro-skip {
    position: absolute;
    top: 2.4rem;
    right: 2.4rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 4.4rem;
    padding: 0 1.8rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 50rem;
    background-color: #FFFFFF;
    font-size: 1.6rem;
    font-weight: 700;
    /* 흰 바탕에서 #464C53 은 9.0:1 */
    color: #464C53;
    cursor: pointer;
}
.intro-page .intro-skip:hover {
    border-color: #008F55;
    color: #00733D;
}
.intro-page .intro-skip:focus-visible {
    outline: 0.2rem solid #008F55;
    outline-offset: 0.2rem;
}
.intro-page .intro-skip::after {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    border-top: 0.2rem solid currentColor;
    border-right: 0.2rem solid currentColor;
    transform: rotate(45deg);
}

/* 움직임을 줄여 달라고 한 이용자에게는 움직임 없이 보여 준다 */
@media (prefers-reduced-motion: reduce) {
    .intro-page .intro-scene {
        transform: none;
        transition: opacity 0.01s linear;
    }
}

@media (max-width: 767px) {
    .intro-page .intro {
        padding: 2rem;
    }
    .intro-page .intro-cross {
        --intro-cross-height: min(44vh, 30rem);
    }
    .intro-page .intro-logo {
        width: min(86%, 26rem);
    }
    .intro-page .intro-skip {
        top: 1.6rem;
        right: 1.6rem;
        height: 4rem;
        padding: 0 1.4rem;
        font-size: 1.5rem;
    }
}

/* ==================================================================== */

/* 교육과정 분류 표 (인재평생교육 > 세종시민대학 집현전)                    */
/*                                                                      */
/* 조직도 표(.org-table)와 같은 결로 맞춘다. 위 굵은 선, 칸 사이 옅은 선,   */
/* 가운데 정렬, 같은 여백·글자 크기를 그대로 쓴다.                          */
/* 다른 점은 하나뿐이다. 이 표는 칸이 여러 줄에 걸쳐 합쳐져서,             */
/* 조직도처럼 th + th 로만 세로선을 그으면 합쳐진 칸 다음에 오는 칸이       */
/* 줄의 첫 자식이 되어 왼쪽 선을 잃는다. 그래서 모든 칸에 왼쪽 선을 두고    */
/* 진짜 첫 칸(.cc-col1)에서만 지운다                                      */
/* ==================================================================== */
.cc-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 0.2rem solid #1E2124;
}

/* 자리가 모자라면 가로로 민다. 조직도 표와 같은 규칙·같은 최소 폭 */
.cc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cc-table-wrap.krds-table-wrap .cc-table.tbl {
    min-width: 73.2rem;
}

/* KRDS 기본값이 우선순위가 높아 밀리는 자리라 같은 수준으로 올려 이긴다 */
.cc-table-wrap.krds-table-wrap .cc-table.tbl.data th,
.cc-table-wrap.krds-table-wrap .cc-table.tbl.data td {
    padding: 1.6rem 1.2rem;
    border-bottom: 0.1rem solid #CDD1D5;
    border-left: 0.1rem solid #CDD1D5;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
}
/* 표 바깥 왼쪽에는 선을 두지 않는다(조직도 표와 같음) */
.cc-table-wrap.krds-table-wrap .cc-table.tbl.data .cc-col1 {
    border-left: 0;
}

.cc-table thead th {
    font-weight: 700;
    color: #1E2124 !important;
    font-size: 1.7rem !important;
}
.cc-table tbody th,
.cc-table tbody td {
    color: #464C53;
    font-weight: 400;
}
/* 줄을 대표하는 왼쪽 세 칸은 옅은 바탕으로 구분한다.
   조직도 업무분장 표의 직위 칸과 같은 방식.
   KRDS 기본값(.krds-table-wrap .tbl.data tbody th)이 더 무거워서
   같은 수준으로 올려야 먹힌다 */
.cc-table-wrap.krds-table-wrap .cc-table.tbl.data tbody th {
    background-color: #F3F6F9;
    color: #464C53;
    font-weight: 700;
}

/* 정의와 소분류는 글이 길어 왼쪽으로 맞춰야 읽기 편하다.
   조직도 업무분장 표의 담당분야 칸과 같은 이유 */
.cc-table-wrap.krds-table-wrap .cc-table.tbl.data .cc-define,
.cc-table-wrap.krds-table-wrap .cc-table.tbl.data .cc-small {
    text-align: left;
}

/* ==================================================================== */
/* .hd-table 을 좁은 화면에서도 표 모양 그대로 두기 (.keep-table)          */
/*                                                                      */
/* .hd-table 은 767px 이하에서 한 줄을 카드 한 장으로 세운다.             */
/* 칸이 적고 뜻이 표로 읽혀야 하는 표는 그 전환이 오히려 불편하다.         */
/* 감싼 자리에 .keep-table 을 붙이면 카드 전환을 되돌리고,                 */
/* 자리가 모자랄 때 가로로 밀어 보게 한다(조직도·센터소개 표와 같은 방식). */
/* 선택자에 .keep-table 을 얹어 앞의 카드형 규칙보다 무겁게 만든다          */
/* ==================================================================== */
@media (max-width: 47.9375em) {
    .hd-table-wrap.keep-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 카드형으로 바꿀 때 최소 폭을 0 으로 풀어 두는 규칙
       (.hd-table-wrap.krds-table-wrap .hd-table.tbl.data) 이 있어
       그보다 한 단계 무겁게 적어야 한다 */
    .hd-table-wrap.keep-table.krds-table-wrap .hd-table.tbl.data {
        min-width: 73.2rem;
    }

    /* 숨겨 두었던 머리글을 되살린다 */
    .hd-table-wrap.keep-table .hd-table.tbl.data thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    /* block 으로 바꿔 두었던 것들을 표 본래 값으로 되돌린다.
       원래 규칙이 .hd-table-wrap .hd-table.tbl.data ... 라 무거우므로
       여기서도 .tbl.data 를 그대로 적어 한 단계 더 얹는다 */
    .hd-table-wrap.keep-table .hd-table.tbl.data {
        display: table;
    }
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody {
        display: table-row-group;
    }
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody tr {
        display: table-row;
        padding-block: 0;
    }
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody th,
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody td {
        display: table-cell;
        width: auto;
        /* 여백도 넓은 화면과 같아야 한다. 예전에는 1.6rem 을 박아 뒀는데
           실제 넓은 화면 값은 KRDS 토큰의 1.2rem 이라, 모바일에서만 줄 높이가
           52px -> 62px 로 늘어 보였다. 토큰을 그대로 쓴다 */
        padding: var(--krds-table--data-tbody-padding) var(--krds-table--data-tbody-padding-sides);
        /* 카드형이 선을 모두 지워 두었다. 넓은 화면과 같은 선으로 되돌린다.
           칸 사이 세로선(오른쪽)까지 살려야 표로 읽힌다 */
        border-top: 0;
        border-right: 0.1rem solid #CDD1D5;
        border-bottom: 0.1rem solid #CDD1D5;
        border-left: 0;
        vertical-align: middle;
        /* 카드형은 글자를 1.5rem 으로 줄여 놓는다. 표 모양을 지킬 때는
           넓은 화면과 같은 크기여야 해서 KRDS 의 PC 값을 그대로 쓴다 */
        font-size: var(--krds-table--data-tbody-pc-font-size);
        /* 줄 머리칸만 1.7 이 걸려 있어 모바일에서 한 줄이 더 높았다 */
        line-height: 1.6;
    }
    /* 정렬은 표마다 다르다(줄 머리칸은 가운데, 긴 설명은 왼쪽).
       한꺼번에 가운데로 밀면 왼쪽 정렬이던 칸까지 바뀌므로,
       넓은 화면에서 가운데였던 칸만 되돌린다 */
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody th,
    .hd-table-wrap.keep-table .hd-table.tbl.data .hd-col-tel {
        text-align: center;
    }
    /* 카드형이 지워 두었던 바탕색·굵기도 넓은 화면과 같게 되돌린다.
       줄을 대표하는 왼쪽 칸은 옅은 바탕으로 구분한다 */
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody th {
        background-color: #F3F6F9;
        font-weight: 700;
    }
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody td {
        background-color: #FFFFFF;
    }
    /* 맨 오른쪽 칸은 표 바깥이라 세로선을 두지 않는다 */
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody th:last-child,
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody td:last-child {
        border-right: 0;
    }
    /* 표 맨 위 굵은 선은 카드형일 때만 표 자체에 걸어 두었다.
       표 모양을 지킬 때는 머리글(thead th)이 그 선을 그리므로,
       그대로 두면 선이 두 겹으로 보인다.
       단 머리글이 아예 없는 표(지원 개요 등)는 표 자체가 그 선을 갖고
       있으므로 지우면 안 된다. :has(thead) 로 머리글 있는 표만 고른다 */
    .hd-table-wrap.keep-table .hd-table.tbl.data:has(thead) {
        border-top: 0;
    }

    /* 칸 이름을 글자로 덧붙이던 것을 끈다. 머리글이 보이므로 필요 없다 */
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody th::before,
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody td::before {
        content: none;
    }

    /* 칸 안의 목록도 넓은 화면과 같은 줄 간격으로 둔다.
       카드형 규칙이 1.6 으로 늘려 놓아 줄 높이가 달라 보였다 */
    .hd-table-wrap.keep-table .hd-table.tbl.data .hd-col-duty li {
        line-height: 1.5;
    }

    /* 항목이 여러 줄인 칸은 넓은 화면과 같이 왼쪽으로 맞춘다 */
    .hd-table-wrap.keep-table .hd-table.tbl.data tbody .hd-col-duty {
        text-align: left;
    }
}


/* ==================================================================== */
/* 연구원소개 > 비전                                                     */
/* 큰 상자 테두리·알약 라벨은 ESG·친환경경영 추진전략과 같은 값,           */
/* 목표 카드 색은 ESG 파란 칸(#EDF2FF / #91A7FF / #1F42C0)과 같은 값이다.  */
/* 한쪽을 고쳐도 다른 쪽이 흔들리지 않게 .vis- 로 나눠 쓴다                 */
/* ==================================================================== */
.vis-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 2.4rem;
}
.vis-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14.8rem;
    margin: 0;
    padding: 1.6rem 2.4rem;
    border-radius: 50rem;
    background-color: #51657E;
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
}
.vis-headline {
    margin: 3.2rem 0 0;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    text-align: center;
    word-break: keep-all;
}
.vis-point {
    color: #008F55;
}

/* 빌딩 배경 + 가운데 초록 화살표
   - building_background.png(3908x999)는 위쪽 238px 가 투명 여백이라, 빌딩이 실제로
     있는 부분(3908x761) 비율로 영역을 잡고 그림은 ::before 로 위로 넘치게 그린다
   - 그림 속 빌딩색(#D0D6E1)이 시안(#F2F3F7)보다 진해 빌딩에만 불투명도 0.28 을 준다
     (피그마 레이어 투명도가 내보낸 PNG 에는 빠져 있음)
   - 빌딩 바닥이 카드 머리(제N목표) 아래 끝과 맞도록, 아래 카드를 머리 높이만큼 겹친다 */
.vis-city {
    position: relative;
    /* 카드 영역 끝에 딱 붙지 않게 양옆을 2.9rem 씩 띄운다 (시안 기준) */
    width: min(97.7rem, calc(100% - 5.8rem));
    aspect-ratio: 3908 / 761;
    /* 폭이 좁아져 비율대로 줄면 빌딩이 카드 머리에 거의 가려진다.
       이보다 낮아지지 않게 두고, 그때는 그림 양옆이 잘린다 */
    min-height: 14rem;
    margin-top: 0.8rem;
    overflow: hidden;
    pointer-events: none;
}
/* 그림 높이 = 영역 높이 x 999/761 (위 투명 여백 포함). 폭은 비율로 정해진다 */
.vis-city::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    height: calc(100% * 999 / 761);
    aspect-ratio: 3908 / 999;
    transform: translateX(-50%);
    background: url(../img/building_background.png) no-repeat center bottom;
    background-size: 100% auto;
    opacity: 0.28;
}
/* green_arrow.png(1388x288)는 아래 45px 가 투명이라 위 끝(꼭짓점)을 기준으로 둔다.
   크기·위치는 빌딩 영역에 비례시켜 폭이 바뀌어도 같은 자리에 온다.
   시안은 화살표 폭(그림 속 실제 화살표 = 1156/1388 = 83.3%)만큼 가운데 빌딩을 비워 두어,
   화살표 뒤에 같은 폭의 흰 띠를 영역 바닥까지 깔아 가운데 빌딩을 가린다 */
.vis-city::after {
    content: "";
    position: absolute;
    top: 7.4%;
    bottom: 0;
    left: 50%;
    width: 39.6%;
    transform: translateX(-50%);
    background:
        url(../img/green_arrow.png) no-repeat center top / 100% auto,
        linear-gradient(#FFFFFF, #FFFFFF) no-repeat center top / 83.3% 100%;
}

/* 목표 카드 : 한 줄 3개, 모자라는 줄은 가운데 정렬 */
.vis-goal-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3.2rem 2.4rem;
    width: 100%;
    /* 카드 위 테두리(0.1rem) + 머리 높이(위아래 1.5rem + 글줄 2.55rem) */
    margin: -5.65rem 0 0;
    padding: 0;
    list-style: none;
}
.vis-goal {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 4.8rem) / 3);
    min-width: 0;
    overflow: hidden;
    border: 0.1rem solid #91A7FF;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
}
.vis-goal-no {
    margin: 0;
    padding: 1.4rem 1.6rem;
    background-color: #EDF2FF;
    color: #1F42C0;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
.vis-goal-body {
    flex: 1 1 auto;
    padding: 2.4rem 2.4rem 3.2rem;
}
.vis-goal-tit {
    margin: 0 0 3.4rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1E2124;
    text-align: center;
    word-break: keep-all;
}
.vis-goal-task {
    margin: 0;
    padding: 0;
    list-style: none;
}
.vis-goal-task li {
    position: relative;
    padding-left: 3.2rem;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}
.vis-goal-task li + li {
    margin-top: 0.8rem;
}
/* 앞의 점은 눈으로만 읽는 기호라 요소를 두지 않고 CSS 로 그린다 */
.vis-goal-task li::before {
    content: "";
    position: absolute;
    left: 0.8rem;
    top: 0.9rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #464C53;
}

@media (max-width: 1279px) {
    /* 사이드 메뉴가 있는 폭에서 세 칸을 그대로 두면 칸이 16~24rem 까지 좁아져
       항목마다 두세 줄로 접힌다 */
    .vis-goal {
        flex-basis: calc((100% - 2.4rem) / 2);
    }
}
@media (max-width: 767px) {
    .vis-box {
        padding: 3.2rem 2rem;
    }


    /* 좁은 화면에서 비율대로 줄이면 빌딩이 카드 머리에 거의 다 가려진다.
       높이를 두고 양옆을 잘라 빌딩이 보이게 한다 */
    .vis-city {
        width: calc(100% - 3.2rem);
        min-height: 11rem;
    }
    /* 화살표·흰 띠는 넓은 화면과 같은 비율(영역의 39.6%)로 두어
       양옆 빌딩이 가려지지 않게 한다 */
    .vis-city::after {
        top: 0.8rem;
    }
    .vis-goal-list {
        gap: 2.4rem;
        margin-top: -5.65rem;
    }
    .vis-goal {
        flex-basis: 100%;
    }

}


/* ==================================================================== */
/* 평생교육정보망 > 동아리정보                                            */
/* 검색 상자·목록표·쪽이동·입력 칸은 기관정보 화면과 같은 부품을 쓴다.       */
/* 여기에는 그 화면들에 없는 것만 둔다 (.club- 접두어)                     */
/* ==================================================================== */

/* --- 목록 : 평생교육 7대 영역 집계 --------------------------------- */
/* 좁은 화면에서는 바로 위에 필터·정렬기준 줄이 온다. 그 줄은 아래 여백이
   없어(다른 목록 화면은 곧바로 표가 붙는다) 집계 칸이 줄에 딱 붙었다.
   다른 화면의 필터 줄 아래 간격(2.4rem)과 같은 값을 여기서 준다 */
.club-stat {
    margin-top: 2.4rem;
    margin-bottom: 3.2rem;
}
/* 넓은 화면에는 필터 줄이 없어 검색 상자와 곧바로 만난다.
   그 사이는 검색 상자 쪽 여백이 맡으므로 위 여백을 지운다 */
@media (min-width: 768px) {
    .club-stat {
        margin-top: 0;
    }
}
.club-stat-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 칸 하나가 통째로 누르는 자리다. li 가 아니라 button 에 테두리를 둬서
   초점 테두리와 누르는 범위가 어긋나지 않게 한다 */
.club-stat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    min-height: 10rem;
    padding: 1.6rem 0.8rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    text-align: center;
    cursor: pointer;
}
.club-stat-btn:hover {
    border-color: #6D7882;
    background-color: #F5F6F9;
}
/* 고른 칸. 색만으로 알리지 않도록 테두리 굵기도 함께 바꾼다 */
.club-stat-btn[aria-pressed="true"] {
    border-width: 0.2rem;
    border-color: #008F55;
    background-color: #E6F4EE;
}
.club-stat-name {
    font-size: 1.6rem;
    color: #464C53;
    word-break: keep-all;
}
.club-stat-btn[aria-pressed="true"] .club-stat-name {
    color: #00733D;
}
.club-stat-num {
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.club-stat-num > span {
    margin-left: 0.2rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: #6D7882;
}
.club-stat-btn[aria-pressed="true"] .club-stat-num {
    color: #00733D;
}

/* --- 목록 : 고유번호증 등록 여부 ----------------------------------- */
/* 색만으로 뜻을 전하지 않도록 글자를 그대로 두고 색을 더한다 */
.club-cert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.2rem;
    padding: 0.4rem 1.2rem;
    border-radius: 50rem;
    background-color: #FDECEF;
    color: #B7202E;
    font-size: 1.5rem;
    font-weight: 700;
}
.club-cert.is-on {
    background-color: #E6F4EE;
    color: #00733D;
}

/* --- 목록 : 동아리명과 보기 단추 ------------------------------------ */
/* 상세로 가는 길은 맨 오른쪽 '보기' 단추 하나다. 동아리명까지 링크로 두면
   같은 곳으로 가는 길이 한 줄에 둘이 되어 어느 쪽을 눌러야 할지 헷갈린다 */
.club-name {
    font-weight: 700;
    color: #1E2124;
}
.club-view-btn {
    min-width: 6.4rem;
    height: 3.2rem !important;
}

/* 회원수는 숫자 몇 자리라 칸을 다 늘릴 이유가 없다 */
.club-count-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.club-count-input {
    width: 10rem;
}
.club-count-unit {
    font-size: 1.7rem;
    color: #1E2124;
}

/* --- 등록 : 회원명단 표 -------------------------------------------- */
/* 제목과 안내를 한 줄에 둔다. 좁아지면 안내가 아래로 내려간다 */
.club-member-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem 2.4rem;
    margin-bottom: 2.4rem;
}
.club-member-head .apply-fieldset-tit {
    margin-bottom: 0;
}
.club-member-desc {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #6D7882;
    word-break: keep-all;
}
/* 칸이 여덟이라 좁아지면 글자가 눌린다.
   각 칸에 들어갈 글자(전화번호 010-****-1142 등)가 잘리지 않는 최소 합이
   106rem 이라 그 아래로는 표를 가로로 민다 */
.club-member-table {
    min-width: 108rem;
}
/* 개발 화면(동아리 등록)은 칸이 여섯(대표·관리자·이름·아이디·전화번호·이메일)이라
   108rem 이면 넓은 화면에서도 가로 스크롤이 생겼다. 여섯 칸에 맞춰 줄인다 */
.club-member-table.club-member-table-basic {
    min-width: 76rem;
}
/* '위임 가능' 이 두 줄로 접히면 줄 높이가 칸마다 달라진다 */
.club-member-table tbody th .krds-form-check label {
    white-space: nowrap;
}
/* 칸마다 읽어주기 전용 이름표(.sr-only)를 두는데, 그것이 position: absolute 라
   기준이 될 조상이 없으면 표 밖으로 나가 화면 전체가 가로로 넘친다.
   각 칸을 기준으로 삼아 칸 안에 머물게 한다 */
.club-member-table tbody th,
.club-member-table tbody td {
    position: relative;
}
.club-member-table .krds-input,
.club-member-table .krds-form-select-sort {
    width: 100%;
}
.club-member-table td,
.club-member-table th {
    vertical-align: top;
}
.club-member-table tbody th {
    text-align: center;
}
/* 값을 넣는 표라 줄을 눌러 여는 목록이 아니다.
   다른 목록표처럼 줄에 마우스를 올릴 때 초록이 깔리면
   고른 줄로 오해하게 된다 */
.club-member-table.tbl.data tbody tr:hover td,
.club-member-table.tbl.data tbody tr:hover th {
    background-color: transparent !important;
}

/* 빠진 칸 안내. 서버 검증이 걸리면 그때 붙인다.
   색만으로 알리지 않도록 글자를 함께 둔다 */
.club-error {
    margin: 0.4rem 0 0;
    font-size: 1.5rem;
    color: #D63D4A;
}
.club-member-table .krds-input.is-error {
    border-color: #D63D4A;
}


@media (max-width: 1279px) {
    /* 여덟 칸을 두 줄로 나눈다 */
    .club-stat-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .club-stat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }
    .club-stat-btn {
        min-height: 8rem;
    }
    .club-stat-num {
        font-size: 2rem;
    }}

/* 누리집·카페 주소 칸(type="url")은 앞쪽 규칙에서 52.7rem 에 묶여 있어,
   좁은 화면에서 옆의 글자 칸(type="text")만 늘어나고 혼자 짧게 남았다.
   그 규칙보다 뒤에 두어야 풀리므로 여기에 적는다 */
@media (max-width: 767px) {
    .apply-fieldset input[type="url"].krds-input {
        max-width: 100%;
    }
}


/* ==================================================================== */
/* 첨부파일 아이콘                                                       */
/* 전에는 .svg-icon.ico-file 로 마스크를 씌워 색을 입혔는데, 그림 파일을    */
/* 그대로 쓰도록 바꿨다. 크기는 그때와 같은 2.4rem 이다.                   */
/* alt 를 비워 둔 건 옆의 sr-only 글귀가 이미 무엇을 받는지 알려 주기 때문   */
/* ==================================================================== */
.ico-attachment {
    display: inline-block;
    width: 1.474rem;
    height: 1.474rem;
    object-fit: contain;
    vertical-align: middle;
}

/* 공지 행의 스피커 아이콘.
   전에는 .svg-icon.ico-volume 로 마스크를 씌워 초록을 입혔는데, 그림 파일을
   그대로 쓰도록 바꿨다. 크기는 그때와 같은 1.8rem 이다.
   alt 를 비워 둔 건 같은 칸의 sr-only '공지' 가 이미 뜻을 알려 주기 때문 */
.list-table.tbl.data tr.is-notice .ico-speaker {
    display: inline-block;
    width: 1.275rem;
    height: 1.267rem;
    object-fit: contain;
    vertical-align: middle;
}

/* 상세보기 아이콘.
   전에는 .svg-icon.ico-view-mode 로 마스크를 씌워 색을 입혔는데, 그림 파일을
   그대로 쓰도록 바꿨다. 크기는 받은 값(1.623 x 1.35rem)이다.
   alt 를 비워 둔 건 바로 앞의 '상세보기' 글자가 이미 뜻을 알려 주기 때문 */
.ico-view-details {
    flex: 0 0 auto;
    width: 1.623rem;
    height: 1.35rem;
    object-fit: contain;
}

/* 다운로드 단추 아이콘.
   전에는 .svg-icon.ico-down 으로 마스크를 씌워 색을 입혔는데, 그림 파일을
   그대로 쓰도록 바꿨다. 크기는 받은 값(1.35 x 1.425rem)이다.
   학당학습자카드관리상세에 이미 .svg-icon.ico-download 가 따로 있어
   이름이 겹치지 않게 .ico-down-file 로 둔다.
   alt 를 비워 둔 건 바로 앞의 '다운로드' 글자가 이미 뜻을 알려 주기 때문 */
.ico-down-file {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.425rem;
    object-fit: contain;
}

/* ==================================================================== */
/* 목록버튼 우측으로                                                     */
/* 개발 쪽에서 넣은 규칙을 그대로 옮겨 온 것이다.                           */
/* 원본은 @media (max-width: 47.9375em) 안에 들어가 있어, 바깥 조건과      */
/* 안쪽 조건(min-width: 768px)이 서로 어긋나 한 번도 걸리지 않았다.         */
/* 맨 바깥으로 빼서 넓은 화면에서 실제로 걸리게 한다                        */
/* ==================================================================== */
@media (min-width: 768px) {
    .detail-actions .btn-list {
        margin-left: auto;
    }
}


/* ==================================================================== */
/* 정보공개 > 제도안내 > 정보공개 제도안내 (.foi-)                         */
/* 소제목은 센터소개(.center-section-tit), 설명 상자·목록은               */
/* 개인정보처리방침(.privacy-summary-box / .privacy-list)과 같은 값이다     */
/* ==================================================================== */
.foi-section {
    margin-bottom: 6.2rem;
}
.foi-section:last-child {
    margin-bottom: 0;
}
/* 회색 상자로 끝나는 구역은 상자 바탕이 이미 경계 역할을 해서 아래 여백을 줄인다 (시안 기준) */
.foi-section:has(> .foi-summary-box:last-child) {
    margin-bottom: 4rem;
}
/* 로고 달린 소제목 */
.foi-section-tit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.foi-section-tit::before {
    content: "";
    flex: 0 0 auto;
    width: 3rem;
    height: 2.069rem;
    background: url(../img/component/icon/ico_logo_mini.png) no-repeat;
    background-size: contain;
}

/* 회색 설명 상자 */
.foi-summary-box {
    padding: 3rem 4.8rem;
    background-color: #F5F6F9;
    border-radius: 1rem;
}
.foi-summary-box p {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #464C53;
    word-break: keep-all;
}

/* 작은 제목 + 본문 (국민 / 외국인) */
.foi-block + .foi-block {
    margin-top: 3.2rem;
}
.foi-sub-tit {
    margin: 0 0 1.2rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.foi-text {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #1E2124;
    word-break: keep-all;
}

/* 점 목록 */
.foi-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.foi-list li {
    position: relative;
    padding-left: 2.8rem;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #1E2124;
    word-break: keep-all;
}
.foi-list li + li {
    margin-top: 0.6rem;
}
/* 앞의 점은 눈으로만 읽는 기호라 요소를 두지 않고 CSS 로 그린다 */
.foi-list li::before {
    content: "";
    position: absolute;
    left: 0.8rem;
    top: 1.05rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #1E2124;
}
.foi-list li strong {
    color: #008F55;
    font-weight: 700;
}

/* 파란 제목 안내 상자 (목록 사이에 끼는 보충 설명) */
.foi-note-box {
    margin: 1.6rem 0 1.2rem;
    padding: 2.4rem 3.2rem;
    background-color: #F5F6F9;
    border: 0.1rem solid #DADEE3;
    border-radius: 1.2rem;
}
.foi-note-tit {
    margin: 0 0 1.2rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #173E99;
}
.foi-note-box p {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #464C53;
    word-break: keep-all;
}

@media (max-width: 767px) {
    .foi-section {
        margin-bottom: 4rem;
    }
    .foi-section-tit {
        font-size: 2rem;
    }
    .foi-summary-box {
        padding: 2rem;
    }
    .foi-note-box {
        padding: 2rem;
    }
    .foi-block + .foi-block {
        margin-top: 2.8rem;
    }
    .foi-sub-tit {
        font-size: 1.8rem;
    }
}

/* =====================================================================
   상세 정보 표(.hd-table, thead 없는 것) 위쪽 선 - 표 시작이 보이지 않던 것
   (동아리정보·기관정보·강사정보 상세, 수강취소 정보, 강의계획 등)
   제목 줄(.detail-head) 바로 아래 표가 오면 제목 줄 밑줄과 겹치지 않게 제목 쪽 선을 뺌
   ===================================================================== */
/* 표 자체에 이미 위쪽 선을 건 표(지원 개요 .hk-info-table, 강의계획 .lh-plan-table)는 빼야 함
   - 표 선 + 첫 행 선이 겹쳐 4px 로 두 배 두껍게 보였음 (해외유학지원사업·장학사업·기관/강사/동아리 상세 등) */
.hd-table:not(:has(> thead)):not(.hk-info-table, .lh-plan-table) > tbody > tr:first-child > th,
.hd-table:not(:has(> thead)):not(.hk-info-table, .lh-plan-table) > tbody > tr:first-child > td {
    border-top: 0.2rem solid #1E2124;
}
.detail-head:has(+ .hd-table-wrap) {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}
.detail-head:has(+ .hd-table-wrap) + .hd-table-wrap {
    margin-top: 2.4rem;
}

/* 동아리정보 상세 - 소속지역 표시 강화(상단 배지 + 표의 소속지역 칸 강조), 설립일, 빈 값 안내 */
.club-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}
.club-badges:empty {
    display: none;
}
.club-region-badge,
.club-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 3.2rem;
    padding: 0 1.4rem;
    border-radius: 1.6rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.club-region-badge {
    background-color: #008F55;
    color: #FFFFFF;
}
.club-region-badge::before {
    content: "";
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.club-type-badge {
    background-color: #EEF2F7;
    color: #464C53;
    font-weight: 500;
}
.club-detail-head .club-meta {
    margin: 0.6rem 0 0;
    color: #6D7882;
    font-size: 1.5rem;
}
.hd-table.tbl.data tbody th.club-region-th,
.hd-table tbody th.club-region-th {
    background-color: #E6F4EE !important;
    color: #00704A !important;
    font-weight: 700;
}
.hd-table.tbl.data tbody td.club-region-cell,
.hd-table tbody td.club-region-cell {
    background-color: #F3FAF6 !important;
    color: #00704A !important;
    font-weight: 700;
}
.club-detail .club-empty {
    color: #8A949E;
}

/* 본문이 표로 끝나는 화면(동아리 상세, 강사정보 요청 처리이력 등)은 표 마지막 줄이
   이미 본문을 닫는다. 그 아래 [목록] 줄의 기본 가로선(.detail-actions border-top)까지
   있으면 선 두 줄이 겹치거나(간격 0이면 굵은 선처럼) 보인다.
   기관정보·강사정보 상세(표 아래 4rem 뒤 [목록])와 같게 선을 뺀다.
   글로 끝나는 게시판 상세 등은 표로 끝나지 않으므로 그대로 선이 남는다 */
:is(section, article, div):has(> :is(.krds-table-wrap, .hd-table-wrap, .list-table-wrap, table):last-child) + .detail-actions,
:is(.krds-table-wrap, .hd-table-wrap, .list-table-wrap) + .detail-actions,
:is(.krds-table-wrap, .hd-table-wrap, .list-table-wrap) + form + .detail-actions {
    border-top: 0;
}
/* 첨부파일 묶음(.payment-area-attach)은 아래에 자체 가로선이 있다(진흥원프로그램 상세 등).
   그 뒤 [목록] 줄 선까지 겹치면 두 줄이 되므로 단추 줄 선을 빼고, 선 아래 4rem 에 단추를 둔다
   (기관 등록 신청 상세 - 사이에 숨은 삭제용 form 이 끼어 있다) */
.payment-area-attach + .detail-actions,
.payment-area-attach + form + .detail-actions {
    padding-top: 0;
    border-top: 0;
}
/* 동아리 상세는 본문(.detail-view) 아래 여백 3.2rem 이 이미 있어 단추 줄 안쪽 여백만 줄여 4rem 으로 맞춘다 */
.club-detail + .detail-actions {
    padding-top: 0.8rem;
}


/* ==================================================================== */
/* 예전 마크업 단추 묶음(.btnBox_fr / .btnBox_cen / .btnArea)             */
/* 마이페이지 강의·출석 관리, 수강바구니, 공간·행사 상세 등 아직 새 마크업으로 */
/* 바뀌지 않은 화면(약 74개)이 예전 단추 클래스(btn-blue, btn-gray 등)를      */
/* 그대로 쓴다. 그 스타일이 있던 옛 CSS 를 지금 레이아웃이 불러오지 않아      */
/* 정렬도 모양도 없이 왼쪽에 몰려 있었다.                                  */
/* 새 화면과 같은 규칙으로 맞춘다:                                        */
/*  - btnBox_fr / btnArea : 오른쪽 정렬, btnBox_cen : 가운데 정렬           */
/*  - btn-blue·btn-dBlue·btn-green → 초록 주 단추(btn-Primary 와 같은 값)  */
/*  - btn-white·btn-gray 등 그 밖 → 흰 테두리 단추(btn-Tertiary 와 같은 값) */
/*  - 삭제(onclick 에 Del 이 들어간 단추) → 빨간 단추, 왼쪽 끝               */
/* 새 단추(.krds-btn)와 인라인 style 이 걸린 묶음(댓글 옆 작은 수정·삭제)은  */
/* 건드리지 않는다                                                       */
/* ==================================================================== */
:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    clear: both;
    margin-top: 4rem;
}
:is(.btnBox_fr, .btnArea):not([style]) {
    justify-content: flex-end;
}
.btnBox_cen:not([style]) {
    justify-content: center;
}
:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > :is(a, button):not(.krds-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    min-width: 9rem;
    height: 4.8rem;
    margin: 0;
    padding: 0 2.4rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    color: #1E2124;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > :is(a, button):not(.krds-btn):hover {
    background-color: #F4F6F9;
}
:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > :is(a, button):not(.krds-btn):is(.btn-blue, .btn-dBlue, .btn-green) {
    border-color: #008F55;
    background-color: #008F55;
    color: #FFFFFF;
}
:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > :is(a, button):not(.krds-btn):is(.btn-blue, .btn-dBlue, .btn-green):hover {
    border-color: #007244;
    background-color: #007244;
}
:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > :is(a, button):not(.krds-btn)[onclick*="Del" i] {
    order: -1;
    margin-right: auto;
    border-color: #D63D4A;
    background-color: #D63D4A;
    color: #FFFFFF;
}
.btnBox_cen:not([style]) > :is(a, button):not(.krds-btn)[onclick*="Del" i] {
    margin-right: 0;
}
@media (max-width: 767px) {
    :is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > :is(a, button):not(.krds-btn) {
        flex: 1 1 auto;
    }
}


/* ==================================================================== */
/* 예전 마크업 게시글 쓰기·수정 화면 (.bbsList.write .formTable)            */
/* 알림소통마당·1:1 문의·마이페이지 강의실/동아리 게시판의 글쓰기·수정 화면이  */
/* 옛 표 마크업을 그대로 쓰는데, 그 스타일이 있던 옛 CSS 를 불러오지 않아       */
/* 표 선·입력칸·파일칸·체크박스가 모두 브라우저 기본 모양(체크박스는 안 보임)  */
/* 이었다. JSP 와 스크립트(에디터, 파일 추가·삭제, 저장)는 그대로 두고        */
/* 상세 표(.hd-table)와 신청 폼 입력칸 모양으로 맞춘다                       */
/* ==================================================================== */
.bbsList.write .formTable {
    width: 100%;
    border-collapse: collapse;
    border-top: 0.2rem solid #1E2124;
    table-layout: fixed;
}
.bbsList.write .formTable caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.bbsList.write .formTable th,
.bbsList.write .formTable td {
    padding: 1.6rem 2.4rem;
    border-bottom: 0.1rem solid #E3E4E4;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #1E2124;
    text-align: left;
    vertical-align: middle;
    word-break: keep-all;
}
.bbsList.write .formTable th {
    background-color: #F5F6FA;
    font-weight: 700;
}
/* 제목 입력칸 */
.bbsList.write .formTable input[type="text"] {
    width: 100%;
    height: 5.6rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    font-size: 1.7rem;
    color: #1E2124;
    box-sizing: border-box;
}
.bbsList.write .formTable input[type="text"]:focus {
    outline: 0.2rem solid #256EF4;
    outline-offset: 0;
}
/* 내용(에디터)이 칸 폭을 꽉 채우도록 */
.bbsList.write .formTable .cke,
.bbsList.write .formTable textarea {
    width: 100% !important;
    box-sizing: border-box;
}
/* 비밀글 체크박스: KRDS 가 틀(.krds-form-check) 없는 체크박스를 1px 로 숨겨
   보이지 않았다. 브라우저 기본 체크박스를 크게 보이게 되돌린다 */
.bbsList.write .formTable input[type="checkbox"] {
    position: static !important;
    width: 2rem !important;
    height: 2rem;
    margin: 0 0.8rem 0 0;
    opacity: 1;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: #008F55;
    vertical-align: middle;
    clip: auto;
}
/* 첨부파일: 다른 신청 화면과 같은 KRDS 첨부 상자(.krds-file-upload)를 쓴다.
   표 칸 안에 들어가므로 바깥 여백만 없애고, 단추 줄은 가운데 정렬 */
.bbsList.write .formTable .board-file-upload {
    width: 100%;
    margin: 0;
}
.bbsList.write .formTable .board-file-upload .file-upload-btn-wrap {
    display: flex;
    justify-content: center;
}
.bbsList.write .formTable .board-file-upload .file-list:not(:has(li)) {
    display: none;
}
/* 아래 [저장][목록] 은 다른 신청·작성 화면과 같이 [목록][저장] 순서로(주 단추가 오른쪽 끝) */
.bbsList.write + .btnBox_fr:not([style]) > .btn-white {
    order: -1;
}
@media (max-width: 767px) {
    .bbsList.write .formTable,
    .bbsList.write .formTable tbody,
    .bbsList.write .formTable tr,
    .bbsList.write .formTable th,
    .bbsList.write .formTable td {
        display: block;
        width: 100% !important;
    }
    .bbsList.write .formTable th {
        padding: 1.2rem 1.6rem;
        border-bottom: 0;
    }
    .bbsList.write .formTable td {
        padding: 1.2rem 1.6rem 2rem;
    }
    .bbsList.write .formTable colgroup {
        display: none;
    }
}

/* ==================================================================== */
/* <form:form> 이 끝에 덧붙이는 보안 토큰 상자                            */
/* 스프링 시큐리티가 켜져 있어 <form:form> 은 닫는 태그 앞에                */
/* <div><input type="hidden" name="_csrf" ...></div> 를 자동으로 넣는다.  */
/* 숨은 칸만 든 빈 상자지만, 검색 상자처럼 gap 을 둔 flex/grid 안에서는     */
/* 한 줄로 쳐져 그 간격(예: 2.4rem)만큼 아래 여백이 위보다 넓어졌다.        */
/* 숨은 칸만 들어 있는 이름 없는 div 는 상자를 만들지 않게 한다.            */
/* 보이는 것이 하나도 없는 상자라 다른 화면 모양에는 영향이 없다            */
/* ==================================================================== */
div:not([class]):not([id]):has(> input[type="hidden"]):not(:has(> :not(input[type="hidden"]))) {
    display: contents;
}

/* ==================================================================== */
/* 탭 줄이 넘칠 때 좌우 화살표                                             */
/* ==================================================================== */
/* 1) 통합검색 탭(.sch-tab-area)
   좁은 화면에서 탭 묶음(.tab.pill.full)이 가로로 밀리는데 화살표가 없어
   손으로 밀어야만 다음 탭이 보였다. 다른 탭 화면(강의실 등)과 같은
   .le-tab-nav 버튼을 스크립트가 붙이고, 실제로 넘칠 때(.is-scrollable)만 보인다 */
.sch-tab-area > .le-tab-nav {
    display: none;
}
.sch-tab-area.is-scrollable {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.8rem;
}
.sch-tab-area.is-scrollable > .le-tab-nav {
    display: inline-flex;
    order: 1;
}
.sch-tab-area.is-scrollable > .tab {
    flex: 1 1 0;
    min-width: 0;
    order: 2;
}
.sch-tab-area.is-scrollable > .le-tab-nav.next {
    order: 3;
}
.sch-tab-area.is-scrollable > .tab-conts-wrap {
    flex: 1 0 100%;
    order: 4;
}

/* 2) 장학금 신청내역 탭(.aid-tab) - 탭이 둘뿐이라 밀기 대신 글자를 두 줄로 접는다.
   360px 근처에서 '학자금 대출이자 지원신청' 이 한 줄에 안 들어가 탭 줄이 27px 넘쳤다 */
@media (max-width: 47.9375em) {
    .aid-tab.tab.fill.full > ul {
        overflow-x: visible;
    }
    .aid-tab.tab.fill.full > ul > li {
        min-width: 0;
    }
    .aid-tab.tab.fill.full .btn-tab {
        white-space: normal;
        word-break: keep-all;
        line-height: 1.3;
    }
}

/* 3) 화살표 쪽 가장자리 흐리게
   더 밀 수 있는 쪽(그쪽 화살표가 눌리는 상태)의 탭 끝 4rem 을 투명하게 흐려
   '이어지는 탭이 더 있다'는 것을 알린다. 화살표의 눌림 여부는 각 화면의
   스크립트가 이미 관리하므로(끝에 닿으면 disabled) CSS 만으로 따라간다 */
.le-tab-wrap:has(> .le-tab-nav.next:not(:disabled)) > .le-tab > ul,
.sch-tab-area.is-scrollable:has(> .le-tab-nav.next:not(:disabled)) > .tab {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
}
.le-tab-wrap:has(> .le-tab-nav.prev:not(:disabled)) > .le-tab > ul,
.sch-tab-area.is-scrollable:has(> .le-tab-nav.prev:not(:disabled)) > .tab {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 4rem), transparent);
}
.le-tab-wrap:has(> .le-tab-nav.prev:not(:disabled)):has(> .le-tab-nav.next:not(:disabled)) > .le-tab > ul,
.sch-tab-area.is-scrollable:has(> .le-tab-nav.prev:not(:disabled)):has(> .le-tab-nav.next:not(:disabled)) > .tab {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
/* 화살표가 숨겨진 넓은 화면에서는 흐리지 않는다 */
@media (min-width: 87.5625em) {
    .le-tab-wrap:not(.is-scrollable) > .le-tab > ul {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* 4) 탭 줄과 화살표를 붙인다
   탭 줄 폭을 '100% - 10rem' 으로 묶고 사이 간격까지 둬서 양쪽에 14px(통합검색 8px)씩
   떠 있었다. 시안처럼 흐려지는 탭 끝에 화살표가 맞닿도록 간격을 없애고,
   화살표를 탭 끝에 살짝(0.4rem) 겹쳐 올린다. 탭 줄은 버튼을 뺀 나머지 폭을 채운다 */
.le-tab-wrap.krds-tab-area,
.sch-tab-area.is-scrollable {
    column-gap: 0;
}
/* 기준 폭을 0 으로 두면 화살표가 숨는 넓은 화면에서 탭 줄이 아래 내용 칸과
   같은 줄에 붙어 폭이 0 이 되어 사라졌다. 기준 폭을 '전체 - 화살표 두 개'로 둬서
   내용 칸은 늘 다음 줄로 내려가고, 화살표가 없을 때는 탭 줄이 전체 폭으로 늘어난다
   기준 폭은 화살표 크기가 화면마다 조금 달라도(3.6~4.4rem) 한 줄에 들도록 넉넉히 뺀
   값이고, 남는 폭은 늘어나 채우므로 실제로 비는 곳은 없다 */
.le-tab-wrap > .le-tab {
    flex: 1 1 calc(100% - 10rem);
    min-width: 0;
    max-width: none;
}
.le-tab-wrap > .le-tab-nav,
.sch-tab-area.is-scrollable > .le-tab-nav {
    position: relative;
    z-index: 1;
}
.le-tab-wrap > .le-tab-nav.prev,
.sch-tab-area.is-scrollable > .le-tab-nav.prev {
    margin-right: -0.4rem;
}
.le-tab-wrap > .le-tab-nav.next,
.sch-tab-area.is-scrollable > .le-tab-nav.next {
    margin-left: -0.4rem;
}

/* 5) 탭 제목은 고른 탭·안 고른 탭 모두 굵게(700) */
.le-tab .btn-tab,
.le-tab .active .btn-tab {
    font-weight: 700;
}

/* 6) 끝에 닿은 쪽 화살표는 감춘다
   맨 앞이면 왼쪽, 맨 끝이면 오른쪽 화살표가 눌리지 않는 상태(disabled)가 되는데,
   흐린 단추로 남겨 두지 않고 아예 빼서 탭 줄이 그 자리까지 채우게 한다 */
.le-tab-wrap > .le-tab-nav:disabled,
.sch-tab-area.is-scrollable > .le-tab-nav:disabled {
    display: none;
}

/* --- 평생학습 활성화 표 : 가운데 맞춤 칸 ------------------------------- */
/* 읍·면·동 평생학습센터 지정의 '기준'·'연번'·'기관·단체명'·'지정기간' 처럼 짧은
   값은 화면정의서대로 가운데 맞춤. 긴 설명(세부요건)은 왼쪽 그대로 */
.hd-table-wrap .hd-table.tbl.data td.hd-col-center {
    text-align: center;
}

/* 여러 줄을 합친 칸(지정기간 2024년)은 옆 줄들의 마지막 칸이 되어 세로선이
   빠진다(마지막 칸은 오른쪽 선이 없음). 합친 칸 왼쪽에 같은 선을 그어 준다 */
.hd-table-wrap .hd-table.tbl.data td[rowspan] {
    border-left: 0.1rem solid #CDD1D5;
}

/* --- 강사 정보 수정 (마이페이지 > 강사 정보 관리 > 수정) ------------------ */
/* 다른 신청·수정 화면과 같은 .apply-fieldset / .form-group 구조를 쓰고,
   사진 줄만 [지금 사진 | 첨부 상자] 로 나란히 둔다.
   · 사진이 없으면 사진 칸은 숨기고 첨부 상자가 폭을 다 쓴다
   · 첨부 상자는 상자 안에 또 상자가 겹쳐 보이지 않게 바깥 테두리(line) 없이 점선 상자만
   · 사진 칸은 점선 상자 높이에 맞춘 3:4 */
.tci-mod-photo {
    display: flex;
    align-items: stretch;
    gap: 2.4rem;
}
.tci-mod-photo .tci-photo {
    flex: 0 0 auto;
    width: auto;
    height: 20rem;
    aspect-ratio: 3 / 4;
}
.tci-mod-photo .tci-photo[hidden] {
    display: none;
}
.tci-mod-photo .tci-photo img {
    width: 100%;
    height: 100%;
}
.tci-mod-photo .apply-file-upload {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}
/* 아직 고른 파일이 없으면 목록 자리도 비워 두지 않는다 */
.tci-mod-photo .apply-file-upload .file-list:not(:has(li)) {
    display: none;
}
.tci-mod-photo .apply-file-upload .file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
    box-sizing: border-box;
}
@media (max-width: 47.9375em) {
    .tci-mod-photo {
        flex-direction: column;
    }
    .tci-mod-photo .tci-photo {
        height: 16rem;
    }
    .tci-mod-photo .apply-file-upload .file-upload {
        min-height: 0;
    }
}

/* --- 강좌정보 등록·수정 (다모아 > 강좌정보 > 등록) ----------------------- */
/* 다른 신청·등록 화면의 .apply-fieldset / .form-group 을 그대로 쓰고,
   여기에만 있는 칸 묶음만 .crs- 로 둔다 */
/* 입력칸 + 단추 (강사명 + [강사 검색]) - 주소의 [우편번호 검색] 줄과 같은 폭 */
.crs-form .crs-input-btn {
    display: flex;
    gap: 1.6rem;
    width: 100%;
    max-width: 60rem;
}
.crs-form .crs-input-btn .krds-input {
    flex: 1 1 auto;
    min-width: 0;
}
.crs-form .crs-input-btn .krds-btn {
    flex: 0 0 auto;
}
/* 숫자 + 단위 (원 / 명 / 시간) */
.crs-form .crs-unit {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.crs-form .crs-unit .krds-input {
    flex: 0 0 22rem;
    width: 22rem;
}
.crs-form .crs-unit > span,
.crs-form .crs-time > span,
.crs-form .crs-url > span {
    flex: 0 0 auto;
    font-size: 1.7rem;
    color: #1E2124;
}
/* 교육시간 : [시]시 [분]분 ~ [시]시 [분]분
   선택칸과 단위 글자(시/분)는 한 덩어리로 붙이고(0.6rem),
   시 덩어리와 분 덩어리 사이는 넓게(1.6rem) 띄워 서로 붙어 보이지 않게 한다.
   가운데 '~' 는 시작과 끝을 가르는 표시라 양옆을 더 띄운다.
   선택칸 폭은 두 자리 숫자 + 꺾쇠가 들어가는 만큼(10rem) */
.crs-form .crs-time {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 1.6rem;
}
.crs-form .crs-time .crs-time-unit {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.crs-form .crs-time .krds-form-select {
    flex: 0 0 10rem;
    width: 10rem;
}
.crs-form .crs-time .crs-time-mark {
    margin: 0 0.4rem;
}
/* 홈페이지 : http:// + 입력칸 */
.crs-form .crs-url {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    max-width: 60rem;
}
.crs-form .crs-url .krds-input {
    flex: 1 1 auto;
    min-width: 0;
}
/* 기간 달력 - 시작일 ~ 종료일 두 칸 + 달력 단추 */
.crs-form .crs-date-range .calendar-input {
    width: 100%;
    max-width: 60rem;
}
/* 이미 올라가 있는 첨부파일 표시 */
.crs-form .crs-file-state {
    font-size: 1.5rem;
    color: #6D7882;
}
@media (max-width: 47.9375em) {
    .crs-form .crs-input-btn,
    .crs-form .apply-addr-group {
        width: 100%;
    }
    .crs-form .crs-unit .krds-input {
        flex: 1 1 auto;
        width: auto;
    }
    .crs-form .crs-time .krds-form-select {
        flex: 0 0 8.8rem;
        width: 8.8rem;
    }
}

/* --- 강사 검색 팝업 (강좌정보 등록 > 강사 검색) --------------------------- */
/* 레이아웃 없이 뜨는 창. 검색 상자·목록 표·페이지 번호·단추는 다른 화면 부품 그대로,
   창 여백과 칸 맞춤만 둔다 */
.tch-popup-body {
    background-color: #FFFFFF;
}
.tch-popup {
    padding: 3.2rem 2.4rem 4rem;
}
.tch-popup-tit {
    margin: 0 0 2.4rem;
    font-size: 2.8rem;
    font-weight: 700;
    color: #1E2124;
}
.tch-popup .tch-popup-search {
    margin-bottom: 2.4rem;
    padding: 2.4rem;
}
.tch-popup .tch-popup-search .search-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.tch-popup .tch-popup-search .krds-form-select-sort {
    flex: 0 0 12rem;
}
.tch-popup .tch-popup-search .sch-input {
    flex: 1 1 auto;
    min-width: 0;
}
.tch-popup .tch-popup-search .search-btn {
    flex: 0 0 auto;
}
/* 선택 칸의 라디오는 칸 가운데, 강의명은 길어 왼쪽 맞춤 */
.tch-popup-table .list-table.tbl.data td .krds-form-check {
    justify-content: center;
}
.tch-popup-table .list-table.tbl.data td.tch-popup-cls {
    text-align: left;
}
.tch-popup-table .list-table.tbl.data td.tch-popup-empty {
    padding: 4rem 1rem;
    color: #6D7882;
    text-align: center;
}
.tch-popup .pgm-paging {
    margin-top: 2.4rem;
}
.tch-popup .tch-popup-actions {
    margin-top: 3.2rem;
}

/* --- 주소 검색 팝업 (common/jusoPopup.jsp) ------------------------------ */
/* 도로명주소 API 예제 화면 대신 강사 검색 팝업과 같은 창 모양.
   검색 결과 표·페이지 번호는 스크립트가 그리고, 여기서는 창 크기(600px)에 맞춘 여백만 둔다 */
.juso-popup .juso-search {
    margin-bottom: 2.4rem;
}
/* 창이 좁아도 [검색어][검색] 을 한 줄로 */
.juso-popup .juso-search .search-controls {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
}
.juso-popup .juso-search .search-controls .sch-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.juso-popup .juso-search .search-controls .search-btn {
    flex: 0 0 auto;
    width: auto;
}
.juso-popup .juso-guide {
    margin: 1.2rem 0 0;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #464C53;
    word-break: keep-all;
}
/* 스크립트가 넣는 고정 높이(365px)는 쓰지 않음 */
.juso-popup #searchContentBox {
    height: auto !important;
}
.juso-popup .juso-count {
    margin: 0 0 1.2rem;
    font-size: 1.6rem;
    color: #464C53;
}
.juso-popup .juso-count strong {
    color: #063A74;
    font-weight: 700;
}
.juso-popup .juso-empty {
    margin: 0;
    padding: 4rem 1.6rem;
    border-top: 0.2rem solid #1E2124;
    border-bottom: 0.1rem solid #E5E8EC;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #6D7882;
    text-align: center;
}
/* 창이 좁아도(768px 미만) 카드형으로 바뀌지 않고 표 모양 그대로 */
.juso-popup .juso-table .list-table.tbl.data {
    display: table;
    table-layout: fixed;
}
.juso-popup .juso-table .list-table.tbl.data thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}
.juso-popup .juso-table .list-table.tbl.data tbody {
    display: table-row-group;
}
.juso-popup .juso-table .list-table.tbl.data tr {
    display: table-row;
    width: auto;
    padding: 0;
    border-bottom: 0;
}
.juso-popup .juso-table .list-table.tbl.data td::before {
    content: none;
}
.juso-popup .juso-table .list-table.tbl.data thead th {
    border-top: 0.2rem solid #1E2124;
    border-bottom: 0.1rem solid #1E2124;
    font-weight: 700;
    text-align: center;
}
.juso-popup .juso-table .list-table.tbl.data td {
    width: auto;
    border-bottom: 0.1rem solid #E5E8EC;
    text-align: center;
}
.juso-popup .juso-table .list-table.tbl.data :is(th, td) {
    display: table-cell;
    padding: 1.2rem 0.8rem;
    font-size: 1.5rem;
    vertical-align: middle;
}
.juso-popup .juso-table .list-table.tbl.data td[id^="roadAddrTd"] {
    text-align: left;
}
.juso-popup .juso-table .juso-pick {
    display: block;
    color: #1E2124;
    text-decoration: none;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.juso-popup .juso-table .juso-pick b {
    font-weight: 700;
}
.juso-popup .juso-table .juso-pick:is(:hover, :focus-visible) b {
    color: #256EF4;
    text-decoration: underline;
}
.juso-popup .juso-table .juso-jibun {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.4rem;
    color: #6D7882;
}
.juso-popup .juso-table tbody tr:hover td {
    background-color: #F4F5F6;
}
.juso-popup .juso-table tbody td {
    cursor: pointer;
}
.juso-popup #pageApi.pgm-paging {
    margin-top: 2.4rem;
}
.juso-popup #pageApi.pgm-paging:empty {
    display: none;
}
/* 상세주소 입력 */
.juso-popup .juso-sub-tit {
    margin: 0 0 1.6rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.juso-popup .juso-detail-addr {
    display: flex;
    gap: 1.6rem;
    margin: 0 0 2rem;
    padding: 1.6rem 2rem;
    border-radius: 0.8rem;
    background-color: #F4F5F6;
    font-size: 1.6rem;
    line-height: 1.5;
}
.juso-popup .juso-detail-addr dt {
    flex: 0 0 auto;
    font-weight: 700;
    color: #1E2124;
}
.juso-popup .juso-detail-addr dd {
    margin: 0;
    color: #1E2124;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.juso-popup .juso-detail .form-group {
    margin: 0;
}
.juso-popup .juso-detail .form-conts .krds-input {
    width: 100%;
}
/* 팝업 창(600px)에서도 [다시 검색][주소 입력] 을 나란히 - 다른 화면 PC 모양과 같게 */
.juso-popup .juso-detail .tch-popup-actions {
    flex-direction: row;
    justify-content: flex-end;
    gap: 1.6rem;
    margin-top: 2.4rem;
}
.juso-popup .juso-detail .tch-popup-actions .krds-btn {
    width: auto;
}
/* 아래 [닫기] - 강사 검색 팝업처럼 오른쪽 아래 단추 줄 (창이 좁아도 세로로 늘이지 않음) */
.juso-popup .juso-foot {
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 2.4rem;
}
.juso-popup .juso-foot .krds-btn {
    width: auto;
}
.juso-popup .juso-source {
    margin: 3.2rem 0 0;
    font-size: 1.3rem;
    color: #8A949E;
    text-align: center;
}
/* 상세주소를 입력하는 동안엔 아래 [닫기] 대신 [다시 검색]·[주소 입력] 만 */
.juso-popup:has(#resultData:not([style*="none"])) :is(.juso-foot, .juso-source) {
    display: none;
}

/* --- 강좌별 검색 목록 위 [세종 연구원만 보기] 체크 (damoa/course/list.jsp) --- */
/* .result-opts 의 굵은 글씨(700)가 체크 라벨까지 내려와 검색 필터의 체크(400)와 달라 보였음 */
.result-opts .krds-form-check label {
    font-weight: 400;
}
.result-opts.crs-result-opts {
    gap: 2.4rem;
}
/* 좁은 화면: 다른 목록은 정렬을 시트로 옮겨 이 줄을 숨기지만,
   강좌 목록은 체크·[강좌정보입력] 이 여기만 있으므로 그대로 보이게 */
@media (max-width: 47.9375em) {
    .space-result-head .result-opts.crs-result-opts {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}


/* ==================================================================== */
/* 예전 레이어 팝업(section > article.popArea) - 강의상세일정, 환불 등      */
/* 강의상세일정(lectr/lectrDetalSchdulePop.jsp 등)·환불·계좌 팝업 약 24곳이  */
/* 예전 마크업을 쓴다. 그 모양을 그리던 옛 layout.css 를 지금 레이아웃이       */
/* 불러오지 않아, 팝업이 화면 위에 뜨지 않고 본문 맨 위에 글자만 그대로        */
/* 나열됐다(제목·닫기·표·단추 모두 스타일 없음).                            */
/* 마크업·스크립트(id, onclick, display 전환)는 그대로 두고 KRDS 모달 모양으로 */
/* 보이게 한다. 스크립트가 article 에 넣는 top 값은 무시하고 화면 가운데에 둠  */
/* ==================================================================== */
section:has(> article.popArea) {
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* KRDS 모달(.krds-modal .modal-back)과 같은 어둡기 - 검정 75% */
    background-color: var(--krds-light-color-background-dim, rgba(0, 0, 0, 0.75));
}
section:has(> article.popArea) > h1.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
article.popArea {
    position: fixed !important;
    top: 50% !important;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: calc(100% - 3.2rem);
    max-width: 80rem;
    max-height: calc(100vh - 6.4rem);
    margin: 0 !important;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.16);
    overflow: hidden;
    transform: translate(-50%, -50%);
}
article.popArea > header {
    position: relative;
    flex: 0 0 auto;
    padding: 2.4rem 6.4rem 2rem 3.2rem;
    border-bottom: 0.1rem solid #CDD1D5;
    background: #FFFFFF;
}
article.popArea > header h1 {
    margin: 0;
    padding: 0;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1E2124;
}
/* 닫기(✕) - 글자는 화면낭독용으로만 남기고 가위표를 그림 */
article.popArea > header .pop_close {
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    margin-top: -2rem;
    border-radius: 0.8rem;
    font-size: 0;
    color: transparent;
    overflow: hidden;
}
article.popArea > header .pop_close::before,
article.popArea > header .pop_close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 0.2rem;
    border-radius: 0.1rem;
    background-color: #1E2124;
}
article.popArea > header .pop_close::before { transform: translate(-50%, -50%) rotate(45deg); }
article.popArea > header .pop_close::after { transform: translate(-50%, -50%) rotate(-45deg); }
article.popArea > header .pop_close:hover { background-color: #F4F5F6; }
article.popArea > header .pop_close:focus-visible { outline: 0.2rem solid #256EF4; outline-offset: 0; }
article.popArea > .container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
article.popArea .pop_con {
    flex: 1 1 auto;
    max-height: none;
    padding: 2.4rem 3.2rem 3.2rem;
    overflow-y: auto;
}
/* 구역 제목 (강의일정, 환불규정, 과정정보 …) */
article.popArea .p_tit {
    margin: 3.2rem 0 1.2rem;
    padding: 0;
    background: none;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
article.popArea .pop_con > .p_tit:first-child {
    margin-top: 0;
}
/* 표 - 본 화면 표와 같은 선·색·글자
   · 목록형(머리줄 + 자료줄: 강의일정 등) → 목록 표(.list-table)
       머리칸 흰 바탕·굵게, 위 2px·아래 1px 진한 선(#1E2124), 자료줄 아래 선 #E5E8EC, 세로선 없음
   · 항목-값형(과정정보·환불정보) / 칸 합친 표(환불규정) → 이 화면 상세 표(.hd-table)
       머리칸 #F3F6F9 바탕·굵게·#464C53, 선 #CDD1D5(가로·세로), 위 2px 진한 선 */
article.popArea .bbsList caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
article.popArea .bbsList table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border-top: 0.2rem solid #1E2124;
}
article.popArea .bbsList :is(th, td) {
    padding: 1.6rem 1.2rem;
    border-bottom: 0.1rem solid #CDD1D5;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #464C53;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
article.popArea .bbsList th {
    background-color: #F3F6F9;
    font-weight: 700;
}
article.popArea .bbsList :is(th, td) + :is(th, td) {
    border-left: 0.1rem solid #CDD1D5;
}
/* 목록형 (칸 합친 표·항목-값 표 제외) */
article.popArea .bbsList:not(.tb_refund1) table:not(:has([rowspan])) :is(th, td) {
    padding: 1.9rem 1.2rem;
    border-left: 0;
    border-bottom-color: #E5E8EC;
    color: #1E2124;
}
article.popArea .bbsList:not(.tb_refund1) table:not(:has([rowspan])) tr:not(:has(td)) > th {
    background-color: #FFFFFF;
    border-bottom-color: #1E2124;
    color: #1D1D1D;
}
article.popArea .bbsList td.last_list {
    padding-block: 3.2rem;
    color: #6D7882;
}
/* 항목-값 표(과정정보·환불정보)는 값 칸 왼쪽 맞춤 */
article.popArea .tb_refund1 td {
    text-align: left;
}
article.popArea .bbsList :is(input[type="text"], select) {
    width: 100% !important;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #8A949E;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    font-size: 1.6rem;
    color: #1E2124;
}
article.popArea .bbsList :is(input[type="text"], select):focus {
    border-color: #256EF4;
    outline: 0.2rem solid rgba(37, 110, 244, 0.25);
}
/* 페이지 번호 - 본 화면 페이지 번호(.pgm-paging)와 같은 모양.
   한 쪽뿐이면(번호 1 하나) 숨김 */
article.popArea .BasicTable_page .pageNavi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2.4rem;
    padding: 0;
    list-style: none;
}
article.popArea .BasicTable_page .pageNavi:not(:has(li + li)) {
    display: none;
}
article.popArea .BasicTable_page .pageNavi li {
    list-style: none;
}
article.popArea .BasicTable_page .pageNavi a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 4rem;
    padding: 0 0.8rem;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    color: #464C53;
    text-decoration: none;
}
article.popArea .BasicTable_page .pageNavi a:hover {
    background-color: #F0F2F5;
    color: #1E2124;
}
article.popArea .BasicTable_page .pageNavi li.active a {
    background-color: #063A74;
    color: #FFFFFF;
    font-weight: 700;
}
/* 아래 단추 - KRDS 모달처럼 오른쪽 끝 */
article.popArea .btnBox_cen:not([style]) {
    justify-content: flex-end;
    margin-top: 3.2rem;
}
@media (max-width: 767px) {
    article.popArea {
        width: calc(100% - 2.4rem);
        max-height: calc(100vh - 4rem);
    }
    article.popArea > header {
        padding: 2rem 5.6rem 1.6rem 2rem;
    }
    article.popArea > header h1 {
        font-size: 2rem;
    }
    article.popArea > header .pop_close {
        right: 1.2rem;
    }
    article.popArea .pop_con {
        padding: 2rem;
    }
    article.popArea .bbsList :is(th, td),
    article.popArea .bbsList:not(.tb_refund1) table:not(:has([rowspan])) :is(th, td) {
        padding: 1.2rem 0.8rem;
        font-size: 1.5rem;
    }
}

/* --- 수강 취소 및 환불 상세 아래 단추 (atnltRequestCanclInfo.jsp) ------- */
/* 목록 화면 카드의 [취소][환불] 과 같은 모양으로 맞춤.
   배치는 다른 상세 화면(.detail-actions)과 같이 [목록][취소][환불] 모두 오른쪽.
   쓸 수 없을 땐 두 단추 모두 같은 회색 */
.rfd-view-actions .krds-btn:disabled {
    border-color: #CDD1D5;
    background-color: #CDD1D5;
    color: #6D7882;
    cursor: default;
}


/* ==================================================================== */
/* 페이지 번호 - 좁은 화면(767px 이하) : .pgm-paging                       */
/* 다모아·마이페이지 목록의 .pgm-paging 은 [이전] 번호 [다음] 이 줄바꿈되며   */
/* [이전] / 번호 / [다음] 세 줄로 갈라졌다(강사정보 목록 등).               */
/* 게시판·수강신청 목록이 쓰는 KRDS 페이지 번호(.krds-pagination)의 좁은     */
/* 화면 모양과 같게: 윗줄 [< 이전][다음 >] 나란히, 아랫줄 번호              */
/* ==================================================================== */
@media (max-width: 47.9375em) {
    .pgm-paging {
        flex-wrap: wrap;
        gap: 1.6rem 0.8rem;
    }
    .pgm-paging .pgm-paging-navi {
        order: 1;
    }
    .pgm-paging ul {
        order: 2;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        width: 100%;
    }
    /* 번호 10개가 한 줄에 들어가도록 KRDS 번호 크기(3.2rem)에 맞춤 */
    .pgm-paging ul a {
        min-width: 3.2rem;
        height: 3.2rem;
        padding: 0 0.4rem;
        font-size: 1.5rem;
    }
}


/* ==================================================================== */
/* 예전 페이지 번호 (<ui:pagination type="image"> 출력)                   */
/* EgovImgPaginationRenderer 가 <li> 만 줄줄이 내보내는데(감싸는 ul 없음),  */
/* 그 모양을 그리던 옛 CSS 를 지금 레이아웃이 불러오지 않아 번호가 점(•)    */
/* 목록으로 세로로 늘어서거나 글자만 나열됐다.                             */
/* (마이페이지 강의홈 게시판·출석·시험, 학습마일리지, 시설·행사, 교육정보 등)*/
/* 어느 요소 안에 있든 '그 <li> 들을 바로 품은 요소'를 찾아                 */
/* 다른 목록의 페이지 번호(.pgm-paging)와 같은 모양으로 그린다.             */
/* 렌더러의 a 는 모두 href="/" + onclick 이라 그것으로 알아본다.            */
/* ==================================================================== */
:is(div, ul, nav, p):has(> li > a[href="/"][onclick]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 4rem 0 0;
    padding: 0;
    list-style: none;
}
:is(div, ul, nav, p):has(> li > a[href="/"][onclick]) > li {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}
:is(div, ul, nav, p):has(> li > a[href="/"][onclick]) > li::before {
    content: none;
}
/* 렌더러의 마지막 칸이 </li> 대신 <li> 로 닫혀 생기는 빈 칸 */
:is(div, ul, nav, p):has(> li > a[href="/"][onclick]) > li:empty {
    display: none;
}
:is(div, ul, nav, p):has(> li > a[href="/"][onclick]) > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 4rem;
    padding: 0 0.8rem;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    color: #464C53;
    text-decoration: none;
}
:is(div, ul, nav, p):has(> li > a[href="/"][onclick]) > li > a:hover {
    background-color: #F0F2F5;
    color: #1E2124;
}
:is(div, ul, nav, p):has(> li > a[href="/"][onclick]) > li.active > a {
    background-color: #063A74;
    color: #FFFFFF;
    font-weight: 700;
}
/* 처음·이전·다음·마지막(«« « » »») */
:is(div, ul, nav, p):has(> li > a[href="/"][onclick]) > li.pga > a {
    font-size: 1.5rem;
    letter-spacing: -0.1em;
    color: #6D7882;
}
/* 좁은 화면: 다른 목록(KRDS)처럼 윗줄 화살표, 아랫줄 번호 */
@media (max-width: 47.9375em) {
    :is(div, ul, nav, p):has(> li > a[href="/"][onclick]) {
        row-gap: 1.2rem;
    }
    :is(div, ul, nav, p):has(> li > a[href="/"][onclick]) > li > a {
        min-width: 3.2rem;
        height: 3.2rem;
        padding: 0 0.4rem;
        font-size: 1.5rem;
    }
    :is(div, ul, nav, p):has(> li > a[href="/"][onclick]) > li.pga {
        order: -2;
    }
    /* 화살표 줄과 번호 줄을 나누는 보이지 않는 줄바꿈 */
    :is(div, ul, nav, p):has(> li.pga > a[href="/"][onclick])::before {
        content: "";
        order: -1;
        flex-basis: 100%;
        height: 0;
    }
}

/* ==================================================================== */
/* 마이페이지(학당) > 나의 학당내역 > 학당 신청 및 관리                    */
/*                                                                      */
/* 검색·표·쪽 이동·아래 단추는 강좌 이력(.lec-)과 같은 컴포넌트를 쓴다.    */
/* 이 화면은 검색어 칸이 둘(학당명·기관명)이라 검색 상자 줄만 맞춘다      */
/* ==================================================================== */

/* 넓은 화면 : 학당명 | 기관명 | 검색·초기화 를 한 줄에 */
.atn-search .pgm-search-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 2.4rem 4rem;
}
.atn-search .filter-label {
    width: auto;
}
/* 아래 단추 두 개 사이 간격 */
.atn-actions {
    gap: 0.8rem;
}

/* 1200px 이하 : 항목을 한 줄에 하나씩, 단추는 오른쪽 끝 */
@media (max-width: 75em) {
    .atn-search .pgm-search-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
    }
    .atn-search .filter-label {
        flex: 0 0 6.4rem;
        width: 6.4rem;
    }
    .atn-search .search-actions {
        justify-content: flex-end;
    }
}
/* 767px 이하 : 공용 규칙대로 단추가 가로를 다 쓴다(위아래 쌓임) */
@media (max-width: 767px) {
    .atn-actions .krds-btn {
        flex: 1 1 0;
        width: auto;
    }
}

/* ==================================================================== */
/* 마이페이지(학당) > 학당 신청 및 관리 > 등록·수정                         */
/*                                                                      */
/* 기관등록(damoa/institution/form.jsp)과 같은 신청 폼 컴포넌트를 쓴다.   */
/* 이 화면만 다른 것은 주소 한 칸(우편번호 칸 없이 전체 주소)뿐이다       */
/* ==================================================================== */

/* 기관/대학 값에 따라 기관명 선택 상자 하나만 보인다 (스크립트가 hidden 전환) */
.atn-regist .krds-form-select[hidden] {
    display: none !important;
}
/* 주소는 우편번호가 아니라 전체 주소가 담기는 칸이라 개요 칸(70rem)만큼 넓힌다 */
.atn-regist .apply-addr-group {
    width: 100%;
    max-width: 70rem;
}
.atn-regist .apply-addr-group input[type="text"].krds-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}
.atn-regist .apply-addr-group .krds-btn {
    flex: 0 0 auto;
}
/* 임기 시작일 ~ 종료일 사이 물결표 */
.atn-date-sep {
    font-size: 1.9rem;
    color: #464C53;
}
/* 설립일(한 칸)은 기관등록과 같은 .orgreg-date, 임기(기간)는 시작일 ~ 종료일 두 칸 + 달력 단추 */
.atn-regist .atn-date-range .calendar-input {
    width: 100%;
    max-width: 52.7rem;
}
/* 공용 .apply-form .calendar-input .input-group > li 는 한 칸짜리 날짜용(폭 100%)이라
   기간에서는 가운데 '~' 칸까지 같은 폭을 나눠 가져 두 칸이 벌어진다.
   날짜 두 칸만 반씩, '~' 는 글자 폭만 */
.atn-regist .atn-date-range .input-group.range > li:not(.mark) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}
.atn-regist .atn-date-range .input-group.range > li.mark {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
}
/* 달력 단추가 겹치는 건 마지막 칸뿐이라 첫 칸은 오른쪽 여백을 원래대로 */
.atn-regist .atn-date-range .input-group.range > li:first-child .krds-input {
    padding-right: 1.6rem;
}

/* ==================================================================== */
/* 예전 마크업 화면 공통 보정 (검색 상자·게시물 수·표·상세 표·강의실 머리)   */
/*                                                                      */
/* 마이페이지 강의실(매니저·강사), 수강결제관리(평생교육), 동아리, 학습      */
/* 마일리지, 나의 학당내역 상세 등 아직 새 마크업으로 바뀌지 않은 화면이      */
/* 예전 클래스(search_boxArea, bbs_total, bbsList, classList, tb_detail …) */
/* 를 그대로 쓴다. 그 스타일이 있던 옛 CSS 를 지금 레이아웃이 불러오지 않아  */
/* 글자만 늘어서 보였다. JSP 는 그대로 두고 새 화면과 같은 값으로 맞춘다.   */
/*  - 검색 상자   : .filter-wrap (회색 상자, 입력 4.8rem, 검색=어두운 단추)  */
/*  - 게시물 수   : .result-count (굵은 글씨, 숫자 초록)                     */
/*  - 목록 표     : .list-table (위 2px 진한 선, 줄 사이 옅은 선)            */
/*  - 상세 표     : 왼쪽 항목 칸 회색 바탕 + 줄 사이 선                      */
/* 단추 묶음(.btnBox_*)은 위 '예전 마크업 단추 묶음' 규칙이 맡는다          */
/* ==================================================================== */

/* --- 검색 상자 ------------------------------------------------------ */
.search_boxArea {
    margin-bottom: 4rem;
    padding: 3.2rem 4rem;
    border-radius: 1rem;
    background-color: #F5F6F9;
}
.search_boxArea .search_listArea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.search_boxArea .search_listArea > li {
    margin: 0;
    padding: 0;
}
.search_boxArea .search_listArea > li::before {
    content: none;
}
.search_boxArea .search_listArea > li:is(.search_tit, .search_tit1, .search_tit2) {
    flex: 0 0 auto;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.search_boxArea .search_listArea > li:is(.search_form, .search_form1, .search_form2) {
    display: flex;
    flex: 1 1 24rem;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.search_boxArea .search_input {
    flex: 1 1 auto;
    min-width: 0;
}
.search_boxArea .search_btn,
.bbs_search_basic .searchinput {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1rem;
}

/* 검색어 칸 · 선택 상자 (검색 상자, 게시판 검색줄) */
:is(.search_boxArea, .bbs_search_basic) :is(input[type="text"], input[type="search"], input:not([type])):not(.krds-input),
:is(.search_boxArea, .bbs_search_basic) select:not(.krds-form-select) {
    width: 100%;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    color: #1E2124;
    font-size: 1.7rem;
    box-sizing: border-box;
}
:is(.search_boxArea, .bbs_search_basic) select:not(.krds-form-select) {
    width: auto;
    min-width: 14rem;
    padding-right: 4rem;
}
:is(.search_boxArea, .bbs_search_basic) :is(input, select):not(.krds-input):not(.krds-form-select):focus {
    outline: 0.2rem solid #256EF4;
    outline-offset: 0;
}

/* 검색 단추 : 글자 없이 &nbsp; 만 들어 있어 '검색' 글자를 그려 준다 */
:is(.btn-search, .btn-srh):not(.krds-btn),
.search_btn .btn-reset:not(.krds-btn),
.btn-reset:not(.krds-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 8rem;
    height: 4.8rem;
    margin: 0;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.6rem;
    background: #FFFFFF none;
    color: #1E2124;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-indent: 0;
    cursor: pointer;
}
:is(.btn-search, .btn-srh):not(.krds-btn) {
    border-color: #333333;
    background-color: #333333;
    color: #FFFFFF;
    font-size: 0;
}
:is(.btn-search, .btn-srh):not(.krds-btn)::before {
    content: "검색";
    font-size: 1.7rem;
}
:is(.btn-search, .btn-srh):not(.krds-btn):hover {
    background-color: #1E2124;
}
/* 검색 줄 밖의 btn-reset 은 작성하기·수정(파랑 계열 → 초록 주 단추), 삭제(회색 → 흰 단추) */
.btn-reset:not(.krds-btn):is(.btn-blue, .btn-dBlue):not(.search_boxArea *) {
    border-color: #008F55;
    background-color: #008F55;
    color: #FFFFFF;
}
.btn-reset:not(.krds-btn):hover {
    background-color: #F4F6F9;
}
.btn-reset:not(.krds-btn):is(.btn-blue, .btn-dBlue):not(.search_boxArea *):hover {
    background-color: #007244;
}

/* 게시판 검색줄 (총게시물 오른쪽 선택 상자 + 검색어 + 검색) */
.bbs_search_basic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}
.bbs_search_basic .grap {
    flex: 0 0 auto;
}
.bbs_search_basic .searchinput input {
    width: 28rem !important;
}

/* --- 총게시물 / 페이지 ----------------------------------------------- */
.sub_conArea .basic_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 1.6rem;
}
.sub_conArea .basic_box fieldset {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
}
.sub_conArea .bbs_total {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E2124;
}
.sub_conArea .bbs_total .bold {
    color: #008F55;
    font-weight: 700;
}

/* --- 목록 표 (.bbsList / .classList / .tb_list) ----------------------- */
/* 상세 표·쓰기 표·글 보기(.tb_detail, .tb_refund, .write, .view)는 아래에서 따로 */
:is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) {
    overflow-x: auto;
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) table {
    width: 100%;
    border-collapse: collapse;
    border-top: 0.2rem solid #1E2124;
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) table :is(th, td) {
    padding: 1.9rem 1.2rem;
    border-bottom: 0.1rem solid #E5E8EC;
    color: #1E2124;
    font-size: 1.7rem;
    text-align: center;
    word-break: keep-all;
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) table thead th {
    border-bottom-color: #1E2124;
    font-weight: 700;
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) table tbody tr:hover > td {
    background-color: rgb(0 143 85 / 5%);
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) table td a {
    color: inherit;
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) table td a:hover {
    color: #008F55;
    text-decoration: underline;
}
/* 머리 줄과 내용 줄을 표 두 개로 나눈 목록(.tbHeader*) 은 아래 표에 위 선을 다시 긋지 않는다 */
:is(.tbHeader, .tbHeader2) table {
    border-top: 0 !important;
}
/* 자료 없음 줄 : 새 목록(.list-table)의 빈 줄과 같은 값 */
:is(.bbsList, .classList, .tb_list):not(article.popArea *) table tbody tr:has(> td[colspan]:only-child) > td {
    padding: 6.4rem 2rem;
    color: #5F6873;
    font-size: 1.6rem;
    text-align: center;
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *) table tbody tr:has(> td[colspan]:only-child):hover > td {
    background-color: transparent;
}
/* 좁은 화면 : 표는 카드로 바꾸지 않고 가로로 밀어 본다 */
@media (max-width: 767px) {
    :is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) table {
        min-width: 72rem;
    }
    :is(.bbsList, .classList, .tb_list):not(article.popArea *):not(.write):not(.view):not(.tb_detail):not(.tb_detail2):not(.tb_refund):not(.tb_refund1) table :is(th, td) {
        padding: 1.4rem 0.8rem;
        font-size: 1.5rem;
    }
}

/* --- 상세 표 (.tb_detail / .tb_detail2 / .tb_refund / .tb_refund1) --- */
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) {
    overflow-x: auto;
}
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table {
    width: 100%;
    border-collapse: collapse;
    border-top: 0.2rem solid #1E2124;
}
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table :is(th, td) {
    padding: 1.6rem 2rem;
    border-bottom: 0.1rem solid #CDD1D5;
    color: #1E2124;
    font-size: 1.7rem;
    line-height: 1.6;
    text-align: left;
    vertical-align: middle;
    word-break: keep-all;
}
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table th {
    background-color: #F3F6F9;
    color: #1E2124;
    font-weight: 700;
}
/* 위쪽 머리 줄(thead) 이 있는 상세 표는 머리 칸을 가운데로 */
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table thead th {
    text-align: center;
}
/* 상세 표 안의 입력 칸 */
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table :is(input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input:not([type])):not(.krds-input),
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table select:not(.krds-form-select) {
    max-width: 100%;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    color: #1E2124;
    font-size: 1.7rem;
    box-sizing: border-box;
    vertical-align: middle;
}
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table textarea:not(.krds-textarea) {
    width: 100%;
    min-height: 12rem;
    padding: 1.2rem 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    color: #1E2124;
    font-size: 1.7rem;
    line-height: 1.6;
    box-sizing: border-box;
}
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table :is(input, select, textarea):is([readonly], .readonly) {
    background-color: #E2E4E7 !important;
    border-color: #B1B8BE;
}
@media (max-width: 767px) {
    /* 항목 칸과 값 칸을 위아래로 쌓는다 (두 쌍이 한 줄인 표도 한 쌍씩) */
    :is(.tb_detail, .tb_detail2):not(article.popArea *) table:not(:has(thead)),
    :is(.tb_detail, .tb_detail2):not(article.popArea *) table:not(:has(thead)) :is(tbody, tr, th, td) {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    :is(.tb_detail, .tb_detail2):not(article.popArea *) table:not(:has(thead)) colgroup {
        display: none;
    }
    :is(.tb_detail, .tb_detail2):not(article.popArea *) table:not(:has(thead)) th {
        padding: 1.2rem 1.6rem;
        border-bottom: 0;
    }
    :is(.tb_detail, .tb_detail2):not(article.popArea *) table:not(:has(thead)) td {
        padding: 1.2rem 1.6rem 1.6rem;
    }
    :is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1):not(article.popArea *) table :is(th, td) {
        font-size: 1.5rem;
    }
    :is(.tb_refund, .tb_refund1):not(article.popArea *) table {
        min-width: 64rem;
    }
}

/* 표 위 소제목 */
.sub_conArea h2.p_tit,
.sub_conArea h3.p_tit {
    margin: 4rem 0 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.sub_conArea > h2.p_tit:first-child,
.sub_conArea #ajaxContent > h2.p_tit:first-child {
    margin-top: 0;
}

/* --- 강의실 머리 (강좌 정보 + 메뉴 탭) — 매니저·강사·온라인 강의홈 ------ */
.sub_conArea .course_infoArea {
    margin-bottom: 3.2rem;
    padding: 3.2rem 4rem;
    border-radius: 1.2rem;
    background-color: #F5F6F9;
}
.sub_conArea .course_infoArea .course_tit {
    margin-bottom: 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
    word-break: keep-all;
}
.sub_conArea .course_infoArea .course_infoList {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 3.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #464C53;
    font-size: 1.7rem;
}
.sub_conArea .course_infoArea .course_infoList > li span {
    color: #1E2124;
    font-weight: 700;
}
:is([class^="course_tabArea"], .tabArea2, .tabArea6) {
    margin-bottom: 4rem;
    border-bottom: 0.1rem solid #CDD1D5;
    overflow-x: auto;
}
:is([class^="course_tabList"], .tab_list2, .tab_list6) {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}
:is([class^="course_tabList"], .tab_list2, .tab_list6) > li > div {
    display: contents;
}
:is([class^="course_tabList"], .tab_list2, .tab_list6) > li a {
    display: block;
    padding: 1.4rem 2rem;
    border-bottom: 0.3rem solid transparent;
    color: #464C53;
    font-size: 1.7rem;
    font-weight: 500;
    text-decoration: none;
}
:is([class^="course_tabList"], .tab_list2, .tab_list6) > li a:hover {
    color: #1E2124;
}
:is([class^="course_tabList"], .tab_list2, .tab_list6) > li.sel_tabList a {
    border-bottom-color: #008F55;
    color: #008F55;
    font-weight: 700;
}
@media (max-width: 767px) {
    .sub_conArea .course_infoArea {
        padding: 2.4rem;
    }
    .sub_conArea .course_infoArea .course_tit {
        font-size: 2rem;
    }
    .sub_conArea .course_infoArea .course_infoList {
        flex-direction: column;
        font-size: 1.5rem;
    }
    :is([class^="course_tabList"], .tab_list2, .tab_list6) > li a {
        padding: 1.2rem 1.4rem;
        font-size: 1.5rem;
    }
    .search_boxArea {
        padding: 2.4rem;
    }
    .search_boxArea .search_listArea {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .search_boxArea .search_listArea > li:is(.search_form, .search_form1, .search_form2) {
        flex-wrap: wrap;
        flex-basis: auto;
    }
    .search_boxArea .search_btn {
        width: 100%;
    }
    .search_boxArea .search_btn > * {
        flex: 1 1 0;
    }
    .bbs_search_basic {
        justify-content: stretch;
        width: 100%;
    }
    .bbs_search_basic .searchinput {
        flex: 1 1 100%;
    }
    .bbs_search_basic .searchinput input {
        width: 100% !important;
        flex: 1 1 auto;
    }
}

/* --- 여백 도우미 (예전 마크업이 쓰는 이름 그대로) ---------------------- */
.sub_conArea .mgt5 { margin-top: 0.5rem; }
.sub_conArea .mgt10 { margin-top: 1rem; }
.sub_conArea .mgt20 { margin-top: 2rem; }
.sub_conArea .mgt30 { margin-top: 3rem; }
.sub_conArea .mgb15 { margin-bottom: 1.5rem; }
.sub_conArea .mgb30 { margin-bottom: 3rem; }
.sub_conArea .mb20 { margin-bottom: 2rem; }

/* --- 목록 칸 안의 강좌 정보 (수강바구니·결제내역 등) -------------------- */
/* 강좌명 아래 '학별 / 강사 / 학기 / 교육기간' 을 한 줄로 이어 쓴다 */
:is(.bbsList, .classList, .tb_list):not(article.popArea *) table td.srh_tit {
    text-align: left;
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *) table td .link a {
    font-weight: 700;
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *) table td .class_infoArea ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
    color: #464C53;
    font-size: 1.5rem;
}
:is(.bbsList, .classList, .tb_list):not(article.popArea *) table td .class_infoArea .c_infoBar {
    color: #B1B8BE;
}
/* 접수중 / 마감 표시 */
:is(.state_ing, .state_end) {
    display: inline-flex;
    align-items: center;
    height: 2.8rem;
    padding: 0 1rem;
    border-radius: 0.4rem;
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}
.state_ing {
    background-color: #EAF6EC;
    color: #008F55;
}
.state_end {
    background-color: #F4F5F6;
    color: #6D7882;
}
/* 게시판형 목록의 제목 칸은 왼쪽 정렬 (새 목록 .col-title 과 같게) */
:is(.bbsList, .classList, .tb_list):not(article.popArea *) table tbody td:is(.title, .subject, .sj) {
    text-align: left;
}

/* --- 따로 놓인 예전 단추 (.btn + nor / sml / big / nor1 / btn_agree / faq_btn) --- */
/* 단추 묶음(.btnBox_*) 밖, 표 칸 안(주소검색·강사 검색·추가) 이나 머리 줄에 놓인 것.
   색은 단추 묶음 규칙과 같게: 파랑·초록 계열 → 초록, 검정 → 어두운, 그 밖 → 흰 테두리 */
.btn:not(.krds-btn):is(.nor, .nor1, .sml, .big, .btn_agree, .faq_btn, .add_file):not(:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > *) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 8rem;
    height: 4.8rem;
    margin: 0;
    padding: 0 2rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    color: #1E2124;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}
.btn:not(.krds-btn):is(.sml, .add_file):not(:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > *) {
    min-width: 6rem;
    height: 4rem;
    padding: 0 1.4rem;
    font-size: 1.5rem;
}
.btn:not(.krds-btn):is(.nor, .nor1, .sml, .big, .btn_agree, .faq_btn, .add_file):is(.btn-blue, .btn-dBlue, .btn-green):not(:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > *) {
    border-color: #008F55;
    background-color: #008F55;
    color: #FFFFFF;
}
.btn:not(.krds-btn):is(.nor, .nor1, .sml, .big, .btn_agree, .faq_btn, .add_file):is(.btn-black, .btn-dGray):not(:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > *) {
    border-color: #333333;
    background-color: #333333;
    color: #FFFFFF;
}
/* 단추 묶음 안의 btn-black (주소검색 등과 같은 어두운 단추) */
:is(.btnBox_fr, .btnBox_cen, .btnArea):not([style]) > :is(a, button):not(.krds-btn):is(.btn-black, .btn-dGray) {
    border-color: #333333;
    background-color: #333333;
    color: #FFFFFF;
}
/* 표 칸 안에서 입력칸 옆에 붙는 단추 */
:is(.tb_detail, .tb_detail2, .tb_refund, .tb_refund1, .bbsList.write, .tb-mem) td .btn:not(.krds-btn) {
    margin-right: 0.8rem;
}

/* --- 쓰기 표 (.bbsList.write 안의 class 없는 표, 동아리 닉네임 .tb-mem) ---- */
/* .bbsList.write .formTable 은 위쪽 '게시글 쓰기·수정' 규칙이 맡는다 */
:is(.bbsList.write, .tb-mem) table:not(.formTable) {
    width: 100%;
    border-collapse: collapse;
    border-top: 0.2rem solid #1E2124;
}
:is(.bbsList.write, .tb-mem) table:not(.formTable) caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
:is(.bbsList.write, .tb-mem) table:not(.formTable) :is(th, td) {
    padding: 1.6rem 2rem;
    border-bottom: 0.1rem solid #CDD1D5;
    color: #1E2124;
    font-size: 1.7rem;
    line-height: 1.6;
    text-align: left;
    vertical-align: middle;
}
:is(.bbsList.write, .tb-mem) table:not(.formTable) th {
    width: 18rem;
    background-color: #F3F6F9;
    font-weight: 700;
}
:is(.bbsList.write, .tb-mem) table:not(.formTable) :is(input[type="text"], input[type="tel"], input[type="email"], input:not([type])):not(.krds-input),
:is(.bbsList.write, .tb-mem) table:not(.formTable) select:not(.krds-form-select) {
    width: 100%;
    max-width: 52.7rem;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    background-color: #FFFFFF;
    color: #1E2124;
    font-size: 1.7rem;
    box-sizing: border-box;
    vertical-align: middle;
}
.tb-mem table :is(input[type="text"]):not(.krds-input) {
    max-width: 30rem;
}
:is(.bbsList.write, .tb-mem) table:not(.formTable) textarea:not(.krds-textarea) {
    width: 100%;
    min-height: 16rem;
    padding: 1.2rem 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    color: #1E2124;
    font-size: 1.7rem;
    line-height: 1.6;
    box-sizing: border-box;
}
/* 첨부파일 칸 */
:is(.bbsList.write, .tb_detail, .tb_detail2) .fileList {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
:is(.bbsList.write, .tb_detail, .tb_detail2) :is(.file_input, .file_name, .file_name1) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.6rem;
}
:is(.bbsList.write, .tb_detail, .tb_detail2) input[type="file"]:not(.hide) {
    font-size: 1.5rem;
}
@media (max-width: 767px) {
    :is(.bbsList.write, .tb-mem) table:not(.formTable),
    :is(.bbsList.write, .tb-mem) table:not(.formTable) :is(tbody, tr, th, td) {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    :is(.bbsList.write, .tb-mem) table:not(.formTable) colgroup {
        display: none;
    }
    :is(.bbsList.write, .tb-mem) table:not(.formTable) th {
        padding: 1.2rem 1.6rem;
        border-bottom: 0;
    }
    :is(.bbsList.write, .tb-mem) table:not(.formTable) td {
        padding: 1.2rem 1.6rem 1.6rem;
        font-size: 1.5rem;
    }
}

/* --- 게시글 보기 (.bbsList.view) — 새 상세(.detail-*) 와 같은 값 ------- */
.bbsList.view .titleArea {
    padding-bottom: 2.4rem;
    margin-bottom: 2.4rem;
    border-bottom: 0.2rem solid #1E2124;
}
.bbsList.view .titleArea .title {
    margin: 0 0 1.2rem;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}
.bbsList.view .titleArea .info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.6rem;
    color: #464C53;
}
.bbsList.view .titleArea .info > li {
    position: relative;
}
.bbsList.view .titleArea .info > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1rem;
    width: 0.1rem;
    height: 1.4rem;
    background-color: #CDD1D5;
    transform: translateY(-50%);
}
.bbsList.view .fileBox {
    margin-bottom: 2.4rem;
    padding: 1.6rem 2rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    line-height: 1.8;
}
.bbsList.view .fileBox a {
    color: #1E2124;
    text-decoration: underline;
}
.bbsList.view .fileBox p {
    margin: 0;
    color: #6D7882;
}
.bbsList.view .detail_content {
    min-height: 16rem;
    padding: 1.6rem 0 3.2rem;
    border-bottom: 0.1rem solid #CDD1D5;
    font-size: 1.7rem;
    line-height: 1.8;
    color: #1E2124;
}
/* 이전글 / 다음글 */
.bbsList.view .tb_list {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding: 2rem 0;
    border-bottom: 0.1rem solid #CDD1D5;
    overflow: visible;
}
.bbsList.view .tb_list :is(.pre_tit, .next_tit) {
    flex: 0 0 6rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
.bbsList.view .tb_list .tb_txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 1.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bbsList.view .tb_list .tb_txt a {
    color: #1E2124;
}
.bbsList.view .tb_list .tb_txt a:hover {
    text-decoration: underline;
}

/* --- 댓글(코멘트) 목록 · 작성 ---------------------------------------- */
.class_epilogArea .class_epilogList {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 0.1rem solid #1E2124;
}
.class_epilogArea .class_epilogList > li {
    padding: 1.6rem 0;
    border-bottom: 0.1rem solid #E5E8EC;
    font-size: 1.6rem;
    color: #1E2124;
}
.class_epilogArea .class_epilogList > li:not([id]) {
    padding: 3.2rem 0;
    color: #5F6873;
    text-align: center;
}
.class_epilogArea .class_epilogTit {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem;
}
.class_epilogArea .class_epilogTit > div {
    float: none !important;
    width: auto !important;
}
.class_epilogArea .class_epilogTit > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}
.class_epilogArea .class_epilogTit p {
    margin: 0;
    line-height: 1.6;
}
.class_epilogArea .class_epilogInfo {
    margin-top: 0.6rem !important;
    color: #6D7882;
    font-size: 1.4rem;
}
.class_epilogArea .class_epilogInfo span {
    color: #CDD1D5;
}
.class_epilogArea .class_epilogTit .btnBox_fr {
    display: flex !important;
    flex: 0 0 auto;
    gap: 0.6rem;
    margin: 0 !important;
}
.class_epilogArea .class_epilogTit .btn-reset:not(.krds-btn) {
    min-width: 0;
    height: 3.2rem;
    padding: 0 1rem;
    font-size: 1.4rem;
}
.epilogArea .epilog_input {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.epilogArea .epilog_input input[type="text"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #58616A;
    border-radius: 0.8rem;
    font-size: 1.7rem;
    box-sizing: border-box;
}

/* --- 아이디/비밀번호 찾기 결과 (.join_okArea) ------------------------- */
.join_okArea {
    max-width: 64rem;
    margin: 0 auto;
    padding: 4.8rem 3.2rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1.2rem;
    text-align: center;
}
.join_okArea .ok_tit {
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
    word-break: keep-all;
}
.join_okArea .id_infoBox {
    margin-top: 2.4rem;
    padding: 2rem;
    border-radius: 0.8rem;
    background-color: #F5F6F9;
    font-size: 1.9rem;
    color: #464C53;
}
.join_okArea .id_infoBox span {
    color: #008F55;
    font-weight: 700;
}
.join_okArea + .btnBox_cen:not([style]) {
    max-width: 64rem;
    margin-inline: auto;
}

/* --- 동아리 소개 (.clubArea_detail) ---------------------------------- */
.clubArea_detail .club_detailTit {
    padding-bottom: 2rem;
    border-bottom: 0.2rem solid #1E2124;
    font-size: 2.8rem;
    font-weight: 700;
    color: #1E2124;
    word-break: keep-all;
}
.clubArea_detail .club_detailArea {
    padding: 2rem 0;
    border-bottom: 0.1rem solid #CDD1D5;
}
.clubArea_detail .club_detailList {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 3.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #464C53;
    font-size: 1.7rem;
}
.clubArea_detail .club_detailList span {
    color: #1E2124;
    font-weight: 700;
}
.clubArea_detail .club_conArea {
    padding: 3.2rem 0;
    border-bottom: 0.1rem solid #CDD1D5;
}
.clubArea_detail .club_conArea pre {
    margin: 0;
    font-family: inherit;
    font-size: 1.7rem;
    line-height: 1.8;
    color: #1E2124;
    white-space: pre-wrap;
    word-break: keep-all;
}
.course_infoArea + :is([class^="course_tabArea"]) + #ajaxContent > .clubArea_detail .club_detailTit {
    font-size: 2.4rem;
}

/* --- 예전 FAQ (강의실·동아리 게시판의 FAQ형) -------------------------- */
.faq_titArea {
    margin-bottom: 2.4rem;
}
.faq_titArea .faq_tit {
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
.faq_titArea .faq_txt {
    margin-top: 0.6rem;
    font-size: 1.7rem;
    color: #464C53;
}
.btn_topArea {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
}
.bbsFaq .faqList {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 0.2rem solid #1E2124;
}
.bbsFaq .faqList > li {
    border-bottom: 0.1rem solid #CDD1D5;
}
.bbsFaq .faqList > li:not(.accordion_title) {
    padding: 6rem 2rem;
    color: #5F6873;
    font-size: 1.6rem;
    text-align: center;
}
.bbsFaq .faqList > li > :is(.ques_nonSelect, .ques_select) > a {
    display: flex;
    gap: 0.8rem;
    padding: 2rem 2rem 2rem 6rem;
    position: relative;
    color: #1E2124;
    font-size: 1.7rem;
    text-decoration: none;
}
.bbsFaq .faqList > li > :is(.ques_nonSelect, .ques_select) > a::before {
    content: "Q";
    position: absolute;
    top: 1.8rem;
    left: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background-color: #063A74;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 700;
}
.bbsFaq .faqList > li > .ques_select > a {
    font-weight: 700;
}
.bbsFaq .faq_ansArea {
    padding: 2rem 2rem 2.4rem 6rem;
    background-color: #F5F6F9;
    position: relative;
}
.bbsFaq .faq_ansArea::before {
    content: "A";
    position: absolute;
    top: 1.8rem;
    left: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background-color: #008F55;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 700;
}
.bbsFaq .faq_answer {
    font-size: 1.7rem;
    line-height: 1.8;
    color: #1E2124;
}

/* --- 설문·시험 결과 팝업 (.test_*) ----------------------------------- */
article.popArea .test_titBox {
    margin-bottom: 2.4rem;
    padding: 2rem 2.4rem;
    border-radius: 0.8rem;
    background-color: #F5F6F9;
}
article.popArea .test_titBox .test_tit {
    margin-bottom: 0.6rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1E2124;
}
article.popArea .test_titBox .test_text {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.7;
    color: #464C53;
}
article.popArea .test_ques {
    margin: 2.4rem 0 1.2rem;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1E2124;
    word-break: keep-all;
}
article.popArea .test_ansList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
article.popArea .test_ansList > li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.6rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 0.8rem;
    font-size: 1.6rem;
}
article.popArea .test_ansList > li:has(input:checked) {
    border-color: #008F55;
    background-color: #EAF6EC;
}
article.popArea .test_ansList .radio_inp input {
    width: 2rem;
    height: 2rem;
    margin: 0;
    accent-color: #008F55;
}
article.popArea .test_ansList .radio_lab {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}
article.popArea .test_ansList .radio_lab input[type="text"] {
    height: 4rem;
    padding: 0 1.2rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 0.6rem;
    background-color: #F4F5F6;
    font-size: 1.5rem;
}
article.popArea .test_textArea textarea {
    width: 100%;
    min-height: 10rem;
    padding: 1.2rem 1.6rem;
    border: 0.1rem solid #B1B8BE;
    border-radius: 0.8rem;
    background-color: #F4F5F6;
    font-size: 1.6rem;
    line-height: 1.6;
    box-sizing: border-box;
}

/* --- 운영 계획서 강사 검색 팝업 : 이름 누르면 선택 ----------------------- */
.tch-popup .tch-popup-pick {
    color: #1E2124;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
}
.tch-popup .tch-popup-pick:hover {
    color: #008F55;
}
.tch-popup > .form-hint-information {
    margin-top: 1.6rem;
}

/* --- 결제 실패 안내 (fail/requestPay 등, 레이아웃 없는 화면) ----------- */
.pay-fail-body {
    margin: 0;
    background-color: #F5F6F9;
}
.pay-fail {
    max-width: 56rem;
    margin: 8rem auto;
    padding: 4.8rem 3.2rem;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
    text-align: center;
    box-shadow: 0 0.2rem 1.2rem rgb(0 0 0 / 6%);
}
.pay-fail-tit {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
    word-break: keep-all;
}
.pay-fail-desc {
    margin: 1.6rem 0 0;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #464C53;
}
.pay-fail-actions {
    margin-top: 3.2rem;
}
@media (max-width: 767px) {
    .pay-fail {
        margin: 4rem 1.6rem;
        padding: 3.2rem 2rem;
    }
    .pay-fail-actions .krds-btn {
        width: 100%;
    }
}

/* --- 사이트맵 (main/siteMap) ---------------------------------------- */
.sitemapArea .sitemapList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 3.2rem 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 예전 4열 배치를 맞추려고 넣어 둔 빈 칸(h4 에 &nbsp; 만 있는 항목)은 감춘다 */
.sitemapArea .sitemapList > li:not(:has(.site_list)):has(> h4:only-child) {
    display: none;
}
.sitemapArea .sitemapList > li > h4 {
    margin: 0 0 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 0.2rem solid #1E2124;
    font-size: 2rem;
    font-weight: 700;
    color: #1E2124;
}
.sitemapArea .site_list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sitemapArea .site_list > li > a {
    display: block;
    padding: 0.8rem 0;
    color: #464C53;
    font-size: 1.7rem;
    text-decoration: none;
}
.sitemapArea .site_list > li > a:hover {
    color: #008F55;
    text-decoration: underline;
}
/* 예전 전체화면 사이트맵의 닫기 그림. 지금은 일반 화면이라 쓰지 않는다 */
.sitemapArea .site_close {
    display: none;
}

/* --- 오시는 길 (staticMapPage / staticMapPage2) ---------------------- */
/* 지도 칸에 높이가 없으면 카카오 지도가 0px 로 그려져 보이지 않는다 */
.directArea .mapArea {
    width: 100%;
    height: 44rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1.2rem;
    overflow: hidden;
}
.directArea :is(.direct_trainArea, .direct_busArea) {
    padding: 2.4rem 3.2rem;
    border: 0.1rem solid #CDD1D5;
    border-radius: 1.2rem;
}
.directArea .direc_tit {
    margin: 2.4rem 0 0.8rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E2124;
}
.directArea .direc_tit:first-child {
    margin-top: 0;
}
.directArea :is(.direct_trainArea, .direct_busArea) p {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #464C53;
    word-break: keep-all;
}
.directArea .direct_list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.directArea .direct_list > li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #464C53;
}
.directArea .direct_list > li::before {
    content: "";
    position: absolute;
    top: 1.3rem;
    left: 0;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: #464C53;
}
@media (max-width: 767px) {
    .directArea .mapArea {
        height: 30rem;
    }
    .directArea :is(.direct_trainArea, .direct_busArea) {
        padding: 2rem;
    }
}

/* --- 이용 매뉴얼 (manual/index1~5) ------------------------------------ */
/* 넓은 화면용(.user_imgPc)·좁은 화면용(.user_imgMobile) 이 둘 다 들어 있어
   한 화면에 같은 내용이 두 번 나왔다. 폭에 맞는 것만 보인다 */
.user_imgMobile {
    display: none;
}
@media (max-width: 767px) {
    .user_imgPc {
        display: none;
    }
    .user_imgMobile {
        display: block;
    }
}
:is(.user_imgPc, .user_imgMobile) .stit_p {
    margin: 0 0 2.4rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E2124;
}
:is(.user_imgPc, .user_imgMobile) .u_stit {
    margin: 2.4rem 0 1.2rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E2124;
    word-break: keep-all;
}
:is(.user_imgPc, .user_imgMobile) .p_text {
    margin-bottom: 1.2rem;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #464C53;
}
:is(.user_imgPc, .user_imgMobile) .user_imgArea img {
    max-width: 100%;
    height: auto;
    border: 0.1rem solid #E5E8EC;
    border-radius: 0.8rem;
}

/* ==================================================================== */
/* 인재평생교육 > 장학금 > 장학금 현황                                    */
/* ==================================================================== */

/* --- 목록 : 접수번호가 옆 칸(장학금명)을 덮던 문제 -------------------- */
/* 접수번호는 20자리(SAC3164EDA8CC0420196)인데 칸이 10% 라 모자랐고,
   white-space: nowrap 이라 줄을 바꾸지 못하고 옆 칸 위로 넘쳤다.
   칸 폭을 넓히고(목록 JSP colgroup), 그래도 모자라면 글자 단위로
   줄이 바뀌게 해서 어떤 폭에서도 겹치지 않게 한다 */
.aid-table-wrap .list-table.tbl.data td.col-code {
    white-space: normal;
    word-break: break-all;
}

/* --- 상세 : 다른 상세 화면(수강취소·환불 상세)과 같은 모양 ------------- */
/* 구조는 .hd-section-tit + .hd-table-wrap.rfd-view-wrap 을 그대로 쓰고,
   구역이 여러 개 이어지므로 두 번째 구역부터 위를 띄운다 */
.aid-view-tit {
    margin-top: 5.6rem;
}
/* 제목 바로 아래 목록표는 제목 여백(1.6rem)만 쓴다 */
.hd-section-tit + .aid-sub-table {
    margin-top: 0;
}
/* 신청현황·선정현황 값은 목록의 진행상태·선발여부와 같은 초록 굵은 글씨 */
.aid-view .aid-state,
.aid-view .aid-result {
    font-size: inherit;
}
/* 담당자 보완요청 의견 : 안내 상자(.info-box) 모양에 제목만 붉게 */
.aid-supplement {
    margin-top: 2.4rem;
}
.aid-supplement-tit {
    display: block;
    margin-bottom: 0.8rem;
    color: #D63D4A;
    font-weight: 700;
}
.aid-supplement p {
    margin: 0;
    white-space: pre-line;
}
/* 이력·첨부 목록의 의견·파일명은 길어질 수 있어 왼쪽 정렬 */
.aid-sub-table .list-table.tbl.data td.col-title {
    text-align: left;
    word-break: break-all;
}

@media (max-width: 767px) {
    .aid-view-tit {
        margin-top: 4rem;
    }
}

/* --- 목록 : 장학금명 링크에 올렸을 때 반응 -------------------------- */
/* 장학금명은 상세로 넘어가는 링크인데 올려도 아무 변화가 없었다.
   공지사항 등 다른 목록의 제목 링크(.list-table td.col-title a)와 같이
   쉴 때는 본문 글자처럼 두고, 올리거나 키보드로 갔을 때
   초록(#008F55) · 굵게 · 밑줄로 바뀌게 한다.
   학자금 대출이자 탭의 신청회차 링크도 같은 역할이라 함께 맞춘다 */
.aid-table-wrap .list-table.tbl.data td.col-name a,
.aid-table-wrap .list-table.tbl.data td.col-round a {
    color: #1E2124;
    font-weight: 400;
    text-decoration: none;
}
.aid-table-wrap .list-table.tbl.data td.col-name a:hover,
.aid-table-wrap .list-table.tbl.data td.col-name a:focus-visible,
.aid-table-wrap .list-table.tbl.data td.col-round a:hover,
.aid-table-wrap .list-table.tbl.data td.col-round a:focus-visible {
    color: #008F55;
    font-weight: 700;
    text-decoration: underline solid;
    text-decoration-skip-ink: auto;
}