/* =========================================================
   [FILE] home.css
   - 홈 전용 최종 시안
   - 상단 퀵 액션 / 공지 요약 / NEW ARRIVALS / 카테고리 / 운영 안내
   - PC 우선
   - 기본 텍스트 굵기 700 통일
========================================================= */

/* =========================================================
   0) HOME 기본 변수 / 바깥 레이아웃
========================================================= */
body.home{
  --us-home-max: 1320px;
  --us-home-inner: 1180px;
  --us-home-text: #111;
  --us-home-muted: rgba(0,0,0,.62);
  --us-home-line: rgba(0,0,0,.10);
  --us-home-line-strong: rgba(0,0,0,.18);
  --us-home-bg: #fff;
  --us-home-soft: #fafafa;
}

body.home .home-main{
  max-width: var(--us-home-max);
  margin: 0 auto;
  padding: 28px 18px 40px;
  color: var(--us-home-text);
}

body.home .home-quick,
body.home .home-notice,
body.home .home-products,
body.home .home-category,
body.home .home-guide{
  width: 100%;
  max-width: var(--us-home-inner);
  margin: 0 auto 34px;
}

/* =========================================================
   1) 공통 섹션 헤더
========================================================= */
body.home .home-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 3px solid rgba(0,0,0,.10);
}

body.home .home-section-head h2{
  margin: 0;
  color: #111;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.2px;
}

body.home .home-section-head__more{
  color: rgba(0,0,0,.62);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   2) 상단 퀵 액션
========================================================= */
body.home .home-quick__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.home .home-quick-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 116px;
  padding: 18px 18px 16px;
  border: 1px solid var(--us-home-line);
  background: #fff;
  text-decoration: none;
  color: #111;
}

body.home .home-quick-card__eyebrow{
  display: block;
  color: rgba(0,0,0,.48);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .4px;
}

body.home .home-quick-card__title{
  display: block;
  color: #111;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.2px;
}

body.home .home-quick-card__desc{
  display: block;
  color: rgba(0,0,0,.62);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

/* =========================================================
   3) 공지 요약
========================================================= */
body.home .home-notice__list{
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--us-home-line);
  border-bottom: 1px solid var(--us-home-line);
}

body.home .home-notice__item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid var(--us-home-line);
}

body.home .home-notice__item:last-child{
  border-bottom: 0;
}

body.home .home-notice__title{
  min-width: 0;
  color: #111;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.home .home-notice__date{
  color: rgba(0,0,0,.52);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   4) NEW ARRIVALS
========================================================= */
body.home .home-products ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
  row-gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.home .home-products ul.products::before,
body.home .home-products ul.products::after{
  content: none !important;
  display: none !important;
}

body.home .home-products ul.products li.product{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.home .home-products ul.products li.product a.woocommerce-LoopProduct-link{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  color: #111 !important;
  text-decoration: none !important;
}

body.home .home-products ul.products li.product img{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  margin: 0 !important;
}

body.home .home-products ul.products li.product .woocommerce-loop-product__title{
  margin: 0 !important;
  color: #111 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(1.35em * 2) !important;
}

body.home .home-products ul.products li.product .price,
body.home .home-products ul.products li.product .button,
body.home .home-products ul.products li.product .added_to_cart,
body.home .home-products ul.products li.product .onsale{
  display: none !important;
}

/* =========================================================
   5) 카테고리 바로가기
========================================================= */
body.home .home-category__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.home .home-category__item{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--us-home-line);
  background: #fff;
  text-decoration: none;
  color: #111;
}

body.home .home-category__item--wide{
  grid-column: 1 / -1;
}

body.home .home-category__name{
  display: block;
  color: #111;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
}

/* =========================================================
   6) 운영 안내
========================================================= */
body.home .home-guide{
  border-top: 1px solid var(--us-home-line);
  border-bottom: 1px solid var(--us-home-line);
}

body.home .home-guide__row{
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--us-home-line);
}

body.home .home-guide__row:last-child{
  border-bottom: 0;
}

body.home .home-guide__label{
  display: block;
  color: #111;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

body.home .home-guide__value{
  display: block;
  min-width: 0;
  color: rgba(0,0,0,.62);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   7) 태블릿
========================================================= */
@media (max-width: 1023px){
  body.home .home-main{
    padding: 22px 16px 34px;
  }

  body.home .home-products ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 24px !important;
  }

  body.home .home-category__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   8) 모바일
========================================================= */
@media (max-width: 767px){
  body.home .home-main{
    padding: 18px 14px 28px;
  }

  body.home .home-quick,
  body.home .home-notice,
  body.home .home-products,
  body.home .home-category,
  body.home .home-guide{
    margin-bottom: 26px;
  }

  body.home .home-section-head{
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  body.home .home-section-head h2{
    font-size: 18px;
  }

  body.home .home-section-head__more{
    font-size: 12px;
  }

  body.home .home-quick__grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.home .home-quick-card{
    min-height: auto;
    padding: 16px 14px;
    gap: 6px;
  }

  body.home .home-quick-card__title{
    font-size: 16px;
  }

  body.home .home-quick-card__desc{
    font-size: 12px;
  }

  body.home .home-notice__item{
    gap: 10px;
    padding: 12px 0;
  }

  body.home .home-notice__title{
    font-size: 13px;
  }

  body.home .home-notice__date{
    font-size: 11px;
  }

  body.home .home-products ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 20px !important;
  }

  body.home .home-products ul.products li.product .woocommerce-loop-product__title{
    font-size: 13px !important;
  }

  body.home .home-category__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.home .home-category__item{
    min-height: 50px;
    padding: 10px 12px;
  }

  body.home .home-category__name{
    font-size: 13px;
  }

  body.home .home-guide__row{
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
  }

  body.home .home-guide__label,
  body.home .home-guide__value{
    font-size: 12px;
    line-height: 1.45;
  }
}

/* =========================================================
   [HOME] 퀵 액션 카드 오른쪽 진행 표시
   - 고객센터 / 공지사항 바로가기 카드 오른쪽에 >>>
========================================================= */
body.home .home-quick-card{
  position: relative;
  padding-right: 56px !important;
}

body.home .home-quick-card::after{
  content: ">>>";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,.38);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1px;
  pointer-events: none;
}

@media (max-width: 767px){
  body.home .home-quick-card{
    padding-right: 48px !important;
  }

  body.home .home-quick-card::after{
    right: 14px;
    font-size: 12px;
  }
}