@charset "UTF-8";
/* ============================================================
   themes/erp/style/product.css
   상품 상세
   ------------------------------------------------------------
   로드: additionalCss 에 'product.css'
   의존: base.css(토큰) · layout.css(헤더·빵가루)
   짝: product_detail.js (갤러리 · 옵션 · 장바구니)
   ============================================================ */


/* ============================================================
   1. 상단 2단 배치
   왼쪽 이미지 / 오른쪽 구매
   ============================================================ */
.detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) 452px;
  gap:44px;
  padding-block:28px 56px;
  align-items:start;
}


/* ============================================================
   2. 이미지 갤러리
   ============================================================ */
.gallery{
  position:sticky;
  top:16px;              /* 오른쪽 옵션을 만지는 동안 이미지가 따라옴 */
}

/* 큰 이미지 */
.gal-main{
  position:relative;
  aspect-ratio:1/1;
  background:#fff;          /* 상품 사진은 흰 배경 위에서 색이 제대로 보인다.
                               테두리와 색띠가 이미 영역을 잡아줌 */
  border:1px solid var(--line);
  overflow:hidden;
}
.gal-main img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:24px 24px 24px 34px;   /* 왼쪽은 색띠 폭만큼 더 */
  transition:opacity .18s ease;
}
/* 카테고리 색띠 — 카드와 같은 문법 */
.gal-main::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:14px;
  background:var(--band);
  pointer-events:none;
}

/* 좌우 이동 버튼 — 평소엔 숨고 hover 때만 */
.gal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(252,252,251,.92);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--ink-soft);
  cursor:pointer;
  opacity:0;
  transition:opacity .18s ease;
  z-index:2;
}
.gal-main:hover .gal-nav,
.gal-nav:focus-visible{ opacity:1; }
.gal-nav:hover{ background:#fff; color:var(--ink); }
.gal-nav.prev{ left:22px; }        /* 색띠(14px)를 피해서 */
.gal-nav.next{ right:8px; }

/* 썸네일 */
.gal-thumbs{
  display:flex;
  gap:8px;
  margin-top:8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.gal-thumbs::-webkit-scrollbar{ display:none; }
.gal-thumbs button{
  position:relative;
  flex:0 0 74px;
  aspect-ratio:1/1;
  padding:5px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  cursor:pointer;
  opacity:.6;
  transition:opacity .18s ease, border-color .18s ease;
}
.gal-thumbs button img{
  width:100%; height:100%;
  object-fit:contain;
}
.gal-thumbs button:hover{ opacity:1; }
.gal-thumbs button[aria-pressed="true"]{
  opacity:1;
  border-color:var(--ink);
}


/* ============================================================
   3. 오른쪽 구매 영역
   ============================================================ */

/* 분류배지 + 상품코드 */
.p-code-row{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.p-cat{
  padding:3px 9px;
  background:var(--band);
  color:#fff;
  border-radius:1px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.1em;
}
/* 청구기호 라벨 스티커 — 홈 책등 라벨과 같은 모티프 */
.p-code{
  padding:3px 9px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
/* 할인율 / 품절 / 비활성 */
.p-flag{
  padding:3px 9px;
  border-radius:1px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:#fff;
}
.p-flag.sale{ background:var(--warn); }
.p-flag.soldout{ background:var(--warn); }
.p-flag.off{ background:var(--warn); }

/* 빵가루(인라인) 자리 */
.p-crumb{ margin-bottom:6px; }

.p-name{
  margin:0 0 8px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:26px;
  line-height:1.38;
  letter-spacing:-.025em;
}
.p-summary{
  margin:0 0 20px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink-soft);
}

/* ── 가격 ──
   라벨 왼쪽 / 금액 오른쪽 한 줄.
   아래 사양표(단위·제조사)가 같은 구조라 세로줄이 맞는다 */
.p-price{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:13px 0;
  border-block:1px solid var(--ink);
  margin-bottom:0;
}
.p-price .cap{
  flex-shrink:0;
  font-size:12.5px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-faint);
}
.p-price .amt{
  text-align:right;
  line-height:1.2;
}
/* 할인 전 정가 — 같은 줄 앞쪽에 작게 */
.p-price .origin{
  margin-right:8px;
  font-family:var(--f-mono);
  font-size:12.5px;
  color:var(--ink-faint);
  text-decoration:line-through;
}


.p-price .num{
  font-family:var(--f-mono);
  font-size:28px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.p-price .num.is-sale{ color:var(--warn); }
.p-price .won{
  font-size:14px;
  color:var(--ink-soft);
  margin-left:2px;
}
/* 가격 대신 문구 */
.p-price .word{
  font-size:20px;
  font-weight:500;
  color:var(--accent);
}
.p-price .word.soldout{ color:var(--ink-faint); }

/* ── 사양 표 (입력형 옵션 + 제조사 + 상품코드) ── */
.p-spec{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  margin-bottom:22px;
}
.p-spec th{
  width:88px;
  padding:9px 0;
  text-align:left;
  vertical-align:top;
  font-weight:400;
  font-size:12.5px;
  color:var(--ink-faint);
}
.p-spec td{
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
  color:var(--ink-soft);
}
.p-spec tr:first-child th,
.p-spec tr:first-child td{ padding-top:14px; }

/* ── 특별 조합 가격 ── */
.combos{
  margin-bottom:20px;
  padding:14px 16px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
}
.combos .cap{
  margin:0 0 9px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--ink-faint);
}
.combos ul{ margin:0; padding:0; list-style:none; }
.combos li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:4px 0;
  font-size:12.5px;
  color:var(--ink-soft);
}
.combos b{
  font-family:var(--f-mono);
  font-weight:500;
  color:var(--warn);
  white-space:nowrap;
}


/* ============================================================
   4. 옵션
   ============================================================ */
.opts{
  padding:18px;
  margin-bottom:14px;
  background:var(--surface);
  border:1px solid var(--line);
}
.opt{ margin-bottom:14px; }
.opt:last-of-type{ margin-bottom:0; }
.opt label{
  display:block;
  margin-bottom:6px;
  font-size:12.5px;
  color:var(--ink-soft);
}
.opt label .req{ color:var(--warn); font-weight:500; }

.opt select,
.opt input[type=text]{
  width:100%;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  font-size:14px;
}
.opt select:hover,
.opt input:hover{ border-color:var(--ink-faint); }

/* 선택 추가 버튼 */
.opt-add{
  width:100%;
  margin-top:16px;
  padding:12px;
  background:var(--ink);
  color:#fff;
  border:0;
  border-radius:var(--r);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}
.opt-add:hover{ background:var(--accent-hi); }

/* 옵션 없는 상품의 수량 */
.opt-qty{
  display:flex;
  align-items:center;
  gap:14px;
}
.opt-qty > span{ font-size:13.5px; color:var(--ink-soft); }


/* ============================================================
   5. 수량 조절 (옵션 줄·단순 수량 공용)
   ============================================================ */
.qty{
  display:flex;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.qty button{
  width:28px;
  border:0;
  background:var(--surface-2);
  color:var(--ink-soft);
  font-size:14px;
  line-height:1;
  cursor:pointer;
}
.qty button:hover{ background:var(--ink); color:#fff; }
.qty input{
  width:44px;
  border:0;
  text-align:center;
  background:#fff;
  font-family:var(--f-mono);
  font-size:13px;
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }


/* ============================================================
   6. 선택한 항목
   ============================================================ */
.picked{
  margin-bottom:14px;
  background:var(--surface);
  border:1px solid var(--line);
}
.picked:empty{ display:none; }

.pick{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
}
.pick:last-child{ border-bottom:0; }

.pick-name{ min-width:0; font-size:13px; line-height:1.5; }
.pick-name b{ font-weight:500; }
.pick-name span{
  display:block;
  font-size:12px;
  color:var(--ink-faint);
}
.pick-sum{
  min-width:74px;
  text-align:right;
  font-family:var(--f-mono);
  font-size:13.5px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.pick-del{
  padding:2px 4px;
  border:0;
  background:none;
  color:var(--ink-faint);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.pick-del:hover{ color:var(--warn); }


/* ============================================================
   7. 합계 · 버튼
   ============================================================ */
.total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:14px 2px;
  border-top:2px solid var(--ink);
  margin-bottom:14px;
}
.total .t-label{ font-size:13.5px; color:var(--ink-soft); }
.total .t-label b{
  font-family:var(--f-mono);
  font-weight:500;
  color:var(--ink);
}
.total .t-num{
  font-family:var(--f-mono);
  font-size:24px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.total .t-num small{
  font-size:13px;
  font-weight:400;
  color:var(--ink-soft);
  margin-left:2px;
}

.p-acts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.p-acts .btn{
  display:block;
  width:100%;
  padding:14px 12px;
  text-align:center;
  font-size:14.5px;
  font-weight:500;
  border:1px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
}
.btn-cart{ background:var(--surface); border-color:var(--ink); color:var(--ink); }
.btn-cart:hover{ background:var(--ink); color:#fff; }
.btn-buy{ background:var(--accent); color:#fff; }
.btn-buy:hover{ background:var(--accent-hi); }
.btn-full{ grid-column:1 / -1; }
.btn-off{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--ink-faint);
  cursor:not-allowed;
}

.p-note{
  margin:14px 0 0;
  font-size:12px;
  line-height:1.75;
  color:var(--ink-faint);
}


/* ============================================================
   8. 상세 설명
   관리자(Summernote)가 넣은 HTML 이 그대로 들어온다.
   태그별 기본 모양을 여기서 잡아준다.
   ============================================================ */
.desc-sec{
  padding-block:52px 60px;
  border-top:1px solid var(--line-soft);
  background:var(--surface);
}
.desc-body{
  max-width:860px;
  margin-inline:auto;
  color:var(--ink-soft);
}
.desc-body img{
  max-width:100%;
  height:auto;
  margin:14px auto;
}
.desc-body p{ margin:0 0 14px; line-height:1.85; }
.desc-body h1,
.desc-body h2,
.desc-body h3{
  margin:32px 0 12px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  font-family:var(--f-display);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
}
.desc-body h1{ font-size:22px; }
.desc-body h2{ font-size:20px; }
.desc-body h3{ font-size:18px; }
.desc-body ul,
.desc-body ol{ margin:0 0 16px; padding-left:19px; }
.desc-body li{ margin-bottom:6px; line-height:1.8; }
.desc-body table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:18px;
  font-size:13.5px;
}
.desc-body th,
.desc-body td{
  padding:10px 13px;
  border:1px solid var(--line-soft);
  text-align:left;
}
.desc-body th{
  background:var(--surface-2);
  font-weight:500;
  font-size:12.5px;
  color:var(--ink-soft);
}
.desc-empty{
  padding:60px 20px;
  text-align:center;
  font-size:14px;
  color:var(--ink-faint);
}


/* ============================================================
   9. 배송 · 결제 안내
   ============================================================ */
.guide-sec{
  padding-block:52px 72px;
  border-top:1px solid var(--line-soft);
}
.guide-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.gcard{
  padding:24px 22px;
  background:var(--surface);
}
.gcard h4{
  margin:8px 0 10px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:16px;
  letter-spacing:-.02em;
  color:var(--ink);
}
.gcard ul{ margin:0; padding:0; list-style:none; }
.gcard li{
  position:relative;
  padding-left:12px;
  font-size:13px;
  line-height:1.8;
  color:var(--ink-soft);
}
.gcard li::before{
  content:"·";
  position:absolute;
  left:2px;
  color:var(--shelf-dark);
}


/* ============================================================
   10. 담기 완료 팝업
   ============================================================ */
.cart-pop{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cart-pop .dim{
  position:absolute;
  inset:0;
  background:rgba(20,32,46,.42);
}
.cart-pop .box{
  position:relative;
  width:320px;
  max-width:calc(100% - 32px);
  padding:32px 28px 26px;
  background:var(--surface);
  border:1px solid var(--ink);
  text-align:center;
}
.cart-pop h3{
  margin:0 0 6px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:19px;
  letter-spacing:-.02em;
}
.cart-pop p{
  margin:0 0 22px;
  font-size:13px;
  color:var(--ink-faint);
}
.cart-pop .acts{ display:grid; gap:8px; }
.cart-pop .acts a,
.cart-pop .acts button{
  display:block;
  width:100%;
  padding:12px;
  text-align:center;
  font-size:14px;
  font-weight:500;
  border:1px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
}


/* ============================================================
   11. 반응형
   ============================================================ */
@media (max-width:1080px){
  .detail{ grid-template-columns:minmax(0,1fr) 380px; gap:32px; }
}
@media (max-width:980px){
  .detail{ grid-template-columns:1fr; gap:28px; }
  .gallery{ position:static; max-width:520px; }
  .guide-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .detail{ padding-block:20px 40px; }
  .p-name{ font-size:21px; }
  .p-price .num{ font-size:24px; }
  .gal-nav{ opacity:1; }              /* 터치엔 hover 가 없으므로 항상 보이게 */
  .pick{ grid-template-columns:minmax(0,1fr) auto; row-gap:9px; }
  .pick-sum{ text-align:left; }
  .desc-sec{ padding-block:36px 44px; }
  .guide-sec{ padding-block:36px 52px; }
}