/* ─────────────────────────────────────────────────────────────
   문성전자 — 목록 페이지 상단 (ms-lh: 카테고리 색 밴드 · ms-lh-cats: 누끼 칩 · 툴바 .tab_sort / #sct_sort 재스타일)
   시안: docs/design/list-head-draft.html (2026-09-09 확정) · 마크업 extend/ms.listhead.php
   글자 크기: 제목 32px(PC)/22px(M), 본문 14/12px, 행간 1.33 (삼성 가이드 타입 스케일)
   ───────────────────────────────────────────────────────────── */
.ms-lh{--lh-navy:#0f1c6e;--lh-ink:#1b2440;--lh-mute:#5d6680;--lh-line:#e6e9f2;--lh-t:#f1f3f7;--lh-c:#5d6680;--lh-en:'Samsung Sharp Sans','Samsung One Korean',sans-serif;
  position:relative;border-radius:26px;background:linear-gradient(120deg,#fff 0%,var(--lh-t) 55%,var(--lh-t) 100%);border:1px solid var(--lh-line);padding:34px 40px 30px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;overflow:hidden;min-height:196px;margin:10px 0 0;
  font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif;line-height:1.33;text-align:left;color:var(--lh-ink)}
.ms-lh *{box-sizing:border-box}
.ms-lh a{text-decoration:none !important}
.ms-lh:before{content:'';position:absolute;right:-60px;top:-80px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none}
.ms-lh .tx{position:relative;z-index:1;min-width:0}
.ms-lh .crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--lh-mute);margin-bottom:12px;flex-wrap:wrap}
.ms-lh .crumb i{width:3px;height:3px;border-radius:50%;background:#b6bdd0;font-style:normal;display:inline-block}
.ms-lh .crumb a{color:var(--lh-mute)}
.ms-lh .crumb a:hover{color:var(--lh-navy)}
.ms-lh .crumb .home{font-family:var(--lh-en);letter-spacing:.1em}
.ms-lh .crumb span{color:var(--lh-ink);font-weight:700}
.ms-lh h2{display:flex;align-items:flex-end;gap:14px;font-size:32px;line-height:1.2;font-weight:700;color:var(--lh-navy);letter-spacing:-.01em;margin:0;padding:0;text-align:left}
.ms-lh h2 .cnt{font-family:var(--lh-en);font-size:14px;letter-spacing:.04em;color:var(--lh-c);padding:0 0 6px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ms-lh h2 .cnt:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lh-c)}
.ms-lh p{margin:10px 0 0;font-size:14px;color:var(--lh-mute);max-width:520px}
.ms-lh .acts{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.ms-lh .acts a{height:36px;padding:0 16px;border-radius:9999px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;background:#fff;border:1.5px solid var(--lh-line);color:var(--lh-navy);transition:border-color .15s;white-space:nowrap}
.ms-lh .acts a:hover{border-color:var(--lh-c)}
.ms-lh .acts a.pri{background:var(--lh-navy);border-color:var(--lh-navy);color:#fff}
.ms-lh .acts a.pri:hover{background:#142a8f}
.ms-lh .acts a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 오른쪽 대표 누끼 — 흰 원판 위 */
.ms-lh .fig{position:relative;width:200px;height:170px;display:flex;align-items:flex-end;justify-content:center;z-index:1}
.ms-lh .fig:before{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150px;height:150px;border-radius:50%;background:#fff;box-shadow:0 20px 40px rgba(15,28,110,.12)}
.ms-lh .fig img{position:relative;height:176px;max-width:190px;width:auto;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 14px 18px rgba(15,28,110,.16))}

/* ── 형제 카테고리 칩 (.sub_tree 유지 — 솔루션 규칙 덮어쓰기) ── */
.sub_tree.ms-lh-cats{display:flex;justify-content:flex-start;gap:10px;margin:18px 0 0 !important;padding:0 !important;flex-wrap:wrap;text-align:left;border:0 !important;background:none !important;width:auto !important;list-style:none}
.sub_tree.ms-lh-cats:after{display:none}
.sub_tree.ms-lh-cats li{--t:#f1f3f7;--c:#5d6680;float:none !important;width:auto !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;display:block}
.sub_tree.ms-lh-cats li a{display:inline-flex !important;align-items:center;gap:10px;height:48px;padding:0 18px 0 6px !important;border-radius:9999px;border:1.5px solid #e6e9f2;background:#fff !important;font-size:14px !important;font-weight:700;color:#5d6680 !important;transition:border-color .15s,background .15s,color .15s;line-height:1;text-decoration:none !important;width:auto !important;text-align:left}
.sub_tree.ms-lh-cats li a i{width:36px;height:36px;border-radius:50%;background:var(--t);display:grid;place-items:center;overflow:hidden;font-style:normal;flex:none}
.sub_tree.ms-lh-cats li a i img{width:26px !important;height:26px !important;object-fit:contain;mix-blend-mode:multiply;display:block}
.sub_tree.ms-lh-cats li a i.dot:before{content:'';width:10px;height:10px;border-radius:50%;background:var(--c);opacity:.7}
.sub_tree.ms-lh-cats li a:hover{border-color:var(--c);color:#0f1c6e !important}
.sub_tree.ms-lh-cats li.active a{background:var(--t) !important;border-color:var(--t);color:#0f1c6e !important}
.sub_tree.ms-lh-cats li.active a i{background:#fff}
/* 원래 .pg_tit 제목은 밴드가 대신 — 스킨에서 출력 안 함 */

/* ── PC 툴바 (.tab_sort 유지) ── */
.tab_sort.ms-lh-bar{display:flex;align-items:center;gap:12px;margin:22px 0 0 !important;padding:0 0 14px;border-bottom:1px dotted #c9cfdd;font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif;line-height:1.33}
.tab_sort.ms-lh-bar:after{display:none}
.tab_sort.ms-lh-bar .total{float:none !important;font-size:14px !important;color:#5d6680;font-weight:400}
.tab_sort.ms-lh-bar .total b{font-family:'Samsung Sharp Sans','Samsung One Korean',sans-serif;color:#0f1c6e !important;font-size:16px;margin:0 2px}
.tab_sort.ms-lh-bar ul{float:none !important;margin-left:auto;display:inline-flex;gap:2px;padding:4px;border-radius:9999px;background:#f6f8fc;border:1px solid #e6e9f2}
.tab_sort.ms-lh-bar ul li{float:none !important}
.tab_sort.ms-lh-bar ul li:before{display:none !important}
.tab_sort.ms-lh-bar ul li a{height:30px;line-height:30px !important;padding:0 14px;border-radius:9999px;display:inline-flex !important;align-items:center;font-size:12px;font-weight:700;color:#5d6680 !important;transition:background .15s,color .15s;text-decoration:none !important}
.tab_sort.ms-lh-bar ul li a.active{background:#0f1c6e;color:#fff !important}
.tab_sort.ms-lh-bar ul li a:hover:not(.active){color:#0f1c6e !important}
.tab_sort.ms-lh-bar select{position:static !important;float:none !important;height:38px;padding:0 34px 0 14px;border-radius:9999px;border:1.5px solid #e6e9f2;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7590' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") right 12px center/14px no-repeat;font-family:inherit;font-size:12px;font-weight:700;color:#0f1c6e;appearance:none;-webkit-appearance:none;margin:0}
.pr_desc{margin-top:22px}

/* ── 모바일 ── */
.ms-lh.m{border-radius:18px;padding:20px 18px 18px;grid-template-columns:1fr auto;gap:10px;min-height:0;margin:14px 16px 0}
.ms-lh.m:before{width:200px;height:200px;right:-40px;top:-60px}
.ms-lh.m .crumb{font-size:12px;margin-bottom:8px}
.ms-lh.m h2{font-size:22px;gap:10px}
.ms-lh.m h2 .cnt{font-size:12px;padding-bottom:3px}
.ms-lh.m p{font-size:12px;margin-top:6px}
.ms-lh.m .acts{margin-top:12px}
.ms-lh.m .acts a{height:32px;font-size:12px;padding:0 12px}
.ms-lh.m .fig{width:96px;height:96px}
.ms-lh.m .fig:before{width:80px;height:80px}
.ms-lh.m .fig img{height:100px;max-width:92px}
.sub_tree.ms-lh-cats.m{flex-wrap:nowrap;overflow:auto;margin:12px 0 0 !important;padding:0 16px 2px !important;scrollbar-width:none;gap:8px}
.sub_tree.ms-lh-cats.m::-webkit-scrollbar{display:none}
.sub_tree.ms-lh-cats.m li{flex:none}
.sub_tree.ms-lh-cats.m li a{height:40px;font-size:12px !important;padding:0 14px 0 5px !important;gap:8px}
.sub_tree.ms-lh-cats.m li a i{width:30px;height:30px}
.sub_tree.ms-lh-cats.m li a i img{width:22px !important;height:22px !important}
#sct_sort.ms-lh-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 10px;margin:4px 16px 0;border-bottom:1px dotted #c9cfdd;font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif}
#sct_sort.ms-lh-bar .count{font-size:12px;color:#5d6680;padding:0}
#sct_sort.ms-lh-bar .count strong{font-family:'Samsung Sharp Sans','Samsung One Korean',sans-serif;color:#0f1c6e;font-size:14px;margin:0 2px}
#sct_sort.ms-lh-bar #btn_sort{position:static;width:auto;height:30px;padding:0 30px 0 14px;border-radius:9999px;border:1.5px solid #e6e9f2;font-size:12px;font-weight:700;color:#0f1c6e;display:inline-flex;align-items:center;background:#fff}
#sct_sort.ms-lh-bar #btn_sort:after{right:10px;margin-top:-8px}