/* ─────────────────────────────────────────────────────────────
   문성전자 — 메인 섹션 헤더 (ms-sh)
   시안: docs/design/section-head-draft.html (2026-09-08 확정) · 마크업 extend/ms.sechead.php
   케이디엘 .mtit(가운데 제목) · .bestca_tab(밑줄 탭) 규칙을 .ms-sh 범위에서 덮어쓰고, 캐러셀 푸트(.sop-carousel-foot)는 .ms-sh-foot 로 재스타일
   ───────────────────────────────────────────────────────────── */
.ms-sh{--sh-navy:#0f1c6e;--sh-ink:#1b2440;--sh-mute:#5d6680;--sh-line:#e6e9f2;--sh-blue:#1a6ad0;--sh-soft:#eaf3ff;--sh-accent:#1a6ad0;--sh-en:'Samsung Sharp Sans','Samsung One Korean',sans-serif;
  display:flex;align-items:flex-end;gap:22px;margin-bottom:26px;font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif;line-height:1.33;text-align:left;clear:both}
.ms-sh *{box-sizing:border-box}
.ms-sh a{text-decoration:none !important}
.ms-sh .tt{flex:none;max-width:60%}
.ms-sh .eyebrow{font-family:var(--sh-en);font-size:12px;letter-spacing:.14em;color:var(--sh-accent);display:flex;align-items:center;gap:7px;margin-bottom:8px;transition:color .25s}
.ms-sh .eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--sh-accent);transition:background .25s}
.ms-sh h2{font-size:28px;font-weight:700;line-height:1.2;color:var(--sh-navy);letter-spacing:-.01em;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:0;text-align:left}
.ms-sh h2 small{display:block;font-size:14px;font-weight:400;color:var(--sh-mute);margin-top:6px;letter-spacing:0}
/* 시그니처 — 제목 아래 짧은 색 막대 (카테고리 탭 색을 따라감) */
.ms-sh .tt:after{content:'';display:block;width:34px;height:4px;border-radius:2px;background:var(--sh-accent);margin-top:12px;transition:background .25s}
/* 점선 리더 */
.ms-sh .lead{flex:1;border-bottom:1px dotted #c9cfdd;margin-bottom:26px;min-width:40px}
.ms-sh .ctl{flex:none;display:flex;align-items:center;gap:8px;padding-bottom:16px}

/* ── 카테고리 탭 칩 (.bestca_tab 유지: 스킨 JS 가 li.active 를 토글) ── */
.ms-sh .bestca_tab{margin:0 !important;text-align:left;display:flex;gap:6px;clear:none}
.ms-sh .bestca_tab li{--t:#f1f3f7;--c:#5d6680;height:36px;line-height:1;padding:0 16px 0 12px !important;margin:0 !important;border-radius:9999px;border:1.5px solid var(--sh-line);background:#fff;font-size:14px;font-weight:700;color:var(--sh-mute);cursor:pointer;display:inline-flex;align-items:center;position:relative;transition:background .2s,border-color .2s,color .2s}
.ms-sh .bestca_tab li:before{display:none !important}
.ms-sh .bestca_tab li span{display:inline-flex;align-items:center;gap:8px;font-weight:inherit}
.ms-sh .bestca_tab li span i{width:9px;height:9px;border-radius:50%;background:var(--c);opacity:.55;transition:opacity .2s,transform .2s;font-style:normal}
.ms-sh .bestca_tab li:hover{border-color:var(--c);color:var(--sh-navy);font-weight:700}
.ms-sh .bestca_tab li.active{background:var(--t);border-color:var(--t);color:var(--sh-navy);font-weight:700}
.ms-sh .bestca_tab li.active span i{opacity:1;transform:scale(1.25)}

/* ── 캐러셀 푸트 — 카드 아래: 진행선(왼쪽) + 카운터 + 둥근 화살표(오른쪽). 가이드 ⑩ 배치 (#slfoot{i}) ── */
.ms-sh-foot{display:flex;align-items:center;gap:12px;margin-top:24px !important;font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif}
.ms-sh-foot .sop-progress{flex:0 0 220px !important;width:220px;height:3px;border-radius:2px;background:#e6e9f2;position:relative;overflow:hidden;margin:0}
.ms-sh-foot .sop-progress i{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:#0f1c6e;transition:width .3s}
.ms-sh-foot .cnt{font-family:'Samsung Sharp Sans','Samsung One Korean',sans-serif;font-size:12px;letter-spacing:.06em;color:#0f1c6e;white-space:nowrap}
.ms-sh-foot .cnt span{color:#b6bdd0}
.ms-sh-foot .sop-arrows{margin-left:auto;display:flex;gap:8px}
.ms-sh-foot .sop-arrows .slick-arrow{position:static !important;width:36px;height:36px;border:1.5px solid #e6e9f2;border-radius:50%;background:#fff;color:#0f1c6e;transform:none !important;display:grid !important;place-items:center;transition:background .15s,border-color .15s,color .15s;padding:0;cursor:pointer}
.ms-sh-foot .sop-arrows .slick-arrow:before{font-family:'Ionicons' !important;font-size:16px !important;color:inherit !important;opacity:1;line-height:1}
.ms-sh-foot .sop-arrows .slick-prev:before{content:'\f3d2'}
.ms-sh-foot .sop-arrows .slick-next:before{content:'\f3d3'}
.ms-sh-foot .sop-arrows .slick-arrow:hover{background:#0f1c6e;border-color:#0f1c6e;color:#fff}
.ms-sh-foot.m{margin:16px 16px 0 !important}
.ms-sh-foot.m .sop-progress{flex-basis:90px !important;width:90px}
.ms-sh-foot.m .sop-arrows .slick-arrow{width:32px;height:32px}
/* ── 링크 알약 ── */
.ms-sh .more{height:36px;padding:0 6px 0 16px;border-radius:9999px;border:1.5px solid var(--sh-line);display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--sh-navy);white-space:nowrap;transition:border-color .15s,background .15s}
.ms-sh .more i{width:24px;height:24px;border-radius:50%;background:var(--sh-navy);display:grid;place-items:center;font-style:normal}
.ms-sh .more i svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ms-sh .more:hover{border-color:var(--sh-navy);background:var(--sh-soft)}
.ms-sh .more.ig,.ms-sh .more.yt{padding:0 16px 0 10px}
.ms-sh .more .igic{width:22px;height:22px;border-radius:7px;background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7);display:grid;place-items:center}
.ms-sh .more .igic svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-sh .more .ytic{width:22px;height:22px;border-radius:50%;background:#ff0000;display:grid;place-items:center}
.ms-sh .more .ytic svg{width:12px;height:12px;fill:#fff}
/* 헤더로 옮겼으니 섹션 아래 기존 요소는 숨김 */
.cont_wrap2 > .pr_more,.cont_wrap > .pr_more{display:none}
.sop-video-grid{margin-top:0 !important}

/* ── 모바일 ── */
.ms-sh.m{flex-wrap:wrap;gap:12px 0;margin:0 0 16px;padding:0 16px}
.ms-sh.m .tt{flex:1;max-width:none}
.ms-sh.m .lead{display:none}
.ms-sh.m h2{font-size:21px}
.ms-sh.m h2 small{font-size:12px;margin-top:4px}
.ms-sh.m .tt:after{margin-top:8px}
.ms-sh.m .ctl{padding-bottom:0}
.ms-sh.m .bestca_tab{flex-basis:100%;width:100%;overflow:auto;scrollbar-width:none;margin:0 -16px !important;padding:2px 16px !important}
.ms-sh.m .bestca_tab::-webkit-scrollbar{display:none}
.ms-sh.m .bestca_tab li{flex:none;height:32px;font-size:12px;padding:0 13px 0 10px !important}
.ms-sh.m .ctl:has(.bestca_tab){flex-basis:100%}
.ms-sh.m .more{height:32px;font-size:12px}