@charset "UTF-8";

/* systems.php 전용 */
.page-title{
    font-size: 3rem;
    margin-bottom: 2rem;
    display:flex;
    gap: 1rem;
    align-items:center;
}
.muted{ color:#fff9; font-size: 2rem; }

.systems-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}
.system-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 1rem;
    padding: 2rem 2.2rem;
    border: .2rem solid var(--borderColor);
    border-radius: 1.6rem;
    text-decoration:none;
    background: rgba(255,255,255,.04);
    transition: transform .08s ease, background .12s ease;
}
.system-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.07); }
.system-name{ font-size: 2.3rem; }

@media all and (min-width: 800px){
    .page-title{ font-size: 2rem; margin-bottom: 1.2rem; }
    .muted{ font-size: 1.1rem; }
    .systems-grid{ grid-template-columns: repeat(3, 1fr); gap: .8rem; }
    .system-btn{ padding: 1.1rem 1.2rem; border-radius: 1.2rem; }
    .system-name{ font-size: 1.2rem; }
}