/* ============================================================
   PAGE MOTION HERO (pm-) — 서브 페이지 상단 모션 (2026-10-15)
   - 기존 상단(.rd-subvisual / .solution_hero)의 H1·설명·버튼·수치는 그대로 두고
     오른쪽에 페이지 내용을 보여 주는 모션 화면(.pm-vis)을 붙인다
   - .pm-vis 는 장식(aria-hidden). 단계(.pm-step)가 자동으로 넘어가며 기능 흐름을 보여 줌
   - 게이트: .pm-ready(JS) 일 때만 진입 애니메이션. JS 없으면 첫 단계가 정적으로 보임
   - .pm-static: prefers-reduced-motion → 애니메이션 없이 첫 단계, 탭으로만 전환
   - 디자인 토큰은 redesign.css(:root --rd-*)
============================================================ */

/* ---------- 상단 레이아웃: 글 + 모션 2단 ---------- */
.pm-hero, .solution_hero.pm-hero { text-align: left; } /* solution.css 가 뒤에 로드되어 center 를 주므로 2클래스로 덮음 */
.pm-hero h1 { font-family: inherit; } /* 레거시 default.css 의 h1{Noto} 대신 본문 글꼴 — 메인과 동일 */
.pm-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 56px; align-items: center; }
.pm-copy { position: relative; min-width: 0; }

.rd-subvisual.pm-hero { background: var(--rd-navy); }
.rd-subvisual.pm-hero .rd-subvisual-inner { padding: 60px var(--rd-gutter) 64px; }
.rd-subvisual.pm-hero p { max-width: 540px; }

.solution_hero.pm-hero { padding: 64px 0 68px; background: var(--rd-navy); }
.solution_hero.pm-hero::before { -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 90% at 70% 0%, #000 30%, transparent 75%); }
.pm-hero .hero_desc { margin: 0 0 30px; max-width: 560px; }
.pm-hero .hero_btn_wrap { justify-content: flex-start; }
.pm-stats { display: flex; gap: 36px; margin: 4px 0 26px; flex-wrap: wrap; }
.pm-stats > div { text-align: left !important; }

/* 상단 배경 빛 (메인과 같은 언어) */
.pm-glow { position: absolute; top: -140px; right: -120px; width: 560px; height: 560px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(26,79,214,.32) 0%, transparent 68%); filter: blur(20px); }
.js-motion .pm-glow { animation: pm-drift 14s ease-in-out infinite alternate; }

/* ---------- 모션 화면 ---------- */
.pm-vis { position: relative; height: 420px; display: flex; flex-direction: column; gap: 16px; color: #fff; text-align: left; font-size: 13px; }
.pm-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }

/* 기기 프레임 */
.pm-dev {
  position: relative; overflow: hidden; z-index: 1;
  background: linear-gradient(180deg, #13284F, #0C1D3D);
  border: 1px solid rgba(255,255,255,.16); border-radius: 18px;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.15);
}
.pm-dev--screen { width: min(100%, 468px); height: 318px; display: flex; flex-direction: column; }
.pm-dev--phone  { width: 196px; height: 350px; border-radius: 28px; padding: 10px; }
.pm-dev--phone::before { content: ''; position: absolute; top: 9px; left: 50%; width: 54px; height: 5px; margin-left: -27px; border-radius: 4px; background: rgba(255,255,255,.14); z-index: 3; }
.pm-dev--phone .pm-body { border-radius: 20px; height: 100%; background: rgba(255,255,255,.035); }
.pm-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; flex-shrink: 0; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); }
.pm-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.pm-bar i:first-child { background: #FF6B6B; } .pm-bar i:nth-child(2) { background: #F5C451; } .pm-bar i:nth-child(3) { background: #4CD48A; }
.pm-bar span { margin-left: 10px; flex: 1; max-width: 230px; height: 18px; border-radius: 9px; background: rgba(255,255,255,.07); font-size: 10.5px; line-height: 18px; padding: 0 10px; color: #9FB0CC; overflow: hidden; white-space: nowrap; }
.pm-body { position: relative; flex: 1; min-height: 0; }

/* 단계 */
.pm-step { position: absolute; inset: 0; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; }
.pm-dev--phone .pm-step { padding: 26px 14px 16px; gap: 9px; }
.pm-step.is-on { opacity: 1; visibility: visible; }
.pm-ready .pm-step { transition: opacity .45s var(--rd-ease-quint), visibility 0s linear .45s; }
.pm-ready .pm-step.is-on { transition: opacity .45s var(--rd-ease-quint) .1s, visibility 0s; }
.pm-ready .pm-a { opacity: 0; }
.pm-ready .pm-step.is-on .pm-a { animation: pm-in .6s var(--rd-ease-quint) var(--d, 0s) both; }
.pm-ready .pm-step.is-on .pm-a--pop { animation-name: pm-pop; }
.pm-ready .pm-step.is-on .pm-a--slide { animation-name: pm-slide; animation-duration: .9s; }
.pm-static .pm-a { opacity: 1 !important; animation: none !important; }
.pm-vis.is-paused *, .pm-vis.is-paused *::before, .pm-vis.is-paused *::after { animation-play-state: paused !important; }
.pm-center { align-items: center; justify-content: center; text-align: center; }

/* 단계 탭 */
.pm-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; flex-shrink: 0; }
.pm-tab { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; }
.pm-tab:hover, .pm-tab.is-on { color: #fff; }
.pm-tab:focus-visible { outline: 2px solid var(--rd-gold); outline-offset: 3px; border-radius: 2px; }
.pm-tab-track { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; margin-bottom: 8px; }
.pm-tab-fill { display: block; height: 100%; background: var(--rd-gold); transform-origin: left; transform: scaleX(0); }
.pm-vis:not(.pm-ready) .pm-tabs { visibility: hidden; }

/* 떠 있는 칩 */
.pm-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 100px; white-space: nowrap; background: rgba(11,27,59,.9); border: 1px solid rgba(255,255,255,.16); font-size: 12px; font-weight: 600; color: #DCE6F7; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.pm-chip i { color: var(--rd-gold-2); }
.js-motion .pm-chip { animation: pm-float 4.5s ease-in-out infinite alternate; }
.js-motion .pm-chip:nth-of-type(2n) { animation-duration: 5.5s; animation-delay: -1.5s; }

/* ---------- UI 조각 ---------- */
.pm-h { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.pm-dev--phone .pm-h { font-size: 13.5px; }
.pm-m { font-size: 11.5px; color: #9FB0CC; line-height: 1.5; }
.pm-k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-gold); }
.pm-field { display: flex; flex-direction: column; gap: 4px; }
.pm-field small { font-size: 10.5px; color: #9FB0CC; }
.pm-field span { display: block; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); padding: 0 10px; font-size: 12px; line-height: 28px; color: #E4ECFA; overflow: hidden; white-space: nowrap; }
.pm-ready .pm-step.is-on .pm-type { animation: pm-type .9s steps(18) var(--d, 0s) both; }
.pm-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 9px; background: var(--rd-blue); font-size: 12.5px; font-weight: 700; color: #fff; }
.pm-btn--gold { background: var(--rd-gold); color: var(--rd-navy); }
.pm-ok { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(52,199,123,.16); color: #4CD48A; font-size: 24px; box-shadow: 0 0 0 8px rgba(52,199,123,.08); }
.pm-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 100px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.pm-pill--ok { background: rgba(52,199,123,.16); color: #5FD49A; }
.pm-pill--wait { background: rgba(216,168,42,.16); color: var(--rd-gold-2); }
.pm-pill--blue { background: rgba(127,166,240,.16); color: var(--rd-blue-light); }
.pm-pill--live { background: rgba(255,93,93,.16); color: #FF8A8A; }
.pm-pill--live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FF5D5D; }
.js-motion .pm-pill--live::before { animation: pm-blink 1.2s ease-in-out infinite; }
.pm-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); font-size: 12px; color: #DCE6F7; }
.pm-row { white-space: nowrap; overflow: hidden; }
.pm-dev--phone .pm-row { padding: 8px 9px; gap: 6px; font-size: 11px; }
.pm-dev--phone .pm-row > i { display: none; } /* 폰 화면은 좁아서 글자가 세로로 깨지지 않게 아이콘 생략 */
.pm-row b { font-weight: 700; color: #fff; }
.pm-row .pm-pill { margin-left: auto; }
.pm-row > i { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(127,166,240,.14); color: var(--rd-blue-light); font-size: 12px; }
.pm-row.is-hl { border-color: var(--rd-gold); background: rgba(216,168,42,.08); }
.pm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pm-tile { padding: 12px 10px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: 11.5px; font-weight: 600; color: #DCE6F7; text-align: center; }
.pm-tile i { display: block; margin: 0 auto 6px; font-size: 17px; color: var(--rd-blue-light); }
.pm-tile.is-hl { border-color: var(--rd-gold); background: rgba(216,168,42,.1); }
.pm-tile.is-hl i { color: var(--rd-gold-2); }

.pm-lines { display: grid; gap: 7px; }
.pm-lines i { display: block; height: 7px; border-radius: 4px; width: var(--w, 100%); background: rgba(255,255,255,.12); }
.pm-lines i.is-hl { background: rgba(216,168,42,.55); }
.pm-big { font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pm-big small { font-size: .42em; font-weight: 700; color: var(--rd-gold-2); margin-left: 3px; }
.pm-site { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pm-site b { font-size: 12px; font-weight: 800; letter-spacing: -.01em; }
.pm-site span { margin-left: auto; display: flex; gap: 6px; }
.pm-site span i { width: 26px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); }
.pm-meter { display: grid; grid-template-columns: 96px 1fr 36px; align-items: center; gap: 10px; font-size: 11.5px; color: #DCE6F7; }
.pm-meter em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #9FB0CC; text-align: right; }
.pm-spacer { flex: 1; }

/* QR + 스캔선 */
.pm-qr { position: relative; width: 112px; height: 112px; padding: 9px; border-radius: 12px; background: #fff; margin: 0 auto; overflow: hidden; }
.pm-qr::before, .pm-badge-qr { content: ''; display: block; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1B3B' d='M0 0h7v1H0zM8 0h2v1H8zM11 0h1v1H11zM14 0h7v1H14zM0 1h1v1H0zM6 1h1v1H6zM8 1h2v1H8zM11 1h2v1H11zM14 1h1v1H14zM20 1h1v1H20zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h3v1H8zM12 2h1v1H12zM14 2h1v1H14zM16 2h3v1H16zM20 2h1v1H20zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h1v1H8zM12 3h1v1H12zM14 3h1v1H14zM16 3h3v1H16zM20 3h1v1H20zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h2v1H11zM14 4h1v1H14zM16 4h3v1H16zM20 4h1v1H20zM0 5h1v1H0zM6 5h1v1H6zM8 5h2v1H8zM11 5h1v1H11zM14 5h1v1H14zM20 5h1v1H20zM0 6h7v1H0zM9 6h1v1H9zM11 6h2v1H11zM14 6h7v1H14zM8 7h1v1H8zM10 7h2v1H10zM0 8h2v1H0zM4 8h1v1H4zM9 8h1v1H9zM11 8h2v1H11zM14 8h3v1H14zM0 9h1v1H0zM4 9h1v1H4zM7 9h1v1H7zM9 9h1v1H9zM14 9h2v1H14zM17 9h4v1H17zM0 10h1v1H0zM2 10h3v1H2zM6 10h2v1H6zM12 10h3v1H12zM17 10h4v1H17zM0 11h1v1H0zM2 11h4v1H2zM12 11h1v1H12zM17 11h3v1H17zM0 12h11v1H0zM13 12h5v1H13zM20 12h1v1H20zM8 13h5v1H8zM14 13h2v1H14zM18 13h1v1H18zM20 13h1v1H20zM0 14h7v1H0zM12 14h3v1H12zM18 14h2v1H18zM0 15h1v1H0zM6 15h1v1H6zM13 15h1v1H13zM15 15h5v1H15zM0 16h1v1H0zM2 16h3v1H2zM6 16h1v1H6zM9 16h1v1H9zM13 16h5v1H13zM0 17h1v1H0zM2 17h3v1H2zM6 17h1v1H6zM8 17h1v1H8zM11 17h1v1H11zM16 17h2v1H16zM19 17h1v1H19zM0 18h1v1H0zM2 18h3v1H2zM6 18h1v1H6zM9 18h2v1H9zM13 18h3v1H13zM18 18h1v1H18zM0 19h1v1H0zM6 19h1v1H6zM9 19h1v1H9zM11 19h2v1H11zM17 19h1v1H17zM20 19h1v1H20zM0 20h7v1H0zM8 20h3v1H8zM12 20h3v1H12zM16 20h2v1H16zM20 20h1v1H20z'/%3E%3C/svg%3E") center / contain no-repeat; } /* 장식용 QR 무늬 (실제 QR 아님) */
.pm-qr::after { content: ''; position: absolute; left: 6px; right: 6px; top: 10%; height: 2px; border-radius: 2px; background: #2E63E8; box-shadow: 0 0 12px 2px rgba(46,99,232,.7); opacity: 0; }
.js-motion .pm-step.is-on .pm-qr::after { opacity: 1; animation: pm-scan 1.8s ease-in-out infinite alternate; }

/* 명찰 */
.pm-badge { width: 132px; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #fff; color: var(--rd-navy); text-align: center; box-shadow: 0 16px 30px -14px rgba(0,0,0,.6); }
.pm-badge-top { height: 26px; background: linear-gradient(90deg, var(--rd-blue), #3A6BD0); font-size: 9px; font-weight: 700; letter-spacing: .14em; color: #fff; line-height: 26px; }
.pm-badge b { display: block; margin-top: 12px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.pm-badge small { display: block; margin: 3px 0 10px; font-size: 10px; color: #5B6B82; }
.pm-badge .pm-badge-qr { width: 34px; height: 34px; margin: 0 auto 12px; }
.pm-printer { position: relative; width: 170px; height: 18px; margin: 0 auto; border-radius: 6px 6px 10px 10px; background: rgba(255,255,255,.12); }
.pm-printer::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 5px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.35); }

/* 채팅·알림 */
.pm-bubble { max-width: 82%; padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: rgba(255,255,255,.08); font-size: 11.5px; line-height: 1.45; color: #E4ECFA; }
.pm-bubble--me { margin-left: auto; border-radius: 12px 12px 4px 12px; background: rgba(26,79,214,.55); color: #fff; }
.pm-toast { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.95); color: var(--rd-ink); box-shadow: 0 14px 28px -14px rgba(0,0,0,.6); }
.pm-toast > i { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #FEE500; color: #3A1D1D; font-size: 13px; }
.pm-toast b { display: block; font-size: 11.5px; font-weight: 700; }
.pm-toast span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: #4A5870; }

/* 차트·진행바·파형 */
.pm-chart { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 0 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
.pm-chart i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--rd-blue-light), var(--rd-blue)); transform-origin: bottom; }
.pm-chart i:last-child { background: linear-gradient(180deg, var(--rd-gold-2), var(--rd-gold)); }
.pm-ready .pm-step.is-on .pm-chart i { animation: pm-grow .9s var(--rd-ease-quint) both; }
.pm-chart i:nth-child(2) { animation-delay: .08s !important; } .pm-chart i:nth-child(3) { animation-delay: .16s !important; }
.pm-chart i:nth-child(4) { animation-delay: .24s !important; } .pm-chart i:nth-child(5) { animation-delay: .32s !important; }
.pm-chart i:nth-child(6) { animation-delay: .4s !important; }  .pm-chart i:nth-child(7) { animation-delay: .48s !important; }
.pm-prog { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.pm-prog i { display: block; height: 100%; width: var(--w, 70%); border-radius: 8px; background: linear-gradient(90deg, var(--rd-blue), var(--rd-blue-light)); transform-origin: left; }
.pm-ready .pm-step.is-on .pm-prog i { animation: pm-fill 2.4s var(--rd-ease-quart) var(--d, .2s) both; }
.pm-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; }
.pm-wave i { width: 5px; height: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--rd-blue-light), var(--rd-blue)); transform: scaleY(.3); }
.js-motion .pm-step.is-on .pm-wave i { animation: pm-wave 1.1s ease-in-out infinite; }
.pm-wave i:nth-child(2n) { animation-delay: -.25s !important; } .pm-wave i:nth-child(3n) { animation-delay: -.55s !important; } .pm-wave i:nth-child(4n+1) { animation-delay: -.8s !important; }

/* 영상 플레이어 */
.pm-player { position: relative; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, rgba(26,79,214,.45), transparent 60%), #0A1630; border: 1px solid rgba(255,255,255,.08); }
.pm-player .pm-pill { position: absolute; top: 10px; left: 10px; }
.pm-speaker { position: absolute; left: 50%; bottom: 0; width: 84px; height: 92px; margin-left: -42px; }
.pm-speaker::before { content: ''; position: absolute; left: 50%; top: 0; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: #2A4A86; }
.pm-speaker::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; border-radius: 40px 40px 0 0; background: #2A4A86; }
.pm-podium { position: absolute; right: 18px; bottom: 0; width: 60px; height: 44px; border-radius: 6px 6px 0 0; background: rgba(255,255,255,.1); }
.pm-cap { position: absolute; left: 12px; right: 12px; bottom: 10px; padding: 6px 9px; border-radius: 7px; background: rgba(0,0,0,.55); font-size: 11px; color: #fff; text-align: center; }

/* 로고 마퀴 (고객사) */
.pm-logos { display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pm-logo-row { display: flex; gap: 14px; width: max-content; }
.pm-logo-row span { flex-shrink: 0; width: 132px; height: 74px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 12px 16px; }
.pm-logo-row img { max-width: 100%; max-height: 100%; object-fit: contain; }
.js-motion .pm-logo-row { animation: pm-marquee 46s linear infinite; }
.js-motion .pm-logo-row:nth-child(2) { animation-direction: reverse; animation-duration: 52s; }
.js-motion .pm-logo-row:nth-child(3) { animation-duration: 58s; }

/* ---------- keyframes ---------- */
@keyframes pm-in    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pm-pop   { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes pm-slide { from { opacity: 0; transform: translateY(-60px); clip-path: inset(100% 0 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes pm-type  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pm-grow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pm-fill  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pm-scan  { from { top: 8%; } to { top: 90%; } }
@keyframes pm-wave  { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes pm-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes pm-blink { 50% { opacity: .25; } }
@keyframes pm-drift { from { transform: translate(0, 0); } to { transform: translate(-6%, 8%); } }
@keyframes pm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 반응형 ---------- */
@media (max-width: 1080px) {
  .pm-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pm-vis { width: 100%; max-width: 560px; }
}
@media (max-width: 768px) {
  .rd-subvisual.pm-hero .rd-subvisual-inner { padding: 44px 20px 40px; }
  .solution_hero.pm-hero { padding: 44px 0 40px; }
  .pm-hero .hero_desc br { display: none; }
  .pm-vis { height: 360px; margin: 0 auto; }
  .pm-dev--screen { height: 270px; }
  .pm-dev--phone { width: 188px; height: 320px; }
  .pm-chip { font-size: 11px; padding: 6px 10px; }
  .pm-chip.pm-far { display: none; }
  .pm-tab { font-size: 0; } /* 좁은 화면은 진행 바만 */
  .pm-tab-track { margin: 0; height: 4px; }
  .pm-step { padding: 18px 16px; }
  .pm-logo-row span { width: 112px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-vis *, .pm-vis *::before, .pm-vis *::after, .pm-glow { animation: none !important; }
  .pm-ready .pm-a { opacity: 1; }
}