@charset "utf-8";
/* 동시구독 패키지 — PC·모바일 공용 (접두어 sopbd-)
   솔루션 basic.css 에 .bd / .tx / .im 같은 짧은 전역 클래스가 있어 반드시 .sopbd 하위로만 쓴다
   화면: theme/basic/bundle.skin.php · m/theme/basic/bundle.skin.php · 동작: js/sop-bundle.js */

.sopbd{--sopbd-blue:#1428a0;--sopbd-line:#e4e8f0;--sopbd-ink:#0f1c6e;color:#1f2a44}
.sopbd *{box-sizing:border-box}

.sopbd-hd{margin:0 0 24px}
.sopbd-hd h3{margin:0 0 8px;font-size:26px;font-weight:700;color:var(--sopbd-ink);line-height:1.3}
.sopbd-hd p{margin:0;font-size:14px;line-height:1.65;color:#5b6478}

.sopbd-empty{padding:48px 20px;text-align:center;font-size:15px;color:#8a93a6;background:#f7f8fb;border-radius:14px;line-height:1.6}
.sopbd-empty span{font-size:13px;color:#a6adbd}

.sopbd-body{display:flex;gap:28px;align-items:flex-start}
.sopbd-main{flex:1 1 auto;min-width:0}
.sopbd-side{flex:0 0 320px;width:320px;position:sticky;top:20px}

/* 품목군 탭 */
.sopbd-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--sopbd-line)}
.sopbd-tabs a{display:inline-block;padding:9px 18px;border:1px solid #cfd6e4;border-radius:999px;font-size:14px;font-weight:700;color:var(--sopbd-ink);background:#fff;text-decoration:none;transition:.12s}
.sopbd-tabs a em{font-style:normal;font-size:12px;color:#8a93a6;margin-left:2px}
.sopbd-tabs a:hover{border-color:var(--sopbd-blue)}
.sopbd-tabs a.on{background:var(--sopbd-blue);border-color:var(--sopbd-blue);color:#fff}
.sopbd-tabs a.on em{color:rgba(255,255,255,.7)}

/* 상품 목록 */
.sopbd-goods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none}
.sopbd-goods li{position:relative;padding:18px;border:1px solid var(--sopbd-line);border-radius:16px;background:#fff;transition:.15s}
.sopbd-goods li:hover{border-color:#b9c4dc;box-shadow:0 8px 22px rgba(20,40,160,.08)}
.sopbd-goods .im{display:block;text-align:center;line-height:0}
.sopbd-goods .im img{max-width:100%;height:auto}
.sopbd-goods .tx{margin:14px 0 0}
.sopbd-goods .md{display:block;font-size:12px;color:#8a93a6;margin:0 0 4px}
.sopbd-goods .nm{display:block;font-size:15px;font-weight:700;color:#1f2a44;text-decoration:none;line-height:1.4;margin:0 0 6px}
.sopbd-goods .nm:hover{color:var(--sopbd-blue)}
.sopbd-goods .pl{display:block;font-size:12px;color:#6b7280;margin:0 0 10px}
.sopbd-goods .pr{margin:0;font-size:14px;color:#5b6478}
.sopbd-goods .pr b{font-size:20px;font-weight:700;color:var(--sopbd-ink)}
.sopbd-add{width:100%;margin:8px 0 0;padding:11px 0;border:1px solid var(--sopbd-blue);border-radius:10px;background:#fff;font-size:14px;font-weight:700;color:var(--sopbd-blue);cursor:pointer;transition:.12s}
.sopbd-add:hover{background:var(--sopbd-blue);color:#fff}
.sopbd-add.on{background:var(--sopbd-blue);color:#fff}

/* ── 옵션 모달 ──
   내용은 상세와 같은 옵션 패널(#sopOpt)이 통째로 들어온다. 패널 자체 스타일은 상세 CSS 를 그대로 쓰고
   여기서는 모달 틀만 잡는다 */
/* ⚠ 모달은 .sopbd 바깥(body 직하)에 놓이므로 토큰을 여기서 한 번 더 선언한다.
   빠뜨리면 var(--sopbd-blue) 가 무효가 되어 버튼이 '흰 글씨 + 투명 배경'으로 사라진다 */
/* ⚠ z-index 는 플로팅 상담바(.fxbar, sop-main.css 1000)보다 높아야 한다.
   같은 1000 이면 DOM 순서상 나중인 상담바(tail.skin)가 위로 올라와 모달을 덮는다 —
   좁은 폭에서 상담바가 3줄(176px)이 되면서 "이 조건으로 담기" 버튼이 가려 클릭이 안 됐다(2026-09-22 390px 실측).
   리뷰 팝업(10000)보다는 낮게 둬 기존 층위는 그대로 둔다.
   2026-09-29: 1300 → 9700. 솔루션 GNB(#gnb, style.css 9600)가 모달 위로 올라와 폰(390px)에서 페이지 맨 위에서
   모달을 열면 메뉴줄이 금액 부분을 가렸다. GNB(9600)보다 높고 리뷰 팝업(10000)보다 낮게. */
.sopbd-modal{--sopbd-blue:#1428a0;--sopbd-ink:#0f1c6e;--sopbd-line:#e4e8f0;
	position:fixed;inset:0;z-index:9700;display:none}
.sopbd-modal.on{display:block}
.sopbd-modal-dim{position:absolute;inset:0;background:rgba(15,28,110,.42)}
.sopbd-modal-box{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	display:flex;flex-direction:column;
	width:calc(100% - 32px);max-width:520px;max-height:88vh;
	background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(15,28,110,.3);
}
.sopbd-modal-box .x{
	position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;padding:0;
	border:0;border-radius:50%;background:#eef0f5;color:#5b6478;font-size:20px;line-height:32px;cursor:pointer;
}
.sopbd-modal-box .x:hover{background:#e0334c;color:#fff}
.sopbd-modal-bd{flex:1 1 auto;overflow-y:auto;padding:20px 20px 4px;-webkit-overflow-scrolling:touch}
.sopbd-opt-hd{margin:0 34px 14px 0}
.sopbd-opt-hd b{display:block;font-size:17px;font-weight:700;color:var(--sopbd-ink);line-height:1.35}
.sopbd-opt-hd span{display:block;margin:3px 0 0;font-size:12px;color:#8a93a6}
.sopbd-loading{padding:60px 0;text-align:center;font-size:14px;color:#8a93a6}
.sopbd-modal-ft{flex:0 0 auto;padding:14px 20px 18px;border-top:1px solid var(--sopbd-line);background:#fff}
.sopbd-modal-ft .apply{
	width:100%;height:52px;border:0;border-radius:12px;background:var(--sopbd-blue);
	font-size:16px;font-weight:700;color:#fff;cursor:pointer;transition:background .12s;
}
.sopbd-modal-ft .apply:hover{background:#0f1f80}

/* 담기함 항목의 [옵션 변경] */
.sopbd-list .opt{
	margin:4px 0 0;padding:3px 9px;border:1px solid #cfd6e4;border-radius:999px;
	background:#fff;font-size:11px;font-weight:700;color:var(--sopbd-blue);cursor:pointer;
}
.sopbd-list .opt:hover{background:var(--sopbd-blue);border-color:var(--sopbd-blue);color:#fff}

/* 카드 상태 문구 — 담겨 있는 상품만 알린다. 비어 있어도 높이를 차지해 그리드가 흔들리지 않게 한다 */
.sopbd-st{margin:12px 0 0;min-height:17px;font-size:12px;line-height:1.4;font-weight:700;color:transparent}
.sopbd-st.on{color:var(--sopbd-blue)}

/* 담기함 */
.sopbd-cart{border:1px solid var(--sopbd-line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(20,40,160,.06)}
.sopbd-cart .hd{padding:15px 18px;border-bottom:1px solid var(--sopbd-line);background:#f7f8fb;font-size:14px;font-weight:700;color:var(--sopbd-ink)}
.sopbd-cart .hd b{color:var(--sopbd-blue)}
.sopbd-cart .hd span{font-weight:400;font-size:12px;color:#8a93a6}
.sopbd-cart .bd{padding:16px 18px}
.sopbd-cart .sopbd-empty{padding:28px 10px;font-size:14px}

.sopbd-list{margin:0;padding:0;list-style:none}
.sopbd-list li{position:relative;display:flex;align-items:center;gap:10px;padding:12px 24px 12px 0;border-bottom:1px solid #f0f2f7}
.sopbd-list .im{flex:0 0 52px;line-height:0}
.sopbd-list .im img{width:52px;height:auto;border-radius:8px}
.sopbd-list .tx{flex:1 1 auto;min-width:0}
.sopbd-list .tx .ca{display:inline-block;margin:0 0 2px;padding:1px 6px;border-radius:3px;background:#eef2fd;color:var(--sopbd-blue);font-size:10px;font-weight:700}
.sopbd-list .tx b{display:block;font-size:13px;font-weight:700;color:#1f2a44;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sopbd-list .tx span{display:block;font-size:11px;color:#8a93a6;line-height:1.5}
.sopbd-list .pr{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--sopbd-ink)}
.sopbd-list .del{position:absolute;top:50%;right:0;transform:translateY(-50%);width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#eef0f5;color:#6b7280;font-size:15px;line-height:20px;cursor:pointer}
.sopbd-list .del:hover{background:#e0334c;color:#fff}

.sopbd-dc{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 0;font-size:12.5px;font-weight:700;color:#e0334c}
.sopbd-dc.base{margin-top:12px;color:#5b6478} /* 할인 전 합계 — 할인 줄과 구분 */
.sopbd-sum span i{display:block;margin:2px 0 0;font-style:normal;font-size:11px;font-weight:400;color:#8a93a6}
.sopbd-list .pr em{display:block;margin:2px 0 0;font-style:normal;font-size:11px;font-weight:700;color:#2189ff}
.sopbd-sum{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 0;padding:14px 0 0;border-top:2px solid var(--sopbd-ink)}
.sopbd-sum span{font-size:13px;font-weight:700;color:#5b6478}
.sopbd-sum b{font-size:22px;font-weight:700;color:var(--sopbd-blue)}
.sopbd-note{margin:10px 0 0;font-size:11px;line-height:1.6;color:#8a93a6}

.sopbd-cta{margin:16px 0 0}
.sopbd-cta .go{display:block;width:100%;margin:0 0 8px;padding:13px 0;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:.12s;border:1px solid var(--sopbd-blue)}
.sopbd-cta .go i{margin-right:5px}
.sopbd-cta .go.call{background:#fff;color:var(--sopbd-blue)}
.sopbd-cta .go.call:hover{background:#eef2fd}
.sopbd-cta .go.self{background:var(--sopbd-blue);color:#fff}
.sopbd-cta .go.self:hover{background:#0f1f80}

/* 모바일 — 담기함을 하단 고정바로 */
/* 형태(도어 수) 칩 — 품목군 탭 아래 2차 필터 (2026-09-22 삼성 피드백). 종류가 1가지면 PHP 가 아예 출력하지 않는다 */
.sopbd-forms{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 20px}
.sopbd-forms a{display:inline-block;padding:6px 13px;border:1px solid #e1e6f0;border-radius:999px;font-size:13px;font-weight:600;color:#5a6479;background:#f7f9fd;text-decoration:none;transition:.12s}
.sopbd-forms a em{font-style:normal;font-size:11px;color:#98a1b4;margin-left:2px}
.sopbd-forms a:hover{border-color:var(--sopbd-blue);color:var(--sopbd-blue)}
.sopbd-forms a.on{background:#eaf1ff;border-color:var(--sopbd-blue);color:var(--sopbd-blue)}
.sopbd-forms a.on em{color:var(--sopbd-blue);opacity:.75}

/* 담기함 헤더의 접기 화살표는 좁은 폭 전용 — PC 는 사이드 카트가 늘 펼쳐져 있어 쓰지 않는다 */
.sopbd-cart .hd i{display:none}

@media (max-width:767px){
	.sopbd-hd h3{font-size:20px}
	.sopbd-body{display:block}
	.sopbd-goods{grid-template-columns:repeat(2,1fr);gap:12px}
	.sopbd-goods li{padding:12px;border-radius:12px}
	.sopbd-goods .nm{font-size:13px}
	.sopbd-goods .pr b{font-size:17px}

	/* ⚠ 하단 고정 담기함은 플로팅 상담바(.fxbar, z-index 1000)를 피해야 한다.
	   z-index 90 · bottom 0 이면 상담바(좁은 폭에서 3줄 176px)가 위를 덮어 담기함 헤더를 누를 수 없다.
	   접혀 있을 때는 상담바 위(bottom 192 = 176 + bottom 16), 펼치면 상담바를 덮고 올라온다.
	   ⚠ 접힘 계산은 bottom:0 을 전제로 한다. bottom 을 192 로 올려 놨더니 그만큼 덜 내려가서
	     2품목만 담아도 카트가 화면 아래로 544px 넘쳐 합계·신청 버튼이 잘렸다 (2026-09-22 600×1000 실측).
	     그래서 bottom 은 0 으로 두고, 접힘 때 52px(헤더) + 192px(상담바 자리)만큼만 남기는 식으로 민다 —
	     헤더가 정확히 상담바 바로 위에 온다. 상담바가 덮는 192px 구간은 어차피 보이지 않는다. */
	/* ⚠ PC 기본값(.sopbd-side{position:sticky;top:20px})의 top 을 반드시 풀어야 한다.
	   top 이 남으면 fixed 요소의 높이가 top~bottom 으로 강제돼, 카트(52px)가 화면 위쪽에 붙고
	   접힘/펼침이 엉킨다 (2026-09-22 실측: side 높이 788/980px). */
	.sopbd-side{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;z-index:1100;
		transform:translateY(calc(100% - 52px - 192px));transition:transform .25s ease}
	.sopbd.open .sopbd-side{transform:translateY(0)}
	/* 2026-09-29: 접힘 계산(100% − 52 − 192)은 카트가 244px 보다 클 때만 맞다. 비어 있으면 카트가 189px 이라
	   오히려 위로 55px 올라가 본문(담은 제품이 없습니다)이 상담바 이름·연락처 칸을 덮었다(390px 실측).
	   접혀 있을 때는 헤더만 남기면 높이가 52px 로 고정돼 항상 상담바 바로 위에 헤더만 걸린다. */
	.sopbd:not(.open) .sopbd-cart > :not(.hd){display:none}
	.sopbd-cart{border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(20,40,160,.14)}
	.sopbd-cart .hd{display:block;width:100%;height:52px;text-align:left;border:0;border-bottom:1px solid var(--sopbd-line);cursor:pointer}
	.sopbd-cart .hd i{display:block;float:right;transition:transform .2s}
	.sopbd.open .sopbd-cart .hd i{transform:rotate(180deg)}
	.sopbd-cart .bd{max-height:58vh;overflow-y:auto}
	.sopbd-m{padding-bottom:64px}
}

/* 추천패키지 탭 — 패키지마다 소제목 (2026-10-08, sop_bd_packages) */
.sopbd-pkg-tit{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--sopbd-ink);letter-spacing:-.4px}
.sopbd-goods + .sopbd-pkg-tit{margin-top:32px}
@media (max-width:768px){ .sopbd-pkg-tit{font-size:16px} .sopbd-goods + .sopbd-pkg-tit{margin-top:24px} }

/* 제휴카드 1장당 1품목 · 다품목 할인 약정 총액 (2026-10-13, sop_bd_card_once) */
.sopbd-list .pr em.nc{color:#8a93a6;font-weight:500;line-height:1.35}
.sopbd-dc.sub{margin-top:2px;font-size:11.5px;font-weight:500;color:#e0334c;opacity:.85}