@charset "euc-kr";

/* 공통 */
html,body { font-family: 'Pretendard Variable', sans-serif; }
textarea { font-family: "Pretendard Variable",sans-serif; resize: none; box-sizing: border-box; outline: none; }
button { font-family: 'Pretendard Variable', sans-serif; border: none; box-sizing: border-box; cursor: pointer; }
select { -webkit-appearance: none; cursor: pointer; -moz-appearance: none; appearance: none; filter: alpha(opacity=0); background: var(--select); padding: 0 20px 0 10px; outline: none; font-family: 'Pretendard Variable', sans-serif; }
select::-ms-expand { display:none; }
.bg-container { background-color: var(--bg); }
.wrap { width: 920px; min-height: 100vh; padding-bottom: 120px; margin: 0 auto; padding-top: 80px; box-sizing: border-box; position: relative; background-color: var(--w); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.box-shadow { box-shadow: 0 0 2px rgba(0,0,0,.08), 4px 12px 36px rgba(0,0,0,.09); }
.title-text { display: flex; align-items: center; gap: 10px;  font-size: 20px; font-weight: 600; }
.title-text b { color: var(--blue); }
.done-text { display: block; font-size: 15px; color: var(--text-gr); line-height: 1.2; margin-top: 10px; }
.line { border-top: 10px solid var(--lightblue); }
.border-top { border-top: 1px solid var(--black); }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.none { display: none; }
.content { padding: 30px; border-top: 10px solid var(--lightblue); }
.con_header { display: flex; align-items: center; justify-content: space-between; height: 30px; }
.con_header a { background-color: var(--black) !important; }
.btn { display: inline-block; font-size: 13px; padding: 10px 15px; border-radius: 5px; color: var(--w); background-color: var(--blue); }
.btn30 { font-size: 12px; line-height: 30px; padding: 0 10px; border-radius: 5px; color: var(--w); background-color: var(--blue2); }
table { border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.09); }
table thead { border-bottom: 1px solid var(--border); }
table th { height: 24px; vertical-align: middle; font-size: 12px; font-weight: 500; text-align: center; background-color: var(--lightblue); color: var(--darkgray); }
table td { height: 24px; vertical-align: middle; font-size: 12px; text-align: center; border: 1px dashed var(--border); position: relative; }

/* 스크롤 숨기기 */
::-webkit-scrollbar { width: 5px; height: 6px; }
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { background-color: rgb(181 184 185); border-radius: 5px; }

:root {
   --select : url(../images/icons/down_icon.png) no-repeat right center;
   --red: #f34242;
   --green: #67ad2a;
   --yellow: #ffc000;
   --orange: #ff7a1a;
   --black: #1a1a1a;
   --blue: #3182f7;
   --blue2: #125d9d;
   --w: #fff;
   --w1: #e5e8eb;
   --w2: #f3f3f3;
   --darkgray: #828a8e;
   --gray: #1a1a1a70;
   --gray2: #ddd;
   --bg: #f2f4f6;
   --lightblue: #f2f4f6;
   --border: #d1d6db;
   --text-gr: #8b95a1;
   --g0: #fff;
   --g1: #f59645;
   --g2: #f58545;
   --g3: #f57b41;
   --g4: #f36c39;
   --g5: #f25f34;
   --g6: #f15230;
   --g7: #f1492e;
   --g8: #ef3728;
   --g9: #ee2e26;
   --g10: #ed1d25;
   /* --g1: rgba(226,32,32,0.1);
   --g2: rgba(226,32,32,0.2);
   --g3: rgba(226,32,32,0.3);
   --g4: rgba(226,32,32,0.4);
   --g5: rgba(226,32,32,0.5);
   --g6: rgba(226,32,32,0.6);
   --g7: rgba(226,32,32,0.7);
   --g8: rgba(226,32,32,0.8);
   --g9: rgba(226,32,32,0.9);
   --g10: rgba(226,32,32,1); */
   /* --g1: rgba(116,124,129,0.1);
   --g2: rgba(116,124,129,0.2);
   --g3: rgba(116,124,129,0.3);
   --g4: rgba(116,124,129,0.4);
   --g5: rgba(116,124,129,0.5);
   --g6: rgba(116,124,129,0.6);
   --g7: rgba(116,124,129,0.7);
   --g8: rgba(116,124,129,0.8);
   --g9: rgba(116,124,129,0.9);
   --g10: rgba(116,124,129,1); */
}

.header { display: flex; justify-content: center; width: 100%; position: fixed; top: 0; z-index: 9; }
.header .header-content { width: 920px; display: flex; justify-content: space-between; align-items: center; height: 80px; background-color: rgb(255,255,255,0.7); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); border-left: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0 30px; }
.header .header-content .logo { display: flex; align-items: center; gap: 5px; font-size: 20px; }
.header .header-content .logo img { width: 20px; }
.header .header-content .login > a { font-size: 13px; font-weight: 500; line-height: 32px; padding: 0 20px; background-color: var(--blue2); color: var(--w); border-radius: 20px; }
.header .header-content .login .memeber { display: flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 5px; padding: 5px 10px; }
.header .header-content .login .memeber img { width: 24px; height: 24px; }
.header .header-content .login .memeber:hover { background-color: var(--lightblue); }
.header .header-content .login .memeber .user { font-size: 13px; color: var(--black); }
.header .header-content .login .memeber .user span { font-size: 15px; font-weight: 500; }
.header .header-content .login .memeber-box { min-width: 200px; position: absolute; border-radius: 5px; background-color: var(--w); box-shadow: 0 0 2px rgba(0,0,0,.08), 4px 8px 16px rgba(0,0,0,.09); box-sizing: border-box; top: 40px; right: 0; transform: scale(0); transition: 0.2s; opacity: 0; }
.header .header-content .login .memeber-box.on { opacity: 1; transform: scale(1); }
.header .header-content .login .memeber-box .log-out a { padding: 15px 20px; font-size: 13px; text-align: center; }
.header .header-content .login .memeber-box .user-name { border-bottom: 1px solid var(--lightblue); padding: 15px 20px; text-align: center; }
.header .header-content .login .memeber-box .user-name .user { font-size: 14px; margin-top: 10px; }
.header .header-content .login .memeber-box .user-name .user span { font-size: 16px; font-weight: 500; }
.header .header-content .login .memeber-box .user-name .user-email { display: block; font-size: 13px; color: var(--darkgray); margin-top: 5px; }
.header .header-content.main-header .prev { display: none; }
.header.border .header-content { border-bottom: 1px solid var(--w1); }

.menu { display: flex; justify-content: center; flex-direction: row; gap: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.menu .menu-box { padding: 10px; }
.menu .menu-box.this h1 { color: var(--blue); }
.menu .menu-box h1 { font-size: 15px; color: var(--black); font-weight: 600; line-height: 1.2; letter-spacing: -0.5px; }

.banner-wrap { width: 100%; height: 260px; margin-bottom: 40px; border-radius: 10px; position: relative; }
.banner-wrap .banner { width: 100%; height: 100%; border-radius: 15px; }
.banner-wrap .banner .swiper-pagination { text-align: left; left: 53px; bottom: 30px; }
.banner-wrap .banner .swiper-pagination-bullet { background-color: #fff; }
.banner-wrap .banner .swiper-pagination-bullet-active { width: 20px; border-radius: 5px; background-color: #fff !important; }
.banner-wrap .banner-btn-box { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%,0); display: flex; justify-content: center; align-items: center; gap: 10px; z-index: 9; }
.banner-wrap .banner-btn-box .banner-btn { display: flex; align-items: center; gap: 10px; background-color: #18263acc; border-radius: 5px; padding: 10px 20px; }
.banner-wrap .banner-btn-box .banner-btn img { width: 20px; }
.banner-wrap .banner-btn-box .banner-btn h1 { font-size: 15px; color: #fff; }

.info-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.info-wrap .info-box { box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.13); padding: 15px 20px; border-radius: 10px; }
.info-wrap .info-box span { font-size: 13px; letter-spacing: -0.4px; word-break: keep-all; }
.info-wrap .info-box span b { color: var(--blue2); font-weight: 500; }

/* .search-box { display: flex; gap: 10px; margin-top: 20px; } */
.search-wrap { display: flex; justify-content: space-between; gap: 40px; }
.search-box { flex:1; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.search-box:last-child { border-left: 1px solid #ddd; padding-left: 40px; }
.search-box h2 { font-size: 15px; font-weight: 500; }
/* .search-box .label { display: flex; align-items: center; gap: 5px; border: 1px solid var(--border); padding: 8px 8px 8px 12px; cursor: pointer; border-radius: 4px; position: relative; } */
/* .search-box .label h1 { font-size: 14px; font-weight: 300; } */
.search-box .label { display: flex; align-items: center; gap: 5px; border: 1px solid var(--border); padding: 5px 5px 5px 10px; cursor: pointer; border-radius: 4px; position: relative; }
.search-box .label h1 { min-width: 80px; font-size: 12px; font-weight: 300; }
.search-box .label:hover { background-color: #f9f9f9; }
.search-box .label:hover h1 { color: var(--blue); }

.search-box .search-date { display: flex; height: 32px; align-items: center; gap: 5px; }
.search-box .search-date i { display: flex; align-items: center; gap: 2px; }
.search-box .search-date i input { width: 14px; height: 14px; cursor: pointer; }
.search-box .search-date i label { font-size: 13px; }
.search-box .search-date > h1 { width: 65px; font-size: 13px; font-weight: 500; }

.search-box .search-list { display: flex; justify-content: space-between; }
.search-box .search-list i { display: flex; align-items: center; gap: 5px; }
.search-box .search-list i > h1 { width: 65px; font-size: 13px; font-weight: 500; }

.search-result { display: flex; align-items: center; background-color: var(--bg); padding: 8px 10px; margin-top: 15px; border: 1px dashed var(--border); }
.search-result h1 { color: var(--blue2); font-size: 13px; font-weight: 500; padding: 0 15px 0 5px }
.search-result i span { font-size: 12px; color: var(--darkgray); background-color: var(--w); padding: 5px 12px; border-radius: 50px; }
.search-result i { display: flex; align-items: center; gap: 10px; }
.search-result .result-reset-btn { display: flex; justify-content: right; flex: 1; }
.search-result .result-reset-btn button { display: flex; align-items: center; gap: 5px; background-color: transparent; border-radius: 4px; padding: 5px 10px; font-size: 13px; }
.search-result .result-reset-btn button:hover { background-color: #e1e6eb; }

.search-popup { position: absolute; box-shadow: rgba(0,0,0,0.25) 0px 4px 7px; background-color: var(--w); border-radius: 4px; opacity: 0; visibility: hidden; transition: 0.1s; z-index: 8; }
.search-popup.on { visibility: visible; opacity: 1; transform: translateY(5px); }
.search-popup h2 { font-size: 13px; font-weight: 500; }
.search-popup-wrap { display: flex; }
.search-popup-box { width: 100%; padding: 15px; }
.search-popup-box.border { border-left: 1px solid var(--border); }
.search-popup-box h2 { display: block; margin-bottom: 10px; }
.search-popup-box i { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.search-popup-box i input { width: 16px; height: 16px; }
.search-popup-box i label { font-size: 14px; }
.search-popup-bottom { padding: 10px 15px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 5px; }
.search-popup-bottom i { display: none; }
.search-popup-bottom i input { width: 110px; text-align: center; height: 30px; border-radius: 4px; border: 1px solid var(--border); box-sizing: border-box; }
.search-popup-bottom i select { height: 30px; border-radius: 4px; box-sizing: border-box; border: 1px solid var(--border); }
.search-popup-bottom .search-popup-btn { display: flex; justify-content: right; flex: 1; }
/* .search-popup-bottom .search-popup-btn button { background-color: var(--g5); padding: 8px 10px; border-radius: 4px; font-size: 13px; } */
.search-popup-bottom .search-popup-btn button { background-color: var(--g5); padding: 8px 10px; border-radius: 4px; font-size: 12px; }
.search-popup-scroll { max-height: 115px; overflow-y: scroll; }
.date-popup { width: max-content; min-width: 200px; }
.pain-popup { width: max-content; min-width: 200px; }

.login-box { display: flex; min-height: calc(100vh - 260px); flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.login-box p { font-family: 'Pretendard Variable',sans-serif; font-size: 32px; font-weight: 600; margin-bottom: 20px; color: var(--black); }
.login-box .input-box { display: flex; flex-direction: column; position: relative; }
.login-box .input-box input { width: 380px; height: 52px; border: 2px solid var(--border); border-radius: 10px; padding: 0 20px; box-sizing: border-box; font-size: 15px; }
.login-box .input-box input::placeholder { color: var(--text-gr); }
.login-box .input-box span { position: absolute; top: 50%; right: 20px; transform: translate(0,-50%); cursor: pointer; }
.login-box i { width: 380px; display: flex; justify-content: space-between; align-items: center; }
.login-box i .check-box { display: flex; gap: 5px; align-items: center; font-size: 13px; color: var(--darkgray); }
.login-box i .check-box input { width: 15px; height: 15px; border-radius: 5px; }
.login-box i span { display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--darkgray); }
.login-box i span a:hover { color: var(--blue); }
.login-box button { width: 380px; height: 52px; background-color: var(--blue2); color: var(--w); font-size: 15px; border: none; border-radius: 10px; margin-top: 10px; }

.table-wrap { display: flex; flex-direction: column; margin-top: 20px; background-color: var(--w); transition: 0.2s; }
.table-wrap .table-box { display: flex; gap: 10px; }
.table-wrap .table-box table tr:nth-child(3n+1) { border-top: 1px solid var(--black); }
.table-wrap .table-box table tr:first-child { border-top: none; }
.table-wrap .table-box table td .average { display: flex; width: calc(100% - 10px); height: 10px; margin: 0 5px; overflow: hidden; position: relative; }
.table-wrap .table-box table td .average span { width: 10%; }
.table-wrap .table-box table td .average span:nth-child(1) { background-color: var(--g1); }
.table-wrap .table-box table td .average span:nth-child(2) { background-color: var(--g2); }
.table-wrap .table-box table td .average span:nth-child(3) { background-color: var(--g3); }
.table-wrap .table-box table td .average span:nth-child(4) { background-color: var(--g4); }
.table-wrap .table-box table td .average span:nth-child(5) { background-color: var(--g5); }
.table-wrap .table-box table td .average span:nth-child(6) { background-color: var(--g6); }
.table-wrap .table-box table td .average span:nth-child(7) { background-color: var(--g7); }
.table-wrap .table-box table td .average span:nth-child(8) { background-color: var(--g8); }
.table-wrap .table-box table td .average span:nth-child(9) { background-color: var(--g9); }
.table-wrap .table-box table td .average span:nth-child(10) { background-color: var(--g10); }
.table-wrap .table-box table td .average::before { position: absolute; left:0; top:0; height: 8px; content: ''; }
.table-wrap .table-box table td .average.a12::before { width: 12%; background-color: var(--g1); }
.table-wrap .table-box table td .average.a28::before { width: 28%; background-color: var(--g2); }
.table-wrap .table-box table td .average.a37::before { width: 37%; background: var(--g3); }
.table-wrap .table-box table td .average.a52::before { width: 52%; background: var(--g5); }
.table-wrap .table-box table td .average.a82::before { width: 82%; background-color: var(--g8); }
.table-wrap .table-box table td .average.a64::before { width: 64%; background-color: var(--g6); }
.table-wrap .table-box table td .average.a94::before { width: 94%; background-color: var(--g9); }
.table-wrap .table-box table td .memo { position: absolute; border: 7px solid transparent; border-bottom-color: var(--blue); top:-7px; right: -7px; transform: rotate(45deg); }
.table-wrap .table-box table td .memo-box { position: absolute; width: max-content; top: -35px; padding: 10px; left: 100%; border-radius: 5px; background-color: var(--black); opacity: 0; visibility: hidden; transition: 0.2s; z-index: 9; }
.table-wrap .table-box table td .memo-box span { font-size: 13px; color: var(--w); letter-spacing: 0.02em; }
.table-wrap .table-box table td:hover .memo-box { visibility: visible; opacity: 1; }

.print { width: 920px; min-height: 100vh; padding: 30px; margin: auto; }
.print table th { font-size: 11px; }
.print table { box-shadow: none; }
.print .print-header { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--blue2); padding-bottom: 10px; margin-bottom: 15px; }
.print .print-header h1 { display: flex; align-items: center; gap: 5px; font-size: 17px; color: var(--blue2); }
.print .print-header h1 img { width: 20px; }
.print .print-header i { font-size: 12px; padding-bottom: 5px; }
.print .print-title { font-size: 24px; padding-bottom: 5px; letter-spacing: -0.2px; }
.print .print-footer { border-top: 2px solid var(--blue2); margin-top: 15px; padding-top: 10px; }
.print .print-footer span { font-size: 11px; color: var(--gray); }

.form-box { display: flex; gap: 10px; margin-top: 20px; justify-content: space-between; }
.data-info { width: 310px; display: flex; flex-direction: column; gap: 10px; }
.data-info h1 { font-size: 13px; }
.data-info table { margin-top: 10px; }
.data-info table th { border: 1px solid var(--border); }

.data-chart { width: 540px; border: 1px solid var(--border); position: relative; }
.data-chart h1 { font-size: 12px; font-weight: 600; position: absolute; top: -20px; right: 0; }
.data-chart.table-wrap .table-box { padding: 10px 5px; height: 100%; }
.data-chart.table-wrap .table-box table { border: none; box-shadow: none; width: auto; height: 100%; }
.data-chart.table-wrap .table-box table td { border: none; width: 15px; height: 100%; padding: 0; }
.data-chart.table-wrap .table-box table td .average { height: 100%; width: calc(100% - 5px); }
.data-chart.table-wrap .table-box table td .average::before { width: 10px; height: 100%; bottom: 0; top: auto; }
.data-chart.table-wrap .table-box table td .average.a12::before { height: 12%; }
.data-chart.table-wrap .table-box table td .average.a28::before { height: 28%; }
.data-chart.table-wrap .table-box table td .average.a37::before { height: 37%; }
.data-chart.table-wrap .table-box table td .average.a64::before { height: 57%; }
.data-chart.table-wrap .table-box table td .average.a82::before { height: 87%; }

.data-daily { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.data-daily table th { border: 1px solid var(--border); position: relative; }
.data-daily table .data-set { position: absolute; right: 5px; top: 0; height: 24px; display: flex; align-items: center; justify-content: center; }

.cs_box { background-color: #f3f3f3; padding: 15px 20px; margin-top: 20px; border-radius: 10px; }
.cs_box p { line-height: 2; font-size: 13px; }
.cs_btn { font-size: 15px; text-align: center; background-color: var(--blue2); color: var(--w); padding: 15px; border-radius: 10px; margin-top: 10px; }
.cs_list_box { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.cs_list_box a { display: flex; justify-content: space-between; align-items: center; font-size: 13px; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.13); padding: 15px 20px; border-radius: 10px; }
.cs_list_box a i { display: flex; align-items: center; gap: 20px; }
.cs_list_box a i h1 { width: 50px; text-align: center; }
.cs_list_box a i h1.N { color: var(--orange); }
.cs_list_box a i h1.Y { color: var(--blue); }

.inq_box { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.inq_box span { display: flex; align-items: center; gap: 3px; font-size: 13px; margin-bottom: 10px; }
.inq_box span p { color: var(--red); }
.inq_box input { width: 100%; padding: 12px 10px; border: 1px solid #dbdee2; border-radius: 5px; box-sizing: border-box; }
.inq_box textarea { width: 100%; min-height: 200px; padding: 12px 10px; border: 1px solid #dbdee2; border-radius: 5px; box-sizing: border-box; }
.inq_box .inq_btn { font-size: 15px; text-align: center; background-color: var(--blue2); color: var(--w); padding: 15px; border-radius: 10px; }
.inq_box .prev_btn { display: flex; justify-content: center; gap: 5px; }
.inq_box .prev_btn a { font-size: 13px; line-height: 40px; text-align: center; background-color: var(--blue2); color: var(--w); padding: 0 20px; border-radius: 5px; }
.inq_box .prev_btn a.del { background-color: var(--darkgray); }

.footer { position: absolute; width: 100%; left: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 20px 0; border-top: 1px solid var(--w1); }
.footer i { display: flex; align-items: center; gap: 5px; padding-bottom: 10px; }
.footer i a { font-size: 13px; display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 20px 0 15px; border-radius: 5px; background-color: var(--black); color: var(--w); }
.footer i a:last-child { background-color: #7CB342; color: var(--w); }
.footer span { font-size: 11px; color: var(--gray); margin-top: 5px; }

.terms { padding: 0 30px 30px 30px; line-height: 2; word-break: keep-all; }
.terms h1 { font-weight: 600; font-size: 20px; }
.terms h2 { font-weight: 600; font-size: 16px; padding-top: 10px; }
.terms h3 { font-weight: 600; font-size: 14px; padding-top: 10px; }
.terms p { font-size: 14px; color: #555; }
.terms ul li { list-style-type: disc; margin-left: 20px; font-size: 14px; }