/* v2-buybox.css — 쿠팡식 구매 상자 (PC 오른쪽 고정 · 모바일 하단 시트) */
.bb{--bb-ink:#0b1220;--bb-ink2:#334155;--bb-muted:#64748b;--bb-line:#e5e7eb;--bb-brand:#0a9b6f;--bb-brand-ink:#067552;--bb-soft:#e8f6f0;
  font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;word-break:keep-all;color:var(--bb-ink);z-index:95}
.bb-in{background:#fff;border:1px solid var(--bb-line);border-radius:20px;box-shadow:0 18px 40px -18px rgba(11,18,32,.28);padding:22px 22px 18px;position:relative}
.bb-x{display:none;position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;background:none;font-size:26px;color:var(--bb-muted);cursor:pointer}
.bb-badge{display:inline-block;font-size:12.5px;font-weight:750;color:var(--bb-brand-ink);background:var(--bb-soft);border-radius:999px;padding:4px 10px}
.bb-title{margin:8px 0 0;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
.bb-step{margin:16px 0 8px;font-size:13px;font-weight:750;color:var(--bb-muted)}
.bb-opts{display:grid;gap:8px}
.bb-opt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--bb-line);border-radius:14px;padding:11px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.bb-opt input{accent-color:var(--bb-brand);width:16px;height:16px;flex:none;margin:0}
.bb-opt.on{border-color:var(--bb-brand);background:#f3fbf7}
.bb-ol{flex:1;min-width:0}
.bb-ol b{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:720}
.bb-ol b i{font-style:normal;font-size:11px;font-weight:750;color:#fff;background:var(--bb-brand);border-radius:6px;padding:1px 6px}
.bb-ol small{display:block;font-size:12.5px;color:var(--bb-muted);margin-top:2px;line-height:1.45}
.bb-op{font-size:14.5px;font-weight:800;white-space:nowrap;text-align:right}
.bb-op small{display:block;font-size:11.5px;font-weight:600;color:var(--bb-muted)}
.bb-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px dashed var(--bb-line)}
.bb-total span{font-size:14px;font-weight:700;color:var(--bb-ink2)}
.bb-total b{font-size:24px;font-weight:850;letter-spacing:-.02em;color:var(--bb-brand-ink)}
.bb-total b small{font-size:13px;font-weight:700;color:var(--bb-muted);margin-left:2px}
.bb-cta{display:flex;align-items:center;justify-content:center;margin-top:14px;min-height:52px;border-radius:14px;background:var(--bb-ink);color:#fff!important;font-size:16px;font-weight:750;text-decoration:none!important}
.bb-cta:hover{background:#1e293b}
.bb-alt{display:flex;align-items:center;justify-content:center;margin-top:8px;min-height:46px;border-radius:14px;border:1.5px solid var(--bb-line);background:#fff;color:var(--bb-ink)!important;font-size:14.5px;font-weight:700;text-decoration:none!important}
.bb-alt:hover{border-color:#cbd5e1}
.bb-notes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.bb-notes li{font-size:12.5px;color:var(--bb-muted);padding-left:14px;position:relative;line-height:1.5}
.bb-notes li::before{content:"";position:absolute;left:3px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--bb-brand)}
.bb-mount .ck{margin:10px 0 0;border:0;box-shadow:none;padding:0;background:none}
.bb.pulse .bb-in{animation:bbpulse .9s ease}
@keyframes bbpulse{0%,100%{box-shadow:0 18px 40px -18px rgba(11,18,32,.28)}40%{box-shadow:0 0 0 4px rgba(10,155,111,.35),0 18px 40px -18px rgba(11,18,32,.28)}}
.bb-bar,.bb-dim{display:none}

/* PC: 오른쪽 고정 */
@media (min-width:1180px){
  body.has-bb{--bb-r:max(20px,calc((100vw - 1440px)/2))}
  body.has-bb main{padding-left:var(--bb-r);padding-right:calc(var(--bb-r) + 360px)}
  body.has-bb main .wrap,body.has-bb main .container{max-width:100%}
  .bb{position:fixed;right:var(--bb-r);top:calc(var(--header-h,68px) + 18px);width:340px;max-height:calc(100vh - var(--header-h,68px) - 36px);overflow:auto;border-radius:20px;transition:opacity .2s,transform .2s;scrollbar-width:thin}
  body.bb-foot .bb{opacity:0;transform:translateY(-8px);pointer-events:none}
  body.has-bb .chancebot{right:calc(var(--bb-r) + 360px)!important}
}
/* 모바일·태블릿: 하단 바 + 시트 */
@media (max-width:1179px){
  .bb{position:fixed;left:0;right:0;bottom:0;max-height:86vh;overflow:auto;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:120}
  .bb.open{transform:none}
  .bb-in{border-radius:22px 22px 0 0;border-bottom:0;padding:26px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .bb-x{display:block}
  .bb-dim{position:fixed;inset:0;background:rgba(11,18,32,.45);z-index:110}
  .bb-dim.on{display:block}
  .bb-bar{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid #e5e7eb;font-family:"Pretendard Variable",Pretendard,sans-serif}
  .bb-bar-p{flex:1;font-size:14px;font-weight:750;color:#0b1220;line-height:1.3}
  .bb-bar-b{flex:none;min-height:48px;padding:0 22px;border:0;border-radius:12px;background:#0b1220;color:#fff;font-size:15.5px;font-weight:750;cursor:pointer}
  body.has-bb{padding-bottom:72px}
  body.has-bb .chancebot{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  html.bb-lock,html.bb-lock body{overflow:hidden}
}
.bb .ck-fields{grid-template-columns:minmax(0,1fr)!important}
.bb .ck-f{grid-column:auto!important}
.bb-group{margin:10px 0 2px;font-size:12.5px;font-weight:800;color:var(--bb-brand-ink)}
.bb-opts .bb-group:first-child{margin-top:0}
.bb-act{position:sticky;bottom:-18px;background:#fff;margin:0 -22px -18px;padding:2px 22px 18px;border-radius:0 0 20px 20px;z-index:2}
.bb-act:empty{display:none}
@media (min-width:1180px){.bb-opt{padding:9px 11px}.bb-ol small{font-size:12px}.bb-step{margin:12px 0 6px}.bb-title{font-size:18px}.bb-in{padding:18px 22px}.bb-act{box-shadow:0 -10px 16px -12px rgba(11,18,32,.18)}}
@media (max-width:1179px){.bb-act{bottom:calc(-18px - env(safe-area-inset-bottom,0px));margin:0 -18px calc(-18px - env(safe-area-inset-bottom,0px));padding:2px 18px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 16px -12px rgba(11,18,32,.18)}}
/* 2단계 주문: 1단계에서는 입력칸·동의·결제 버튼 숨김 */
.bb.bb-step1 .ck-block:has(.ck-fields),.bb.bb-step1 .ck-agree,.bb.bb-step1 .ck-pay,.bb.bb-step1 .ck-msg{display:none!important}
.bb:not(.bb-step1) .bb-next{display:none}
button.bb-cta{width:100%;border:0;cursor:pointer;font-family:inherit}
/* 옵션이 많으면(PC) 설명 줄을 숨겨 한 화면에 다 보이게 */
@media (min-width:1180px){.bb.bb-many .bb-ol small{display:none}.bb.bb-many .bb-op small{display:inline;margin-left:2px}.bb.bb-many .bb-opt{padding:8px 11px}.bb.bb-many .bb-group{margin-top:8px}}