/* mx-2.html(확정 미디어 목록 시안)의 인라인 스타일을 분리한 것 — 2026-08-12
   ⛔손으로 고치지 말고 시안을 고친 뒤 scratchpad/mk_media.py 로 다시 뽑을 것 */
/* ─────────────────────────────────────────────────────────────
   M2 · 매거진 피처드 (미디어 목록)
   방향 = winningppt/media 카드 문법 + 매거진식 편집(대형 피처드 1건)
   모든 고유 클래스는 m2- 접두 (navbar.css / mx.css 예약어 충돌 방지)

   2026-07-30 사장님 피드백 반영
   1) 헤더 상단 여백 확대 (padding-top 단독 지정 — 단축 지정 금지)
   2) "18건 콘텐츠" 카운터 삭제 → h1 영역 좌측으로 확장
   3) 카테고리 필터 5안(F1~F5) — 우하단 패널에서 전환
   4) 카드 호버 모션 3안(H1~H3) — 우하단 패널에서 전환
   5) 목록 카드의 성과 수치 배지 삭제 (피처드·상세에만 유지, 토글 구조는 보존)

   2026-08-01 2차 요청 반영 (website_uiux_revision_request.md §1 · §6 · §7)
   A) §1 공통 그리드 — .m2-in 을 ux-common 의 --ux-padL(32) / --ux-padR(45) 기준선에
      맞춘다. 로고 좌측선 = 본문 좌측선, 햄버거 3선 우측 끝 = 본문 우측선.
   B) §6.1 시안 확정 — 필터 F4(좌측 사이드), 카드 호버 H3(라이트 스윕)이 기본값.
      나머지 안은 비교용으로 패널에 남긴다.
   C) §6.1 카드 내 "자세히 보기" = .ux-ul(좌→우 밑줄) + .ux-ar(좌우 1~2회)
   D) §6.2 "콘텐츠 더보기" = 파란 배경 전환 + .ux-shine(사선 빛) + .ux-ar-y(위아래)
      ⛔ 윤곽선 굵어지는 방식 금지(사장님 명시)
   E) §6.3 하단 배너 버튼 = .ux-draw(윤곽선 그려짐) + .ux-ar — 미디어 상세와 동일 조합
   F) §7 점검 — 무한반복 화살표 없음 / 밑줄은 전부 transform-origin:left
   ───────────────────────────────────────────────────────────── */
body{ background:#fff; }
/* ★2차 요청서 §4 — 상단 여백은 .m2-hero 가 가져갔다(196px 를 여기서 뺀다).
   하단은 페이지 마지막 여백이라 공통 토큰으로 넘긴다. */
.m2{ padding-top:0; padding-bottom:var(--page-tail); }

/* ── 히어로 밴드 ────────────────────────────────────────────
   §4 "매우 연한 색상 · 낮은 채도 · 본문과 구분되되 과하지 않게".
   --bg2(#F7F9FD) = 사이트 전반에서 이미 쓰는 보조 배경이라
   브랜드 코발트와 충돌하지 않는다.
   상하 여백은 포트폴리오 히어로(.subhero)와 같은 토큰을 참조 →
   두 페이지의 히어로 높이·수직 리듬이 자동으로 일치한다. */
.m2-hero{
  background:var(--bg2);
  padding-top:var(--hero-space-top);
  padding-bottom:var(--hero-space-bottom);
  border-bottom:1px solid var(--line);
}
/* ★padding 단축 지정 금지 — 좌우를 따로 준다(좌 32 / 우 45 비대칭이 정상) */
.m2-in{
  width:100%; max-width:var(--ux-max,1520px); margin:0 auto;
  padding-top:0; padding-bottom:0;
  padding-left:var(--ux-padL,32px);
  padding-right:var(--ux-padR,45px);
}
/* ★★2026-08-04 — 히어로 밴드 직후 여백이 0px 이던 것 교정.
   --hero-space-bottom(120) 은 밴드 '안쪽' 여백이라 경계선 아래에는
   여백이 하나도 남지 않아 대형 피처드가 선에 붙어 있었다.
   배경이 바뀌는 밴드형에서는 경계선 아래에 새 섹션의 상단 여백이
   따로 있어야 리듬이 이어진다 → 공통 토큰 --section-space-lg 사용. */
.m2-hero + .m2-in{ padding-top:var(--section-space-lg); }

/* ── 상단 헤더 (좌측 정렬 · 카운터 제거로 좌측 확장) ─── */
.m2-head{ max-width:1000px; }
.m2-kick{ font-size:12.5px; font-weight:600; letter-spacing:.24em; color:var(--blue); }
.m2-head h1{
  margin-top:20px; font-size:clamp(34px,3.8vw,54px); font-weight:700;
  line-height:1.24; letter-spacing:-.028em; color:var(--ink);
}
.m2-head h1 .l2{ display:block; color:var(--g500); }
.m2-head p{ margin-top:20px; font-size:17px; line-height:1.75; color:var(--g700); max-width:720px; }

/* ── 대형 피처드 ───────────────────────────────────── */
/* ★히어로 밴드가 아래쪽 여백(--hero-space-bottom)을 이미 만든다 →
   여기서 또 margin-top 을 주면 히어로↔피처드가 178px 로 벌어진다. */
.m2-feat{
  margin-top:0; display:grid; grid-template-columns:55fr 45fr;
  gap:52px; align-items:center;
}
.m2-feat .th{ border-radius:18px; overflow:hidden; }
.m2-feat .th .mx-ph{ transition:transform .7s var(--ease); }
.m2-feat:hover .th .mx-ph{ transform:scale(1.035); }
.m2-feat .bd{ min-width:0; }
.m2-feat .rowb{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.m2-feat .fx{
  font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--g500);
}
.m2-feat h2{
  margin-top:18px; font-size:clamp(24px,2.6vw,36px); font-weight:600;
  line-height:1.36; letter-spacing:-.025em; color:var(--ink);
  transition:color .3s var(--ease);
}
.m2-feat:hover h2{ color:var(--blue-d); }
.m2-feat .sum{ margin-top:16px; font-size:16px; line-height:1.78; color:var(--g700); }
.m2-feat .mt{ margin-top:20px; font-size:13.5px; color:var(--g500); display:flex; align-items:center; gap:10px; }
.m2-feat .mt .sep{ width:1px; height:11px; background:var(--line); }
.m2-feat .mx-metric{ margin-top:20px; }
.m2-feat .go{
  margin-top:26px; display:flex; width:max-content; align-items:center; gap:9px;
  font-size:15.5px; font-weight:600; color:var(--blue-d);
}
/* §7 — "자세히 보기"는 카드와 완전히 같은 규칙(.ux-ul + .ux-ar)을 쓴다.
   ⛔ 예전 translateX(5px) 슬라이드는 제거. 화살표 규칙이 두 벌이 되면 안 된다. */

/* §6 — 섹션 간 여백은 페이지 고유값 대신 공통 토큰으로 */
.m2-rule{ margin-top:var(--section-space-md); height:1px; background:var(--line); }

/* ═══════════════════════════════════════════════════════════
   필터 5안 — 공통 뼈대
   .m2-fzone = 필터 + 그리드를 감싸는 영역 (F4 에서만 2단 그리드)
   ═══════════════════════════════════════════════════════════ */
.m2-fzone{ margin-top:2px; }
.m2-fside{ display:none; }
.m2-fv{ display:none; }
.m2-fv.on{ display:block; }

body[data-fv="f4"] .m2-fbar{ display:none; }
body[data-fv="f4"] .m2-fside{ display:block; position:sticky; top:104px; padding-top:2px; }
body[data-fv="f4"] .m2-fzone{
  margin-top:var(--section-head-gap); display:grid; grid-template-columns:250px minmax(0,1fr);
  column-gap:48px; align-items:start;
}
body[data-fv="f4"] .m2-grid{ margin-top:0; }

/* ── F1 · 밑줄 탭 + 알약 칩 (현행 개선형) ─────────────── */
.m2-tabwrap{ border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.m2-tabwrap::-webkit-scrollbar{ display:none; }
.m2-tabs{ position:relative; display:inline-flex; gap:34px; min-width:100%; }
.m2-tab{
  font-family:inherit; font-size:16.5px; font-weight:500; color:var(--g500);
  background:none; border:0; padding:22px 2px 17px; cursor:pointer; white-space:nowrap;
  transition:color .3s var(--ease);
}
.m2-tab:hover{ color:var(--g700); }
.m2-tab.on{ color:var(--ink); font-weight:600; }
.m2-tab .c{ margin-left:7px; font-size:12.5px; font-weight:500; color:var(--g500); }
.m2-tab.on .c{ color:var(--blue); }
.m2-bar{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--blue); border-radius:2px;
  transition:transform .5s var(--ease), width .5s var(--ease);
}
.m2-chiprow{ margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.m2-chip{
  font-family:inherit; font-size:13.5px; font-weight:500; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 17px; cursor:pointer; white-space:nowrap;
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.m2-chip:hover{ border-color:var(--tint-b); color:var(--blue-d); }
.m2-chip.on{ color:var(--blue-d); background:var(--tint); border-color:var(--tint-b); font-weight:600; }
.m2-chip .c{ margin-left:6px; font-size:12px; font-weight:500; color:var(--g500); }
.m2-chip.on .c{ color:var(--blue); }

/* ── F2 · 세그먼트 컨트롤 + 밑줄 텍스트 분야 ──────────── */
.m2-segwrap{ overflow-x:auto; scrollbar-width:none; padding:4px 0; }
.m2-segwrap::-webkit-scrollbar{ display:none; }
.m2-seg{
  position:relative; display:inline-flex; gap:2px; padding:5px;
  background:var(--bg2); border:1px solid var(--line); border-radius:999px;
}
.m2-seg-th{
  position:absolute; left:0; top:5px; bottom:5px; width:0;
  background:#fff; border-radius:999px; box-shadow:0 2px 9px rgba(10,28,62,.11);
  transition:transform .45s var(--ease), width .45s var(--ease);
}
.m2-seg-b{
  position:relative; z-index:1; font-family:inherit;
  font-size:14.5px; font-weight:500; color:var(--g500);
  background:none; border:0; border-radius:999px; padding:11px 21px;
  cursor:pointer; white-space:nowrap; transition:color .3s var(--ease);
}
.m2-seg-b:hover{ color:var(--g700); }
.m2-seg-b.on{ color:var(--ink); font-weight:600; }
.m2-seg-b .c{ margin-left:6px; font-size:12px; font-weight:500; color:var(--g500); }
.m2-seg-b.on .c{ color:var(--blue); }
.m2-f2-fd{ margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; }
.m2-f2-lb{ font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); margin-right:6px; }
.m2-tx{
  position:relative; font-family:inherit; font-size:14.5px; font-weight:500;
  color:var(--g500); background:none; border:0; padding:9px 1px; cursor:pointer;
  white-space:nowrap; transition:color .3s var(--ease);
}
.m2-tx:hover{ color:var(--g700); }
.m2-tx.on{ color:var(--ink); font-weight:600; }
.m2-tx::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--blue); border-radius:2px; transform:scaleX(0);
  transform-origin:left center;   /* §7 — 좌→우로 그어진다. 가운데서 펼쳐지면 안 됨 */
  transition:transform .35s var(--ease);
}
.m2-tx.on::after{ transform:scaleX(1); }
.m2-tx:not(.on)::after{ transform-origin:right center; }
.m2-tx .c{ margin-left:5px; font-size:12px; font-weight:500; color:var(--g500); }
.m2-tx.on .c{ color:var(--blue); }

/* ── F3 · 밑줄 탭 + 분야 드롭다운 체크리스트 ──────────── */
.m2-f3-row{ margin-top:22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.m2-dd{ position:relative; }
.m2-dd-bt{
  display:inline-flex; align-items:center; gap:10px; font-family:inherit;
  font-size:14px; font-weight:500; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:11px 17px; cursor:pointer; white-space:nowrap;
  transition:border-color .3s, color .3s;
}
.m2-dd-bt b{ font-weight:600; color:var(--ink); }
.m2-dd-bt .chv{ transition:transform .3s var(--ease); }
.m2-dd-bt:hover{ border-color:var(--tint-b); }
.m2-dd.sel .m2-dd-bt{ border-color:var(--tint-b); background:var(--tint); }
.m2-dd.sel .m2-dd-bt b{ color:var(--blue-d); }
.m2-dd.open .m2-dd-bt{ border-color:var(--blue); }
.m2-dd.open .m2-dd-bt .chv{ transform:rotate(180deg); }
.m2-dd-pn{
  position:absolute; left:0; top:calc(100% + 9px); z-index:30; width:274px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 46px rgba(10,28,62,.14); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-7px);
  transition:opacity .25s var(--ease), transform .3s var(--ease), visibility .25s;
}
.m2-dd.open .m2-dd-pn{ opacity:1; visibility:visible; transform:none; }
.m2-dd-it{
  display:flex; width:100%; align-items:center; gap:10px; text-align:left;
  font-family:inherit; font-size:13.5px; font-weight:500; color:var(--g700);
  background:none; border:0; border-radius:9px; padding:9px 11px; cursor:pointer;
  transition:background .22s, color .22s;
}
.m2-dd-it:hover{ background:var(--bg2); color:var(--ink); }
.m2-dd-it.on{ color:var(--blue-d); font-weight:600; }
.m2-dd-it .bx{
  width:16px; height:16px; border-radius:5px; border:1.5px solid var(--line);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:#fff; transition:background .22s, border-color .22s;
}
.m2-dd-it .bx svg{ width:10px; height:10px; opacity:0; transition:opacity .2s; }
.m2-dd-it.on .bx{ background:var(--blue); border-color:var(--blue); }
.m2-dd-it.on .bx svg{ opacity:1; }
.m2-dd-it .c{ margin-left:auto; font-size:12px; font-weight:500; color:var(--g500); }
.m2-f3-res{ font-size:13.5px; color:var(--g500); }
.m2-f3-res b{ font-weight:600; color:var(--ink); }

/* ── F4 · 좌측 사이드 세로 필터 ──────────────────────── */
.m2-f4-g + .m2-f4-g{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.m2-f4-t{ font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); }
.m2-f4-l{ margin-top:12px; display:flex; flex-direction:column; gap:1px; }
.m2-f4-b{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  font-family:inherit; font-size:14.5px; font-weight:500; color:var(--g700);
  background:none; border:0; border-radius:9px; padding:9px 11px; cursor:pointer;
  transition:background .25s, color .25s;
}
.m2-f4-b:hover{ background:var(--bg2); color:var(--ink); }
.m2-f4-b.on{ background:var(--tint); color:var(--blue-d); font-weight:600; }
.m2-f4-b .c{ margin-left:auto; font-size:12px; font-weight:500; color:var(--g500); }
.m2-f4-b.on .c{ color:var(--blue); }
.m2-f4-rs{
  margin-top:26px; display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--g500);
  background:none; border:0; padding:0; cursor:pointer; transition:color .25s;
}
.m2-f4-rs:hover{ color:var(--blue-d); }
.m2-f4-rs[disabled]{ opacity:.4; cursor:default; }

/* ── F5 · 칩 통합 밭 + 선택 누적 표시 ────────────────── */
.m2-f5-sel{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:32px; }
.m2-f5-slb{ font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); margin-right:2px; }
.m2-f5-tk{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--blue-d);
  background:var(--tint); border:1px solid var(--tint-b); border-radius:999px;
  padding:6px 7px 6px 13px;
}
.m2-f5-tk .x{
  width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:inherit; background:rgba(46,111,242,.14); border:0; color:var(--blue-d);
  cursor:pointer; transition:background .22s;
}
.m2-f5-tk .x:hover{ background:rgba(46,111,242,.3); }
.m2-f5-tk .x svg{ width:9px; height:9px; }
.m2-f5-none{ font-size:13.5px; color:var(--g500); }
.m2-f5-rs{
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--g500);
  background:none; border:0; padding:4px 2px; cursor:pointer; transition:color .25s;
}
.m2-f5-rs:hover{ color:var(--blue-d); }
.m2-f5-field{
  margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:18px 20px; background:var(--bg2); border:1px solid var(--line); border-radius:16px;
}
.m2-f5-lb{ font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); margin-right:3px; }
.m2-f5-div{ width:1px; height:22px; background:var(--line); margin:0 6px; }
.m2-f5-c{
  font-family:inherit; font-size:13.5px; font-weight:500; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; cursor:pointer; white-space:nowrap;
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.m2-f5-c:hover{ border-color:var(--tint-b); color:var(--blue-d); }
.m2-f5-c.ch{ font-weight:600; }
.m2-f5-c .c{ margin-left:6px; font-size:12px; font-weight:500; color:var(--g500); }
.m2-f5-c.on{ color:#fff; background:var(--blue); border-color:var(--blue); font-weight:600; }
.m2-f5-c.on .c{ color:rgba(255,255,255,.75); }
.m2-f5-c.fd.on{ color:var(--blue-d); background:var(--tint); border-color:var(--tint-b); }
.m2-f5-c.fd.on .c{ color:var(--blue); }

/* ═══════════════════════════════════════════════════════════
   카드 그리드 3열 + 호버 모션 3안
   ═══════════════════════════════════════════════════════════ */
.m2-grid{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:52px 34px; }
.m2-card{ position:relative; display:block; transition:transform .5s var(--ease); }
.m2-card .th{ position:relative; border-radius:14px; overflow:hidden; }
.m2-card .th .mx-ph{ transition:transform .7s var(--ease); }
.m2-card .bd{ padding-top:18px; }
.m2-card h3{
  margin-top:13px; font-size:18.5px; font-weight:600; line-height:1.5;
  letter-spacing:-.018em; color:var(--ink); transition:color .3s var(--ease);
  word-break:keep-all;
}
.m2-card .sum{ margin-top:10px; font-size:14.5px; line-height:1.72; color:var(--g700); word-break:keep-all; }
.m2-card .mt{ margin-top:14px; font-size:12.5px; color:var(--g500); display:flex; align-items:center; gap:9px; }
.m2-card .mt .sep{ width:1px; height:10px; background:var(--line); }
/* 2026-08-01 3차 §2-1 — 호버 윤곽선 박스 안에서 "자세히 보기" 아래가 너무 좁았다.
   ⛔ 텍스트를 위로 올리는 방식 금지(사장님 명시) → 카드 자체에 하단 패딩을 준다.
   ★padding 단축 지정 금지 — padding-bottom 만 따로. .bd 는 이미 padding-top:18px 이 있다. */
.m2-card .bd{ padding-bottom:14px; }

/* 전 모드 공통 — .hv 는 mouseover/mouseenter/focusin 에서 JS가 붙인다 */
.m2-card.hv h3{ color:var(--blue-d); }
.m2-card.hv .mx-ph-play{ background:var(--blue); transform:translate(-50%,-50%) scale(1.08); }

/* H1 · 리프트 & 줌 */
body[data-hv="h1"] .m2-card .th{ transition:box-shadow .55s var(--ease); }
body[data-hv="h1"] .m2-card.hv{ transform:translateY(-8px); }
body[data-hv="h1"] .m2-card.hv .th{ box-shadow:0 18px 38px rgba(10,28,62,.17); }
body[data-hv="h1"] .m2-card.hv .th .mx-ph{ transform:scale(1.075); }

/* H2 · 오버레이 슬라이드업 */
.m2-ov{
  display:none; position:absolute; inset:0; z-index:3;
  align-items:flex-end; justify-content:center;
  background:linear-gradient(to top,rgba(9,22,44,.88) 0%,rgba(9,22,44,.44) 56%,rgba(9,22,44,.04) 100%);
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.m2-ov-t{
  display:inline-flex; align-items:center; gap:8px; padding:0 0 22px;
  color:#fff; font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  opacity:0; transform:translateY(13px);
  transition:opacity .4s .08s var(--ease), transform .5s .08s var(--ease);
}
body[data-hv="h2"] .m2-ov{ display:flex; }
body[data-hv="h2"] .m2-card.hv .m2-ov{ transform:none; }
body[data-hv="h2"] .m2-card.hv .m2-ov-t{ opacity:1; transform:none; }
body[data-hv="h2"] .m2-card.hv .th .mx-ph{ transform:scale(1.05); }
body[data-hv="h2"] .m2-card.hv .mx-ph-play{ transform:translate(-50%,-50%) translateY(-13px) scale(.9); }

/* H3 · 라이트 스윕 + 테두리·제목 블루 + 화살표 슬라이드 */
.m2-sheen{
  display:none; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.74) 50%,transparent 64%);
  transform:translateX(-135%);
}
body[data-hv="h3"] .m2-sheen{ display:block; }
body[data-hv="h3"] .m2-card.hv .m2-sheen{
  transform:translateX(135%); transition:transform .9s cubic-bezier(.32,0,.2,1);
}
body[data-hv="h3"] .m2-card::after{
  content:''; position:absolute; inset:-16px -14px -12px; border-radius:20px;
  border:1px solid transparent; pointer-events:none;
  transition:border-color .4s var(--ease);
}
/* ★상하 균형 — 위(썸네일 위 16px)는 사진의 단단한 경계라 그대로 읽히고,
   아래(자세히 보기 아래 14+12=26px)는 작은 글자라 같은 수치면 좁아 보인다.
   실측: 수정 전 위 14px · 아래 12.5px → 수정 후 위 16px · 아래 26.5px */
body[data-hv="h3"] .m2-card.hv::after{ border-color:var(--tint-b); }
body[data-hv="h3"] .m2-card.hv .th .mx-ph{ transform:scale(1.02); }
.m2-go{
  display:none; margin-top:14px; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--g500);
  transition:color .3s var(--ease);
}
.m2-go .ar{ display:inline-flex; }
body[data-hv="h3"] .m2-go{ display:inline-flex; }
body[data-hv="h3"] .m2-card.hv .m2-go{ color:var(--blue-d); }
/* ⛔ 화살표 translateX 슬라이드 제거 — .ux-ar(1~2회 왕복)로 일원화(§7).
   두 규칙이 겹치면 애니메이션이 끝난 뒤 5px 밀린 자리에 굳어 튄다. */

@media(prefers-reduced-motion:reduce){
  .m2-card, .m2-card .th, .m2-card .th .mx-ph,
  .m2-ov, .m2-ov-t, .m2-sheen, .m2-go, .m2-go .ar,
  .m2-bar, .m2-seg-th, .m2-tx::after, .m2-dd-pn{ transition:none !important; }
  body[data-hv="h1"] .m2-card.hv{ transform:none; }
  body[data-hv="h3"] .m2-card.hv .m2-sheen{ transform:translateX(-135%); }
}

/* ═══════════════════════════════════════════════════════════
   2026-08-01 §6 · §7 인터랙션 — 전부 ux-common 클래스로 통일
   ⛔ mx.css / ux-common.css 는 수정 금지. 여기서만 오버라이드한다.
   ═══════════════════════════════════════════════════════════ */

/* ── §6.1 카드·피처드 "자세히 보기" ───────────────────── */
/* ★★밑줄 방향 사고 방지.
   ux-common 의 `.ux-ul:not(:hover):not(.ux-on)::after{transform-origin:right}` 는
   "커서가 밑줄 텍스트 자체에 올라간" 경우만 좌→우가 된다. 카드는 부모(.m2-card)에
   커서가 있어도 밑줄이 그어지므로(.ux-hv 미러링) 그때는 :hover 가 false 라
   origin 이 right 로 남아 **우→좌로 그어진다**. §7 위반.
   → 부모 호버 상태에서는 origin 을 강제로 left 로 되돌린다.
   (특성도 동률이라 뒤에 오는 이 인라인 <style> 이 이긴다) */
[data-ux-hover]:hover .ux-ul::after,
[data-ux-hover].ux-hv .ux-ul::after{ transform-origin:left center; }
/* 밑줄(.ux-ul)은 H3 라이트 스윕(.9s)이 썸네일을 훑기 시작한 뒤 따라 들어온다.
   동시에 터지면 시선이 두 군데로 쪼개진다. */
.m2-go .ux-ul::after,
.m2-feat .go .ux-ul::after{ bottom:-3px; height:1.5px; }
/* ★들어올 때만 .06s 늦게. 나갈 때는 지연 없이 걷힌다.
   ⛔ `.ux-ul:not(:hover)` 로 되돌리면 안 된다 — 커서가 썸네일에 있을 때도
      "안 눌린 것"으로 잡혀 지연이 통째로 사라진다(실측 확인). */
[data-ux-hover]:hover .m2-go .ux-ul::after,
[data-ux-hover].ux-hv .m2-go .ux-ul::after,
[data-ux-hover]:hover .go .ux-ul::after,
[data-ux-hover].ux-hv .go .ux-ul::after{ transition-delay:.06s; }
/* 화살표는 .ux-ar 규칙만 쓴다 — 자체 transform 을 두지 않는다 */
.m2-go .ux-ar svg,
.m2-feat .go .ux-ar svg{ display:block; }

/* ── §6.2 콘텐츠 더보기 ──────────────────────────────── */
/* 요구: ① 아래 화살표 위아래(.ux-ar-y) ② 배경 파란색 전환
        ③ 사선 유리 샤인(.ux-shine)  ⛔ 윤곽선 굵어짐 금지 */
.mx-more{ border-width:1.5px; }               /* ⛔ 호버에도 두께 고정 */
.mx-more:hover:not([disabled]){
  border-width:1.5px;
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 14px 30px rgba(46,111,242,.26);
}
.mx-more{ transition:border-color .3s, color .3s, background .34s var(--ease),
                     transform .45s var(--ease), box-shadow .45s var(--ease); }
.mx-more:hover:not([disabled]) .ct{ color:rgba(255,255,255,.76); }
/* mx.css 의 :hover .ar{translateY(3px)} 는 .ux-ar-y 키프레임과 충돌한다.
   애니메이션이 끝난 뒤 3px 밀린 자리에 굳어 튀므로 무력화한다. */
.mx-more .ar{ transition:none; }
.mx-more:hover .ar{ transform:none; }
/* 파란 배경 위 흰 빛 — 기본 농도(.30~.44)로 충분히 보인다. 클립만 확실히. */
.mx-more.ux-shine{ overflow:hidden; }
.mx-more[disabled].ux-shine::before{ display:none; }

/* ── §6.3 하단 컨설팅 배너 버튼 ──────────────────────── */
/* 미디어 상세와 완전히 같은 조합: .ux-draw(윤곽선 그려짐) + .ux-ar(좌우 1~2회)
   ★★2026-08-01 3차 — ux-common 의 .ux-draw 가 위닝피피티 히어로 CTA 원본
   (@property + conic-gradient + mask-composite:exclude, 1.6s 회전)으로 통째 교체됐다.
   여기서는 마크업·충돌만 잡는다. 점검 결과:
     · 두 버튼에 .ux-shine 없음 → overflow:hidden 으로 윤곽선이 잘리는 충돌 없음
       (.ux-shine 은 "콘텐츠 더보기" .mx-more 에만 있고 그쪽엔 .ux-draw 가 없다)
     · 버튼 자체에 overflow:hidden 없음. 부모 .mx-cta 의 overflow:hidden 은
       패딩(52/48px) 안쪽이라 ::before 의 inset:-2.5px 를 자르지 않는다
     · border-radius:11px 있음 → ::before 의 border-radius:inherit 성립
     · 배경이 네이비라 원본 색(#93c5fd·#e0efff)이 그대로 잘 보인다 → 색 조정 불필요 */
.mx-cta .b a{ position:relative; isolation:isolate; }
.mx-cta .b a .ux-ar{ position:relative; z-index:3; }
.mx-cta .b a .ux-ar svg{ display:block; }
/* ⛔ 옛 구현(::before/::after 를 border 로 그리던 방식)의 잔재 제거.
   지금 .ux-draw 는 ::before 하나만 쓰고 border 를 쓰지 않는다. */
/* 윤곽선이 주인공이므로 배경 점프는 줄인다 */
.mx-cta .b .p:hover{ background:var(--blue-d); }
.mx-cta .b .s:hover{ background:rgba(255,255,255,.14); }

@media(prefers-reduced-motion:reduce){
  .mx-more, .mx-more .ar, .mx-cta .b a{ transition:none !important; }
}

.m2-morewrap{ margin-top:66px; text-align:center; }
.m2-done{ margin-top:66px; text-align:center; font-size:14.5px; color:var(--g500); }
.m2-ctawrap{ margin-top:var(--section-space-lg); }

/* ═══════════════════════════════════════════════════════════
   시안 옵션 패널 (시안 전용 · 우하단)
   필터 5안 / 호버 3안 / 성과 수치 토글을 한 패널에 그룹
   ═══════════════════════════════════════════════════════════ */
.m2-lab{
  position:fixed; right:18px; bottom:18px; z-index:88; width:266px;
  background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 44px rgba(10,28,62,.15); backdrop-filter:blur(10px);
  overflow:hidden;
}
.m2-lab-hd{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
  font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--ink); background:none; border:0; padding:13px 15px; cursor:pointer;
}
.m2-lab-hd .cv{ display:inline-flex; color:var(--g500); transition:transform .35s var(--ease); }
.m2-lab.cl .m2-lab-hd .cv{ transform:rotate(180deg); }
.m2-lab-bd{ padding:0 15px 15px; }
.m2-lab.cl .m2-lab-bd{ display:none; }
.m2-lab-g + .m2-lab-g{ margin-top:16px; padding-top:15px; border-top:1px solid var(--line); }
.m2-lab-lb{ font-size:10.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); }
.m2-lab-row{ margin-top:9px; display:flex; flex-wrap:wrap; gap:5px; }
.m2-lab-c{
  font-family:inherit; font-size:12px; font-weight:600; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; cursor:pointer; transition:color .25s, background .25s, border-color .25s;
}
.m2-lab-c:hover{ border-color:var(--tint-b); color:var(--blue-d); }
.m2-lab-c.on{ color:#fff; background:var(--blue); border-color:var(--blue); }
.m2-lab-ds{ margin-top:9px; font-size:11.5px; line-height:1.62; color:var(--g500); word-break:keep-all; }
.m2-lab .mx-admin{
  position:static; right:auto; bottom:auto; width:100%; justify-content:flex-start;
  padding:9px 12px; border-radius:10px;
}
.m2-lab .mx-admin:hover{ transform:none; }

@media(max-width:1100px){
  .m2-grid{ grid-template-columns:repeat(2,1fr); gap:44px 28px; }
  .m2-feat{ gap:38px; }
}
@media(max-width:1300px){
  body[data-fv="f4"] .m2-grid{ grid-template-columns:repeat(2,1fr); gap:44px 28px; }
}
@media(max-width:980px){
  body[data-fv="f4"] .m2-fzone{ display:block; margin-top:44px; }
  body[data-fv="f4"] .m2-fside{ position:static; }
  body[data-fv="f4"] .m2-grid{ margin-top:40px; }
  .m2-f4-l{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .m2-f4-b{ width:auto; border:1px solid var(--line); border-radius:999px; padding:8px 15px; }
  .m2-f4-b .c{ margin-left:6px; }
}
@media(max-width:820px){
  /* ★상하 여백은 ux-common.css 의 공통 토큰이 폭에 따라 낮춰준다.
     여기서 px 를 다시 쓰면 포트폴리오 히어로와 모바일에서만 어긋난다. */
  /* ★padding 단축 지정 금지. ux-common 이 1080px 이하에서 --ux-padL/R 을
     --ux-gut(20px) 로 내려주므로 값은 자동으로 따라온다. */
  .m2-in{ padding-left:var(--ux-padL,20px); padding-right:var(--ux-padR,20px); }
  .m2-feat{ grid-template-columns:1fr; gap:24px; margin-top:0; }
  /* ⛔.m2-rule / .m2-ctawrap 의 모바일 px 재정의는 삭제했다 —
     공통 토큰(--section-space-md/lg)이 폭에 따라 이미 낮아진다. */
  .m2-grid{ margin-top:40px; }
  .m2-brk{ display:none; }
  .m2-lab{ right:12px; bottom:12px; width:238px; max-height:72vh; overflow-y:auto; }
}
@media(max-width:560px){
  .m2-grid{ grid-template-columns:1fr; gap:38px; }
  body[data-fv="f4"] .m2-grid{ grid-template-columns:1fr; gap:38px; }
  .m2-tabs{ gap:24px; }
  .m2-tab{ font-size:15.5px; }
  .m2-f5-field{ padding:15px 14px; }
}

/* ★라이브 전용 — 실제 썸네일. 시안은 회색 자리표시(.mx-ph)만 있었다.
   규칙이 없으면 img 가 0×0 으로 접혀 "이미지 깨짐"으로 보인다(포트폴리오에서 실제로 그랬다). */
.mx-ph.has-img{ background:#0F1B30; }
.mx-ph.has-img > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mx-ph.has-img .mx-ph-tx{ display:none; }
.mx-ph.has-img .mx-ph-play{ z-index:2; }