/* 체험용 가상 사원증(vcard.js): 복합기 조작 패널 아래 한 줄. 안내 · 사원증 · 카드 리더기 */
.vcard-dock { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; container-type: inline-size; padding: 6px 12px; border-top: 1px solid #c3c9d1; background: #eef0f3; font-family: var(--font, system-ui, sans-serif); color: #2b2f36; }
.vcard-label { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vcard-label b { font-size: 12px; font-weight: 700; }
.vcard-label small { font-size: 12px; line-height: 1.35; color: #5b6470; }
.vcard { flex: none; position: relative; z-index: 2; width: 84px; height: 53px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: grab; touch-action: none; transition: transform .15s ease; }
.vcard:focus-visible { outline: 2px solid #2f6fd6; outline-offset: 2px; }
.vcard.is-drag { cursor: grabbing; transition: none; z-index: 30; }
.vcard.is-drag .vcard-face { box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
.vcard-face { position: absolute; inset: 0; overflow: hidden; border: 1px solid #aeb6c2; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); text-align: left; }
.vcard-band { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: #2f6fd6; }
.vcard-chip { position: absolute; left: 8px; top: 20px; width: 14px; height: 11px; border-radius: 2px; background: #c9b37a; }
.vcard-name { position: absolute; left: 27px; right: 4px; top: 18px; font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2b2f36; }
.vcard-no { position: absolute; left: 8px; bottom: 5px; font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .5px; color: #5b6470; }
.vcard-reader { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 72px; height: 53px; border-radius: 6px; background: #2b2f36; color: #c9ced6; transition: box-shadow .15s ease; }
.vcard-reader.is-over { box-shadow: 0 0 0 3px #7fa8ea; }
.vcard-led { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #5b6470; }
.vcard-reader.is-read .vcard-led { background: #7fa8ea; box-shadow: 0 0 8px #7fa8ea; }
.vcard-reader.is-read { animation: vcard-read .9s ease; }
@keyframes vcard-read { 0%, 100% { box-shadow: none; } 20% { box-shadow: 0 0 0 3px #7fa8ea; } }
.vcard-waves { display: flex; opacity: .8; }
.vcard-reader-name { font-size: 10px; line-height: 1.1; text-align: center; padding: 0 3px; }
.vcard-note { display: none; margin: 0; font-size: 12px; line-height: 1.4; color: #5b6470; }
/* 칸이 좁으면(데스크톱 세 칸 보기) 제목만 한 줄로 두고 사원증·리더기를 그 아래에 둔다. 설명은 말풍선(tip.vcard.card)에 있다 */
@container (max-width: 300px) { .vcard-label { flex-basis: 100%; } .vcard-label small { display: none; } }
/* OXPd 탭: 제품 서버가 그리는 화면이라 가상 사원증은 쓰지 않고 안내 한 줄만 */
.vcard-dock.is-note .vcard-label, .vcard-dock.is-note .vcard, .vcard-dock.is-note .vcard-reader { display: none; }
.vcard-dock.is-note .vcard-note { display: block; }
@media (prefers-reduced-motion: reduce) { .vcard, .vcard-reader { transition: none; } .vcard-reader.is-read { animation: none; } }
/* Workpath 패널 안: 미등록 카드 안내, [카드 등록] 화면(설정 로그인 → 사원증 등록) */
.wp-card-guide { flex: none; margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; background: var(--primary-50); color: var(--primary-900); font-size: 20px; line-height: 1.4; text-align: center; white-space: pre-line; }
.wp-form:has(.wp-card-guide) { padding-bottom: 24px; }
.wp-cardset-side { flex: 1; min-width: 0; margin: 0 32px; padding: 0 32px 88px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.wp-cardset-side b { font-size: 30px; font-weight: 700; color: var(--gray-700); }
.wp-cardset-side p { margin: 0; font-size: 22px; line-height: 1.45; color: var(--gray-500); }
.wp-auth-body:has(.wp-cardset-side) .wp-form { padding-bottom: 24px; }
.wp-cardset-back { flex: none; width: 100%; height: 56px; margin-top: 14px; border: 1px solid var(--gray-200) !important; border-radius: 13px; font-size: 22px !important; color: var(--gray-500) !important; }
.wp-cardset { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 32px 48px; }
.wp-cardset > button { width: 440px; max-width: 100%; }
.wp-cardset-who { font-size: 22px; color: var(--gray-500); }
.wp-cardset-cur { margin-bottom: 18px; font-size: 28px; color: var(--gray-700); text-align: center; }
@media (max-width: 760px), (max-width: 1000px) and (max-height: 480px) {
  #wp-stage .wp-card-guide { margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
  #wp-stage .wp-cardset-side { flex: none; margin: 0; padding: 0; gap: 4px; }
  #wp-stage .wp-cardset-side b { font-size: 16px; }
  #wp-stage .wp-cardset-side p { font-size: 13px; }
  #wp-stage .wp-cardset-back { height: 44px; margin-top: 8px; border-radius: 8px; font-size: 14px !important; }
  #wp-stage .wp-cardset { gap: 10px; padding: 16px 10px; }
  #wp-stage .wp-cardset-who { font-size: 13px; }
  #wp-stage .wp-cardset-cur { margin-bottom: 4px; font-size: 15px; }
}
/* PSL Lite 복합기: 기기 그림과 배출 트레이 사이 */
.lm-zone .vcard-dock { border: 1px solid #b9c0ca; border-radius: 6px; }
/* PSL Lite 카드 등록 화면(lite-mfp.js): PIN 본인 확인 · 내 카드 등록 */
.lm-signin { gap: 8px; }
.lm-signin .lm-pinpanel { flex: none; width: 474px; padding: 0; }
.lm-pre, .lm-zone .lm-error { white-space: pre-line; }
.lm-cardnote { max-width: 820px; font-size: 22px; line-height: 1.45; }
@media (max-width: 760px) {
  .vcard-dock { gap: 8px; padding: 6px 8px; }
  .vcard-label b { font-size: 12px; }
}