/* index2.css */

/* main 전체 중앙 정렬 (수평·수직 가운데) */
main {
  display: flex;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
  min-height: 100vh;       /* 화면 전체 높이 */
  width: 100%;             /* 폭을 100%로 */
  flex-direction: column;  /* 세로로 쌓이도록 */
  padding-bottom: 50px; /* 바닥에 여백 */
}
/* 내부 wrapper 또는 컨텐츠 박스에 적용 */
.story-wrapper {
  width: 90%; /* 또는 원하는 최대 너비 */
  max-width: 1200px; /* 최대 너비 지정 */
  margin: 0 auto; /* 가로 가운데 정렬 */
  text-align: center;
}
./* 이미지 컨테이너 스타일 */
.image-container {
  text-align: center;
  margin-top: 20px;
}

/* 이미지 스타일 */
.image-container img {
  width: 100%;       /* 컨테이너 너비에 맞게 크기 조절 */
  height: auto;      /* 비율 유지하며 높이 자동 조절 */
  max-width: 600px;  /* 최대 너비 제한 (필요시 조절) */

}

/* 섹션 전체 스타일 */
.section-features {
  margin-top: 30px;
  padding: 20px;
  max-width: 800px; /* 너비 제한 */
  margin-left: auto;
  margin-right: auto;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  color: #333;
  text-align: center; /* 텍스트 가운데 정렬 */
  background-color: #fafafa; /* 살짝 연한 배경색으로 구분감 */
  border-radius: 8px; /* 둥근 모서리 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 그림자 효과 */
}

/* 제목 스타일 */
.section-features h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  border-bottom: 3px solid #ccc;
  padding-bottom: 10px;
  color: #222;
}

/* 본문 단락 */
.section-features p {
  margin-bottom: 25px;
  font-size: 17px;
  text-align: justify; /* 텍스트 양쪽 정렬 (가독성 향상) */
}

.section-features p strong {
  font-weight: 700;
  color: #111;
}

.section-features p em {
  font-style: italic;
  color: #555;
}

/* 리스트 스타일 */
.section-features ul {
  list-style: disc inside; /* 들여쓰기 */
  padding-left: 0;
  margin-top: 15px;
  text-align: left; /* 리스트는 왼쪽 정렬 유지 */
}

.section-features ul li {
  margin-bottom: 12px;
  font-size: 16px;
}
/* 링크 텍스트를 숨기고, 일반 텍스트처럼 보이게 하기 */
.link-hidden {
  color: inherit; /* 부모 텍스트 색상과 같게 */
  text-decoration: none; /* 밑줄 제거 */
  border: none; /* 테두리 없음 */
  cursor: default; /* 커서 변경 방지 (일반 텍스트처럼 보이기) */
}
/* 미디어 쿼리: 작은 화면에서도 깔끔하게 */
@media (max-width: 768px) {
   .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 필요시 높이 조절 */
    min-height: 300px;
  }
  /* 이미지 크기 조절 */
  .image-container img {
    max-width: 70%;
    height: auto;
  }
}
  /* 기타 모바일 최적화 */
  .section-features {
    padding: 15px;
  }
  .section-features h2 {
    font-size: 24px;
  }
  .section-features p {
    font-size: 15px;
  }
  .section-features ul li {
    font-size: 14px;
  }
}