/*
파일 : /css/learning.css

설명 : 학습하기 화면

Version : 1.0
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.learning-page{

    width:100%;
    padding:20px;

}

.page-title{

    text-align:center;
    margin-bottom:30px;

}

.page-title h2{

    font-size:32px;
    margin-bottom:10px;

}

.page-title p{

    margin-top:5px;
    color:#666;

}

.page-message{

    font-size:15px;

}

.unit-grid{

    display:grid;

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

    gap:25px;

}

.unit-card{

    background:#ffffff;

    border:2px solid #dcdcdc;

    border-radius:12px;

    padding:20px;

    min-height:280px;

    transition:.2s;

}

.unit-card:hover{

    border-color:#4CAF50;

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

}

.unit-card h3{

    text-align:center;

    margin-bottom:15px;

    color:#333;

}

.unit-name{

    font-size:20px;

    font-weight:bold;

    margin-bottom:10px;

}

.unit-intro{

    min-height:50px;

    color:#555;

    line-height:1.5;

    margin-bottom:15px;

}

.unit-title{

    margin-bottom:15px;

    color:#444;

}

.progress-bar{

    width:100%;

    height:18px;

    background:#eeeeee;

    border-radius:10px;

    overflow:hidden;

}

.progress-fill{

    width:0%;

    height:100%;

    background:#4CAF50;

}

.progress-text{

    text-align:center;

    margin-top:8px;

    margin-bottom:20px;

    font-size:14px;

}

.button-group{

    display:flex;

    justify-content:space-between;

    gap:8px;

}

.button-group button{

    flex:1;

    height:45px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

}

.button-group button:hover{

    opacity:.9;

}

.button-group button:nth-child(1){

    background:#8BC34A;

    color:white;

}

.button-group button:nth-child(2){

    background:#FF9800;

    color:white;

}

.button-group button:nth-child(3){

    background:#F44336;

    color:white;

}

/* ============================= */
/* Tablet */
/* ============================= */

@media(max-width:1100px){

    .unit-grid{

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

    }

}

/* ============================= */
/* Mobile */
/* ============================= */

@media(max-width:768px){

    .learning-page{

        padding:15px;

    }

    .unit-grid{

        grid-template-columns:1fr;

    }

}