/* Material Symbols Rounded / filled, with a fixed box on the text's center line. */
.preview-ui .ps-symbol,.ps-mobile-preview .ps-symbol{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:18px;height:18px;font-family:'Material Symbols Rounded';font-size:18px;font-weight:400;line-height:1;font-style:normal;letter-spacing:normal;white-space:nowrap;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20;vertical-align:middle;overflow:hidden}
.preview-ui .ps-control{gap:6px;line-height:20px}
.preview-ui .ps-control.ps-icon-control{width:34px;padding-inline:0}
.preview-ui .ps-th>span{display:flex;align-items:center;gap:6px;line-height:20px}
.preview-ui .ps-th .ps-symbol{color:#a3a7af}
.preview-ui .ps-input>.ps-symbol{font-size:18px;color:#9298a1}
.preview-ui .ps-approval-scope{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;min-height:36px;font-size:14px}
.preview-ui .ps-checkbox-filter{display:inline-flex;align-items:center;gap:9px}
.preview-ui .ps-checkbox{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#191a1b;border:1px solid #191a1b;border-radius:4px;color:#fff}
.preview-ui .ps-checkbox>.ps-symbol{width:15px;height:15px;font-size:15px}

/* Desktop context behind an employee's mobile timeclock; the phone continues below the crop. */
.ps-clock-scene{position:absolute;inset:0}
.preview-ui .ps-clock-grid{display:grid;grid-template-columns:420px 520px;align-items:start;gap:24px}
.preview-ui .ps-clock-grid>.ps-clock-panel{width:auto;margin:0}
.preview-ui .ps-clock-week{padding:24px;border:1px solid #e1e2e5;border-radius:10px;background:#fff}
.preview-ui .ps-clock-week-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:18px;line-height:28px}
.preview-ui .ps-clock-week-heading>span{font-size:14px;color:#737a83;white-space:nowrap}
.preview-ui .ps-clock-week-period{margin:12px 0 20px;font-size:14px;line-height:20px;color:#858b94}
.preview-ui .ps-clock-week-day{display:flex;align-items:center;gap:16px;min-height:84px;border-top:1px solid #ededee}
.preview-ui .ps-clock-week-date{display:flex;flex-direction:column;gap:5px;width:52px;flex:none;font-size:14px;line-height:20px}
.preview-ui .ps-clock-week-date>span{font-size:12px;color:#858b94}
.preview-ui .ps-clock-week-shift{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;padding-left:14px;border-left:3px solid #a5c8ec;font-size:16px;line-height:22px}
.preview-ui .ps-clock-week-shift>span{font-size:13px;line-height:18px;color:#858b94}
.preview-ui .ps-clock-week-state{font-size:12px;line-height:18px;color:#858b94;white-space:nowrap}
.preview-ui .ps-clock-week-day.is-today .ps-clock-week-state{padding:2px 5px;border-radius:4px;background:#edf5fc;color:#527da3}
.preview-ui .ps-clock-week-rest{margin:18px 0 0;font-size:13px;line-height:20px;color:#858b94}
.ps-mobile-preview{position:absolute;z-index:2;top:56px;right:48px;width:320px;height:640px;padding:7px;border:1px solid #343638;border-radius:38px;background:#18191b;box-shadow:0 16px 36px #17233124;color:#18191b;font-family:Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:450;line-height:1.5;letter-spacing:-.025em;pointer-events:none;user-select:none}
.ps-mobile-screen{height:100%;border-radius:30px;background:#fff;overflow:hidden}
.ps-mobile-preview *{box-sizing:border-box}
.ps-mobile-status{display:flex;align-items:center;justify-content:space-between;padding:9px 18px 3px;font-size:11px;line-height:16px}
.ps-mobile-status>span{display:flex;align-items:center;gap:3px}
.ps-mobile-status .ps-symbol{width:13px;height:13px;font-size:13px}
.ps-mobile-nav{display:flex;align-items:center;gap:12px;height:42px;padding:0 16px;border-bottom:1px solid #ededee;font-size:15px}
.ps-mobile-nav>span:nth-last-child(2){flex:1}
.ps-mobile-body{padding:16px 14px}
.ps-mobile-date{font-size:14px;font-weight:600;line-height:21px;margin:0 0 14px;white-space:nowrap}
.ps-mobile-clock,.ps-mobile-week{border:1px solid #e1e2e5;border-radius:16px;padding:17px}
.ps-mobile-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;line-height:22px}
.ps-mobile-preview .ps-chip{padding:3px 6px;border-radius:4px;font-size:10px;line-height:16px;background:#edf6f0;color:#397c53;white-space:nowrap}
.ps-mobile-record{display:flex;align-items:center;gap:12px;margin:13px 0 15px}
.ps-mobile-record>strong{font-size:32px;font-weight:650;line-height:38px;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.ps-mobile-record>span{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#737a83;white-space:nowrap}
.ps-mobile-record .ps-symbol{width:14px;height:14px;font-size:14px;color:#43805b}
.ps-mobile-shift{display:flex;align-items:center;gap:10px;min-height:48px;text-align:left}
.ps-mobile-shift>div{display:flex;flex-direction:column;gap:5px}
.ps-mobile-shift>div:first-child{font-size:11px;font-weight:500;line-height:16px}
.ps-mobile-shift>div:nth-child(2){flex:1;border-left:3px solid #97bfee;padding-left:10px;font-size:12px;line-height:16px}
.ps-mobile-shift>div:nth-child(2)>span{font-size:10px;color:#858b94;white-space:nowrap}
.ps-mobile-shift>.ps-symbol{color:#858b94;width:16px;height:16px;font-size:16px}
.ps-mobile-clock-button{display:flex;align-items:center;justify-content:center;min-height:40px;margin-top:16px;border-radius:999px;background:#191a1b;color:#fff;font-size:13px;font-weight:550}
.ps-mobile-week{margin-top:16px;min-height:220px}
.ps-mobile-week>b{font-size:14px;font-weight:600}
.ps-mobile-week>p{margin:16px 0;font-size:12px;color:#737a83}
.ps-mobile-week>span{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}
.ps-mobile-week strong{font-size:16px;font-weight:600}
@media(max-width:800px){.ps-mobile-preview{right:28px;width:300px}}
@media(max-width:600px){
 .service-page .detail-lead>.has-product-screen:has(>.ps-clock-scene){height:460px}
 .ps-clock-scene>.preview-ui{left:-130px;opacity:.3}
 .ps-mobile-preview{top:28px;right:24px;width:280px}
}

/* Context icons share a consistent optical size in the product window headers. */
.preview-ui .ps-window-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;color:#7a828d}
.preview-ui .ps-window-icon>.ps-symbol{width:20px;height:20px}
.preview-ui.ps-modal .ps-window-icon{display:none}