body{
	
	margin:0;
	background:#f5f5f5;
	font-family:sans-serif;
	
}

.card{
	
	width:calc(100% - 60px);
	max-width:1800px;
	margin;30px auto;
	background:white;
	border-radius:15px;
	padding:30px;
	box-sizing:border-box;
	
}

.logo{
	
	width:280px;
	
}

.summary{

    display:flex;

    gap:20px;

    margin:25px 0;

}

.countBox{

    flex:1;

    background:#003b88;

    color:white;

    border-radius:12px;

    padding:20px;

    text-align:center;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

}

.countBox h2{

    font-size:42px;

    margin:10px 0 0;

}

.countBox p{

    margin:0;

    font-size:15px;

}

table{
	
	width:100%;
	border-collapse:collapse;
	table-layout:fixed;
}

th{
	
	background:#003b88;
	color:white;
	padding:12px;
	border:1px solid #dcdcdc;
	
}

td{
	
	padding:12px;
	border-bottom:1px solid #dcdcdc;
	
}

#updateTime{

    text-align:right;

    color:#666;

    margin-bottom:25px;

}

th:nth-child(1),
td:nth-child(1){

    width:60px;

}

th:nth-child(2),
td:nth-child(2){

    width:110px;

}

th:nth-child(3),
td:nth-child(3){

    width:180px;

}

th:nth-child(4),
td:nth-child(4){

    width:220px;

}

th:nth-child(5)
td:nth-child(5){
	
	width:220px;
	
}

.tableArea{
	
	max-height:700px;
	overflow:auto;
	
}

thead th{
	
	position:sticky;
	top:0;
	z-index:10;
	
}

.right{
	
	text-align:right;
	
}

.toolbar{

    display:flex;

    gap:20px;

    align-items:flex-end;

    margin:25px 0;

    flex-wrap:wrap;

}

.tool{

    display:flex;

    flex-direction:column;

}

.tool label{

    font-size:13px;

    color:#666;

    margin-bottom:5px;

}

.tool select,
.tool input{

    width:220px;

    height:38px;

    padding:0 10px;

    border:1px solid #ccc;

    border-radius:6px;

    font-size:15px;

}

.search{

    margin-left:auto;

}

.rate{

    background:#CC0202;

}

.tabs{

    display:flex;

    gap:8px;

    margin:20px 0;
	
	border-bottom: 1px solid #ddd;

}

.tab{

    padding:12px 24px;

    border:none;

    border-radius:8px 8px 0 0;

    background:#f3f3f3;

    cursor:pointer;

    font-size:15px;

}

.tab.active{

    background:#003b88;

    color:#fff;

}

.tab:hover{

    background:#e6e6e6;

}

.rankingTable{

    width:100%;
    border-collapse:collapse;
    margin-top:20px;

}

.rankingTable th{

    background:#0b4ea2;
    color:#fff;
    padding:15px;

}

.rankingTable td{

    padding:15px;
    border-bottom:1px solid #ddd;

}

.rankingTable tr:hover{

    background:#f5f8fc;

}

.rankingTable{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

.rankingTable th{

    background:#003b88;

    color:#fff;

    padding:14px;

}

.rankingTable td{

    padding:14px;

    border-bottom:1px solid #ddd;

}

.bar{

    height:18px;

    background:#003b88;

    border-radius:9px;

}

/* ================================
   DATE FILTER
================================ */

.dateTool{
    min-width:390px;
}

.dateInputs{
    display:flex;
    align-items:center;
    gap:8px;
}

.dateInputs input[type="date"]{
    height:40px;
    padding:0 10px;

    border:1px solid #d5d9df;
    border-radius:6px;

    background:#fff;
    color:#333;

    font-size:14px;

    box-sizing:border-box;
}

.dateInputs span{
    color:#777;
    flex-shrink:0;
}

#searchDate{
    height:40px;
    padding:0 16px;

    border:none;
    border-radius:6px;

    background:#1f3a5f;
    color:#fff;

    font-size:14px;
    font-weight:600;

    cursor:pointer;
    white-space:nowrap;

    transition:0.2s;
}

#searchDate:hover{
    opacity:0.85;
}

#searchDate:active{
    transform:translateY(1px);
}
/* ================================
   TOOLBAR LAYOUT
================================ */

.toolbar{
    display:flex;
    align-items:flex-end;
    gap:20px;
    width:100%;
    flex-wrap:nowrap;
}


/* COMMON TOOL */
.tool{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

.tool label{
    margin:0;
}


/* SORT */
.tool:nth-child(1){
    flex:1 1 180px;
    min-width:140px;
}


/* STORE */
.tool:nth-child(2){
    flex:1 1 180px;
    min-width:140px;
}


/* DATE */
.tool:nth-child(3){
    flex:2.5 1 430px;
    min-width:390px;
}


/* DATE INPUTS */
.dateInputs{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
}

.dateInputs input[type="date"]{
    flex:1;
    min-width:120px;
    width:auto;
}

.dateInputs span{
    flex-shrink:0;
}


/* NAME SEARCH */
.tool.search{
    flex:1 1 180px;
    min-width:140px;
}

.tool.search input{
    width:100%;
}


/* INPUT / SELECT */
.toolbar select,
.toolbar input{
    width:100%;
    height:40px;
    box-sizing:border-box;
}


/* FILTER BUTTON */
#searchDate{
    height:40px;
    padding:0 16px;

    flex-shrink:0;

    border:none;
    border-radius:6px;

    background:#1f3a5f;
    color:#fff;

    font-size:14px;
    font-weight:600;

    cursor:pointer;
    white-space:nowrap;
}


/* SMALL PC */
@media (max-width:1200px){

    .toolbar{
        gap:12px;
    }

    .tool:nth-child(1),
    .tool:nth-child(2),
    .tool.search{
        min-width:120px;
    }

    .tool:nth-child(3){
        min-width:360px;
    }

    .dateInputs{
        gap:6px;
    }

    #searchDate{
        padding:0 12px;
    }

}
/* ================================
   EXCEL EXPORT
================================ */

.exportArea{
    display:flex;
    justify-content:flex-end;

    width:100%;

    margin-top:16px;
    margin-bottom:10px;
}

#exportExcel{
    height:40px;
    padding:0 20px;

    border:none;
    border-radius:6px;

    background:#217346;
    color:#fff;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    white-space:nowrap;
}

#exportExcel:hover{
    opacity:0.85;
}

#exportExcel:active{
    transform:translateY(1px);
}