.grade12-hero.hero {
  background: no-repeat center/cover url("../img/placeholders/highschool_hero_bg.jpg");
}

/* common_sections.css 등 공통 CSS에서 관리되는 스타일은 이곳에 포함하지 않음 */
.curriculum-visual {
  padding: 8rem 1rem;
}
.curriculum-visual .container{max-width: 960px;}
.curriculum-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 1rem; /* 데스크탑: 위아래 간격 8rem, 좌우 간격 1rem */
  justify-content: center;
}
.curriculum-item:nth-child(1){margin-top: 56px;}
.curriculum-item {
  display: flex;
  flex: 1 1 100%; /* 데스크탑: 2열 배치 */
  gap: 1rem; /* 이미지와 텍스트 간 간격 */
  align-items: flex-start; /* 텍스트, 이미지 상단 정렬 */
  flex-direction: row; /* 기본 가로 배열 (텍스트와 이미지가 옆으로) */
}

.curriculum-item.reverse {
  flex-direction: row-reverse; /* 데스크탑: 이미지-텍스트 순서 반전 */
  text-align: right;
}

.curriculum-image {
  width: 40%;
  aspect-ratio: 3 / 2; /* 3:2 비율 유지 */
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  object-fit: cover; /* 잘려도 좋으니 비율 유지 */
}

.text-box {
  width: 60%;
}

.highlight {
  background: #f7d7d4;
  color: #d84141;
  font-weight: 700;
  padding: 0.2em 0.8em;
  border-radius: 12px;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  display: inline-block;
}

.item-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #1e1e1e;
}

.item-text {
  font-weight: 400;
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}

.item-subtext {
  font-weight: 300;
  font-size: 0.9rem;
  color: #aaa;
  line-height: 1.4;
}

/* 태블릿 (768px ~ 991px): 지그재그 (2열) + 텍스트 아래 사진 */
@media (min-width: 768px) and (max-width: 991px) {
.curriculum-visual .container{max-width:1024px;}
.curriculum-item:nth-child(1){margin-top: 0px;}
  .curriculum-items {
    gap: 6rem 1rem; /* 태블릿: 위아래 간격 6rem, 좌우 간격 1rem */
  }
  .curriculum-item {
    flex: 1 1 48%; /* 태블릿: 2열 유지 */
    flex-direction: column; /* 텍스트 아래 사진을 위해 세로 배열 */
    align-items: center; /* 텍스트와 이미지를 중앙 정렬 */
    gap: 1.5rem; /* 텍스트와 사진 간의 간격 조정 */
  }
  .curriculum-item .text-box {
    order: -1; /* 텍스트가 먼저 오도록 순서 변경 */
    width: 100%; /* 텍스트 박스 너비 조정 */
    text-align: center; /* 텍스트 중앙 정렬 */
  }
  .curriculum-item .curriculum-image {
    width: 100%; /* 이미지 크기 조정 */
  }
  /* .reverse 클래스는 flex-direction이 column일 때 의미 없으므로 별도 처리 안 함 */
  .curriculum-item.reverse {
    flex-direction: column; /* reverse 항목도 동일하게 세로 배열 */
  }
}

/* 모바일 (<= 767px): 한 줄 (1열) + 텍스트 아래 사진 */
@media (max-width: 767px) {

  .curriculum-visual {
    padding: 3rem 1rem;
  }
  .curriculum-items {
    flex-direction: column; /* 모바일: 1열 배치 */
    gap: 4rem 0; /* 모바일: 위아래 간격 4rem */
  }
  .curriculum-item {
    flex: 1 1 100%; /* 모바일: 한 줄 가득 */
    flex-direction: column; /* 텍스트 아래 사진을 위해 세로 배열 */
    align-items: center; /* 텍스트와 이미지를 중앙 정렬 */
    gap: 1.5rem; /* 텍스트와 사진 간의 간격 조정 */
  }
  .curriculum-item.reverse {
    flex-direction: column; /* reverse 항목도 동일하게 세로 배열 */
  }
  .curriculum-item .text-box {
    order: -1; /* 텍스트가 먼저 오도록 순서 변경 */
    width: 100%; /* 텍스트 박스 너비 조정 */
    text-align: center; /* 텍스트 중앙 정렬 */
  }
  .curriculum-item .curriculum-image {
    width: 70%; /* 이미지 크기 조정 */
  }
  /* 모바일에서 제목, 부제목 등 폰트 사이즈 조정 (common_sections.css 또는 style.css에서 변수 정의 필요) */
}