/* 기본 설정 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif; }

body { 
    background: #f8f9fa; 
    display: flex; 
    align-items: flex-start; /* 중앙 정렬에서 상단 정렬로 변경 */
    justify-content: center; 
    height: 100vh;
    padding-top: 5vh; /* 화면 상단에서 5% 정도만 띄움 */
    overflow: hidden; 
}

.container { 
    width: 92%; 
    max-width: 400px; 
    text-align: center; 
    background: #fff; 
    padding: 25px 20px; /* 내부 여백 최적화 */
    border-radius: 12px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.06); 
    border-top: 5px solid #00a0e9; 
}

/* 로고 영역 상단 여백 제거 */
.logo-area {
    margin-top: 0;
    margin-bottom: 10px;
}

.logo-img { 
    max-width: 140px; 
    height: auto;
    display: block;
    margin: 0 auto;
}

.status-badge { 
    display: inline-block; 
    padding: 3px 10px; 
    background: #e8f5e9; 
    color: #89c13d; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 0.7rem; 
    margin-bottom: 12px; 
}

h2 { font-size: 1.2rem; color: #2c3e50; margin-bottom: 6px; }
p { line-height: 1.4; color: #666; font-size: 0.8rem; margin-bottom: 15px; }

/* 카운트다운 박스 크기 더 축소 */
.countdown-wrapper { 
    display: flex; 
    justify-content: center; 
    gap: 6px; 
    margin: 15px 0; 
}

.time-unit { 
    background: #00a0e9; 
    color: white; 
    width: 60px; 
    padding: 8px 0; 
    border-radius: 6px; 
}

.time-unit span { display: block; font-size: 1.2rem; font-weight: 800; }
.time-unit p { font-size: 0.55rem; margin: 0; opacity: 0.8; }

/* 박스 내 텍스트 수직 중앙 정렬 수정 */
.schedule { 
    margin-bottom: 20px; 
    padding: 10px 15px; /* 상하 여백을 균등하게 조정 */
    background: #f1f3f5; 
    border-radius: 6px; 
    font-size: 0.8rem; 
    display: inline-flex; /* flex로 변경하여 중앙 정렬 제어 */
    align-items: center; 
    justify-content: center;
    line-height: 1; /* 행간을 초기화하여 치우침 방지 */
}

.schedule p {
    margin-bottom: 0; /* 내부 p 태그의 하단 마진 제거 */
    color: #444;
}

.schedule strong { 
    color: #00a0e9; 
    margin-left: 5px; /* 텍스트 간 간격 확보 */
}

/* 푸터 밀도 극대화 */
.footer-info { 
    border-top: 1px solid #eee; 
    padding-top: 15px; 
    font-size: 0.75rem; 
}

.contact { 
    margin-top: 5px; 
    color: #777; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
}

/* 로고 이미지 자체에 여백이 있을 경우를 대비 */
img {
    vertical-align: middle;
}