footer{
    /* margin-top: var(--space-3x-large); */
    background-color: var(--font-color);
    color: #fff;
    width: 100%;
}
.footerFrame{
    display: flex;
    justify-content: center;
}
.footer_wrap{
    width: 1400px;
    padding: 0 var(--space-normal);
}
/* 푸터 상단 */
.footerTop{
    padding-top: var(--space-x-large);
    display: flex;
    justify-content: space-between;
}
.footerTop div{
    display: flex;
}
.footerTop dl>div{
    margin-bottom: var(--space-normal);
}
.footerTop dl>div:last-of-type{
    margin-bottom: 0;
}
.footerTop dt{
    padding-right: var(--space-normal);
}
.footerTop dd{
    display: flex;
    gap: var(--space-small);
}
.footerBottom{
    margin-top: var(--space-x-large);
    padding-bottom: var(--space-x-large);
}
.sns{
    display: flex;
    gap: var(--space-small);
}
.footerTop .detail dt{
    font-weight: bold;
}
/* 푸터 하단 */
.footerBottom{
    display: flex;
    gap: var(--space-large);
}
.footerBottom h1{
    align-self: center;
    flex-shrink: 0;
}
.footerBottom h1 img{
    width: 10rem;
}
.copy{
    font-size: var(--detail);
}

@media (max-width:768px){
    html{
        font-size: var(--f-size-mob);
    }
    .commonFrame{
        width: auto;
        padding-top: var();
    }
    .footer_wrap {
        width: 100%;
        padding: 0 var(--space-normal); /* 모바일 padding 유지 */
    }

    /* 푸터 상단 */
    .footerTop{
        justify-content: center;
    }
    .footerTop dl{
        display: flex;
        gap: var(--space-normal);
        flex-wrap: wrap;
    }
    .footerTop div{
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: var(--space-normal);
    }
    .footerTop div dt{
        padding-right: 0;
        font-weight: bold;
    }
    .footerTop dd{
        display: flex;
        flex-direction: column;
    }
    .footerTop{
        flex-direction: column-reverse;
    }
    .sns{
        margin-bottom: var(--space-large);
    }
    .sns img{
        height: 80%;
    }
    /* 푸터 하단 */
    .footerBottom{
        display: flex;
        flex-direction: column-reverse;
        gap: var(--space-large);
    }
    .footerBottom h1{
        align-self: center;
    }
}

@media (max-width:340px){
    .footerTop dl{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}