/**
 * Research 페이지 스타일
 *
 * 연구 분야 상세 페이지
 */

/* ==================== 연구 컨테이너 ==================== */
.re-container {
  display: flex;
  flex-direction: column;
  width: var(--content-width);
  max-width: var(--content-max-width);
  margin: 40px auto 0;

  & .sub-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: var(--full-width);
    margin: 30px 0 20px;
    border-radius: 10px;
    transition: all 0.1s;

    & .text-box {
      flex: 1;

      & .r-title {
        margin: 0 0 10px;
        font-size: 25px;
        font-weight: 600;
        color: var(--color-dark-blue);
      }

      & .r-content {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: #333;
      }
    }

    & .r-img {
      width: 500px;
      margin: 0 20px;
      border-radius: 8px;
    }

    /* 짝수 번째 박스는 이미지와 텍스트 순서 반대 */
    &:nth-child(even) {
      flex-direction: row-reverse;
    }
  }
}

/* ==================== 반응형: 태블릿 (1100px 이하) ==================== */
@media screen and (max-width: 1100px) {
  .re-container {
    & .sub-box {
      flex-direction: column-reverse;
      align-items: center;

      & .text-box {
        margin-top: 20px;
      }

      & .r-img {
        width: var(--full-width);
        margin: 0;
      }

      /* 모바일에서는 순서 통일 */
      &:nth-child(even) {
        flex-direction: column-reverse;
        align-items: center;
      }
    }
  }
}
