@charset "utf-8";

/* #################################### Font #################################### */

/* EUROPA - FONTS */
@import url('https://use.typekit.net/chu3cqy.css');

/* #################################### HTML Basic Set #################################### */



* {
    word-break: keep-all;
}


/* 스크롤바 UI 는 감추고 스크롤 기능은 살린다. 스크롤되는 모든 컨테이너에 공통 적용한다.
   개별 컨테이너에서 다시 켜지 말 것 — 잘린 것은 끝단 그라디언트로 알린다. */
::-webkit-scrollbar {
    display: none;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 스킵 네비게이션 */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: var(--z-modal);
    padding: var(--space-8) var(--space-16);
    background: var(--signature-color);
    color: var(--base-color-white);
    font-size: var(--space-14);
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
    font-size: var(--html-base-font-size);
    -webkit-text-size-adjust: 100%; /* 휴대폰 가로 회전 시 글자 자동 확대 차단 — 디자인 크기 유지 */
    text-size-adjust: 100%;
}

body {
    width: var(--vw-100);
    height: auto;
    min-height: var(--svh-100);
    font-family: var(--font-KR-base);
    font-weight: var(--font-weight-base);
    color: var(--font-color-base);
    background: var(--background-color-base);
    scroll-behavior: smooth;
    -ms-overflow-style: none;
}

img {
    width: 100%;
    border: 0;
}

hr {
    display: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
a {
    display: block;
}

ul,
ol,
li,
dt,
dd,
dl {
    list-style: none;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: var(--base-color-black);
    text-decoration: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: none;
}

select::-ms-expand {
    display: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select::picker-icon {
    content: '';
    width: var(--space-15);
    margin-left: var(--space-5);
    background: url('../img/down_arrow.svg') no-repeat 97% 50%/var(--space-15) auto;
}

select {
  &, &::picker(select) {
    appearance: base-select;
  }
}

option::checkmark {
    display: none;
}

::picker(select) {
    border: var(--border-gray-290);
}

option {
    padding: var(--space-15);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

textarea {
    resize: none;
}

button {
    background: none;
    cursor: pointer;
}

/* #################################### Contents fixed #################################### */
.fixed-init {
    position: fixed;
    height: var(--svh-100);
    overflow: hidden;
}


/* #################################### 공통 스타일 #################################### */

/* --------------------웹접근성------------------ */

.reader_text {
    position:absolute;
    font-size:0;
    line-height: var(--lh-0);
    overflow:hidden;
}

/* -------------------- 컨테이너 기준점 (단일) ------------------ */
#container.raum-content {
    max-width: var(--content-width);
    margin: 0 auto;
}

/* 메인 페이지 section 기본 65% (서브 .raum-content 제외) */
#container:not(.raum-content) > section {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

/* 풀width 섹션 오버라이드 */
#container > section.raum-section-full {
    max-width: none;
    width: 100%;
}

/* 서브 컨테이너 내부 중복 제한 방지 */
#container.raum-content .raum-max-width {
    max-width: none;
}

/* --------------------섹션------------------ */

.section {
    width: var(--container-max);
    padding: var(--section-margin) var(--space-15);
    margin: 0 auto;
}


.section_margin {
    margin: var(--all-sec-margin);
}

.section_padding_mo {
    padding: var(--all-sec-padding_mo);
}

/* -------------------- 텍스트 효과------------------ */

.ko_font {
    font-family: var(--font-KR-base);
}

.ko_font_point {
    font-family: var(--font-KR-point);
}

.color_white {
    color: var(--base-color-white);
}

.color_point {
    color: var(--signature-color);
}

.br {
    display: block;
}




/* -------------------- 공통 클래스 ------------------ */

.sub-title-m{
    font-size: var(--title-point-font-size);
    font-weight: var(--fw-bold);
}

.btn-custom {
    padding: var(--space-20) var(--space-50);
    background-color: var(--signature-color);
    align-items: center;
    justify-content: center;
    color: var(--base-color-white);
    font-size: var(--text-font-size);
    display: inline-flex;
}
.btn-custom:hover {
    background-color: var(--base-color-black);
    transition: var(--transition-slow);
}
.btn-custom a {
    font-size: inherit; /* 부모 그대로 물려받게 */
    color: inherit;
}
.btn-custom2 {
    padding: var(--space-20) var(--space-55);
    background-color: var(--base-color-darkblack);

    align-items: center;
    justify-content: center;
    color: var(--base-color-white);
    font-size: var(--text-font-size);
    display: inline-flex;
}
.btn-custom2:hover {
    background-color: var(--signature-color);
    transition: var(--transition-slow);
}
.btn-custom2 a {
    font-size: inherit; /* 부모 그대로 물려받게 */
    color: inherit;
}



/* 팝업레이어 → layout.css로 이동됨 */

@media all and (max-width: 860px) {
    .section {
        width: 100%;
    }

    .raum-max-width {
        padding: 0 var(--padding-mo);
    }
}




/* 상단 레이아웃 (#tnb, #hd_wrapper, #hd_sch, #hd_define, #hd_qnb, .hd_login) → layout.css로 이동됨 */

/* 메인메뉴 */
#gnb {
    position: relative;
}
#gnb .gnb_wrap {
    margin: 0 auto;
    position: relative;
}
#gnb .gnb_wrap:hover,
#gnb .gnb_wrap:focus,
#gnb .gnb_wrap:active {
    z-index: var(--z-overlay);
}
#gnb ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}
#gnb .gnb_1dli:hover > a {
    color: var(--signature-color);
    transition: background-color var(--transition-fast);
}

.gnb_1dli .bg {
    position: absolute;
    top: var(--space-24);
    right: var(--space-8);
    display: inline-block;
    width: var(--space-10);
    height: var(--space-10);
    overflow: hidden;
    background: url('../img/gnb_bg2.gif') no-repeat 50% 50%;
    text-indent: var(--hide-text);
}
.gnb_2dli:first-child {
    border: 0;
}
.gnb_2dul {
    display: none;
    position: absolute;
    width: var(--header-nav-size);
}

.gnb_wrap .gnb_empty {
    padding: var(--space-10) 0;
    width: 100%;
    text-align: center;
    line-height: var(--em-2-7);
    color: var(--base-color-black);
}
.gnb_wrap .gnb_empty a {
    color: var(--color-accent-blue);
    text-decoration: underline;
}
.gnb_wrap .gnb_al_ul .gnb_empty,
.gnb_wrap .gnb_al_ul .gnb_empty a {
    color: var(--color-gray-600);
}

#gnb .gnb_menu_btn {
    background: var(--color-accent-indigo);
    color: var(--base-color-white);
    width: var(--space-50);
    height: var(--space-55);
    border: 0;
    vertical-align: top;
    font-size: var(--space-18);
}
#gnb .gnb_close_btn {
    background: var(--base-color-white);
    color: var(--color-ui-muted-alt);
    width: var(--space-50);
    height: var(--space-50);
    border: 0;
    vertical-align: top;
    font-size: var(--space-18);
    position: absolute;
    top: 0;
    right: 0;
}
#gnb .gnb_mnal {
    float: right;
    padding: 0;
}

/* 게시물 선택복사 선택이동 */
#copymove .win_desc {
    text-align: center;
    display: block;
}
#copymove .tbl_wrap {
    margin: var(--space-20);
}
#copymove .win_btn {
    padding: 0 var(--space-20) var(--space-20);
}

#copymove input[type="checkbox"] {
    position: static;
    width: auto;
    height: auto;
    opacity: var(--opacity-100);
    overflow: visible;
}

#copymove label {
    display: inline;
    padding-left: 0;
    cursor: pointer;
}
.copymove_current {
    float: right;
    background: var(--color-accent-red-bright);
    padding: var(--space-5);
    color: var(--base-color-white);
    border-radius: var(--space-3);
}
.copymove_currentbg {
    background: var(--color-gray-100);
}

/* 화면낭독기 사용자용 */
#hd_login_msg {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden;
}
.msg_sound_only,
.sound_only {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: var(--lh-0);
    border: 0;
    overflow: hidden;
}

/* 본문 바로가기 */
#skip_to_container a {
    z-index: var(--z-tooltip);
    position: absolute;
    top: 0;
    left: 0;
    width: var(--space-1);
    height: var(--space-1);
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden;
}
#skip_to_container a:focus,
#skip_to_container a:active {
    width: 100%;
    height: var(--space-75);
    background: var(--color-gray-950);
    color: var(--base-color-white);
    font-size: var(--em-2);
    font-weight: var(--fw-bold);
    text-align: center;
    text-decoration: none;
    line-height: var(--lh-3-var(--em-3));
}

/* ie6 이미지 너비 지정 */
.img_fix {
    width: 100%;
    height: auto;
}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {
    display: inline-block;
    position: relative;
}
#captcha legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: var(--lh-0);
    text-indent: -var(--em-infinity);
    overflow: hidden;
}
#captcha #captcha_img {
    height: var(--space-40);
    border: 1px solid var(--color-gray-450);
    vertical-align: top;
    padding: 0;
    margin: 0;
}
#captcha #captcha_mp3 {
    margin: 0;
    padding: 0;
    width: var(--space-40);
    height: var(--space-40);
    border: 0;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.webp') no-repeat;
    text-indent: var(--hide-text);
    border-radius: var(--space-3);
}
#captcha #captcha_reload {
    margin: 0;
    padding: 0;
    width: var(--space-40);
    height: var(--space-40);
    border: 0;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.webp') no-repeat 0 calc(var(--space-40) * -1);
    text-indent: var(--hide-text);
    border-radius: var(--space-3);
}
#captcha #captcha_key {
    margin: 0 0 0 var(--space-3);
    padding: 0 var(--space-5);
    width: var(--input-form-sm);
    height: var(--space-40);
    border: var(--border-default);
    background: var(--base-color-white);
    font-size: var(--em-1-333);
    font-weight: var(--fw-bold);
    text-align: center;
    border-radius: var(--space-3);
    vertical-align: top;
}
#captcha #captcha_info {
    display: block;
    margin: var(--space-5) 0 0;
    font-size: var(--font-em-095);
    letter-spacing: var(--ls-neg-01);
}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {
    display: block;
    margin: 0 0 var(--space-5);
    width: var(--input-form-3xl);
}
#captcha.m_captcha #captcha_img {
    width: var(--space-160);
    height: var(--space-60);
    border: var(--border-soft);
    margin-bottom: var(--space-3);
    margin-top: var(--space-5);
    display: block;
}
#captcha.m_captcha #captcha_reload {
    position: static;
    margin: 0;
    padding: 0;
    width: var(--space-40);
    height: var(--space-40);
    border: 0;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.webp') no-repeat 0 calc(var(--space-40) * -1);
    text-indent: var(--hide-text);
}
#captcha.m_captcha #captcha_reload span {
    display: none;
}
#captcha.m_captcha #captcha_key {
    margin: 0;
    padding: 0 var(--space-5);
    width: var(--input-form-lg);
    height: var(--space-29);
    border: var(--border-ui-input);
    background: var(--color-ui-f7f7f7);
    font-size: var(--em-1-333);
    font-weight: var(--fw-bold);
    text-align: center;
    line-height: var(--space-29);
    margin-left: var(--space-3);
}
#captcha.m_captcha #captcha_info {
    display: block;
    margin: var(--space-5) 0 0;
    font-size: var(--font-em-095);
    letter-spacing: var(--ls-neg-01);
}
#captcha.m_captcha #captcha_mp3 {
    width: var(--space-31);
    height: var(--space-31);
    background: url('../../../img/captcha2.png') no-repeat 0 0;
    vertical-align: top;
    overflow: hidden;
    cursor: pointer;
    text-indent: var(--hide-text-deep);
    border: none;
}

/* ckeditor 단축키 */
.cke_sc {
    margin: 0 0 var(--space-5);
    text-align: right;
}
.btn_cke_sc {
    display: inline-block;
    padding: 0 var(--space-10);
    height: var(--space-23);
    border: var(--border-default);
    background: var(--color-ui-fafafa);
    color: var(--base-color-black);
    text-decoration: none;
    line-height: var(--em-1-9);
    vertical-align: middle;
    cursor: pointer;
}
.cke_sc_def {
    margin: 0 0 var(--space-5);
    padding: var(--space-10);
    border: var(--border-default);
    background: var(--color-ui-f7f7f7);
    text-align: center;
}
.cke_sc_def dl {
    margin: 0 0 var(--space-5);
    text-align: left;
    zoom: 1;
}
.cke_sc_def dl:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}
.cke_sc_def dt,
.cke_sc_def dd {
    float: left;
    margin: 0;
    padding: var(--space-5) 0;
    border-bottom: var(--border-soft);
}
.cke_sc_def dt {
    width: 20%;
    font-weight: var(--fw-bold);
}
.cke_sc_def dt + dd {
    width: 30%;
}

/* ckeditor 태그 기본값 */
#bo_v_con ul {
    display: block;
    list-style-type: disc;
    margin-top: var(--em-1);
    margin-bottom: var(--em-1);
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--space-40);
}
#bo_v_con ol {
    display: block;
    list-style-type: decimal;
    margin-top: var(--em-1);
    margin-bottom: var(--em-1);
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--space-40);
}
#bo_v_con li {
    display: list-item;
}

/* 버튼 */
a.btn,
.btn {
    line-height: var(--space-35);
    height: var(--space-35);
    padding: 0 var(--space-10);
    text-align: center;
    font-weight: var(--fw-bold);
    border: 0;
    font-size: var(--em-1-4);
    transition: background-color var(--transition-fast);
}

a.btn01 {
    display: inline-block;
    padding: var(--space-7);
    border: var(--border-default);
    background: var(--color-ui-fafafa);
    color: var(--base-color-black);
    text-decoration: none;
    vertical-align: middle;
}
a.btn01:focus,
a.btn01:hover {
    text-decoration: none;
}
button.btn01 {
    display: inline-block;
    margin: 0;
    padding: var(--space-7);
    border: var(--border-default);
    background: var(--color-ui-fafafa);
    color: var(--base-color-black);
    text-decoration: none;
}
a.btn02 {
    display: inline-block;
    padding: var(--space-7);
    border: var(--border-dark-btn);
    background: var(--color-ui-dark-btn);
    color: var(--base-color-white);
    text-decoration: none;
    vertical-align: middle;
}
a.btn02:focus,
.btn02:hover {
    text-decoration: none;
}
button.btn02 {
    display: inline-block;
    margin: 0;
    padding: var(--space-7);
    border: var(--border-dark-btn);
    background: var(--color-ui-dark-btn);
    color: var(--base-color-white);
    text-decoration: none;
}

.btn_confirm {
    text-align: right;
} /* 서식단계 진행 */

.btn_submit {
    border: 0;
    background: var(--color-accent-blue);
    color: var(--base-color-white);
    cursor: pointer;
    border-radius: var(--px-3);
}
.btn_submit:hover {
    background: var(--color-accent-blue-dark);
}
.btn_close {
    border: var(--border-ui-notice);
    cursor: pointer;
    border-radius: var(--space-3);
    background: var(--base-color-white);
}
a.btn_close {
    text-align: center;
    line-height: var(--space-50);
}

a.btn_cancel {
    display: inline-block;
    background: var(--color-gray-400);
    color: var(--base-color-white);
    text-decoration: none;
    vertical-align: middle;
}
button.btn_cancel {
    display: inline-block;
    background: var(--color-gray-400);
    color: var(--base-color-white);
    text-decoration: none;
    vertical-align: middle;
}
.btn_cancel:hover {
    background: var(--color-gray-400);
}
a.btn_frmline,
button.btn_frmline {
    display: inline-block;
    width: var(--input-form-xl);
    padding: 0 var(--space-5);
    height: var(--space-40);
    border: 0;
    background: var(--color-ui-slate);
    border-radius: var(--space-3);
    color: var(--base-color-white);
    text-decoration: none;
    vertical-align: top;
} /* 우편번호검색버튼 등 */
button.btn_frmline {
    font-size: var(--em-1);
}

/* 게시판용 버튼 */
a.btn_b01,
.btn_b01 {
    display: inline-block;
    color: var(--color-ui-muted);
    text-decoration: none;
    vertical-align: middle;
    border: 0;
    background: transparent;
}
.btn_b01:hover,
.btn_b01:hover {
    color: var(--base-color-black);
}
a.btn_b02,
.btn_b02 {
    display: inline-block;
    background: var(--color-accent-indigo-dark);
    padding: 0 var(--space-10);
    color: var(--base-color-white);
    text-decoration: none;
    border: 0;
    vertical-align: middle;
}
a.btn_b02:hover,
.btn_b02:hover {
    background: var(--color-accent-blue-deeper);
}
a.btn_b03,
.btn_b03 {
    display: inline-block;
    background: var(--base-color-white);
    border: 1px solid var(--color-ui-badge-border);
    color: var(--color-ui-sub-alt);
    text-decoration: none;
    vertical-align: middle;
}
a.btn_b03:hover,
.btn_b03:hover {
    background: var(--color-ui-badge-bg);
}
a.btn_b04,
.btn_b04 {
    display: inline-block;
    background: var(--base-color-white);
    border: var(--border-default);
    color: var(--color-ui-sub);
    text-decoration: none;
    vertical-align: middle;
}
a.btn_b04:hover,
.btn_b04:hover {
    color: var(--color-gray-900);
    background: var(--color-ui-f9f9f9);
}
a.btn_admin,
.btn_admin {
    display: inline-block;
    color: var(--color-ui-error);
    text-decoration: none;
    vertical-align: middle;
} /* 관리자 전용 버튼 */
.btn_admin:hover,
a.btn_admin:hover {
    color: var(--color-accent-red-alt);
}

/* 기본테이블 */
.tbl_wrap table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0 var(--space-5);
    background: var(--base-color-white);
    /* border-top: var(--border-gray-150-top);
    border-bottom: var(--border-bottom-light); */
}
.tbl_wrap caption {
    padding: var(--space-10) 0;
    font-weight: var(--fw-bold);
    text-align: left;
}
.tbl_head01 {
    margin: 0 0 var(--space-10);
}
.tbl_head01 caption {
    padding: 0;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden;
}
.tbl_head01 thead th {
    padding: var(--space-20) 0;
    font-weight: var(--fw-normal);
    text-align: center;
    border-bottom: var(--border-bottom-light);
    height: var(--space-40);
}
.tbl_head01 thead th input {
    vertical-align: top;
} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th,
.tbl_head01 tfoot td {
    padding: var(--space-10) 0;
    border-top: var(--border-page);
    border-bottom: var(--border-page);
    background: var(--color-ui-page-bg);
    text-align: center;
}
.tbl_head01 tbody th {
    padding: var(--space-8) 0;
    border-bottom: var(--border-ui-line-bottom);
}
.tbl_head01 td {
    color: var(--color-gray-500);
    padding: var(--space-10) var(--space-5);
    border-top: var(--border-page-line-top);
    border-bottom: var(--border-page-line-bottom);
    line-height: var(--lh-1-var(--em-4));
    height: var(--space-60);
    word-break: break-all;
    width: 100%;
}
.tbl_head01 tbody tr:hover td {
    background: var(--color-ui-fafafa);
}
.tbl_head01 a:hover {
    text-decoration: underline;
}

.tbl_head02 {
    margin: 0 0 var(--space-10);
}
.tbl_head02 caption {
    padding: 0;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden;
}
.tbl_head02 thead th {
    padding: var(--space-5) 0;
    border-top: var(--border-page-bg-top);
    border-bottom: var(--border-page-bg-bottom);
    background: var(--color-ui-page-bg-alt);
    color: var(--color-gray-800);
`
}
.tbl_head02 thead a {
    color: var(--color-gray-800);
}
.tbl_head02 thead th input {
    vertical-align: top;
} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th,
.tbl_head02 tfoot td {
    padding: var(--space-10) 0;
    border-top: var(--border-page);
    border-bottom: var(--border-page);
    background: var(--color-ui-page-bg);
    text-align: center;
}
.tbl_head02 tbody th {
    padding: var(--space-5) 0;
    border-top: var(--border-soft);
    border-bottom: var(--border-soft);
    background: var(--base-color-white);
}
.tbl_head02 td {
    padding: var(--space-5) var(--space-3);
    border-top: var(--border-soft);
    border-bottom: var(--border-soft);
    background: var(--base-color-white);
    line-height: var(--lh-1-var(--em-4));
    word-break: break-all;
}
/* 폼 테이블 */
.tbl_frm01 {
    margin: 0 0 var(--space-20);
}
.tbl_frm01 table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.tbl_frm01 th {
    width: var(--space-70);
    padding: var(--space-7) var(--space-13);
    border: var(--border-soft);
    border-left: 0;
    background: var(--color-ui-light-bg);
    text-align: left;
}
.tbl_frm01 td {
    padding: var(--space-7) var(--space-10);
    border-top: var(--border-soft);
    border-bottom: var(--border-soft);
    background: transparent;
}
.wr_content textarea,
.tbl_frm01 textarea,
.form_01 textarea,
.frm_input {
    border: 1px solid var(--color-ui-input-bg);
    background: var(--base-color-white);
    color: var(--base-color-black);
    vertical-align: middle;
    border-radius: var(--px-3);
    padding: var(--space-5);
    box-shadow: inset 0 1px 1px rgba(var(--color-black-rgb), var(--alpha-075));
    height: var(--space-40);
}
.tbl_frm01 textarea,
.write_div textarea {
    padding: var(--space-2) var(--space-2) var(--space-3);
    width: 100%;
    height: var(--space-100);
}

.full_input {
    width: 100%;
}
.half_input {
    width: 49.5%;
}
.twopart_input {
    width: var(--input-twopart-width);
    margin-right: var(--space-10);
}
.tbl_frm01 a {
    text-decoration: none;
}
.tbl_frm01 .frm_file {
    display: block;
    margin-bottom: var(--space-5);
}
.tbl_frm01 .frm_info {
    display: block;
    padding: 0 0 var(--space-5);
    line-height: var(--lh-1-var(--em-4));
}

/*기본 리스트*/
.list_01 ul {
    border-top: var(--border-gray-150-top);
}
.list_01 li {
    border-bottom: var(--border-bottom-light);
    background: var(--base-color-white);
    padding: var(--space-10) var(--space-15);
    list-style: none;
    position: relative;
}
.list_01 li:nth-child(odd) {
    background: var(--color-ui-light-bg-alt);
}
.list_01 li:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}
.list_01 li:hover {
    background: var(--color-ui-f9f9f9);
}
.list_01 li.empty_li {
    text-align: center;
    padding: var(--space-20) 0;
    color: var(--color-gray-500);
}

/*폼 리스트*/
.form_01 h2 {
    font-size: var(--em-1-167);
}
.form_01 li {
    margin-bottom: var(--space-10);
}
.form_01 ul:after,
.form_01 li:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}
.form_01 .left_input {
    float: left;
}
.form_01 .margin_input {
    margin-right: var(--space-5);
}
.form_01 textarea {
    height: var(--space-100);
    width: 100%;
}
.form_01 .frm_label {
    display: inline-block;
    width: var(--space-130);
}

/* 자료 없는 목록 */
.empty_table {
    padding: var(--space-50) 0;
    text-align: center;
}
.empty_list {
    padding: var(--space-20) 0;
    color: var(--color-gray-500);
    text-align: center;
}

/* 필수입력 (specificity 강화로 우선순위 확보) */
.required.required,
textarea.required.required {
    background-image: url('../img/require.png');
    background-repeat: no-repeat;
    background-position: right top;
}

/* 테이블 항목별 정의 */
.td_board {
    width: var(--space-80);
    text-align: center;
}
.td_category {
    width: var(--space-80);
    text-align: center;
}
.td_chk {
    width: var(--space-30);
    text-align: center;
}
.td_date {
    width: var(--space-60);
    text-align: center;
}
.td_datetime {
    width: var(--input-form-md);
    text-align: center;
}
.td_group {
    width: var(--space-80);
    text-align: center;
}
.td_mb_id {
    width: var(--space-100);
    text-align: center;
}
.td_mng {
    width: var(--space-80);
    text-align: center;
}
.td_name {
    width: var(--space-100);
    text-align: left;
}
.td_nick {
    width: var(--space-100);
    text-align: center;
}
.td_num {
    width: var(--space-50);
    text-align: center;
}
.td_numbig {
    width: var(--space-80);
    text-align: center;
}
.td_stat {
    width: var(--space-60);
    text-align: center;
}

.txt_active {
    color: var(--color-accent-green);
}
.txt_done {
    color: var(--color-ui-error-bright);
}
.txt_expired {
    color: var(--color-gray-350);
}
.txt_rdy {
    color: var(--color-accent-green);
}

/* 새창 기본 스타일 */
.new_win {
    position: relative;
}

.new_win a {
    display: inline;
}

.new_win table {
    border-collapse: collapse;
}

.new_win th,
.new_win td {
    padding: var(--space-8) var(--space-10);
    text-align: left;
    border-bottom: 1px solid rgba(var(--color-black-rgb), var(--alpha-08));
    font-size: var(--space-15);
}

.new_win th:first-child,
.new_win td:first-child {
    width: var(--space-40);
    text-align: center;
}

.new_win input[type="checkbox"] {
    position: static;
    width: auto;
    height: auto;
    opacity: var(--opacity-100);
    overflow: visible;
    cursor: pointer;
}

.new_win label {
    display: inline;
    padding: 0;
}

.new_win .win_btn {
    padding: var(--space-15) var(--space-20);
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    text-align: center;
}

.new_win .win_btn input[type="submit"],
.new_win .win_btn button {
    padding: var(--space-8) var(--space-24);
    cursor: pointer;
    font-size: var(--space-15);
    border-radius: var(--px-3);
    border: 1px solid var(--color-gray-300);
    background: var(--base-color-white);
    color: var(--base-color-black);
}

.new_win .win_btn input[type="submit"] {
    background: var(--color-accent-blue);
    color: var(--base-color-white);
    border-color: var(--color-accent-blue);
}
.new_win .tbl_wrap {
    margin: 0 var(--space-20);
}
.new_win #win_title {
    font-size: var(--em-1-3);
    height: var(--space-50);
    line-height: var(--space-30);
    padding: var(--space-10) var(--space-20);
    background: var(--base-color-white);
    color: var(--base-color-black);
    box-shadow: 0 1px var(--px-10) rgba(var(--color-black-rgb), var(--alpha-1));
}
.new_win #win_title .sv {
    font-size: var(--em-0-75);
    line-height: var(--em-1-2);
}
.new_win .win_ul {
    margin-bottom: var(--space-15);
    padding: 0 var(--space-20);
}
.new_win .win_ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}
.new_win .win_ul li {
    float: left;
    background: var(--base-color-white);
    text-align: center;
    padding: 0 var(--space-10);
    border: 1px solid var(--color-ui-blue-bg);
    border-radius: var(--space-30);
    margin-left: var(--space-5);
}
.new_win .win_ul li:first-child {
    margin-left: 0;
}
.new_win .win_ul li a {
    display: block;
    padding: var(--space-8) 0;
    color: var(--color-ui-blue-text);
}
.new_win .win_ul .selected {
    background: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
    position: relative;
    z-index: var(--z-dropdown);
}
.new_win .win_ul .selected a {
    color: var(--base-color-white);
    font-weight: var(--fw-bold);
}
.new_win .win_desc {
    position: relative;
    margin: var(--space-10);
    border-radius: var(--px-5);
    font-size: var(--em-1);
    background: var(--color-ui-link-pink);
    color: var(--base-color-white);
    line-height: var(--space-50);
    text-align: left;
    padding: 0 var(--space-20);
}
.new_win .win_desc i {
    font-size: var(--em-1-2);
    vertical-align: baseline;
}
.new_win .win_desc:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--space-4);
    height: var(--space-50);
    background: var(--color-ui-error);
    border-radius: var(--px-3) 0 0 var(--px-3);
}
.new_win .frm_info {
    font-size: var(--em-0-92);
    color: var(--color-gray-400);
}
.new_win .win_total {
    float: right;
    display: inline-block;
    line-height: var(--space-30);
    font-weight: var(--fw-normal);
    font-size: var(--em-0-75);
    color: var(--color-accent-blue);
    background: var(--color-ui-light-bg-alt);
    padding: 0 var(--space-10);
    border-radius: var(--px-5);
}
.new_win .new_win_con {
    margin: var(--space-20) 0;
    padding: var(--space-20);
}
.new_win .new_win_con:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}
.new_win .new_win_con2 {
    margin: var(--space-20) 0;
}
.new_win .btn_confirm:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}
.new_win .cert_btn {
    margin-bottom: var(--space-30);
    text-align: center;
}
.new_win .btn_close {
    padding: 0 var(--space-20);
    height: var(--space-45);
    overflow: hidden;
    cursor: pointer;
}
.new_win .btn_submit {
    padding: 0 var(--space-20);
    height: var(--space-45);
    font-weight: var(--fw-bold);
    font-size: var(--em-1-083);
}

/* 검색결과 색상 */
.sch_word {
    color: var(--base-color-white);
    background: var(--color-accent-red-bright);
    padding: var(--space-2) var(--space-5) var(--space-3);
    line-height: var(--space-18);
    margin: 0 var(--space-2);
}

/* 자바스크립트 alert 대안 */
#validation_check {
    margin: var(--space-100) auto;
    width: var(--space-500);
}
#validation_check h1 {
    margin-bottom: var(--space-20);
    font-size: var(--em-1-3);
}
#validation_check p {
    margin-bottom: var(--space-20);
    padding: var(--space-30) var(--space-20);
    border: var(--border-soft);
    background: var(--base-color-white);
}

/* 사이드뷰 */
.sv_wrap {
    position: relative;
    font-weight: var(--fw-normal);
}
.sv_wrap .sv {
    z-index: var(--z-fixed);
    display: none;
    margin: var(--space-5) 0 0;
    font-size: var(--em-0-92);
    background: var(--color-gray-900);
    box-shadow: var(--px-2) var(--px-2) var(--px-3) 0 rgba(var(--color-black-rgb), var(--alpha-2));
}
.sv_wrap .sv:before {
    content: '';
    position: absolute;
    top: -var(--space-6);
    left: var(--space-15);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--px-6) var(--px-6) var(--px-6);
    border-color: transparent transparent var(--color-gray-900) transparent;
}
.sv_wrap .sv a {
    display: inline-block;
    margin: 0;
    padding: 0 var(--space-10);
    line-height: var(--space-30);
    width: var(--space-100);
    font-weight: var(--fw-normal);
    color: var(--color-gray-400);
}
.sv_wrap .sv a:hover {
    background: var(--base-color-black);
    color: var(--base-color-white);
}
.sv_member {
    color: var(--color-gray-900);
}
.sv_on {
    display: block;
    position: absolute;
    top: var(--space-23);
    left: 0;
    width: auto;
    height: auto;
}
.sv_nojs .sv {
    display: block;
}

/* 페이징 */
.pg_wrap {
    clear: both;
    float: left;
    display: inline-block;
}
.pg_wrap:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}
.pg {
    text-align: center;
}
.pg a:focus,
.pg a:hover {
    text-decoration: none;
}
.pg_page {
    display: inline-block;
    vertical-align: middle;
    background: var(--color-gray-200);
    border: var(--border-light);
    color: var(--color-gray-400);
    font-size: var(--em-1-083);
    height: var(--space-30);
    line-height: var(--space-28);
    padding: 0 var(--space-5);
    min-width: var(--space-30);
    text-decoration: none;
    border-radius: var(--px-3);
}
.pg_page:hover {
    background-color: var(--color-ui-fafafa);
}
.pg_start {
    text-indent: var(--hide-text);
    overflow: hidden;
    background: url('../img/btn_first.gif') no-repeat 50% 50% var(--color-gray-200);
    padding: 0;
    border: var(--border-light);
}
.pg_prev {
    text-indent: var(--hide-text);
    overflow: hidden;
    background: url('../img/btn_prev.gif') no-repeat 50% 50% var(--color-gray-200);
    padding: 0;
    border: var(--border-light);
}
.pg_end {
    text-indent: var(--hide-text);
    overflow: hidden;
    background: url('../img/btn_end.gif') no-repeat 50% 50% var(--color-gray-200);
    padding: 0;
    border: var(--border-light);
}
.pg_next {
    text-indent: var(--hide-text);
    overflow: hidden;
    background: url('../img/btn_next.gif') no-repeat 50% 50% var(--color-gray-200);
    padding: 0;
    border: var(--border-light);
}
.pg_start:hover,
.pg_prev:hover,
.pg_end:hover,
.pg_next:hover {
    background-color: var(--color-ui-fafafa);
}

.pg_current {
    display: inline-block;
    background: var(--color-accent-blue);
    border: var(--border-accent-blue);
    color: var(--base-color-white);
    font-weight: var(--fw-bold);
    height: var(--space-30);
    line-height: var(--space-30);
    padding: 0 var(--space-10);
    min-width: var(--space-30);
    border-radius: var(--px-3);
}

/* cheditor 이슈 */
.cheditor-popup-window *,
.cheditor-popup-window :after,
.cheditor-popup-window :before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* 인라인 style 대체 유틸리티 */
.u-hidden {
    display: none;
}

.u-opacity-0 {
    opacity: var(--opacity-0);
}

.u-signature-color {
    color: var(--signature-color);
}

/* ============================================
 * 공용 유틸리티 클래스 (자주 반복 패턴 묶기)
 * contents.css 분석 기반: display:flex 94회, width:100% 56회 등
 * ============================================ */

/* flex 배치 */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-start { display: flex; align-items: center; justify-content: flex-start; }
.u-flex-end { display: flex; align-items: center; justify-content: flex-end; }
.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-flex-1 { flex: 1; }
.u-flex-shrink-0 { flex-shrink: 0; }

/* 크기 */
.u-w-full { width: 100%; }
.u-h-full { height: 100%; }
.u-w-h-full { width: 100%; height: 100%; }

/* 위치 */
.u-pos-rel { position: relative; }
.u-pos-abs { position: absolute; }
.u-inset-0 { inset: 0; }

/* 텍스트 */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-color-black { color: var(--base-color-black); }
.u-color-white { color: var(--base-color-white); }

/* 폰트 굵기 */
.u-fw-400 { font-weight: var(--fw-normal); }
.u-fw-500 { font-weight: var(--fw-medium); }
.u-fw-600 { font-weight: var(--fw-semibold); }
.u-fw-700 { font-weight: var(--fw-bold); }
.u-fw-900 { font-weight: var(--fw-black); }

/* overflow & display */
.u-overflow-hidden { overflow: hidden; }
.u-object-cover { object-fit: cover; }
.u-display-block { display: block; }
.u-display-none { display: none; }
.u-cursor-pointer { cursor: pointer; }
.u-no-deco { text-decoration: none; }