/* 기획전 페스티벌 화면 (2026-09-28, 삼성 수정사항 1번) — 접두어 sop-pl-
   PC·모바일 같은 마크업 한 벌(extend/sop.plan.php sop_plan_html).
   상품 카드는 목록 화면과 같은 .pr_desc 를 그대로 쓰므로 여기서는 담는 그릇만 잡는다. */

.sop-pl{max-width:1200px;margin:0 auto 60px;padding:0 20px;box-sizing:border-box;
  --pl-blue:#0876ff;--pl-navy:#0b1a4d;--pl-line:#e3eaf7;
  font-family:'Samsung One Korean','Malgun Gothic',sans-serif;color:#11121d}
.sop-pl *,.sop-pl *:before,.sop-pl *:after{box-sizing:border-box}

/* ── 머리 ── */
.sop-pl-hd{padding:46px 0 34px;text-align:center}
.sop-pl-hd > h2{margin:0;font-size:34px;font-weight:900;line-height:1.36;letter-spacing:-1.2px;color:var(--pl-navy);word-break:keep-all}
.sop-pl-hd > h2 em{font-style:normal;color:var(--pl-blue)}

.sop-pl-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.sop-pl-tab{display:inline-flex;align-items:center;gap:6px;padding:13px 26px;border-radius:9999px;
  border:1px solid transparent;background:#f2f4f8;color:#4a5578 !important;
  font-size:15px;font-weight:700;letter-spacing:-.4px;line-height:1.2;
  text-decoration:none !important;transition:.15s;word-break:keep-all}
.sop-pl-tab:hover{background:#e8edf7;color:var(--pl-navy) !important}
.sop-pl-tab.on{background:#fff;border-color:var(--pl-blue);color:var(--pl-blue) !important;
  box-shadow:0 4px 14px rgba(8,118,255,.16)}

.sop-pl-note{margin:24px 0 0;font-size:12.5px;line-height:1.7;color:#98a1b5;word-break:keep-all}

/* ── 기획전 한 줄 ── */
.sop-pl-sec{padding-top:40px;scroll-margin-top:24px}
.sop-pl-sec + .sop-pl-sec{margin-top:16px;border-top:1px solid var(--pl-line)}
.sop-pl-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.sop-pl-sh h3{margin:0;font-size:24px;font-weight:900;letter-spacing:-.8px;color:var(--pl-navy);word-break:keep-all}
.sop-pl-sh .more{flex:none;display:inline-flex;align-items:center;gap:3px;
  font-size:14px;font-weight:700;color:#5b6785 !important;text-decoration:none !important;white-space:nowrap}
.sop-pl-sh .more:hover{color:var(--pl-blue) !important}
.sop-pl-sh .more i{font-style:normal;font-size:17px;line-height:1}

.sop-pl-banner{margin:0 0 22px}
.sop-pl-banner img{display:block;width:100%;height:auto;border-radius:14px}

/* 상품 그리드는 .pr_desc 규칙을 따른다 — 여기서는 위 여백만 정리 */
.sop-pl-goods{margin-top:0}

/* 영역형 기획전 한 페이지 (planlist.php?pl_no=N, 2026-09-29) — 상단 배너 이미지 */
.sop-pl-kv{margin:24px 0 0}
.sop-pl-kv img{display:block;width:100%;height:auto;border-radius:16px}
.sop-pl-page .sop-pl-kv + h2{margin-top:26px}

/* 상단 내용 — 에디터 HTML (개별 페이지관리와 같은 방식). PC/모바일 내용이 둘 다 있으면 640px 에서 바꿔 보인다 */
.sop-pl-top{margin:24px 0 0;text-align:left;word-break:keep-all}
.sop-pl-top img{max-width:100%;height:auto !important}
.sop-pl-top .mo{display:none}
@media (max-width:640px){
  .sop-pl-top.has-mo .pc{display:none}
  .sop-pl-top.has-mo .mo{display:block}
}

/* '진열 상품 전체' 기획전(관련상품코드 *)의 품목별 소제목 (2026-09-29) */
.sop-pl-grp + .sop-pl-grp{margin-top:34px}
.sop-pl-gh{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding-left:12px;border-left:4px solid var(--pl-blue);
  font-size:19px;font-weight:800;letter-spacing:-.6px;color:var(--pl-navy);line-height:1.2}
.sop-pl-gh span{font-size:13px;font-weight:700;color:#8b94a8}

.sop-pl-empty{padding:56px 20px;text-align:center;font-size:15px;color:#8b94a8;
  background:#f7f9fc;border-radius:14px}
.sop-pl-empty.sm{padding:34px 20px;font-size:14px}

@media (max-width:1024px){
  .sop-pl-hd{padding:36px 0 28px}
  .sop-pl-hd > h2{font-size:28px}
  .sop-pl-tab{padding:11px 20px;font-size:14px}
  .sop-pl-sh h3{font-size:21px}
}

@media (max-width:768px){
  .sop-pl{padding:0 16px;margin-bottom:44px}
  .sop-pl-hd{padding:28px 0 22px}
  .sop-pl-hd > h2{font-size:22px;letter-spacing:-.9px}
  .sop-pl-tabs{gap:8px;margin-top:20px}
  .sop-pl-tab{padding:9px 15px;font-size:13px}
  .sop-pl-note{margin-top:18px;font-size:11.5px}
  .sop-pl-sec{padding-top:30px}
  .sop-pl-sh{margin-bottom:14px}
  .sop-pl-sh h3{font-size:18px}
  .sop-pl-sh .more{font-size:13px}
  .sop-pl-gh{font-size:16px;margin-bottom:10px}
  .sop-pl-grp + .sop-pl-grp{margin-top:26px}
  .sop-pl-banner{margin-bottom:16px}
  .sop-pl-banner img{border-radius:10px}
  .sop-pl-empty{padding:40px 16px;font-size:14px}
}