/* =========================
   전체 기본 설정
   ========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', 'Noto Sans KR', sans-serif;
  color: #082444;

  /* 배경 이미지 + 연한 오버레이 */
  background-image:
    linear-gradient(rgba(232,227,217,0.92), rgba(232,227,217,0.92)),
    url('background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

/* 링크 기본 스타일 */
a {
  text-decoration: none;
  color: #1C252D;
  transition: color 0.3s;
}

a:hover {
  color: #D9D7CC;
}

/* =========================
   헤더
   ========================= */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: rgba(255,255,255,0); /* 투명 */
}

/* 로고 왼쪽 */
.header .logo {
  height: 120px;
  width: auto;
  flex-shrink: 0;
}

/* 오른쪽 네비게이터 */
.top-right-buttons {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.top-right-buttons a {
  font-weight: 600;
  color: #082444;
}

/* =========================
   메인
   ========================= */
main {
  display: flex;
  flex-direction: column;
  align-items: center; /* 이미지는 중앙 */
  padding: 2rem;
  margin-top: 50px;
  width: 100%;
}

/* 중앙 이미지 */
main .img {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

main .img img {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* 텍스트 왼쪽 정렬 */
main .text {
  text-align: left;
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
}

main h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #082444;
}

main h2 {
  font-size: 1.5rem;
  margin: 1.5rem 0 0.5rem 0;
}

main p, main li {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

/* 리스트 스타일 */
ul, ol {
  text-align: left;
  max-width: 800px;
  margin: 0 auto 1rem auto;
  padding-left: 1.5rem;
}

ul li::marker,
ol li::marker {
  color: #082444;
}

/* =========================
   푸터
   ========================= */
footer {
  background-color: #1F2B36;
  color: #E8E3D9;
  text-align: center;
  padding: 25px 0;
  font-size: 9pt;
  width: 100%;
}

/* =========================
   반응형
   ========================= */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .top-right-buttons {
    justify-content: center;
  }

  main h1 {
    font-size: 1.5rem;
  }

  main h2 {
    font-size: 1.2rem;
  }

  ul, ol {
    padding-left: 1rem;
  }
}

@media (max-width: 480px) {
  main h1 {
    font-size: 1.3rem;
  }

  main h2 {
    font-size: 1rem;
  }
}