/* 상품 카드 [구독 신청하기] + 옵션 선택 팝업 (2026-09-30 삼성 929 3번)
   js/sop-optmodal.js 와 짝. 팝업 안은 상세와 똑같은 패널(sop_view_option_panel)을 ajax 로 받아 넣으므로
   옵션 블록의 모양은 css/sop-view-option.css · css/sop-card-chip.css 가 그대로 책임진다.
   여기서는 카드 버튼과 팝업 껍데기만 그린다. */

/* ── 카드 아래 버튼 ──
   ⚠ 카드 전체가 <a class="sop-card"> 한 덩어리라 버튼은 그 바깥 형제다 (안에 넣으면 중첩 위반). */
.sop-card-apply{
  display:block;width:100%;margin:8px 0 0;padding:11px 10px;box-sizing:border-box;
  border:1.5px solid var(--sop-blue,#1428a0);border-radius:10px;background:#fff;
  font-family:'Samsung One Korean','Malgun Gothic',sans-serif;font-size:14px;font-weight:700;
  color:var(--sop-blue,#1428a0);line-height:1.2;cursor:pointer;
  transition:background .15s,color .15s}
.sop-card-apply:hover,.sop-card-apply:focus{background:var(--sop-blue,#1428a0);color:#fff}
.sop-card-apply:active{transform:translateY(1px)}
@media (max-width:768px){ .sop-card-apply{padding:9px 8px;font-size:13px;border-radius:9px} }

/* ⚠ 메인 캐러셀 칸이 솔루션 원본(theme/basic/style.css)에서 `.pr_slide .prli{height:460px}` 로 고정돼 있다.
   원본 카드만으로도 495px 라 이미 35px 넘치고 있었고, 버튼을 붙이면 85px 가 칸 밖으로 나가 아래 영역을 덮는다.
   768 이하는 2026-09-22 에 같은 이유로 track 을 flex 로 바꿔 뒀다(css/sop-responsive.css 179~184) — PC 도 같게 맞춘다.
   폭은 건드리지 않는다(slick 이 계산한 인라인 width 그대로) — 높이만 내용을 따르고 카드끼리 서로 같아진다. */
@media (min-width:769px){
  .pr_slide .slick-track{display:flex !important;align-items:stretch}
  .pr_slide .prli{height:auto !important}
}

/* ── 팝업 ──
   ⚠ z-index 9700 — 솔루션 GNB 가 9600 이라 그 위여야 한다 (리뷰 팝업 10000 아래). 동시구독 모달과 같은 층. */
.sopom{display:none}
.sopom.on{display:block;position:fixed;inset:0;z-index:9700}
.sopom-dim{position:absolute;inset:0;background:rgba(10,18,50,.55)}
.sopom-box{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100% - 28px));max-height:88vh;display:flex;flex-direction:column;
  background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(10,20,80,.35);overflow:hidden}
.sopom-x{
  position:absolute;right:10px;top:8px;z-index:2;width:36px;height:36px;padding:0;
  border:0;border-radius:50%;background:transparent;font-size:26px;line-height:1;color:#5b6076;cursor:pointer}
.sopom-x:hover{background:#f1f2f6;color:#111318}
.sopom-bd{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 18px 6px}
.sopom-load{padding:56px 10px;text-align:center;color:#8487a0;font-size:14px}

/* 팝업 머리 — bundle.php?act=opt 가 상품명·모델명을 같이 내보낸다 */
.sopom-bd .sopbd-opt-hd{margin:0 34px 12px 0}
.sopom-bd .sopbd-opt-hd b{display:block;font-size:17px;font-weight:700;color:#111318;line-height:1.35}
.sopom-bd .sopbd-opt-hd span{display:block;margin-top:3px;font-size:12px;color:#8487a0}

/* 팝업 안에서는 패널이 카드가 아니라 본문이다 — 상세에서 쓰던 바깥 여백·테두리를 턴다 */
.sopom-bd #sopOpt{margin:0;padding:0;border:0;box-shadow:none;width:auto;max-width:none}

.sopom-ft{
  flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:12px 18px 16px;border-top:1px solid #f1f1f5;background:#fff}
.sopom-more{
  flex:1 1 100%;order:-1;margin-bottom:2px;font-size:13px;color:#5b6076;text-decoration:underline}
.sopom-more:hover{color:var(--sop-blue,#1428a0)}
/* 장바구니에 담기 — 신청 버튼과 성격이 달라 한 줄 위에 따로 둔다 (2026-09-30) */
.sopom-cart{
  flex:1 1 100%;order:-1;margin-bottom:2px;padding:12px 8px;border-radius:10px;
  border:1.5px solid #d7ddea;background:#fff;
  font-family:'Samsung One Korean','Malgun Gothic',sans-serif;font-size:14px;font-weight:700;
  color:#5b6076;line-height:1.2;cursor:pointer}
.sopom-cart:hover,.sopom-cart:focus{border-color:var(--sop-blue,#1428a0);color:var(--sop-blue,#1428a0)}
.sopom-cart:disabled{opacity:.5;cursor:default}

.sopom-go{
  flex:1 1 0;min-width:0;padding:14px 8px;border-radius:10px;border:1.5px solid var(--sop-blue,#1428a0);
  font-family:'Samsung One Korean','Malgun Gothic',sans-serif;font-size:15px;font-weight:700;
  line-height:1.2;cursor:pointer;white-space:nowrap}
.sopom-go i{margin-right:5px;font-size:16px;vertical-align:-1px}
.sopom-go.call{background:#fff;color:var(--sop-blue,#1428a0)}
.sopom-go.call:hover{background:#eef2ff}
.sopom-go.self{background:var(--sop-blue,#1428a0);color:#fff}
.sopom-go.self:hover{filter:brightness(1.08)}

@media (max-width:768px){
  .sopom-box{width:calc(100% - 20px);max-height:92vh;border-radius:14px}
  .sopom-bd{padding:16px 14px 6px}
  .sopom-ft{padding:10px 14px 14px;gap:6px}
  .sopom-go{padding:13px 6px;font-size:14px}
  .sopom-go i{display:none}          /* 좁은 폭에서는 아이콘을 빼야 문구가 한 줄로 들어간다 */
}
@media (max-width:360px){
  .sopom-go{flex:1 1 100%}           /* 두 버튼을 한 줄에 못 넣는 폭 */
}