/* ══════════════════════════════════════════════════════════════════
   홈 융합 전용 — 되살린 박퇴 고유 섹션 스타일 · 2026-08-10
   hw.css 위에 얹는다. 색·폰트는 박퇴 규칙 그대로.
   ══════════════════════════════════════════════════════════════════ */

/* ── 흩어진 현장의 목소리 ──────────────────────────── */
.mx-voice{ padding:128px 0; background:var(--bg2); }
.mx-vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mx-vc{ position:relative; padding:34px 30px 30px; border-radius:18px; background:#fff; border:1px solid var(--line);
  transition:transform .55s var(--ease), border-color .3s, box-shadow .55s var(--ease); }
.mx-vc:hover{ transform:translateY(-4px); border-color:var(--tint-b); box-shadow:0 22px 48px -26px rgba(10,28,62,.22); }
.mx-vc .qm{ position:absolute; top:18px; right:24px; font-size:44px; line-height:1; color:var(--tint-b); font-weight:700; }
.mx-vc p{ position:relative; font-size:17px; line-height:1.7; color:var(--g700); letter-spacing:-.01em; }
.mx-vc p b{ display:inline-block; margin-top:4px; font-weight:600; color:var(--ink); }

/* 진단 프레임 */
.mx-frame{ margin-top:34px; padding:34px 32px 30px; border-radius:20px; background:var(--navy); color:#fff; }
.mx-frame .lb{ font-size:12.5px; font-weight:700; letter-spacing:.16em; color:var(--blue-l); text-align:center; }
.mx-frame .fr{ margin-top:26px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.mx-frame .fc{ flex:1; min-width:190px; padding:22px 22px 20px; border-radius:15px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); text-align:center; }
.mx-frame .fc .no{ display:block; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--blue-l); }
.mx-frame .fc .k{ display:block; margin-top:10px; font-size:23px; font-weight:700; letter-spacing:-.03em; }
.mx-frame .fc .d{ display:block; margin-top:9px; font-size:14px; line-height:1.65; color:#8FA6C8; }
.mx-frame .ar{ font-size:19px; color:rgba(255,255,255,.26); flex-shrink:0; }
.mx-frame .cl{ margin-top:24px; text-align:center; font-size:17.5px; color:#8FA6C8; }
.mx-frame .cl b{ color:#fff; font-weight:600; }

/* ── 작은 조직일수록 AI-native ─────────────────────── */
.mx-ax{ padding:128px 0; background:var(--navy); overflow:hidden; }
.mx-flow{ display:flex; align-items:stretch; justify-content:center; gap:16px; flex-wrap:wrap; }
.mx-flow .fx{ flex:1; min-width:230px; display:flex; flex-direction:column; padding:28px 26px 26px; border-radius:18px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.mx-flow .fx .t{ font-size:19px; font-weight:700; letter-spacing:-.025em; color:#fff; }
.mx-flow .fx .s{ margin-top:7px; font-size:14px; color:#8FA6C8; }
.mx-flow .fx .ln{ margin:18px 0; height:1px; background:rgba(255,255,255,.12); }
.mx-flow .fx .b{ font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--blue-l); }
.mx-flow .fx .s2{ margin-top:6px; font-size:13.5px; color:#8FA6C8; }
.mx-flow .fa{ align-self:center; font-size:20px; color:rgba(255,255,255,.26); flex-shrink:0; }
.mx-steps{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mx-st{ padding:28px 26px 26px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.mx-st .no{ font-size:12.5px; font-weight:700; letter-spacing:.12em; color:var(--blue-l); }
.mx-st h3{ margin-top:12px; font-size:18.5px; font-weight:600; letter-spacing:-.025em; color:#fff; line-height:1.42; }
.mx-st p{ margin-top:11px; font-size:15px; line-height:1.8; color:#8FA6C8; }

/* ── 기술보다 먼저, 일하는 사람의 하루 ─────────────── */
.mx-band{ padding:128px 0; background:#fff; overflow:hidden; }
.mx-band .row{ display:grid; grid-template-columns:0.86fr 1.14fr; gap:64px; align-items:center; }
.mx-band .tx .k{ font-size:13px; font-weight:600; letter-spacing:.2em; color:var(--blue); }
.mx-band .tx h2{ margin-top:18px; font-size:clamp(28px,3.3vw,44px); font-weight:700; letter-spacing:-.035em; line-height:1.3; color:var(--ink); }
.mx-band .tx h2 .em{ color:var(--blue); }
.mx-band .tx p{ margin-top:20px; font-size:17px; line-height:1.88; color:var(--g700); }
.mx-band .tx .hbtn{ margin-top:26px; }
.mx-band .ph-rail{ display:flex; gap:14px; }
.mx-band .ph{ position:relative; display:block; flex:1; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--bg2);
  transition:flex .6s var(--ease); }
.mx-band .ph img{ width:100%; height:clamp(220px,30vh,320px); object-fit:cover; display:block; }
.mx-band .ph-rail:hover .ph{ flex:.82; }
.mx-band .ph-rail .ph:hover{ flex:1.7; }
/* ★3차 — 호버 시 작업물 이름(실데이터 short) */
.mx-band .pc{ position:absolute; inset:auto 0 0 0; padding:34px 14px 12px; font-size:13px; font-weight:600;
  letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(180deg,transparent,rgba(6,12,26,.78)); opacity:0; transition:opacity .45s var(--ease); }
.mx-band .ph:hover .pc{ opacity:1; }

/* ── 3분 진단 유도 ─────────────────────────────────── */
.mx-diag{ padding:128px 0; background:var(--bg2); }
.mx-dg{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; }
.mx-dg .q, .mx-dg .r{ padding:34px 32px 32px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.mx-dg .q .pg{ font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--blue); }
.mx-dg .q .t{ margin-top:14px; font-size:clamp(20px,2.1vw,26px); font-weight:700; letter-spacing:-.03em; line-height:1.4; color:var(--ink); }
.mx-dg .opts{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
/* ★3차 — 눌러 볼 수 있는 데모 옵션(button) + 체크칩 */
.mx-dg .op{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; font-family:inherit; cursor:pointer;
  padding:14px 18px; border-radius:12px; background:var(--bg2); border:1px solid var(--line);
  font-size:15.5px; color:var(--g700); transition:border-color .3s, background .3s, color .3s; }
.mx-dg .op:hover{ border-color:var(--blue); background:var(--tint); color:var(--blue-d); }
.mx-dg .op .bx{ flex-shrink:0; width:21px; height:21px; border-radius:7px; border:1.5px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent;
  transition:background .25s, border-color .25s, color .25s; }
.mx-dg .op.on{ border-color:var(--blue); background:var(--tint); color:var(--blue-d); font-weight:600; }
.mx-dg .op.on .bx{ background:var(--blue); border-color:var(--blue); color:#fff; }
/* 선택이 생기면 CTA 가 살짝 숨쉰다 */
@keyframes mxpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(46,111,242,.45); } 55%{ box-shadow:0 0 0 12px rgba(46,111,242,0); } }
.mx-dg .hbtn.pulse{ animation:mxpulse 1.8s var(--ease) infinite; }
@media(prefers-reduced-motion:reduce){ .mx-dg .hbtn.pulse{ animation:none; } }
.mx-dg .r{ background:var(--navy); border-color:var(--navy); color:#fff; display:flex; flex-direction:column; }
.mx-dg .r .lb{ font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--blue-l); }
.mx-dg .r .sc{ margin-top:16px; display:flex; align-items:baseline; gap:6px; }
.mx-dg .r .sc .v{ font-size:clamp(44px,5vw,64px); font-weight:700; letter-spacing:-.045em; line-height:1; color:#fff; }
.mx-dg .r .sc .u{ font-size:20px; font-weight:600; color:#8FA6C8; }
.mx-dg .r .d{ margin-top:16px; font-size:15px; line-height:1.8; color:#8FA6C8; flex:1; }
.mx-dg .r .hbtn{ margin-top:22px; justify-content:center; }

/* ── 반응형 ──────────────────────────────────────────── */
@media(max-width:1180px){
  .mx-voice, .mx-ax, .mx-band, .mx-diag{ padding:96px 0; }
  .mx-vgrid{ grid-template-columns:1fr 1fr; }
  .mx-steps{ grid-template-columns:1fr; }
  .mx-band .row{ grid-template-columns:1fr; gap:38px; }
  .mx-dg{ grid-template-columns:1fr; }
  .mx-flow .fa{ display:none; }
}
@media(max-width:820px){
  .mx-voice, .mx-ax, .mx-band, .mx-diag{ padding:68px 0; }
  .mx-vgrid{ grid-template-columns:1fr; }
  .mx-frame .ar{ display:none; }
  .mx-band .ph-rail{ flex-wrap:wrap; }
  .mx-band .ph{ flex:1 1 46%; }
  .mx-band .ph img{ height:170px; }
}