@import url("https://fonts.googleapis.com/css?family=Lato:400,700"); /* Lato 폰트 불러오기 */

/* CSS 변수(컬러, 간격, 트랜지션 등) 선언 */
:root {
    --primaryColor: #f09d51;        /* 주요 포인트 컬러 */
    --mainWhite: #fff;              /* 흰색 */
    --mainBlack: #222;              /* 거의 검정색 */
    --mainGrey: #ececec;            /* 연회색 */
    --mainSpacing: 0.1rem;          /* 글자 간격 */
    --mainTransition: all 0.3s linear; /* 모든 속성 0.3초 선형 트랜지션 */
}

/* 전체 요소에 margin, padding 제거 및 box-sizing 설정 */
* {
    margin: 0;                      /* 바깥 여백 제거 */
    padding: 0;                     /* 안쪽 여백 제거 */
    box-sizing: border-box;         /* 패딩/테두리 포함 크기 계산 */
}

/* 바디 기본 스타일 */
body {
    color: var(--mainBlack);        /* 기본 글자색 */
    background: var(--mainWhite);   /* 배경색 흰색 */
    font-family: "Lato", sans-serif;/* Lato 폰트 적용 */
}

/* --------------- Navbar ---------------- */
.navbar {
    position: sticky;               /* 화면 상단에 고정 */
    top: 0;                         /* 상단에서 0px */
    height: 60px;                   /* 높이 60px */
    width: 100%;                    /* 너비 100% */
    display: flex;                  /* Flexbox 사용 */
    align-items: center;            /* 수직 가운데 정렬 */
    background: rgb(230, 213, 197); /* 네비 배경색 */
    z-index: 1;                     /* 다른 요소보다 위에 */
}

.navbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 60px;
}

.nav-left,
.nav-right {
  flex: 1;               /* 양쪽 영역이 남는 공간을 채움 */
  display: flex;
  align-items: center;
  gap: 0.5rem;             /* 아이콘 사이 간격 */
}

.nav-right {
  justify-content: flex-end; /* 오른쪽 정렬 */
}

.nav-center-logo {
  flex: 0 0 auto;        /* 크기 고정, 가운데에 위치 */
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 600px) {
  .navbar-center {
    flex-direction: column;
    height: auto;
  }
  .nav-left, .nav-right {
    justify-content: center;
  }
  .nav-center-logo {
    margin: 0.5rem 0;
  }
}

.nav-icon {
    font-size: 1.5rem;              /* 아이콘 크기 */
}

.menu-btn { /* 메뉴 아이콘 */
  cursor: pointer;                  /* 손가락 커서 */
  padding: 0;                       /* 패딩 없음 */
  display: inline-block;            /* 인라인 블록 */
  box-sizing: border-box;           /* 패딩 포함 크기 계산 */
  width: 2.5rem;                    /* 네모 크기 고정 */
  height: 2.5rem;                   /* 네모 크기 고정 */
  text-align: center;               /* 가운데 정렬 */
  line-height: 2.2rem;              /* 아이콘을 세로 가운데 정렬 */
  border-radius: 0.5rem;            /* 약간 둥근 네모(원하면 0으로 완전 네모 가능) */
  transition: background 0.3s, color 0.3s; /* 배경, 글자색 부드럽게 전환 */
  background: none;                 /* 기본 배경 없음 */
}

.menu-btn:hover { /* 메뉴 아이콘 커서 올렸을 때 */
  background: linear-gradient(      /* 두 톤 연한 주황색 그라데이션 */
    135deg,
    #ffe5c2 0%,                     /* 연한 주황 */
    #ffd1a3 100%                    /* 더 진한 연한 주황 */
  );
  color: var(--mainBlack);          /* 아이콘 색상 */
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.08); 선택사항 */
}

.menu-btn i {
  vertical-align: middle;           /* 아이콘을 세로 중앙에 맞춤 */
  font-size: 1.5rem;                /* 아이콘 크기 */
  line-height: normal;              /* 기본 라인 높이 */
}

.search-btn { /* 검색 아이콘 */
  cursor: pointer;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  line-height: 2.5rem;
  border-radius: 0.5rem;
  transition: background 0.3s, color 0.3s;
  background: none;
  margin: 0rem; /* 장바구니와의 간격 */
		
}

.search-btn:hover { /* 검색 버튼 커서에 올렸을 때 디자인 */
  background: var(--primaryColor);
  color: var(--mainBlack);
}

.search-btn .nav-icon {
  vertical-align: middle;
  font-size: 1.5rem;
  line-height: normal;
  color: inherit;
}

.search-dropdown {
  position: absolute;
  top: 110%;
  right: 0;
  background: #fff;
  border-radius: 0.7rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  padding: 0;                /* padding을 0으로! */
  min-width: 270px;
  max-width: 350px;
  z-index: 100;
  transition: opacity 0.2s;
  /* 필요하다면 width: 원하는값; */
}

#search-input {
  width: 100%;               /* 부모(.search-dropdown) 너비에 딱 맞게 */
  padding: 0.7rem 1rem;
  font-size: 1.1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;     /* input의 border-radius를 .search-dropdown과 동일하게 */
  margin: 0;                 /* margin도 0으로 */
  box-sizing: border-box;  /* 패딩, 테두리 포함 크기 계산 */
  display: block;
}


#search-close {
  position: absolute;        /* 부모(.search-dropdown) 기준 절대 위치 */
  top: 0.4rem;                 /* 위에서 1rem */
  right: 1rem;               /* 오른쪽에서 1rem */
  background: none;          /* 배경 없음 */
  border: none;              /* 테두리 없음 */
  font-size: 1.35rem;         /* 크기 크게 */
  cursor: pointer;           /* 손가락 커서 */
}

#search-results {
  max-height: 350px;         /* 최대 높이 제한 (스크롤 가능) */
  overflow-y: auto;          /* 세로 스크롤 */
				border-radius: 0.5rem;
}

.search-result-item {
  padding: 0.7rem 0.3rem;
  margin-bottom: 0rem;    /* 아래쪽에 간격 추가 */
  border-bottom: 1px solid #ececec;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;            /* 이미지와 텍스트가 옆으로 정렬될 때 */
  align-items: center;
  border-radius: 0.4rem;
  background: #fff;
}

/* 마지막 아이템은 border와 간격을 없애고 싶을 때 */
.search-result-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.icon-separator { /* 세로 구분선 */
  display: inline-block;
  width: 1.5px;
  height: 2.0rem;               /* 아이콘과 비슷한 높이 */
  background: #917c62;        /* 네비 배경과 어울리는 연한 브라운 */
  margin: 1 0.5rem;           /* 좌우 여백: 기존 아이콘 간격과 동일 */
  vertical-align: middle;
  opacity: 0.7;
}


.cart-btn { /* 장바구니 아이콘 */
  position: relative;               /* 내부 요소 위치 기준 */
  cursor: pointer;                  /* 마우스 오버 시 손가락 */
  display: inline-block;            /* 인라인 블록 */
  width: 2.5rem;                    /* 네모 크기 고정 */
  height: 2.5rem;                   /* 네모 크기 고정 */
  text-align: center;               /* 가운데 정렬 */
  line-height: 2.5rem;              /* 아이콘을 세로 중앙 정렬 */
  border-radius: 0.5rem;            /* 약간 둥근 네모, 완전 네모는 0 */
  transition: background 0.3s, color 0.3s; /* 배경색, 글자색 부드럽게 전환 */
  background: none;                 /* 기본 배경 없음 */
		margin: 0rem; /* 검색아이콘 과의 간격 */
}

.cart-btn:hover { /* 장바구니 버튼 커서에 올렸을 때 디자인 */
  background: var(--primaryColor);  /* 커서 올렸을 때 배경 색상 */
  color: var(--mainBlack);          /* 장바구니 아이콘 색상 */
}

.cart-btn .nav-icon {
  vertical-align: middle;           /* 아이콘을 세로 중앙에 맞춤 */
  font-size: 1.5rem;                /* 아이콘 크기 */
  line-height: normal;              /* 기본 라인 높이 */
  color: inherit;                   /* 부모의 색상 상속 */
}

.cart-items { /* 장바구니 아이콘 개수 표시 디자인 */
  position: absolute;               /* 부모(cart-btn) 기준 절대 위치 */
  top: -8px;                        /* 위로 8px 이동 */
  right: -8px;                      /* 오른쪽으로 8px 이동 */
  background: var(--primaryColor);  /* 주황색 배경 */
  color: var(--mainWhite);          /* 흰색 글자 */
  font-size: 0.95rem;               /* 글자 크기 */
  font-weight: bold;                /* 굵은 글자 */
  min-width: 1.5em;                 /* 최소 너비 */
  height: 1.5em;                    /* 높이 고정 */
  line-height: 1.5em;               /* 세로 중앙 정렬 */
  padding: 0 0.5em;                 /* 좌우 여백 */
  border-radius: 0.75em;            /* 타원형(숫자 1개면 원형) */
  display: flex;                    /* 플렉스 박스 */
  align-items: center;              /* 세로 중앙 정렬 */
  justify-content: center;          /* 가로 중앙 정렬 */
  box-sizing: border-box;           /* 패딩 포함 크기 계산 */
  z-index: 2;                       /* 다른 요소 위에 */
  box-shadow: 0 1px 4px rgba(0,0,0,0.07); /* 약간의 그림자 */
}
/* --------------- End of Navbar ---------------- */

/* --------------- Hero ---------------- */
.hero {
    min-height: calc(100vh - 60px); /* 네비 제외 전체 높이 */
    background: url("./images/Tile-main-2.jpg") center/cover no-repeat; /* 배경 이미지 */
    display: flex;                  /* Flexbox 사용 */
    align-items: center;            /* 수직 가운데 정렬 */
    justify-content: center;        /* 수평 가운데 정렬 */
}

.banner {
    text-align: center;             /* 텍스트 가운데 정렬 */
    background: rgba(255, 255, 255, 0.8); /* 반투명 흰 배경 */
    display: inline-block;          /* 인라인 블록 */
    padding: 2rem;                  /* 안쪽 여백 */
}

.banner-title {
    font-size: 3.4rem;              /* 큰 글자 크기 */
    text-transform: uppercase;      /* 대문자 변환 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
    margin-bottom: 3rem;            /* 아래 마진 */
}

.banner-btn {
    padding: 1rem 3rem;             /* 위아래, 좌우 패딩 */
    text-transform: uppercase;      /* 대문자 변환 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
    font-size: 1rem;                /* 글자 크기 */
    background: var(--primaryColor);/* 배경색 포인트 컬러 */
    color: var(--mainBlack);        /* 글자색 검정 */
    border: 1px solid var(--primaryColor); /* 테두리 */
    transition: var(--mainTransition);     /* 트랜지션 효과 */
    cursor: pointer;                /* 손가락 커서 */
}

.banner-btn:hover {
    background: transparent;        /* 배경 투명 */
    color: var(--primaryColor);     /* 글자색 포인트 컬러 */
}
/* --------------- End of Hero ---------------- */

/* --------------- Products ---------------- */
.products {
    padding: 4rem 0;                /* 위아래 여백 */
}

.section-title h2 {
    text-align: center;             /* 가운데 정렬 */
    font-size: 2.5rem;              /* 글자 크기 */
    margin-bottom: 5rem;            /* 아래 마진 */
    text-transform: capitalize;     /* 첫 글자 대문자 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
}

.products-center {
    width: 90vw;                    /* 전체 뷰포트의 90% */
    margin: 0 auto;                 /* 가운데 정렬 */
    max-width: 1170px;              /* 최대 너비 */
    display: grid;                  /* 그리드 레이아웃 */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* 최소 260px, 자동 분할 */
    grid-column-gap: 1.5rem;        /* 컬럼 간격 */
    grid-row-gap: 2rem;             /* 행 간격 */
}

.img-container {
    position: relative;             /* 내부 버튼 위치 기준 */
    overflow: hidden;               /* 넘치는 부분 숨김 */
}

.bag-btn {
    position: absolute;             /* 부모(img-container) 기준 */
    top: 70%;                       /* 위에서 70% 위치 */
    right: 0;                       /* 오른쪽 정렬 */
    background: var(--primaryColor);/* 배경색 포인트 컬러 */
    border: none;                   /* 테두리 없음 */
    text-transform: uppercase;      /* 대문자 변환 */
    padding: 0.5rem 0.75rem;        /* 위아래, 좌우 패딩 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
    font-weight: bold;              /* 굵은 글씨 */
    transition: var(--mainTransition);   /* 트랜지션 효과 */
    transform: translateX(101%);    /* 오른쪽으로 숨김 */
    cursor: pointer;                /* 손가락 커서 */
}

.bag-btn:hover {
    color: var(--mainWhite);        /* 마우스 오버 시 글자색 흰색 */
}

.fa-shopping-cart {
    margin-right: 0.5rem;           /* 오른쪽 여백 */
}

.img-container:hover .bag-btn {
    transform: translateX(0);       /* 호버 시 버튼 나타남 */
}

.product-img {
    display: block;                 /* 블록 요소 */
    width: 100%;                    /* 부모 너비 100% */
    min-height: 12rem;              /* 최소 높이 */
    transition: var(--mainTransition);   /* 트랜지션 효과 */
}

.img-container:hover .product-img {
    opacity: 0.5;                   /* 호버 시 이미지 반투명 */
}

.product h3 {
    text-transform: capitalize;     /* 첫 글자 대문자 */
    font-size: 1.1rem;              /* 글자 크기 */
    margin-top: 1rem;               /* 위 마진 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
    text-align: center;             /* 가운데 정렬 */
}

.product h4 {
    margin-top: 0.7rem;             /* 위 마진 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
    color: var(--primaryColor);     /* 글자색 포인트 컬러 */
    text-align: center;             /* 가운데 정렬 */
}
/* ---------------End of Products ---------------- */

/* --------------- Cart ---------------- */
.cart-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;               /* 기존 크기 그대로 */
    height: 100%;
    transition: var(--mainTransition);
    background: rgb(230, 213, 197, 0.6);
    z-index: 2;
    visibility: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end; /* 오른쪽 정렬로 패널이 오른쪽에 붙음 */
}

.cart-overlay.transparentBcg {
    visibility: visible;
}

.cart {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;                /* 기존 크기 그대로 (PC에선 30vw, min-width: 450px) */
    height: 100%;
    overflow: scroll;
    z-index: 3;
    background: rgb(231, 226, 221);
    padding: 1.5rem;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    transition: var(--mainTransition);
    transform: translateX(100%);   /* 오른쪽 바깥에서 시작 */
}

.cart-overlay.transparentBcg .cart {
    transform: translateX(0);      /* 오른쪽에서 슬라이드 인 */
}

@media screen and (min-width: 768px) {
    .cart {
        width: 30vw;               /* PC에서는 30vw */
        min-width: 450px;
    }
}

.close-cart {
    font-size: 1.7rem;              /* 닫기 아이콘 크기 */
    cursor: pointer;                /* 손가락 커서 */
}

.cart h2 {
    text-transform: capitalize;     /* 첫 글자 대문자 */
    text-align: center;             /* 가운데 정렬 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
    margin-bottom: 2rem;            /* 아래 마진 */
}

/*---------- Cart Item -------------------- */
.cart-item {
    display: grid;                  /* 그리드 레이아웃 */
    align-items: center;            /* 수직 가운데 정렬 */
    grid-template-columns: auto 1fr auto; /* 3열 그리드 */
    grid-column-gap: 1.5rem;        /* 컬럼 간격 */
    margin: 1.5rem 0;               /* 위아래 마진 */
}

.cart-item img {
    width: 75px;                    /* 이미지 너비 */
    height: 75px;                   /* 이미지 높이 */
}

.cart-item h4 {
    font-size: 0.85rem;             /* 글자 크기 */
    text-transform: capitalize;     /* 첫 글자 대문자 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
}

.cart-item h5 {
    margin: 0.5rem 0;               /* 위아래 마진 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
}

.item-amount {
    text-align: center;             /* 가운데 정렬 */
}
.remove-item {
    color: rgba(117, 117, 117, 0.829); /* 글자색 연회색 */
    cursor: pointer;                /* 손가락 커서 */
}

.fa-chevron-up,
.fa-chevron-down {
    color: var(--primaryColor);     /* 아이콘 색상 포인트 컬러 */
    cursor: pointer;                /* 손가락 커서 */
}

/*---------- End of Cart Item -------------------- */

.cart-footer {
    margin-top: 2rem;               /* 위 마진 */
    letter-spacing: var(--mainSpacing); /* 글자 간격 */
    text-align: center;             /* 가운데 정렬 */
}

.cart-footer h3 {
    text-transform: capitalize;     /* 첫 글자 대문자 */
    margin-bottom: 1rem;            /* 아래 마진 */
}

/* --------------- End of Cart ---------------- */

/* ------------- 메뉴 ------------- */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 50vw;         /* 전체 화면의 절반 너비 */
  height: 100vh;       /* 전체 높이 */
  z-index: 1001;
  transition: var(--mainTransition);
  visibility: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.menu-overlay.showMenu {
  visibility: visible;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 50vw;         /* 전체 화면의 절반 너비 */
  height: 100vh;
  background: rgb(231, 226, 221);
  padding: 1.5rem;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  z-index: 1002;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: var(--mainTransition);
}

.menu-overlay.showMenu .menu {
  transform: translateX(0);
}

@media screen and (min-width: 768px) {
  .menu {
    width: 15vw;         /* PC에서는 더 좁게 하고 싶다면 여기서 조정 */
    min-width: 200px;
    max-width: 350px;
  }
  .menu-overlay {
    width: 15vw;
    min-width: 200px;
    max-width: 350px;
  }
}

.close-menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.7rem;
  cursor: pointer;
  color: #333;
  background: none;
  border: none;
  z-index: 10;
}

/* 메뉴 리스트 스타일 */
.menu ul {
  list-style: none;
  margin-top: 3rem;
  padding: 0;
}
.menu ul li {
  margin-bottom: 1rem;
}
.menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 1.2rem;
}

.menu-link { /* 메뉴 오버레이 카테고리 애니메이션 */
  position: relative;
  display: inline-block;
  width: 120px;               /* 고정 너비(원하는 값으로 조절) */
  text-align: left;           /* 왼쪽 정렬 */
  padding: 0.3em 0 0.3em 1em; /* 위, 오른쪽, 아래, 왼쪽 (왼쪽에 여백 추가) */
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
  z-index: 1;
}

.menu-link::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  border: 2px solid var(--primaryColor);
  border-radius: 0.4em;
  opacity: 0;
  transform: scaleX(0.7) scaleY(0.7);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  box-sizing: border-box;
  z-index: -1;
}

.menu-link:hover,
.menu-link:focus {
  color: var(--primaryColor);
}

.menu-link:hover::before,
.menu-link:focus::before {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}

/* ------------- 메뉴 끝 ------------- */