/* 레이아웃 */
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container {
  display: flex;
  min-height: 100vh;
}

.intro {
  flex: 2;
  background-color: #c2185b;
  color: #ffffff;
  padding: 80px;
  display: flex;
  flex-direction: column;
}
.products {
  flex: 1;
  background-color: #e0bbe4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
}

/* 제품 컨테이너: 마우스 호버의 핵심 기준점 */
.product-item {
  position: relative; /* 자식인 hover-info를 감싸는 기준 */
  cursor: pointer;
  text-align: center;
  padding: 20px;
}

.product-item h3 {
  color: #c2185b;
  margin: 0;
  font-size: 1.5rem;
}

/* 호버 시 나타날 리스트: 기본 숨김 */
.hover-info {
  display: none;
  position: absolute; /* .product-item 기준으로 위치 */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  background: white;
  padding: 15px;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* 마우스 올리면 보이게 */
.product-item:hover .hover-info {
  display: block;
}

/* 리스트 디자인 */
.hover-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hover-info li a {
  display: block;
  padding: 10px;
  color: #c2185b;
  text-decoration: none;
  font-weight: bold;
}
.hover-info li a:hover {
  background: #fce4ec;
}

footer {
  margin-top: auto;
  padding: 20px;
}
footer a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #ffffff;
}

@media (max-width: 768px) {
  body,
  html {
    overflow: auto; /* 내용이 길어지면 스크롤이 생기도록 허용 */
    height: auto;
  }

  .hero-section {
    flex-direction: column; /* 텍스트와 이미지를 세로로 쌓음 */
    height: auto;
    padding: 50px 0;
  }

  .text-content {
    padding: 0 5%;
    text-align: center; /* 모바일에서는 텍스트 중앙 정렬이 예쁨 */
    align-items: center;
  }

  .image-content {
    margin-top: 30px;
  }

  .main-img {
    max-width: 80%; /* 화면 너비에 맞게 이미지 크기 축소 */
  }

  .perfume-notes {
    justify-content: center; /* 모바일에서 아이콘들이 중앙으로 모임 */
  }
}

/* 모바일 반응형 설정 */
@media (max-width: 768px) {
  body,
  html {
    overflow: auto;
    height: auto;
  }

  .hero-section {
    flex-direction: column;
    height: auto;
    padding: 40px 0;
    max-width: 100%;
  }

  .text-content {
    padding: 0 5%;
    align-items: center; /* 핵심: 텍스트 뭉치를 중앙으로 */
    text-align: center; /* 핵심: 글자 정렬을 중앙으로 */
  }

  .perfume-notes {
    justify-content: center; /* 핵심: 아이콘들을 중앙으로 */
    flex-wrap: wrap; /* 화면이 좁으면 아이콘이 아래로 줄바꿈되게 */
  }

  .note-item {
    align-items: center; /* 아이콘과 텍스트를 개별적으로도 중앙 정렬 */
  }

  .image-content {
    margin: 40px 0;
    width: 100%;
    justify-content: center; /* 이미지도 컨테이너 안에서 중앙으로 */
  }

  .main-img {
    max-width: 70%;
    height: auto;
  }
}