@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');


/* =========================
   기본 설정
========================= */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    background-color: #ffffff;

    background-image:
    linear-gradient(
        90deg,
        rgba(10, 30, 60, 0.035) 1px,
        transparent 1px
    ),
    linear-gradient(
        rgba(10, 30, 60, 0.035) 1px,
        transparent 1px
    );

    background-size: 30px 30px;

    color: #111111;

    font-family:
    "Noto Sans KR",
    sans-serif;

}





button {

    cursor: pointer;

    border: 2px solid #0b1f45;

    background: white;

    color: #0b1f45;

    font-size: 15px;

    font-weight: 700;

    padding: 12px 20px;

    transition: 
    0.15s ease;

}



button:hover {

    background: #0b1f45;

    color: white;

}



button:active {

    transform: translateY(2px);

}






.hidden {

    display: none !important;

}





/* =========================
   로그인 화면
========================= */


#login-screen {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

}



.login-box {


    width: 420px;


    border: 3px solid #0b1f45;


    background: white;


    padding: 40px;


    text-align: center;


}





.login-box h1 {


    margin: 0;


    color: #0b1f45;


    font-size: 34px;


}



.login-box h2 {


    margin-top: 10px;


    color: #0b1f45;


    font-size: 20px;


}



.login-guide {

    margin: 30px 0 20px;

}






.member-select {


    display: grid;


    grid-template-columns:
    repeat(2, 1fr);


    gap: 12px;


}



.member-btn {


    width: 100%;


}



#login-btn {


    margin-top: 25px;


    width: 100%;


    background: #0b1f45;


    color: white;


}



#login-btn:hover {


    background: #d6a900;


    border-color: #d6a900;


    color: white;


}






/* =========================
   헤더
========================= */



header {


    background: white;


    border-bottom:
    3px solid #0b1f45;


    padding: 20px 40px;


    display: flex;


    justify-content: space-between;


    align-items: center;


}




.header-title h1 {


    margin: 0;


    color: #0b1f45;


}




.header-title p {


    margin: 5px 0 0;


}





.profile-area {


    border: 2px solid #0b1f45;


    padding: 12px 20px;


    color: #0b1f45;


    font-weight: 700;


}






/* =========================
   메인
========================= */



main {


    width: min(900px, 90%);


    margin: 40px auto;


}





.system-box {


    background: white;


    border:
    2px solid #0b1f45;


    padding: 25px;


    margin-bottom: 30px;


}





.system-box h2 {


    color: #0b1f45;


    border-bottom:
    2px solid #0b1f45;


    padding-bottom: 10px;


    margin-top: 0;


}





.case-info {


    line-height: 1.8;


}






/* =========================
   증거
========================= */



.evidence-list {


    display: grid;


    grid-template-columns:
    repeat(3, 1fr);


    gap: 15px;


    margin: 20px 0;


}





.evidence-list label {


    border:
    1px solid #0b1f45;


    padding: 15px;


    cursor: pointer;


}





.evidence-list label:hover {


    background:
    rgba(214,169,0,0.15);


}






/* =========================
   입력창
========================= */



textarea,


input,


select {


    width: 100%;


    border:
    2px solid #0b1f45;


    padding: 12px;


    font-family:
    inherit;


    font-size: 15px;


    background: white;


}





textarea {


    min-height: 120px;


    resize: vertical;


}





.radio-form,


.board-write {


    display: flex;


    flex-direction: column;


    gap: 15px;


}





/* =========================
   카드
========================= */



#radio-history,


#board-list,


#evidence-result {


    margin-top: 20px;


}




.record-card,


.board-card {


    border:
    2px solid #0b1f45;


    padding: 15px;


    margin-top: 15px;


    background: white;


}





.record-card strong,


.board-card strong {


    color: #0b1f45;


}





/* =========================
   사건 회고
========================= */


#story-select {


    margin-bottom: 15px;


}






/* =========================
   footer
========================= */



footer {


    text-align: center;


    padding: 30px;


    font-size: 12px;


    color: #555;


}





footer p {


    margin: 8px;


}





/* =========================
   모바일 대응
========================= */


@media(max-width:700px){


    .login-box {


        width: 90%;


        padding: 25px;


    }



    .member-select {


        grid-template-columns:
        1fr;


    }



    header {


        flex-direction: column;


        gap: 20px;


    }



    .evidence-list {


        grid-template-columns:
        1fr;


    }


}