/* FOUC 방지: Critical Tailwind CSS */
/* 모든 HTML 페이지에 공통으로 필요한 기본 스타일 */

/* Container 클래스 (Tailwind 호환) */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Max-width 클래스들 */
.max-w-6xl {
    max-width: 72rem; /* 1152px */
}

.max-w-4xl {
    max-width: 56rem; /* 896px */
}

.max-w-2xl {
    max-width: 42rem; /* 672px */
}

/* 반응형 breakpoints */
@media (min-width: 640px) {
    .container { max-width: 640px; }
}

@media (min-width: 768px) {
    .container { max-width: 768px; }
}

@media (min-width: 1024px) {
    .container { max-width: 1024px; }
}

@media (min-width: 1280px) {
    .container { max-width: 1280px; }
}

@media (min-width: 1536px) {
    .container { max-width: 1536px; }
}

/* Margin auto (중앙 정렬) */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Padding 기본값 */
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}