/* =================================
ROADMAP PAGE
================================ */

.roadmap-container{
	max-width:1000px;
	margin:0 auto;
	padding:60px 20px;
}



/* =================================
TITLE
================================ */

.roadmap-title{
	font-size:36px;
	font-weight:700;
	margin-bottom:40px;
	letter-spacing:.05em;
}



/* =================================
SECTION TITLE
================================ */

.roadmap-section-title{
	font-size:22px;
	margin-top:50px;
	margin-bottom:15px;
	font-weight:600;
	color: #334155;
}


/* =================================
TABLE
================================ */

.roadmap-table{

width:100%;
border-collapse:collapse;
background:#fff;
table-layout:fixed;
}


/* 列幅 */

.roadmap-table th:nth-child(1),
.roadmap-table td:nth-child(1){
	width:50%;
}

.roadmap-table th:nth-child(2),
.roadmap-table td:nth-child(2){
	width:20%;
	text-align:center;
}

.roadmap-table th:nth-child(3),
.roadmap-table td:nth-child(3){
	width:30%;
}




/* header */

.roadmap-table th{

text-align:left;
padding:14px 16px;
font-weight:600;

border-bottom:2px solid #e2e8f0;
background:#f8fafc;

}


/* rows */

.roadmap-table td{

padding:16px;
border-bottom:1px solid #f1f5f9;

}


/* hover */

.roadmap-table tr:hover{

background:#f9fafb;

}


/* =================================
ROADMAP NAME
================================ */

.roadmap-name{

font-weight:600;

}


/* =================================
INFO BUTTON
================================ */

.roadmap-info{

margin-left:8px;

border:none;
background:#e5e7eb;

border-radius:50%;

width:20px;
height:20px;

font-size:12px;
cursor:pointer;

transition:.2s;

}

.roadmap-info:hover{

background:#cbd5f5;

}


/* =================================
VOTE BUTTON
================================ */

.roadmap-vote{

border:none;

background:#f1f5f9;

padding:6px 10px;

border-radius:8px;

font-weight:600;

cursor:pointer;

transition:.2s;

}

.roadmap-vote:hover{

background:#e2e8f0;

}


/* =================================
ARTICLE LINK
================================ */

.roadmap-link{

display:inline-block;

padding:6px 12px;

background:#111827;

color:#fff;

border-radius:6px;

font-size:13px;

text-decoration:none;

transition:.2s;

}

.roadmap-link:hover{

background:#334155;

}


/* =================================
NO ARTICLE
================================ */

.roadmap-none{

opacity:.5;
font-size:13px;

}


/* =================================
POPUP
================================ */

.roadmap-popup{

position:fixed;
top:0;
left:0;

width:100vw;
height:100vh;

background:rgba(0,0,0,.6);

display:none;

align-items:center;
justify-content:center;

z-index:9999;

}

.roadmap-popup.active{

display:flex;

}

.roadmap-popup-box{

background:#fff;

padding:30px 40px;

border-radius:12px;

max-width:500px;
width:90%;

position:relative;

box-shadow:0 10px 40px rgba(0,0,0,.2);

}

#roadmap-popup-close{

position:absolute;

top:10px;
right:12px;

border:none;
background:none;

font-size:22px;

cursor:pointer;

}



}








/* ==============================
ROADMAP TABLE
============================== */

.roadmap-table{

width:100%;
border-collapse:collapse;
margin-top:40px;
font-size:15px;

}


/* header */

.roadmap-table th{

text-align:left;
font-weight:600;
padding:16px 20px;

background:#f8fafc;
border-bottom:2px solid #e5e7eb;

color:#334155;

}


/* row */

.roadmap-table td{

padding:18px 20px;
border-bottom:1px solid #f1f5f9;

}


/* hover */

.roadmap-table tr{

transition:.25s;

}

.roadmap-table tr:hover{

background:#f9fafb;

}


/* title */

.roadmap-table td:first-child{

font-weight:600;

}


/* vote */

.roadmap-table td:nth-child(3){

font-weight:600;
color:#334155;

}


/* link */

.roadmap-table a{

display:inline-block;

padding:6px 12px;
border-radius:8px;

background:#111827;
color:#fff;

font-size:13px;
text-decoration:none;

transition:.25s;

}

.roadmap-table a:hover{

background:#334155;

}



.status-planning{

color:#a16207;
font-weight:600;

}

.status-developing{

color:#2563eb;
font-weight:600;

}

.status-complete{

color:#16a34a;
font-weight:600;

}