@charset "UTF-8";

*{
    padding: 0;
    margin: 0;
}
li{list-style: none;}
a{text-decoration: none; color: #333;}

header{
width: 100%; height: 150px;
text-align: center;
padding-top: 20px;
background-color: aquamarine;
border-radius: 40px;
margin-bottom: 10px;
}
.ML_SP{
    width: 100%; 
    display: flex;
    gap: 20px;
}

nav{
    width: 40%;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 10px 0;
}

nav ul{
    width: 100%;
}

nav ul h1{
    width: 100%;
    text-align: center;
    font-size: 24px;
}

nav ul li{
    width: 90%; height: 50px;
    line-height: 50px;
    background-color: rgb(248, 248, 248);
    margin: 20px auto;
    text-align: center;
    border-radius: 20px;
    font-size: 17.5px;
}

nav ul li:hover{
    background-color: rgb(230, 181, 255);
}
nav ul li a{
    width: 100%; height: 100%;
    display: block;
}

.Common_Rules{
    width: 60%;
    background-color: #ffffff;
    border-radius: 20px;
    padding:10px 10px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.Common_Rules h1{
    width: 100%;
    text-align: center;
    font-size: 24px;
}

.Common_Rules h2{
    width: 100%;
    text-align: center;
    font-size: 20px;
}

.Common_Rules p{
    width: 100%;
    font-size: 16px;
}

/* --- 모바일 가독성 추가 (화면 너비 768px 이하 기준) --- */
@media (max-width: 768px) {
    .ML_SP {
        flex-direction: column; /* 가로 배치를 세로 배치로 변경 */
        gap: 15px; /* 모바일에서는 간격을 약간 좁힘 */
    }

    nav, .Common_Rules {
        width: 100%; /* 40%, 60%였던 너비를 모두 100%로 변경 */
    }

    nav ul li {
        width: 95%; /* 모바일에서는 버튼이 조금 더 꽉 차 보이게 조정 */
        margin: 10px auto; /* 버튼 간의 간격 조정 */
    }

    .Common_Rules {
        padding: 20px 10px; /* 텍스트 주변 여백을 넉넉히 주어 가독성 향상 */
    }

    /* 모바일에서 텍스트 크기가 너무 크다면 약간 조정 (선택 사항) */
    nav ul h1, .Common_Rules h1 {
        font-size: 20px;
    }
    
    .Common_Rules p {
        line-height: 1.6; /* 줄 간격을 넓혀서 읽기 편하게 만듦 */
    }
}

#clsa{min-width: 500px;}