@charset "UTF-8";

* {
    margin:0 auto;
    padding:0;
    list-style:none; /*글머리기호 제거*/
    font-family:"맑은 고딕";
    color:#333333;
}

a {
    text-decoration:none; /*링크의 밑줄 제거*/
    color:inherit; /*부모의 글자색을 상속받음*/
}

header {
    width: 1600px;
    height: 200px;
     position: sticky;
  top: 0;
  left: 0;
  
  z-index: 9999; /* 다른 컨텐츠(상품 이미지 등) 뒤로 묻히지 않도록 최상단 레이어 설정 */
  background-color: #fff; /* 스크롤 내렸을 때 뒤쪽 본문 글씨가 비치지 않도록 배경색 지정 */
 /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); 고정되었을 때 입체감을 주는 얇은 그림자 (선택사항) */
   
}
#blank {
    width: 550px;
    height: 130px;
  
    float: left;
   
}

#logo {
    width: 500px;
    height: 130px;
    text-align: center;
    float: left;
}


#gnav {
    width: 550px;
    height: 50px;
    float: left;
      list-style: none;
    
  
}
#gnav >li {
    float: right;
    width: auto;             /* 💡 110px 고정 폭을 없애고 글자 크기에 맞춤 */
    padding-left: 12px;      /* 💡 글자 왼쪽 간격 (숫자가 작을수록 더 촘촘해짐) */
    list-style: none;
    text-align: right;  
      
}

.search-section {
  display: flex;
  width: 100%;
  margin: 20px 0;
}

#search {
  width: 500px;
  height: 45px; /* 높이를 여유 있게 수정 */
  border: 3px solid #add574;
  border-radius: 10px;
  margin-left: auto !important;
  margin-right: 0 !important ;
  
  /* float 대신 flex를 사용해 내부 요소(input, button) 정렬 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px; /* 내부 좌우 여백 */
  box-sizing: border-box; /* 테두리 포함 크기 계산 */
}

/* 내부 인풋창 스타일 */
#search input {
  width: 85%;
  height: 100%; /* 부모 높이에 맞춤 */
  border: none;
  outline: none; /* 클릭 시 파란 테두리 제거 */
  font-size: 16px;
  background: transparent; /* 배경 투명하게 */
}

/* 돋보기 버튼 스타일 */
#search button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}


nav {
    width: 1600px;
    height: 50px;
    background-color: beige;
    float: left;
    margin-top: 20px;
}

   /* [1. 기본 스타일 리셋] */
    #menu, #menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #menu a {
        text-decoration: none;
        
        display: block;
        padding: 10px 20px;
    }

    /* [2. 메인 메뉴 정렬 및 서브 메뉴의 새로운 기준점 생성] */
    #menu {
       text-align: center;
        background-color: #dddada;
        font-size: 20px;
        
        /* ⭐ 중요: 개별 li가 아니라 전체 메뉴(#menu)를 서브 메뉴의 기준점으로 설정합니다. */
        position: relative; 
    }

    #menu > li {
        float: left;
        width:calc(1600px / 9);
    }

    #menu li:hover {
    color:#fff;
    background-color: rgba(27,139,0,1);
    }

    .submenu {
    margin-top: 10px;
   width:calc(1600px / 9);
   position: absolute;
   display: none;
   background-color: #ffffffb4;
   font-size: 16px;
   z-index: 10; 
   /* z-index: 10;  뒤에서 같은 코드를 사용하면 나중게 우선이라 먼저 사용한건 숫자가 커야한다 */
}

.submenu li {
    width:calc(1600px / 9);

}

#menu >li:hover>.submenu {
   display:block;

}



#contents {
    width: 1600px;
    
}
  
.banner-container {
 position: relative;
 width: 1600px; 
 height: 500px;
 overflow: hidden;
 margin: 0 auto;
 margin-top: 20px;
 }

    /* 2. 배너 목록 스타일 설정 */
    #banners {
      position: relative;
      width: 100%;
      height: 100%;
    }

    #banners li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0; /* 기본적으로 모든 배너를 숨김 */
      transition: opacity 0.5s ease-in-out; /* 부드러운 전환 효과 */
      z-index: 1;
    }

    /* 현재 활성화된 배너만 노출 */
    #banners li.active {
      opacity: 1;
      z-index: 2;
    }

    #banners img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 3. 배너 선택 버튼(인디케이터) 스타일 */
    .banner-buttons {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px; /* 버튼 사이 간격 */
      z-index: 10;
      
    }

    .banner-buttons button {
      width: 16px;
      height: 16px;
      border: none;
      border-radius: 50%; /* 동그란 버튼 모양 */
      background-color: rgba(233, 86, 86, 0.5); /* 비활성 버튼 색상 */
      cursor: pointer;
      transition: background-color 0.3s;
    }

    /* 현재 선택된 배너의 버튼 스타일 */
    .banner-buttons button.active {
      background-color: #d1b4b4; /* 활성 버튼 색상 (흰색) */
      width: 24px; /* 선택된 버튼만 길어지는 효과 (선택사항, 지워도 됨) */
      border-radius: 6px;
    }

        #name {
            text-align: center;
            font-size: 30px;
            margin-top: 100px;
            font-weight: bold;
        }

        .more {
            text-align: right;
            margin-top: -30px;
            float: right;
            cursor: pointer;          /* 마우스 올리면 손가락 모양 */
            transition: all 0.2s;     /* 변화를 부드럽게 연출 */
             
        }

      .more-btn.clicked { 
      background-color: #333333 !important; /* 클릭 시 배경색 (검은색 계열) */
      color: #ffffff !important;            /* 클릭 시 글자색 (흰색) */
    }

        /* 1. 전체 상품들을 감싸는 가장 큰 부모 div (4열 배치) */
      
         .product-list {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            max-width: 1600px;
             /* ⭐ 여러 개의 상품 li를 가로로 나열하고, 화면이 넘치면 다음 줄로 자동 줄바꿈 */
            display: flex;
            flex-wrap: wrap; 
            gap: 20px; /* 상품 카드 사이의 상하좌우 여백 */
            padding: 20px;
            font-family: 'Malgun Gothic', sans-serif;
            margin-top: 50px;
        }

        /* 2. 개별 상품 + 그림을 담는 하나의 div 상자 */
        .product-card {
               /* 4열 배치를 원할 때 예외 없이 들어가는 표준 크기 설정 */
            width: 1600px; 
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            display: flex;
            margin-top: 50px;
            border: 0;
            box-sizing: border-box;
        }

        

        /* 상품 이미지 영역 */
        .product-img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 3. 하단 상품 정보창 div */
        .product-info {
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 8px; /* 줄과 줄 사이의 간격 */
            align-items: flex-start;
        }

         /* 첫째 줄: 3칸 구조 (태그 / 카테고리 / 찜하트) */
        .info-row-1 {
             display: flex;
    /* ⭐ 중요: 왼쪽에서부터 차례대로 정렬하고 간격을 벌림 */
        justify-content: flex-start; 
        align-items: center;
        gap: 6px; /* 배지, 카테고리, 하트 사이의 여백 */
        width: 100%;
        }
        .tag-badge { background: #ff4d4f; color: #fff; padding: 2px 6px; font-size: 11px; border-radius: 3px; }
        .category { color: #999; font-size: 12px; flex-grow: 1; margin-left: 8px; }
        .wish-icon { cursor: pointer; color: #999; }

        /* 기본 하트 스타일 */
.wish-icon {
  color: #ccc;          /* 클릭 전 투명하거나 회색인 상태 */
  cursor: pointer;      /* 마우스를 올렸을 때 손가락 모양으로 변경 */
  transition: color 0.2s; /* 색상이 부드럽게 변하는 효과 */
}

/* 💡 클릭되어 활성화되었을 때 바뀔 색상 */
.wish-icon.active {
  color: #ff385c;       /* 클릭 후 변경될 빨간색 (원하는 색상 코드로 변경 가능) */
}

        /* 둘째 줄: 1칸 구조 (상품명) */
        .info-row-2 {
         font-size: 15px;
         font-weight: bold;
         color: #333;
         text-align: left; /* 왼쪽 정렬 보장 */
         width: 100%;
        }

        /* 셋째 줄: 1칸 구조 (할인 전 원래 가격) */
        .info-row-3 {
            font-size: 13px;
            color: #b0b0b0;
            /*text-decoration: line-through; /* 취소선 표시 */
            text-align: left; /* 왼쪽 정렬 보장 */
            width: 100%;
        }

        /* 넷째 줄: 2칸 구조 (최종 판매가 / 본인부담금 안내) */
        .info-row-4 {
            width: 100%;
           /* display: flex; */
           text-align: left;
            
    /* ⭐ 중요: 왼쪽에서부터 가격과 본인부담금 텍스트를 나란히 배치 */
         /*justify-content: flex-start; */
        
         gap: 6px; /* 가격과 본인부담금 글자 사이의 여백 */
         
        }
        .final-price { font-size: 18px; font-weight: 800; color: #111; }
        .benefit-text { font-size: 11px; color: #ff4d4f; font-weight: bold; }

        /* 공통: 값이 없어서 비어있는 <div>는 화면에서 공간을 차지하지 않도록 숨김 */
        .product-info div:empty, 
        .product-info span:empty {
            display: none !important;
        }


        /* 이미지를 감싸는 링크 상자를 기준점으로 설정 */
.img-container {
    position: relative;
    display: block; /* 또는 inline-block */
    overflow: hidden;
}

/* 이미지 아래에 생길 수 있는 미세한 공백 제거 */
.img-container img {
    display: block;
    width: 100%;
}

/* NEW 스티커 스타일 디자인 */
.badge-new {
    position: absolute;
    top: 15px;             /* 위에서부터의 거리 */
    left: 15px;            /* 왼쪽에서부터의 거리 */
    z-index: 10;           /* 이미지보다 항상 위에 보이도록 설정 */
    
    background-color: #ff0000; /* 빨간색 배경 */
    color: #ffffff;            /* 흰색 글자 */
    font-size: 13px;           /* 글자 크기 */
    font-weight: bold;         /* 글자 굵게 */
    padding: 5px 12px;         /* 안쪽 여백 (상하 좌우) */
    
    /* 미세한 그림자 효과로 스티커 느낌 강조 */
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

   footer {   
    width: 1600px;
    height: 200px;
    background-color: hsl(0, 20%, 96%);
    margin-top: 100px;
}

#ponn {
    width: 450px;
    height: 200px;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    
}

#klogo {
    width: 200px;
    height: 200px;
    text-align: left;
    margin-top: 20px;
    margin-left: -60px;
    float: left;
}

#center {
    width: 600px;
    height: 200px;
    margin-top: 20px;
    float: left;
}

#sns {
    width:350px ;
    height: 200px;
    /* margin-top: 50px; */
    float: left;

      display: flex;
      justify-content: space-around; /* 링크 박스들을 일정한 간격으로 배분 */
      align-items: center;           /* 상하 수직 가운데 정렬 */
} 

/* 우측 고정 전체 컨테이너 */
.quick-menu {
     position: fixed;
  left: 50%;
  margin-left: 820px; 
  top: 60%;           
  z-index: 1000;
  
  width: 130px;       /* 💡 가로 길이를 120px로 통일 (더 넓히려면 이 수치를 변경) */
  
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: sans-serif;
  font-size: 13px;
  text-align: center;
  
}
/* 장바구니 박스 */
.cart-box {
 width: 100% !important;       /* 💡 부모 크기인 120px을 꽉 채우도록 설정 */
  box-sizing: border-box;       /* 테두리 두께 때문에 박스가 튀어나가는 것 방지 */
  border: 3px solid #add574;
  background-color: #fff;
  border-radius: 10px; /* 숫자가 커질수록 모서리가 더 둥글어집니다 */
}
.cart-box a {
  width: 100% !important;       /* 💡 부모 크기인 120px을 꽉 채우도록 설정 */
  box-sizing: border-box;       /* 테두리 두께 때문에 박스가 튀어나가는 것 방지 */
  /* border: 2px solid #add574; */
  background-color: #fff;
}

/* 사이드바 전체 컨테이너 (컴팩트 축소) */
.quick-sidebar-box {
  width: 130px;            /* 150px -> 130px로 슬림하게 변경 */
   border: 3px solid #add574;
  background-color: #fff;
  padding: 8px 6px;        /* 내부 여백을 줄여 공간 확보 */
  box-sizing: border-box;
  border-radius: 8px; /* 숫자가 커질수록 모서리가 더 둥글어집니다 */
}

/* 상단 탭 디자인 (글자 크기 축소) */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 8px;      /* 아래 여백 축소 */
}
.tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 4px 0;          /* 탭 높이 줄임 */
  font-size: 10px;         /* 11px -> 10px로 축소 */
  font-weight: bold;
  color: #999;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;     /* 글자가 아래로 줄바꿈되지 않게 방지 */
}
.tab-btn span {
  font-size: 9px;
}
.tab-btn.active {
  color: #333;
  border-bottom: 2px solid #333;
}

/* 상품 리스트 스타일 (여백 및 크기 최소화) */
.sidebar-prod-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-prod-list li {
  margin-bottom: 6px;      /* 상품 간격 10px -> 6px로 축소 */
  text-align: center;
}
.sidebar-prod-list li:last-child {
  margin-bottom: 0;
}
.sidebar-prod-list img {
  width: 100%;
  max-width: 75px;         /* 이미지 최대 크기를 75px로 줄여 여백 확보 */
  height: 75px;            /* 세로 길이를 고정하여 찌그러짐 방지 */
  display: block;
  margin: 0 auto;
  object-fit: contain;     /* 이미지 비율 유지하며 박스에 맞춤 */
}

/* 하단 페이지네이션 (사이즈 축소) */
.sidebar-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;         /* 위 여백 축소 */
  gap: 4px;
  font-size: 11px;         /* 글자 크기 축소 */
}
.sidebar-pagination button {
  width: 18px;             /* 버튼 크기 20px -> 18px로 축소 */
  height: 18px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ccc;
  font-family: monospace;
  padding: 0;
}
.sidebar-pagination button:hover {
  border-color: #bbb;
  color: #333;
}
.sidebar-pagination .page-number {
  color: #777;
}
.sidebar-pagination .current-page {
  color: #d9534f;
  font-weight: bold;
}