/* 마이스 매니저 페이지: solution_eregi.css, solution_translation.css, solution_admission.css 위에 화면 부품과 관리자 데모만 더한다 */
.mm_demo_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mm_demo_list li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.05); }
.mm_demo_list b { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rd-gold, #D8A82A); font-size: 13px; font-weight: 800; color: var(--rd-navy, #0B1B3B); }
.mm_demo_list span { min-width: 0; font-size: 15px; font-weight: 800; color: #fff; word-break: keep-all; }
.mm_demo_list small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: #B9C7DE; }

.mm-hero { padding: 12px 11px; border-radius: 10px; background: linear-gradient(135deg, #0B1B3B, #1A4FD6); color: #fff; }
.mm-hero small { display: block; font-size: 10.5px; opacity: .85; }
.mm-hero b { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.mm-color { display: flex !important; align-items: center; gap: 7px; }
.mm-color i { width: 15px; height: 15px; border-radius: 4px; background: #1A4FD6; }
.mm-lang { display: flex; align-self: flex-end; overflow: hidden; border: 1px solid #DDE4EF; border-radius: 7px; font-size: 10.5px; font-weight: 700; color: #66758C; }
.mm-lang span { padding: 3px 8px; }
.mm-lang span.on { background: #1A4FD6; color: #fff; }
.mm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mm-steps i { height: 4px; border-radius: 3px; background: #E4E9F1; }
.mm-steps i.on { background: #1A4FD6; }
.mm-sel { border-color: #1A4FD6 !important; background: #F3F6FF; color: #1A4FD6; }
.eb-warn-mm { background: #FFF1E2; color: #C2570C; }

.mm-trig { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; padding: 7px 12px; border: 1px solid #E5EAF2; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 700; color: var(--rd-navy, #0B1B3B); }
.mm-trig i { font-size: 16px; color: #1A4FD6; }
.mm-trig i.fa-toggle-off { color: #A7B3C5; }
.mm-trig small { font-size: 11.5px; font-weight: 500; color: #7A889C; }

.mm-result { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; color: #fff; }
.mm-result > i { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.22); font-size: 16px; }
.mm-result b { display: block; font-size: 15px; font-weight: 800; }
.mm-result small { display: block; margin-top: 1px; font-size: 12px; opacity: .95; word-break: keep-all; }
.mm-result.ok { background: #059669; }
.mm-result.warn { background: #C2570C; }
.mm-result.err { background: #C81E1E; }

.mm-sign { padding: 8px; border: 1.5px dashed #A9BAD2; border-radius: 10px; background: #FAFBFD; }
.mm-sign svg { display: block; width: 100%; height: auto; }
.mm-sign-p { stroke-dasharray: 700; stroke-dashoffset: 700; }
.is-on .mm-sign-p { animation: mm-draw 1.1s .3s ease-out forwards; }
.pm-user .is-on .mm-sign-p { animation-duration: .6s; animation-delay: 0s; }
.is-paused .mm-sign-p { animation-play-state: paused; }
@keyframes mm-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .mm-sign-p { stroke-dashoffset: 0; animation: none !important; } }

.mm-badge-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.mm-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 190px; padding: 14px 10px; border: 1px solid #DCE3EE; border-top: 8px solid #1A4FD6; border-radius: 10px; background: #fff; text-align: center; box-shadow: 0 16px 30px -22px rgba(11,27,59,.6); word-break: keep-all; }
.mm-badge small { font-size: 11px; font-weight: 700; color: #66758C; }
.mm-badge b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--rd-navy, #0B1B3B); }
.mm-badge span { font-size: 12.5px; color: #3A4759; }

/* ===== 관리자 데모 ===== */
.md_page .ed_steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.md-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.md-list { display: grid; gap: 8px; }
.md-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #E5EAF2; border-radius: 10px; background: #fff; }
.md-p.is-new { border-color: #1A4FD6; background: #F3F6FF; }
.md-p b { display: block; font-size: 14px; font-weight: 800; }
.md-p small { display: block; margin-top: 1px; font-size: 12px; color: #7A889C; word-break: keep-all; }
.md-p .er-pill { margin-left: 0; }
.md-pr { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.md-step { display: flex; align-items: center; gap: 8px; }
.md-step button { width: 34px; height: 34px; border: 1px solid #CFD8E5; border-radius: 8px; background: #fff; font: inherit; font-size: 16px; font-weight: 800; color: var(--rd-navy, #0B1B3B); cursor: pointer; }
.md-step button:disabled { opacity: .4; cursor: default; }
.md-step b { min-width: 46px; text-align: center; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.md-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #E5EAF2; border-radius: 10px; font-weight: 700; }
.md-set small { display: block; font-size: 12px; font-weight: 500; color: #7A889C; word-break: keep-all; }
.md-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.md-offer { display: grid; gap: 10px; padding: 14px; border: 1.5px solid #A9BFF5; border-radius: 12px; background: #F3F6FF; }
.md-offer b { font-size: 15px; font-weight: 800; }
.md-log { font-size: 12.5px; }
.md-log .er-tr { min-height: 36px; }
.md-kakao { padding: 12px 14px; border-radius: 12px; background: #FEE500; font-size: 13px; line-height: 1.55; color: #191600; word-break: keep-all; }
.md-kakao b { display: block; margin-bottom: 3px; font-weight: 800; }
.md-qrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; }
.md-qr { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #CFD8E5; border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.md-qr:hover { background: #F4F7FB; }
.md-qr:focus-visible { outline: 2px solid #1A4FD6; outline-offset: 1px; }
.md-qr i { font-size: 20px; color: #1A4FD6; }
.md-qr b { display: block; font-size: 13px; font-weight: 800; }
.md-qr small { display: block; font-size: 11.5px; color: #7A889C; }
.md-qr.is-done i { color: #059669; }
.md-input { width: 100%; padding: 10px 12px; border: 1px solid #CFD8E5; border-radius: 10px; font: inherit; font-size: 14px; color: var(--rd-navy, #0B1B3B); box-sizing: border-box; }
.md-input:focus { outline: 2px solid #1A4FD6; outline-offset: 1px; }
.md-label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; }
.md-label small { font-weight: 500; color: #7A889C; }
.md-canvas { display: block; width: 100%; height: 130px; border: 1.5px dashed #A9BAD2; border-radius: 10px; background: #FAFBFD; touch-action: none; cursor: crosshair; }
.md-hint { font-size: 12.5px; line-height: 1.5; color: #66758C; word-break: keep-all; }
.md-prev { display: grid; gap: 7px; padding: 30px 11px 12px; }
.md-prev .ad-ph-f { min-height: 0; font-size: 12px; }
.md-prev .pop { animation: md-pop .22s ease-out; }
@keyframes md-pop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .md-prev .pop { animation: none; } }

@media (max-width: 1024px) {
  .mm_demo_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md_page .ed_steps { grid-template-columns: repeat(6, minmax(92px, 1fr)); }
}
@media (max-width: 768px) {
  .mm_demo_list { grid-template-columns: minmax(0, 1fr); }
  .mm-badge { min-height: 150px; }
  .mm-badge b { font-size: 21px; }
  .md-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-p { grid-template-columns: minmax(0, 1fr); }
  .md-pr { justify-content: flex-start; }
}