@charset "euc-kr";
@import url("/css/out-font.css");
/*기본태그 정의*/
html, body {padding:0;margin:0;}
/*body, td, th, select, textarea, input, a, address, span, em{font-size:12px;font-family:'돋움','Dotum', 'verdana';color:#666;}*/
body, td, th, select, textarea, input, a, address, span, em{font-size:12px;font-family:'Nanum Gothic', 'verdana';color:#666;}

/* 마진과 패딩의 초기화 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0;padding:0;}

/* 헤더 폰트 사이즈 초기화 */
h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;}

/* 리스트의 스타일 제거 */
ol, ul {list-style:none;}

/* 테이블 스타일 초기화 */

table {border-collapse:collapse;border-spacing:0;width:100%;}

table {border:0;width:100%;}
th, td{word-break:break-all}
td.title { width:100%; white-space:normal; }

ul { margin: 0;  padding: 0; }
/* 이미지 및 필드셋에서 보더 표시 초기화 */
fieldset, img {border:0;}
img{vertical-align:middle;}


a:link    {color:#666666; text-decoration:none;}
a:active    {color:#666666; text-decoration:none;}
a:visited    {color:#666666; text-decoration:none;}
a:hover    {color:#666666; text-decoration:none;}
input { outline:0;}
input[type="text"] height:30px; border:1px solid #e5e5e5; vertical-align:middle;color:#777777;font-size:15px; }
input[type="password"] { height:30px; border:1px solid #e5e5e5; vertical-align:middle;color:#777777;font-size:15px; }
input[type="text"]:focus{  border:2px solid #0066b3; }
input[type="password"]:focus{  border:2px solid #0066b3; }
select {  border:1px solid #e5e5e5; vertical-align:middle;font-family: 'S-CoreDream-3Light'; font-size:14px;color:#777777;padding:5px 0;  }

.cInput{
	border:1px solid #ccc;
	background:#fff;
	border-radius:2px;
	font-size:14px;
	line-height:30px;
	height:30px;
	padding:4px;
	margin:0px auto;
	color:#666666;
	border-radius: 5px;
}

.cInput:focus{
	border:1px solid #44acf0;
}
.login-btn { 
    font-family: 'nanumgothic',sans-serif,'S-CoreDream-3Light';font-size:20px;height:71px;background-color:#0084c4;color:#ffffff;padding:10px 20px;
	}
.login-btn:hover ,.login-btn:focus { 
      background-color:#1d96ab;
	  transition: background-color 2s ease-out 100ms;

	}
/* menu

.navi { width:100%;height:50px;border-bottom: 2px solid #b6b6b6; }
.mu-gradient{
	background: rgb(2,0,36);
    background: linear-gradient(27deg, rgba(2,0,36,1) 0%, rgba(5,16,126,1) 0%, rgba(12,66,164,1) 0%, rgba(3,102,183,1) 69%, rgba(0,212,255,1) 100%);
}
.navi  ul a li { color:#ffffff; text-align:center;line-height:50px;font-family:"notosanskr";font-size:16px;}
.mu-gradient ul a:hover li ,.mu-gradient ul a:focus li { color:#ccff99;
background: #306937 url('/images/common/mdiv.gif')no-repeat top right !important;
}

.navi  ul a:not(:last-child) li { float:left;width:10%; background:url('/images/common/mdiv.gif')no-repeat top right; }
.navi  ul a:last-child) li { float:right;width:30%; }

 */
.m-layout .mus-logout { color:#ffffff;display:inline-block;padding:8px 10px;border-radius:18px;font-size:13px;float:right;background-color:#0099cc;margin:6px  20px 0 0;}

/* login */
.login-box-outer {margin:200px auto;background-color:#5aa2a7;}
.login-box-inner { width:800px;margin:0 auto; background-color:#0084c4; }
.login-box { margin:50px 0 0 0;border-right:8px solid #ffffff; border-left:8px solid #ffffff; padding:40px; }
.login-box .login{ height:120px;}

.login{ padding:30px 0;}
.login ul{ margin:0 auto;position:relative;}
.login ul li{}
.login ul li.text{margin-bottom:10px;}
.login ul li.al_r{text-align:right}
.login ul li.text span{  font-family: 'S-CoreDream-3Light'; display:inline-block;width:60px;font-size:13.5px;color:#ffffff;font-weight: 900;}
.login ul li.btn_login{right:2px;top:0; }
.login ul li.text02{width:266px;margin-top:5px;text-align:right;}
.login ul li.text02 span{display:inline-block;width:245px;color:#4e596d;padding-left:15px;}
.login-txt { 	font-family: 'GmarketSansBold';font-size:40px; color:#ffffff;letter-spacing:-0.5px;}

input[type="button"] { vertical-align:middle;cursor:pointer;border: 1px solid #ffffff; outline:none; border-radius: 3px; }
.top-dbr { width:100%; }
.top-dbr .logo{ float:left;width:135px;text-align:center; }
.top-dbr .vi-member {float:left; width:calc(100% - 135px); text-align:right; vertical-align:text-bottom;;line-height:50px;}
.vi-member span{  font-size:13px;margin-right:25px; }
.vi-member  .vi-member span b{  font-size:14px;}
.vi-member .m-layout { float:right; }
.m-layout span { display:inline-block;color:#ffffff;display:inline-block;padding:8px 10px;border-radius:18px;font-size:13px;float:right;background-color:#0099cc;margin:6px  20px 0 0;  }
.m-layout span:hover,.m-layout span:focus { font-weight:900; background-color:#808080; border:0px solid #c7c7c7;}

.clear { clear:both; }

        /* 리스트와 동일한 폰트 크기 및 색상 적용 */
        body { font-family: 'Malgun Gothic', '맑은 고딕', dotum, sans-serif; font-size: 14px; margin: 0; padding: 0; background: #fff; color: #333; }
        
        .top-nav { background: #0076a3; height: 40px; border-bottom: 3px solid #005f82; }
        
        .container { padding: 20px; }
        .page-title { font-size: 18px; font-weight: bold; color: #000; margin-bottom: 15px; }
        .page-title span { color: #0076a3; }

        /* 입력 영역 패널: 리스트 헤더와 조화로운 회색 사용 */
        .input-panel { 
            background: #f8f9fa; 
            border: 1px solid #ced4da; 
            border-radius: 6px; 
            padding: 20px; 
            margin-bottom: 25px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        /* 테이블 폰트 크기 증대 */
        .form-table { width: 100%; border-collapse: collapse; }
        .form-table td { padding: 10px 8px; }
        .label { font-weight: bold; text-align: right; width: 80px; color: #444; font-size: 14px; }

        /* 입력창 크기 및 폰트 키움 (리스트 가독성 재현) */
        select, input[type="text"] { 
            border: 1px solid #adb5bd; 
            padding: 8px 10px; 
            font-size: 15px; 
            font-weight: 500;
            border-radius: 4px;
            vertical-align: middle; 
        }
        
        /* 금액 입력창 - 리스트의 파란색 금액 폰트 스타일 */
        .mny-input { 
            text-align: right; 
            font-weight: bold; 
            color: #0040ff; 
            width: 180px; 
            font-size: 18px;
            border: 1px solid #0040ff;
        }

        /* 메모 입력창 */
        .memo-input { width: 100%; height: 35px; }

        /* 수정 버튼: 리스트의 버튼보다 더 직관적인 크기 */
        .btn-box { display: flex; align-items: center; justify-content: center; width: 80px; height: 100px; padding-left: 10px; }
        .btn-action { 
            background: #0076a3; border: none; color: #fff; 
            font-weight: bold; font-size: 16px; width: 100%; height: 100%; cursor: pointer; border-radius: 5px;
            transition: background 0.2s;
        }
        .btn-action:hover { background: #005f82; }

        /* 하단 목록 버튼 */
        .btn-footer { margin-top: 10px; text-align: left; }
        .btn-list { padding: 10px 20px; background: #f1f3f5; color: #495057; border: 1px solid #dee2e6; cursor: pointer; border-radius: 4px; font-weight: bold; font-size: 14px; }
        .btn-list:hover { background: #e9ecef; }
    /* 상단 입력 패널 스타일 (리스트 상단에 위치) */
    .input-panel { 
        background: #f8f9fa; 
        border: 1px solid #ced4da; 
        border-radius: 6px; 
        padding: 15px 20px; 
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* 폰트 크기 증대 및 정렬 (리스트 가독성 수준) */
    .form-table { width: 100%; border-collapse: collapse; }
    .form-table td { padding: 8px 6px; font-family: 'Malgun Gothic', sans-serif; font-size: 14px; color: #333; }
    .label { font-weight: bold; text-align: right; width: 70px; padding-right: 10px !important; }

    /* 입력 요소 디자인 키움 */
    select, input[type="text"], textarea { 
        border: 1px solid #adb5bd; 
        padding: 6px 10px; 
        font-size: 15px; 
        font-weight: 500;
        border-radius: 4px;
        vertical-align: middle;
        box-sizing: border-box;
    }

    /* 금액 입력창 강조 (리스트 파란색 스타일) */
    .mny-input-top { 
        text-align: right; 
        font-weight: bold; 
        color: #0040ff; 
        width: 100%; 
        font-size: 17px;
        border: 1px solid #0040ff;
    }

    /* 메모 입력창 높이 조절 */
    .memo-input-top { width: 100%; height: 35px; resize: none; }

    /* 등록/수정 버튼 스타일 */
    .btn-box { display: flex; align-items: center; justify-content: center; padding-left: 10px; }
    .btn-action { 
        background: #0076a3; 
        border: none; 
        color: #fff; 
        font-weight: bold; 
        font-size: 16px; 
        width: 85px; 
        height: 85px; 
        cursor: pointer; 
        border-radius: 5px;
        transition: background 0.2s;
    }
    .btn-action:hover { background: #005f82; }
    .btn-edit-mode { background: #FF5722 !important; } /* 수정 모드일 때 오렌지색 강조 */
    .btn-edit-mode:hover { background: #e64a19 !important; }
   /* 1. 프리미엄 미니멀리즘 레이아웃 (15px 가독성 최적화) */
    .content-wrapper { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; font-size: 15px; color: #333; line-height: 1.6; }
    
    /* 상단 안내 문구 */
    .info-bar { 
        background: #fdf2f2; border: 1px solid #facccc; padding: 12px 18px; 
        color: #d63031; font-weight: bold; border-radius: 8px; margin-bottom: 25px;
        display: flex; align-items: center; gap: 10px;
    }

    /* 2. 시스템 테이블 스타일 (회기설정과 동일 테마) */
    .sys-table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden; border: 1px solid #dee2e6; }
    .sys-table th { background: #f8f9fa; color: #495057; padding: 15px 10px; border-bottom: 2px solid #dee2e6; font-size: 14px; text-transform: uppercase; }
    .sys-table td { padding: 12px 10px; border-bottom: 1px solid #eee; text-align: center; vertical-align: middle; }
    
    /* 활성화 행 하이라이트 (연한 보라/블루) */
    .row-active { background-color: #f0f4ff !important; border-left: 4px solid #0076a3; }

    /* 3. 입력 필드 디자인 (Apple 스타일 미니멀리즘) */
    .cbox { 
        border: 1px solid #ced4da; padding: 10px; font-size: 15px; 
        font-weight: 500; border-radius: 6px; width: 95%; box-sizing: border-box;
        transition: all 0.2s ease-in-out; background-color: #fff;
    }
    .cbox:focus { border-color: #0076a3; outline: none; box-shadow: 0 0 0 3px rgba(0,118,163,0.15); background-color: #fff; }
    
    /* 4. 버튼 시스템 */
    .btn-action { 
        padding: 0px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; 
        font-size: 13px; border: none; transition: 0.2s;  align-items: center; gap: 5px;
    }
    .btn-edit { background: #0076a3; color: #fff; }
    .btn-edit:hover { background: #005f82; }
    
    .btn-del { background: #e63946; color: #fff; }
    .btn-del:hover { background: #c82333; }

    .btn-add { 
        background: #2d3436; color: #fff; padding: 12px 30px; 
        border-radius: 6px; font-weight: bold; font-size: 15px; cursor: pointer; 
        border: none; transition: 0.2s;
    }
    .btn-add:hover { background: #000; transform: translateY(-1px); }

    /* 하단 등록 섹션 */
    .add-panel { 
        background: #f8f9fa; border: 1px solid #dee2e6; padding: 25px; 
        border-radius: 12px; margin-top: 40px; border-top: 3px solid #999900;
    }
    .section-title { font-size: 18px; font-weight: bold; color: #2d3436; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
	
	
	  .report-container { padding: 40px; background: #fff; font-family: 'Pretendard', sans-serif; }
    
    /* 상단 타이틀 구역 */
    .report-header { border-bottom: 3px solid #333; padding-bottom: 20px; margin-bottom: 30px; }
    .report-header h2 { font-size: 30px; margin: 0; color: #111; }

    #yearly_chart { width: 100%; height: 550px; margin-bottom: 50px; background: #f9f9f9; border-radius: 15px; padding: 20px; }

    .tb-base h3 { font-size: 24px; margin-bottom: 20px; }
    .tb-base table { width: 100%; border-collapse: collapse; border-top: 2px solid #222; }
    
    .tb-base th { background: #f8f9fa; padding: 20px; font-size: 18px; border-bottom: 1px solid #ddd; }
    .tb-base td { padding: 25px; border-bottom: 1px solid #eee; font-size: 18px; }
    
    .tgr { background: #fafafa; }
    
    /* 금액 강조 스타일 */
    .mny-text { font-size: 22px !important; font-weight: 800; color: #0066cc; }
    
    /* 연도 강조 */
    .year-label { font-size: 20px; font-weight: bold; color: #333; }

    .total-footer { 
        background: #0066cc; color: #fff; padding: 35px; 
        text-align: right; margin-top: 40px; border-radius: 15px;
    }
    .total-label {  color:#ffffff;font-size: 22px; opacity: 0.8; margin-right: 20px; }
    .total-amount { color:#ffffff;font-size: 36px; font-weight: 900; }