.elementor-1789 .elementor-element.elementor-element-473876e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1789 .elementor-element.elementor-element-eee5276{--display:flex;--background-transition:0.3s;}.elementor-1789 .elementor-element.elementor-element-4027a7d{--display:flex;--background-transition:0.3s;}@media(min-width:768px){.elementor-1789 .elementor-element.elementor-element-eee5276{--content-width:1300px;}.elementor-1789 .elementor-element.elementor-element-4027a7d{--content-width:1300px;}}/* Start custom CSS for container, class: .elementor-element-473876e *//* 1) 전체 섹션 너비 및 폰트 설정 */
.routine-section {
  max-width: 1300px;     /* 전체 컨테이너 최대 너비 1300px 고정 */
  margin: 0 auto;        /* 중앙 정렬 */
  padding: 2rem;
  font-family: 'Pretendard', sans-serif;
  color: #000;
}

/* 2) 컬럼을 나란히 배치하기 위한 Flex 컨테이너 */
.routine-container {
  display: flex;
  flex-wrap: wrap;       /* 화면이 좁아지면 세로로 줄바꿈 */
  gap: 2rem;             /* 컬럼 사이 간격 */
}

/* 3) 컬럼 너비: 50%씩 */
.routine-column {
  width: 48%;
  box-sizing: border-box; /* 패딩/테두리가 있어도 50% 너비를 초과하지 않도록 */
}

/* 4) 각 컬럼 제목 스타일 */
.routine-column h2 {
  font-size: 2.28rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
}

/* 5) 스텝 묶음 레이아웃 */
.routine-step {
  display: flex;
  align-items: flex-start;
  margin: 1.5rem 0;
  gap: 1rem;
}

/* 6) 이미지 크기 고정 */
.routine-step img {
  width: 100px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* 7) 텍스트(설명) 스타일 */
.routine-step p {
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
}

/* 8) 반응형: 화면 너비가 800px 이하일 때 컬럼을 세로로 배치 */
@media (max-width: 800px) {
  .routine-column {
    width: 100%;
  }
}/* End custom CSS */