@charset "utf-8";
/* ============================================================
   MEGA X 2026 — 성공사례 목록 (new-mx-success)
   ------------------------------------------------------------
   색·타이포 토큰은 megax-main.css 의 :root 를 그대로 쓴다.
   서브히어로(.mx-subhero) · 브레드크럼(.mx-crumb) 은 megax2026.css 에 있다.
   ============================================================ */

.sc-sec{padding:88px 0 120px;background:#fff}

/* ---------- 1단 : 업무분야 ---------- */
.sc-tabs{display:flex;flex-wrap:wrap;gap:8px}
.sc-tabs a{display:inline-flex;align-items:center;height:46px;padding:0 20px;
  border:1px solid var(--line);background:#fff;color:#4E5666;
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;transition:.18s ease}
.sc-tabs a:hover{border-color:var(--navy);color:var(--navy)}
.sc-tabs a.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- 2단 : 세부분야 ---------- */
.sc-subtabs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin-top:12px;padding:14px 18px;background:#F4F5F8;border-left:3px solid var(--gold)}
.sc-subtabs-lb{flex:0 0 auto;margin-right:6px;font-size:12.5px;font-weight:800;
  letter-spacing:.02em;color:#8A6D1F}
.sc-subtabs a{display:inline-flex;align-items:center;height:34px;padding:0 13px;
  border:1px solid #DCDFE6;border-radius:999px;background:#fff;color:#5D6579;
  font-size:13px;font-weight:600;transition:.18s ease}
.sc-subtabs a:hover{border-color:var(--gold);color:#8A6D1F}
.sc-subtabs a.on{background:var(--gold);border-color:var(--gold);color:#1B1305;font-weight:800}

/* ---------- 건수 · 검색 ---------- */
.sc-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.sc-count{font-size:14px;color:#6E7488}
.sc-count b{font-size:17px;font-weight:800;color:var(--navy)}
.sc-count i{display:inline-block;margin-left:8px;padding:3px 10px;font-style:normal;
  font-size:12.5px;font-weight:700;color:var(--navy);background:#EEF2F8;border-radius:999px}
.sc-search{display:flex;gap:8px}
.sc-search input{width:230px;height:44px;padding:0 14px;border:1px solid var(--line);
  font-size:14px;color:var(--ink)}
.sc-search input:focus{outline:none;border-color:var(--navy)}
.sc-search button{height:44px;padding:0 20px;background:var(--navy);color:#fff;
  font-size:14px;font-weight:700}
.sc-search button:hover{background:var(--navy-mid)}

/* ---------- 카드 그리드 ---------- */
.sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.sc-grid.is-pin-row{margin-top:34px;padding-bottom:34px;border-bottom:1px dashed var(--line)}

.sc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.sc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#C9D2E2}

/* 카드 위쪽 : 사진 + 결과 배지. 사진이 없어도 군청 그라디언트로 채운다 */
.sc-card .sc-top{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(150deg,#1E3D70 0%,#0F2350 52%,#081127 100%)}
.sc-card .sc-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease}
.sc-card:hover .sc-top img{transform:scale(1.05)}
.sc-card .sc-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,17,39,.20) 0%,rgba(8,17,39,.42) 46%,rgba(8,17,39,.86) 100%)}
.sc-card .sc-res{position:absolute;left:0;right:0;bottom:18px;z-index:2;padding:0 20px;
  font-family:"Noto Serif KR",serif;font-size:clamp(22px,2vw,30px);font-weight:700;
  letter-spacing:-.02em;color:#fff;text-align:center;word-break:keep-all;line-height:1.25}
.sc-card .sc-pin{position:absolute;left:14px;top:14px;z-index:2;padding:5px 11px;
  font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.02em;
  color:#1B1305;background:var(--gold)}

/* 카드 아래쪽 */
.sc-card .sc-body{flex:1;display:flex;flex-direction:column;padding:20px 20px 22px}
.sc-card .sc-tags{display:flex;flex-wrap:wrap;gap:6px}
.sc-card .sc-tags i{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.01em;
  padding:4px 10px;border-radius:999px;line-height:1.4}
.sc-card .sc-cat{color:var(--navy);background:#EEF2F8;border:1px solid #DCE4F0}
.sc-card .sc-sub{color:#8A6D1F;background:#F8F1DE;border:1px solid #E7D6AC}
.sc-card .sc-title{display:block;margin-top:12px;font-size:16.5px;font-weight:800;
  line-height:1.5;letter-spacing:-.02em;color:var(--ink)}
.sc-card:hover .sc-title{color:var(--navy)}
.sc-card .sc-desc{display:block;margin-top:10px;font-size:14px;line-height:1.75;color:#6E7488}
/* 담당 칩이 3~4명이어도 한 줄을 유지한다 — 넘치면 칩 영역만 줄어들고
   '자세히 보기'는 오른쪽 끝에 고정 (2026-08-16 수정) */
.sc-card .sc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:nowrap;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.sc-card .sc-foot i{font-style:normal;font-size:12.5px;font-weight:600;color:#8A91A1}
.sc-card .sc-foot b{flex:0 0 auto;font-size:13px;font-weight:800;color:var(--navy);white-space:nowrap}
.sc-card .sc-foot .mx-laws{min-width:0;overflow:hidden}

/* ---------- 결과 없음 · 페이지 · 관리자 ---------- */
.sc-empty{margin-top:60px;padding:56px 20px;text-align:center;font-size:15.5px;
  color:#6E7488;background:#F8F9FB;border:1px dashed var(--line)}
.sc-pager{margin-top:52px;text-align:center}
.sc-pager .pg_page,.sc-pager .pg_current,.sc-pager strong{display:inline-flex;align-items:center;
  justify-content:center;min-width:42px;height:42px;margin:0 3px;padding:0 12px;
  border:1px solid var(--line);background:#fff;color:#4E5666;font-size:14px;font-weight:700;
  text-decoration:none}
.sc-pager .pg_current,.sc-pager strong{background:var(--navy);border-color:var(--navy);color:#fff}
.sc-pager .pg_page:hover{border-color:var(--navy);color:var(--navy)}
.sc-admin{margin-top:34px;text-align:right}

/* ---------- 하단 상담 유도 ---------- */
.sc-cta{margin-top:74px;padding:44px 40px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.sc-cta p{font-size:clamp(17px,1.6vw,21px);font-weight:700;letter-spacing:-.02em;word-break:keep-all}
.sc-cta .btn{flex:0 0 auto}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
  .sc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .sc-sec{padding:64px 0 92px}
  .sc-tabs a{height:42px;padding:0 16px;font-size:14px}
}
@media (max-width:760px){
  .sc-sec{padding:48px 0 72px}
  .sc-tabs{gap:6px}
  .sc-tabs a{height:40px;padding:0 13px;font-size:13.5px}
  .sc-subtabs{padding:12px 14px}
  .sc-bar{gap:14px}
  .sc-search{width:100%}
  .sc-search input{flex:1 1 0;width:auto;min-width:0}
  .sc-grid,.sc-grid.is-pin-row{grid-template-columns:1fr;gap:18px}
  .sc-card .sc-res{font-size:22px;bottom:14px}
  .sc-cta{padding:32px 22px;text-align:center;justify-content:center}
}