/* Mobile TBM uses the original screenshots on a flat plane.
   The parent owns the sticky viewport and scroll progress. */
[data-ps-surface="tbm"] .mt-tbm-admin,
[data-ps-surface="tbm"] .mt-tbm-worker { display: contents; }
[data-ps-surface="tbm"] .mt-tbm-label { display: none; }

@media (max-width: 599px) {
  .risk-motion-page .ps-story[data-ps-story="tbm"] .ra-tbm-showcase {
    position: relative;
    height: clamp(360px, var(--ps-stage-height, 440px), 560px);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #f3f3f6;
    perspective: none;
    transform: none;
    isolation: isolate;
  }
  .risk-motion-page [data-ps-surface="tbm"] .ra-tbm-desktop,
  .risk-motion-page [data-ps-surface="tbm"] .ra-tbm-mobile,
  .risk-motion-page [data-ps-surface="tbm"] .sp-tbm-education {
    transform: none !important;
    rotate: none !important;
    scale: none !important;
    translate: none !important;
    perspective: none !important;
    clip-path: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .risk-motion-page [data-ps-surface="tbm"] .rs-tbm-document,
  .risk-motion-page [data-ps-surface="tbm"] .rs-tbm-connector,
  .risk-motion-page [data-ps-surface="tbm"] .sp-education-mask,
  .risk-motion-page [data-ps-surface="tbm"] .sp-tbm-receipt { display: none !important; }

  /* A no-JS visitor still sees the complete, upright worker screen. */
  .risk-motion-page [data-ps-surface="tbm"] .ra-tbm-desktop { display: none; }
  .risk-motion-page [data-ps-surface="tbm"] .ra-tbm-mobile {
    position: absolute;
    inset: 36px 0 24px !important;
    width: auto !important;
    height: calc(100% - 60px) !important;
    max-width: calc(100% - 24px) !important;
    max-height: none !important;
    margin: 0 auto;
    object-fit: contain;
  }
  .risk-motion-page [data-ps-surface="tbm"]:not(.sp-ready)::before {
    content: "작업자에게 배정된 TBM";
    position: absolute;
    inset: 10px 0 auto;
    color: #302c36;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
  }
  .risk-motion-page [data-ps-surface="tbm"]:not(.sp-ready)::after {
    content: "관리자 편성 → 작업자 TBM 배정";
    position: absolute;
    inset: auto 0 5px;
    color: #62586f;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
  }

  .risk-motion-page [data-ps-surface="tbm"].sp-ready .mt-tbm-admin {
    display: block;
    position: absolute;
    left: 0;
    top: var(--mt-admin-frame-top);
    width: 100%;
    height: var(--mt-admin-frame-height);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: var(--mt-admin-opacity, 1);
    translate: var(--mt-admin-offset, 0px) 0;
  }
  .risk-motion-page [data-ps-surface="tbm"].sp-ready .mt-tbm-admin .ra-tbm-desktop,
  .risk-motion-page [data-ps-surface="tbm"].sp-ready .mt-tbm-admin .sp-tbm-education {
    display: block;
    position: absolute;
    left: var(--mt-admin-image-left) !important;
    top: var(--mt-admin-image-top) !important;
    width: var(--mt-admin-image-width) !important;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: contain;
  }
  .risk-motion-page [data-ps-surface="tbm"].sp-ready .mt-tbm-admin .sp-tbm-education {
    aspect-ratio: 1600 / 1060;
    pointer-events: none;
  }
  .risk-motion-page [data-ps-surface="tbm"] .sp-education-focus {
    border-width: 2px;
    border-color: #8660bb;
    background: transparent;
    box-shadow: none;
  }
  .risk-motion-page [data-ps-surface="tbm"].sp-ready .mt-tbm-worker {
    display: block;
    position: absolute;
    z-index: 4;
    left: var(--mt-phone-left);
    top: var(--mt-phone-top);
    width: var(--mt-phone-width);
    height: var(--mt-phone-height);
    opacity: var(--mt-phone-opacity, 1);
    translate: var(--mt-phone-offset, 0px) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .risk-motion-page [data-ps-surface="tbm"].sp-ready .mt-tbm-worker .ra-tbm-mobile {
    position: static;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    object-fit: contain;
  }
  .risk-motion-page [data-ps-surface="tbm"] .mt-tbm-label {
    display: flex;
    position: absolute;
    z-index: 7;
    inset: 10px 0 auto;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #302c36;
    line-height: 1.4;
  }
  .risk-motion-page [data-ps-surface="tbm"] .mt-tbm-label > span {
    color: #735298;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .risk-motion-page [data-ps-surface="tbm"] .mt-tbm-label > strong {
    font-size: 15px;
    font-weight: 600;
  }
  .risk-motion-page [data-ps-surface="tbm"] .sp-tbm-caption {
    inset: auto 0 5px;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #62586f;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
  }
}