body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  background: #a6c7a5;
}

.container {
  padding: 12px;
  padding-bottom: 12px;
}

.product-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(
  auto-fill,
  minmax(170px, 220px)
);

justify-content: center; /* PC에서 중앙 정렬 */

}

/* 상품 카드 */
.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-bottom: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.pagination button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: #333;
  color: #fff;
  cursor: pointer;
}

.pagination button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.price-box,
.dc-price {
  min-height: 22px;
}


/* 가격 라인 */
.price-box {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;      /* 줄바꿈 금지 */
  white-space: nowrap;    /* 텍스트 줄바꿈 금지 */
}

/* 할인율 */
.discount-rate {
  color: #e60023;
  font-weight: bold;
  font-size: 14px;
}

/* 정가 – 크기 판매가와 비슷하게 */
.origin-price {
  color: #999;
  text-decoration: line-through;
  font-size: 12px;
}

/* 화살표 */
.arrow {
  color: #666;
  font-size: 14px;
}

/* 할인가 */
.dc-price {
  color: #000;
  font-weight: bold;
  font-size: 13px;
}

.product-card {

  background: #fff;
  border-radius: 12px;
  padding: 8px 8px 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 14px;
  line-height: 1.42;
  height: calc(1.42em * 2);   /* 2줄 고정 */
  margin-bottom: 6px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 이미지 래퍼 */
.image-wrap {
  position: relative;
  width: 100%;
}

/* + 버튼 */
.add-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;

  width: 36px;
  height: 36px;
  border-radius: 50%;

  border: none;
  background: #98ff9c; /* 초록 계열 */
  color: #fff;

  font-size: 22px;
  font-weight: bold;
  line-height: 36px;

  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  touch-action: manipulation;

}

/* 눌렀을 때 */
.add-btn:active {
  transform: scale(0.95);
}






/* 수량 컨트롤 (확장형) */
.qty-control {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;

  display: none;
  align-items: center;
  justify-content: space-between;

  height: 38px;
  padding: 0 6px;
  border-radius: 999px;

  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.qty-control.active {
  display: flex;
}

/* - + 버튼: 좌우 완전 대칭 */
.qty-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: none;

  font-size: 20px;
  line-height: 38px;

  cursor: pointer;          /* ✅ 2) 커서 손가락 */
  touch-action: manipulation;
}

.qty-btn:hover {
  opacity: 0.8;
}

/* 수량 입력: 가운데 딱 고정 */
.qty-input {
  width: 56px;              /* 가운데 영역 여유 */
  height: 30px;
  border: none;
  outline: none;

  text-align: center;       /* ✅ 3) 가운데 정렬 */
  font-size: 14px;
  font-weight: 700;

  background: transparent;
}

.cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  
  display: none;
  justify-content: space-between;
  align-items: center;

  padding: 12px;
  background: #cbff8f;
  color: #080000;
  z-index: 99999;  
}

.cart-bar.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.cart-bar button {
  border: none;
  z-index: 9999;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
}


.cart-bar button:hover {
  opacity: 0.9;
}

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 72px;                 /* cart-bar 위로 */
  z-index: 100000;

  background: rgba(0,0,0,0.78);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

.category-bar {
  top: 0;
  z-index: 999;
  background: #a6c7a5;
  padding: 10px 12px;

  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.category-bar::-webkit-scrollbar { display: none; }

.category-tab {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;

  background: rgba(255,255,255,0.7);
  cursor: pointer;
}

.category-tab.active {
  background: #2f7d32;
  color: #fff;
}

.search-bar {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #a6c7a5;
}

.search-bar input {
  flex: 1;
  height: 38px;
  border: none;
  border-radius: 10px;
  padding: 0 12px;
  outline: none;
}

.search-bar button {
  height: 38px;
  border: none;
  border-radius: 10px;
  padding: 0 12px;
  font-weight: 800;
  cursor: pointer;
}

:root { --cartbar-h: 0px; }

body.cartbar-open .legal-link-row{
  margin-bottom: calc(var(--cartbar-h) + 10px);
}

#cartSummary{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legal-link-row{
  display:flex;
  justify-content:center;
  margin: 8px 0 0;   /* pagination 아래 간격 */
  padding-bottom: 0px;
}

.legal-link{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#clearCartFromList {
  margin-right: 8px;   
}

.sp-4 { height: 4px; }
.sp-6 { height: 6px; }
.sp-8 { height: 8px; }
.sp-10 { height: 10px; }
.sp-12 { height: 12px; }
.sp-16 { height: 16px; }

/* =========================
   Mobile tuning: Products page only
   ========================= */
@media (max-width: 520px) {

  /* 전체 글자/여백 키우기 */
  .page-products {
    font-size: 16px;
  }

  .page-products .container {
    padding: 12px;
  }

  /* ✅ 상품 그리드: 4열 -> 2열 */
  .page-products .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* 카드 자체도 좀 커 보이게 */
  .page-products .product-card {
    border-radius: 14px;
  }

  .page-products .product-name {
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
  }

  .page-products .dc-price,
  .page-products .origin-price,
  .page-products .discount-rate {
    font-size: 14px;
  }

  /* ✅ 버튼/입력은 iOS 터치 기준 44px 이상 추천 */
  .page-products button:not(#goCart):not(#clearCartFromList),
  .page-products input,
  .page-products .category-tab {
    min-height: 44px;
    font-size: 16px;
  }

  /* 검색창이 있다면 */
  .page-products #searchInput {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
  }

  .page-products #searchBtn,
  .page-products #clearBtn {
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 900;
  }

  /* 카테고리 탭 크게 + 터치 여유 */
  .page-products .category-tab {
    padding: 10px 14px;
    border-radius: 999px;
  }

  /* 페이지네이션 버튼(이전/다음) */
  .page-products .pagination button {
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 900;
  }

  .page-products #pageInfo {
    font-size: 15px;
    font-weight: 900;
  }

  /* 수량 컨트롤/담기 버튼도 조금 키우기 */
  .page-products .qty-btn,
  .page-products .add-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
    border-radius: 12px;
  }

  .page-products .qty-input {
    height: 44px;
    font-size: 16px;
  }

  /* 장바구니 */
  .page-products #cartBar {
    font-size: 15px;
  }
}
  
  /* 선택: 비우기 버튼을 살짝 덜 강조 */
  .btn-secondary{
    background:#eee;
  }

  /* 선택: 주문하기 버튼 강조 */
  .btn-primary{
    background:#333;
    color:#fff;
  }

/* ===== 386px 이하: 카드 깨짐 방지 오버라이드 ===== */
@media (max-width: 410px) {

  /* price-box는 줄어들 수 있게 */
  .price-box{
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;      /* ✅ 줄어들어도 됨 */
    overflow: visible !important;    /* ✅ 잘라내지 않음 */
    white-space: normal !important;  /* ✅ 필요하면 줄바꿈 */
    flex-wrap: wrap !important;      /* ✅ 2줄 허용(안전장치) */
    row-gap: 2px;
  }

  /* ✅ 말줄임 제거 + 폰트 자동 축소 */
  .discount-rate,
  .origin-price,
  .arrow,
  .dc-price{
    overflow: visible !important;
    text-overflow: clip !important; /* ✅ ... 금지 */
    white-space: nowrap !important; /* 각 요소는 한 덩어리로 */
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 핵심: dc-price(할인가)는 무조건 다 보여야 함 */
  .dc-price{
    font-size: clamp(11px, 3.2vw, 13px) !important;  /* ✅ 320px에서도 내려감 */
    letter-spacing: -0.2px;                          /* ✅ 숫자 폭 살짝 줄임 */
    font-variant-numeric: tabular-nums;              /* ✅ 숫자 폭 안정(선택) */
  }

  /* 나머지는 더 작게(공간 확보) */
  .discount-rate{ font-size: clamp(11px, 3.0vw, 13px) !important; }
  .origin-price { font-size: clamp(10px, 2.8vw, 12px) !important; }
  .arrow        { font-size: clamp(10px, 2.8vw, 12px) !important; }


/* 이미지 오버레이 기준점 */
  .image-wrap { position: relative; }

  /* ✅ qty-control: 386 이하에서도 원래처럼 이미지 위에 오버레이 */
  .qty-control {
    position: absolute !important;
    left: 6px !important;     /* ✅ inset 줄여서 바 폭 조금 확보 */
    right: 6px !important;
    bottom: 6px !important;

    display: none !important;
    align-items: center;
    justify-content: space-between;

    height: 36px;             /* ✅ 살짝 줄임 */
    padding: 0 4px;           /* ✅ 내부 여백 줄임 */
    border-radius: 999px;

    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);

    overflow: hidden;         /* ✅ 바 삐져나옴 방지 (유지) */
    box-sizing: border-box;
  }

  .qty-control.active {
    display: flex !important;
  }
  /* 버튼을 살짝 줄여서 가운데 공간 확보 */
  .qty-btn{
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    font-size: 18px !important;
    line-height: 32px !important;
  }

  /* 입력칸 최소 폭 확보 + 폰트 살짝 축소 */
  .qty-input{
    width: auto !important;          /* ✅ 56px 고정 제거 */
    flex: 1 1 44px !important;       /* ✅ 남는 공간을 먹되, 줄어들 수 있음 */
    min-width: 40px !important;      /* ✅ 두 자리(10~99) 보장 */
    max-width: 64px !important;      /* ✅ 너무 커지지 않게 */
    height: 30px !important;

    padding: 0 !important;
    line-height: 30px !important;
    text-align: center;
    font-size: 14px !important;
    font-weight: 800 !important;
    background: transparent;
    box-sizing: border-box;
  }

  /* ✅ qty-control 켜져 있을 때 +버튼이 겹치면 클릭 방해하니 숨김(안전) */
  .qty-control.active + .add-btn {
    display: none !important;
  }

  .add-btn{
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

@media (max-width: 340px) {

  /* 바 안에서 양끝 밀림 방지: 가운데 정렬 + gap */
  .page-products .qty-control{
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 3px !important;     /* 좌우 패딩 살짝 줄여 공간 확보 */
  }

  /* 버튼 폭을 동일하게 더 줄여 +가 안 밀리게 */
  .page-products .qty-btn{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    flex: 0 0 30px !important;
    line-height: 30px !important;
    padding: 0 !important;
  }

  /* 입력칸은 너무 줄이면 2자리 안 보이니 최소만 */
  .page-products .qty-input{
    min-width: 38px !important;  /* 10~99 보이게 */
    height: 28px !important;
    line-height: 28px !important;
    font-size: 13px !important;
  }

  /* ✅ “- 쪽 여백 줄이기” 느낌을 주고 싶으면
     왼쪽만 1px 더 타이트하게 */
  .page-products .qty-btn.minus{
    margin-right: -1px !important;
  }
  .page-products .qty-btn.plus{
    margin-left: -1px !important;
  }
}

/*
.cart-bar button,
.cart-footer button{
  min-height: 44px;        
  padding: 8px 12px;       
  line-height: 1;          
}
*/

.cart-bar,
.cart-footer{
  padding: 12px;
  box-sizing: border-box;
}

/* ✅ 하단 바(상품목록/장바구니) 버튼 공통 스타일 */
.cart-bar button,
.cart-footer button{
  min-height: 44px;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;

  line-height: 1;

}

.footer-bar button{
  min-height: 44px;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;

  line-height: 1;
}
.cart-bar,
.cart-footer{
  padding: 12px;
  box-sizing: border-box;
}

.brand-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 10px 12px;
  background: #a6c7a5;        /* 기존 배경 톤 유지 */
}

.brand-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65vw; /* 버튼 공간 남기기 */
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.brand-action{
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;

  background: rgba(255,255,255,0.75);  /* 튀지 않게 */
  color: #000;
}

.brand-action:active{
  transform: scale(0.98);
}