@font-face{font-family:Pretendard;src:url('../PretendardVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--ink:#0a0a0a;--muted:#737373;--line:#e5e5e5;--blue:#3b82f6;--danger:#df4b4b;--danger-rgb:223,75,75;--danger-soft:#fff1f1;--phone-x:307px;--phone-y:78px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff;font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
body{min-height:100svh;display:grid;place-items:center;padding:24px}
.artwork{width:min(100%,560px);aspect-ratio:1;position:relative;overflow:clip;border-radius:20px;background:#bcc3c7;isolation:isolate;container-type:inline-size}
.scene{position:absolute;left:0;top:0;width:560px;height:560px;transform-origin:top left;overflow:clip}
.backgrounds,.photo-wash,.dimmer{position:absolute;inset:0;pointer-events:none}
.backgrounds{overflow:hidden;z-index:0}
.factory{position:absolute;inset:-10px;width:580px;height:580px;object-fit:cover;filter:blur(2.7px) saturate(.72);opacity:0;will-change:opacity,transform}
.factory:first-child{opacity:1;object-position:47% center}
.factory:nth-child(2){object-position:51% center}
.factory:nth-child(3){object-position:44% center}
.photo-wash{z-index:1;background:linear-gradient(125deg,rgba(241,245,248,.15),rgba(242,244,247,.07));}
.dimmer{z-index:2;background:linear-gradient(105deg,rgba(14,21,29,.73),rgba(19,26,35,.5));opacity:0;will-change:opacity}
.phone{position:absolute;left:var(--phone-x);top:var(--phone-y);width:414px;height:868px;border:12px solid #08090b;border-radius:48px;background:#fff;overflow:hidden;z-index:4;box-shadow:-10px 15px 36px -17px rgba(0,0,0,.36);will-change:opacity}
.phone-screen{position:relative;width:390px;height:844px;background:#fff}
.phone-incoming{z-index:5;opacity:0;visibility:hidden;pointer-events:none}
.phone-incoming .clock-in{pointer-events:auto}
.date{position:absolute;top:40px;left:16px;font-size:20px;line-height:28px;letter-spacing:-.24px;font-weight:600;white-space:nowrap}
.shift{position:absolute;left:17px;top:99px;display:flex;height:45px;gap:15px;white-space:nowrap;font-size:14px;line-height:20px;letter-spacing:-.15px}
.shift-hours,.shift-employee{display:flex;flex-direction:column;gap:5px}
.shift-hours{font-weight:500;width:41px}
.shift-color{width:3px;flex:none;background:var(--blue)}
.shift-employee{margin-left:-3px}
.shift-employee strong{font-weight:600}
.shift-employee>span{font-weight:500;color:var(--muted)}
.employee-count{position:absolute;top:121px;left:310px;display:flex;gap:4px;font-size:13px;line-height:19.5px;white-space:nowrap}
.employee-count span{color:var(--muted)}
.employee-count strong{font-weight:600}
.attendance-card{position:absolute;left:16px;top:169px;width:358px;height:270px;border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden}
.attendance-content{position:absolute;left:20px;top:23px;width:316px;white-space:nowrap}
.attendance-state{display:inline-flex;align-items:center;padding:4px 8px;border-radius:6px;background:#f5f5f5;color:#737373;font-weight:500;font-size:11px;line-height:16px}
.clock,.shift-hours{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"ss03" 1}
.clock{margin-top:15px;font-size:43px;line-height:48px;font-weight:600;letter-spacing:-1.3px;transform-origin:left center}
.attendance-meta{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.clock-caption{font-size:13px;line-height:20px;font-weight:400;color:#737373;letter-spacing:-.2px}
.place{display:flex;align-items:center;gap:4px;font-size:11px;line-height:16px;color:#a3a3a3}
.clock-in{position:absolute;left:20px;top:208px;width:316px;height:40px;border:0;padding:0;border-radius:10px;background:#171717;color:#fafafa;font:500 14px/20px Pretendard,sans-serif;cursor:pointer;transform-origin:center;outline-offset:-4px;white-space:nowrap}
.button-label{display:inline-block}
.clock-in:disabled{cursor:default}
.button-check{display:inline-block;font-size:16px;font-weight:700;margin-right:6px;display:none;transform-origin:center}
.payroll-card{position:absolute;left:calc((var(--phone-x) - 250px)/2);top:112px;width:250px;padding:20px;border:0;border-radius:14px;background:#fff;box-shadow:0 12px 32px #10182018;z-index:6;opacity:0;transform:translateY(8px);will-change:opacity,transform}
.payroll-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:24px}
.payroll-employee{font-size:18px;font-weight:650;letter-spacing:-.4px}
.payroll-period{font-size:14px;font-weight:500;color:#777d85}
.payroll-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.payroll-stats>div{display:flex;flex-direction:column;gap:7px;white-space:nowrap}
.payroll-stats>div>span{font-size:12px;line-height:18px;color:#858b93}
.payroll-stats strong{display:flex;align-items:baseline;gap:2px;line-height:29px;letter-spacing:-.7px;font-size:25px;font-weight:650}
.payroll-stats b,.payroll-total b{font-weight:inherit}
.payroll-stats small{font-size:13px;font-weight:500;letter-spacing:-.2px;color:#5e6670}
.payroll-basis{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:15px;font-size:11px;line-height:17px;color:#858b93;white-space:nowrap}
.payroll-details,.payroll-result{height:0;overflow:hidden;opacity:0}
.payroll-lines{display:flex;flex-direction:column;gap:12px;padding-top:17px;border-top:1px solid #eceef1}
.payroll-line{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;white-space:nowrap;font-size:12px;line-height:20px;color:#686f79}
.payroll-line>span{display:flex;align-items:baseline;gap:4px}
.payroll-line small{font-size:10px;color:#9a9fa6}
.payroll-line strong{font-size:13px;font-weight:550;letter-spacing:-.3px;color:#303740;font-variant-numeric:tabular-nums}
.payroll-result-inner{padding:15px 13px 14px;background:var(--danger-soft);border-radius:9px}
.payroll-result-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;line-height:18px;font-weight:550;color:#92504f}
.payroll-total{display:flex;align-items:baseline;gap:3px;margin-top:8px;color:var(--danger);font-size:32px;font-weight:700;line-height:40px;letter-spacing:-1.1px;font-variant-numeric:lining-nums tabular-nums}
.payroll-total>span{font-size:15px;font-weight:550;letter-spacing:-.3px}
.tap{position:absolute;left:510px;top:488px;width:1px;height:1px;z-index:7;pointer-events:none;opacity:0}
.tap i,.tap b{position:absolute;left:-32px;top:-32px;width:64px;height:64px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 9px #0002}
.tap .tap-echo{left:-42px;top:-42px;width:84px;height:84px;border-width:2px}
.tap b{background:rgba(255,255,255,.35);border:3px solid #fff;left:-12px;top:-12px;width:24px;height:24px;box-shadow:0 2px 9px #0004}
/* Preserve legible UI at narrow widths: move the phone crop instead of shrinking everything. */
@media(max-width:440px){body{padding:16px}.artwork{width:100%;border-radius:20px}.scene{--phone-x:330px}.payroll-card{left:15px;top:88px;width:300px;padding:20px}.payroll-employee{font-size:21px}.payroll-period{font-size:16px}.payroll-stats>div>span{font-size:15px;line-height:21px}.payroll-stats strong{font-size:30px;line-height:34px}.payroll-stats small{font-size:16px}.payroll-basis{font-size:13px;line-height:20px}.payroll-line{font-size:15px;line-height:24px;min-height:24px}.payroll-line small{font-size:12px}.payroll-line strong{font-size:16px}.payroll-result-heading{font-size:15px;line-height:22px}.payroll-total{font-size:38px;line-height:45px}.payroll-total>span{font-size:18px}.clock-in{font-size:18px;text-align:left;padding-left:28px}.tap{left:442px}}
@media(prefers-reduced-motion:reduce){.factory,.phone,.payroll-card{will-change:auto}}
html.embed,html.embed body{min-height:0;height:100%;overflow:clip;background:transparent}
html.embed body{padding:0;display:block}
html.embed .artwork{width:100%;max-width:none;height:100%;aspect-ratio:auto}