@charset "utf-8";

/* MOA 스킨 가로 정렬 및 반응형 기초 뼈대 복구 코드 */

/* Flexbox 정렬 (가장 핵심) */
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex--v-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.flex--h-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.flex--wrap { flex-wrap: wrap; }

/* 위치 및 텍스트 정렬 */
.relative { position: relative; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 숨김 처리 */
.displaynone, .display-none { display: none !important; }

/* PC / 모바일 기기별 노출 제어 */
.display-pc { display: block; }
.display-m { display: none; }

@media all and (max-width: 1024px) {
    .display-pc { display: none !important; }
    .display-m { display: block; }
    .display-m.flex { display: flex; }
}

/* 중앙 컨테이너(Container) 너비 제한 */
.container { 
    width: 100%; 
    max-width: 1440px; 
    margin: 0 auto; 
    padding: 0 50px; 
    box-sizing: border-box; 
}

@media all and (max-width: 1024px) {
    .container { padding: 0 24px; }
}
@media all and (max-width: 767px) {
    .container { padding: 0 16px; }
}

/* 헤더 영역 메뉴 좌우 배치 제어 */
.category { flex: 1; }
.other { margin-left: auto; }
.category__list { width: 100%; }

/* 초기화 */
button { background: transparent; border: none; cursor: pointer; }