/* ==========================================================================
   제니 MES 공개 홈페이지 보강(P7-b) — 디자인시스템 §11 시안(jm-components.css 사이트 블록) 위에 얹는 추가분.
   토큰만 사용(HEX 금지). 모바일 메뉴 · 실제 화면 캡처 프레임 · 법적 고지 문서 · 폼 진입 버튼 정렬.
   ========================================================================== */

/* 1. 헤더 · 모바일 메뉴 ------------------------------------------------ */
.jm-site-menu-btn { display: none; min-width: var(--jm-touch-min); min-height: var(--jm-touch-min); padding: 0; justify-content: center; }
.jm-site-nav__only-m { display: none !important; }
.jm-site-header .jm-logo { min-height: var(--jm-touch-min); }

@media (max-width: 899px) {
  .jm-site-menu-btn { display: inline-flex; }
  .jm-site-header[data-open] .jm-site-nav {
    display: grid; gap: var(--jm-sp-1); position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--jm-sp-3) var(--jm-gutter) var(--jm-sp-4); margin: 0;
    background: var(--jm-surface); border-bottom: var(--jm-bw) solid var(--jm-line); box-shadow: var(--jm-shadow-2);
  }
  .jm-site-header[data-open] .jm-site-nav a { min-height: 3rem; padding: 0 var(--jm-sp-3); font-size: var(--jm-fs-body); color: var(--jm-text); }
  .jm-site-header[data-open] .jm-site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--jm-primary); background: var(--jm-primary-soft); }
}
@media (max-width: 599px) {
  .jm-site-nav__only-m { display: inline-flex !important; }
  .jm-site-header__login, .jm-site-header__cta { display: none; }
  .jm-site-nav__cta { color: var(--jm-primary-text) !important; }
}

/* 2. 폼 진입 버튼(POST /demo/start)을 링크 버튼과 같은 줄에 */
.jm-inline-form { display: inline-flex; margin: 0; }
@media (max-width: 599px) {
  .jm-hero__cta .jm-inline-form, .jm-page-hero__cta .jm-inline-form, .jm-fdetail__actions .jm-inline-form, .jm-cta__alt .jm-inline-form { flex: 1 1 100%; }
  .jm-hero__cta .jm-inline-form .jm-btn, .jm-page-hero__cta .jm-inline-form .jm-btn, .jm-fdetail__actions .jm-btn, .jm-cta__alt .jm-btn { width: 100%; }
  .jm-fdetail__actions > .jm-btn { flex: 1 1 100%; }
}

/* 3. 실제 제품 화면 캡처 프레임(예시 화면 표기 필수 — 09 SITE-02 ①) */
.jm-shot { position: relative; display: grid; gap: var(--jm-sp-2); margin: 0; min-width: 0; }
.jm-shot__frame { position: relative; overflow: hidden; border-radius: var(--jm-radius-lg); border: var(--jm-bw) solid var(--jm-line); background: var(--jm-surface); box-shadow: var(--jm-shadow-3); }
.jm-shot__frame img { display: block; width: 100%; height: auto; }
.jm-shot__frame .jm-mock-label { position: absolute; top: var(--jm-sp-2); right: var(--jm-sp-2); box-shadow: var(--jm-shadow-1); background: var(--jm-surface); color: var(--jm-text); }
.jm-shot figcaption { font-size: var(--jm-fs-sm); color: var(--jm-text-subtle); }
.jm-shot--tablet { max-width: 40rem; margin-inline: auto; }
.jm-hero__shot { align-self: center; }

/* 4. 랜딩 보강 */
.jm-hero__eyebrow-row { display: flex; flex-wrap: wrap; gap: var(--jm-sp-2); align-items: center; }
.jm-how-note { margin-top: var(--jm-sp-6); display: flex; gap: var(--jm-sp-3); align-items: flex-start; padding: var(--jm-sp-4) var(--jm-sp-5); border-radius: var(--jm-radius-md); background: var(--jm-surface); border: var(--jm-bw) dashed var(--jm-line-strong, var(--jm-line)); color: var(--jm-text-muted); }
.jm-how-note .jm-icon { flex: none; color: var(--jm-primary-text); margin-top: 2px; }
.jm-code-wrap { display: grid; gap: var(--jm-sp-2); min-width: 0; align-self: center; }
.jm-code-wrap .jm-code { white-space: pre; }
.jm-code-wrap figcaption, .jm-code-note { font-size: var(--jm-fs-sm); color: var(--jm-text-subtle); }
.jm-stat { margin-top: var(--jm-sp-3); font-size: var(--jm-fs-sm); color: var(--jm-text-subtle); text-align: center; }
.jm-end { text-align: center; display: grid; justify-items: center; gap: var(--jm-sp-4); }
.jm-end .jm-hero__cta { justify-content: center; margin-top: var(--jm-sp-2); }
.jm-soon { display: inline-flex; align-items: center; gap: var(--jm-sp-1); min-height: 1.5rem; padding: 0 var(--jm-sp-2); border-radius: var(--jm-radius-pill); background: var(--jm-surface-sunk); color: var(--jm-text-muted); font-size: var(--jm-fs-xs); font-weight: var(--jm-fw-bold); box-shadow: inset 0 0 0 1px var(--jm-line); vertical-align: middle; }
.jm-soon-line { margin-top: var(--jm-sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--jm-sp-2); font-size: var(--jm-fs-md); color: var(--jm-text-muted); }
.jm-ba-wrap { overflow-x: auto; }

/* 5. 기능 페이지 */
.jm-fdetail .jm-shot { align-self: center; }
.jm-rules { display: grid; gap: var(--jm-sp-3); padding: var(--jm-sp-5); border-radius: var(--jm-radius-lg); background: var(--jm-surface); border: var(--jm-bw) solid var(--jm-line); box-shadow: var(--jm-shadow-2); }
.jm-rules li { display: grid; grid-template-columns: auto 1fr; gap: var(--jm-sp-3); align-items: start; }
.jm-rules .jm-icon { color: var(--jm-primary-text); margin-top: 2px; }
.jm-roadmap { display: flex; flex-wrap: wrap; gap: var(--jm-sp-2); justify-content: center; margin-top: var(--jm-sp-4); }

/* 6. 요금 */
.jm-plan__price small { font-size: var(--jm-fs-sm); color: var(--jm-text-subtle); font-weight: var(--jm-fw-medium); }
.jm-pricing-common { margin-top: var(--jm-sp-5); text-align: center; color: var(--jm-text-muted); font-size: var(--jm-fs-md); }

/* 7. 도입 상담 프래그먼트 */
.jm-consult { scroll-margin-top: 4rem; }
.jm-consult__body { min-width: 0; }
.jm-consult__done { padding: var(--jm-sp-6); border-radius: var(--jm-radius-md); background: var(--jm-success-soft); border: var(--jm-bw) solid var(--jm-line); }
.jm-consult__done:focus-visible { outline: 3px solid var(--jm-focus, var(--jm-primary)); outline-offset: 3px; }
.jm-consult__done-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--jm-radius-pill); background: var(--jm-success); color: var(--jm-surface); }
.jm-consult .jm-form-summary.is-visible { display: flex; }
.jm-consult .jm-consent .jm-error { margin-top: var(--jm-sp-1); }

/* 8. 데모 페이지 */
.jm-demo-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jm-sp-4); }
.jm-demo-pick__item { display: grid; gap: var(--jm-sp-3); align-content: start; padding: var(--jm-sp-5); border-radius: var(--jm-radius-lg); background: var(--jm-surface); border: var(--jm-bw) solid var(--jm-line); box-shadow: var(--jm-shadow-1); }
.jm-demo-pick__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--jm-radius-md); background: var(--jm-primary-soft); color: var(--jm-primary-text); }
.jm-demo-pick__item p { color: var(--jm-text-muted); font-size: var(--jm-fs-md); }
.jm-demo-pick__item .jm-btn { margin-top: auto; }
.jm-demo-rules { margin-top: var(--jm-sp-8); display: grid; gap: var(--jm-sp-3); padding: var(--jm-sp-5) var(--jm-sp-6); border-radius: var(--jm-radius-md); background: var(--jm-surface); border: var(--jm-bw) solid var(--jm-line); }
.jm-demo-rules ul { display: grid; gap: var(--jm-sp-2); padding-left: 1.2rem; margin: 0; list-style: disc; color: var(--jm-text-muted); }
.jm-demo-msg:empty { display: none; }
.jm-demo-msg { margin-top: var(--jm-sp-4); padding: var(--jm-sp-3) var(--jm-sp-4); border-radius: var(--jm-radius-md); background: var(--jm-info-soft); color: var(--jm-text); }
@media (max-width: 899px) { .jm-demo-pick { grid-template-columns: minmax(0, 1fr); } }

/* 9. 법적 고지 문서(이용약관 · 개인정보처리방침 — 시행 전 초안) */
.jm-legal { max-width: 48rem; margin-inline: auto; display: grid; gap: var(--jm-sp-8); }
.jm-legal__toc { padding: var(--jm-sp-4) var(--jm-sp-5); border-radius: var(--jm-radius-md); background: var(--jm-surface); border: var(--jm-bw) solid var(--jm-line); }
.jm-legal__toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jm-sp-1) var(--jm-sp-4); padding-left: 1.4rem; margin: var(--jm-sp-2) 0 0; list-style: decimal; }
.jm-legal__toc a { display: inline-flex; align-items: center; min-height: var(--jm-touch-min); min-width: var(--jm-touch-min); color: var(--jm-primary-text); }
.jm-legal section { display: grid; gap: var(--jm-sp-3); scroll-margin-top: 5rem; }
.jm-legal h2 { font-size: var(--jm-fs-xl); font-weight: var(--jm-fw-bold); line-height: var(--jm-lh-tight); }
.jm-legal p, .jm-legal li { color: var(--jm-text); line-height: 1.75; }
.jm-legal ol, .jm-legal ul { display: grid; gap: var(--jm-sp-1); padding-left: 1.4rem; margin: 0; }
.jm-legal ol { list-style: decimal; }
.jm-legal ul { list-style: disc; }
.jm-legal__meta { color: var(--jm-text-subtle); font-size: var(--jm-fs-sm); }
.jm-legal .jm-table th[scope="row"] { white-space: normal; min-width: 7rem; }
@media (max-width: 599px) { .jm-legal__toc ol { grid-template-columns: minmax(0, 1fr); } }

/* 10. 접근성: 앵커 이동 시 고정 헤더에 가리지 않게, 모션 축소 */
html { scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (pointer: coarse) { .jm-legal__toc a, .jm-footer__links a { min-height: var(--jm-touch-min); } }

/* 11. 터치 대상 44px(KWCAG) — 사이트 버튼·푸터 링크 */
.jm-site-header .jm-btn, main .jm-btn, .jm-footer .jm-btn { min-height: var(--jm-touch-min); }
.jm-footer__links a { min-width: var(--jm-touch-min); min-height: var(--jm-touch-min); }

/* 12. 앱 스타일(jm-app.css)과 겹치는 이름 보정 · 정렬 */
.jm-section .jm-steps--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jm-sp-4); margin: 0; font-size: inherit; color: inherit; }
@media (max-width: 1023px) { .jm-section .jm-steps--3 { grid-template-columns: minmax(0, 1fr); } }
.jm-section .jm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .jm-section .jm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .jm-section .jm-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.jm-cta__form-row { align-items: start; }
.jm-shot > .jm-mock-label { position: absolute; z-index: 1; top: calc(-1 * var(--jm-sp-3)); right: var(--jm-sp-4); box-shadow: var(--jm-shadow-1); background: var(--jm-surface); color: var(--jm-text); }
.jm-demo-pick__item { grid-template-rows: auto auto 1fr auto; }
.jm-rules { list-style: none; margin: 0; }
ul.jm-rules { padding: var(--jm-sp-5); }