@charset "utf-8";
/*
  cart.css
  - cart.css 정리본 (중복/override 제거)
  - 옵션 텍스트는 qtyrow 안, 옵션변경 버튼은 qtyrow 아래(풀폭)로 유지
  - 네이버 장바구니 느낌 유지
*/

body{
  background: var(--jh-bg);
}

/* loading wrapper */
.c-cart-loading{ display:grid; gap:16px; margin-top:4px; }

.p-cart{
  background: transparent;
}
.p-cart__top{
  background: #fff;
  padding: 0 calc(var(--space-3) + 3px);
}

.c-cart{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--space-3);
}

/* tabs */
.c-cart-tabs{
  display:flex;
  gap: 18px;
  align-items:flex-end;
  padding: 3px 0;
  background-color: #fff;
  border-bottom: 1px solid var(--jh-line);
}
.c-cart-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 10px 10px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: rgba(0,0,0,.55);
}
.c-cart-tab b{ font-weight: 700; color: rgba(0,0,0,.45); }
.c-cart-tab.is-active{ color:#111; }
.c-cart-tab.is-active b{ color: var(--jh-green); }
.c-cart-tab.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 3px;
  border-radius: 999px;
  background: var(--jh-green);
}

/* address */
.c-cart-addr{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--jh-line);
}
.c-cart-addr__ico{
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--jh-green);
  position:relative;
  flex: 0 0 auto;
}
.c-cart-addr__ico::after{
  content:"";
  position:absolute;
  left:50%; top:52%;
  width: 6px; height: 6px;
  border-radius: 999px;
  background:#fff;
  transform: translate(-50%,-50%);
}
.c-cart-addr__txt{
  flex: 1 1 auto;
  min-width:0;
  font-size: 12px;
  color: rgba(0,0,0,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.c-cart-addr__btn{
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--jh-line);
  background:#fff;
  font-weight: 800;
  font-size: 12px;
  color:#111;
}
.c-cart-addr__btn:active{ background: rgba(0,0,0,.04); }

/* dc banner (compact) */
.c-cart-dc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(3,199,90,.18);
  background: var(--jh-green-weak);
  margin: 10px 0 8px;
}
.c-cart-dc__ttl{ font-weight: 700; letter-spacing: -.02em; }
.c-cart-dc__sub{ display:block; margin-top: 2px; font-size: 12px; color: rgba(0,0,0,.55); }
.c-cart-dc__btn{
  width: 30px; height: 30px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}
.c-cart-dc__btn .material-symbols-outlined{ font-size: 18px; color: rgba(0,0,0,.55); }

/* tools */
.c-cart-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 0 10px;
}
.c-cart-tools__all{ display:inline-flex; align-items:center; gap: 8px; font-weight: 700; }
.c-cart-tools__chk{ width: 18px; height: 18px; accent-color: var(--jh-green); }
.c-cart-tools__right{ display:flex; gap: 8px; }
.c-cart-tools__btn{
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--jh-line);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.02em;
  color:#111;
}
.c-cart-tools__btn:active{ background: rgba(0,0,0,.04); }

/* groups wrapper */
.c-cart-groups{
  margin-top: 4px;
  display:grid;
  gap: 16px;
}

/* group */
.c-cg{
  background:#fff;
  border: 1px solid var(--jh-line);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
  overflow:hidden;
}
.c-cg__hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  background:#fbfbfc;
  border-bottom: 1px solid var(--jh-line);
}
.c-cg__left{ display:flex; align-items:center; gap: 8px; min-width:0; }
.c-cg__chk{ width: 18px; height: 18px; accent-color: var(--jh-green); }
.c-cg__name{
  font-weight: 700;
  letter-spacing: -.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.c-cg__left > small > b{ color: var(--jh-green); }

.c-cg__coupon{
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.06);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -.02em;
  color: #e11d48;
}
.c-cg__coupon::before{
  content:"N";
  display:inline-grid;
  place-items:center;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: #e11d48;
  color:#fff;
  font-weight: 700;
  margin-right: 6px;
  font-size: 11px;
}
.c-cg__coupon:active{ background: rgba(239,68,68,.10); }

.c-cg__printf{
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(3,199,90,.30);
  background: rgba(3,199,90,.10);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -.02em;
  color: #0b7a42;
  white-space: nowrap;
}
.c-cg__printf b{ color:#0b7a42; font-weight: 700; }
.c-cg__printf:active{ background: rgba(3,199,90,.16); }

/* item */
.c-ci{ position: relative; border-bottom: 1px solid var(--jh-line); }
.c-ci:last-child{ border-bottom:0; }

.c-ci__ship{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  padding: 10px 12px 4px;
}
.c-ci__shipleft{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
}
.c-ci__printoff{
  position: absolute;
  top: 9px; right: 12px;
  flex:0 0 auto;
  height:20px;
  padding:0 8px;
  border-radius:8px;
  border:1px solid var(--jh-line);
  background:#fff;
  color:#555;
  font-size:11px;
  font-weight:500;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.c-ci__printoff:active{ background: rgba(0,0,0,.04); }
.c-ci__chk{ width: 18px; height: 18px; accent-color: var(--jh-green); }
.c-ci__badge{
  display:inline-flex;
  align-items:center;
  font-weight: 700;
  color: var(--jh-green);
  font-size: 12px;
}
.c-ci__badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  background-color: #ff5722; /* 강조 색상 (사이트 테마에 맞춰 변경) */
  border-radius: 3px;
  vertical-align: middle;
}
.c-ci__brandLine{
  display:inline-flex;
  align-items:center;
  font-weight: 400;
  color: #888;
  font-size: 12px;
}
.c-ci__shiptext{
  font-size: 12px;
  color: rgba(0,0,0,.55);
}
.c-ci__shiptext b{ color:#111; font-weight: 700; }
.c-ci__q{
  margin-left: 4px;
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  color: rgba(0,0,0,.55);
  display:inline-grid;
  place-items:center;
  font-size: 11px;
  line-height: 1;
}

/* product block */
.c-ci__prod{
  display:grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  padding: 0 12px 0 38px; /* checkbox indent */
}
.c-ci__thumb{
  display: block;
  width: 74px; height: 74px;
  border-radius: 10px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #f3f4f6;
}
.c-ci__thumb img{ width:100%; height:100%; object-fit:cover; }

.c-ci__info{ min-width:0; }
.c-ci__name{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 0;
  color:#111;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.c-ci__meta{
  margin-top: 6px;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  font-size: 11px;
  color: rgba(0,0,0,.55);
}
.c-ci__meta .tag{
  display:inline-flex;
  align-items:center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--jh-soft);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 800;
}
.c-ci__price{
  margin-top: 3px;
  display:flex;
  align-items:baseline;
  gap: 6px;
  flex-wrap:wrap;
  letter-spacing: -0.2px;
}
.c-ci__rate{
  font-weight: 700;
  color: var(--jh-red);
}
.c-ci__now{
  font-weight: 700;
  font-size: 15px;
  color:#111;
}
.c-ci__was{
  font-size: 12px;
  color: rgba(0,0,0,.42);
  text-decoration: line-through;
}
.c-ci__point {
  display: flex;
  min-height: 20px;
  align-items: center;  /* 세로 중앙 정렬 (가장 중요!) */
  gap: 8px;             /* 요소들 사이 간격 (조절 가능) */
  flex-wrap: wrap;      /* 필요하면 줄바꿈 허용 */
}
/* qty row
   - 옵션 텍스트는 qtyrow 안
   - 옵션변경 버튼은 기존처럼 qtyrow 아래(풀폭) */
.c-ci__qtyrow{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  margin: 10px 12px 12px 38px;
  background: #f8f9fd;
}

.c-ci__optline{
  padding: 13px 16px 0;
  color: #3f3f3f;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}

.c-ci__opts{ padding-bottom: 12px; }
.c-ci__optitem + .c-ci__optitem{ margin-top: 10px; }
.c-ci__optitem .c-ci__qtyrow{ margin-bottom: 0; }

.c-ci__optbtn{
  margin: 0 12px 13px 38px;
  width: calc(100% - 50px);
  height: 32px;
  display: flex;              /* 추가(권장) */
  align-items: center;        /* 추가(권장) */
  justify-content: center;    /* 추가(권장) */
  box-sizing: border-box;     /* 추가(권장) */
  border-radius: 8px;
  border: 1px solid var(--jh-line);
  background:#fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.c-ci__optbtn:active{ background: rgba(0,0,0,.04); }

.c-ci__qtybar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 32px 13px 13px;
  gap: 10px;
}

.c-ci__qty{
  display:inline-flex;
  align-items:center;
  border: 1px solid var(--jh-line);
  border-radius: 6px;
  overflow:hidden;
  background:#fff;
}
.c-ci__qty button{
  width: 32px; height: 30px;
  display:grid; place-items:center;
  font-size: 15px;
  font-weight: 700;
}
.c-ci__qty input{
  width: 43px; height: 30px;
  border:0; outline:none;
  text-align:center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  -moz-appearance: textfield;
  appearance: textfield; /* 표준 속성 추가 */
}
.c-ci__qty input::-webkit-inner-spin-button,
.c-ci__qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.c-ci__sum{
  margin-left:auto;
  font-size: 14px;
  font-weight: 500;
  white-space:nowrap;
}
.c-ci__x{
  position: absolute;
  font-size: 12px;
  top: 3px; right: 3px;
  width: 25px; height: 25px;
  display:grid; place-items:center;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: #666;
}
.c-ci__x:active{ background: rgba(0,0,0,.04); }

/* group summary */
.c-cg__sum{
  padding: 20px 15px;
  background:#fbfbfc;
  border-top: 1px solid var(--jh-line);
}
.c-cg__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 15px;
}
.c-cg__row + .c-cg__row{ margin-top: 6px; }
.c-cg__row span{ color: var(--text); font-weight: 500; }
.c-cg__row b{ font-weight: 700; color:#121212; }
.c-cg__row b.is-free{ color: var(--jh-blue); }

/* sheet */
.c-cart-sheet{ position: fixed; inset: 0; z-index: calc(var(--z-dim) + 10); }
.c-cart-sheet__dim{ position:absolute; inset:0; background: rgba(0,0,0,.38); }
.c-cart-sheet__panel{
  position:absolute;
  left:0; right:0; bottom:0;
  max-width: var(--maxw);
  margin: 0 auto;
  background:#fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -16px 40px rgba(0,0,0,.22);
  overflow:hidden;
}
.c-cart-sheet__hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.c-cart-sheet__ttl{ font-weight: 700; letter-spacing: -.02em; }
.c-cart-sheet__x{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
}
.c-cart-sheet__bd{ padding: 12px 14px 16px; color: rgba(0,0,0,.62); font-size: 13px; }
.c-cart-sheet__p{ margin: 8px 0; }
.c-cart-sheet__mini{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  font-size: 12px;
  color: rgba(0,0,0,.62);
}

body.is-cart-loading .c-fixedbar{
  opacity:.55;
  pointer-events:none;
}

/* top 버튼 fixedbar 위로 이동 */
.c-top-btn{
  bottom: calc(100px + 15px + env(safe-area-inset-bottom));
}

/* cart core refresh */
.c-cg__body{display:block;}