/* 문성전자 — 기획전(삼성 AI 구독 페스티벌) 화면 (2026-09-29, 접두어 .ms-pl 범위)
   마크업은 케이디엘 공통 extend/sop.plan.php 그대로 — 이 파일은 모양만 덮는다(sop-plan.css 다음, 선택자에 .ms-pl 를 붙여 우선).
   케이디엘: 가운데 제목 + 회색 알약 버튼 / 문성: 페스티벌 배너 톤(민트→하늘) 머리 + 화면 위에 붙는 네이비 탭 줄(11번가 기획전식).

   ⚠ 탭 줄 sticky: sticky 는 부모 상자 안에서만 붙는다. 탭이 머리(.sop-pl-hd) 안에 있으므로 머리를 display:contents 로
     풀어 탭의 기준 상자를 페이지 전체(.sop-pl)로 올린다. 머리 배경은 그래서 h2 에 준다.
   ⚠ 이동 위치는 공통 js/sop-plan.js 가 탭 줄이 sticky 이면 그 높이만큼 덜 내려간다. */

.ms-pl{--mp-navy:#0f1c6e;--mp-navy2:#142a8f;--mp-blue:#1a4fd6;--mp-sky:#1a6ad0;--mp-ink:#11183a;--mp-sub:#5b6785;--mp-line:#e3e9f5}
.ms-pl .sop-pl{max-width:1240px;padding:0 20px;margin-bottom:70px;color:var(--mp-ink)}

/* ── 머리 ── */
.ms-pl .sop-pl-hd{display:contents}
.ms-pl .sop-pl-hd > h2{position:relative;overflow:hidden;margin:28px 0 0;padding:52px 56px 50px;border-radius:26px;text-align:left;
  background:linear-gradient(120deg,#e9f6e8 0%,#d7f1e7 38%,#cfe6f8 72%,#c8dafb 100%);
  font-size:36px;font-weight:900;line-height:1.34;letter-spacing:-1.3px;color:var(--mp-navy)}
.ms-pl .sop-pl-hd > h2 em{color:var(--mp-blue)}
/* 배너와 같은 결의 둥근 빛 두 개 — 장식 */
.ms-pl .sop-pl-hd > h2:before,.ms-pl .sop-pl-hd > h2:after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.ms-pl .sop-pl-hd > h2:before{width:340px;height:340px;right:-60px;top:-150px;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 68%)}
.ms-pl .sop-pl-hd > h2:after{width:260px;height:260px;right:170px;bottom:-170px;background:radial-gradient(circle,rgba(31,124,240,.20),rgba(31,124,240,0) 70%)}

/* 영역형 기획전 페이지 상단 배너 이미지 (planlist.php?pl_no=N) — 이미지가 있으면 헤드라인 띠는 얇게 */
.ms-pl .sop-pl-kv{margin:28px 0 0}
.ms-pl .sop-pl-kv img{border-radius:26px}
.ms-pl .sop-pl-kv + h2{margin-top:16px;padding:30px 40px;font-size:28px}

/* 상단 내용(에디터) — 배너 이미지는 둥근 모서리, 조건 문구는 작게 */
.ms-pl .sop-pl-top{margin:28px 0 0;font-size:14px;line-height:1.7;color:var(--mp-sub)}
.ms-pl .sop-pl-top img{border-radius:22px}
@media (max-width:768px){
  .ms-pl .sop-pl-top{margin-top:14px;font-size:12.5px}
  .ms-pl .sop-pl-top img{border-radius:14px}
}

/* ── 탭 줄 (화면 위 고정) ── */
.ms-pl .sop-pl-tabs{position:sticky;top:0;z-index:60;display:flex;flex-wrap:nowrap;justify-content:stretch;gap:0;
  margin:22px 0 0;padding:6px;border-radius:18px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);
  box-shadow:0 0 0 1px var(--mp-line),0 8px 22px rgba(15,28,110,.08)}
.ms-pl .sop-pl-tab{flex:1 1 0;justify-content:center;min-height:56px;padding:12px 18px;border:0;border-radius:13px;background:transparent;
  color:var(--mp-sub) !important;font-size:17px;font-weight:800;letter-spacing:-.5px;text-align:center;box-shadow:none}
.ms-pl .sop-pl-tab:hover{background:#f1f5fd;color:var(--mp-navy) !important}
.ms-pl .sop-pl-tab.on{background:linear-gradient(90deg,var(--mp-navy) 0%,var(--mp-navy2) 55%,var(--mp-blue) 100%);color:#fff !important;
  box-shadow:0 6px 16px rgba(20,42,143,.28)}

.ms-pl .sop-pl-note{margin:14px 2px 0;font-size:13px;line-height:1.7;color:#8a93a8;text-align:left}

/* ── 기획전 한 구간 ── */
.ms-pl .sop-pl-sec{padding-top:46px;scroll-margin-top:90px}
.ms-pl .sop-pl-sec + .sop-pl-sec{margin-top:26px;border-top:0}
.ms-pl .sop-pl-sh{margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--mp-ink)}
.ms-pl .sop-pl-sh h3{font-size:28px;letter-spacing:-1px;color:var(--mp-ink)}

/* 품목별 소제목 ('진열 상품 전체' 구간) */
.ms-pl .sop-pl-grp + .sop-pl-grp{margin-top:40px}
.ms-pl .sop-pl-gh{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:8px 16px 8px 14px;border:0;border-radius:9999px;
  background:#eef3ff;color:var(--mp-navy);font-size:17px;font-weight:800}
.ms-pl .sop-pl-gh:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mp-sky)}
.ms-pl .sop-pl-gh span{min-width:24px;padding:2px 8px;border-radius:9999px;background:#fff;color:var(--mp-blue);font-size:12.5px;text-align:center}

.ms-pl .sop-pl-empty{border-radius:18px;background:#f5f8fd}

/* ⚠ 1240px 이하 탭 고정 (2026-09-29 390·800 실측): css/ms-responsive.css ① 이 html,body 에 overflow-x:hidden 을 걸어
     body 가 스크롤 상자가 되면 그 안의 sticky 가 전부 풀린다(탭이 위로 사라짐). 전역으로 바꾸면 지금 꺼져 있는
     다른 sticky(리뷰 요약·FAQ 메뉴·시뮬레이터 필터)가 휴대폰에서 붙어 버리므로 **기획전 페이지에서만** clip 으로 바꾼다
     (clip 은 넘침은 자르되 스크롤 상자를 만들지 않는다). 같은 폭에서 .cont_inner 가 좌우 여백을 주므로 이중 여백도 뺀다 */
@media (max-width:1240px){
  html:has(.ms-pl),html:has(.ms-pl) body{overflow-x:hidden;overflow-x:clip}
  .ms-pl .sop-pl{padding:0}
}

@media (max-width:1024px){
  .ms-pl .sop-pl-hd > h2{padding:40px 36px;font-size:30px}
  .ms-pl .sop-pl-tab{font-size:15.5px;min-height:50px}
  .ms-pl .sop-pl-sh h3{font-size:23px}
}

@media (max-width:768px){
  .ms-pl .sop-pl{padding:0}   /* 좌우 여백은 .cont_inner 가 준다 (위 1240 규칙 참고) */
  .ms-pl .sop-pl-hd > h2{margin-top:16px;padding:28px 22px 30px;border-radius:18px;font-size:23px;letter-spacing:-.9px}
  .ms-pl .sop-pl-hd > h2:before{width:220px;height:220px;right:-80px;top:-110px}
  .ms-pl .sop-pl-hd > h2:after{display:none}
  .ms-pl .sop-pl-kv{margin-top:14px}
  .ms-pl .sop-pl-kv img{border-radius:16px}
  .ms-pl .sop-pl-kv + h2{padding:22px 20px;font-size:20px}
  .ms-pl .sop-pl-tabs{margin-top:14px;padding:4px;border-radius:14px}
  .ms-pl .sop-pl-tab{min-height:44px;padding:9px 8px;border-radius:11px;font-size:13.5px;letter-spacing:-.6px;word-break:keep-all}
  .ms-pl .sop-pl-note{font-size:11.5px}
  .ms-pl .sop-pl-sec{padding-top:32px;scroll-margin-top:70px}
  .ms-pl .sop-pl-sh{margin-bottom:16px;padding-bottom:10px}
  .ms-pl .sop-pl-sh h3{font-size:19px}
  .ms-pl .sop-pl-gh{font-size:15px;padding:6px 12px 6px 11px;margin-bottom:12px}
  .ms-pl .sop-pl-grp + .sop-pl-grp{margin-top:30px}
}