@charset "utf-8";


/********** 공통 **********/

/* 컨텐츠 준비중 */
.no-content-st1 { margin: 0 auto; padding: 8rem 4rem; border-top: 2px solid var(--primary400); border-bottom: 1px solid var(--gray-e5); text-align: center; }
.no-content-st1 .ico { display: flex; align-items: center; justify-content: center; width: 9.6rem; height: 9.6rem; margin: 0 auto 4rem; color: var(--primary600); border: 1.5px solid var(--gray-dd); border-radius: 100%; }
@media only screen and (max-width: 767px) {
    .no-content-st1 { padding: 5rem 2rem; }
    .no-content-st1 .ico { width: 8rem; height: 8rem; margin-bottom: 3rem; }
}

.no-data {padding: 100px 0; border-top: 2px solid var(--primary500); border-bottom: 1px solid var(--gray-e5); text-align: center;}

/* 컨텐츠 소제목 */
.con-tit-st1 { position: relative; display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 2.4rem; color: var(--gray-17); }
.con-tit-st1::before { content: ""; flex-shrink: 0; width: 5px; height: 2.4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='24' viewBox='0 0 5 24' fill='none'%3E%3Cpath d='M0 24H1C3.20914 24 5 22.2091 5 20V16H0V24Z' fill='%23223A58'/%3E%3Cpath d='M0 1H1C3.20914 1 5 2.79086 5 5V16H0V1Z' fill='%23256EF4'/%3E%3C/svg%3E") no-repeat center / contain; border-radius: 0 3px 3px 0; }

/* 컨텐츠 소제목 — 막대 대신 아이콘 */
.con-tit-st2 { position: relative; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 2rem; color: var(--gray-17); }
.con-tit-st2::before { content: ""; flex-shrink: 0; width: 24px; height: 24px; background: url(/resource/_main/img/content/info-toggle-icon-cd469fef3906ebb22932a0809db6591b.svg) no-repeat center / contain; }

@media only screen and (max-width: 767px) {
    .con-tit-st1 { font-size: 2.2rem; }
    .con-tit-st1::before { height: 2rem; }
}


.popup-wrap {}
.popup-st1 .popup-header {display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 20px 20px 0;}
.popup-st1 .popup-conts {padding: 20px;}

@media only screen and (max-width: 767px) {
	.email-flex {flex-direction: column;}
}
@media only screen and (max-width: 600px) {
	.email-flex > .flex {flex-direction: column;}
	.email-flex .flex {width: 100%;}
	.email-flex > .flex input {width: 100%;}
}

/* KRDS 캘린더 */
.krds-calendar-area .calendar-wrap .calendar-body .calendar-table-wrap .calendar-tbl th {padding-bottom: inherit;}

/********** //공통 **********/

/* 로그인 */
.login-wrap {  }
.login-wrap .tit-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 20px; }
.login-wrap .tit-wrap ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.login-wrap .tit-wrap ul li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.login-wrap .login-list { display: flex; align-items: center; flex-wrap: wrap; margin: 0 -1rem; }
.login-wrap .login-list li { flex: 0 1 33.333%; padding: 1rem; }
.login-wrap .login-list.col2 > li { flex: 0 1 50%; }
.login-wrap .login-list li a { display: flex; flex-direction: column; justify-content: space-between; padding: 2.4rem; background-color: var(--gray-f5); border-radius: 1rem; }
.login-wrap .login-list li a .top { display: flex; align-items: center; gap: 1rem; background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23171719' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat right top 5px / auto; transition: all .3s; }
.login-wrap .login-list li a:hover .top { background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23171719' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat right 20px top 5px / auto; }
@media only screen and (max-width: 1600px) {
    .login-wrap .login-list { margin: 0 -.5rem; }
    .login-wrap .login-list li { padding: 0 .5rem; }
    .login-wrap .login-list li a .top .txt-24 { font-size: 2rem; }
}
@media only screen and (max-width: 1500px) {
    .login-wrap .login-list { flex-wrap: wrap; row-gap: 1rem; }
    .login-wrap .login-list li { flex: 1 1 50%; }
}
@media only screen and (max-width: 767px) {
    .login-wrap .login-list li { flex: 1 1 100%; }
}


/* 게시판 상단 */
.bbs-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.bbs-head .lf-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.bbs-head .rg-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.bbs-head .count { flex-shrink: 0; display: flex; align-items: center; gap: .4rem; }
.bbs-head .rg { margin-left: auto; }
.bbs-head .inp-flex { display: flex; align-items: center; }
.bbs-head .inp-flex select.inp-st3 { border-right: 0; }
.bbs-head .filter-wrap { position: relative; padding-left: 15px; }
.bbs-head .filter-wrap::before { content:""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 10px; background-color: var(--gray-e5); }
@media only screen and (max-width: 767px) {
    .bbs-head .inp-flex { width: 100%; }
    .bbs-head .inp-flex .sch-inp-st1 { width: 100%; }
    .bbs-head .lf-flex-st1 { flex-direction: column; align-items: baseline; }
    .bbs-head .lf-flex-st1 .filter-wrap { flex-wrap: wrap; width: 100%; padding-left: 0; }
    .bbs-head .lf-flex-st1 .filter-wrap::before { display: none; }
    .bbs-head .lf-flex-st1 .filter-wrap .item { flex-grow: 1; }
    .bbs-head .lf-flex-st1 .filter-wrap .item .btn { width: 100%; }
    .bbs-head .lf-flex-st1 .filter-wrap .btn-bace2-1 { flex-grow: 1; }
}


/* 게시판 검색 필터 */
.bbs-filter { display: flex; flex-direction: column; gap: 2rem; padding: 2.4rem 4rem; background-color: #f6f9ff; border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); border-radius: 1.2rem; }
.bbs-filter .filter-row { display: flex; align-items: center; gap: 1.6rem; }
.bbs-filter .filter-tit { flex-shrink: 0; display: flex; align-items: center; width: 10rem; height: 1.6rem; font-weight: 700; font-size: 1.7rem; color: var(--gray-17); border-right: 1px solid var(--krds-color-light-gray-30, #b1b8be); }
.bbs-filter .filter-conts { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.bbs-filter .date-flex {display: flex; align-items: center; gap: .4rem; }
.bbs-filter .calendar-input .inp-st2 { width: 17rem; height: 4.8rem;}
.bbs-filter .chip-group { display: flex; gap: .8rem; }
/* KRDS 칩 기본값보다 우선해야 해서 !important */
.bbs-filter .krds-form-chip .krds-form-chip-outline { height: 4.8rem !important; padding: 0 1.2rem !important; font-size: 1.7rem; background-color: #fff; border-color: var(--krds-color-light-gray-30, #b1b8be); border-radius: .6rem !important; }
.bbs-filter select.inp-st2 { width: 12rem; height: 4.8rem; font-size: 1.7rem;}
.bbs-filter .sch-box { display: flex; align-items: center; flex: 1; min-width: 26rem; max-width: 34rem; height: 4.8rem; background-color: #fff; border: 1px solid var(--krds-color-light-gray-60, #58616a); border-radius: .6rem; overflow: hidden; }
.bbs-filter .sch-box .inp-st2 { flex: 1; min-width: 0; height: 100%; border: 0; }
.bbs-filter .sch-box .btn-sch { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 4.8rem; height: 100%; background-color: #0b3067; }
.bbs-filter .sch-box .btn-sch .svg-icon { width: 2rem; height: 2rem; background-color: #fff; }
/* overflow:hidden 박스 내부라 포커스 링이 잘려서 안쪽 표시로 전환 (KRDS inset 패턴) */
.bbs-filter .sch-box .btn-sch:focus { outline-offset: -0.4rem; box-shadow: var(--krds-box-shadow-outline-inset); }
/* 상세설정 */
.bbs-filter .filter-detail { display: none; flex-direction: column; gap: 2rem; }
.bbs-filter .filter-detail.on { display: flex; }
.bbs-filter .btn-detail .bi { transition: transform .2s; }
.bbs-filter .btn-detail[aria-expanded="true"] .bi { transform: rotate(180deg); }
/* 필터 하단 */
.bbs-filter .filter-foot { position: relative; display: flex; align-items: center; justify-content: center; }
.bbs-filter .filter-foot .btn-detail { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.7rem; color: var(--gray-33); }
.bbs-filter .filter-foot .btn-group { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; gap: .8rem; }

@media only screen and (max-width: 1023px) {
    .bbs-filter { gap: 2.4rem; padding: 2rem; }
    .bbs-filter .filter-row { flex-direction: column; align-items: stretch; gap: 1rem; }
    .bbs-filter .filter-tit { width: auto; height: auto; border-right: 0; }
}
@media only screen and (max-width: 767px) {
    .bbs-filter .date-flex { width: 100%; }
    .bbs-filter .date-flex .calendar-conts { flex: 1; min-width: 0; }
    .bbs-filter .date-flex .calendar-input { width: 100%; }
	.krds-calendar-area .calendar-wrap {left: -15px; width: auto;}
    .bbs-filter .calendar-input .inp-st2 { width: 100%; min-width: 0; }
    .bbs-filter select.inp-st2 { width: 100%; }
    .bbs-filter .chip-group { width: 100%; }
    .bbs-filter .krds-form-chip { flex: 1; min-width: 0; }
    .bbs-filter .krds-form-chip .krds-form-chip-outline { justify-content: center !important; width: 100% !important; height: 4rem !important; padding: 0 1rem !important; font-size: 15px !important; }
    .bbs-filter .sch-box { min-width: 200px; max-width: none; width: 100%; }
    .bbs-filter .filter-foot { flex-direction: column; gap: 1.2rem; }
    .bbs-filter .filter-foot .btn-group { position: static; transform: none; width: 100%; }
    .bbs-filter .filter-foot .btn-group > button { flex: 1; }
}
@media only screen and (max-width: 400px) {
    .bbs-filter .date-flex {flex-wrap: wrap;}
    .bbs-filter .date-flex .calendar-conts {flex: none; width: 100%;}
}

/* 목록 표시 개수 셀렉트 */
.bbs-head .krds-form-select-sort { border: 1px solid var(--gray-e5); border-radius: .4rem; }


/* 일반 게시판 */
.bbs-st1 { border-top: 1px solid var(--gray-e5); }
.bbs-st1 > li { border-bottom: 1px solid var(--gray-e5); }
.bbs-st1 > li > .inner { display: flex; align-items: center; gap: 3rem; padding: 3rem 3rem 3rem 0; }
.bbs-st1 > li > .inner > div:not(.tit-wrap) { flex-shrink: 0; }
.bbs-st1 > li > .inner > div:first-child { width: 60px; text-align: center; }
.bbs-st1 > li > .inner > div.view-wrap { width: 50px; text-align: center; }
.bbs-st1-1 > li > a > div:first-child { width: 80px; }
.bbs-st1 > li > .inner .tit-wrap { flex-grow: 1; }
.bbs-st1 > li > .inner .tit { display: flex; align-items: center; gap: 7px; }
.bbs-st1 > li > .inner .tit strong { position: relative; line-height: 1.2; font-weight: 500; font-size: 18px; }
.bbs-st1 > li > .inner .tit strong::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #000; }
.bbs-st1 > li > .inner:hover .tit strong::after { width: 100%; transition: width .3s ease-in-out; }
.bbs-st1 > li > .inner .tit .new { flex-shrink: 0; display: inline-block; width: 20px; height: 20px; line-height: 20px; font-weight: 700; font-size: 11px; color: #fff; background-color: var(--primary600); text-align: center; }
.bbs-st1 > li > .anw-wrap { display: none; padding: 1.5rem 1.5rem 1.5rem 9rem; background-color: var(--gray-f5); }

.no-list { width: 100%; padding: 100px 0; border-top: 1px solid var(--gray-e5); border-bottom: 1px solid var(--gray-e5); text-align: center; }

@media only screen and (max-width: 1023px) {
    .bbs-st1 > li > .inner { flex-wrap: wrap; gap: 10px 20px; padding: 15px; }
    .bbs-st1 > li > .inner > div:first-child { width: unset; }
    .bbs-st1 > li > .inner > div.view-wrap { position: relative; width: fit-content; padding-right: 20px; }
    .bbs-st1 > li > .inner > div.view-wrap::before { content:""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 10px; background-color: var(--gray-e5); }
    .bbs-st1 > li > .inner .tit-wrap { width: 100%; }
    .bbs-st1 > li > .inner .tit strong { font-size: 16px; }
    .bbs-st1 > li > .anw-wrap { padding-left: 1.5rem; }
}

/* 카드형 게시판 목록 */
.bbs-st2 { display: flex; flex-wrap: wrap; margin: 0 -.7rem; }
.bbs-st2 > li { width: 25%; margin-bottom: 1.4rem; padding: 0 .7rem; }
.bbs-st2 > li > a { display: flex; flex-direction: column; gap: 1.4rem; height: 100%; padding: 1.7rem 1.9rem; background-color: #fff; border: 1px solid #e3e9f2; border-radius: 1.4rem; transition: border-color .2s, box-shadow .2s; }
.bbs-st2 > li > a:hover { border-color: var(--primary400); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.bbs-st2 .card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bbs-st2 .stage { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-weight: 700; font-size: 12px; }
.bbs-st2 .stage::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; background-color: currentColor; border-radius: 2px; }
.bbs-st2 .stage.birth { color: #2b7fb0; }
.bbs-st2 .stage.grow { color: #3f8f57; }
.bbs-st2 .type { display: inline-block; height: 24px; line-height: 24px; padding: 0 10px; border-radius: 6px; font-weight: 500; font-size: 13px; color: #fff; }
.bbs-st2 .type.survey { background-color: var(--cate2); }
.bbs-st2 .type.talk { background-color: var(--cate4); }
.bbs-st2 .type.vote { background-color: var(--primary400); }
.bbs-st2 .type.contest { background-color: var(--cate8); }
.bbs-st2 .card-tit { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 4.6rem; font-weight: 700; line-height: 1.5; letter-spacing: -.155px; color: #1a2942; }
.bbs-st2 > li > a:hover .card-tit { text-decoration: underline; }
.bbs-st2 .card-info { display: flex; flex-direction: column; gap: 4px; padding-top: 2rem; border-top: 1px solid #eef1f6; }
.bbs-st2 .card-info .writer { font-weight: 700; font-size: 14px; letter-spacing: -.13px; color: var(--primary700); }
.bbs-st2 .card-info .date { font-weight: 500; font-size: 13px; color: var(--gray-75); }
.bbs-st2 .card-stat { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.bbs-st2 .card-stat li { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13px; color: var(--gray-75); }
.bbs-st2 .card-stat li:first-child { padding-right: 12px; border-right: 1px solid #e0e5ee; }
.bbs-st2 .card-stat .bi { font-size: 14px; }

@media only screen and (max-width: 1200px) {
    .bbs-st2 > li { width: 33.333%; }
}
@media only screen and (max-width: 1023px) {
    .bbs-st2 > li { width: 50%; }
}
@media only screen and (max-width: 767px) {
    .bbs-st2 > li { width: 100%; }
    .bbs-st2 .card-tit { min-height: 0; }
}




/* 갤러리 게시판 */
.bbs-gallery { display: flex; flex-wrap: wrap; margin: 0 -1.2rem; }
.bbs-gallery .gallery-item { width: 33.3%; margin-bottom: 2.4rem; padding: 0 1.2rem; }
.bbs-gallery .gallery-item > a { display: block; }
.bbs-gallery .gallery-item > a .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; }
.bbs-gallery .gallery-item > a .img-wrap .num-wrap { position: absolute; top: 0; left: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: 10px; }
.bbs-gallery .gallery-item > a .img-wrap .num-wrap .num-st1 { margin-left: auto; }
.bbs-gallery .gallery-item > a .img-wrap .state-wrap { position: absolute; top: 0; left: 0; z-index: 1; }
.bbs-gallery .gallery-item > a .txt-wrap { display: block; padding: 1.6rem 0; border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
.bbs-gallery .gallery-item > a .txt-wrap .tit { height: 5.6rem; margin-bottom: 1.6rem; }
.bbs-gallery .gallery-item > a:hover .txt-wrap .tit { text-decoration: underline; }
.bbs-gallery .gallery-item > a:hover .img-wrap img { transform: scale(1.1); opacity: .7; }
@media only screen and (max-width: 1023px) {
    .bbs-gallery { margin: 0 -1rem; }
    .bbs-gallery .gallery-item { width: 50%; padding: 0 1rem; }
}
@media only screen and (max-width: 560px) {
    .bbs-gallery { margin: 0; }
    .bbs-gallery .gallery-item { width: 100%; padding: 0; }
}


/* 일반게시판 상세 */
.bbs-view-st1 { border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
.bbs-view-st1 .bbs-header { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--krds-color-light-gray-30, #b1b8be); }
.bbs-view-st1 .bbs-header .tit { display: block; width: 100%; line-height: 1.5; font-weight: 700; font-size: 2.4rem; color: var(--krds-color-light-gray-90, #1e2124); text-align: center; word-break: keep-all; word-wrap: break-word; }
.bbs-view-st1 .bbs-header .info { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; width: 100%; }
.bbs-view-st1 .bbs-header .info li { position: relative; display: flex; align-items: center; gap: 8px; font-size: 1.7rem; }
.bbs-view-st1 .bbs-header .info li + li { padding-left: 13px; }
.bbs-view-st1 .bbs-header .info li + li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 16px; background-color: var(--krds-color-light-gray-20, #cdd1d5); }
.bbs-view-st1 .bbs-header .info .share-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #000; }
.bbs-view-st1 .info-wrap { padding: 25px 40px; border-bottom: 1px solid var(--gray-e5); }
.bbs-view-st1 .bbs-body { padding: 40px 0; }
/* 담당자 정보 박스 — bg-box-st2 시안 재정의 */
.bbs-view-st1 .bg-box-st2 { padding: 20px 24px; background: var(--krds-color-light-secondary-5, #eef2f7); border-color: var(--krds-color-light-secondary-10, #d6e0eb); border-radius: 8px; }
.bbs-view-st1 .bg-box-st2 > strong .ico-my { width: 24px; height: 24px; -webkit-mask: none; mask: none; background: transparent url(/resource/_main/img/layout/ico-myinfo-4af2b5c500d98e3d67348bd943b6d55b.svg) no-repeat center / contain; }
.bbs-view-st1 .bg-box-st2 .info-st1 { gap: 5px 12px; }
.bbs-view-st1 .bg-box-st2 .info-st1 > li { gap: 8px; font-size: 1.7rem; }
.bbs-view-st1 .bg-box-st2 .info-st1 > li + li { padding-left: 13px; }
.bbs-view-st1 .bg-box-st2 .info-st1 > li + li::before { height: 16px; background: var(--krds-color-light-gray-30, #b1b8be); }
/* 뷰어 삽입 자리 — 실제 뷰어 적용 시 제거 */
.doc-viewer { aspect-ratio: 930 / 676; }
/* 본문 이미지 슬라이드 (swiper) */
.bbs-slide-st1 .slide-row { display: flex; align-items: center; justify-content: center; gap: 3.2rem; }
.bbs-slide-st1 .swiper { flex: 1; max-width: 73rem; }
.bbs-slide-st1 [class^="swiper-button-"] { flex-shrink: 0; position: relative; top: unset; left: unset; right: unset; bottom: unset; width: 6.4rem; height: 6.4rem; margin: 0; background-color: #fff; border: 1.6px solid var(--krds-color-light-gray-20, #cdd1d5); border-radius: 50%; }
.bbs-slide-st1 [class^="swiper-button-"]::after { font-size: 1.8rem; color: var(--gray-17); }
.bbs-slide-st1 .swiper-pagination { display: flex; justify-content: center; gap: .4rem; width: fit-content; margin: 1.6rem auto 0; padding: 0 1.6rem; height: 4rem; align-items: center; background-color: #fff; border-radius: 100px; }
.bbs-slide-st1 .swiper-pagination .swiper-pagination-bullet { background-color: var(--gray-75); opacity: 1; }
.bbs-slide-st1 .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--primary400); }
@media only screen and (max-width: 767px) {
    .bbs-slide-st1 .slide-row { gap: 1rem; }
    .bbs-slide-st1 [class^="swiper-button-"] { width: 4rem; height: 4rem; }
}
.bbs-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--krds-color-light-gray-60, #58616a); }
.bbs-foot .btn-list-wrap { display: flex; justify-content: flex-end; }
.bbs-foot .btn-list { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; height: 48px; padding: 0 16px; font-size: 1.7rem; color: var(--krds-color-light-gray-90, #1e2124); background-color: #fff; border: 1px solid #98acc5; border-radius: 6px; transition: background-color .2s; }
.bbs-foot .btn-list:hover { background-color: var(--gray-f5); }
.bbs-foot .btn-wrap { margin-top: 24px; border-top: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
.bbs-foot .btn-wrap li { position: relative; width: 100%; display: flex; align-items: center; gap: 16px; padding: 0 16px; }
.bbs-foot .btn-wrap li + li { border-top: 1px solid var(--gray-e5); }
.bbs-foot .btn-wrap li:hover { background-color: var(--gray-f5); }
.bbs-foot .btn-wrap li strong { flex-shrink: 0; position: relative; display: flex; align-items: center; gap: 16px; line-height: 1.5; padding: 16px 0; font-weight: 700; color: var(--gray-55); }
.bbs-foot .btn-wrap li strong .svg-icon { width: 20px; height: 20px; background-color: var(--gray-55); }
.bbs-foot .btn-wrap li strong i::before { font-weight: 700 !important; }
.bbs-foot .btn-wrap li a { flex: 1; min-width: 0; display: block; }
.bbs-foot .btn-wrap li a:hover span { text-decoration: underline; }
.bbs-foot .btn-wrap li a span { position: relative; line-height: 1.5; color: var(--gray-17); }
.bbs-foot .adm-reply { display: flex; margin-top: 40px; border-top: 1px solid var(--gray-e5); border-bottom: 1px solid var(--gray-e5); }
.bbs-foot .adm-reply .tit { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 140px; background-color: var(--gray-f5); }
.bbs-foot .adm-reply .cont { flex-grow: 1; padding: 20px;  }
@media only screen and (max-width: 1023px) {
    .bbs-view-st1 .bbs-header .tit { font-size: 2.2rem; }
}
@media only screen and (max-width: 767px) {
    .bbs-view-st1 .bbs-header .tit { font-size: 2rem; }
    .bbs-view-st1 .bbs-body { padding: 25px 0; }
    /* 담당자 정보 박스 — 세로 스택 */
    .bbs-view-st1 .bg-box-st2 { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
    .bbs-view-st1 .info-st1 { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .bbs-view-st1 .info-st1 > li { gap: .8rem; }
    .bbs-view-st1 .info-st1 > li + li { padding-left: 0; }
    .bbs-view-st1 .info-st1 > li + li::before { display: none; }
    .bbs-view-st1 .info-st1 > li > span:first-child { flex-shrink: 0; width: 6.8rem; }
    .bbs-foot .btn-wrap li { flex-wrap: wrap; gap: 8px 12px; padding: 12px; }
    .bbs-foot .btn-wrap li strong { padding: 0; }

    .bbs-foot .adm-reply { flex-direction: column; }
    .bbs-foot .adm-reply .tit { justify-content: left; width: 100%; padding: 15px 20px; }
}


/* FAQ 게시판 */
.bbs-faq { border-top: 1px solid var(--gray-e5); }
.bbs-faq .faq-item { border-bottom: 1px solid var(--gray-e5); }
.bbs-faq .faq-item .tit { position: relative; display: flex; align-items: center; gap: 1.5rem; padding: 30px 55px 30px 70px; }
.bbs-faq .faq-item .tit::before { content:"Q"; position: absolute; top: 50%; left: 15px; display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; font-weight: 400; color: #fff; background-color: var(--primary600); border-radius: 2px; transform: translateY(-50%); }
.bbs-faq .faq-item .tit::after { content:""; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: block; width: 36px; height: 36px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E") no-repeat center center / auto; border-radius: 5px; transition: transform .3s ease; }
.bbs-faq .faq-item.on .tit::after { transform: translateY(-50%) rotate(180deg); }
.bbs-faq .faq-item .tit strong { line-height: 1.3; font-weight: 600; font-size: 17px; }
.bbs-faq .faq-item .cont { display: none; padding-left: 30px; background-color: var(--primary50); border-top: 1px solid var(--gray-e5); }
.bbs-faq .faq-item .cont .editor-text { position: relative; min-height: 100px; padding: 30px 30px 30px 70px; }
.bbs-faq .faq-item .cont .editor-text::before { content:"A"; position: absolute; top: 30px; left: 15px; display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; font-weight: 400; color: var(--primary600); background-color: #fff; border: 1px solid var(--primary200); border-radius: 2px; }
@media only screen and (max-width: 1023px) {
    .bbs-faq .faq-item .tit { gap: 2rem; padding: 20px 55px 20px 60px; }
	.bbs-faq .faq-item .tit::before { left: 15px; width: 30px; height: 30px; font-size: 14px; }
    .bbs-faq .faq-item .tit strong { font-size: 15px; }
	.bbs-faq .faq-item .cont { padding-left: 0; }
	.bbs-faq .faq-item .cont .editor-text { padding: 20px 20px 20px 60px; }
	.bbs-faq .faq-item .cont .editor-text::before { top: 20px; left: 15px; width: 30px; height: 30px; font-size: 14px; }
}


/* 페이징 */
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 50px; }
.pagination a { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.7rem; color: var(--krds-color-light-gray-70, #464c53); border-radius: 6px; }
.pagination a:hover { background-color: var(--gray-f5); }
.pagination a.page-navi { gap: 2px; width: auto; }
/* 이전 : 첫 페이지 기준이라 한 단계 옅게 — 비활성으로 읽히게 (다음보다 흐리게) */
.pagination a.page-navi.prev { padding: 0 8px 0 4px; color: var(--krds-color-light-gray-50, #6d7882); }
.pagination a.page-navi.next { padding: 0 4px 0 8px; }
.pagination a.page-navi .svg-icon { width: 20px; height: 20px; background-color: var(--krds-color-light-gray-70, #464c53); }
.pagination a.page-navi.prev .svg-icon { background-color: var(--krds-color-light-gray-50, #6d7882); }
.pagination a.active { font-weight: 700; color: var(--krds-color-light-secondary-70, #063a74); background-color: var(--krds-color-light-primary-5, #ecf2fe); border: 1px solid var(--krds-color-light-secondary-70, #063a74); }

/* 767 이하 : 이전·다음을 숫자 줄 위로 올려 2줄로 (시안) */
@media only screen and (max-width: 767px) {
	.pagination { position: relative; padding-top: 4.8rem; }
	.pagination a.page-navi { position: absolute; top: 0; }
	.pagination a.page-navi.prev { right: 50%; margin-right: .8rem; }
	.pagination a.page-navi.next { left: 50%; margin-left: .8rem; }
}

@media only screen and (max-width: 500px) {
	.pagination a {width: 35px; height: 35px;}
}

/* 첨부파일 리스트 */
.attr-st1 {  }
.attr-st1 li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--gray-e5); }
.attr-st1 li + li { margin-top: 16px; }
.attr-st1 li a { display: flex; align-items: center; gap: 12px; min-width: 0; }
.attr-st1 li a em { flex-shrink: 0; }
@media only screen and (max-width: 767px) {
    .attr-st1 li { flex-wrap: wrap; }
    .attr-st1 li a { width: 100%; }
    .attr-st1 li a i { margin-top: 3px; }
}


.img-box { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 32rem; padding: 7rem 0; border-radius: 1rem; overflow: hidden; }
.img-box .con-header { color: #fff; }
.img-box .txt-wrap { position: relative; z-index: 1; color: #fff; opacity: 0; }
.img-box .txt-wrap strong { font-family: var(--head-font), var(--body-font); }
.img-box .txt-wrap p { line-height: 1.6; font-family: var(--head-font), var(--body-font); }
.img-box .bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50%; height: 100%; }
.img-box .bg::before { content:""; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); }
.img-box .bg .img-wrap { width: 100%; height: 100%; }
.img-box .bg .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
@media only screen and (max-width: 1023px) {
    .img-box { padding: 15rem 0; }
    
}


.quote-txt { position: relative; width: fit-content; margin: 0 auto; padding: 0 30px; }
.quote-txt::before,
.quote-txt::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; background: no-repeat center center / auto; }
.quote-txt::before { right: calc(100% - 30px); background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.4'%3E%3Cpath d='M15.8553 22.3225C15.8553 21.0758 15.5295 20.0289 14.8778 19.1817C14.416 18.598 13.7893 18.2146 12.9979 18.0314C12.2187 17.85 11.4821 17.8373 10.8162 17.9917C10.5896 16.6459 10.9579 15.2207 11.8929 13.7105C12.8298 12.2013 14.0377 11.0666 15.5167 10.3063L13.277 7.08337C12.1436 7.64437 11.067 8.35554 10.0753 9.21546C9.06947 10.0754 8.17697 11.0642 7.38364 12.182C6.59031 13.2997 5.99531 14.562 5.61281 15.9928C5.23031 17.4236 5.12406 18.8828 5.30681 20.3845C5.54481 22.3678 6.18514 23.9545 7.22781 25.1303C8.26953 26.3212 9.56719 26.9167 11.1208 26.9167C12.4879 26.9167 13.6226 26.5059 14.5208 25.6729C15.4095 24.8569 15.8534 23.7387 15.8525 22.3182L15.8553 22.3225ZM28.781 22.3225C28.781 21.0758 28.4551 20.0289 27.8035 19.1817C27.3407 18.5867 26.7141 18.2009 25.9236 18.0243C25.1302 17.8496 24.403 17.8392 23.7419 17.9931C23.5152 16.6615 23.8694 15.2306 24.8072 13.7148C25.7422 12.2131 26.9492 11.0798 28.4282 10.3148L26.1941 7.08337C25.0599 7.64437 23.9926 8.35507 22.9925 9.21546C21.9776 10.0882 21.0762 11.0848 20.3093 12.182C19.5216 13.3011 18.9351 14.562 18.5526 15.9928C18.1641 17.4225 18.0597 18.9145 18.2452 20.3845C18.4804 22.3678 19.1179 23.9545 20.1577 25.1303C21.1966 26.3127 22.4919 26.904 24.0436 26.904C25.4131 26.9058 26.5474 26.4917 27.4465 25.6615C28.3352 24.8455 28.78 23.7273 28.781 22.3069V22.3225Z' fill='%236B3DEA'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.quote-txt::after { left: calc(100% - 30px); background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.4'%3E%3Cpath d='M18.1447 11.6775C18.1447 12.9242 18.4705 13.9711 19.1222 14.8183C19.584 15.402 20.2107 15.7854 21.0021 15.9686C21.7813 16.15 22.5179 16.1627 23.1838 16.0083C23.4104 17.3541 23.0421 18.7793 22.1071 20.2895C21.1702 21.7987 19.9623 22.9334 18.4833 23.6937L20.723 26.9166C21.8564 26.3556 22.933 25.6445 23.9247 24.7845C24.9305 23.9246 25.823 22.9358 26.6164 21.818C27.4097 20.7003 28.0047 19.438 28.3872 18.0072C28.7697 16.5764 28.8759 15.1172 28.6932 13.6155C28.4552 11.6322 27.8149 10.0455 26.7722 8.86971C25.7305 7.67876 24.4328 7.08329 22.8792 7.08329C21.5121 7.08329 20.3774 7.49413 19.4792 8.32713C18.5905 9.14313 18.1466 10.2613 18.1475 11.6818L18.1447 11.6775ZM5.21903 11.6775C5.21903 12.9242 5.54486 13.9711 6.19653 14.8183C6.65931 15.4133 7.28594 15.7991 8.07644 15.9757C8.86978 16.1504 9.597 16.1608 10.2581 16.0069C10.4848 17.3385 10.1306 18.7694 9.19278 20.2852C8.25778 21.7869 7.05078 22.9202 5.57178 23.6852L7.80586 26.9166C8.94014 26.3556 10.0074 25.6449 11.0075 24.7845C12.0224 23.9118 12.9238 22.9152 13.6907 21.818C14.4784 20.6989 15.0649 19.438 15.4474 18.0072C15.8359 16.5775 15.9403 15.0855 15.7548 13.6155C15.5196 11.6322 14.8821 10.0455 13.8423 8.86971C12.8034 7.68726 11.5081 7.09604 9.95636 7.09604C8.58691 7.09415 7.45264 7.50829 6.55353 8.33846C5.6648 9.15446 5.21997 10.2727 5.21903 11.6931V11.6775Z' fill='%236B3DEA'/%3E%3C/g%3E%3C/svg%3E%0A"); }
@media only screen and (max-width: 1410px) {
    .sub010101-group { flex-direction: column; row-gap: 1rem; }
    .sub010101-group [class*="col-"] { width: 100%; }
}


.step-st1 {}
.step-st1 li.arr { display: flex; align-items: center; }
.step-st1 li:not(.arr) { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 2rem; border-radius: 8px; text-align: center; }
.step-st1 li:not(.arr) .icn { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background-color: #fff; border-radius: 2rem; }
@media only screen and (max-width: 767px) {
    .step-st1 { flex-wrap: wrap; }
    .step-st1 li:not(.arr) { flex: 1 1 calc(50% - 30px); }
    .step-st1 li:nth-child(4) { display: none; }
}
@media only screen and (max-width: 470px) {
    .step-st1 { justify-content: center; }
    .step-st1 li.arr svg { transform: rotate(90deg); }
    .step-st1 li:not(.arr) { flex: 1 1 100%; }
    .step-st1 li:nth-child(4) { display: block; }

}

.step-st2 li { display: flex; align-items: center; gap: 1rem; padding: 3rem 1rem; border-top: 1px solid var(--gray-e5); }
.step-st2 li .lf { display: flex; align-items: center; gap: 2rem; width: 260px; }
.step-st2 li .lf .num { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-weight: 600; font-size: 15px; color: var(--gray-75); background-color: var(--gray-f5); border-radius: 2px; }
.step-st2 li .lf strong { color: var(--primary600); }
.step-st2 li .rg { flex: 1; }
@media only screen and (max-width: 767px) {
    .step-st2 li { flex-direction: column; align-items: baseline; padding: 2rem 1rem; }
    .step-st2 li .lf { width: unset; }
    .step-st2 li .rg { padding-left: 50px; }

}


/* 아이콘 원형 프로세스 흐름 */
.step-st4 { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1.6rem; }
.step-st4 > li { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
.step-st4 > li:not(.arr) {flex: 1;}
.step-st4 > li.arr { justify-content: center; height: 4.8rem; color: var(--gray-99); }
.step-st4 .icn { display: flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; background-color: var(--primary500); border-radius: 50%; font-size: 2rem; color: #fff; }

.step-wrap { display: flex; align-items: center; justify-content: space-between; }
/* 단계 표시 */
.step-st3 { display: flex; justify-content: center; align-items: flex-start; }
.step-st3 li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.step-st3 li:not(:last-child) { flex: 1; max-width: 35rem; }
.step-st3 li:not(:last-child)::before { content:""; position: absolute; top: .9rem; left: 2rem; right: 0; height: 2px; background-color: var(--gray-e5); }
.step-st3 li .dot { position: relative; z-index: 1; display: block; width: 2rem; height: 2rem; margin-bottom: .6rem; background-color: var(--gray-e5); border: 1px solid var(--gray-cc); border-radius: 100%; }
.step-st3 li.on .dot { background-color: var(--primary400); border: 2px solid var(--primary400); box-shadow: inset 0 0 0 2px #fff; }
@media only screen and (max-width: 560px) {
    .step-st3 li:not(:last-child) { max-width: none; }
}
@media only screen and (max-width: 767px) {
    .step-wrap { flex-direction: column-reverse; gap: 2rem; }
}


/* 게시판 테이블 */
.tbl-board { width: 100%; table-layout: fixed; border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
.tbl-board thead th { height: 5.8rem; padding: .8rem; background-color: var(--gray-f5); border-bottom: 1px solid var(--krds-color-light-gray-30, #b1b8be); font-weight: 700; color: var(--krds-color-light-gray-95, #131416); text-align: center; }
.tbl-board tbody td { height: 5.6rem; padding: 1.2rem .8rem; border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); color: var(--krds-color-light-gray-70, #464c53); text-align: center; }
.tbl-board tbody td.txt-lf {text-align: left;}
.tbl-board tbody td.num { font-size: 15px; }
.tbl-board tbody td.tit { text-align: left; }
.tbl-board tbody td.tit a { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--krds-color-light-gray-95, #131416); }
.tbl-board tbody tr:hover { background-color: var(--krds-color-light-gray-5, #f4f5f6); }
.tbl-board tbody tr:hover td.tit a { text-decoration: underline; }
/* 클릭 요소 없는 정보성 표 — 행 호버 배경 해제 */
.tbl-board.tbl-static tbody tr:hover { background-color: transparent; }
.tbl-board .bi-paperclip { font-size: 1.8rem; color: var(--krds-color-light-gray-70, #464c53); }
.tbl-board.tbl-line thead th:not(:last-child) { border-right: 1px solid var(--krds-color-light-gray-30, #b1b8be); }
.tbl-board.tbl-line tbody td:not(:last-child) { border-right: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
@media only screen and (max-width: 767px) {
    .tbl-board { border-top: 0; }
    .tbl-board thead { display: none; }
    /* 스택 뷰로 전환되는 표(table-data)는 tbl-line 세로 구분선이 우측 줄로 남음 → 제거 (2026-09-18 부서별 연락처에서 발견) */
    .tbl-board.tbl-line.table-data tbody td:not(:last-child) { border-right: 0; }
    .tbl-board, .tbl-board tbody, .tbl-board tbody tr, .tbl-board tbody td { display: block; }
    .tbl-board tbody tr { padding: .4rem 0 1.6rem; border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
    .tbl-board tbody tr:first-child { border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
    .tbl-board tbody td { display: flex; align-items: center; gap: .8rem; height: auto; padding: .4rem 0; border-bottom: 0; font-size: 1.7rem; text-align: left; }
    .tbl-board tbody td::before { content: attr(data-content); flex-shrink: 0; width: 8rem; }
    .tbl-board tbody td.num { display: none; }
    /* 분류 배지 셀 — 라벨 없이 행 맨 위 (시안) */
    .tbl-board tbody td.cate { padding: 1.2rem 0 0; }
    .tbl-board tbody td.cate::before { display: none; }
    .tbl-board tbody td.tit { display: block; padding: 1.2rem 0; }
    .tbl-board tbody td.tit::before { display: none; }
    .tbl-board tbody td.tit a { font-weight: 700; font-size: 1.7rem; }
    .tbl-board tbody td.file::before { content: "첨부"; } /* th 가 "첨부파일"인 표도 모바일 라벨은 "첨부"로 통일 */
    .tbl-board tbody td.file:empty { display: none; }
    /* thead 가 없는 표는 스택 뷰(라벨 주입) 대상이 아니므로 선을 그대로 둔다 */
    .tbl-board:not(:has(thead)) { border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
    .tbl-board:not(:has(thead)) tbody td { border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
    /* 스택 뷰 해제 — 모바일에서도 표 형태를 유지하는 안내표 (시안) */
    .tbl-board.tbl-keep { border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
    .tbl-board.tbl-keep, .tbl-board.tbl-keep tbody, .tbl-board.tbl-keep tbody tr, .tbl-board.tbl-keep tbody td { display: revert; }
    .tbl-board.tbl-keep thead { display: table-header-group; }
    .tbl-board.tbl-keep tbody tr { padding: 0; border-bottom: 0; }
    .tbl-board.tbl-keep tbody tr:first-child { border-top: 0; }
    .tbl-board.tbl-keep tbody td { height: auto; padding: 2rem .8rem; border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); font-size: 15px; text-align: center; }
    .tbl-board.tbl-keep tbody td::before { display: none; }
}


/* 정보목록 상세 팝업 — popup-st1 재사용(미수정) */
.pop-info-detail .popup-head { display: flex; align-items: center; height: 5.6rem; padding: 0 3rem; background-color: #263250; }
.pop-info-detail .popup-head .tit { font-weight: 700; font-size: 1.8rem; color: #fff; }
.pop-info-detail .pop-info-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 4rem; }
.pop-info-detail .pop-info-list > li { display: flex; gap: 1.2rem; font-size: 15px; line-height: 1.5; }
.pop-info-detail .pop-info-list > li.full { grid-column: 1 / -1; }
.pop-info-detail .pop-info-list .tit { flex-shrink: 0; min-width: 7rem; color: var(--gray-55); }
.pop-info-detail .pop-info-list .txt { color: var(--gray-17); word-break: keep-all; }
.pop-info-detail .pop-info-list .txt.point { font-weight: 600; color: var(--primary500); }
.pop-info-detail .popup-foot { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; padding: 1.6rem 3rem; border-top: 1px solid var(--gray-e5); }
.pop-info-detail .popup-foot .krds-btn { min-width: 8rem; }
@media only screen and (max-width: 767px) {
    .pop-info-detail .popup-head { height: 5rem; padding: 0 2rem; }
    .pop-info-detail .pop-info-list { grid-template-columns: 1fr; gap: 1rem; }
    .pop-info-detail .popup-foot { padding: 1.4rem 2rem; }
}



/* 국정과제 */
/* 범용 유틸 확장 */
.shadow-st1 { box-shadow: 0 8px 10px rgba(23, 45, 90, .12); }
.circle-ico30 { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; font-size: 15px; border-radius: 100%; }
@media only screen and (max-width: 767px) {
	.affairs-wrap {flex-direction: column;}
}

/* 4열 카드 컬럼 랩 */
.col-wrap4 { display: flex; flex-wrap: wrap; gap: 20px; }
.col-wrap4 > * { flex: 1 1 0; min-width: 0; }
@media only screen and (max-width: 1200px) {
	.col-wrap4 > * { flex: 1 1 calc(50% - 9px); }
}
@media only screen and (max-width: 767px) {
	.col-wrap4 > * { flex: 1 1 100%; }
}

.sub0501-btn .col-wrap4 {flex-wrap: wrap;}
.sub0501-btn .col-wrap4 > * {flex: 1 1 calc(33.333% - 15px);}

@media only screen and (max-width: 1550px) {
	.sub0501-btn .col-wrap4 > * {flex: 1 1 calc(50% - 10px);}
}
@media only screen and (max-width: 800px) {
	.sub0501-btn .col-wrap4 > * {flex: 1 1 100%; font-size: 1.6rem;}
}


/* 히어로 박스 — 색·라운드·패딩은 유틸로 조합 */
.hero-box-st1 { position: relative; overflow: hidden; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Ccircle cx='160' cy='160' r='160' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Ccircle cx='120' cy='120' r='120' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right -80px top -80px, right 120px bottom -120px; }
.hero-box-st1.grad-navy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Ccircle cx='160' cy='160' r='160' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Ccircle cx='120' cy='120' r='120' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"), linear-gradient(90deg, var(--primary600) 0%, var(--primary800) 100%); background-position: right -80px top -80px, right 120px bottom -120px, 0 0; }
.hero-quote { position: absolute; top: 1rem; left: 4rem; font-size: 7.8rem; line-height: 1; font-weight: 700; color: rgba(255, 255, 255, .16); pointer-events: none; }

/* 반투명 칩 (컬러 배경 위) */
.chip-st1 { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; background-color: rgba(255, 255, 255, .16);}
.chip-st1::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; background-color: #fff; border-radius: 3px; }
/* .chip-st2 { display: inline-flex; align-items: center; padding: 6px 13px; background-color: rgba(255, 255, 255, .14); border-radius: 8px; } */

/* 번호 뱃지 */
.num-badge-st1 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; width: 80px; height: 80px; background-color: #fff; border: 1px solid rgba(255, 255, 255, .28); border-radius: 20px; }
/* 소형 번호·아이콘 뱃지 */
.num-badge-st2 { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 5.2rem; height: 5rem; border-radius: 13px; }

/* 섹션 타이틀 아이콘 박스 */
.ico-box-st1 { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; }

@media only screen and (max-width: 767px) {
    .hero-box-st1 { padding: 20px; }
	.affair-wrap > div.pd30 {padding: 20px;}
    .hero-box-st1 .tit {font-size: 2.6rem;}
	.hero-quote {display: none;}
}

/* 주요성과 갤러리 (bbs-gallery 확장) */
.bbs-gallery.gallery-st1 .gallery-item { margin-bottom: 3rem; }
.bbs-gallery.gallery-st1 .txt-over2 {min-height: 2.8em}
.bbs-gallery.gallery-st1 .link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.6rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--gray-e5); }
.bbs-gallery.gallery-st1 .link-grid a:hover { background-color: var(--primary500); }

/* 사이트 카드 리스트 */
.site-list-st1 > li > * { display: flex; align-items: center; gap: 4rem; padding: 2.5rem; background-color: #fff; border: 1px solid var(--krds-color-light-gray-30, #b1b8be); border-radius: 1.2rem; transition: border-color .2s; }
.site-list-st1 > li + li { margin-top: 2.4rem; }
.site-list-st1 > li > a:hover { border-color: var(--primary600); }
.site-list-st1 .logo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 15rem; height: 6rem; }
.site-list-st1 .logo img {max-height: 100%; object-fit: contain;}

@media only screen and (max-width: 767px) {
    .site-list-st1 > li > a,
    .site-list-st1 > li > div { flex-direction: column; align-items: flex-start; gap: 1.6rem; padding: 2rem; }
    .site-list-st1 .logo { justify-content: flex-start; }
}


/* 재정체계 탭 카드 */
.fin-card-st1 { display: flex; gap: 2rem; }
.fin-card-st1 > li { flex: 1 1 0; min-width: 0; overflow: hidden; border: 1px solid #e3e9f2; border-radius: 1.8rem; }
.fin-card-st1 .head { display: flex; align-items: center; gap: 1.2rem; padding: 2rem 2.4rem; }
.fin-card-st1 .head .ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 4rem; height: 4rem; font-size: 2rem; color: #fff; background-color: var(--white15); border-radius: 1.1rem; }
.fin-card-st1 .head .eng { display: block; font-size: 1.2rem; letter-spacing: 0.04em; }
.fin-card-st1 .head strong { font-weight: 800; }
.fin-card-st1 .body { padding: 2.4rem; }
.fin-card-st1 .body > li { position: relative; padding-left: 2rem; color: #2b3856; }
.fin-card-st1 .body > li + li { margin-top: 1.4rem; }
.fin-card-st1 .body > li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.7rem; height: 0.7rem; border-radius: 50%; background-color: var(--primary700); }
.fin-card-st1.plus .body > li::before { content: "+"; width: auto; height: auto; background: none; font-weight: 700; font-size: 15px; color: var(--primary500); }

@media only screen and (max-width: 767px) {
    .fin-card-st1 { flex-direction: column; }
	.fin-card-st1 > li {flex: auto;}
}

/* 적극행정 범위 */
.scope-item { flex: 1 1 calc(50% - .75rem); display: flex; align-items: center; gap: 1.5rem; min-width: 0; padding: 1.6rem 2rem; background-color: var(--gray-f5); border: 1px solid var(--gray-e5); border-radius: 1rem; }

.img-box-st1 {display: flex; align-items: center;}

@media only screen and (max-width: 1023px) {
	.img-box-st1 {flex-direction: column;}
	.img-box-st1 > * {width: 100%; max-width: 100%;}
	.img-box-st1 .txt-30 {font-size: 2.4rem;}
}

/* 확산 구조도 */
.spread-st1 .arr-up { display: flex; align-items: center; justify-content: center; margin: 1.6rem 0; font-size: 3.4rem; color: var(--primary800); }
.spread-st1 .aim-card { padding: 3rem 2rem; background-color: var(--primary50); border: 1px solid var(--primary100); border-radius: 1.6rem; text-align: center; }
.spread-st1 .aim-card .ico { display: inline-flex; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; background-color: #fff; border-radius: 50%; font-size: 2.6rem; color: var(--primary600); }

/* 질문 목록 (아코디언 아님, 항상 펼침) */
.qna-st1 > li { display: flex; align-items: flex-start; gap: 1.8rem; padding: 2.5rem 2.7rem; background-color: var(--gray-fa); border-radius: 1.2rem; }
.qna-st1 > li + li { margin-top: 1.4rem; }
.qna-st1 > li .q { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; background-color: var(--primary700); border-radius: .8rem; font-weight: 700; font-size: 1.8rem; color: #fff; }
.qna-st1 > li .cont { flex: 1; min-width: 0; }

@media only screen and (max-width: 767px) {
    .scope-item { flex: 1 1 100%; }
    .spread-st1 .aim-card { padding: 2.4rem 1.6rem; }
    .qna-st1 > li { gap: 1.2rem; padding: 2rem; }
    .qna-st1 > li .q { width: 3.6rem; height: 3.6rem; font-size: 1.6rem; }
}

/* 재정 체계도 트리 (연결선은 가상요소) */
.org-tree-st1 > ol { display: flex; flex-direction: column; align-items: center; width: max-content; min-width: 100%; }
.org-tree-st1 ul { position: relative; display: flex; justify-content: center; }
.org-tree-st1 ul > li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 3.2rem 1.2rem 0; }
/* 형제 가로 분기선 */
.org-tree-st1 ul > li::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1.5px; background-color: #c4ccd6; }
.org-tree-st1 ul > li:first-child::before { left: 50%; width: 50%; }
.org-tree-st1 ul > li:last-child::before { left: 0; width: 50%; }
.org-tree-st1 ul > li:only-child::before { display: none; }
/* 가로선 → 노드 세로 스텁 */
.org-tree-st1 ul > li::after { content: ""; position: absolute; top: 0; left: calc(50% - 0.75px); width: 1.5px; height: 3.2rem; background-color: #c4ccd6; }
/* 부모 노드(또는 루트) → 자식 가로선 세로 연결 */
.org-tree-st1 li > ul { margin-top: 3.2rem; }
.org-tree-st1 li > ul::before { content: ""; position: absolute; top: -3.2rem; left: calc(50% - 0.75px); width: 1.5px; height: 3.2rem; background-color: #c4ccd6; }
/* 노드 */
.org-tree-st1 .node { display: flex; align-items: center; justify-content: center; min-height: 5.6rem; padding: 0 1.5rem; border-radius: 0.8rem; font-weight: 700; color: #fff; text-align: center; }
.org-tree-st1 .node.lv1 { width: 20rem; font-weight: 800; font-size: 1.9rem; background-color: var(--primary900); box-shadow: 0 6px 8px rgba(18, 50, 95, 0.22); }
.org-tree-st1 .node.lv2 { width: 21rem; font-size: 1.8rem; background-color: var(--primary600); }
.org-tree-st1 .node.lv3 { width: 19rem; font-size: 1.7rem; background-color: var(--primary400); }
.org-tree-st1 .node.box { width: 17rem; min-height: 7.2rem; font-weight: 600; font-size: 15px; color: var(--gray-33); background-color: #eceef1; }
.org-tree-st1 li:only-child > .node.box { width: 19.6rem; }
/* 예산 : 헤더 + 하위 회계 */
.org-tree-st1 .budget { width: 19.6rem; overflow: hidden; border-radius: 0.8rem; text-align: center; }
.org-tree-st1 .budget strong { display: flex; align-items: center; justify-content: center; height: 4.4rem; font-weight: 700; color: #fff; background-color: var(--primary400); }
.org-tree-st1 .budget .cont { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.7rem 0; font-weight: 600; font-size: 15px; color: var(--gray-33); background-color: #eceef1; }

/* 767 이하 : 연결선 없이 세로 스택 */
@media only screen and (max-width: 767px) {
    .org-tree-st1 { overflow-x: visible; padding: 0; }
    .org-tree-st1 > ol { width: 100%; min-width: 0; gap: 1rem; }
	.org-tree-st1 > ol * {width: 100%;}
    .org-tree-st1 ul { flex-direction: column; gap: 1rem; width: 100%; }
    .org-tree-st1 ul > li { width: 100%; padding: 0; }
    .org-tree-st1 ul > li::before, .org-tree-st1 ul > li::after, .org-tree-st1 li > ul::before { display: none; }
    .org-tree-st1 li > ul { margin-top: 1rem; }
    .org-tree-st1 .node, .org-tree-st1 .budget, .org-tree-st1 li:only-child > .node.box { width: 100% !important; }
}

/* 예산수립절차 플로우 (flow1~3 = 단계 테마) */
.process-flow-st1 .flow-tit { display: flex; align-items: center; gap: 13px; margin-bottom: 2.2rem; }
.process-flow-st1 .flow-tit .num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; border-radius: 1.2rem; font-weight: 700; font-size: 1.7rem; color: #fff; }
.process-flow-st1 .flow-tit .eng { display: block; font-size: 12px; letter-spacing: .06em; }
.process-flow-st1 .flow-grid { display: grid; grid-template-columns: 1fr 4.6rem 1fr 4.6rem 1fr; align-items: stretch; }
.process-flow-st1 .flow-grid.conn { min-height: 5.8rem; align-items: center; }
.process-flow-st1 .arr { display: flex; align-items: center; justify-content: center; align-self: center; width: 3.4rem; height: 3.4rem; margin: 0 auto; border-radius: 50%; font-size: 14px; }
.process-flow-st1 .flow-card { display: flex; flex-direction: column; overflow: hidden; background-color: #fff; border: 1px solid var(--gray-e5); border-radius: 1.4rem; }
.process-flow-st1 .flow-card .head { display: flex; align-items: center; gap: 1rem; padding: 13px 1.6rem; font-weight: 700; font-size: 15px; color: #fff; }
.process-flow-st1 .flow-card .head .no { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background-color: var(--white20); font-size: 12px; }
.process-flow-st1 .flow-card .body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 1.8rem 1.6rem; text-align: center; }
.process-flow-st1 .flow-card .body.left { align-items: flex-start; text-align: left; }
.process-flow-st1 .flow-card .date { display: inline-flex; align-items: center; padding: .5rem 1.2rem; border-radius: 99px; font-weight: 700; font-size: 13px; }
/* 단계별 테마 */
.process-flow-st1.flow1 .flow-tit .num, .process-flow-st1.flow1 .flow-card .head { background-color: var(--primary400); }
.process-flow-st1.flow1 .arr, .process-flow-st1.flow1 .date { background-color: #e7eef6; color: var(--primary400); }
.process-flow-st1.flow1 .big-ico { color: var(--primary400); }
.process-flow-st1.flow2 .flow-tit .num, .process-flow-st1.flow2 .flow-card .head { background-color: var(--primary600); }
.process-flow-st1.flow2 .arr, .process-flow-st1.flow2 .date { background-color: #e0ecfc; color: var(--primary600); }
.process-flow-st1.flow2 .big-ico { color: var(--primary600); }
.process-flow-st1.flow3 .flow-tit .num, .process-flow-st1.flow3 .flow-card .head { background-color: var(--primary900); }
.process-flow-st1.flow3 .arr, .process-flow-st1.flow3 .date { background-color: #e6ebf2; color: var(--primary900); }
.process-flow-st1.flow3 .big-ico { color: var(--primary900); }

/* 767 이하 : 세로 스택 (rev 는 뒤집기) */
@media only screen and (max-width: 767px) {
    .process-flow-st1 .flow-grid { grid-template-columns: 1fr; gap: 1rem; }
    .process-flow-st1 .flow-grid + .flow-grid { margin-top: 1rem; }
    .process-flow-st1 .flow-grid.conn, .process-flow-st1 .blank { display: none; }
    .process-flow-st1 .flow-grid.rev { display: flex; flex-direction: column-reverse; gap: 1rem; }
    .process-flow-st1 .arr .bi-chevron-right { transform: rotate(90deg); }
    .process-flow-st1 .arr .bi-chevron-left { transform: rotate(-90deg); }
}

/* 수립 절차 타임라인 */
.timeline-box-st1 { position: relative; padding: 6.5rem 4rem 4.5rem; background-color: var(--primary50); border: 1px solid var(--gray-e5); border-radius: 2.2rem; }
.timeline-box-st1 .box-tit { position: absolute; top: -2.9rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; height: 5.9rem; padding: 0 4rem; background-color: #fff; border: 2px solid var(--primary400); border-radius: 99px; font-weight: 700; font-size: 2.1rem; color: var(--primary700); box-shadow: 0 8px 10px rgba(31, 111, 214, 0.14); white-space: nowrap; }
.timeline-box-st1 .timeline { position: relative; max-width: 72rem; margin: 0 auto; }
.timeline-box-st1 .timeline::before { content: ""; position: absolute; top: 1.2rem; bottom: 1.2rem; left: 2.2rem; width: 2px; background-color: var(--primary200); }
.timeline-box-st1 .timeline > li { position: relative; display: flex; align-items: flex-start; gap: 2.2rem; }
.timeline-box-st1 .timeline > li + li { margin-top: 2.6rem; }
.timeline-box-st1 .timeline .num { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; font-weight: 700; font-size: 1.7rem; color: #fff; box-shadow: 0 0 0 6px var(--primary50); }
.timeline-box-st1 .card { flex: 1; min-width: 0; padding: 1.8rem 2.2rem; background-color: #fff; border: 1px solid #e0e7f1; border-radius: 1.4rem; }
.timeline-box-st1 .card .note { position: relative; margin-top: 1.4rem; padding: 1.2rem 0 0 1.5rem; border-top: 1px solid #dbe3ee; font-size: 14px; color: var(--gray-55); }
.timeline-box-st1 .card .note::before { content: ""; position: absolute; left: 0; top: 1.9rem; width: .6rem; height: .6rem; border-radius: 50%; background-color: #9db7dd; }
.timeline-box-st1 .card.fill { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; background-color: var(--primary900); border-color: var(--primary900); }
.timeline-box-st1 .card.fill .badge { display: inline-flex; align-items: center; padding: .5rem 1.4rem; border-radius: 99px; background-color: var(--white20); font-weight: 700; font-size: 13px; color: #fff; }

@media only screen and (max-width: 767px) {
    .timeline-box-st1 { padding: 4.5rem 1.5rem 2.5rem; border-radius: 1.6rem; }
    .timeline-box-st1 .box-tit { height: 4.6rem; padding: 0 2.4rem; font-size: 1.6rem; top: -2.3rem; }
    .timeline-box-st1 .timeline::before { left: 1.8rem; }
    .timeline-box-st1 .timeline > li { gap: 1.2rem; }
    .timeline-box-st1 .timeline .num { width: 3.6rem; height: 3.6rem; font-size: 15px; box-shadow: 0 0 0 4px var(--primary50); }
    .timeline-box-st1 .card { padding: 1.5rem 1.6rem; }
    .timeline-box-st1 .card > strong { font-size: 15px; }
}


/********** 민원 처리절차 플로우 (civil-flow) : 접수자 아바타 + 분기 트리 + 단계 박스 **********/
.civil-flow { display: flex; align-items: center; gap: 3rem; padding: 20px; }
/* 접수자 아바타 */
.civil-flow .cf-start { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.civil-flow .cf-start .ico { display: flex; align-items: center; justify-content: center; width: 8.8rem; height: 8.8rem; background-color: var(--primary50); border: 1px solid var(--primary100); border-radius: 100%; font-size: 3.6rem; color: var(--primary500); }
/* 분기 : 왼쪽 세로선 + 각 행 가로 tick + 점 */
.civil-flow .cf-branch { position: relative; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding-left: 60px; }
.civil-flow .cf-branch::before, .cf-branch::after { content: ""; position: absolute; top: 50%; background-color: var(--gray-cc); transform: translateY(-50%);}
.civil-flow .cf-branch::before {left: 20px; width: 2px; height: 75px;}
.civil-flow .cf-branch::after {left: 0; width: 20px; height: 2px;}
.civil-flow .cf-branch > .cf-row { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 6.3rem; }
.civil-flow .cf-branch > .cf-row::before , .cf-row::after { content: ""; position: absolute; left: -40px; top: 50%; transform: translateY(-50%);}
.civil-flow .cf-branch > .cf-row::before {left: -40px; width: 20px; height: 2px; background-color: var(--gray-cc); }
.civil-flow .cf-branch > .cf-row::after {left: -20px; width: 9px; height: 9px; background-color: var(--primary500); border-radius: 100%; transform: translate(-50%, -50%); }
.civil-flow .cf-branch .cf-row-tit { flex-shrink: 0; width: 9rem; font-weight: 700; font-size: 15px; color: var(--primary900); }
/* 라벨만 있는 분기(서면 접수방법) */
.civil-flow .cf-branch.only-tit { gap: 0; }
.civil-flow .cf-branch.only-tit::before {height: 124px;}
/* .civil-flow .cf-branch.only-tit > .cf-row { min-height: 4.6rem; } */
.civil-flow .cf-branch.only-tit .cf-row-tit { width: auto; font-weight: 600; color: var(--gray-33); }
/* 단계 박스 목록 */
.cf-steps { display: flex; align-items: center; gap: 1rem; }
.cf-steps > li { flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-width: 110px; min-height: 6.3rem; padding: 20px 10px; background-color: var(--primary50); border-radius: 1.2rem; font-weight: 600; font-size: 15px; color: var(--primary800); text-align: center; word-break: keep-all; }
.cf-steps > li.gray { background-color: var(--gray-f5); border-color: var(--gray-f5); color: var(--gray-55); }
.cf-steps > li.arr { flex-shrink: 0; min-width: 0; min-height: 0; padding: 0; background: none; border: 0; font-size: 2rem; color: var(--gray-cc); }
/* 마지막 분기 : 2박스 세로(라인 스타일) */
.cf-steps > li.cf-split-cell { min-width: 0; min-height: 0; padding: 0; background: none; border: 0; }
.cf-split { display: flex; flex-direction: column; gap: 1.2rem; }
.cf-split > li { display: flex; align-items: center; justify-content: center; min-width: 110px; min-height: 6rem; padding: 1rem 1.4rem; background-color: #fff; border: 1px solid var(--primary100); border-radius: 1.2rem; font-weight: 600; color: var(--gray-55); text-align: center; word-break: keep-all; }

@media only screen and (max-width: 1200px) {
	.civil-flow { flex-direction: column; align-items: flex-start; gap: 2rem; padding: 10px;}
    .civil-flow .cf-start { flex-direction: row; }
	.civil-flow .cf-branch {padding: 0;}
	.civil-flow .cf-branch::before, .cf-branch::after {display: none;}
	.civil-flow .cf-branch > .cf-row::before , .cf-row::after {display: none;}
    .cf-steps { flex-wrap: wrap; }
}
@media only screen and (max-width: 767px) {
    /* .civil-flow .cf-branch { padding-left: 3.4rem; } */
    .civil-flow .cf-branch::before { left: 1.6rem; }
    .civil-flow .cf-branch > .cf-row { flex-direction: column; align-items: flex-start; gap: .8rem; min-height: 0; }
    .civil-flow .cf-branch > .cf-row::before { top: 2.6rem; }
    .civil-flow .cf-branch > .cf-row::after { top: 2.6rem; }
	.civil-flow .cf-branch.only-tit {flex-direction: row; justify-content: flex-start; gap: 10px; }
	.civil-flow .cf-branch.only-tit .cf-row {position: relative; flex-direction: row; align-items: center;}
	.civil-flow .cf-branch.only-tit .cf-row:last-child {padding-right: 0;}
	.civil-flow .cf-branch.only-tit .cf-row::after {content: ""; position: static; display: inline-block; width: 1px; height: 10px; background-color: var(--gray-cc); transform: none;}
	.civil-flow .cf-branch.only-tit .cf-row:last-child::after {display: none;}
	.civil-flow .rg {flex-direction: column;}
}
@media only screen and (max-width: 500px) {
	.cf-steps {width: 100%;}
	.cf-steps > li {width: 100%;}
	.cf-steps > li.arr {transform: rotateZ(90deg);}
	.cf-split {width: 100%;}
}

/********** 장관 주요약력 **********/
/* 인사 영역 */
.minister-hero { display: flex; align-items: center; justify-content: center; gap: 3rem; }
.minister-hero .quote { flex: 1 1 0; min-width: 0; letter-spacing: -.04em; }
.minister-hero .name { flex: 1 1 0; min-width: 0; }
.minister-hero .photo { position: relative; flex-shrink: 0; width: 34rem; height: 37rem; border-radius: 0 0 120px 120px; overflow: hidden;}
.minister-hero .photo::before {content: ""; position: absolute; left: 0; bottom: 0; width: 34rem; height: 34rem; background: linear-gradient(144deg, var(--primary50) 10%, var(--primary200) 92%); border-radius: 120px 120px 0 0;}
.minister-hero .photo img { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); width: 100%;}
.sign { font-family: 'NohHaeChan', 'Pretendard', sans-serif; letter-spacing: -.04em; }

/* 학력 */
.edu-list > li { padding: 2.4rem; border: 1px solid var(--gray-e5); border-left: 2px solid var(--primary500);}

/* 주요경력 */
.career-list { position: relative; padding: 25px 0; border-top: 1px solid var(--gray-99); border-bottom: 1px solid var(--gray-99);}
.career-list::before { content: ""; position: absolute; top: 3rem; bottom: 3rem; left: 18.3rem; width: 2px; background-color: var(--primary100); }
.career-list > li { position: relative; display: flex; align-items: flex-start; gap: 4.4rem; padding: 1.2rem 0; }
.career-list > li .term { flex-shrink: 0; width: 17rem; font-weight: 600; color: #37507A; text-align: right; }
.career-list > li .cont { position: relative; flex: 1; min-width: 0; }
.career-list > li .cont::before { content: ""; position: absolute; top: 5px; left: -3.5rem; width: 1rem; height: 1rem; background-color: #fff; border: 2px solid var(--primary600); border-radius: 50%; outline: 3px solid #fff;}

@media only screen and (max-width: 1023px) {
    .minister-hero { flex-wrap: wrap; }
    .minister-hero .quote, .minister-hero .name { flex: 1 1 100%; text-align: center; }
    .minister-hero .quote { order: 1; }
    .minister-hero .photo { order: 0; margin: 0 auto; }
    .minister-hero .name { order: 2; }
}
@media only screen and (max-width: 767px) {
    .minister-hero .photo { width: 24rem; height: 25rem; border-radius: 0 0 60px 60px;}
	.minister-hero .photo::before {width: 24rem; height: 24rem; border-radius: 60px;}
    .minister-hero .photo img { width: 24.4rem; }
    .edu-list > li { padding: 1.6rem 2rem; }
    .career-list::before { left: .4rem; }
    .career-list > li { flex-direction: column; gap: .6rem; padding-left: 2.6rem; }
    .career-list > li .term { width: auto; text-align: left; }
    .career-list > li .cont::before { top: -2.2rem; left: -2.6rem; }
}

/********** 장관 일정 **********/
.schedule-top { display: flex; align-items: flex-start; gap: 2.4rem; }
.schedule-top .today-box { flex: 1; min-width: 0; }
.schedule-top .today-box .head { padding: 2rem 2.4rem; background-color: var(--primary50); border-radius: 1.2rem 1.2rem 0 0; }
.schedule-top .today-box .bd-box-st1 { border-radius: 0 0 1.2rem 1.2rem !important; border-top: 0; }
/* KRDS 달력을 팝업이 아닌 상시 노출로 변경 (기본은 display:none + position:absolute) */
.calendar-st1 {z-index: 1; display: block; flex-shrink: 0; width: 38.4rem; }
.calendar-st1 .calendar-wrap { position: static; width: 100%; }
.calendar-st1 .calendar-head .cal-now { font-weight: 700; font-size: 1.8rem; color: var(--gray-17); }

@media only screen and (max-width: 1023px) {
    .schedule-top { flex-direction: column; }
    .calendar-st1 { width: 100%; }
	.schedule-top .today-box {flex: unset; width: 100%;}
}

/********** sub01 : 기관소개 > 중수청 구성 > 중수청이란? **********/

/* 사진 변형 — 법전·저울 (guide-banner-st1 공용) */
.guide-banner-st1.banner-about::before { top: 0; right: -3px; width: 506px; height: 285px; background: linear-gradient(90deg, #fff 16%, rgba(255, 255, 255, 0) 70%), url(/resource/_main/img/content/sub01/about-banner-2490140ea80829baeeaeae8d0846e434.png) no-repeat center / cover; }
.guide-banner-st1.banner-about .lead { max-width: 60rem; }

/* 중수청의 역할 — 패턴 배경 박스 + 슬로건 + CI 세로 조합 (시안 456-43106, 2026-09-17) */
.about-role { display: flex; flex-direction: column; align-items: center; gap: 4rem; padding: 7rem 4rem; text-align: center; background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(/resource/_main/img/content/sub01/about-role-bg-017cb3dcecb33849fa099760a3e88689.png) no-repeat center / cover, #f4f5f6; border: 1px solid #e6e8ea; border-radius: 26px; overflow: hidden; }
.about-role .role-slogan { display: flex; flex-direction: column; gap: .4rem; color: var(--gray-17); }
.about-role .role-slogan .sub { font-weight: 500; font-size: 2.4rem; line-height: 1.5; }
.about-role .role-slogan .main { font-weight: 700; font-size: 2.4rem; line-height: 1.5; }
.about-role .role-ci { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.about-role .role-ci .symbol { width: 9.1rem; }
.about-role .role-ci .wordmark { width: 26rem; }
.about-role .role-desc { font-weight: 700; font-size: 2.4rem; line-height: 1.5; color: var(--gray-17); }

/* 중수청의 사명 — 사진 + 인용 블록 (시안 456-43106 개정판: 가운데 슬로건 제거, 원고 전문 3줄 강조) */
.about-mission .mission-body { display: flex; align-items: center; justify-content: space-between; gap: 4rem; margin-top: 2rem; }
.about-mission .img-wrap { flex-shrink: 0; width: 25.1rem; height: 25.5rem; background-color: var(--krds-color-light-secondary-5, #eef2f7); border-radius: 16px 56px 16px 56px; overflow: hidden; }
.about-mission .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-mission .txt-wrap { position: relative; display: flex; flex-direction: column; gap: 2rem; flex: 1; min-width: 0; padding: 4rem .8rem 1.6rem 0; }
.about-mission .deco-quote { position: absolute; top: -1rem; right: 1rem; width: 7.2rem; }
.about-mission .txt-wrap .stress { font-weight: 700; font-size: 2.6rem; line-height: 1.5; letter-spacing: 1px; color: var(--gray-17); }
.about-mission .txt-wrap .stress .point { color: #0b78cb; }

@media only screen and (max-width: 767px) {
	/* 데스크탑 규칙이 특이도로 이겨서 위치·크기도 함께 재선언한다 */
	.guide-banner-st1.banner-about::before { top: -48px; right: 0; width: 100%; height: 237px; background-image: linear-gradient(to top, #fff 4%, rgba(255, 255, 255, 0) 83%), url(/resource/_main/img/content/sub01/about-banner-2490140ea80829baeeaeae8d0846e434.png); }
	.about-role { gap: 3rem; padding: 5rem 2rem; }
	.about-role .role-slogan .sub { font-size: 17px; }
	.about-role .role-slogan .main { font-size: 2rem; }
	.about-role .role-ci .symbol { width: 7.2rem; }
	.about-role .role-ci .wordmark { width: 20rem; }
	.about-role .role-desc { font-size: 2rem; }
	.about-mission .mission-body { flex-direction: column; align-items: stretch; gap: 2.4rem; }
	.about-mission .txt-wrap .stress { font-size: 2rem; }
	.about-mission .img-wrap { width: 100%; height: 28rem; }
	.about-mission .txt-wrap { width: 100%; padding: 0; }
	.about-mission .deco-quote { display: none; }
}


/********** sub01 : 기관소개 > 중수청 구성 > 중수청 구성원 **********/

/* 아이콘 변형 — 모니터·방패 (banner-doc 계열: 아이콘·보더·본문 폭만 교체) */
.guide-banner-st1.banner-doc.banner-member { border-color: var(--krds-color-light-secondary-10, #d6e0eb); }
.guide-banner-st1.banner-doc.banner-member::before { width: 93px; height: 92px; margin-top: -46px; background-image: url(/resource/_main/img/content/sub01/member-banner-e3faac0f9018f56c95b485c9f284b6ef.svg); }
.guide-banner-st1.banner-doc.banner-member .lead { max-width: none; }

/* 검사의 업무 — 대각 라운드 사진 + 형광펜 타이틀 */
.member-intro { display: flex; align-items: center; gap: 4rem; }
.member-intro .img-wrap { overflow: hidden; flex-shrink: 0; width: 42rem; border-radius: 16px 56px 16px 56px; }
.member-intro .img-wrap img { width: 100%; height: 23.6rem; object-fit: cover; }
.member-intro .tit { display: inline-block; font-weight: 700; font-size: 2.4rem; color: #052b57; background: linear-gradient(transparent 62%, rgba(147, 177, 233, .3) 62%); }
.member-intro .desc { margin-top: .8rem; font-weight: 700; font-size: 1.9rem; line-height: 1.5; color: var(--krds-color-light-gray-95, #131416); }
.member-intro .desc .point { color: #0b78cb; }

/* 구성원 소개 리스트 — 썸네일 + 타이틀·내용, 구분선 */
/* 구성 카드 3종 + 조직 규모 (시안 464-44187, 2026-09-17 — 구 member-list 이미지형 리스트 대체) */
.member-cards { display: flex; align-items: stretch; gap: 1rem; padding: 0 2.4rem; }
.member-cards > li { flex: 1; min-width: 0; overflow: hidden; border: 1px solid #1858ad; border-radius: 8px; }
.member-cards .tit { display: block; padding: 1rem; background-color: #1858ad; font-weight: 700; font-size: 1.9rem; color: #fff; text-align: center; }
.member-cards .desc { padding: 1.6rem 2rem 2rem; font-size: 1.7rem; line-height: 1.5; color: var(--gray-33); }
.member-scale { padding: 1.2rem 3.2rem 1.6rem; }
.member-scale .tit { display: block; margin-bottom: 1.2rem; font-weight: 700; font-size: 1.9rem; color: var(--krds-color-light-gray-95, #131416); }
.member-scale .desc { font-size: 1.7rem; line-height: 1.5; color: var(--gray-33); }
/* img-st65 의 % 패딩이 flex 고정폭에서 부모 폭 기준으로 계산되므로 높이를 직접 고정 */

@media only screen and (max-width: 767px) {
	/* 배너 아이콘 — banner-member(3클래스)가 banner-doc 모바일 규칙을 특이도로 이겨 세로 중앙에 남아 텍스트와 겹침 → 우하단으로 내리고 자리 확보 */
	.guide-banner-st1.banner-doc.banner-member { padding-bottom: 110px; }
	.guide-banner-st1.banner-doc.banner-member::before { top: auto; bottom: 16px; right: 24px; margin-top: 0; width: 80px; height: 79px; }
	.member-intro { flex-direction: column; align-items: stretch; gap: 2rem; }
	.member-intro .img-wrap { width: 100%; border-radius: 12px 46px 12px 46px; }
	.member-intro .img-wrap img { height: 18.4rem; }
	.member-intro .txt-wrap { padding: 0 1.6rem; }
	.member-cards { flex-direction: column; padding: 0; }
	.member-scale { padding: 0 .8rem; }
}


/********** sub01 : 기관소개 > 중수청 구성 > 수사관의 역할 **********/

/* 주요 역할 리스트 — 좌측 원형 아이콘 4종 (최종 시안 2278-53148: 증거·영장·조서·송치) */
.officer-list { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.6rem 2.4rem; }
.officer-list li { display: flex; align-items: center; gap: 4rem; padding: 2rem 3rem; border: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-radius: 16px; }
.officer-list .ico { flex-shrink: 0; width: 8rem; height: 8rem; background-color: var(--gray-f5); border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 4.2rem auto; }
.officer-list li:nth-child(1) .ico { background-image: url(/resource/_main/img/content/sub01/officer-ico-evidence-812a0682a02198debbec07a336d95dad.svg); }
.officer-list li:nth-child(2) .ico { background-image: url(/resource/_main/img/content/sub01/officer-ico-warrant-cacdc8102121a7d73245be6b5e7ef3f5.svg); }
.officer-list li:nth-child(3) .ico { background-image: url(/resource/_main/img/content/sub01/officer-ico-record-6f307fb381710b73e513b78c0b53e1aa.svg); }
.officer-list li:nth-child(4) .ico { background-image: url(/resource/_main/img/content/sub01/officer-ico-transfer-aba763998ca634a448dfb30eedf5a19a.svg); }
.officer-list p { font-weight: 700; font-size: 2.4rem; line-height: 1.5; color: var(--krds-color-light-gray-90, #1e2124); }
@media only screen and (max-width: 767px) {
	.officer-list { gap: 1rem; padding: 0; }
	.officer-list li { gap: 2rem; padding: 1.6rem 2rem; }
	.officer-list .ico { width: 5.6rem; height: 5.6rem; }
	.officer-list p { font-size: 17px; }
}

/* 준비중 안내 — 콘텐츠 수급 전 임시 노출 (sub02 민원절차·서식 안내, 중수청 수사범위에서 공용) */
.preparing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 32rem; padding: 6rem 2rem; border-top: 2px solid var(--primary500); border-bottom: 1px solid var(--gray-e5); text-align: center; }
.preparing .bi { font-size: 4.8rem; color: var(--primary300); }
.preparing strong { margin-top: 1rem; font-weight: 700; font-size: 2.4rem; line-height: 1.5; color: var(--krds-color-light-gray-95, #131416); }
.preparing p { font-size: 1.7rem; line-height: 1.5; color: var(--krds-color-light-gray-70, #464c53); }

/********** sub01 : 기관소개 > 중수청장 소개 > 청장 인사말 **********/

/* 인사말 헤더 — 사진 + 환영 문구 가운데 정렬 */
.greeting-head { display: flex; align-items: center; justify-content: center; }
.greeting-head .img-wrap { flex-shrink: 0; width: 36rem; }
.greeting-head .txt-wrap { display: flex; flex-direction: column; gap: 4rem; padding: 0 4rem; }
.greeting-head .txt-wrap .point { color: var(--krds-color-light-primary-50, #256ef4); }
.greeting-head .txt-wrap .sign { color: var(--krds-color-light-gray-70, #464c53); }

/* 인사말 본문 — 단락 간격 */
.greeting-body p { line-height: 1.5; }
.greeting-body p + p { margin-top: 1em; }

@media only screen and (max-width: 1023px) {
	.greeting-head { flex-direction: column; }
	.greeting-head .img-wrap { width: 28rem; }
	.greeting-head .txt-wrap { gap: 2.4rem; padding: 1.6rem 0 0; }
}


/********** sub01 : 기관소개 > 중수청장 소개 > 역대청장 **********/

/* 이름 검색 — bbs-filter 변형: 검색박스만 가운데 */
.chief-search { align-items: center; }
/* bbs-filter 는 세로 flex — flex:1(가로 필터용)이 세로축으로 작동해 높이가 무너지므로 해제 */
.chief-search .sch-box { flex: none; width: 46rem; max-width: 100%; min-width: 0; }
/* input 의 암묵 최소폭이 축소를 막아 버튼이 밀려 잘리는 것 방지 */
.chief-search .sch-box .inp-st2 { min-width: 0; }

/* 청장 카드 목록 — 사진 자리(시안 미확정 회색 박스) + 인적사항 + 주요업적 팝업 버튼 */
.chief-list { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.chief-card { display: flex; gap: 2.6rem; padding: 1.6rem; border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); }
.chief-card .photo-frame { flex-shrink: 0; align-self: stretch; width: 10.8rem; min-height: 12.5rem; background-color: var(--krds-color-light-secondary-5, #eef2f7); }
.chief-card .txt-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
.chief-card .name { font-weight: 700; font-size: 1.9rem; line-height: 1.5; color: var(--krds-color-light-gray-95, #131416); }
.chief-card .term { color: var(--krds-color-light-gray-95, #131416); }
.chief-card .term .key { color: var(--krds-color-light-gray-70, #464c53); }
.chief-card .krds-btn { margin-top: .6rem; }

/* 주요업적 팝업 — krds-modal 변형: 카드 재사용 + 업적 스크롤 목록 */
/* 풋링크(풀스크린)용 전역 재정의(layout.css)를 다이얼로그형에 맞게 되돌린다 */
#popChief .modal-content { width: 60rem; max-width: calc(100% - 3.2rem); height: auto; }
/* KRDS 자체 패딩(헤더 상단 대형 여백·좌우 4rem)이 있어 컨테이너에 또 주면 이중 — 헤더/본문에서 시안 3rem 로 통일 */
#popChief .modal-header { padding: 3rem 3rem 0; }
#popChief .modal-conts { padding: 0 3rem 3rem; }
#popChief .modal-header .modal-title { padding: 0 0 1.2rem; }
#popChief .modal-dialog .btn-close { top: 2.6rem; right: 2.5rem; width: 3.6rem; height: 3.6rem; }
#popChief .chief-card { margin-top: .4rem; }
.chief-feats { overflow-y: auto; max-height: 34.5rem; margin-top: 1.6rem; padding-right: 1rem; }
/* component.css 전역 스크롤바 숨김(::-webkit-scrollbar 0px) 재정의 — 크롬·엣지에서 스크롤바 표시 (푸터 quick-drop 과 동일 스타일) */
.chief-feats::-webkit-scrollbar { width: 4px; }
.chief-feats::-webkit-scrollbar-thumb { background-color: var(--gray-cc); border-radius: 4px; }
.chief-feats::-webkit-scrollbar-track { background-color: var(--gray-e9); }
.chief-feats > li { display: flex; align-items: flex-start; gap: 1.6rem; padding: .3rem 0 .3rem 1.6rem; }
.chief-feats .date { position: relative; flex-shrink: 0; font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--gray-17); font-variant-numeric: tabular-nums; } /* 고정폭 숫자 — 날짜 폭이 같아져 뒤 텍스트 시작점 정렬 */
.chief-feats .date::before { content: ""; position: absolute; top: 50%; left: -1.3rem; transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--krds-color-light-gray-70, #464c53); border-radius: 50%; }
.chief-feats .desc { font-size: 1.7rem; line-height: 1.5; color: var(--gray-17); }

@media only screen and (max-width: 767px) {
	/* 카드 — 세로형 전환(2열 유지), 텍스트 가운데 */
	.chief-list { gap: 1.6rem; }
	.chief-card { flex-direction: column; gap: 1.6rem; padding: 1rem 1rem 1.6rem; }
	.chief-card .photo-frame { align-self: auto; width: 100%; min-height: 0; height: 12.3rem; }
	.chief-card .txt-wrap { align-items: center; width: 100%; }
	.chief-card .name { font-size: 1.7rem; }
	.chief-card .order, .chief-card .term { font-size: 13px; }
	.chief-feats { max-height: 24rem; }
}

/********** sub01 : 기관소개 > 조직과 기능 > 일반현황 **********/
/* 주요 연혁 : 세로축 좌/우 배치 도표라 시안(847x1163) 기준 좌표를 직접 지정 */
.hist-flow { position: relative; width: 100%; max-width: 84.7rem; height: 116.3rem; margin: 0 auto; }
/* 세로축 + 위아래 끝점 */
.hist-flow .flow-axis { position: absolute; top: 1.15rem; bottom: 1.15rem; left: 50%; width: 1px; background-color: var(--gray-cc); transform: translateX(-50%); }
.hist-flow .flow-axis::before,
.hist-flow .flow-axis::after { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; background-color: var(--gray-99); border-radius: 50%; transform: translateX(-50%); }
.hist-flow .flow-axis::before { top: -.35rem; }
.hist-flow .flow-axis::after { bottom: -.35rem; }

/* 부처 세로 막대 */
.hist-flow .flow-bar { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: 5.1rem; padding: 1.6rem 0; background-color: var(--primary50); border-radius: 8px; font-weight: 700; font-size: 15px; color: var(--primary800); writing-mode: vertical-rl; letter-spacing: .1em; }
.hist-flow .flow-bar.on { background-color: var(--primary400); color: #fff; }
.hist-flow .flow-bar.gray { background-color: var(--gray-f5); color: var(--gray-33); }
.hist-flow .flow-bar.b1 { top: 2.7rem; height: 13.5rem; right: calc(50% + 1.6rem); }
.hist-flow .flow-bar.b2 { top: 2.7rem; height: 13.5rem; left: calc(50% + 1.7rem); }
.hist-flow .flow-bar.b3 { top: 41.1rem; height: 13.5rem; right: calc(50% + 1.6rem); }
.hist-flow .flow-bar.b4 { top: 41.1rem; height: 24.2rem; left: calc(50% + 1.7rem); }
.hist-flow .flow-bar.b5 { top: 56.1rem; height: 9.2rem; right: calc(50% + 1.6rem); }
.hist-flow .flow-bar.b6 { top: 89.8rem; height: 18.5rem; right: calc(50% + 1.6rem); }
.hist-flow .flow-bar.b7 { top: 89.8rem; height: 13.2rem; left: calc(50% + 1.7rem); }

/* 통합 시점 : 큰 원 */
.hist-flow .flow-node { position: absolute; z-index: 2; left: 50%; display: flex; align-items: center; justify-content: center; width: 13.5rem; height: 13.5rem; background-color: var(--primary800); border-radius: 50%; font-weight: 700; font-size: 1.8rem; color: #fff; transform: translateX(-50%); }
.hist-flow .flow-node.n1 { top: 21.7rem; }
.hist-flow .flow-node.n2 { top: 70.8rem; }

/* 시점 : 날짜 + 설명 */
.hist-flow .flow-item { position: absolute; width: 36rem; }
.hist-flow .flow-item::before { content: ""; position: absolute; top: 1.1rem; z-index: 1; width: 7px; height: 7px; background-color: var(--primary400); border-radius: 50%; }
.hist-flow .flow-item::after { content: ""; position: absolute; top: 1.4rem; width: 8.5rem; height: 1px; background-color: var(--gray-cc); }
.hist-flow .flow-item.lf { right: calc(50% + 9.5rem); text-align: right; }
.hist-flow .flow-item.lf::before { right: -1.5rem; }
.hist-flow .flow-item.lf::after { right: -9.5rem; }
.hist-flow .flow-item.rg { left: calc(50% + 9.6rem); text-align: left; }
.hist-flow .flow-item.rg::before { left: -1.5rem; }
.hist-flow .flow-item.rg::after { left: -9.6rem; }
.hist-flow .flow-item.i1 { top: 17.5rem; }
.hist-flow .flow-item.i2 { top: 27.2rem; }
.hist-flow .flow-item.i3 { top: 36.5rem; }
.hist-flow .flow-item.i4 { top: 47.4rem; }
.hist-flow .flow-item.i5 { top: 53.9rem; }
.hist-flow .flow-item.i6 { top: 66.6rem; }
.hist-flow .flow-item.i7 { top: 85.6rem; }
.hist-flow .flow-item.i8 { top: 95rem; }
.hist-flow .flow-item.i9 { top: 104.2rem; }
.hist-flow .flow-item.i10 { top: 109.5rem; }

/* 1300 이하 : 좌표 배치를 풀고 축을 왼쪽에 둔 세로 연표로 전환 (특정도를 맞추려 .hist-flow 를 두 번 쓴다) */
@media only screen and (max-width: 1300px) {
    .hist-flow.hist-flow { max-width: none; height: auto; padding-left: 3.4rem; }
    .hist-flow.hist-flow .flow-axis { top: 0; bottom: 0; left: 3px; transform: none; }
    .hist-flow.hist-flow .flow-bar,
    .hist-flow.hist-flow .flow-node,
    .hist-flow.hist-flow .flow-item { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; max-width: none; height: auto; transform: none; text-align: left; }
    .hist-flow.hist-flow .flow-bar { display: inline-flex; margin: 1.5rem 1rem 0 0; padding: .8rem 1.6rem; writing-mode: horizontal-tb; }
    .hist-flow.hist-flow .flow-node { margin: 2rem 0 .5rem; padding: 1.2rem 2.4rem; border: 0; border-radius: 3rem; }
    .hist-flow.hist-flow .flow-item { margin-top: 2.5rem; }
    .hist-flow.hist-flow .flow-item.lf::before,
    .hist-flow.hist-flow .flow-item.rg::before { top: 1.1rem; right: auto; left: -3.4rem; }
    .hist-flow.hist-flow .flow-item::after { display: none; }
}

/********** sub01 : 기관소개 > 조직 및 업무 > 조직구성도 **********/

/* 조직 규모 캡션 */
.org-cap { margin-top: 4rem; color: var(--krds-color-light-gray-95, #131416); }
.org-cap .tag { font-weight: 700; color: var(--krds-color-light-primary-50, #256ef4); }

/* 차트는 고정폭 — 컨테이너가 좁으면 가로 스크롤 (전역 스크롤바 숨김을 table-scroll-wrap 방식으로 재정의) */
.org-scroll { margin-top: 2rem; overflow-x: auto; padding-bottom: 1rem; }
.org-scroll::-webkit-scrollbar { height: 8px; }
.org-scroll::-webkit-scrollbar-track { background-color: var(--gray-fa); border-radius: 4px; }
.org-scroll::-webkit-scrollbar-thumb { background-color: var(--gray-cc); border-radius: 4px; }

/* 조직도 — 연결선은 전부 보더·가상요소 (이미지 없음). 각 박스는 부서별 연락처 링크 */
.org-chart { position: relative; width: 90.8rem; margin: 0 auto; }
.org-chart a { text-decoration: none; }
.org-chart a:hover, .org-chart a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* 공통 셀 */
.org-chart .org-head { display: flex; align-items: center; justify-content: center; min-height: 4.2rem; padding: .8rem 1.2rem; background-color: #052b57; border-radius: 4px; font-weight: 700; font-size: 1.7rem; color: #fff; text-align: center; }
.org-chart .org-head.lv0 { width: 28rem; min-height: 6.4rem; margin: 0 auto; background-color: var(--krds-color-light-primary-60, #0b50d0); border-radius: 8px; font-size: 2.4rem; }
.org-chart .org-list { display: flex; flex-direction: column; gap: .6rem; }
.org-chart .org-list > li > a,
.org-chart .org-cell { display: flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: .4rem 1rem; background-color: var(--krds-color-light-gray-5, #f4f5f6); border: 1px solid var(--krds-color-light-gray-10, #e6e8ea); border-radius: 4px; font-size: 15px; color: var(--krds-color-light-gray-95, #131416); text-align: center; }
.org-chart .org-list > li.hl > a { background-color: #e7f4fe; border-color: #86aff9; font-weight: 700; color: #052b57; }
.org-chart .org-list > li.team { position: relative; margin-top: 1rem; }
.org-chart .org-list > li.team::before { content: ""; position: absolute; top: -1.7rem; left: 50%; width: 1px; height: 1.6rem; background-color: #86aff9; }

/* 상단 그룹 : 중앙 세로선(청장→하단 버스) + 차장 원 */
.org-mid { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 22rem; row-gap: 4rem; margin-top: 4rem; padding-bottom: 9rem; }
.org-mid::before { content: ""; position: absolute; top: -2.9rem; bottom: -3rem; left: 50%; width: 1px; background-color: var(--gray-cc); }
.org-mid::after { content: ""; position: absolute; top: -3.2rem; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; background-color: var(--krds-color-light-primary-50, #256ef4); border-radius: 50%; }
.org-vice { position: absolute; top: 11.95rem; left: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 9.4rem; height: 9.4rem; transform: translate(-50%, -50%); background-color: #0b78cb; border-radius: 50%; font-weight: 700; font-size: 2.4rem; color: #fff; }

/* 좌우 브랜치 : [담당관 스택] ↔ [관] — 중앙선까지 가지선 */
.org-branch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; }
.org-branch .org-head { flex: 0 0 16rem; }
.org-branch .org-list { flex: 0 0 16rem; }
/* 관 → 중앙선 가지선 (좌우가 중앙에서 만나 하나로 이어짐) + 관 쪽 끝 dot */
.org-branch::after { content: ""; position: absolute; top: 50%; width: 9.9rem; height: 1px; background-color: var(--gray-cc); }
.org-branch.is-left::after { left: calc(100% + 1.1rem); }
.org-branch.is-right::after { right: calc(100% + 1.1rem); }
.org-branch .org-head { position: relative; }
.org-branch .org-head::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); background-color: var(--krds-color-light-gray-40, #8a949e); border-radius: 50%; }
.org-branch.is-left .org-head::after { left: calc(100% + .75rem); }
.org-branch.is-right .org-head::after { right: calc(100% + .75rem); }
/* 관 ↔ 담당관 스택 : 곡선 갈래 (첫·막 담당관 중앙에서 둥글게 모임) */
.org-branch .org-list { position: relative; }
.org-branch .org-list::before, .org-branch .org-list::after { content: ""; position: absolute; width: 1.2rem; border-color: var(--gray-cc); border-style: solid; border-width: 0; }
.org-branch.is-left .org-list::before { left: 100%; top: 1.6rem; bottom: 50%; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 8px; }
.org-branch.is-left .org-list::after { left: 100%; top: 50%; bottom: 1.6rem; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 8px; }
.org-branch.is-right .org-list::before { right: 100%; top: 1.6rem; bottom: 50%; border-top-width: 1px; border-left-width: 1px; border-top-left-radius: 8px; }
.org-branch.is-right .org-list::after { right: 100%; top: 50%; bottom: 1.6rem; border-bottom-width: 1px; border-left-width: 1px; border-bottom-left-radius: 8px; }
/* 곡선 → 관 가로 연결 */
.org-branch::before { content: ""; position: absolute; top: 50%; height: 1px; background-color: var(--gray-cc); }
.org-branch.is-left::before { left: 17.2rem; right: 16rem; }
.org-branch.is-right::before { left: 16rem; right: 17.2rem; }

/* 운영지원과 — 중앙선 우측 가지 */
.org-solo { position: absolute; right: 0; bottom: 2rem; left: 50%; display: flex; justify-content: flex-end; }
.org-solo .org-cell { position: relative; width: 16rem; }
.org-solo::before { content: ""; position: absolute; top: 50%; left: 0; right: 17.3rem; height: 1px; background-color: var(--gray-cc); }
.org-solo::after { content: ""; position: absolute; top: 50%; right: 17rem; width: 7px; height: 7px; transform: translateY(-50%); background-color: var(--krds-color-light-gray-40, #8a949e); border-radius: 50%; }

/* 하단 4국 : ∏ 버스 + 열 내림선 */
.org-bottom { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; width: 80.4rem; margin: 0 auto; padding-top: 7rem; }
.org-bottom::before { content: ""; position: absolute; top: 3.6rem; left: calc((100% - 6rem) / 8); right: calc((100% - 6rem) / 8); height: 1.7rem; border: solid var(--gray-cc); border-width: 1px 1px 0; border-radius: 6px 6px 0 0; }
.org-group { position: relative; display: flex; flex-direction: column; gap: 1.6rem; }
.org-group .org-list { position: relative; }
.org-group .org-list::before { content: ""; position: absolute; top: -1.6rem; left: 50%; width: 1px; height: 1.6rem; background-color: var(--gray-cc); }
.org-group::before { content: ""; position: absolute; top: -3.4rem; left: 50%; width: 1px; height: 1.7rem; background-color: var(--gray-cc); }
.org-group:first-child::before, .org-group:last-child::before { content: none; }
.org-group::after { content: ""; position: absolute; top: -1.7rem; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; background-color: var(--krds-color-light-gray-40, #8a949e); border-radius: 50%; }


/* 하위 부서가 없는 칸 — 2026-09-23 조직도 v30 (지방청 담당관 4개)
   퍼블 sub010301 은 본청 1장뿐이라 '하위 없는 칸이 여러 개'인 지방청 형태가 시안에 없다.
   .org-solo 는 절대배치라 2개 이상이면 겹친다 → OrgChartService 가 좌·우 칸으로 돌리고,
   그 칸에는 목록이 없으므로 목록용 연결선만 끈다.
   ※ 기존 선택자는 건드리지 않는다 — 새 클래스(is-plain) 전용 4줄.
   ⚠ 퍼블 content.css 를 다시 받을 때 이 블록이 지워지지 않게 확인할 것. */
.org-chart .org-branch.is-plain .org-list { display: none; }
.org-chart .org-branch.is-plain::before { content: none; }
.org-chart .org-branch.is-left.is-plain { justify-content: flex-end; }
.org-chart .org-branch.is-right.is-plain { justify-content: flex-start; }



/* 좌·우 칸을 클래스대로 놓는다 — 2026-09-23 조직도 v30.
   .org-mid 는 2열 그리드인데 자동배치라 소스 순서가 열을 정했다.
   칸 수가 홀수인 청(서울: 좌 2 · 우 3)에서 좌우가 뒤집히므로 열을 명시하고
   빈 칸은 메우지 않는다 — 서울청 사무국처럼 첫 줄에 혼자 있는 칸이 시안에 있다. */
.org-chart .org-mid { grid-auto-flow: row; }
.org-chart .org-branch.is-left { grid-column: 1; }
.org-chart .org-branch.is-right { grid-column: 2; }


/* 하단 국 묶음 열 수 — 2026-09-23 조직도 v30. 퍼블 시안은 본청 4열(80.4rem) 고정이라
   지방청(3국)은 4번째 열이 비어 ∏ 버스 오른쪽 끝이 허공에 떴다. 열 수대로 폭과 버스 양끝을 맞춘다.
   열 폭은 본청과 같게(18.6rem), 첫·끝 열 중심 = (100% - 간격합) / (2 × 열수). */
.org-bottom.cols-2 { grid-template-columns: repeat(2, 1fr); width: 39.2rem; }
.org-bottom.cols-2::before { left: calc((100% - 2rem) / 4); right: calc((100% - 2rem) / 4); }
.org-bottom.cols-3 { grid-template-columns: repeat(3, 1fr); width: 59.8rem; }
.org-bottom.cols-3::before { left: calc((100% - 4rem) / 6); right: calc((100% - 4rem) / 6); }
.org-bottom.cols-5 { grid-template-columns: repeat(5, 1fr); width: 90.8rem; }
.org-bottom.cols-5::before { left: calc((100% - 8rem) / 10); right: calc((100% - 8rem) / 10); }

/* 차장 원을 가운데 칸 아래로 — 지방청. 퍼블 시안(본청)은 원이 좌·우 두 줄 사이에 있지만
   지방청은 담당관 두 줄이 모두 차장 위라 시안대로 두면 둘째 줄 옆에 원이 겹친다. */
.org-mid.is-vice-below { padding-bottom: 14rem; }
.org-mid.is-vice-below .org-vice { top: auto; bottom: .6rem; transform: translateX(-50%); }

/* 차장이 여럿인 청 — 2026-09-23 조직도 v30 서울청(1·2·3차장). 퍼블 시안에 없는 형태.
   하단을 차장별 열로 나누고, 열마다 그 차장의 국을 2개씩 놓는다. */
.org-bottom.is-multi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; width: 100%; padding-top: 6rem; }
.org-bottom.is-multi::before { top: 2.6rem; left: calc((100% - 6rem) / 6); right: calc((100% - 6rem) / 6); height: 2rem; }
.org-vcol { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; }
.org-vcol::before { content: ""; position: absolute; top: -3.4rem; left: 50%; width: 1px; height: 3.4rem; background-color: var(--gray-cc); }
.org-vcol .org-vice-box { display: flex; align-items: center; justify-content: center; width: 8.6rem; height: 8.6rem; background-color: #0b78cb; border-radius: 50%; font-weight: 700; font-size: 1.9rem; color: #fff; }
/* 차장 원 → 괄호 → 국 : 괄호 옆줄이 국 상자까지 끊김 없이 내려간다(PPT 처럼). 점은 퍼블 규칙대로 그 선 위(top:-1.7rem)에 찍힌다 */
.org-vcol-groups { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; width: 100%; padding-top: 3.4rem; }
.org-vcol-groups::before { content: ""; position: absolute; top: 0; left: calc((100% - 1.6rem) / 4); right: calc((100% - 1.6rem) / 4); height: 3.4rem; border: solid var(--gray-cc); border-width: 1px 1px 0; border-radius: 6px 6px 0 0; }
.org-vcol-groups::after { content: ""; position: absolute; top: -2.4rem; left: 50%; width: 1px; height: 2.4rem; background-color: var(--gray-cc); }
.org-group.is-sub { gap: 1.2rem; padding-top: 0; }
.org-group.is-sub::before { content: none; }
/* 1fr 은 내용 최소폭만큼 열을 넓혀 두 열이 달라지고, 괄호 다리가 상자 중심에서 비껴난다(서울 3차장 첨단수사국 — 보이스피싱범죄합동수사과). minmax(0,1fr) 로 열을 같게 하고 긴 이름은 두 줄로 */
.org-group.is-sub .org-list > li > a { padding-left: .6rem; padding-right: .6rem; word-break: normal; overflow-wrap: anywhere; }   /* 옆줄이 괄호 몫 — 점(::after)은 퍼블 규칙 그대로 top:-1.7rem 에 찍힌다 */

/********** sub01 : 기관소개 > 조직 및 업무 > 부서별 연락처 **********/
/* 2026-09-18 부서별 섹션 표(최종 시안 2280-52348) — 표준 tbl-board·tbl-line 사용, 모바일은 전역 table-data 스택 */
.contact-note { display: flex; align-items: center; gap: .8rem; font-size: 15px; color: var(--krds-color-light-gray-95, #131416); }
.contact-note .ico { width: 1.8rem; }

/********** sub01 : 기관소개 > 조직 및 업무 > 중수청 배치표 **********/

/* 안내 배너(guide-banner-st1.banner-doc 재사용) — 이 시안만 보더가 연하고 아이콘이 다름(문서+인물) */
.guide-banner-st1.banner-place { border-color: var(--krds-color-light-secondary-10, #d6e0eb); }
.guide-banner-st1.banner-doc.banner-place::before { background-image: url(/resource/_main/img/content/sub01/place-banner-doc-ca5c77fae7ccbcfdf05d02bd6db23ea7.svg); }

/********** sub01 : 기관소개 > 중수청 CI/CM **********/

/* 소개 박스 — 시안 secondary 톤 (로고·문구는 CI 확정 전 플레이스홀더) */
.cicm-intro { padding: 4rem; background-color: var(--krds-color-light-secondary-5, #eef2f7); border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); border-radius: 12px; }
.cicm-intro > strong { display: block; margin-bottom: 2.4rem; font-size: 2.4rem; line-height: 1.5; color: var(--krds-color-light-gray-95, #131416); }
.cicm-intro > p { font-size: 1.7rem; line-height: 1.5; color: var(--gray-33); }
/* 로고 카드 — 흑백형은 이미지 복제 없이 필터 */
.cicm-logo-box { display: flex; align-items: center; justify-content: center; gap: 4rem; min-height: 20rem; padding: 4rem; background-color: #fff; border: 1px solid var(--krds-color-light-gray-30, #b1b8be); border-radius: 12px; }
.cicm-logo-box img { width: 37.5rem; max-width: 100%; height: auto; }
.cicm-logo-box img.gray { filter: grayscale(1); opacity: .5; }
/* 다운로드 버튼 (btn-bace1 대형 변형) */
.btn-bace1.cicm-dl { gap: .4rem; height: 5.6rem; line-height: 5.6rem; padding: 0 2rem; font-size: 1.9rem; }
.btn-bace1.cicm-dl .bi { font-size: 2.4rem; }
/* 기관상징 색상표 — 행 머리글(th) 오른쪽·아래 구분선 (tbl-board·tbl-line 은 tbody th 에 선이 없다) */
.mi-color-table tbody th { border-right: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
@media only screen and (max-width: 767px) {
	.cicm-intro { padding: 3rem; }
	.cicm-logo-box { flex-direction: column; padding: 4rem 2rem; }
	.cicm-logo-box img { width: 27.5rem; }
	.mi-color-chip { flex: 1; } /* 스택 뷰에서 칸이 flex 가 되면 빈 칩이 폭 0 으로 사라짐 → 남은 폭 채움 */
	.mi-color-table tbody th { border-right: 0; border-bottom: 0; }
}




/********** sub01 : 기관소개 > 방문안내 > 찾아오시는길 **********/
/* 지도 + 안내 정보 — 카카오맵 지도 퍼가기(landing형이라 폭 반응형, 높이는 360 고정) */
.visit-map { overflow: hidden; border: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-bottom: 0; border-radius: 12px 12px 0 0; }
.visit-map .root_daum_roughmap { width: 100% !important; }
.visit-info { padding: 4rem; background-color: var(--krds-color-light-secondary-5, #eef2f7); border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); border-radius: 0 0 12px 12px; }
.visit-info .head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-bottom: 2.4rem; }
.visit-info .tit { display: flex; align-items: center; gap: 1.2rem; }
.visit-info .tit::before { content: ""; flex-shrink: 0; width: 18px; height: 24px; background: url(/resource/_main/img/content/sub01/visit-pin-eda3c76aed407bf85c82c1b932d8be52.svg) no-repeat center / contain; }
.visit-info .addr-list > li + li { margin-top: 1.2rem; }
.visit-info .addr-list .lb { flex-shrink: 0; width: 10rem; }
/* 지도보기 버튼 (btn-bace1 변형) */
.btn-bace1.btn-map { flex-shrink: 0; gap: .4rem; height: 4rem; line-height: 4rem; padding: 0 1.2rem; border-radius: 6px; }
/* 교통 안내 카드 */
.visit-card { padding: 4rem; background-color: #fff; border: 1px solid var(--krds-color-light-gray-30, #b1b8be); border-radius: 12px; }
/* 카드 내 소제목 (시안 19px) */
.visit-card .way-tit { display: block; font-weight: 700; font-size: 1.9rem; line-height: 1.5; color: var(--krds-color-light-gray-90, #1e2124); }
/* 연계버스 시간표 버튼 — 시안 secondary(테두리형) */
.btn-bus { display: inline-flex; align-items: center; gap: .4rem; height: 4.8rem; padding: 0 1.6rem; background-color: var(--krds-color-light-primary-5, #ecf2fe); border: 1px solid var(--krds-color-light-primary-50, #256ef4); border-radius: 6px; font-size: 1.7rem; color: var(--krds-color-light-primary-60, #0b50d0); transition: all .3s; }
.btn-bus:hover { background-color: var(--krds-color-light-primary-50, #256ef4); color: #fff; }
.btn-bus .bi { font-size: 2rem; }

@media only screen and (max-width: 767px) {
	.visit-info { padding: 3rem; }
	.visit-info .addr-list .lb { width: 5.4rem; }
	.visit-card { padding: 3rem; }
}

/********** sub01 : 기관소개 > 전국중수청찾기 **********/

/* 기관 연락 카드 2열 (주소 15px·전화 17px — 시안) */
/* 2026-09-17 시안 개편(2274-51276) — 좌측 관할 지도 + 우측 기관 카드 1열 */
.office-finder { display: flex; align-items: stretch; gap: 2rem; }
.finder-map { display: flex; align-items: center; justify-content: center; flex: 1 0 34rem; min-width: 0; padding: 4rem 2rem; background-color: var(--krds-color-light-secondary-5, #eef2f7); border-radius: 12px; }
.finder-map img { width: 100%; max-width: 44.7rem; height: auto; }
.office-list { display: flex; flex-direction: column; flex: 0 1 45.6rem; min-width: 28rem; gap: 2rem; } /* 좁은 화면에서 지도 대신 카드 열이 먼저 줄어들도록 */
.office-card { display: grid; grid-template-columns: 1fr auto; column-gap: 2rem; padding: 2rem; border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); border-radius: 12px; background-color: #fff; }
.office-card .name, .office-card .info { grid-column: 1; }
.office-card .btns { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.office-card .name { display: block; margin-bottom: 1rem; font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--krds-color-light-gray-95, #131416); }
.office-card .info > li { display: flex; align-items: center; gap: .8rem; line-height: 1.5; color: var(--krds-color-light-gray-70, #464c53); }
.office-card .info > li + li { margin-top: .4rem; }
.office-card .info .bi { flex-shrink: 0; font-size: 1.6rem; }
.office-card .info .addr { font-size: 13px; }
.office-card .info .tel { font-size: 13px; }
.office-card .btns { display: flex; flex-direction: column; align-items: stretch; gap: .8rem; flex-shrink: 0; }
.btn-office { display: inline-flex; align-items: center; justify-content: center; gap: .2rem; height: 3.2rem; padding: 0 1rem; border: 1px solid var(--krds-color-light-gray-60, #58616a); border-radius: 4px; font-size: 13px; color: var(--krds-color-light-gray-90, #1e2124); transition: all .3s; }
.btn-office:hover { background-color: var(--gray-f5); }
.btn-office .bi { font-size: 1.6rem; }

@media only screen and (max-width: 767px) {
	.office-finder { flex-direction: column; }
	.finder-map { padding: 2.4rem 1.6rem; }
	.office-list { width: 100%; gap: 1.2rem; }
	.office-card { grid-template-columns: 1fr; }
	.office-card .btns { grid-column: 1; grid-row: auto; flex-direction: row; margin-top: 1.2rem; }
	.office-card .btns .btn-office { flex: 1; }
	.office-card .info > li.addr { align-items: flex-start; }
	.office-card .info .addr .bi { margin-top: .2rem; }
}

/********** sub00 : 시스템 > 404·오류(단절) **********/

/* 일러스트·버튼 크기 (시안 230px / 모바일 154px, 버튼 h56·r8·19px) */
.error .error-img img { width: 23rem; height: auto; }
.error .btn-bace2.error-btn { height: 5.6rem; line-height: 5.6rem; padding: 0 2rem; font-size: 1.9rem; border-radius: 8px; }
.error .error-btn.line { border: 1px solid var(--krds-color-light-gray-60, #58616a); }

@media only screen and (max-width: 767px) {
	.error .error-img img { width: 15.4rem; }
	.error .btn-ce { width: 100%; }
	.error .btn-ce .error-btn { flex: 1; min-width: 0; padding: 0 1rem; }
}

/********** sub00 : 시스템 점검 - 점검 시간 배지 **********/
/* 줄바꿈 허용 배지 (btn-bace2 는 높이 고정) */
.badge-st1 { display: inline-flex; align-items: center; justify-content: center; min-height: 5rem; padding: 1.6rem 3rem; background-color: #063a74; font-weight: 700; font-size: 1.7rem; line-height: 1.5; color: var(--krds-color-light-gray-5, #f4f5f6); text-align: center; }
@media only screen and (max-width: 767px) {
    .badge-st1 { padding: 1.2rem 2rem; font-size: 16px; }
}


/********** sub00 : 통합검색 **********/
/* 검색 입력 밴드 — .inner 바깥에 배치(풀블리드) */
.tsch-band { padding: 4rem 0; background-color: var(--krds-color-light-gray-5, #f4f5f6); }
.tsch-band .tsch-box { display: flex; align-items: center; max-width: 79.2rem; height: 6rem; margin: 0 auto; background-color: #fff; border: 1px solid var(--gray-cc); border-radius: 0.8rem; overflow: hidden; }
.tsch-band .tsch-inp { flex: 1; min-width: 0; height: 100%; padding: 0 2rem; font-size: 1.8rem; border: 0; }
.tsch-band .btn-sch { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 6rem; height: 100%; background-color: var(--primary800); }
.tsch-band .btn-sch .svg-icon { width: 2.4rem; height: 2.4rem; background-color: #fff; }
/* overflow:hidden 박스 내부라 포커스 링이 잘려서 안쪽 표시로 전환 (KRDS inset 패턴) */
.tsch-band .tsch-inp:focus,
.tsch-band .btn-sch:focus { outline-offset: -0.4rem; box-shadow: var(--krds-box-shadow-outline-inset); }
.tsch-band .tsch-opts { justify-content: center; margin-top: 1.5rem; }

/* 결과 페이지네이션 — 생략(…) 표기 */
.pagination .page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; color: var(--krds-color-light-gray-50, #6d7882); }

/* 좌 필터 + 우 결과 2단 */
.tsch-layout { display: flex; align-items: flex-start; gap: 5rem; padding-top: 5rem; }
.tsch-filter { flex-shrink: 0; position: sticky; top: 60px;width: 25rem; }
.tsch-filter .filter-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 2rem; text-align: left; border-bottom: 1px solid var(--gray-e5); }
.tsch-filter .filter-head .bi { display: none; font-size: 1.8rem; }
.tsch-rank .rank-list.hide-tab { display: none; }
@media only screen and (min-width: 1024px) {
    .tsch-filter .filter-body { display: block !important; }
}
.tsch-filter .filter-group { border-bottom: 1px solid var(--gray-e5); }
.tsch-filter .group-tit { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 2rem 0; font-weight: 700; font-size: 1.7rem; color: var(--primary700); }
.tsch-filter .group-body { padding-bottom: 2rem; }
.tsch-filter .krds-check-area { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.tsch-filter .chip-group { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
.tsch-filter .krds-form-chip .krds-form-chip-outline { padding: 0 1.2rem !important; font-size: 15px !important; }
/* 선택 시 KRDS 체크 아이콘이 붙어 칩 폭이 튐 — 시안은 텍스트만이라 숨김 */
.tsch-filter .krds-form-chip input[type="radio"] ~ .krds-form-chip-outline::before,
.tsch-filter .krds-form-chip input[type="radio"]:checked ~ .krds-form-chip-outline::before { content: none !important; display: none !important; width: 0 !important; margin: 0 !important; }
/* .tsch-filter .date-cols { display: flex; align-items: flex-end; gap: 1rem; } */
.tsch-filter .date-cols .col { flex: 1; min-width: 0; }
.tsch-filter .date-cols .dash { padding-bottom: 1rem; color: var(--gray-55); }
.tsch-filter .date-cols .inp-st2 { width: 100%; min-width: 0; padding: 0 3.5rem 0 1rem; font-size: 15px; }
.tsch-filter .date-cols .calendar-conts { margin-top: 0.5rem; }
/* 달력 레이어가 필터보다 넓어 왼쪽 기준 */
.tsch-filter .krds-calendar-area .calendar-wrap { left: 0; transform: none; }

.tsch-result { flex: 1; min-width: 0; }
/* 적용된 고급검색 조건 */
.tsch-cond { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2.5rem; background-color: var(--krds-color-light-secondary-5, #eef2f7); border-radius: 1.2rem; }
.tsch-cond .btn-reset { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; color: var(--gray-55); background-color: #fff; border: 1px solid var(--gray-cc); border-radius: 50%; }
.tsch-cond .cond-list { display: flex; flex-wrap: wrap; gap: 1rem; }
.tsch-cond .cond-list button { display: flex; align-items: center; gap: 1rem; padding: 5px 15px; font-size: 15px; background-color: #fff; border: 1px solid var(--gray-cc); border-radius: 100px; }
.tsch-cond .cond-list button .bi { font-size: 12px; color: var(--gray-55); }
/* 결과 요약 */
.tsch-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; }
.tsch-head .lf-flex { display: flex; align-items: center; gap: 2rem; }
.tsch-head .rg-flex { display: flex; align-items: center; gap: 1rem; }
.tsch-head .bd-lf { padding-left: 1.5rem; border-left: 1px solid var(--gray-e5); }
.tsch-head .sort-btns { display: flex; align-items: center; gap: 0.5rem; }
/* 결과 섹션 */
.tsch-result .sec-tit { display: block; padding-bottom: 1.5rem; border-bottom: 2px solid var(--gray-17); }
.tsch-list > li { display: flex; align-items: flex-start; justify-content: space-between; gap: 4rem; padding: 3rem 0; border-bottom: 1px solid var(--gray-e5); }
.tsch-list .txt-wrap { flex: 1; min-width: 0; }
.tsch-list .tit { display: block; }
.tsch-list .tit:hover { text-decoration: underline; text-underline-offset: 0.4rem; }
.tsch-list .keyword { font-weight: 700; color: var(--primary500); background-color: var(--primary100); }
.tsch-list .path .bi { margin: 0 0.5rem; font-size: 12px; }
.tsch-list .img-wrap { flex-shrink: 0; width: 15rem; height: 9.4rem; overflow: hidden; }
.tsch-list .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
@media only screen and (max-width: 1023px) {
    .tsch-layout { flex-direction: column; gap: 3rem; padding-top: 3rem; }
    .tsch-filter { width: 100%; }
    .tsch-filter .krds-check-area { flex-direction: row; flex-wrap: wrap; gap: 1rem 2rem; }
    /* .tsch-filter .date-cols { max-width: 40rem; } */
    .tsch-filter .filter-head .bi { display: block; }
    /* 초기 접힘 — 여닫기는 JS 인라인 스타일 우선 */
    .tsch-filter .filter-body { display: none; }
}
@media only screen and (max-width: 767px) {
    .tsch-band { padding: 2.5rem 0; }
    .tsch-band .tsch-box { height: 5.2rem; }
    .tsch-band .tsch-inp { padding: 0 1.4rem; font-size: 16px; }
    .tsch-band .btn-sch { width: 5rem; }
    /* 필터 아코디언 바 — 시안: 회색 바 */
    .tsch-layout { padding-top: 2rem; }
    .tsch-filter .filter-head { padding: 1.4rem 1.6rem; background-color: var(--krds-color-light-gray-5, #f4f5f6); border-bottom: 0; border-radius: .8rem; }
    .tsch-cond { flex-wrap: wrap; padding: 1.5rem; }
    /* 결과 아이템 — 시안 순서: 배지·제목·요약 → 썸네일 → 경로 */
    .tsch-list > li { flex-direction: column; gap: 1.2rem; }
    .tsch-list .txt-wrap { display: contents; }
    .tsch-list .img-wrap { order: 4; width: 100%; height: auto; aspect-ratio: 16 / 10; }
    .tsch-list .path { order: 5; }
    /* 페이지네이션 — 시안: 이전·다음 윗줄, 숫자 아랫줄 */
    .tsch-result .pagination { flex-wrap: wrap; row-gap: 1.6rem; }
    .tsch-result .pagination .page-navi { order: -1; }
    .tsch-result .pagination::after { content: ""; order: -1; flex-basis: 100%; height: 0; }
}

/* 인기·최근 검색어 */
.tsch-rank .rank-tabs { display: flex; gap: 0.5rem; }
.tsch-rank .rank-tabs button { flex: 1; height: 3.4rem; font-size: 15px; color: var(--gray-55); border: 1px solid var(--gray-cc); border-radius: 0.6rem; }
.tsch-rank .rank-tabs button.on { font-weight: 700; color: #fff; background-color: var(--primary500); border-color: var(--primary500); }
.tsch-rank .rank-list li { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; }
.tsch-rank .rank-list .num { flex-shrink: 0; width: 2rem; font-weight: 700; text-align: center;}
.tsch-rank .rank-list .word { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tsch-rank .rank-list .word:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
.tsch-rank .rank-list .diff { flex-shrink: 0; display: flex; align-items: center; gap: 0.2rem; font-size: 13px; color: var(--gray-75); }
.tsch-rank .rank-list .diff .bi { font-size: 11px; }
.tsch-rank .rank-list .diff.up { color: var(--red600); }
.tsch-rank .rank-list .diff.down { color: var(--blue600); }
.tsch-recent { padding-top: 2.5rem; border-top: 1px solid var(--gray-e5); }
.tsch-recent .recent-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tsch-recent .recent-list li + li {margin-top: 10px;}
.tsch-recent .btn-del { display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; font-size: 12px; color: var(--gray-55); border: 1px solid var(--gray-cc); border-radius: 50%; }
.tsch-recent > button {color: var(--cate8); background-color: var(--cate8-light);}

/* 결과 더보기·다운로드 */
.tsch-result .sec-more { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.tsch-list .path { display: flex; align-items: center; flex-wrap: wrap; }
.tsch-list .path .down-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; color: var(--gray-33); }
@media only screen and (max-width: 1023px) {
    .tsch-recent .recent-list { display: flex; flex-wrap: wrap; gap: 1rem; }
    .tsch-recent .recent-list li { justify-content: flex-start; padding: 0 1rem 0 1.5rem; height: 3.6rem; border: 1px solid var(--gray-cc); border-radius: 100px; }
	.tsch-recent .recent-list li + li {margin: 0;}
    .tsch-recent .btn-del { border: 0; }
}


/********** sub00 : 이용안내 **********/
/* 인트로 — 좌 최적 환경 문구(PC)·디바이스 안내 문장(MO) + 우 목업 일러스트 (대검 cmdBox 대응) */
.guide-intro { display: flex; align-items: center; justify-content: center; gap: 6rem; padding: 4rem 3rem; background-color: var(--krds-color-light-secondary-5, #eef2f7); border-radius: 12px; } /* 대검 cmdBox(#e7edf1 박스) 대응 — 색은 사이트 박스 토큰 */
.guide-intro .tit-env { display: block; font-weight: 700; font-size: 2.6rem; line-height: 1.4; color: var(--gray-17); }
.guide-intro .desc-env { margin-top: 2rem; font-size: 1.7rem; line-height: 1.7; color: var(--gray-66); }
.guide-intro img { width: 52rem; max-width: 55%; height: auto; }
@media only screen and (max-width: 767px) {
    .guide-intro { flex-direction: column; gap: 2rem; padding: 2.4rem 1.6rem; }
    .guide-intro img { width: 100%; max-width: 40rem; }
    /* PC 전용 문구 숨김 — 전역 .pc.pc-w-767 규칙과 특이도 동률이라 여기서 명시한다 */
    .guide-intro .tit-env, .guide-intro .desc-env { display: none; }
}
/* 메뉴안내 — 원형 아이콘(80px, 대검 icoDeco 대응) + 제목·설명 */
.guide-menu > li { display: flex; align-items: center; gap: 2rem; }
.guide-menu > li + li { margin-top: 2.4rem; }
.guide-menu strong { display: block; }
.guide-menu .ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; background-color: #d9e9f0; border-radius: 50%; overflow: hidden; }
.guide-menu .ico img { width: 100%; height: 100%; }
.guide-menu .ico img.ci { width: 55%; height: auto; } /* 기관소개 — 중수청 CI 심볼(대검 원본은 자기 CI 아이콘이라 대체) */
@media only screen and (max-width: 767px) {
    .guide-menu > li { align-items: flex-start; }
    .guide-menu .ico { width: 6rem; height: 6rem; }
}


/********** sub00 : 개인정보처리방침 **********/
/* 라벨링 — 대검 원문과 동일한 표(thead 제목 + 4열×2행, td 가운데 아이콘 50px + 라벨), title 툴팁 안내
   ※ 전역 .tbl-board 모바일 스택 규칙(.tbl-board tbody td …)을 이기려면 .tbl-board 를 붙여 특이도를 맞춘다 */
.tbl-board.privacy-label-tbl tbody td { padding: 1.7rem 1.5rem 1.6rem; text-align: center; vertical-align: middle; }
.tbl-board.privacy-label-tbl tbody td img { width: 50px; height: 50px; margin: 5px; cursor: help; }
/* 목차 표 — 2열 항목 목록 */
.privacy-toc td { vertical-align: top; }
.privacy-toc .list-st1 li + li { margin-top: 0.8rem; }
/* 조문 본문 — 서술 문단은 톤 다운, 항 번호(①…) 목록은 행잉 인덴트로 구분 */
.privacy-article { color: var(--gray-17); }
.privacy-article > p { color: var(--gray-66); }
.privacy-num-list li { padding-left: 2.4rem; text-indent: -2.4rem; line-height: 1.6; }
.privacy-num-list li + li { margin-top: 0.6rem; }
.privacy-num-list + .list-st1 { margin-left: 2.4rem; }
/* 제4조 권리행사 절차 도식 */
.privacy-process { padding-left: 2.5rem; }
.privacy-process img { display: block; width: 100%; max-width: 75rem; height: auto; }
@media only screen and (max-width: 767px) {
    /* 좁은 화면: 라벨링 4열 표 → 2열 그리드 재배치 (thead 제목·셀 내용은 그대로, 전역 스택 규칙 오버라이드) */
    .tbl-board.privacy-label-tbl { border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
    .tbl-board.privacy-label-tbl table,
    .tbl-board.privacy-label-tbl thead,
    .tbl-board.privacy-label-tbl thead tr,
    .tbl-board.privacy-label-tbl thead th,
    .tbl-board.privacy-label-tbl tbody { display: block; width: 100%; }
    .tbl-board.privacy-label-tbl tbody tr { display: grid; grid-template-columns: 1fr 1fr; padding: 0; border-bottom: 0; }
    .tbl-board.privacy-label-tbl tbody tr:first-child { border-top: 0; }
    .tbl-board.privacy-label-tbl tbody td { display: block; height: auto; padding: 1.2rem .8rem; border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); text-align: center; }
    /* 2열 재배치 시 각 행 오른쪽 끝(짝수 셀)에 tbl-line 세로선이 남음 → 제거 (:not(:last-child) 특이도를 이겨야 함) */
    .tbl-board.tbl-line.privacy-label-tbl tbody td:nth-child(even) { border-right: 0; }
    /* 목차 표: 2열 → 세로 스택 (thead 제목 유지) */
    .tbl-board.privacy-toc { border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
    .tbl-board.privacy-toc table,
    .tbl-board.privacy-toc colgroup,
    .tbl-board.privacy-toc thead,
    .tbl-board.privacy-toc thead tr,
    .tbl-board.privacy-toc thead th,
    .tbl-board.privacy-toc tbody,
    .tbl-board.privacy-toc tbody tr,
    .tbl-board.privacy-toc tbody td { display: block; width: 100%; }
    .tbl-board.privacy-toc tbody tr { padding: 0; border-bottom: 0; }
    .tbl-board.privacy-toc tbody td { height: auto; padding: 1.2rem .8rem; border-bottom: 0; }
    .tbl-board.tbl-line.privacy-toc tbody td:not(:last-child) { border-right: 0; }
    .tbl-board.privacy-toc tbody td + td { padding-top: 0; }
    .privacy-process { padding-left: 0; }
}


/********** sub02 : 민원안내 > 민원사무 안내 **********/

/* 사진 변형 — 온라인 민원신청 화면 (guide-banner-st1 공용) */
.guide-banner-st1.banner-civil::before { top: -54px; right: -30px; width: 409px; height: 230px; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 38.8%), url(/resource/_main/img/content/sub02/civil-banner-4cf5b30a69791af9bcc9a0a67d96c3ea.png) no-repeat center / cover; }

/* 민원 종류 — 소제목 + 불릿 목록 묶음 */
.civil-kind { padding: 16px 24px; }
.civil-kind + .civil-kind { padding-top: 0; }
.civil-form-wrap { padding: 12px 0 0 15px; }
/* 문장 중간에 버튼이 끼어든다 */
.civil-form-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* 2단 카드 아이콘 — sub05 정보공개제도안내와 그림이 달라 크기만 따로 잡는다 */
.info-guide-cards.civil-cards .card { display: flex; flex-direction: column; height: auto; min-height: 240px; }
.info-guide-cards.civil-cards .card .txt-rg { margin-top: auto; padding-top: 8px; }
.info-guide-cards.civil-cards .card .ico { position: static; }
.info-guide-cards.civil-cards .card-info .ico { width: 63px; }
.info-guide-cards.civil-cards .card-disclosure .ico { width: 51px; }

/* 유의사항 — 테두리 없이 배경만 (bg-box-st1 의 기본 회색을 시안 색으로) */
.civil-notice { background-color: var(--krds-color-light-secondary-5, #eef2f7); }
.civil-notice .notice-tit { display: flex; align-items: center; gap: 8px; }
.civil-notice .notice-tit .ico { width: 24px; height: 24px; }
.civil-notice .basis { display: flex; align-items: center; gap: 8px; color: var(--primary900); }
.civil-notice .divide { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }

@media only screen and (max-width: 767px) {
	.guide-banner-st1.banner-civil::before { top: -48px; right: 0; width: 100%; height: 237px; background: linear-gradient(to top, #fff 4%, rgba(255, 255, 255, 0) 83%), url(/resource/_main/img/content/sub02/civil-banner-4cf5b30a69791af9bcc9a0a67d96c3ea.png) no-repeat center / cover; }
	.civil-kind { padding: 16px 0; }
	.civil-form-wrap { padding-left: 0; }
}


/********** sub02 : 민원안내 > 민원안내 > 민원절차·서식 안내 **********/

/* 처리절차 스텝 (시안 2281-53202 — KRDS step indicator 변형: 전 단계 동일 강조 + 설명 텍스트) */
.process-step { padding: 3rem; background-color: var(--krds-color-light-secondary-5, #eef2f7); border-radius: 12px; }
.process-step ol { display: flex; }
.process-step li { position: relative; flex: 1; min-width: 0; padding-right: 2.4rem; }
.process-step li:last-child { padding-right: 0; }
.process-step .step { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background-color: #1858ad; border-radius: 50%; font-style: normal; font-size: 13px; color: #fff; }
.process-step li::before { content: ""; position: absolute; top: 1rem; left: 2.4rem; right: .4rem; height: 1px; background-color: var(--krds-color-light-gray-30, #b1b8be); }
.process-step li:last-child::before { content: none; }
.process-step .step-tit { display: block; margin-top: .8rem; font-weight: 700; font-size: 15px; color: #0b3067; }
.process-step .step-desc { margin-top: .2rem; font-size: 13px; line-height: 1.5; color: var(--krds-color-light-gray-70, #464c53); }

/* 문의 + 서식 다운로드 박스 */
.form-info { display: flex; align-items: stretch; gap: 2rem; padding: 1.6rem 2.4rem; }
.form-info .info-box { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; padding: 1.6rem; border-radius: 8px; }
.form-info .info-box.is-call { background-color: var(--krds-color-light-secondary-5, #eef2f7); }
.form-info .info-box.is-file { background-color: #fff; border: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
.form-info .ico { width: 3.2rem; }
.form-info .tit { font-weight: 700; font-size: 17px; color: var(--krds-color-light-gray-95, #131416); }
.form-info .tit.fw-400 { font-weight: 400; }
.form-info .val { margin-left: auto; font-size: 1.7rem; color: var(--krds-color-light-gray-95, #131416); }
.form-info .btn-down { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; height: 3.2rem; padding: 0 .2rem; font-size: 1.7rem; color: var(--krds-color-light-gray-90, #1e2124); }
.form-info .btn-down:hover { text-decoration: underline; }
.form-info .btn-down .bi { font-size: 2rem; }

@media only screen and (max-width: 767px) {
	.process-step { padding: 2.4rem 2rem; }
	.process-step ol { flex-direction: column; gap: 1.8rem; }
	.process-step li { padding-right: 0; }
	.process-step li::before { content: none; }
	.process-step .step { position: absolute; top: 0; left: 0; }
	.process-step .step-tit { margin: 0 0 0 3rem; line-height: 2rem; }
	.process-step .step-desc { margin-top: .6rem; }
	.form-info { flex-direction: column; gap: 1.2rem; padding: 0; }
}

/********** sub02 : 민원안내 > 민원안내 > 중수청 수사범위 **********/

/* 수사 대상 범죄 리스트 — officer-list(수사관의 역할) 재사용, 아이콘만 페이지 전용 (시안 2283-54317) */
.scope-list li:nth-child(1) .ico { background-image: url(/resource/_main/img/content/sub02/scope-ico-corp-e559a48ca6f600c1435d6bccf560b678.svg); }
.scope-list li:nth-child(2) .ico { background-image: url(/resource/_main/img/content/sub02/scope-ico-drug-2fa032784c7c8ea4456fece93ceddb50.svg); }
.scope-list li:nth-child(3) .ico { background-image: url(/resource/_main/img/content/sub02/scope-ico-cyber-0fea6bbd88ca1ceb9c2fe8d39d7be26d.svg); }
@media only screen and (max-width: 767px) {
	/* 모바일 시안(2283-54359)은 세로 중앙 카드형 — officer-list 모바일(가로) 규칙 재정의 */
	.scope-list li { flex-direction: column; gap: 1.2rem; padding: 2.4rem 2rem; }
	.scope-list .ico { width: 8rem; height: 8rem; }
	.scope-list p { text-align: center; }
}

/********** sub02 : 민원안내 > 민원안내 > 사건처리절차 **********/

/* 채움형 탭 (tab-st1 변형) — 아래 강조선 대신 좌우 라운드 + 선택 시 배경 채움 */
.tab-btn.tab-st1.tab-fill > li > a { height: 5.6rem; padding: 10px 24px; font-size: 1.9rem; color: var(--gray-17); border: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-left: 0; }
.tab-btn.tab-st1.tab-fill > li:first-child > a { border-left: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-radius: 8px 0 0 8px; }
.tab-btn.tab-st1.tab-fill > li:last-child > a { border-radius: 0 8px 8px 0; }
.tab-btn.tab-st1.tab-fill > li.on > a { color: #fff; border-color: var(--primary500); }

/* 표 위 안내 문구 */
.case-guide { display: flex; align-items: center; gap: 8px; color: var(--krds-color-light-gray-95, #131416); }
.case-guide .ico { width: 18px; height: 18px; }

.table-scroll-wrap { overflow-x: auto; }
.table-scroll-wrap > .tbl-board { min-width: 900px; }
.table-scroll-event { display: none; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; padding: 8px; background-color: var(--gray-f5); border-radius: 6px; font-size: 15px; color: var(--krds-color-light-gray-70, #464c53); }
.table-scroll-event.hidden { display: none !important; }
.table-scroll-wrap::-webkit-scrollbar { height: 8px; }
.table-scroll-wrap::-webkit-scrollbar-track { background-color: var(--gray-fa); border-radius: 4px; }
.table-scroll-wrap::-webkit-scrollbar-thumb { background-color: var(--gray-cc); border-radius: 4px; }
.tbl-board.tbl-case tbody th { padding: 2rem .8rem; border-right: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); color: var(--krds-color-light-gray-70, #464c53); }
.tbl-board.tbl-case tbody td { height: auto; padding: 2rem .8rem 2rem 1.4rem; }
.tbl-board.tbl-case tbody td p + p { margin-top: 4px; }

.case-flow-wrap { position: relative; }
.case-flow { position: relative; width: 564px; margin: 20px auto 0; }
.case-flow .flow-tit { display: flex; align-items: center; justify-content: center; width: 210px; margin: 0 auto; padding: 16px; background-color: var(--krds-color-light-information-5, #e7f4fe); border: 1px solid var(--krds-color-light-primary-10, #d8e5fd); border-radius: 8px; font-weight: 700; font-size: 1.7rem; color: var(--krds-color-light-secondary-80, #052b57); }
.case-flow .flow-line { display: block; }
.case-flow .line-top { width: 488.178px; height: 60.5px; margin: 17px auto 0; }
/* subgrid 로 1단 상자 높이를 7칸이 함께 쓴다 — 빼면 분기가 달린 앞 두 칸만 길어진다 */
.case-flow .flow-step1 { display: grid; grid-template-columns: repeat(6, 66px) 82px; grid-template-rows: auto auto; justify-content: space-between; margin-top: 4px; padding-left: 6px; }
.case-flow .flow-step1 > li { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; grid-template-columns: 100%; justify-items: center; }
.case-flow .flow-box { min-width: 0; width: 100%; padding: 20px 24px; word-break: break-all; background-color: var(--krds-color-light-gray-5, #f4f5f6); border: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-radius: 6px; font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--krds-color-light-gray-95, #131416); text-align: center; }
.case-flow .flow-box.wide { display: flex; gap: 4px; border-radius: 8px; }
.case-flow .flow-box.wide em { flex: 1; min-width: 0; line-height: inherit; }
.case-flow .flow-branch { width: 76px; margin-top: 7px; }
.case-flow .flow-branch .flow-line { width: 52.131px; margin-left: auto; margin-right: auto; }
.case-flow .flow-branch .line-fork { height: 42px; }
.case-flow .flow-branch .line-merge { height: 23.5px; margin-top: 6px; transform: rotateZ(180deg);}
.case-flow .flow-step2 { display: flex; gap: 4px; margin-top: 6px; }
.case-flow .flow-step2 > li { display: flex; flex: 1; min-width: 0; }
.case-flow .flow-box.sm { padding: 20px 10px; }
.case-flow .line-merge2 { position: absolute; left: 431.41px; top: 362.5px; width: 92.254px; height: 23.5px; transform: rotateZ(180deg);}

.flow-drop { position: absolute; left: 50%; width: 564px; pointer-events: none; transform: translateX(-50%);}
.case-flow-wrap > .flow-drop { top: 100%; height: 20px; }
.tbl-case .cell-line { position: relative; }
.tbl-case .cell-line > .flow-drop { top: 0; bottom: 0; }
.tbl-case .cell-line > .flow-drop .ln.stub { bottom: auto; height: 50%; }
.flow-drop .ln { position: absolute; top: 0; bottom: 0; width: 1px; background-color: var(--krds-color-light-gray-30, #b1b8be); }
.flow-drop .ln.head::after { content: ""; position: absolute; left: -4.5px; bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--krds-color-light-gray-50, #6d7882); }
.flow-drop .ln1 { left: 18px; }
.flow-drop .ln2 { left: 58px; }
.flow-drop .ln3 { left: 117px; }
.flow-drop .ln4 { left: 197px; }
.flow-drop .ln5 { left: 277px; }
.flow-drop .ln6 { left: 356px; }
.flow-drop .ln7 { left: 480px; }

.cell-line > .flow-drop .ln1 {left: 21px;}
.cell-line > .flow-drop .ln2 { left: 61px; }
.cell-line > .flow-drop .ln3 { left: 120px; }
.cell-line > .flow-drop .ln4 { left: 200px; }
.cell-line > .flow-drop .ln5 { left: 280px; }
.cell-line > .flow-drop .ln6 { left: 359px; }
.cell-line > .flow-drop .ln7 { left: 483px; }

/* 각 상자 아래에서 선이 시작되도록 첫 토막을 그래프 안쪽까지 끌어올린다 */
.case-flow-wrap > .flow-drop .ln1,
.case-flow-wrap > .flow-drop .ln2 { top: -160px; }
.case-flow-wrap > .flow-drop .ln3 { top: 6px; }
.case-flow-wrap > .flow-drop .ln4,
.case-flow-wrap > .flow-drop .ln5,
.case-flow-wrap > .flow-drop .ln6 { top: -315px; }
.case-flow-wrap > .flow-drop .ln7 { top: -281px; }

/* 형사사건 처리절차 흐름도 — 932x305 고정 캔버스 (모바일은 table-scroll-wrap 으로 좌우 스크롤) */
.crime-flow { position: relative; width: 932px; height: 305px; margin: 25px auto 15px; }
.crime-flow .cf-box { position: absolute; display: flex; align-items: center; justify-content: center; width: 100px; height: 50px; padding: 4px; background-color: var(--krds-color-light-gray-5, #f4f5f6); border: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-radius: 6px; font-weight: 500; font-size: 15px; color: var(--krds-color-light-gray-95, #131416); text-align: center; }
.crime-flow .cf-box.main { background-color: var(--krds-color-light-information-5, #e7f4fe); border-color: var(--krds-color-light-primary-10, #d8e5fd); border-radius: 8px; font-weight: 700; color: var(--krds-color-light-secondary-80, #052b57); }
.crime-flow .p-start { left: 0; top: 48px; }
.crime-flow .p-ipgun { left: 140px; top: 48px; width: 108px; }
.crime-flow .p-arrest { left: 282px; top: 0; }
.crime-flow .p-exam { left: 415px; top: 0; width: 150px; }
.crime-flow .p-detain { left: 598px; top: 0; }
.crime-flow .p-send { left: 648px; top: 78px; }
.crime-flow .p-free { left: 440px; top: 131px; }
.crime-flow .p-close { left: 0; top: 162px; }
.crime-flow .p-nonpros { left: 782px; top: 48px; }
.crime-flow .p-pros { left: 782px; top: 113px; }
.crime-flow .p-trial { left: 782px; top: 217px; }
.crime-flow .p-exec { left: 648px; top: 217px; }
/* 연결선 — 보더 1px 토막. 꺾이는 선은 보더 2면 + 라운드 1귀퉁이짜리 ㄱ자 */
.crime-flow .cf-line { position: absolute; border: 0 solid var(--krds-color-light-gray-30, #b1b8be); }
.crime-flow .l1 { left: 100px; top: 73px; width: 40px; border-top-width: 1px; }
.crime-flow .l2 { left: 50px; top: 98px; height: 64px; border-left-width: 1px; }
.crime-flow .l3 { left: 248px; top: 73px; width: 12px; border-top-width: 1px; }
.crime-flow .l4 { left: 260px; top: 26px; width: 22px; height: 47px; border-top-width: 1px; border-left-width: 1px; border-top-left-radius: 8px; }
.crime-flow .l5 { left: 260px; top: 73px; width: 180px; height: 83px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-left-radius: 8px; }
.crime-flow .l6 { left: 382px; top: 25px; width: 33px; border-top-width: 1px; }
.crime-flow .l7 { left: 565px; top: 25px; width: 33px; border-top-width: 1px; }
.crime-flow .l8 { left: 698px; top: 25px; width: 30px; height: 53px; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 8px; }
.crime-flow .l9 { left: 540px; top: 128px; width: 158px; height: 28px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 8px; }
.crime-flow .l10 { left: 748px; top: 103px; width: 10px; border-top-width: 1px; }
.crime-flow .l11 { left: 758px; top: 73px; width: 24px; height: 30px; border-top-width: 1px; border-left-width: 1px; border-top-left-radius: 8px; }
.crime-flow .l12 { left: 758px; top: 103px; width: 24px; height: 35px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-left-radius: 8px; }
.crime-flow .l13 { left: 832px; top: 163px; height: 54px; border-left-width: 1px; }
.crime-flow .l14 { left: 748px; top: 242px; width: 34px; border-top-width: 1px; }
/* 화살촉 — 기본은 가로선 top 보더 / 세로선 left 보더 기준. 반대편 보더에 붙는 선만 아래에서 보정 */
.crime-flow .cf-line::after { content: ""; position: absolute; }
.crime-flow .arr-r::after { top: -4px; right: -1px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--krds-color-light-gray-50, #6d7882); }
.crime-flow .arr-l::after { top: -4px; left: -1px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 6px solid var(--krds-color-light-gray-50, #6d7882); }
.crime-flow .arr-d::after { left: -4px; bottom: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--krds-color-light-gray-50, #6d7882); }
.crime-flow .arr-u::after { left: -4px; top: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--krds-color-light-gray-50, #6d7882); }
.crime-flow .l5::after, .crime-flow .l12::after { top: auto; bottom: -4px; }
.crime-flow .l8::after, .crime-flow .l9::after { left: auto; right: -4px; }
/* 물음표 부가설명 */
.crime-flow .cf-help { position: absolute; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--krds-color-light-gray-70, #464c53); white-space: nowrap; }
.crime-flow .cf-help .bi { font-size: 15px; color: var(--krds-color-light-danger-60, #bd2c0f); }
.crime-flow .h1 { left: 307px; top: 58px; }
.crime-flow .h2 { left: 719px; top: 172px; }
.crime-flow .h3 { left: 25px; top: 221px; }
.crime-flow .h4 { left: 686px; top: 271px; }
/* 선택 항목 상세 박스 — bg-box-st1 배경만 시안 색으로 (시안은 수사개시 내용만 전달됨) */
.case-info { background-color: var(--krds-color-light-secondary-5, #eef2f7); }
.case-info .info-inner { margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
.case-info .info-sec + .info-sec { margin-top: 30px; }
.case-info .info-sec > .tit { display: block; margin-bottom: 2px; font-weight: 700; font-size: 2.4rem; color: #0b3067; }
.case-info .list-st1 > li { font-size: 15px; color: var(--gray-33); }
.case-info .chk-item { margin-top: 16px; }
.case-info .chk-item .s-tit { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.7rem; color: var(--krds-color-light-gray-95, #131416); }

@media only screen and (max-width: 767px) {
	.table-scroll-event { display: flex; }
	.table-scroll-wrap { overflow-x: scroll; padding-bottom: 4px; }
	.tab-btn.tab-st1.tab-fill > li { flex: 1 1 50%; }
	.tab-btn.tab-st1.tab-fill > li + li > a { border-left: 0 !important; }
	.tab-btn.tab-st1.tab-fill > li > a { height: 4.8rem; padding: 10px 8px; font-size: 15px; }
	.tbl-board.tbl-keep.tbl-case tbody td.txt-lf { text-align: left; }
	.case-info .info-sec > .tit { font-size: 2rem; }
}




/********** sub02 : 민원안내 > 민원안내 > 민원서비스헌장 **********/

/* 사진 변형 — 저울·서명 (guide-banner-st1 공용) */
.guide-banner-st1.banner-charter::before { top: -31px; right: -1px; width: 409px; height: 230px; background: linear-gradient(90deg, #fff 6.3%, rgba(255, 255, 255, 0) 62.9%), url(/resource/_main/img/content/sub02/charter-banner-5ac643986200b0795e8ebb46bfab7ddf.jpg) no-repeat center / cover; }
.guide-banner-st1.banner-charter .lead { max-width: 56rem; }

/* 실천 다짐 — 번호 배지 + 문장 */
/* 하단 안내 박스 (시안 2284-55221 — 실천 다짐 리스트와 같은 들여쓰기) */
.charter-info { margin-left: 34px; padding: 2rem; background-color: var(--krds-color-light-secondary-5, #eef2f7); border-radius: 12px; }
.charter-info p + p { margin-top: .2rem; }

.charter-list { display: flex; flex-direction: column; gap: 20px; padding-left: 34px; }
.charter-list > li { display: flex; align-items: center; gap: 16px; }
.charter-list .num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 44px; background-color: rgba(88, 118, 163, .75); border-radius: 6px; font-weight: 700; font-size: 2rem; color: #fff; }

@media only screen and (max-width: 767px) {
	/* 데스크탑 규칙이 특이도로 이겨서 위치·크기도 함께 재선언한다 */
	.guide-banner-st1.banner-charter::before { top: -48px; right: 0; width: 100%; height: 237px; background-image: linear-gradient(to top, #fff 4%, rgba(255, 255, 255, 0) 83%), url(/resource/_main/img/content/sub02/charter-banner-5ac643986200b0795e8ebb46bfab7ddf.jpg); }
	.charter-list { gap: 12px; padding-left: 0; }
	.charter-info { margin-left: 0; }
	.charter-list > li { align-items: flex-start; gap: 12px; }
	.charter-list .num { width: 44px; height: 38px; font-size: 1.7rem; }
}


/********** sub02 : 민원안내 > 일반민원 신청·확인 **********/

/* 국민신문고 안내 배너 */
.apply-banner { position: relative; padding: 40px; border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); }
.apply-banner::before { content: ""; position: absolute; top: 43px; right: 77px; width: 86px; height: 80px; background: url(/resource/_main/img/content/sub02/apply-banner-faac3acde9a1e96cbf8c3dfbbee195ca.svg) no-repeat center / contain; }
.apply-banner .link { text-decoration: underline; color: var(--krds-color-light-primary-60, #0b50d0); }

/* 신청·확인 버튼 — KRDS 버튼의 파랑 채움만 브랜드 네이비로 */
.apply-btns .krds-btn { min-width: 140px; }
.apply-btns .krds-btn.primary { background-color: var(--primary500); border-color: var(--primary500); }
.apply-btns .krds-btn.primary:hover { background-color: var(--primary600); }

/* 스텝 — 리셋의 rotate 트랜스폼이 스택 컨텍스트를 만들어 연결선(li::after)이 점 위로 올라오므로 span 을 한 층 올린다 */
.certify-wrap .krds-step-wrap > li > span { z-index: 1; }

/* 본인 인증 카드 */
.certify-wrap { padding: 40px; border: 1px solid var(--krds-color-light-gray-30, #b1b8be); }
.certify-tit { display: block; font-weight: 700; font-size: 1.9rem; color: var(--krds-color-light-gray-95, #131416); }
.certify-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.certify-btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 26px; background-color: var(--krds-color-light-gray-5, #f4f5f6); border-radius: 8px; font-weight: 700; font-size: 1.9rem; color: var(--krds-color-light-gray-90, #1e2124); text-align: left; }
.certify-btn:hover { background-color: var(--krds-color-light-gray-10, #e6e8ea); }
.certify-btn .ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.certify-btn .ico img { max-width: 100%; max-height: 100%; }
.certify-btn .bi { margin-left: auto; font-size: 2.4rem; color: var(--krds-color-light-gray-70, #464c53); }

@media only screen and (max-width: 767px) {
	.apply-banner { padding: 24px; }
	.apply-banner::before { display: none; }
	/* KRDS 가 767 이하에서 단계 글자를 sr-only 처리하는 것을 시안대로 되살린다 (KRDS !important 대응) */
	.certify-wrap .krds-step-wrap > li .step,
	.certify-wrap .krds-step-wrap > li .step-tit { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; }
	.certify-wrap .krds-step-wrap > li:last-child { flex: 1 1 0; }
	.certify-wrap { padding: 24px 20px; }
	.certify-list { grid-template-columns: 1fr; gap: 12px; }
	.certify-btn { padding: 20px;}
}


/********** sub02 : 민원안내 > 적극행정 > 적극행정제도 소개 **********/

/* 근거 인용 박스 (bg-box-st1 변형 — 시안 배경·보더·본문색) */
.active-basis { padding: 20px; background-color: var(--krds-color-light-secondary-5, #eef2f7); border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); color: var(--krds-color-light-gray-95, #131416); }
/* 라벨 배지 — 인라인 유지가 필요해 txt-* 유틸(display:block) 대신 폰트를 여기서 지정 */
.active-basis .basis-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; background-color: #fff; border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); font-size: 13px; color: var(--krds-color-light-gray-70, #464c53); }


/********** sub03 : 법령정보 > 입법·행정예고 > 안내 배너 (sub05 정보공개안내와 공용) **********/
.guide-banner-st1 { position: relative; overflow: hidden; padding: 32px 40px 30px; border: 1px solid rgba(88, 118, 163, .75); }
/* 장식 사진 — 오른쪽 배치 + 왼쪽 흰색 그라데이션으로 본문 가독성 확보 */
.guide-banner-st1::before { content: ""; position: absolute; top: -46px; right: -42px; width: 510px; height: 340px; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(/resource/_main/img/content/sub03/notice-banner-579a8905904fd45e4c549c5d3a4ff511.png) no-repeat center / cover; }
/* 사진 변형 — 훈령 등 규정류 */
.guide-banner-st1.banner-rule::before { background-image: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(/resource/_main/img/content/sub03/rule-banner-af912f0ad8d5a99281d3279db3607e84.jpg); }
/* 사진 변형 — sub05 정보공개제도안내 */
.guide-banner-st1.banner-info::before { background-image: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(/resource/_main/img/content/sub05/info-banner-6772fe002bee930852f2b034200289b8.png); }
/* 사진 없이 아이콘만 — sub05 비공개 대상 정보 세부 기준 (패딩은 기본값 사용) */
.guide-banner-st1.banner-doc::before { top: 50%; right: 40px; width: 82px; height: 81px; margin-top: -40px; background: url(/resource/_main/img/content/sub05/info-banner-doc-ae8b9cb04cd440baa60ee1869ed66d2b.svg) no-repeat center / contain; }
.guide-banner-st1.banner-doc .lead { max-width: 52rem; }
/* 아이콘 변형 — sub05 공공데이터개방 (아이콘·본문 폭만 교체) */
.guide-banner-st1.banner-doc.banner-data::before { width: 87px; height: 74px; margin-top: -37px; background-image: url(/resource/_main/img/content/sub05/opendata-banner-c5a213096dd2719a436ba47a4a38b2ce.svg); }
.guide-banner-st1.banner-doc.banner-data .lead { max-width: 68rem; }
/* position:relative — 배경 사진(::before) 위로 본문을 올린다 */
.guide-banner-st1 .txt-wrap { position: relative; }
.guide-banner-st1 .tit { line-height: 1.5; color: var(--krds-color-light-gray-95, #131416); }
.guide-banner-st1 .lead { max-width: 46rem; line-height: 1.5; letter-spacing: -.25px; color: var(--krds-color-light-gray-95, #131416); }
.guide-banner-st1 .lead strong { font-weight: 700; color: var(--primary800); }
.guide-banner-st1 .desc { line-height: 1.5; letter-spacing: -.25px; color: var(--krds-color-light-gray-50, #6d7882); }
.guide-banner-st1 .desc a { color: var(--krds-color-light-information-60, #096ab3); text-decoration: underline; }
@media only screen and (max-width: 767px) {
    /* 사진을 위쪽으로 — 아래 방향 흰색 그라데이션 (시안) */
    .guide-banner-st1 { padding: 120px 30px 30px; }
    .guide-banner-st1::before { top: -48px; right: 0; width: 100%; height: 237px; background: linear-gradient(to top, #fff 4%, rgba(255, 255, 255, 0) 83%), url(/resource/_main/img/content/sub03/notice-banner-579a8905904fd45e4c549c5d3a4ff511.png) no-repeat center / cover; }
    .guide-banner-st1.banner-rule::before { background-image: linear-gradient(to top, #fff 4%, rgba(255, 255, 255, 0) 83%), url(/resource/_main/img/content/sub03/rule-banner-af912f0ad8d5a99281d3279db3607e84.jpg); }
    .guide-banner-st1.banner-info::before { background-image: linear-gradient(to top, #fff 4%, rgba(255, 255, 255, 0) 83%), url(/resource/_main/img/content/sub05/info-banner-6772fe002bee930852f2b034200289b8.png); }
    .guide-banner-st1 .lead { max-width: none; }
    /* 아이콘형 — 사진 배너와 달리 아이콘을 우측 하단에 둔다 */
    .guide-banner-st1.banner-doc { padding: 30px 24px 50px; }
    .guide-banner-st1.banner-doc::before { top: auto; right: 17px; bottom: 15px; width: 72px; height: 71px; margin-top: 0; }
    .guide-banner-st1.banner-doc.banner-data { padding: 24px 24px 85px; }
    .guide-banner-st1.banner-doc.banner-data::before { right: 24px; bottom: 21px; width: 70px; height: 60px; margin-top: 0; }
}

/********** sub05 : 정보공개 > 정보공개안내 **********/

/* 정보공개제도안내 — 정보/공개 2단 카드 */
.info-guide-cards { display: flex; gap: 20px; }
.info-guide-cards .card { position: relative; overflow: hidden; flex: 1 0 0; height: 240px; padding: 30px; }
.info-guide-cards .card-info { background-color: #eef8f8; }
.info-guide-cards .card-disclosure { background-color: #e8f5ff; }
.info-guide-cards .card strong { display: block; margin-bottom: 16px; line-height: 1.5; color: var(--krds-color-light-gray-95, #131416); }
.info-guide-cards .card p { line-height: 1.5; color: var(--krds-color-light-gray-95, #131416); }
.info-guide-cards .card .ico { position: absolute; right: 23px; bottom: 23px; width: 64px; }
.info-guide-cards .card-disclosure .ico { right: 25px; bottom: 20px; width: 74px; }
.tbl-board.tbl-info tbody td:first-child { font-weight: 700; color: var(--krds-color-light-gray-95, #131416); }

/* 비공개 대상 정보 세부 기준 — 배너 다운로드 버튼 (btn-bace1 변형) */
.btn-bace1.btn-dl { gap: 8px; height: 42px; line-height: 42px; padding: 0 20px; }
.btn-bace1.btn-dl:hover { gap: 8px; }
.btn-bace1.btn-dl .bi { font-size: 1.8rem; }

/* 서식 안내 — 첨부 열 모바일 라벨 */
@media only screen and (max-width: 767px) {
	/* 첨부 열이 한글문서·PDF문서 2종이라 라벨을 th 값(data-content)으로 되돌린다 */
	.tbl-board.tbl-form tbody td.file::before { content: attr(data-content); }
}

/* 정보공개청구 — 청구 안내 박스 */
.req-box { padding: 40px; background-color: #eef2f7; border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); }
.req-intro { display: flex; align-items: center; gap: 24px; }
.req-intro .txt-15 { flex: 1; min-width: 0; line-height: 1.5; color: var(--gray-33); }
.req-intro .req-logo { flex-shrink: 0; width: 165px; padding: 9px 14px 10px; background-color: #fff; border: 1px solid var(--krds-color-light-secondary-10, #d6e0eb); }
.req-portal { text-align: center; }
.req-portal .btn-portal { gap: 4px; min-width: 192px; height: 40px; line-height: 40px; padding: 0 12px; }
.req-portal .btn-portal .bi { font-size: 1.6rem; }
.req-forms { display: flex; gap: 16px; max-width: 72rem; margin-left: auto; margin-right: auto; }
.req-forms .form-card { flex: 1; min-width: 0; padding: 20px; background-color: #fff; text-align: center; }
.req-forms .form-card > strong { display: block; line-height: 1.5; color: var(--krds-color-light-gray-70, #464c53); }
/* 카드 다운로드 버튼 — 선형(secondary) */
.btn-dl-line { display: flex; align-items: center; justify-content: center; gap: 2px; height: 32px; background-color: var(--krds-color-light-primary-5, #ecf2fe); border: 1px solid var(--krds-color-light-primary-50, #256ef4); font-size: 15px; color: var(--krds-color-light-primary-60, #0b50d0); }
.btn-dl-line .bi { font-size: 1.6rem; }

/* 정보공개청구 — 청구서 필수 기재사항 표 (thead 없이 행 제목 th) */
.tbl-board.tbl-need tbody th { padding: 8px; background-color: var(--gray-f5); border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); font-weight: 700; font-size: 15px; color: var(--krds-color-light-gray-95, #131416); }
.tbl-board.tbl-need tbody td { height: auto; padding: 14px 8px; background-color: #fff; font-size: 15px; line-height: 1.5; text-align: left; }
.tbl-board.tbl-need tbody tr:hover { background-color: transparent; }

/* 정보공개청구 — 청구 전 참고사항 목록 */
.ref-list-st1 { border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
.ref-list-st1 > li { padding: 20px 8px; border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); color: var(--krds-color-light-gray-70, #464c53); }
.ref-list-st1 > li > strong { display: block; line-height: 1.5; letter-spacing: -.25px; }
.ref-list-st1 > li > p { line-height: 1.5; }
.ref-list-st1 .go-link { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; color: var(--krds-color-light-gray-95, #131416); text-decoration: underline; }
.ref-list-st1 .go-link .bi { font-size: 1.6rem; }
@media only screen and (max-width: 767px) {
    .req-box { padding: 24px; }
    /* 로고를 본문 위 가운데로 (시안) */
    .req-intro { flex-direction: column-reverse; gap: 16px; }
	.req-intro .req-logo {margin-left: auto;}
    .req-forms { flex-direction: column; }
    /* 필수 기재사항 표는 모바일에서도 2열 유지 (기본 스택 뷰 해제) */
    .tbl-board.tbl-need { display: table; }
    .tbl-board.tbl-need colgroup { display: none; }   /* col 고정폭(200px)이 th 폭을 이긴다 */
    .tbl-board.tbl-need tbody { display: table-row-group; }
    .tbl-board.tbl-need tbody tr { display: table-row; padding: 0; border-bottom: 0; }
    .tbl-board.tbl-need tbody tr:first-child { border-top: 0; }
    .tbl-board.tbl-need tbody th { display: table-cell; width: 7rem; }
    .tbl-board.tbl-need tbody td { display: table-cell; }
    .tbl-board.tbl-need tbody td::before { display: none; }
}

/* 수수료 안내 — 공개대상 표 (세로선은 tbl-line 재사용) */
.tbl-board.tbl-fee tbody th,
.tbl-board.tbl-fee tbody td { height: auto; padding: 20px 16px; line-height: 1.5; text-align: left; vertical-align: top; }
.tbl-board.tbl-fee tbody th { padding: 20px 8px; text-align: center; vertical-align: middle; font-weight: 400; color: var(--krds-color-light-gray-70, #464c53); border-right: 1px solid var(--krds-color-light-gray-20, #cdd1d5); border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
.tbl-board.tbl-fee tbody tr:hover { background-color: transparent; }
.tbl-board.tbl-fee .fee-toggle { width: 100%; font: inherit; color: inherit; text-align: inherit; background: none; border: 0; cursor: default; }
.tbl-board.tbl-fee .fee-toggle .bi { display: none; }

/* 비공개 대상 정보 세부 기준 — 관련 법령 표 (행 제목 th + 내용 td 2열) */
.tbl-board.tbl-law tbody th,
.tbl-board.tbl-law tbody td { height: auto; padding: 20px 8px; line-height: 1.5; text-align: left; }
.tbl-board.tbl-law tbody th { font-weight: 400; border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); color: var(--krds-color-light-gray-70, #464c53); }
.tbl-board.tbl-law tbody tr:hover { background-color: transparent; }
@media only screen and (max-width: 767px) {
    .info-guide-cards { flex-direction: column; }
    .info-guide-cards .card { flex: none; height: 270px; padding: 25px; }
    .info-guide-cards .card-info .ico { right: 29px; bottom: 26px; width: 54px; }
    .info-guide-cards .card-disclosure .ico { right: 23px; bottom: 20px; width: 64px; }
    /* 법령 표 — 라벨 자동주입을 쓰지 않고 th(법령명) 위 td(내용) 아래로 쌓는다 */
    .tbl-board.tbl-law { border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
    .tbl-board.tbl-law thead,
    .tbl-board.tbl-law thead tr,
    .tbl-board.tbl-law thead th,
    .tbl-board.tbl-law tbody th,
    .tbl-board.tbl-law tbody td { display: block; }
    .tbl-board.tbl-law thead th { height: auto; padding: 1.2rem .8rem; }
    .tbl-board.tbl-law tbody tr { padding: 0; border-bottom: 0; }
    .tbl-board.tbl-law tbody tr:first-child { border-top: 0; }
    .tbl-board.tbl-law tbody th,
    .tbl-board.tbl-law tbody td { padding: .8rem; font-size: 1.7rem; }
    .tbl-board.tbl-law tbody th { font-weight: 700; }
    .tbl-board.tbl-law tbody td::before { display: none; }

    /* 수수료 표 — 공개대상 행을 아코디언으로 (열림 상태는 tr.open, JS 가 부여) */
    .tbl-board.tbl-fee { border-top: 1px solid var(--krds-color-light-gray-90, #1e2124); }
    .tbl-board.tbl-fee thead,
    .tbl-board.tbl-fee thead tr,
    .tbl-board.tbl-fee thead th,
    .tbl-board.tbl-fee tbody th,
    .tbl-board.tbl-fee tbody td { display: block; }
    .tbl-board.tbl-fee thead tr + tr,
    .tbl-board.tbl-fee thead th[colspan] { display: none; }
    .tbl-board.tbl-fee thead th { height: auto; padding: .8rem; text-align: left; }
    /* tbl-line 의 세로선 해제 — :not() 특이도를 맞춰야 이긴다 */
    .tbl-board.tbl-fee thead th:not(:last-child),
    .tbl-board.tbl-fee tbody td:not(:last-child) { border-right: 0; }
    .tbl-board.tbl-fee tbody tr { padding: 0; border-bottom: 0; }
    .tbl-board.tbl-fee tbody tr:first-child { border-top: 0; }
    .tbl-board.tbl-fee tbody th { padding: 0; border-right: 0; }
    .tbl-board.tbl-fee .fee-toggle { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 16px 12px; cursor: pointer; }
    .tbl-board.tbl-fee .fee-toggle .bi { display: block; flex-shrink: 0; transition: transform .2s; }
    .tbl-board.tbl-fee .fee-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
    .tbl-board.tbl-fee tbody td { display: none; padding: 16px 12px; border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
    .tbl-board.tbl-fee tbody tr.open td { display: block; }
    /* 열 라벨 — 셀 상단 패딩을 상쇄해 회색 띠가 셀 폭을 꽉 채운다 */
    .tbl-board.tbl-fee tbody td::before { display: block; width: auto; margin: -16px -12px 16px; padding: 6px 12px; background-color: var(--gray-f5); border-bottom: 1px solid var(--krds-color-light-gray-20, #cdd1d5); font-weight: 700; font-size: 15px; color: var(--krds-color-light-gray-95, #131416); }
}


/********** sub05 : 정보공개 > 사전정보공표 **********/

/* 분류 버튼 — 감싸는 박스는 시안의 KRDS secondary 계열 (bg-box-st2 기본 primary50 보다 회색기) */
.cate-btn-box { background-color: var(--krds-color-light-secondary-5, #eef2f7); border-color: var(--krds-color-light-secondary-10, #d6e0eb); }

/* 분류 버튼 — 아이콘 카드 4열 */
.cate-btn-list { display: flex; flex-wrap: wrap; gap: 16px; }
.cate-btn-list > li { flex: 1 1 calc(25% - 12px); }
.cate-btn-list button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; height: 100%; padding: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 8px; transition: border-color .2s, background-color .2s; }
.cate-btn-list .ico { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: var(--krds-color-light-gray-5, #f4f5f6); border-radius: 100%; font-size: 2.4rem; color: var(--gray-33); }
.cate-btn-list .txt { font-weight: 700; font-size: 13px; color: var(--gray-17); }
.cate-btn-list button:hover { border-color: var(--primary300); }
/* 선택 상태는 시안에 없어 최소 표기만 — 보더 + 아이콘 반전 */
.cate-btn-list button[aria-pressed="true"] { border-color: var(--primary500); }
.cate-btn-list button[aria-pressed="true"] .ico { background-color: var(--primary50); color: var(--primary500); }

/* 검색 필터 — 라벨 없이 가운데 정렬 (시안) */
.bbs-filter.filter-center .filter-row { justify-content: center; }
.bbs-filter.filter-center .filter-conts { flex: none; }

@media only screen and (max-width: 767px) {
    .cate-btn-list { gap: 8px; }
    .cate-btn-list > li { flex: 1 1 calc(50% - 4px); }
}



/* ── 2026-09-26 QA 대응 — 새 선택자만 더한다(퍼블 규칙은 그대로) ─────────────────── */
/* 포토뉴스 상세 썸네일 바 (SCIA-431) — Swiper Thumbs. 본 슬라이더(.bbs-swiper) 아래 */
.bbs-slide-st1 .bbs-thumbs { max-width: 73rem; margin: 1.6rem auto 0; }
.bbs-slide-st1 .bbs-thumbs .swiper-slide { width: 12rem; }
.bbs-slide-st1 .bbs-thumbs button { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: .8rem; overflow: hidden; background: none; opacity: .55; cursor: pointer; }
.bbs-slide-st1 .bbs-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bbs-slide-st1 .bbs-thumbs .swiper-slide-thumb-active button { border-color: var(--primary500); opacity: 1; }
.bbs-slide-st1 .bbs-thumbs button:hover, .bbs-slide-st1 .bbs-thumbs button:focus-visible { opacity: 1; }
@media (max-width: 767px) { .bbs-slide-st1 .bbs-thumbs .swiper-slide { width: 8rem; } }
/* 이전글·다음글 없음 안내 (SCIA-428) */
.bbs-foot .btn-wrap li .no-post { flex: 1; min-width: 0; line-height: 1.5; color: var(--gray-75); }
.bbs-foot .btn-wrap li.is-empty:hover { background-color: transparent; }