/* Google Fonts 불러오기 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Jua&display=swap");

/* 기본 스타일 */
body {
  font-family: "Inter", sans-serif; /* 기본 폰트는 Inter */
  text-align: center;
  padding: 50px;
  background-color: #f8f9fa;
}
h1 {
  color: #4b2c20;
  font-family: "Jua", sans-serif; /* h1 제목에는 Jua (한글 폰트) 적용 */
}
p {
  font-size: 18px;
  font-family: "Inter", sans-serif; /* 본문 기본적으로 Inter 적용 */
}
a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}

/* 한글과 영어를 다르게 적용하기 */
p,
a,
span {
  font-family: "Inter", sans-serif; /* 기본은 Inter */
}
p:lang(ko),
h1,
h2,
h3 {
  font-family: "Jua", sans-serif; /* 한글이면 Jua 적용 */
}

/* 모바일 최적화 */
@media screen and (max-width: 600px) {
  body {
    padding: 20px; /* 패딩 줄이기 */
  }
  h1 {
    font-size: 24px; /* 제목 크기 줄이기 */
  }
  p {
    font-size: 14px; /* 본문 크기 줄이기 */
  }
}

.notice {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.notice-item {
  background: #fff;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.notice-item h2 {
  color: #4b2c20;
}

.notice-item p {
  font-size: 16px;
  margin: 5px 0;
}

.notice-item em {
  color: #666;
  font-size: 14px;
}

.guide-item img {
  width: 100%; /* 부모 요소 크기에 맞추기 */
  max-width: 500px; /* 최대 크기 500px */
  height: auto; /* 원본 비율 유지 */
  display: block;
  margin: 10px auto;
  border-radius: 10px; /* 모서리 둥글게 */
}

/* 📌 PC (넓은 화면)에서는 더 크게 */
@media screen and (min-width: 1024px) {
  .guide-item img {
    max-width: 700px; /* ✅ 최대 크기 700px까지 확장 */
  }
}

/* 📌 모바일에서 화면 너비에 맞춤 */
@media screen and (max-width: 600px) {
  .guide-item img {
    max-width: 90vw; /* ✅ 화면 너비의 90%까지 확장 */
  }
}