@charset "utf-8";

@font-face {
    font-family: 'SoukouMincho';
    src: url(../fonts/SoukouMincho.ttf) format('truetype');
}

@font-face {
    font-family: 'digital-7';
    src:  url(../fonts/digital-7mono.ttf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR';
    src: url(../fonts/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'FiraSansExtraCondensed-Bold';
    src: url('../fonts/FiraSansExtraCondensed-Bold.ttf') format('truetype');
}


@font-face {
    font-family: 'Noto Sans KR Medium';
    src: url('../fonts/NotoSansKR-Medium.ttf') format('opentype');
}




/* 기본 세팅 */
/* 기본 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans KR Regular';
    background-color: #B1DCFC;
    color: #000;
    height: 100vh;
    overflow-x: hidden;
}



/* 섹션 및 전체 구조 */
#intro-section {
    width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #B1DCFC;
}

.intro-section {
    width: 360px;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
    color: #3c3c3c;
}

/* 상품 이미지 */
.product-image {
    width: 350px;
    margin: 0 auto;
    display: block;
    padding-bottom: 15px;
}

/* 상품 텍스트 정보 */
.product-details {
    width: 350px;
    text-align: left;
    margin: 0 auto;
}

.product-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.product-price {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
}

.product-shipping p {
    font-size: 14px;
    line-height: 2.8;
}

.product-shipping p:nth-child(2) strong {
    margin-right: 50px;
}

.product-shipping strong {
    font-weight: normal;
    margin-right: 40px;
}


/* 수량 & 버튼 영역 */
.product-actions {
    width: 350px;
    padding: 20px 0;
    background-color: #B1DCFC;
    text-align: center;
    margin: 0 auto;
}

.quantity {
    margin-bottom: 16px;

}

.min-quantity {
    font-size: 14px;
    margin-top: 6px;
    margin-right: 50px;
    color: #787676;
}


.quantity-control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.quantity-control span {
    font-size: 14px;
    margin-right: 65px;
}

.quantity-control button {
    background-color: #226FC1;
    color: #fff;
    border: none;
    width: 30px;
    height: 30px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quantity-control input {
    background-color: white;
    color: #226FC1;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    border: none;
}



/* 메인 구매 버튼 */
.buy-button {
    font-family: 'Noto Sans KR Medium';
    width: 330px;
    height: 50px;
    background-color: #226FC1;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    margin: 8px 0;
    cursor: pointer;
}

/* 서브 버튼 (장바구니, 관심상품) */
.sub-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.cart-button,
.wishlist-button {
    font-family: 'Noto Sans KR Medium';
    width: 160px;
    height: 50px;
    background-color: transparent;
    color: #226FC1;
    border: 2px solid #226FC1;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}

/* 🔵 Filter Tabs (Grid로 구성) */
.filter-nav {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 45px;
    background-color: #F4ACBB;
}

.filter-nav ul {
    height: 45px;
    width: 100%;
}

.filter-nav ul li {
    float: left;
    width: 33.3333%;
    height: 45px;
}

.check {
    background-color: #EA375C;
    color: #fff;
}

.tab-1,
.tab-2,
.tab-3 {
    line-height: 2.5;
    font-size: 13pt;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); 
  z-index: 9999;
}

.modal-content {
    width: 340px;
    height: 160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 320px;
  padding: 65px 0 0;
  text-align: center;
    font-size: 16px;
    color: #3c3c3c;
}

.modal-content p {
  font-size: 16px;
  margin-bottom: 50px;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
    border-top: 1px solid #848484;
    
}

.modal-buttons button,
.modal-buttons button a {
  flex: 1;
    width: 160px;
  height: 50px;
  font-size: 14px;
  border: none;
  cursor: pointer;
    
}

#continueBtn {
  background: #fff;
}

#goCartBtn {
  background: #226FC1;
  color: white;
}

/* 관심상품 팝업 (1초 표시) */
.popup-toast {
  position: fixed;
    width: 245px;
    text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 280px);
  background: #fff;
  padding: 20px 30px;
  border-radius: 4px;
  font-size: 16px;
  display: none;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* 활성화된 관심상품 버튼 스타일 */
.wishlist-button.active {
  background-color: #226FC1;
  color: white;
  border: none;
}




/************태블릿***************/
@media screen and (min-width: 700px) and (max-width: 1023px) {
   #intro-section {
    width: 680px;
       
}

.intro-section {
    width: 680px;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
    color: #3c3c3c;
}

/* 상품 이미지 */
.product-image {
    width: 680px;
    margin: 0 auto;
    display: block;
    padding-bottom: 15px;
}
    
    
    

    .product-image {
        width: 400px;
    }


    .product-details {
        width: 500px;
        padding-left: 45px;
    }

    .product-title,
    .product-price {
        font-size: 32px;
    }


    .product-shipping p {
        font-size: 20px;
        line-height: 2.8;
    }

    .product-shipping p:nth-child(2) strong {
        margin-right: 55px;
    }

    .product-shipping strong {
        font-weight: normal;
        margin-right: 40px;
    }

    /* 버튼 전체 묶음 한 줄로 */
    .quantity {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
        width: 100%;
        margin-bottom: 40px;

    }

    .product-actions {
        width: 415px;
        padding-top: 50px;
    }

    .quantity-control {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .quantity-control span {
        width: 40px;
        font-size: 20px;
        margin-right: 76px;
    }

    .min-quantity {
        font-size: 20px;
        margin-top: 6px;
        margin-right: 50px;
        color: #787676;
    }


    .quantity-control button {
        background-color: #226FC1;
        color: #fff;
        border: none;
        width: 30px;
        height: 30px;
        font-size: 20px;
        cursor: pointer;
        transition: background 0.2s ease;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .quantity-control input {
        background-color: white;
        color: #226FC1;
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        border: none;
    }



    .min-quantity {
        font-size: 20px;
        color: #787676;
        white-space: nowrap;
        margin: 0;
        padding-left: 30px;
    }
    
    /* 메인 구매 버튼 */
   
    .buy-button {
        width: 180px;
    }

    /* 서브 버튼 (장바구니, 관심상품) */
    .sub-buttons {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    /* 세 버튼을 가로로 정렬 */
    .button-row {
        display: flex;
        justify-content: space-between;
        width: 500px;
        gap: 5px;
        margin-left: -40px;
        
    }

    
    .cart-button,
    .wishlist-button {
        width: 180px;
        background-color: transparent;
        color: #226FC1;
        border: 2px solid #226FC1;
        margin-top: 8px;
        
    }

     .sub-buttons,
    .sub-buttons {
        display: contents;
    }
}





/****************pc***************/
@media screen and (min-width: 1024px) {
  #intro-section {
    height: 100vh;
      width: 1300px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0px;
      margin: 0 auto;
  }

  .intro-section {
    display: grid;
      grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 1400px;
    padding-top: 0;
      margin: 0 auto;
   
  }

  .product-image {
     grid-row: span 2;
    width: 560px;
    height: auto;
    margin: 0;
    padding: 0;
  }
    

  .product-details {
    width: 100%;
    max-width: 500px;
    margin: 0;
      margin-top: 20px;
  }

  .product-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
  }

  .product-price {
    font-size:32px;
    font-weight: bold;
    margin-bottom: 40px;
  }

  .product-shipping p {
    font-size: 20px;
    line-height: 3.2;
    margin: 0;
  }
    
    .product-shipping p:nth-child(2) strong {
    margin-right:60px;
}


  .product-shipping strong {
    font-weight: normal;
    margin-right: 40px;
  }

  .product-actions {
    max-width: 500px;
    text-align: left;
    padding-top: 40px;
    margin: 0;
  }

  .quantity {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
  }

  .quantity-control {
    margin-right: 40px;
  }

  .quantity-control span {
      width: 50px;
    font-size: 20px;
/*    margin-right: 50px;*/
  }

  .quantity-control button,
    .quantity-control input {
    font-size: 20px;
  }


  .min-quantity {
    font-size: 20px;
    white-space: nowrap;
  }

  .button-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .buy-button,
  .cart-button,
  .wishlist-button {
      width: 180px;
    height: 60px;
    font-size: 20px;
    border-radius: 10px;
    padding: 0 20px;
    flex: 0 0 auto;
  }



  
}

@media screen and (min-width: 1024px) {
    
   

    /* *********** 네비게이션 *********** */
    .filter-nav ul {
        width: 1133px;
        /* 정확히 맞춰줌 */
        margin: 0 auto;
        /* 중앙 정렬 */
        overflow: hidden;
        /* float 해제 */
    }

    .filter-nav .filter-nav li {
        float: left;
        width: 260px;
        margin-right: 116px;
        /* li 간격 조절 */
        text-align: center;
        line-height: 45px;
        font-size: 16pt;
        background-color: pink;
    }

    /* 간격 추가는 margin-right로만 부여 */
    .filter-nav li:last-child {
        margin-right: 0;
    }
}