/* 유지보수 알림 스타일 */
.maintenance-notice {
  position: relative;
  padding: 0.75rem 0.94rem; /* 12px 15px */
  background-color: #fff3cd;
  color: #856404;
  border-left: 0.31rem solid #ffc107; /* 5px */
  margin-bottom: 0.94rem; /* 15px */
  box-shadow: 0 0.125rem 0.31rem rgba(0,0,0,0.1); /* 2px 5px */
}

.notice-content {
  display: flex;
  align-items: flex-start;
}

.notice-icon {
  font-size: 1.5rem; /* 24px */
  margin-right: 0.94rem; /* 15px */
  margin-top: 0.19rem; /* 3px */
}

.notice-text {
  flex-grow: 1;
}

.notice-text strong {
  display: block;
  margin-bottom: 0.31rem; /* 5px */
  font-size: 1rem; /* 16px */
}

.notice-text p {
  margin: 0.31rem 0; /* 5px */
  font-size: 0.875rem; /* 14px */
}

.notice-time {
  font-weight: bold;
}

.notice-close {
  position: absolute;
  top: 0.625rem; /* 10px */
  right: 0.94rem; /* 15px */
  width: 1.375rem; /* 22px */
  height: 1.375rem; /* 22px */
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem; /* 14px */
  cursor: pointer;
  line-height: 1;
}

/* 반응형 글자 크기 */
@media (max-width: 768px) {
  .maintenance-notice {
    margin-bottom: 0.5rem; /* 8px */
    padding: 0.625rem 0.75rem; /* 10px 12px */
  }

  .notice-text strong {
    font-size: 0.94rem; /* 15px */
  }
  
  .notice-text p {
    font-size: 0.81rem; /* 13px */
  }
}

@media (max-width: 576px) {
  .maintenance-notice {
    margin-bottom: 0.31rem; /* 5px */
    padding: 0.5rem 0.625rem; /* 8px 10px */
  }

  .notice-icon {
    font-size: 1.25rem; /* 20px */
  }
  
  .notice-text strong {
    font-size: 0.875rem; /* 14px */
  }
  
  .notice-text p {
    font-size: 0.75rem; /* 12px */
  }

  .notice-text {
    flex-grow: 1;
    padding-right: 1.25rem; /* 20px */
  }
}

/* 초소형 기기에서 더 작게 조정 */
@media (max-width: 375px) {
  .maintenance-notice {
    margin-bottom: 0.19rem; /* 3px */
    padding: 0.375rem 0.5rem; /* 6px 8px */
  }

  .notice-text p {
    margin: 0.19rem 0; /* 3px */
    font-size: 0.69rem; /* 11px */
  }
}

/* 유지보수 페이지 스타일 */
.maintenance-page {
  background-color: #fff;
  border-radius: 0.5rem; /* 8px */
  box-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.1); /* 2px 10px */
  padding: 2.5rem 1.25rem; /* 40px 20px */
  text-align: center;
  max-width: 50rem; /* 800px */
  margin: 0 auto;
}

.maintenance-page img {
  max-width: 11.25rem; /* 180px */
  height: auto;
  margin-bottom: 1.875rem; /* 30px */
}

.maintenance-page .message {
  font-size: clamp(1rem, 3vw, 1.125rem); /* 16px, 18px */
  margin-bottom: 1.875rem; /* 30px */
  line-height: 1.6;
}

.maintenance-page h1 {
  font-size: clamp(1.375rem, 4vw, 1.75rem); /* 22px, 28px */
  margin-bottom: 1.25rem; /* 20px */
}

.scheduled-time {
  background: #f8f9fa;
  border-left: 0.25rem solid #17a2b8; /* 4px */
  padding: 0.94rem; /* 15px */
  margin: 1.56rem 0; /* 25px */
  border-radius: 0.25rem; /* 4px */
  font-size: clamp(0.875rem, 2.5vw, 1rem); /* 14px, 16px */
}

#countdown {
  margin-top: 1.875rem; /* 30px */
  font-weight: bold;
  font-size: clamp(1rem, 3vw, 1.125rem); /* 16px, 18px */
}

.contact {
  margin-top: 2.5rem; /* 40px */
  padding-top: 1.25rem; /* 20px */
  border-top: 0.06rem solid #eee; /* 1px */
  color: #666;
  font-size: clamp(0.875rem, 2.5vw, 1rem); /* 14px, 16px */
}