/* ---------- Reset & Variables ---------- */
:root{
  --clr-bg:#ffffff;
  --clr-primary:#6200ee;
  --clr-primary-dark:#3700b3;
  --clr-accent:#ff5722;
  --clr-text:#222;
  --clr-text-light:#666;
  --clr-border:#e0e0e0;
  --font-sans:"Noto Sans KR",sans-serif;

  --detail-w:240px;   /* 좌측 상세 패널 폭 */
  --panel-w:320px;    /* 우측 카트 패널 폭 */
}
*{box-sizing:border-box;margin:0;padding:0;font-family:var(--font-sans);}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer}

/* ---------- Base Layout ---------- */
body{
  background:var(--clr-bg);color:var(--clr-text);
  display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;
}
header,footer{background:#333;color:#fff;text-align:center;padding:1rem 0}
#logo{width:180px;margin:0 auto}

/* ---------- Three-column Grid (Detail | Products | Cart) ---------- */
.main-wrap{
  flex:1;
  display:grid;
  grid-template-columns:var(--detail-w) 1fr var(--panel-w);
  max-height:calc(100vh - 140px);   /* header+footer 높이 제외 */
  overflow:auto;                    /* vh 넘침 방지 */
}

/* ===== 1) 좌측 DETAIL 패널 ===== */
#item-detail{
  background:#fafafa;border-right:1px solid var(--clr-border);
  padding:1rem;overflow-y:auto
}
#item-detail h3{font-size:1rem;margin-bottom:.4rem}
#item-desc{white-space:pre-wrap;font-size:.85rem;line-height:1.4;color:var(--clr-text-light)}

/* ===== 2) 가운데 상품 컨테이너 ===== */
.container{overflow-y:auto;padding:1.25rem;scroll-behavior:smooth}

/* 상품 그리드 */
.products-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}

/* 페이지네이션 */
.pagination{text-align:center;margin:1.2rem 0;font-size:.9rem}
.pagination a,.pagination span{
  display:inline-block;padding:.35rem .75rem;margin:0 .15rem;
  border-radius:8px;text-decoration:none;color:var(--clr-text);
  border:1px solid transparent
}
.pagination a:hover{border-color:var(--clr-primary);color:var(--clr-primary)}
.pagination .current{background:var(--clr-primary);color:#fff;font-weight:700}

/* 상품 카드 */
.product-card{
  position:relative;background:#fff;border:1px solid var(--clr-border);
  border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s;
  box-shadow:0 1px 3px rgba(0,0,0,.15)
}
.product-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.25)}
.product-card.added{
  animation:flash .6s ease;outline:3px solid #4caf50;outline-offset:-3px
}
@keyframes flash{0%{background:#c8e6c9}30%{background:#fff}}

/* 툴팁 (PC) */
.product-card[data-alt]:hover::after{
  content:attr(data-alt);
  position:absolute;left:50%;top:100%;transform:translate(-50%,6px);z-index:2000;
  min-width:220px;max-width:360px;white-space:pre-line;background:#333;color:#fff;
  padding:.75rem 1rem;font-size:.8rem;border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,.25)
}
.product-card[data-alt]:hover::before{
  content:"";position:absolute;left:50%;top:100%;transform:translate(-50%,-4px);
  border:6px solid transparent;border-bottom-color:#333
}
@media(hover:none){
  .product-card[data-alt]:hover::after,
  .product-card[data-alt]:hover::before{display:none}
}

/* 카드 내부 */
.info-btn{
  position:absolute;top:.4rem;right:.4rem;width:32px;height:32px;
  border:none;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:background .18s
}
.info-btn:hover{background:rgba(0,0,0,.55)}
.product-thumb{aspect-ratio:1/1;padding:.7rem;display:flex;align-items:center;justify-content:center;background:#fff}
.product-name{font-weight:600;font-size:.95rem;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-price{font-size:.87rem;color:var(--clr-text-light)}
.product-body{padding:.7rem 1rem;text-align:center}

/* ===== 3) 우측 CART 패널 ===== */
#cart{
  background:#f5f5f5;padding:1.25rem 1rem 2rem;
  border-left:1px solid var(--clr-border);overflow-y:auto;max-height:100%
}
#cart h2{font-size:1.05rem;margin-bottom:.8rem;display:flex;align-items:center;gap:.3rem}
.badge{background:var(--clr-primary);color:#fff;border-radius:999px;padding:0 .5rem;font-size:.75rem}

/* --- Cart list --- */
#cart-content{list-style:none;margin:0 0 1rem 0;padding:0;font-size:.9rem}
#cart-content li{
  display:grid;grid-template-columns:1fr auto auto;gap:.45rem;
  align-items:center;border-bottom:1px dashed var(--clr-border);
  padding:.45rem 0
}
#cart-content .c-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cart-content .c-ctrl{
  display:flex;align-items:center;gap:.35rem;
  background:#eaeaea;border-radius:18px;padding:.15rem .55rem
}
#cart-content .c-ctrl button{
  border:none;background:none;font-size:1rem;line-height:1;color:#333;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center
}
#cart-content .c-ctrl button:hover{color:var(--clr-primary)}
#cart-content .qty{min-width:20px;text-align:center;font-weight:700;font-size:.9rem}
#cart-content .del{
  border:none;background:none;font-size:.9rem;color:#f44336
}
#cart-content .del:hover{color:#d32f2f}

#total-price{text-align:right;font-weight:700;margin-bottom:.6rem}

/* --- Buttons & coupon --- */
.cart-actions .btn{margin-top:.55rem}
.btn{
  width:100%;padding:.9rem 0;font-size:1rem;font-weight:600;
  border:none;border-radius:40px;box-shadow:0 2px 4px rgba(0,0,0,.15);
  transition:background .18s
}
.btn-add,.btn-purchase{background:var(--clr-primary);color:#fff}
.btn-add:hover,.btn-add:focus{background:var(--clr-primary-dark)}
.btn-purchase{background:#008cba;border-radius:8px}
.btn-purchase:hover{background:#007b9a}
#checkCouponBtn{background:var(--clr-accent)}
#checkCouponBtn:hover{background:#e64a19}

#couponArea,#couponStatus{display:none;}

/* 카트 흔들림 */
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
#cart.shake{animation:shake .4s}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:4.5rem;transform:translateX(-50%);
  background:#333;color:#fff;padding:.8rem 1.4rem;border-radius:30px;
  font-size:.9rem;opacity:0;pointer-events:none;z-index:2000;
  transition:opacity .25s
}
#toast.show{opacity:1}

/* ---------- Modal ---------- */
#item-modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);z-index:1500
}
.modal-content{
  background:#fff;border-radius:14px;width:90%;max-width:420px;
  padding:1.5rem;text-align:center;max-height:90vh;overflow-y:auto
}
.modal-content img{width:160px;margin:0 auto 1rem}
.modal-content pre{white-space:pre-wrap;font-size:.9rem;text-align:left;
  line-height:1.4;color:var(--clr-text-light);margin-bottom:1rem}

/* ---------- Mobile ---------- */
#cartToggle{
  position:fixed;bottom:1rem;right:1rem;width:56px;height:56px;
  border:none;border-radius:50%;background:var(--clr-primary);color:#fff;
  display:none;align-items:center;justify-content:center;font-size:1.5rem;
  z-index:1200;box-shadow:0 3px 6px rgba(0,0,0,.25)
}
#cartToggle .inner{position:relative}
#float-count{
  position:absolute;top:-6px;right:-10px;background:#ff1744;color:#fff;
  border-radius:999px;padding:0 .45rem;font-size:.75rem;font-weight:700
}

@media(max-width:960px){
  .main-wrap{grid-template-columns:1fr}
  #item-detail{display:none}
  #cart{
    position:fixed;top:0;right:-100%;width:var(--panel-w);
    height:100vh;max-height:100vh;transition:right .25s ease;z-index:1100;
    border-left:none;border-radius:0
  }
  body.cart-open #cart{right:0}
  #cartToggle{display:flex}
}

/* ---------- Fine-tuning ---------- */
@media(min-width:600px){
  .product-name{font-size:1rem}
  .product-price{font-size:.95rem}
}
@media(min-width:1280px){
  .products-grid{gap:1.25rem}
  .product-card{border-radius:14px}
}