@charset "utf-8";

/* ========================================
   초기화 (Reset)
   ======================================== */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size: 1.1em;background:#f3f3f3;height:100%;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul{margin:0;padding:0;list-style:none}
li,dt,dd,ol{margin:0;padding:0}
ol{list-style-position:inside}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button,input[type="submit"] {cursor:pointer}
textarea, select {font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {text-decoration:none;/* color: inherit; */}
a:hover {text-decoration: none;}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h2{font-size: 1.083em;font-weight: bold;margin:10px 0}

#wrapper {min-height:480px}

/* ========================================
   공통 유틸리티
   ======================================== */
/* 공통 - display none/block */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }

/* 공통 - 뷰포트 (pc / mobile) 별 display none/block */
.pc-only { display: none; }
@media (min-width: 769px) { .pc-only { display: block !important; }}
.mobile-only { display: block; }
@media (min-width: 769px) { .mobile-only { display: none !important; }}

/* ========================================
   레이아웃: 헤더
   ======================================== */
#hd h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_top{position:fixed;top:0;left:0;width:100%;height:50px;z-index:1000}
#hd_top:after{display:block;visibility:hidden;clear:both;content:""}
#logo{height:100%;float:left;width:290px;padding:12px 0 12px 50px;text-align:center}
#btn_gnb{width:50px;height:50px;border:0;position:absolute;top:0;left:0;text-indent:-999px;overflow:hidden}

#tnb{float:right;padding:10px}
#tnb ul:after{display:block;visibility:hidden;clear:both;content:""}
#tnb li{float:left;position:relative;margin-left: 23px;}
#tnb a{padding:0 10px;display:block;line-height:35px;}
#tnb button{width:100px;border:0;padding:0 30px 0 10px;text-align:left;height:35px;position:relative;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
#tnb button span{display:block;text-indent:-999px;overflow:hidden;width:35px;height:35px;position:absolute;top:0;right:0}
#tnb .tnb_mb_area{display:none;width:100px;position:absolute;padding:5px;margin-top:1px;}
#tnb .tnb_mb_area a{padding:0}
#tnb .tnb_mb_area li{float:none;}

/* ========================================
   헤더 상단 - 시각적 스타일 (Figma Design System)
   ======================================== */
#hd_top {
    background: var(--cwnu-primary-1);
}

#logo {
    background: var(--cwnu-primary-2);
}

#btn_gnb {
    background: url(../img/menu-cl.png) 50% 50% no-repeat var(--cwnu-primary-1);
}

#btn_gnb.btn_gnb_open {
    background: url(../img/menu-op.png) 50% 50% no-repeat var(--cwnu-primary-1);
}

/* ========================================
   상단 네비게이션 (TNB) - 시각적 스타일
   ======================================== */
#tnb a {
    color: var(--cwnu-white);
}

#tnb button {
    background: rgba(255, 255, 255, 0.1);
    color: var(--cwnu-white);
    border-radius: var(--cwnu-radius-sm);
}

#tnb button span {
    background: url(../img/op_btn.png) 50% 50% no-repeat rgba(255, 255, 255, 0.15);
    border-radius: var(--cwnu-radius-sm);
}

#tnb button:hover {
    background: rgba(255, 255, 255, 0.2);
}

#tnb .tnb_service {
    background: rgba(255, 255, 255, 0.1);
    color: var(--cwnu-white);
    border-radius: var(--cwnu-radius-sm);
}

#tnb .tnb_service:hover {
    background: rgba(255, 255, 255, 0.2);
}

#tnb .tnb_mb_area {
    background: var(--cwnu-primary-2);
}

#tnb .tnb_mb_area a {
    color: var(--cwnu-white);
}

#tnb .tnb_community {
    background: url(../img/home_icon.png) no-repeat 50% 50%;
    border-radius: var(--cwnu-radius-sm);
    text-indent: -99999px;
}

#tnb .tnb_shop {
    background: url(../img/shop_icon.png) no-repeat 50% 50%;
    border-radius: var(--cwnu-radius-sm);
    text-indent: -999999px;
}

#tnb .tnb_community:hover,
#tnb .tnb_shop:hover {
    background-color: var(--cwnu-primary-2);
}

/* ========================================
   레이아웃: 네비게이션 (GNB)
   ======================================== */
#gnb{position:fixed;top:0;left:0;max-width:220px;height:100%;padding-top:50px;z-index:999}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_ul{position:relative;height:100%;width:50px}
#gnb .gnb_li button{border:0;width:50px;height:50px;text-indent:-999px;overflow:hidden;}
#gnb .gnb_oparea{display:none;position:absolute;top:0;left:50px;height:100%;width:240px;padding:20px;}
#gnb .on .gnb_oparea{display:block}
#gnb .gnb_oparea h3{margin-bottom:10px;line-height:18px;font-size:1.17em}
#gnb .gnb_oparea li{line-height:36px;}
#gnb.gnb_small .gnb_oparea{display:none;}
#gnb.gnb_small .gnb_li:hover .gnb_oparea{display:block;}
.gnb_small .gnb_ul{display:block;}

/* ========================================
   메인 네비게이션 (GNB) - 시각적 스타일
   ======================================== */
#gnb .gnb_ul {
    background: var(--cwnu-primary-bg);
}

#gnb .gnb_li {
    border-bottom: 1px solid var(--cwnu-gray-200);
}

#gnb .gnb_li button {
    background-color: var(--cwnu-primary-bg);
}

#gnb .gnb_li button:hover {
    background-color: var(--cwnu-white);
}

/* 기본 메뉴 아이콘 */
#gnb .gnb_li .btn_op {
    background: url(../img/menu_default.png) 50% 50% no-repeat var(--cwnu-primary-bg);
}

#gnb .on .btn_op {
    background: url(../img/menu_default_on.png) 50% 50% no-repeat var(--cwnu-white);
}

/* 메뉴별 아이콘 - 환경설정 (menu-100) */
#gnb .gnb_li .btn_op.menu-100 {
    background: url(../img/menu-1-1.png) 50% 50% no-repeat var(--cwnu-primary-bg);
}
#gnb .on .btn_op.menu-100 {
    background: url(../img/menu-1.png) 50% 50% no-repeat var(--cwnu-white);
}

/* 메뉴별 아이콘 - 회원관리 (menu-200) */
#gnb .gnb_li .btn_op.menu-200 {
    background: url(../img/menu-2-1.png) 50% 50% no-repeat var(--cwnu-primary-bg);
}
#gnb .on .btn_op.menu-200 {
    background: url(../img/menu-2.png) 50% 50% no-repeat var(--cwnu-white);
}

/* 메뉴별 아이콘 - 게시판관리 (menu-300) */
#gnb .gnb_li .btn_op.menu-300 {
    background: url(../img/menu-3-1.png) 50% 50% no-repeat var(--cwnu-primary-bg);
}
#gnb .on .btn_op.menu-300 {
    background: url(../img/menu-3.png) 50% 50% no-repeat var(--cwnu-white);
}

/* 메뉴별 아이콘 - 기부관리 (menu-400) */
#gnb .gnb_li .btn_op.menu-400 {
    background: url(../img/menu-donation-1.svg) 50% 50% no-repeat var(--cwnu-primary-bg);
}
#gnb .on .btn_op.menu-400 {
    background: url(../img/menu-donation.svg) 50% 50% no-repeat var(--cwnu-white);
}

/* 메뉴별 아이콘 - 콘텐츠관리 (menu-500) */
#gnb .gnb_li .btn_op.menu-500 {
    background: url(../img/menu-6-1.png) 50% 50% no-repeat var(--cwnu-primary-bg);
}
#gnb .on .btn_op.menu-500 {
    background: url(../img/menu-6.png) 50% 50% no-repeat var(--cwnu-white);
}

/* 메뉴별 아이콘 - 시스템관리 (menu-900) */
#gnb .gnb_li .btn_op.menu-900 {
    background: url(../img/menu-4-1.png) 50% 50% no-repeat var(--cwnu-primary-bg);
}
#gnb .on .btn_op.menu-900 {
    background: url(../img/menu-4.png) 50% 50% no-repeat var(--cwnu-white);
}

/* 서브메뉴 영역 */
#gnb .gnb_oparea {
    background: var(--cwnu-white);
    border-right: 1px solid var(--cwnu-gray-200);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

#gnb .gnb_oparea h3 {
    color: var(--cwnu-primary-1);
    font-weight: 700;
}

#gnb .gnb_oparea li a {
    color: var(--cwnu-text-secondary);
    transition: color 0.2s ease;
}

#gnb .gnb_oparea li a:hover,
#gnb .gnb_oparea li a.on {
    color: var(--cwnu-primary-2);
}

/* ========================================
   레이아웃: 메인 컨테이너
   ======================================== */
#container{padding:0 0 0 290px;margin-top: 133px;height:100%;background:#fff;min-width:1200px;}
#container.container-small{padding-left:50px}
#container_wr{padding:25px;min-height:500px}
#container_title{position:fixed;top:50px;left:0;width:100%;line-height: 82px;font-size:1.5em;padding:0 20px;padding-left:310px;border-bottom:1px solid #ddd;background:#fff;z-index:99}
#container.container-small #container_title{padding-left:70px}
.container_wr{padding:20px;}
.btn_fixed_top {
    position: fixed;
    top: 60px;
    right: 10px;
    z-index: 100;
}
/* ========================================
   접근성 (Accessibility)
   ======================================== */
/* 화면낭독기 사용자용 (스크린 리더 대응) */
#hd_login_msg {position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden}
.sound_only, .msg_sound_only {overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip:rect(0,0,0,0)}

/* 본문 바로가기 */
#to_content a {z-index:100000;position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
#to_content a:focus, #to_content a:active {width:100%;height:70px;background:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.1em}

/* ========================================
   레이아웃: 푸터
   ======================================== */
#ft{padding:0 25px;text-align:center}
#ft p{line-height:50px;}
.scroll_top{position:fixed;bottom:10px;right:10px;width:50px;height:50px;border:0;text-align:center;z-index:50;}
.scroll_top span.top_img{display:inline-block}
.scroll_top span.top_txt{display:block}

/* ========================================
   페이징
   ======================================== */
.pg_wrap {clear:both;margin:0 0 20px;padding:20px 0 0;text-align:center}
.pg {display:inline-block}
.pg_page, .pg_current {display:inline-block;float:left;padding:0 13px;line-height:30px;margin-left:-1px}
.pg_start, .pg_prev, .pg_next, .pg_end {width:32px;text-indent:-999px;overflow:hidden}
.pg_current {display:inline-block}

/* ========================================
   미디어 쿼리
   ======================================== */
@media only screen and (max-device-width : 768px) and (orientation : landscape){
    input[type="text"]{max-width:200px}
}

@media only screen and (max-device-width : 480px) and (orientation : portrait){
    input[type="text"]{max-width:200px}
}

/* ========================================
   기본 링크 스타일
   ======================================== */
a {
    text-decoration: none;
    color: inherit;
}

/* ========================================
   디자인 시스템 변수 (Design System Variables)
   ======================================== */
:root {
    /* Colors */
    --cwnu-primary-1: #003179;
    --cwnu-primary-2: #0046ac;
    --cwnu-primary-bg: #f1f3f7;
    --cwnu-white: #ffffff;
    --cwnu-black: #000000;
    --cwnu-gray-100: #f9f9f9;
    --cwnu-gray-200: #dddddd;
    --cwnu-gray-400: #f2f2f2;
    --cwnu-warning: #ff0004;
    --cwnu-text-muted: rgba(0, 0, 0, 0.3);
    --cwnu-text-secondary: rgba(0, 0, 0, 0.6);

    /* Typography */
    --cwnu-font-title: 'Paperlogy', sans-serif;
    --cwnu-font-body: 'Pretendard', sans-serif;

    /* Spacing */
    --cwnu-spacing-xs: 4px;
    --cwnu-spacing-sm: 8px;
    --cwnu-spacing-md: 12px;
    --cwnu-spacing-lg: 16px;
    --cwnu-spacing-xl: 20px;
    --cwnu-spacing-2xl: 24px;
    --cwnu-spacing-3xl: 32px;
    --cwnu-spacing-4xl: 36px;
    --cwnu-spacing-5xl: 40px;

    /* Gap */
    --cwnu-gap-sm: 4px;
    --cwnu-gap-md: 8px;
    --cwnu-gap-lg: 10px;
    --cwnu-gap-xl: 12px;
    --cwnu-gap-2xl: 16px;
    --cwnu-gap-3xl: 20px;

    /* Border Radius */
    --cwnu-radius-sm: 4px;
    --cwnu-radius-md: 8px;
    --cwnu-radius-lg: 12px;
    --cwnu-radius-xl: 20px;
    --cwnu-radius-full: 1000px;

    /* Shadow */
    --cwnu-shadow-card: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    --cwnu-shadow-sm: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);

    /* Gradient */
    --cwnu-gradient-primary: linear-gradient(-90deg, rgb(0, 49, 121) 0%, rgb(0, 70, 172) 50%, rgb(0, 90, 223) 100%);

    /* Form Element Height (통일된 폼 요소 높이) */
    --cwnu-form-height: 40px;
}

/* ========================================
   공통 레이아웃 요소
   ======================================== */
/* 상단 통계/버튼 영역 */
.local_ov01.local_ov,
.local_ov {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cwnu-gap-md);
    padding: var(--cwnu-spacing-lg);
    margin-bottom: var(--cwnu-spacing-lg);
    background-color: var(--cwnu-primary-bg);
    border-radius: var(--cwnu-radius-lg);
    box-shadow: var(--cwnu-shadow-sm);
}

/* 통계 배지 */
.btn_ov01 {
    display: inline-flex;
    align-items: center;
    gap: var(--cwnu-gap-sm);
    padding: var(--cwnu-spacing-sm) var(--cwnu-spacing-lg);
    background-color: var(--cwnu-white);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-full);
    font-family: var(--cwnu-font-body);
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn_ov01:hover {
    border-color: var(--cwnu-primary-1);
    background-color: var(--cwnu-primary-bg);
}

.ov_txt {
    color: var(--cwnu-text-secondary);
    font-weight: 400;
}

.ov_num {
    color: var(--cwnu-primary-1);
    font-weight: 800;
}

/* 버튼 그룹 */
.btn_ov02 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cwnu-gap-md);
    align-items: center;
}

/* 검색 폼 영역 */
.local_sch01.local_sch,
.local_sch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cwnu-gap-lg);
    padding: var(--cwnu-spacing-lg);
    margin-bottom: var(--cwnu-spacing-lg);
    background-color: var(--cwnu-white);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-lg);
    justify-content: space-between;
}

/* 복합 검색 영역 */
.local_sch03.local_sch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cwnu-gap-2xl);
    padding: var(--cwnu-spacing-xl);
    margin-bottom: var(--cwnu-spacing-lg);
    background-color: var(--cwnu-white);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-lg);
}

.local_sch03 label {
    font-weight: 600;
    color: var(--cwnu-primary-1);
    margin-right: var(--cwnu-spacing-sm);
}

/* 안내문 영역 */
.local_desc01.local_desc,
.local_desc {
    padding: var(--cwnu-spacing-lg);
    margin-bottom: var(--cwnu-spacing-lg);
    background-color: var(--cwnu-primary-bg);
    border-left: 4px solid var(--cwnu-primary-1);
    border-radius: 0 var(--cwnu-radius-md) var(--cwnu-radius-md) 0;
    font-size: 14px;
    color: var(--cwnu-text-secondary);
    line-height: 1.6;
}

/* 상단 고정 버튼 */
.btn_fixed_top {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 100;
    display: flex;
    gap: var(--cwnu-gap-md);
    padding: var(--cwnu-spacing-sm);
    background-color: var(--cwnu-white);
    border-radius: var(--cwnu-radius-lg);
}

/* ========================================
   테이블 스타일
   ======================================== */
.tbl_head01.tbl_wrap,
.tbl_wrap {
    margin-bottom: var(--cwnu-spacing-xl);
    background-color: var(--cwnu-white);
    border-radius: var(--cwnu-radius-lg);
    box-shadow: var(--cwnu-shadow-sm);
    overflow: hidden;
    width: 100%;
}

.tbl_head01.tbl_wrap table,
.tbl_wrap table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--cwnu-font-body);
}

/* 테이블 헤더 */
.tbl_head01 thead tr,
.tbl_wrap thead tr {
    background-color: var(--cwnu-primary-1);
}

.tbl_head01 thead th,
.tbl_wrap thead th {
    padding: var(--cwnu-spacing-md) var(--cwnu-spacing-lg);
    color: var(--cwnu-white);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    border-bottom: none;
}

/* 테이블 본문 */
.tbl_head01 tbody tr,
.tbl_wrap tbody tr {
    border-bottom: 1px solid var(--cwnu-gray-200);
    transition: background-color 0.2s ease;
}


.tbl_head01 tbody tr:nth-child(even),
.tbl_wrap tbody tr:nth-child(even) {
    /* background-color: var(--cwnu-gray-100); */
}


.tbl_head01 tbody td,
.tbl_wrap tbody td {
    padding: var(--cwnu-spacing-md) var(--cwnu-spacing-lg);
    font-size: 16px;
    color: var(--cwnu-black);
    text-align: center;
    vertical-align: middle;
}

/* 테이블 셀 타입별 스타일 */
.td_chk {
    width: 40px;
    text-align: center;
    padding: var(--cwnu-spacing-sm) !important;
}

.td_chk input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--cwnu-primary-1);
}

.td_num {
    text-align: right !important;
    font-family: 'Pretendard', monospace;
    font-weight: 500;
}

.td_mng {
    min-width: 120px;
    white-space: nowrap;
}

.td_mng .btn {
    margin: 2px;
}

.td_mbname {
    text-align: left !important;
    font-weight: 500;
}

.td_tel {
    font-family: 'Pretendard', monospace;
}

.td_date {
    color: var(--cwnu-text-muted);
    font-size: 13px;
}

.td_center {
    text-align: center !important;
}

/* 빈 테이블 */
.empty_table {
    padding: var(--cwnu-spacing-5xl);
    text-align: center;
    background-color: var(--cwnu-gray-100);
    color: var(--cwnu-text-muted);
    font-size: 16px;
}

.empty_table::before {
    content: "📋";
    display: block;
    font-size: 48px;
    margin-bottom: var(--cwnu-spacing-lg);
}

/* 상태 라벨 배지 */
.mb_leave_msg {
    display: inline-block;
    padding: 2px 8px;
    background-color: #fef2f2;
    color: #dc3545;
    border-radius: var(--cwnu-radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.mb_intercept_msg {
    display: inline-block;
    padding: 2px 8px;
    background-color: #fffbeb;
    color: #d97706;
    border-radius: var(--cwnu-radius-sm);
    font-size: 12px;
    font-weight: 600;
}

/* tfoot 합계 행 */
.tbl_head01 tfoot tr,
.tbl_wrap tfoot tr {
    background-color: var(--cwnu-primary-bg);
    font-weight: 700;
}

.tbl_head01 tfoot td,
.tbl_wrap tfoot td {
    padding: var(--cwnu-spacing-md) var(--cwnu-spacing-lg);
    border-top: 2px solid var(--cwnu-primary-1);
}

/* ========================================
   폼 요소 통일 높이 (Form Element Unified Height)
   ======================================== */
/* 모든 input, select, button 기본 높이 통일 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
select,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    height: var(--cwnu-form-height);
    font-size: 14px;
    vertical-align: middle;
}

/* 검색 폼 내 요소들 */
.local_sch input[type="text"],
.local_sch select,
.local_sch button,
.local_sch01 input[type="text"],
.local_sch01 select,
.local_sch01 button,
.local_sch03 input[type="text"],
.local_sch03 select,
.local_sch03 button {
    height: var(--cwnu-form-height);
}

/* 테이블 내 폼 요소 */
.tbl_head01 input[type="text"],
.tbl_head01 select,
.tbl_frm01 input[type="text"],
.tbl_frm01 select {
    height: var(--cwnu-form-height);
    line-height: calc(var(--cwnu-form-height) - 2px);
}

/* ========================================
   폼 스타일
   ======================================== */
.tbl_frm01.tbl_wrap {
    background-color: var(--cwnu-white);
    border-radius: var(--cwnu-radius-lg);
    /* box-shadow: var(--cwnu-shadow-card); */
    overflow: hidden;
    margin-bottom: var(--cwnu-spacing-xl);
}

.tbl_frm01 table {
    width: 100%;
    border-collapse: collapse;
}

.tbl_frm01 table th {
    width: 150px;
    padding: var(--cwnu-spacing-md) var(--cwnu-spacing-lg);
    background-color: var(--cwnu-primary-bg);
    font-weight: 600;
    font-size: 14px;
    color: var(--cwnu-primary-1);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--cwnu-gray-200);
}

    .tbl_frm01 table td {[]
    padding: var(--cwnu-spacing-md) var(--cwnu-spacing-lg);
    border-bottom: 1px solid var(--cwnu-gray-200);
    vertical-align: middle;
    text-align: left;
}

/* 입력 필드 */
.frm_input {
    width: 400px;
    flex: 1;
    max-width: 100%;
    height: var(--cwnu-form-height);
    padding: 0 var(--cwnu-spacing-md);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-md);
    font-family: var(--cwnu-font-body);
    font-size: 14px;
    color: var(--cwnu-black);
    background-color: var(--cwnu-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.frm_input:focus {
    outline: none;
    border-color: var(--cwnu-primary-1);
    box-shadow: 0 0 0 3px rgba(0, 49, 121, 0.1);
}

.frm_input:hover {
    border-color: var(--cwnu-primary-2);
}

.frm_input::placeholder {
    color: var(--cwnu-text-muted);
}

/* 셀렉트 박스 */
select {
    padding: 0 var(--cwnu-spacing-md);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-md);
    font-family: var(--cwnu-font-body);
    font-size: 14px;
    color: var(--cwnu-black);
    background-color: var(--cwnu-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003179' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: var(--cwnu-primary-1);
    box-shadow: 0 0 0 3px rgba(0, 49, 121, 0.1);
}

select:hover {
    border-color: var(--cwnu-primary-2);
}

select.frm_input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003179' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

select.frm_input:hover {
    border-color: var(--cwnu-primary-1);
}

/* 텍스트영역 */
textarea.frm_input,
textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--cwnu-spacing-md);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-md);
    font-family: var(--cwnu-font-body);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea:focus {
    outline: none;
    border-color: var(--cwnu-primary-1);
    box-shadow: 0 0 0 3px rgba(0, 49, 121, 0.1);
}

/* 날짜 입력 필드 */
input[type="date"].frm_input {
    max-width: 100%;
}

/* 라디오 버튼 인라인 */
.frm_radio_inline {
    display: inline-flex;
    align-items: center;
    gap: var(--cwnu-gap-md);
    margin-right: var(--cwnu-spacing-lg);
}

.frm_radio_inline input[type="radio"] {
    accent-color: var(--cwnu-primary-1);
}

/* ========================================
   버튼 스타일
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cwnu-gap-sm);
    height: var(--cwnu-form-height);
    padding: 0 var(--cwnu-spacing-lg);
    border: 1px solid transparent;
    border-radius: var(--cwnu-radius-full);
    font-family: var(--cwnu-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: var(--cwnu-form-height);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Primary 버튼 */
.btn_01,
.btn-primary {
    background-color: var(--cwnu-primary-1);
    border-color: var(--cwnu-primary-1);
    color: var(--cwnu-white);
}

.btn_01:hover,
.btn-primary:hover {
    background-color: var(--cwnu-primary-2);
    border-color: var(--cwnu-primary-2);
}

.btn_01:active,
.btn-primary:active {
    background-color: #002460;
}

/* Secondary 버튼 (Outline) */
.btn_02,
.btn-secondary {
    background-color: var(--cwnu-white);
    border-color: var(--cwnu-primary-1);
    color: var(--cwnu-primary-1);
}

.btn_02:hover,
.btn-secondary:hover {
    background-color: var(--cwnu-primary-bg);
}

.btn_02:active,
.btn-secondary:active {
    background-color: #e5e8ed;
}

/* 테이블 내 작은 버튼 */
.btn_03 {
    padding: var(--cwnu-spacing-xs) var(--cwnu-spacing-md);
    font-size: 12px;
    border-radius: var(--cwnu-radius-sm);
}

/* 폼라인 버튼 (테이블 선택 등) */
.btn_frmline,
button.btn_frmline,
a.btn_frmline {
    display: inline-block;
    height: var(--cwnu-form-height);
    line-height: var(--cwnu-form-height);
    padding: 0 var(--cwnu-spacing-md);
    border: none;
    border-radius: var(--cwnu-radius-sm);
    background-color: var(--cwnu-primary-1);
    color: var(--cwnu-white);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: background 0.2s ease;
}

.btn_frmline:hover,
button.btn_frmline:hover,
a.btn_frmline:hover {
    background-color: var(--cwnu-primary-2);
}

a.btn_frmline {
    text-decoration: none !important;
}

/* 제출 버튼 */
.btn_submit {
    min-width: 120px;
    height: var(--cwnu-form-height);
    padding: 0 var(--cwnu-spacing-2xl);
    background-image: var(--cwnu-gradient-primary);
    border: none;
    border-radius: var(--cwnu-radius-lg);
    color: var(--cwnu-white);
    font-size: 14px;
    font-weight: 800;
    line-height: var(--cwnu-form-height);
}

.btn_submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--cwnu-shadow-card);
}

/* 검색 버튼 */
.btn_sch2 {
    height: var(--cwnu-form-height);
    padding: 0 var(--cwnu-spacing-xl);
    background-color: var(--cwnu-primary-1);
    border-color: var(--cwnu-primary-1);
    color: var(--cwnu-white);
    border-radius: var(--cwnu-radius-md);
    line-height: var(--cwnu-form-height);
}

.btn_sch2:hover {
    background-color: var(--cwnu-primary-2);
}

.btn_sch2::before {
    content: "🔍";
    margin-right: var(--cwnu-spacing-xs);
}

/* Danger 버튼 */
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: var(--cwnu-white);
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #c82333;
}

/* Success 버튼 */
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: var(--cwnu-white);
}

.btn-success:hover {
    background-color: #218838;
    border-color: #218838;
}

/* ========================================
   페이지네이션 스타일
   ======================================== */
.pg_wrap {
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--cwnu-spacing-xl) 0;
    padding: var(--cwnu-spacing-lg) 0;
}

.pg {
    display: inline-flex;
    align-items: center;
    gap: var(--cwnu-gap-sm);
}

.pg_page,
.pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--cwnu-spacing-sm);
    border-radius: var(--cwnu-radius-sm);
    font-family: var(--cwnu-font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pg_page {
    background-color: var(--cwnu-white);
    border: 1px solid var(--cwnu-gray-200);
    color: var(--cwnu-black);
}

.pg_page:hover {
    background-color: var(--cwnu-primary-bg);
    border-color: var(--cwnu-primary-1);
    color: var(--cwnu-primary-1);
}

.pg_current {
    background-color: var(--cwnu-primary-1);
    border: 1px solid var(--cwnu-primary-1);
    color: var(--cwnu-white);
}

.pg_start,
.pg_prev,
.pg_next,
.pg_end {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--cwnu-white);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-sm);
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    transition: all 0.2s ease;
}

/* 처음으로 (<<) */
.pg_start {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003179'%3E%3Cpath d='M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3Cpath d='M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* 이전 (<) */
.pg_prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003179'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* 다음 (>) */
.pg_next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003179'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* 끝으로 (>>) */
.pg_end {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003179'%3E%3Cpath d='M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3Cpath d='M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.pg_start:hover,
.pg_prev:hover,
.pg_next:hover,
.pg_end:hover {
    background-color: var(--cwnu-primary-bg);
    border-color: var(--cwnu-primary-1);
}

/* ========================================
   배지 시스템
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cwnu-spacing-xs) var(--cwnu-spacing-sm);
    border-radius: var(--cwnu-radius-sm);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.badge-primary {
    background-color: var(--cwnu-primary-1);
    color: var(--cwnu-white);
}

.badge-secondary {
    background-color: #6c757d;
    color: var(--cwnu-white);
}

.badge-success {
    background-color: #28a745;
    color: var(--cwnu-white);
}

.badge-danger {
    background-color: #dc3545;
    color: var(--cwnu-white);
}

.badge-warning {
    background-color: #ffc107;
    color: var(--cwnu-black);
}

.badge-info {
    background-color: #17a2b8;
    color: var(--cwnu-white);
}

.badge-light {
    background-color: var(--cwnu-gray-100);
    color: var(--cwnu-black);
    border: 1px solid var(--cwnu-gray-200);
}

.badge-outline {
    background-color: var(--cwnu-white);
    color: var(--cwnu-primary-1);
    border: 1px solid var(--cwnu-primary-1);
}

/* ========================================
   섹션 타이틀
   ======================================== */
h2.section-title,
.section-title {
    display: flex;
    align-items: center;
    gap: var(--cwnu-gap-md);
    margin: var(--cwnu-spacing-xl) 0 var(--cwnu-spacing-lg);
    padding-bottom: var(--cwnu-spacing-md);
    border-bottom: 2px solid var(--cwnu-primary-1);
    font-family: var(--cwnu-font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--cwnu-primary-1);
}

.section-title::before {
    content: "■";
    color: var(--cwnu-primary-1);
}

/* ========================================
   예산/결산 테이블 특수 스타일
   ======================================== */
.budget-table,
.settlement-table {
    width: 100%;
    border-collapse: collapse;
}

.row-hang {
    background-color: var(--cwnu-primary-bg);
    font-weight: 700;
}

.row-mok {
    background-color: var(--cwnu-gray-100);
    font-weight: 600;
}

.row-subtotal {
    background-color: #e8f4fd;
    font-weight: 600;
}

.row-total {
    background-color: var(--cwnu-primary-1);
    color: var(--cwnu-white);
    font-weight: 700;
}

.td-item {
    text-align: left !important;
}

.td-item.indent-1 {
    padding-left: var(--cwnu-spacing-xl) !important;
}

.td-item.indent-2 {
    padding-left: var(--cwnu-spacing-3xl) !important;
}

.negative {
    color: var(--cwnu-warning);
}

/* 인라인 숫자 입력 */
.budget-table input[type="number"],
.settlement-table input[type="number"] {
    width: 120px;
    padding: var(--cwnu-spacing-xs) var(--cwnu-spacing-sm);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-sm);
    text-align: right;
    font-family: 'Pretendard', monospace;
}

.budget-table input[type="number"]:focus,
.settlement-table input[type="number"]:focus {
    outline: none;
    border-color: var(--cwnu-primary-1);
}

/* ========================================
   트리 구조 UI (세입과목 관리)
   ======================================== */
.tree-arrow {
    color: var(--cwnu-gray-200);
    margin-right: var(--cwnu-spacing-sm);
    font-family: monospace;
}

.account-item {
    display: inline-flex;
    align-items: center;
    gap: var(--cwnu-gap-sm);
    padding: var(--cwnu-spacing-xs) var(--cwnu-spacing-sm);
    background-color: var(--cwnu-white);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-sm);
}

.account-item:hover {
    border-color: var(--cwnu-primary-1);
    background-color: var(--cwnu-primary-bg);
}

.btn-add,
.btn-del {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

.btn-add {
    background-color: var(--cwnu-primary-1);
    border-color: var(--cwnu-primary-1);
    color: var(--cwnu-white);
}

.btn-del {
    background-color: #dc3545;
    border-color: #dc3545;
    color: var(--cwnu-white);
}

/* ========================================
   모달 스타일
   ======================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;  /* 기본적으로 숨김 */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    padding: 20px;
    background-color: var(--cwnu-white);
    border-radius: var(--cwnu-radius-lg);
    box-shadow: var(--cwnu-shadow-card);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cwnu-spacing-lg) var(--cwnu-spacing-xl);
    border-bottom: 1px solid var(--cwnu-gray-200);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--cwnu-primary-1);
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--cwnu-text-muted);
    cursor: pointer;
}

.modal-close:hover {
    color: var(--cwnu-black);
}

.modal-body {
    padding: var(--cwnu-spacing-xl);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--cwnu-gap-md);
    padding: var(--cwnu-spacing-lg) var(--cwnu-spacing-xl);
    border-top: 1px solid var(--cwnu-gray-200);
}

/* ========================================
   엑셀 출력 버튼
   ======================================== */
.btn-excel {
    background-color: #217346;
    border-color: #217346;
    color: var(--cwnu-white);
}

.btn-excel:hover {
    background-color: #1e6b3f;
    border-color: #1e6b3f;
}

/* ========================================
   반응형 조정
   ======================================== */
@media screen and (max-width: 1200px) {
    .local_sch03.local_sch {
        flex-direction: column;
        align-items: flex-start;
    }

    .tbl_frm01 table th {
        width: 120px;
    }

    .frm_input {
        max-width: 100%;
    }
}


caption {
    display: none;
}

.modal-content>h3 {
    margin-bottom: 10px;
}

/* ========================================
   기간 검색 영역 스타일
   ======================================== */
/* 기간 검색 라벨 */
.sch_label {
    font-weight: 600;
    color: var(--cwnu-black);
    font-size: 14px;
}

/* 날짜 범위 컨테이너 */
.sch_date_range {
    display: inline-flex;
    align-items: center;
    gap: var(--cwnu-gap-md);
}

/* 날짜 입력 필드 */
.frm_date {
    width: 200px !important;
    max-width: 200px !important;
    text-align: center;
}

/* 물결표 구분자 */
.sch_tilde {
    color: var(--cwnu-text-secondary);
    font-size: 14px;
}

/* 검색 버튼 오른쪽 정렬 */
.sch_btn_right {
    margin-left: auto;
}

.local_sch03 form {
    display: flex;
    align-items: center;
    gap: var(--cwnu-gap-lg);
    width: 100%;
}

select#agree_type {}

/* ========================================
   방문통계 앵커 탭 (visit anchor buttons)
   ======================================== */
.anchor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cwnu-gap-md);
    margin: var(--cwnu-spacing-lg) 0;
    padding: var(--cwnu-spacing-md);
    background-color: var(--cwnu-white);
    border: 1px solid var(--cwnu-gray-200);
    border-radius: var(--cwnu-radius-full);
}

.anchor li {
    list-style: none;
}

.anchor li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--cwnu-spacing-lg);
    height: var(--cwnu-form-height);
    border-radius: var(--cwnu-radius-full);
    font-size: 14px;
    font-weight: 500;
    color: var(--cwnu-text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.anchor li a:hover {
    background-color: var(--cwnu-primary-bg);
    border-color: var(--cwnu-primary-1);
    color: var(--cwnu-primary-1);
}

/* 선택된 탭 상태 (li.on 또는 a.on / a.active 를 사용할 수 있도록) */
.anchor li.on a,
.anchor li a.on,
.anchor li a.active {
    background-color: var(--cwnu-primary-1);
    border-color: var(--cwnu-primary-1);
    color: var(--cwnu-white);
}

/* ========================================
   캠페인 통계 막대 그래프
   ======================================== */
.campaign-stats-wrap {
    padding: var(--cwnu-spacing-xl);
}

.campaign-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--cwnu-spacing-lg);
    border-bottom: 1px solid var(--cwnu-gray-200);
    padding-bottom: var(--cwnu-spacing-md);
}

.campaign-stats-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--cwnu-primary-1);
}

.campaign-stats-period {
    font-size: 13px;
    color: var(--cwnu-text-secondary);
}

.campaign-stats-body {
    display: flex;
    flex-direction: column;
    gap: var(--cwnu-gap-md);
}

.campaign-row {
    display: grid;
    grid-template-columns: 1fr 4fr 80px;
    align-items: center;
    gap: var(--cwnu-gap-lg);
}

.campaign-name {
    font-size: 14px;
    color: var(--cwnu-black);
}

.campaign-bar-track {
    position: relative;
    height: 26px;
    background-color: var(--cwnu-primary-bg);
    border-radius: var(--cwnu-radius-full);
    overflow: hidden;
}

.campaign-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--cwnu-primary-2);
    border-radius: var(--cwnu-radius-full);
}

.campaign-count {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: var(--cwnu-primary-1);
}

.campaign-summary {
    margin-top: var(--cwnu-spacing-xl);
    padding: var(--cwnu-spacing-md) var(--cwnu-spacing-lg);
    background-color: var(--cwnu-gray-400);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--cwnu-black);
    border-radius: var(--cwnu-radius-md);
}

@media screen and (max-width: 1200px) {
    .campaign-row {
        grid-template-columns: 1fr;
    }

    .campaign-count {
        text-align: left;
    }
}