/* PSL Lite 체험 화면(lite/index.html) 전용 스타일. 화면 틀(상단 줄·칸·가이드)은 shell.css·guide.css 를 그대로 쓰고,
   여기에는 Lite 화면 안쪽만 둔다.
   색·간격·모서리 값은 PSL Lite 소스의 디자인 토큰(renderer/shared/styles/tokens.css, workpath-app ui/theme/PslPalette.kt)을 옮겼다.
   다른 점 하나: 평상시 상태(출력 가능·연결됨·출력 완료)는 소스의 초록 대신 중립 회색으로 표시한다(체험 화면 공통 규칙). */
@font-face { font-family: 'Sarabun'; font-weight: 400; font-display: swap; src: url(/lite/fonts/Sarabun-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Sarabun'; font-weight: 600; font-display: swap; src: url(/lite/fonts/Sarabun-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Sarabun'; font-weight: 700; font-display: swap; src: url(/lite/fonts/Sarabun-Bold.woff2) format('woff2'); }

.lite {
  --psl-brand: #4483F7; --psl-brand-dark: #1D4ED8; --psl-brand-deep: #1E3A8A; --psl-ink: #202124;
  --psl-blue-50: #EFF6FF; --psl-blue-100: #DBEAFE;
  --psl-surface: #F7F8FA; --psl-surface-alt: #F3F4F6; --psl-elev: #FFFFFF; --psl-outline: #E5E7EB; --psl-outline-strong: #9CA3AF;
  --psl-text: #202124; --psl-text-muted: #374151; --psl-text-subtle: #6B7280;
  --psl-error: #B91C1C; --psl-error-bg: #FEE2E2; --psl-warn: #B45309; --psl-gray-100: #F1F5F9; --psl-gray-200: #E2E8F0;
  --psl-font: 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Sarabun', 'Segoe UI', sans-serif;
}
html[lang="th"] .lite { --font: 'Pretendard', 'Sarabun', 'Leelawadee UI', sans-serif; }
.lite-brand { height: 20px; }
.product-switch { flex: none; }
.product-switch .btn { font-weight: 600; }
.lt-demo-tag { flex: none; padding: 1px 8px; border-radius: 9px; background: rgba(27, 31, 39, .62); color: #fff; font: 600 11px/1.6 var(--font); white-space: nowrap; }
.lt-ico { display: inline-flex; flex: none; }
.lt-ico svg { display: block; fill: currentColor; }

/* ── ① PC ── */
.lt-zone { position: relative; background: #dfe3e8; padding: 8px; gap: 8px; overflow: auto; container-type: inline-size; }
.lt-pctabs { flex: none; display: flex; gap: 4px; }
.lt-pctab { height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; font: 500 13px/1 var(--font); color: var(--muted); white-space: nowrap; }
.lt-pctab.is-on { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }
.lt-pcview { flex: 1; min-height: 0; display: flex; gap: 10px; }
.lt-pcview.is-agent { align-items: flex-start; }
.lt-win { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--psl-surface); border: 1px solid #8a94a3; box-shadow: 0 2px 8px rgba(20, 26, 36, .16); font-family: var(--psl-font); color: var(--psl-text); }
.lt-winbar { flex: none; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 0 0 8px; background: #fff; font-size: 12px; color: #1f1f1f; border-bottom: 1px solid var(--psl-outline); }
.lt-winicon { width: 16px; height: 16px; }
.lt-wintitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-winctl { display: flex; height: 100%; }
.lt-winctl i { position: relative; width: 40px; height: 100%; }
.lt-winctl .is-min::after { content: ""; position: absolute; left: 15px; right: 15px; top: 50%; border-top: 1px solid #333; }
.lt-winctl .is-max::after { content: ""; position: absolute; left: 15px; top: 10px; width: 9px; height: 9px; border: 1px solid #333; }
.lt-winctl .is-close::before, .lt-winctl .is-close::after { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 1px solid #333; transform: rotate(45deg); }
.lt-winctl .is-close::after { transform: rotate(-45deg); }
.lt-wordmark { display: block; width: auto; }
.lt-shellbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 16px; background: var(--psl-elev); border-bottom: 1px solid var(--psl-outline); }
.lt-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lt-shelltitle { font-size: 20px; font-weight: 600; white-space: nowrap; }
.lt-shellright { display: flex; align-items: center; gap: 12px; }
.lt-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--psl-gray-100); color: var(--psl-text-subtle); font-size: 13px; font-weight: 600; white-space: nowrap; }
.lt-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--psl-outline-strong); }
.lt-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; color: var(--psl-text-muted); }
.lt-iconbtn.is-small { width: 28px; height: 28px; }

/* 관리자 화면: 왼쪽 메뉴 188px + 본문(소스 ConsoleNav.module.css, AppShell.module.css) */
.lt-admin { flex: 1; }
.lt-admin-body { flex: 1; min-height: 0; display: flex; }
.lt-nav { flex: none; width: 188px; display: flex; flex-direction: column; gap: 6px; padding: 20px 12px; background: var(--psl-surface); border-right: 1px solid var(--psl-outline); overflow-y: auto; }
.lt-nav-item { display: flex; align-items: center; gap: 10px; height: 42px; width: 100%; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--psl-text-muted); font: 400 14px/1.2 var(--psl-font); text-align: left; cursor: pointer; }
.lt-nav-item span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-nav-item:hover { background: var(--psl-gray-100); }
.lt-nav-item.is-on { background: var(--psl-blue-50); color: var(--psl-brand); font-weight: 600; }
.lt-page { flex: 1; min-width: 0; overflow: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.lt-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lt-page-head h3 { margin: 0; font-size: 26px; font-weight: 700; white-space: nowrap; }
.lt-page-sub { margin: -8px 0 0; font-size: 13px; color: var(--psl-text-subtle); }
.lt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lt-card { background: var(--psl-elev); border: 1px solid var(--psl-outline); border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(17, 24, 39, .06); }
.lt-card-title { margin-bottom: 10px; font-size: 16px; font-weight: 700; }
.lt-sub { margin-bottom: 10px; font-size: 13px; color: var(--psl-text-subtle); }
.lt-banner { margin: 0; padding: 10px 12px; border: 1px solid #FDE68A; border-radius: 6px; background: #FEF3C7; color: var(--psl-warn); font-size: 14px; }
.lt-hint { margin: 2px 0 0; font-size: 13px; color: var(--psl-text-subtle); line-height: 1.5; }
.lt-info p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; }
.lt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px; font: 600 14px/1 var(--psl-font); white-space: nowrap; cursor: pointer; }
.lt-btn:disabled { opacity: .5; cursor: not-allowed; }
.lt-btn.is-primary { background: var(--psl-brand); color: #fff; }
.lt-btn.is-primary:hover:not(:disabled) { background: var(--psl-brand-dark); }
.lt-btn.is-secondary { background: var(--psl-elev); border-color: var(--psl-outline); color: var(--psl-text); }
.lt-btn.is-secondary:hover:not(:disabled) { background: var(--psl-gray-100); }
.lt-btn.is-lg { height: 44px; font-size: 16px; }
.lt-btn.is-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.lt-btn.is-wide { width: 100%; }
.lt-btn:focus-visible, .lt-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(68, 131, 247, .25); border-color: var(--psl-brand); }

/* 표: 머리 줄 회색, 행 사이 옅은 선 */
.lt-table { border: 1px solid var(--psl-outline); border-radius: 8px; overflow: hidden; font-size: 14px; }
.lt-tr { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); align-items: center; min-height: 44px; padding: 0 14px; gap: 10px; border-top: 1px solid var(--psl-outline); }
.lt-th { min-height: 40px; border-top: 0; background: var(--psl-surface-alt); color: var(--psl-text-muted); font-size: 13px; font-weight: 600; }
.lt-tr > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-table.is-printers .lt-tr { grid-template-columns: 1.3fr 1.2fr 1fr 1.2fr; }
.lt-table.is-users .lt-tr { grid-template-columns: .9fr 1fr 1fr .9fr .9fr; }
.lt-table.is-jobs .lt-tr { grid-template-columns: 1.35fr 1.4fr .9fr 1fr .5fr .6fr .7fr; }
.lt-empty { padding: 22px 14px; border-top: 1px solid var(--psl-outline); text-align: center; color: var(--psl-text-subtle); font-size: 14px; }
.lt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lt-stat { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--psl-elev); border: 1px solid var(--psl-outline); border-radius: 8px; }
.lt-stat span { font-size: 13px; color: var(--psl-text-subtle); }
.lt-stat b { font-size: 22px; }
.lt-plist { margin: 0; padding: 0; list-style: none; }
.lt-plist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--psl-outline); font-size: 15px; }
.lt-plist li:first-child { border-top: 0; }

/* 입력 칸(소스 FormField) */
.lt-field { display: flex; flex-direction: column; gap: 6px; }
.lt-label { font-size: 14px; font-weight: 600; color: var(--psl-text); }
.lt-input { height: 40px; padding: 0 12px; border: 1px solid var(--psl-outline); border-radius: 6px; background: var(--psl-elev); font: 400 14px/1 var(--psl-font); color: var(--psl-text); }
.lt-error { margin: 0; color: var(--psl-error); font-size: 13px; font-weight: 500; }

/* 관리자 창 안의 모달 */
.lt-modal-back { position: absolute; inset: 30px 0 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(17, 24, 39, .32); }
.lt-modal { width: 440px; max-width: 100%; max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; background: var(--psl-elev); border-radius: 12px; box-shadow: 0 8px 24px rgba(17, 24, 39, .12); font-family: var(--psl-font); color: var(--psl-text); }
.lt-modal-title { margin: 0; font-size: 20px; font-weight: 700; }
.lt-modal-body { display: flex; flex-direction: column; gap: 12px; }
.lt-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.lt-sec-label { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--psl-text-subtle); }

/* 좁은 칸: 메뉴는 아이콘만, 더 좁으면 숨긴다 */
@container (max-width: 620px) {
  .lt-nav { width: 56px; padding: 12px 8px; }
  .lt-nav-item { justify-content: center; padding: 0; }
  .lt-nav-item span:last-child { display: none; }
  .lt-page { padding: 16px; }
  .lt-page-head h3 { font-size: 20px; }
  .lt-shelltitle { font-size: 16px; }
}
@container (max-width: 420px) {
  .lt-nav { display: none; }
  .lt-shellright .lt-pill { display: none; }
  .lt-table.is-jobs .lt-tr > div:nth-child(n+5), .lt-table.is-users .lt-tr > div:nth-child(n+4) { display: none; }
  .lt-table.is-jobs .lt-tr { grid-template-columns: 1.2fr 1.3fr .9fr 1fr; }
  .lt-table.is-users .lt-tr { grid-template-columns: 1fr 1fr 1fr; }
  .lt-stats { grid-template-columns: 1fr; }
}

/* 직원 위젯(소스 WidgetShell 440×660, onboarding authCard) */
.lt-agent { flex: none; width: 420px; max-width: 100%; min-height: 520px; }
.lt-agent .lt-shellbar { height: 56px; }
.lt-login { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; }
.lt-authcard { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--psl-elev); border: 1px solid var(--psl-outline); border-radius: 8px; box-shadow: 0 1px 3px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .04); }
.lt-step-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.lt-step-desc { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--psl-text-muted); }
.lt-connected-line { margin: 0 0 8px; padding: 8px 12px; border-radius: 4px; background: var(--psl-surface-alt); font-size: 13px; color: var(--psl-text-muted); overflow-wrap: anywhere; }
.lt-step-foot { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--psl-text-subtle); }
.lt-msg { margin: 8px 0 0; min-height: 18px; text-align: center; font-size: 13px; font-weight: 500; color: var(--psl-error); }
.lt-linkbtn { padding: 4px 8px; border: 0; border-radius: 4px; background: none; color: var(--psl-brand-dark); font: 600 13px/1.4 var(--psl-font); cursor: pointer; }
.lt-login-hint { display: block; margin-top: 12px; font-size: 13px; color: var(--psl-text-subtle); }
.lt-widgetbar { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 12px; background: var(--psl-elev); border-bottom: 1px solid var(--psl-outline); }
.lt-brandrow { display: flex; align-items: center; justify-content: space-between; }
.lt-userinfo { display: flex; align-items: baseline; gap: 8px; }
.lt-username { font-size: 20px; font-weight: 700; }
.lt-usermeta { font-size: 14px; color: var(--psl-text-subtle); }
.lt-widget-content { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 0 24px; display: flex; flex-direction: column; gap: 24px; }
.lt-wsec { position: relative; display: flex; flex-direction: column; gap: 8px; }
.lt-wsec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; }
.lt-wsec-head h5 { margin: 0; font-size: 16px; font-weight: 700; }
.lt-jobs { display: flex; flex-direction: column; background: var(--psl-elev); border-top: 1px solid var(--psl-outline); border-bottom: 1px solid var(--psl-outline); }
.lt-job { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 0; background: none; text-align: left; font-family: var(--psl-font); color: var(--psl-text); cursor: pointer; }
.lt-job + .lt-job { border-top: 1px solid var(--psl-outline); }
.lt-job:hover, .lt-job.is-open { background: var(--psl-gray-100); }
.lt-doc { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-docmeta { font-size: 13px; color: var(--psl-text-subtle); }
.lt-docmeta b { font-weight: 600; }
.lt-wempty { margin: 0; padding: 24px 16px; text-align: center; font-size: 14px; color: var(--psl-text-subtle); }
.lt-jobmenu { position: absolute; left: 24px; right: 24px; top: 72px; z-index: 3; padding: 4px; background: var(--psl-elev); border: 1px solid var(--psl-outline); border-radius: 12px; box-shadow: 0 8px 24px rgba(17, 24, 39, .12); }
.lt-jobmenu-item { width: 100%; padding: 8px 12px; border: 0; border-radius: 6px; background: none; color: var(--psl-error); font: 400 14px/1.4 var(--psl-font); text-align: left; cursor: pointer; }
.lt-jobmenu-item:hover { background: var(--psl-gray-100); }
.lt-mfplist { margin: 0; padding: 0 16px; list-style: none; }
.lt-mfplist li { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.lt-mfplist li + li { border-top: 1px solid var(--psl-outline); }
.lt-mfpicon { width: 18px; height: 18px; flex: none; }
.lt-mfpname { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-mfprole { flex: 1; min-width: 0; font-size: 14px; color: var(--psl-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-allmfp { margin: 0; padding: 0 16px; font-size: 13px; color: var(--psl-text-subtle); }

/* 인쇄해 보기(인쇄 창 대신) */
.lt-printbox { flex: 1; min-width: 220px; max-width: 360px; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #fff; border: 1px dashed var(--line-strong); border-radius: 6px; font-family: var(--font); }
.lt-printbox-title { font-size: 14px; }
.lt-printbox ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lt-printbox li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; }
.lt-doc-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-printbox small { grid-row: 2; font-size: 12px; color: var(--muted); }
.lt-printbox .lt-btn { grid-column: 2; grid-row: 1 / 3; }
@container (max-width: 700px) {
  .lt-pcview.is-agent { flex-direction: column; align-items: stretch; }
  .lt-agent { width: 100%; max-width: 440px; align-self: center; min-height: 0; }
  .lt-printbox { max-width: none; }
}

/* 출력 요청 알림(소스 print-notice: 화면 왼쪽 위에 4초) */
.lt-notice { position: absolute; left: 10px; top: 46px; z-index: 6; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; background: #fff; border: 1px solid var(--psl-outline); box-shadow: 0 2px 8px rgba(20, 26, 36, .18); font: 600 15px/1 var(--psl-font); color: var(--psl-text); animation: lt-in 220ms ease-out; white-space: nowrap; }
.lt-notice img { width: 22px; height: 22px; }
/* 칸이 좁을 때(다른 칸을 크게 보는 중) 알림이 칸 밖으로 넘치지 않게 칸 폭 안에서 글자를 줄여 보인다 */
.lt-notice { max-width: calc(100% - 20px); }
.lt-notice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lt-notice.is-leaving { animation: lt-out 260ms ease-in forwards; }
@keyframes lt-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes lt-out { to { opacity: 0; } }

/* ── ② 복합기: 1067×800 설계 화면(소스 WalkUp 치수: 본문 28, 강조 33, 제목 39, 큰 글 48, 버튼 66/76, 앱 바 76) ── */
.lm-zone { background: #d5d9df; padding: 10px; gap: 8px; overflow: hidden; }
.lm-device { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lm-bezel { padding: 10px; background: #2b2f36; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.lm-screen { position: relative; overflow: hidden; background: #fff; }
.lm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; background: var(--psl-surface); font-family: var(--psl-font); color: var(--psl-text); font-size: 28px; }
html[lang="th"] .lm-stage { font-family: 'Sarabun', 'Pretendard', sans-serif; }
.lm-stage button { font-family: inherit; cursor: pointer; }
.lm-appbar { flex: none; display: flex; align-items: center; gap: 24px; height: 76px; padding: 0 24px; background: #fff; }
.lm-wordmark { height: 44px; }
.lm-user { display: flex; flex-direction: column; line-height: 1.2; }
.lm-user b { font-size: 28px; }
.lm-user span { font-size: 20px; color: var(--psl-text-subtle); }
.lm-grow { flex: 1; }
.lm-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--psl-gray-100); color: var(--psl-text-subtle); font-size: 20px; font-weight: 600; white-space: nowrap; }
.lm-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--psl-outline-strong); }
.lm-pill.is-warn i { background: var(--psl-warn); }
.lm-content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 24px; }
.lm-btn { display: inline-flex; align-items: center; justify-content: center; height: 66px; padding: 0 24px; border: 1px solid transparent; border-radius: 6px; font-size: 28px; font-weight: 600; white-space: nowrap; }
.lm-btn.is-lg { height: 76px; font-size: 33px; }
.lm-btn.is-wide { width: 100%; }
.lm-btn.is-primary { background: var(--psl-brand); color: #fff; }
.lm-btn.is-secondary { background: #fff; border-color: var(--psl-outline); color: var(--psl-text); }
.lm-btn.is-danger { background: var(--psl-error); color: #fff; }
.lm-btn.is-ink { background: var(--psl-ink); color: #fff; }
.lm-btn:disabled { opacity: .5; cursor: default; }
.lm-btn.is-primary:disabled { opacity: 1; background: #A9C6FB; }
/* 첫 화면: 왼쪽 카드 안내, 오른쪽 PIN(소스 HomeScreen 0.5 : 0.5) */
.lm-home { flex: 1; display: flex; margin: 0 -24px; }
.lm-cardpanel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 24px; text-align: center; }
.lm-cardbadge { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; background: var(--psl-blue-100); color: var(--psl-brand); }
.lm-cardprompt { margin: 0; font-size: 33px; font-weight: 600; line-height: 1.35; white-space: pre-line; }
.lm-cardprompt.is-hint { color: var(--psl-warn); }
.lm-pinpanel { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; padding: 24px; }
.lm-pinhead { margin: 0; text-align: center; font-size: 33px; font-weight: 700; }
.lm-pinshow { height: 44px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 24px; color: var(--psl-text-subtle); }
.lm-pinshow i { width: 18px; height: 18px; border-radius: 50%; background: var(--psl-text); }
.lm-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lm-key { height: 84px; border: 1px solid var(--psl-outline); border-radius: 6px; background: #fff; font-size: 36px; font-weight: 700; color: var(--psl-text); }
.lm-key.is-fn { background: var(--psl-surface-alt); font-size: 24px; font-weight: 500; color: var(--psl-text-muted); }
.lm-key:active { background: var(--psl-blue-50); }
.lm-ico { display: inline-flex; }
.lm-error { margin: 0; text-align: center; font-size: 22px; color: var(--psl-error); font-weight: 600; }
/* 대기 문서 */
.lm-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.lm-listhead { display: flex; align-items: baseline; gap: 14px; }
.lm-listhead h3 { margin: 0; font-size: 39px; font-weight: 700; }
.lm-listhead span { font-size: 28px; color: var(--psl-text-subtle); }
.lm-rows { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.lm-row { display: flex; align-items: center; gap: 18px; min-height: 100px; padding: 12px 18px; border: 1px solid var(--psl-outline); border-radius: 8px; background: #fff; text-align: left; color: var(--psl-text); }
.lm-row.is-on { border-color: var(--psl-brand); background: var(--psl-blue-50); }
.lm-chk { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--psl-outline-strong); border-radius: 4px; background: #fff; color: #fff; }
.lm-row.is-on .lm-chk { border-color: var(--psl-brand); background: var(--psl-brand); }
.lm-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lm-rowtext b { font-size: 33px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-rowtext small { font-size: 20px; color: var(--psl-text-subtle); }
.lm-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--psl-text-subtle); }
.lm-empty b { font-size: 33px; color: var(--psl-text); }
.lm-footer { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 0 20px; }
/* 출력 중 · 완료 */
.lm-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.lm-display { margin: 0; font-size: 48px; font-weight: 700; }
.lm-sub { margin: 0; font-size: 28px; color: var(--psl-text-subtle); }
.lm-steps { width: 760px; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.lm-step { display: flex; align-items: center; gap: 16px; height: 72px; padding: 0 18px; border: 1px solid var(--psl-outline); border-radius: 8px; background: #fff; }
.lm-step b { flex: 1; min-width: 0; text-align: left; font-size: 30px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-step small { font-size: 22px; color: var(--psl-text-subtle); }
.lm-stepno { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--psl-gray-100); color: var(--psl-text-subtle); font-size: 24px; font-weight: 700; }
.lm-step.is-cur { border-color: var(--psl-brand); background: var(--psl-blue-50); }
.lm-step.is-cur .lm-stepno { background: var(--psl-brand); color: #fff; }
.lm-step.is-done b { color: var(--psl-text-subtle); font-weight: 400; }
.lm-progress { width: 760px; height: 10px; margin-top: 14px; background: var(--psl-gray-200); }
.lm-progress i { display: block; height: 100%; background: var(--psl-brand); transition: width .4s; }
.lm-donebadge { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; background: var(--psl-blue-100); color: var(--psl-brand); margin-bottom: 12px; }
.lm-actions { display: flex; gap: 12px; margin-top: 18px; }
.lm-actions .is-primary { min-width: 260px; }
.lm-dialog-back { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(17, 24, 39, .35); }
.lm-dialog { width: 680px; padding: 36px 40px; border-radius: 12px; background: #fff; text-align: center; }
.lm-dialog h3 { margin: 0 0 12px; font-size: 39px; }
.lm-dialog p { margin: 0; font-size: 28px; color: var(--psl-text-muted); line-height: 1.4; }
.lm-dialog .lm-actions { justify-content: center; }
.lm-demo-badge { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 2px 14px; border-radius: 14px; background: rgba(27, 31, 39, .55); color: #fff; font-size: 18px; pointer-events: none; }
/* 배출 트레이 */
.lm-tray { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: #f3f4f6; border: 1px solid #b9c0ca; border-radius: 6px; font-family: var(--font); }
.lm-tray-label { flex: none; display: flex; flex-direction: column; gap: 2px; width: 150px; }
.lm-tray-label b { font-size: 13px; }
.lm-tray-label small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.lm-tray-items { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; min-height: 62px; }
.lm-tray-empty { font-size: 12px; color: var(--muted); }
.lm-sheet { position: relative; flex: none; width: 44px; height: 62px; padding: 0; border: 1px solid #c3c9d1; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); cursor: pointer; }
.lm-sheet:hover { outline: 1px solid var(--accent); }
.lm-sheet-lines { position: absolute; left: 6px; right: 6px; top: 8px; height: 36px; background: repeating-linear-gradient(#cdd3db 0 2px, transparent 2px 7px); }
.lm-sheet-stamp { position: absolute; left: 3px; bottom: 3px; right: 3px; font-size: 4px; line-height: 1.1; color: #555; overflow: hidden; white-space: nowrap; text-align: left; }
.lm-sheet-modal { position: fixed; inset: 0; z-index: 80; }
.lm-sheet-view { width: 520px; }
.lm-sheet-head { display: flex; align-items: center; gap: 10px; }
.lm-sheet-head b { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-page { position: relative; align-self: center; width: 300px; height: 424px; padding: 36px 30px; background: #fff; border: 1px solid #d0d5dc; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); display: flex; flex-direction: column; gap: 14px; }
.lm-page-title { font-size: 15px; font-weight: 700; }
.lm-page-lines { flex: 1; background: repeating-linear-gradient(#d9dee5 0 3px, transparent 3px 14px); }
.lm-page-stamp { position: absolute; left: 14px; bottom: 10px; font-size: 10px; color: #444; white-space: nowrap; }

/* ── ③ 소개 ── */
.li-zone { overflow: hidden; }
.li-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 18px; font-size: 14px; line-height: 1.6; }
.li-hero { display: flex; flex-direction: column; gap: 6px; }
.li-wordmark { height: 24px; align-self: flex-start; }
.li-hero h2 { margin: 6px 0 0; font-size: 20px; font-weight: 700; line-height: 1.35; }
.li-hero p { margin: 0; color: var(--muted); }
.li-sec h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.li-sec p { margin: 0 0 8px; color: var(--text); }
.li-values { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; }
.li-values li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.li-values b { font-size: 14px; }
.li-values span { font-size: 13px; color: var(--muted); }
.li-diagram { display: flex; align-items: stretch; gap: 8px; margin: 4px 0 8px; }
.li-node { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font-size: 13px; }
.li-node b { font-size: 14px; margin-bottom: 2px; }
.li-node span { color: var(--muted); }
.li-link { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.li-link i { width: 100%; border-top: 2px solid var(--line-strong); }
.li-link small { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.3; }
.li-notes { margin: 0; padding-left: 18px; color: var(--text); }
.li-notes li + li { margin-top: 4px; }
.li-env { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.li-env dt { font-weight: 600; }
.li-env dd { margin: 0; color: var(--text); }
.li-compare { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; font-size: 13px; }
.li-crow { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); }
.li-crow:first-child { border-top: 0; }
.li-crow.is-head { background: var(--bg); }
.li-crow > span:first-child { font-weight: 600; }
.li-small { margin: 8px 0 0 !important; font-size: 12px; color: var(--muted) !important; }
.li-foot { display: flex; }
@container zone (max-width: 420px) {
  .li-diagram { flex-direction: column; }
  .li-link { width: auto; flex-direction: row; }
  .li-link i { width: 24px; }
}

/* ── 좁은 화면의 설명 화면: [설명 보기]를 누르면(body.lite-explain) 세 칸 대신 소개와 체험 순서를 보여 준다 ── */
.lite-mobile { display: none; }
.li-try { align-self: flex-start; height: 40px; margin-top: 6px; padding: 0 16px; font-size: 14px; }
.li-mnote { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.li-mnote b { font-size: 15px; }
.li-flow { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.li-flow li { display: flex; gap: 10px; }
.li-flow i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.li-flow div { display: flex; flex-direction: column; }
.li-flow span { color: var(--muted); font-size: 13px; }
@media (max-width: 1000px) {
  body.lite.lite-explain, body.lite.lite-explain.guide-collapsed { grid-template-rows: auto minmax(0, 1fr) auto; }
  body.lite.lite-explain .zones, body.lite.lite-explain #guide-root, body.lite.lite-explain .zone-tabs, body.lite.lite-explain .eventbar, body.lite.lite-explain #guide-popup, body.lite.lite-explain .guide-spot { display: none !important; }
  body.lite.lite-explain .lite-mobile { display: flex; grid-column: 1 / -1; grid-row: 2; min-height: 0; background: #fff; }
}
@media (max-width: 760px) {
  body.lite .li-scroll { padding: 14px 16px 24px; }
  body.lite .topbar .topbar-tag { display: none; }
  .li-diagram { flex-direction: column; }
  .li-link { width: auto; flex-direction: row; }
  .li-link i { width: 24px; }
}

/* 가이드의 예시 값(넣기 단추가 입력 칸에 넣는 값) */
.gd-lite-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); }
.gd-account-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gd-account-item code { height: 22px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; color: var(--text); font-size: 12px; font-weight: 500; line-height: 20px; }
.gd-fill { border-color: var(--accent); color: var(--accent); }
/* 복합기 칸이 좁을 때 배출 트레이는 이름 줄과 출력물 줄을 위아래로 둔다 */
@container mfpbody (max-width: 460px) {
  .lm-tray { flex-direction: column; align-items: stretch; gap: 4px; }
  .lm-tray-label { width: auto; }
  .lm-tray-label small { display: none; }
  .lm-tray-items { min-height: 50px; }
}
/* 칸이 아주 좁을 때(다른 칸을 크게 보는 중): PC 화면은 통째로 줄여 미리보기처럼 보인다 */
.lt-pctabs { flex-wrap: wrap; }
@container (max-width: 360px) {
  .lt-pcview { zoom: .5; }
  .lt-pctab { height: 26px; padding: 0 8px; font-size: 12px; }
}
/* 휴대폰 폭: 상단 줄을 두 줄로 접는다(로고·제품 전환 / 언어·도입 상담) */
@media (max-width: 760px) {
  body.lite .topbar { height: auto; flex-wrap: wrap; row-gap: 6px; padding: 6px 10px; }
  body.lite .topbar-actions { margin-left: auto; }
}