/* ###################### 로고 및 메뉴 ###################### */

body{
    background-color: aliceblue; /* body 색상 설정 */
}

.all{
    background-color: rgb(43, 95, 226); /* 로고(제목)과 메뉴를 묶은 nav 색상 설정*/
}

.mouse-memoirs-regular { /* 제목 폰트 */
    font-family: "Mouse Memoirs", sans-serif;
    font-weight: 400;
    font-style: normal;
}  

#logo { /* 로고(제목) */
    color: rgb(255, 255, 255); /* 글자 색상 */
    font-size: 50px; /* 글자 크기 */
    font-weight: bold; /* 글자 볼트체 */
    height: 70px; /* 높이 70px */
    text-decoration: none; /* 밑줄 삭제 */
    display: flex; /* flex 컨테이너로 만들어 아래 속성과 함께 사용되어 정렬 */
    justify-content: center; /* 가운데 정렬  */
}

.special-gothic-condensed-one-regular { /* 메뉴 폰트 및 설정 */
    font-family: "Special Gothic Condensed One", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(244, 254, 255); /* 글자 색상 */
    text-decoration: none; /* 밑줄 삭제 */
    font-size: 25px; 
}  

.menu{ /* 메뉴 설정 */
    display: flex; /* flex 컨테이너로 만들어 아래 속성과 함께 사용되어 정렬 */
    justify-content: center; /* 가운데 정렬  */
}

ul{ 
    list-style-type: none; /* 리스트 . 제거  */
    display: flex; /* 가로 정렬  */
    margin-right: 170px; /* 오른쪽으로부터 170px */
}

ul li{
    margin-left: 120px; /* 목록별 거리 (왼쪽으로부터 120px)  */
}

#check{ /* 선택된 페이지의 메뉴  */
    color: rgb(141, 227, 255); /* 글자 색상  */
    text-decoration: underline; /* 밑줄  */
}

/* ###################### 제목 및 본문 ###################### */

h1{ 
    margin-top: 40px; /* 위의 요소로부터 40px */
    margin-left: 10px; /* 왼쪽으로부터 10px */
    font-size: 100px;  /* 글자 크기 */
}

section {  /* 본문 */
    padding: 50px;  /* 콘텐츠 영역(본문)과 테두리 사이의 간격  */
    font-size: 20px; /* 글자 크기 */
}

/* index.css */

/* 전체 배경과 기본 폰트 설정 */

  .lifecycle {
    display: flex;
    flex-direction: column;
    align-items: center; /* 수평 중앙 정렬 */
    text-align: center; /*텍스트 중앙 정렬*/
    margin: 0 auto; /* 좌우 마진을 auto로 설정하여 중앙 정렬 */
}
.lifecycle p{
    font-size: 16px;
    color: gray;
}


  
  /* 소개글 부분 */
  .intro-box {
    text-align: center;
    padding: 20px;
    font-size: 17px; /* 글씨 조금 작게 */
    line-height: 1.6; /* 줄 간격 */
    background: linear-gradient(to right bottom, pink, white);
    border-radius: 100%;
  }
  
  /* 구성요소랑 장점 묶음 */
  .section {
    padding: 20px;
    margin: 30px 0;
  }
  
  .section h2 {
    text-align: center;
    font-size: 26px;
    color: #1a3c6c; /* 어두운 파란색 */
    margin-bottom: 20px;
  }
  
  /* 박스들을 옆으로 나란히 배치함 */
  .box-container {
    display: flex; /* 옆으로 배치 */    
    flex-wrap: wrap; /* 화면 작아질 때 줄바꿈 가능하게 */
    justify-content: center; /* 가운데 정렬 */
    gap: 20px; /* 박스 사이 간격 */
  }
  
  /* 하나하나의 박스 */
  .box {
    background-color: #ffffff; /* 흰 배경 */
    border: 1px solid #a0c4ff; /* 연한 파란 테두리 */
    border-radius: 8px; /* 모서리 둥글게 */
    padding: 15px;
    width: 220px;
    min-height: 120px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* 그림자 */
    text-align: center;
  }

  
  /* 박스 안의 소제목 */
  .box h3 {
    font-size: 17px;
    color: #0a3d91;
    margin-bottom: 10px;
  }
  
  /* 박스 안의 본문 */
  .box p {
    font-size: 15px;
    line-height: 1.5;
  }

  .box img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 12px;
  }
  

  /*
  ====  ====
  - display: flex → 박스 가로로 배치
  - flex-wrap: wrap → 좁아지면 자동 줄바꿈
  - border-radius → 테두리 둥글게
  - box-shadow → 그림자 생김 (입체감)
  - background-color → 배경 색 넣기
  - background: linear-gradient → 그라데이션 배경
  - font-size, line-height → 글씨 크기랑 줄 간격
  - border-radius → 모서리 둥글게
  - justify-content -> 정렬 (center, space-between 등)
  - object-fit -> 이미지 비율 유지하면서 맞춤 (contain, cover 등)
  - text-align -> 텍스트 정렬 (left, center, right 등)
    - margin: 0 auto -> 좌우 마진을 auto로 설정하여 중앙 정렬
  */