/* e-Regi 솔루션 소개(sub/solution_eregi.php)·체험 데모(sub/solution_eregi_demo.php) 전용.
   모션 장면은 pm.js 플레이어를 그대로 쓰고, 장면 안 화면 요소만 er-* 로 그린다.
   default.css 가 h1~h6 를 Noto Sans KR 로 덮으므로 제목은 inherit 로 끊는다. */
.er_page h2, .er_page h3, .er_page h4, .ed_page h1, .ed_page h2, .ed_page h3 { font-family: inherit; }

/* ---------- 전체 흐름 ---------- */
.er_flow { padding: 88px 0 76px; background: #fff; }
.er_flow_track { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.er_flow_track::before { content: ''; position: absolute; top: 30px; left: 6%; right: 6%; height: 2px; background: #E1E7F0; }
.er_flow_track::after { content: ''; position: absolute; top: 30px; left: 6%; right: 6%; height: 2px; background: var(--rd-blue, #1A4FD6); transform-origin: left; transform: scaleX(0); }
.js-motion .er_flow_track.is-in::after { animation: er-line 2.2s var(--rd-ease-quint, ease) forwards; }
.er_flow_track a { position: relative; z-index: 1; display: block; text-align: center; text-decoration: none; color: var(--rd-navy, #0B1B3B); word-break: keep-all; }
.er_flow_track i { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto 12px; border: 1px solid #DDE4EF; border-radius: 50%; background: #fff; font-size: 21px; color: var(--rd-blue, #1A4FD6); box-shadow: 0 10px 22px -16px rgba(11,27,59,.5); transition: background .2s ease, color .2s ease, transform .2s ease; }
.er_flow_track a:hover i { background: var(--rd-blue, #1A4FD6); color: #fff; transform: translateY(-3px); }
.er_flow_track a:focus-visible { outline: 3px solid var(--rd-blue, #1A4FD6); outline-offset: 4px; border-radius: 10px; }
.er_flow_track b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.er_flow_track span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--rd-muted, #5B6B82); }

/* ---------- 데모 안내 ---------- */
.er_demo { padding: 72px 0; background: var(--rd-navy, #0B1B3B); color: #fff; }
.er_demo_grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.er_demo .rd-eyebrow, .er_tag { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--rd-gold, #D8A82A); }
.er_demo h2 { margin: 0 0 14px; font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.28; letter-spacing: -.03em; color: #fff; word-break: keep-all; }
.er_demo p { margin: 0 0 26px; font-size: 16.5px; line-height: 1.7; color: #B9C7DE; word-break: keep-all; }
.er_demo_btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 12px; background: var(--rd-gold, #D8A82A); font-size: 16px; font-weight: 800; color: var(--rd-navy, #0B1B3B) !important; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.er_demo_btn:hover { transform: translateY(-3px); background: #E8BC45; }
.er_demo_btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.er_real { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.er_real a { display: block; color: #fff; text-decoration: none; }
.er_real img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: #fff; transition: transform .2s ease; }
.er_real a:hover img { transform: translateY(-4px); }
.er_real a:focus-visible { outline: 3px solid var(--rd-gold, #D8A82A); outline-offset: 3px; border-radius: 10px; }
.er_real b { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; word-break: keep-all; }
.er_real b i { margin-left: 4px; font-size: 12px; opacity: .7; }
.er_real span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #9FB0CC; word-break: keep-all; }

/* ---------- 기능 장(章) ---------- */
.er_ch { padding: 92px 0; background: #fff; scroll-margin-top: 90px; }
.er_ch:nth-of-type(even) { background: var(--rd-surface, #F6F8FB); }
.er_ch_grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.er_ch--flip .er_ch_grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.er_ch--flip .er_ch_text { order: 2; }
.er_ch_no { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--rd-blue, #1A4FD6); }
.er_ch h2 { margin: 0 0 12px; font-size: clamp(25px, 2.8vw, 36px); font-weight: 800; line-height: 1.28; letter-spacing: -.03em; color: var(--rd-navy, #0B1B3B); word-break: keep-all; }
.er_ch_lead { margin: 0 0 22px; font-size: 16.5px; line-height: 1.7; color: var(--rd-text, #3A4759); word-break: keep-all; }
.er_items { display: grid; gap: 2px; }
.er_item { display: block; width: 100%; padding: 12px 14px 13px; border: 0; border-radius: 10px; background: transparent; text-align: left; font: inherit; cursor: pointer; transition: background .2s ease; }
.er_item b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; color: #66758C; transition: color .2s ease; }
.er_item span.er_d { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: #7A889C; word-break: keep-all; }
.er_item:hover { background: rgba(26,79,214,.05); }
.er_item.is-on { background: rgba(26,79,214,.07); }
.er_item.is-on b { color: var(--rd-navy, #0B1B3B); }
.er_item.is-on span.er_d { color: var(--rd-text, #3A4759); }
.er_item:focus-visible { outline: 2px solid var(--rd-blue, #1A4FD6); outline-offset: 1px; }
.er_item_track { display: block; height: 2px; margin-bottom: 9px; border-radius: 2px; background: #DFE5EE; overflow: hidden; }
.er_item .pm-tab-fill { display: block; height: 100%; background: var(--rd-blue, #1A4FD6); transform-origin: left; transform: scaleX(0); }

/* ---------- 장면 프레임 (밝은 화면) ---------- */
.er_vis.pm-vis { height: auto; display: block; color: var(--rd-navy, #0B1B3B); font-size: 13px; }
.er_frame { position: relative; overflow: hidden; height: 440px; border: 1px solid #DCE3EE; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -36px rgba(11,27,59,.45); display: flex; flex-direction: column; }
.er_bar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; height: 36px; padding: 0 14px; border-bottom: 1px solid #EAEEF4; background: #F7F9FC; }
.er_bar > i { width: 9px; height: 9px; border-radius: 50%; background: #D4DBE6; }
.er_bar > span { margin-left: 8px; font-size: 11.5px; color: #7A889C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er_body { position: relative; flex: 1; min-height: 0; }
.er_vis .pm-step { padding: 20px 22px; gap: 10px; }
.er_vis .pm-center { justify-content: center; }
.er_note, .er_demo p.er_note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #7A889C; word-break: keep-all; }
.er_demo p.er_note { color: #9FB0CC; }

/* 장면 공통 요소 */
.er-k { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--rd-blue, #1A4FD6); }
.er-h { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--rd-navy, #0B1B3B); }
.er-sub { font-size: 12.5px; line-height: 1.5; color: #66758C; word-break: keep-all; }
.er-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 1px solid #E5EAF2; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 600; }
.er-row > i { width: 16px; text-align: center; color: var(--rd-blue, #1A4FD6); }
.er-row small { display: block; font-size: 11.5px; font-weight: 500; color: #7A889C; }
.er-row em { margin-left: auto; font-style: normal; font-weight: 800; white-space: nowrap; }
.er-pill { display: inline-block; margin-left: auto; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 700; white-space: nowrap; background: #EEF2F8; color: #5B6B82; }
.er-pill.ok { background: #E3F7EF; color: #047857; }
.er-pill.blue { background: #E7EEFF; color: #1A4FD6; }
.er-pill.warn { background: #FFF1E2; color: #C2570C; }
.er-pill.err { background: #FDE8E8; color: #C81E1E; }
.er-pill.live { background: #FDE8E8; color: #C81E1E; }
.er-pill.live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.js-motion .er-pill.live::before { animation: pm-blink 1.2s infinite; }
.er-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.er-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.er-field { padding: 8px 12px; border: 1px solid #E5EAF2; border-radius: 10px; min-width: 0; }
.er-field small { display: block; margin-bottom: 2px; font-size: 11px; color: #7A889C; }
.er-field b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.er-btn { display: block; padding: 11px; border-radius: 10px; background: #003366; color: #fff; text-align: center; font-size: 13.5px; font-weight: 700; }
.er-btn.alt { background: #fff; border: 1px solid #CFD8E5; color: var(--rd-navy, #0B1B3B); }
.er-stat { padding: 12px; border: 1px solid #E5EAF2; border-radius: 10px; }
.er-stat small { display: block; font-size: 11.5px; color: #7A889C; }
.er-stat b { display: block; margin-top: 3px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.er-prog { display: block; height: 7px; border-radius: 7px; background: #E9EEF5; overflow: hidden; }
.er-prog i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #1A4FD6, #00A9D4); transform-origin: left; width: var(--w, 100%); }
.pm-ready .pm-step.is-on .er-prog i, .pm-ready .pm-step.is-on .er-fill { animation: pm-fill 1.1s var(--rd-ease-quint, ease) var(--d, .2s) both; }
.pm-ready .pm-step.is-on .er-type { animation: er-type .7s steps(14) var(--d, 0s) both; }
.er-type { display: inline-block; white-space: nowrap; }
.er-table { display: grid; font-size: 12.5px; border: 1px solid #E5EAF2; border-radius: 10px; overflow: hidden; }
.er-tr { display: grid; grid-template-columns: var(--cols, 1.4fr 1fr 1fr 1fr); align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #EEF2F7; background: #fff; min-height: 36px; }
.er-tr:first-child { border-top: 0; }
.er-tr.th { min-height: 0; background: #F4F7FB; font-size: 11.5px; font-weight: 700; color: #66758C; }
.er-tr > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-tr .er-pill { margin-left: 0; justify-self: start; }

/* QR */
.er-qr { position: relative; display: block; width: 104px; height: 104px; padding: 8px; border: 1px solid #E5EAF2; border-radius: 12px; background: #fff; overflow: hidden; flex-shrink: 0; }
.er-qr::before { 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 0h7v7H0zM1 1v5h5V1zM2 2h3v3H2zM14 0h7v7h-7zM15 1v5h5V1zM16 2h3v3h-3zM0 14h7v7H0zM1 15v5h5v-5zM2 16h3v3H2zM9 0h2v2H9zM12 2h1v2h-1zM8 3h2v2H8zM10 6h3v2h-3zM8 8h1v3H8zM0 9h2v1H0zM3 8h3v2H3zM2 11h4v1H2zM10 9h2v2h-2zM13 9h2v1h-2zM16 8h2v2h-2zM19 9h2v3h-2zM14 11h3v2h-3zM9 12h3v1H9zM9 14h2v3H9zM12 14h2v2h-2zM18 13h1v2h-1zM15 15h2v2h-2zM20 15h1v2h-1zM12 17h2v2h-2zM17 18h4v1h-4zM9 19h3v2H9zM15 19h2v2h-2zM19 20h2v1h-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.er-qr.sm { width: 64px; height: 64px; padding: 5px; border-radius: 8px; }
.er-beam { position: absolute; left: 6px; right: 6px; height: 2px; top: 10%; border-radius: 2px; background: #00C7E6; box-shadow: 0 0 12px 3px rgba(0,199,230,.7); opacity: 0; }
.js-motion .pm-step.is-on .er-beam { opacity: 1; animation: pm-scan 1s ease-in-out infinite alternate; }

/* 휴대폰 */
.er-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 14px; background: linear-gradient(180deg, #F3F6FB, #E9EEF6); }
.er-phone { position: relative; width: 216px; height: 396px; padding: 8px; border-radius: 30px; background: #101B30; box-shadow: 0 26px 44px -26px rgba(11,27,59,.7); flex-shrink: 0; }
.er-phone-in { position: relative; height: 100%; border-radius: 23px; overflow: hidden; background: #fff; display: flex; flex-direction: column; font-size: 12px; }
.er-badgehead { padding: 9px; background: linear-gradient(90deg, #059669, #10B981); color: #fff; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; }
.er-tabs5 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 9px; border: 1px solid #E5EAF2; border-radius: 10px; font-size: 10px; text-align: center; color: #66758C; }
.er-tabs5 span { padding: 6px 0; }
.er-tabs5 span i { display: block; margin-bottom: 2px; font-size: 12px; }
.er-tabs5 span.on { color: #047857; background: #ECFDF5; border-radius: 9px; font-weight: 700; }
.er-kakao { flex: 1; padding: 34px 12px 12px; background: #B2C7D9; }
.er-bubble { border-radius: 4px 14px 14px 14px; overflow: hidden; background: #fff; box-shadow: 0 8px 16px -10px rgba(0,0,0,.4); }
.er-bubble-h { padding: 7px 10px; background: #FEE500; font-size: 11px; font-weight: 800; color: #3C1E1E; }
.er-bubble-b { padding: 10px; font-size: 11.5px; line-height: 1.55; word-break: keep-all; }
.er-bubble-b u { display: block; margin-top: 8px; padding: 7px; border-radius: 6px; background: #F1F3F6; text-align: center; font-weight: 700; text-decoration: none; }

/* 키오스크 */
.er-kiosk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, #F2FAFD, #EAF3FA); text-align: center; }
.er-kiosk-title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.er-kiosk-sub { font-size: 12px; color: #66758C; }
.er-kiosk-card { min-width: 230px; padding: 14px 22px; border-radius: 12px; background: #fff; box-shadow: 0 16px 34px -22px rgba(11,27,59,.6); }
.er-kiosk-card b { display: block; font-size: 15px; font-weight: 800; }
.er-kiosk-card small { display: block; margin-top: 3px; font-size: 11px; color: #66758C; }
.er-result { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-align: center; background: var(--c, #10B981); overflow: hidden; }
.er-result > i.fa { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 28px; }
.er-result b { font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.er-result small { font-size: 13px; opacity: .92; }
.er-ring { position: absolute; top: 34%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border: 2px solid rgba(255,255,255,.6); border-radius: 50%; opacity: 0; }
.pm-ready .pm-step.is-on .er-ring { animation: er-ring 1.4s ease-out var(--d, 1.4s) both; }
.er-calc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(100%, 460px); margin-top: 6px; }
.er-calc div { padding: 8px 4px; border-radius: 8px; background: rgba(255,255,255,.16); }
.er-calc small { display: block; font-size: 10.5px; }
.er-calc b { display: block; margin-top: 2px; font-size: 16px; font-variant-numeric: tabular-nums; }

/* 명찰 */
.er-label { width: 136px; margin: 0 auto; padding: 10px 8px; border: 1px solid #DDE4EF; border-radius: 6px; background: #fff; text-align: center; box-shadow: 0 14px 26px -16px rgba(11,27,59,.6); }
.er-label b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.er-label small { display: block; font-size: 10.5px; color: #66758C; }
.er-label .er-qr { margin: 7px auto 0; }
.er-printer { width: 180px; height: 16px; margin: 0 auto -6px; border-radius: 7px 7px 3px 3px; background: #1F2C44; position: relative; z-index: 2; }
.er-canvas { position: relative; flex: 1; min-height: 0; margin: 0 auto; width: 210px; border: 1px dashed #93A5C0; border-radius: 6px; background-color: #fff; background-image: linear-gradient(#EEF2F7 1px, transparent 1px), linear-gradient(90deg, #EEF2F7 1px, transparent 1px); background-size: 14px 14px; }
.er-blk { position: absolute; left: var(--x); top: var(--y); padding: 3px 7px; border: 1px solid #1A4FD6; border-radius: 3px; background: rgba(26,79,214,.08); font-weight: 700; white-space: nowrap; transform: translate(-50%, 0); }
.pm-ready .pm-step.is-on .er-blk { animation: er-drop .8s var(--rd-ease-quint, ease) var(--d, 0s) both; }

/* 차트·추첨·서명 */
.er-bars { display: flex; align-items: flex-end; gap: 12px; height: 118px; padding: 0 4px; border-bottom: 1px solid #E1E7F0; }
.er-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #2E63E8, #00A9D4); transform-origin: bottom; }
.pm-ready .pm-step.is-on .er-bars i { animation: pm-grow .9s var(--rd-ease-quint, ease) var(--d, .15s) both; }
.er-funnel { display: grid; gap: 8px; }
.er-funnel > div { display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; }
.er-funnel b { text-align: right; font-variant-numeric: tabular-nums; }
.er-stamps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0 10px; }
.er-stamps span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1.5px dashed #C9D3E2; border-radius: 50%; font-size: 10.5px; font-weight: 700; color: #94A2B7; }
.er-stamps span.got { border: 0; background: #1A4FD6; color: #fff; }
.pm-ready .pm-step.is-on .er-stamps span.got { animation: er-stamp .5s var(--rd-ease-quint, ease) var(--d, .2s) both; }
.er-draw { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #0B1B3B; color: #fff; text-align: center; }
.er-reel { width: 270px; height: 62px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.06); }
.er-reel div { font-size: 24px; font-weight: 800; line-height: 62px; }
.pm-ready .pm-step.is-on .er-reel > div { animation: er-reel 3s cubic-bezier(.15,.7,.2,1) .25s both; }
.er-sign { display: block; width: 100%; height: 118px; border: 1px solid #E5EAF2; border-radius: 10px; background: #fff; }
.er-sign path { fill: none; stroke: #0B1B3B; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pm-ready .pm-step.is-on .er-sign path { animation: er-sign 1.7s ease-in-out .9s both; }
.er-chat { align-self: flex-start; max-width: 86%; padding: 9px 12px; border-radius: 12px 12px 12px 3px; background: #F1F4F9; font-size: 13px; line-height: 1.5; word-break: keep-all; }
.er-chat.me { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: #003366; color: #fff; }

@keyframes er-line { to { transform: scaleX(1); } }
@keyframes er-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes er-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(4); } }
@keyframes er-drop { from { opacity: 0; transform: translate(calc(-50% + 40px), -18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes er-stamp { 0% { opacity: 0; transform: scale(1.7); } 70% { transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes er-reel { from { transform: translateY(0); } to { transform: translateY(calc(-62px * var(--n, 7))); } }
@keyframes er-sign { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- 현장 사진 ---------- */
.er_field { padding: 92px 0; background: #fff; }
.er_field_grid { display: grid; grid-template-columns: 1.15fr 1.15fr .6fr; gap: 22px; }
.er_shot { margin: 0; min-width: 0; }
.er_shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.er_shot.tall img { aspect-ratio: 3 / 4; object-position: 50% 0; background: #fff; border: 1px solid #E1E7F0; }
.er_shot figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--rd-muted, #5B6B82); word-break: keep-all; }
.er_shot figcaption b { display: block; font-size: 15.5px; font-weight: 700; color: var(--rd-navy, #0B1B3B); }

/* ---------- 연계 서비스 ---------- */
.er_links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.er_link { display: block; padding: 26px 28px; border: 1px solid var(--rd-border, #EAEEF4); border-radius: 14px; background: #fff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.er_link:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(11,27,59,.5); }
.er_link b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 800; color: var(--rd-navy, #0B1B3B); }
.er_link span { display: block; font-size: 15px; line-height: 1.6; color: var(--rd-muted, #5B6B82); word-break: keep-all; }

/* ============================================================
   체험 데모 (sub/solution_eregi_demo.php)
============================================================ */
.ed_page { background: var(--rd-surface, #F6F8FB); }
.ed_top { padding: 44px 0 28px; background: var(--rd-navy, #0B1B3B); color: #fff; }
.ed_top a.sol_back { color: #B9C7DE; }
.ed_top h1 { margin: 14px 0 8px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.03em; word-break: keep-all; color: #fff; }
.ed_top p { margin: 0; max-width: 780px; font-size: 16px; line-height: 1.65; color: #B9C7DE; word-break: keep-all; }
.ed_steps { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: ed; }
.ed_steps button { position: relative; width: 100%; min-height: 62px; padding: 9px 6px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.04); color: #B9C7DE; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.3; cursor: pointer; word-break: keep-all; transition: background .15s ease; }
.ed_steps button small { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; opacity: .75; }
.ed_steps button:hover { background: rgba(255,255,255,.1); }
.ed_steps button.is-on { background: #fff; border-color: #fff; color: var(--rd-navy, #0B1B3B); font-weight: 800; }
.ed_steps button.is-done { color: #fff; border-color: rgba(16,185,129,.7); }
.ed_steps button.is-done small::after { content: ' \2713'; color: #34D399; }
.ed_steps button:focus-visible { outline: 3px solid var(--rd-gold, #D8A82A); outline-offset: 2px; }
.ed_main { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 26px; align-items: start; padding: 28px 0 72px; }
.ed_guide { position: sticky; top: 96px; padding: 24px; border: 1px solid #E1E7F0; border-radius: 16px; background: #fff; }
.ed_role { display: inline-block; padding: 4px 10px; border-radius: 100px; background: #E7EEFF; font-size: 12px; font-weight: 700; color: #1A4FD6; }
#ed_title:focus { outline: 0; }
.ed_guide h2 { margin: 12px 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--rd-navy, #0B1B3B); word-break: keep-all; }
.ed_guide p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: var(--rd-text, #3A4759); word-break: keep-all; }
.ed_guide ul { margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid #EEF2F7; list-style: none; display: grid; gap: 7px; font-size: 13.5px; line-height: 1.5; color: var(--rd-muted, #5B6B82); word-break: keep-all; }
.ed_guide li { position: relative; padding-left: 15px; }
.ed_guide li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #1A4FD6; }
.ed_nav { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.ed_nav button, .ed_reset { padding: 11px; border: 1px solid #CFD8E5; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--rd-navy, #0B1B3B); cursor: pointer; }
.ed_nav .ed_next { background: var(--rd-blue, #1A4FD6); border-color: var(--rd-blue, #1A4FD6); color: #fff; }
.ed_nav button:disabled { opacity: .4; cursor: default; }
.ed_reset { width: 100%; margin-top: 8px; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--rd-muted, #5B6B82); text-decoration: underline; }
.ed_nav button:focus-visible, .ed_reset:focus-visible { outline: 3px solid var(--rd-blue, #1A4FD6); outline-offset: 2px; }
.ed_screen { min-width: 0; }
.ed_note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--rd-muted, #5B6B82); word-break: keep-all; }
.ed_after { padding: 0 0 80px; }
.ed_after h2 { margin: 0 0 16px; font-size: 22px; font-weight: 800; color: var(--rd-navy, #0B1B3B); }

/* 데모 화면 조각 */
.ed-win { overflow: hidden; border: 1px solid #DCE3EE; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -40px rgba(11,27,59,.5); }
.ed-pane { padding: 24px; display: grid; gap: 14px; min-height: 470px; align-content: start; color: var(--rd-navy, #0B1B3B); font-size: 14px; }
.ed-pane h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--rd-navy, #0B1B3B); }
.ed-opts { display: grid; gap: 8px; }
.ed-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid #DDE4EF; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; text-align: left; color: inherit; cursor: pointer; }
.ed-opt em { margin-left: auto; font-style: normal; font-weight: 800; }
.ed-opt small { display: block; font-size: 12px; font-weight: 500; color: #7A889C; }
.ed-opt input { width: 17px; height: 17px; margin: 0; accent-color: #1A4FD6; }
.ed-opt.is-on { border-color: #1A4FD6; background: #F3F6FF; }
.ed-opt:focus-within, button.ed-opt:focus-visible { outline: 2px solid #1A4FD6; outline-offset: 1px; }
.ed-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 10px; background: #F4F7FB; font-weight: 700; }
.ed-total b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ed-act { display: inline-block; width: 100%; padding: 14px; border: 0; border-radius: 10px; background: #003366; font: inherit; font-size: 15px; font-weight: 800; color: #fff; text-align: center; cursor: pointer; transition: background .15s ease; }
.ed-act:hover { background: #0B4A8F; }
.ed-act:focus-visible { outline: 3px solid #00A9D4; outline-offset: 2px; }
.ed-act.alt { background: #fff; border: 1px solid #CFD8E5; color: var(--rd-navy, #0B1B3B); }
.ed-act.alt:hover { background: #F4F7FB; }
.ed-act.sm { width: auto; padding: 8px 12px; font-size: 13px; }
.ed-act:disabled { opacity: .45; cursor: default; }
.ed-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-acts .ed-act { flex: 1 1 180px; width: auto; }
.ed-acts .ed-act.sm { flex-basis: 96px; }
.ed-kiosk { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 400px; padding: 28px; overflow: hidden; background: linear-gradient(180deg, #F2FAFD, #EAF3FA); text-align: center; }
.ed-kiosk h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--rd-navy, #0B1B3B); word-break: keep-all; }
.ed-ktop { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #1F2C44; font-size: 12px; font-weight: 700; color: #fff; }
.ed-ktop span { padding: 2px 8px; border-radius: 5px; background: rgba(255,255,255,.12); }
.ed-ktop span.on { background: #2E63E8; }
.ed-ktop time { margin-left: auto; font-variant-numeric: tabular-nums; }
.ed-res { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 20px; background: var(--c, #10B981); color: #fff; text-align: center; animation: ed-in .35s var(--rd-ease-quint, ease) both; }
.ed-res > i.fa { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.22); font-size: 32px; }
.ed-res b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.ed-res small { font-size: 14px; opacity: .95; word-break: keep-all; }
.ed-res .er-calc { width: min(100%, 560px); }
.ed-badgeout { animation: ed-print 1.1s var(--rd-ease-quint, ease) both; }
.ed-split { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; padding: 24px; align-items: start; min-height: 470px; color: var(--rd-navy, #0B1B3B); font-size: 14px; }
.ed-phone { position: relative; width: 236px; height: 450px; padding: 8px; border-radius: 32px; background: #101B30; }
.ed-phone-in { height: 100%; overflow: hidden auto; border-radius: 25px; background: #fff; display: flex; flex-direction: column; font-size: 13px; }
.ed-tabbtns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 10px; border: 1px solid #E5EAF2; border-radius: 10px; }
.ed-tabbtns button { padding: 6px 0; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 11px; color: #66758C; cursor: pointer; }
.ed-tabbtns button i { display: block; margin-bottom: 2px; font-size: 13px; }
.ed-tabbtns button.on { background: #ECFDF5; color: #047857; font-weight: 700; }
.ed-tabbtns button:focus-visible { outline: 2px solid #047857; }
.ed-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid #E5EAF2; }
.ed-tabs button { padding: 9px 14px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #66758C; cursor: pointer; }
.ed-tabs button.on { border-color: #1A4FD6; color: var(--rd-navy, #0B1B3B); font-weight: 800; }
.ed-tabs button:focus-visible { outline: 2px solid #1A4FD6; }
.ed-modal { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; background: rgba(11,27,59,.5); }
.ed-modal > div { width: 100%; padding: 16px; border-radius: 16px 16px 0 0; background: #fff; font-size: 12.5px; line-height: 1.55; word-break: keep-all; animation: ed-up .3s var(--rd-ease-quint, ease) both; }
.ed-modal b { display: block; margin-bottom: 5px; font-size: 14px; }
.ed-pad { position: relative; display: block; width: 100%; height: 170px; border: 1px dashed #93A5C0; border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.ed-editor { position: relative; width: 240px; height: 330px; margin: 0 auto; border: 1px dashed #93A5C0; border-radius: 6px; background-color: #fff; background-image: linear-gradient(#EEF2F7 1px, transparent 1px), linear-gradient(90deg, #EEF2F7 1px, transparent 1px); background-size: 16px 16px; touch-action: none; user-select: none; }
.ed-editor.is-print { background-image: none; border-style: solid; }
.ed-blk { position: absolute; padding: 3px 6px; border: 1px solid #1A4FD6; border-radius: 3px; background: rgba(26,79,214,.08); font-weight: 700; white-space: nowrap; cursor: grab; }
.ed-blk:focus-visible { outline: 2px solid #D8A82A; }
.ed-editor.is-print .ed-blk { border-color: transparent; background: none; cursor: default; }
.ed-cert { padding: 28px 24px; border: 6px double #C7A041; border-radius: 6px; background: #FFFDF6; text-align: center; line-height: 1.7; word-break: keep-all; animation: ed-in .35s var(--rd-ease-quint, ease) both; }
.ed-cert b { display: block; margin-bottom: 8px; font-size: 24px; letter-spacing: .3em; }
.ed-cert strong { font-size: 18px; }
.ed-empty { padding: 26px; border: 1px dashed #CFD8E5; border-radius: 10px; color: #7A889C; text-align: center; word-break: keep-all; }

@keyframes ed-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ed-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ed-print { from { opacity: 0; transform: translateY(-46px); clip-path: inset(100% 0 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

@media (max-width: 1100px) {
    .er_demo_grid, .er_ch_grid, .er_ch--flip .er_ch_grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .er_ch--flip .er_ch_text { order: 0; }
    .er_vis { max-width: 640px; width: 100%; margin: 0 auto; }
    .er_ch_grid > .er_vis { order: -1; }
    .ed_main { grid-template-columns: minmax(0, 1fr); }
    .ed_guide { position: static; order: 2; }
    .ed_steps { grid-template-columns: repeat(9, minmax(92px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
}
@media (max-width: 768px) {
    .er_flow { padding: 60px 0 52px; }
    .er_flow_track { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
    .er_flow_track::before, .er_flow_track::after { display: none; }
    .er_flow_track i { width: 50px; height: 50px; font-size: 18px; }
    .er_flow_track span { display: none; }
    .er_flow_track b { font-size: 13.5px; }
    .er_ch, .er_field { padding: 64px 0; }
    .er_demo { padding: 56px 0; }
    .er_real, .er_links { grid-template-columns: minmax(0, 1fr); }
    .er_real a { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: center; }
    .er_real img { grid-row: span 2; }
    .er_real b { margin-top: 0; align-self: end; }
    .er_real span { align-self: start; }
    .er_field_grid { grid-template-columns: minmax(0, 1fr); }
    .er_shot.tall img { aspect-ratio: 4 / 3; }
    .er_frame { height: 410px; }
    .er_vis .pm-step { padding: 14px; gap: 8px; }
    .er-grid3 { gap: 6px; }
    .er-stat { padding: 9px; }
    .er-stat b { font-size: 17px; }
    .er-tr { padding: 7px 9px; gap: 5px; font-size: 11.5px; }
    .er-stage { gap: 10px; padding: 8px; }
    .er-phone { width: 200px; height: 370px; }
    .er-hide-sm { display: none !important; }
    .er-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 88%; }
    .er-calc b { font-size: 14px; }
    .ed-split { grid-template-columns: minmax(0, 1fr); padding: 16px; justify-items: center; }
    .ed-split > * { width: 100%; max-width: 100%; }
    .ed-split > .ed-phone { width: 236px; }
    .ed-pane { padding: 16px; min-height: 0; }
    .ed-kiosk { min-height: 420px; padding: 18px; }
    .ed-res b { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .er_flow_track::after { transform: scaleX(1); }
    .er_flow_track i, .er_real img, .er_link, .er_demo_btn { transition: none; }
    .ed-res, .ed-badgeout, .ed-modal > div, .ed-cert { animation: none; }
    .er-reel > div { transform: translateY(calc(-62px * var(--n, 7))); }
}

/* 메뉴로 직접 고른 장면: 장면 안 부품의 지연도 함께 줄인다 (pm.css 의 pm-user 와 짝) */
.pm-ready.pm-user .pm-step.is-on .er-prog i, .pm-ready.pm-user .pm-step.is-on .er-fill { animation-duration: .45s; animation-delay: calc(var(--d, .2s) * .2); }
.pm-ready.pm-user .pm-step.is-on .er-type { animation-duration: .3s; animation-delay: calc(var(--d, 0s) * .2); }
.pm-ready.pm-user .pm-step.is-on .er-blk { animation-duration: .3s; animation-delay: calc(var(--d, 0s) * .2); }
.pm-ready.pm-user .pm-step.is-on .er-bars i { animation-duration: .4s; animation-delay: calc(var(--d, .15s) * .2); }
.pm-ready.pm-user .pm-step.is-on .er-stamps span.got { animation-duration: .25s; animation-delay: calc(var(--d, .2s) * .2); }
.pm-ready.pm-user .pm-step.is-on .er-ring { animation-delay: calc(var(--d, 1.4s) * .2); }
.pm-ready.pm-user .pm-step.is-on .er-sign path { animation-duration: .8s; animation-delay: .15s; }
.pm-ready.pm-user .pm-step.is-on .er-reel > div { animation-duration: 1s; animation-delay: 0s; }