/* ══════════════════════════════════════════════════════════════
   미디어 허브 공통 CSS — M1~M5 시안 전부가 공유
   tokens.css 다음에 로드할 것.
   ══════════════════════════════════════════════════════════════ */

/* ── 회색 자리표시 썸네일 ───────────────────────────── */
.mx-ph{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(135deg,#EDF0F6 0%,#E2E7F0 100%);
  display:flex; align-items:center; justify-content:center;
}
.mx-ph::after{ /* 대각 해칭 — '아직 이미지 없음'을 조용히 알림 */
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(255,255,255,.7) 9px 10px);
}
.mx-ph-tx{
  position:relative; z-index:1; font-size:11px; font-weight:600;
  letter-spacing:.24em; color:#AAB4C6;
}
.mx-ph-play{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background:rgba(10,25,48,.62); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .3s var(--ease), transform .45s var(--ease);
}
.mx-ph-play svg{ width:24px; height:24px; margin-left:2px; }
.mx-ph-play::before{
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.42);
}
a:hover .mx-ph-play, .mx-card:hover .mx-ph-play{
  background:var(--blue); transform:translate(-50%,-50%) scale(1.06);
}
.mx-ph.sq{ aspect-ratio:1/1; }
.mx-ph.wide{ aspect-ratio:21/9; }
.mx-ph.tall{ aspect-ratio:4/5; }

/* ── 채널 배지 ─────────────────────────────────────── */
.mx-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  color:var(--blue); background:var(--tint);
  border-radius:6px; padding:5px 10px;
}
.mx-badge[data-ch="case"]{  color:#0E7A5F; background:#E4F6EF; }
.mx-badge[data-ch="video"]{ color:#B8432E; background:#FCEDE9; }
.mx-badge[data-ch="press"]{ color:#5A4AB8; background:#EEEBFB; }

/* ── 성과 수치 칩 (관리자 토글 대상) ─────────────────── */
.mx-metric{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 13px 6px 11px;
}
.mx-metric .lb{ font-weight:500; color:var(--g500); }
.mx-metric .bf{ color:var(--g500); text-decoration:line-through; text-decoration-thickness:1px; }
.mx-metric .ar{ color:var(--g500); }
.mx-metric .af{ color:var(--blue-d); }
body[data-metric="off"] .mx-metric,
body[data-metric="off"] .mx-resultbox{ display:none !important; }

/* ── 관리자 토글 데모 스위치 (시안 전용 · 우상단) ────── */
.mx-admin{
  position:fixed; right:18px; bottom:66px; z-index:80;
  display:flex; align-items:center; gap:9px;
  font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--g700); background:rgba(255,255,255,.94);
  border:1px solid var(--line); border-radius:999px; padding:8px 14px;
  cursor:pointer; backdrop-filter:blur(8px);
  transition:border-color .3s, transform .45s var(--ease);
}
.mx-admin:hover{ border-color:var(--tint-b); transform:translateY(-2px); }
.mx-admin .sw{
  width:30px; height:17px; border-radius:999px; background:#CBD3E0;
  position:relative; transition:background .25s;
}
.mx-admin .sw::after{
  content:''; position:absolute; top:2px; left:2px; width:13px; height:13px;
  border-radius:50%; background:#fff; transition:transform .25s var(--ease);
}
.mx-admin.on{ color:var(--blue-d); border-color:var(--tint-b); }
.mx-admin.on .sw{ background:var(--blue); }
.mx-admin.on .sw::after{ transform:translateX(13px); }

/* ── 더보기 버튼 ───────────────────────────────────── */
.mx-more{
  display:inline-flex; align-items:center; gap:10px;
  font-family:inherit; font-size:15.5px; font-weight:600; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:999px;
  padding:15px 34px; cursor:pointer;
  transition:border-color .3s, color .3s, transform .45s var(--ease), box-shadow .45s var(--ease);
}
.mx-more:hover{
  border-color:var(--blue); color:var(--blue-d); transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(46,111,242,.13);
}
.mx-more .ct{ font-size:13.5px; font-weight:500; color:var(--g500); }
.mx-more .ar{ transition:transform .3s var(--ease); }
.mx-more:hover .ar{ transform:translateY(3px); }
.mx-more[disabled]{ opacity:.42; cursor:default; transform:none; box-shadow:none; }

/* ── 상세: 상단 읽기 진행바 ─────────────────────────── */
.mx-prog{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:transparent; pointer-events:none;
}
.mx-prog i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-l));
  transition:width .12s linear;
}

/* ── 상세: 공유 버튼 ───────────────────────────────── */
.mx-share{ display:flex; align-items:center; gap:8px; }
.mx-share button{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); color:var(--g700);
  cursor:pointer; transition:border-color .25s, color .25s, transform .4s var(--ease);
}
.mx-share button:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.mx-share button svg{ width:17px; height:17px; }
.mx-share .cp{ position:relative; }
.mx-share .cp.done::after{
  content:'복사됨'; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  font-size:11.5px; font-weight:600; white-space:nowrap; color:#fff;
  background:var(--ink); border-radius:6px; padding:5px 9px;
}

/* ── 상세: 사례형 성과 박스 (관리자 토글 대상) ───────── */
.mx-resultbox{
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--bg2);
}
.mx-resultbox .rb-hd{
  display:flex; align-items:center; gap:9px;
  padding:16px 22px; border-bottom:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--g700);
}
.mx-resultbox .rb-hd .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); }
.mx-resultbox .rb-bd{ display:grid; grid-template-columns:repeat(3,1fr); }
.mx-resultbox .rb-c{ padding:20px 22px 22px; border-right:1px solid var(--line); }
.mx-resultbox .rb-c:last-child{ border-right:0; }
.mx-resultbox .rb-k{ font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--g500); }
.mx-resultbox .rb-v{ margin-top:8px; font-size:15px; font-weight:500; line-height:1.6; color:var(--g700); }
.mx-resultbox .rb-c.hi{ background:#fff; }
.mx-resultbox .rb-c.hi .rb-v{ font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--blue-d); }
.mx-resultbox .rb-c.hi .rb-v em{ font-style:normal; font-size:14px; font-weight:500; color:var(--g500); }
@media(max-width:720px){ .mx-resultbox .rb-bd{ grid-template-columns:1fr; } .mx-resultbox .rb-c{ border-right:0; border-bottom:1px solid var(--line); } }

/* ── 상세: 본문 타이포 ─────────────────────────────── */
.mx-body{ font-size:17px; line-height:1.86; color:var(--g700); letter-spacing:-.005em; }
.mx-body > * + *{ margin-top:22px; }
.mx-body h2{
  margin-top:52px; font-size:25px; font-weight:700; line-height:1.42;
  color:var(--ink); letter-spacing:-.02em; scroll-margin-top:110px;
}
.mx-body h3{ margin-top:34px; font-size:19px; font-weight:600; color:var(--ink); scroll-margin-top:110px; }
.mx-body strong{ font-weight:600; color:var(--ink); }
.mx-body ul, .mx-body ol{ padding-left:20px; }
.mx-body li + li{ margin-top:9px; }
.mx-body blockquote{
  border-left:3px solid var(--blue); background:var(--bg2);
  border-radius:0 12px 12px 0; padding:20px 24px;
  font-size:16.5px; color:var(--ink);
}
.mx-body figure{ margin-top:32px; }
.mx-body figcaption{ margin-top:11px; font-size:13.5px; color:var(--g500); text-align:center; }
.mx-body .mx-ph{ border-radius:14px; }
@media(max-width:720px){ .mx-body{ font-size:16px; } .mx-body h2{ font-size:22px; } }

/* ── 상세: 하단 상담 CTA 배너 ───────────────────────── */
.mx-cta{
  position:relative; overflow:hidden; border-radius:20px;
  background:var(--navy); color:#fff; padding:52px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:36px;
}
.mx-cta::before{
  content:''; position:absolute; right:-90px; top:-90px; width:320px; height:320px;
  border-radius:50%; background:radial-gradient(circle,rgba(77,162,255,.26),transparent 68%);
}
.mx-cta .t{ position:relative; z-index:1; }
.mx-cta .k{ font-size:12.5px; font-weight:600; letter-spacing:.2em; color:var(--blue-l); }
.mx-cta h3{ margin-top:13px; font-size:27px; font-weight:600; line-height:1.44; letter-spacing:-.02em; }
.mx-cta p{ margin-top:12px; font-size:15px; line-height:1.7; color:var(--navy-tx); }
.mx-cta .b{ position:relative; z-index:1; display:flex; gap:11px; flex-shrink:0; }
.mx-cta .b a{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15.5px; font-weight:600; padding:16px 28px; border-radius:11px;
  transition:background .3s var(--ease), transform .45s var(--ease);
}
.mx-cta .b .p{ background:var(--blue); color:#fff; }
.mx-cta .b .p:hover{ background:var(--blue-d); transform:translateY(-2px); }
.mx-cta .b .s{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22); }
.mx-cta .b .s:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); }
@media(max-width:900px){
  .mx-cta{ flex-direction:column; align-items:flex-start; padding:40px 28px; }
  .mx-cta h3{ font-size:23px; }
  .mx-cta .b{ width:100%; } .mx-cta .b a{ flex:1; justify-content:center; }
}

/* ── 상세: 관련 콘텐츠 3개 ─────────────────────────── */
.mx-rel{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mx-rel a{ display:block; transition:transform .45s var(--ease); }
.mx-rel a:hover{ transform:translateY(-4px); }
.mx-rel .th{ border-radius:13px; overflow:hidden; }
.mx-rel .bd{ padding-top:15px; }
.mx-rel h4{ margin-top:9px; font-size:16px; font-weight:600; line-height:1.5; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mx-rel .mt{ margin-top:8px; font-size:12.5px; color:var(--g500); }
.mx-rel a:hover h4{ color:var(--blue-d); }
@media(max-width:820px){ .mx-rel{ grid-template-columns:1fr; gap:18px; } }

/* ── 공통 유틸 ─────────────────────────────────────── */
.mx-clamp2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mx-clamp3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mx-empty{ padding:80px 0; text-align:center; font-size:15.5px; color:var(--g500); }
.rv{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }