/* ==========================================================
   Nostalgia Event System
   Common Layout
========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    height:100%;
}

body{
    margin:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;

    background:#f3f5f8;
    color:#333;

    font-family:
        "Segoe UI",
        "Yu Gothic UI",
        "Hiragino Sans",
        sans-serif;
}

/* ==========================================================
   Container
========================================================== */

.container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 24px;

}

/* ==========================================================
   Header
========================================================== */

.site-header{

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

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

}

.site-title{

    margin:0;

    padding:18px 0;

    text-align:center;

    font-size:28px;

    font-weight:700;

}

.site-title a{

    color:#222;

    text-decoration:none;

}

.site-title a:hover{

    color:#0b75ff;

}

/* ==========================================================
   Main
========================================================== */

main{

    flex:1;

    width:100%;

}

main.container{

    padding-top:40px;

    padding-bottom:40px;

}

/* ==========================================================
   Card
========================================================== */

.card{

    background:#ffffff;

    border-radius:12px;

    padding:30px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

/* ==========================================================
   Button
========================================================== */

.btn{

    display:inline-block;

    padding:12px 22px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    text-decoration:none;

    font-size:15px;

    transition:.2s;

}

.btn-primary{

    background:#0b75ff;

    color:#fff;

}

.btn-primary:hover{

    background:#005ad9;

}

.btn-secondary{

    background:#ececec;

    color:#333;

}

.btn-secondary:hover{

    background:#dddddd;

}

/* ==========================================================
   Form
========================================================== */

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

input,
select,
textarea{

    width:100%;

    padding:12px;

    border:1px solid #cccccc;

    border-radius:8px;

    font-size:15px;

    background:#fff;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:#0b75ff;

    box-shadow:0 0 0 3px rgba(11,117,255,.15);

}

/* ==========================================================
   Alert
========================================================== */

.alert{

    padding:14px;

    margin-bottom:20px;

    border-radius:8px;

}

.alert-success{

    background:#e8f8ec;

    color:#15803d;

}

.alert-error{

    background:#ffecec;

    color:#c62828;

}

.alert-info{

    background:#eef6ff;

    color:#0b75ff;

}

/* ==========================================================
   Table
========================================================== */

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    background:#f5f5f5;

    text-align:left;

}

.table th,
.table td{

    padding:12px;

    border-bottom:1px solid #eeeeee;

}

/* ==========================================================
   Footer
========================================================== */

.site-footer{

    margin-top:auto;

    border-top:1px solid #e5e7eb;

    background:#ffffff;

}

.site-footer .container{

    padding:18px 24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.site-footer p{

    margin:0;

    color:#666;

    font-size:14px;

}

.site-footer a{

    color:#0b75ff;

    text-decoration:none;

    font-weight:600;

}

.site-footer a:hover{

    text-decoration:underline;

}

/* ==========================================================
   Utility
========================================================== */

.text-center{

    text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .container{

        padding:0 16px;

    }

    .site-title{

        font-size:22px;

    }

    .site-footer .container{

        flex-direction:column;

        text-align:center;

    }

    .card{

        padding:20px;

    }

}