:root{--bg:#f4f6f9;--text:#1f2933;--sub:#52606d;--sub2:#3e4c59;--line:#e4e7eb;--blue:#1d5fa8;--dark:#3e4c59;--orange:#c2570c;--orange-dark:#8a3f08;--green:#2f7d4a;--red:#b42318}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic UI,Meiryo,sans-serif}button{font-family:inherit}.center-msg{text-align:center;height:100%;color:var(--sub2);justify-content:center;align-items:center;padding:24px;font-size:15px;line-height:1.7;display:flex}.login{max-width:440px;min-height:100%;padding:24px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left));flex-direction:column;justify-content:center;gap:18px;margin:0 auto;display:flex}.login-logo{width:100%;max-width:320px;margin:0 auto 8px;display:block}.field{flex-direction:column;gap:6px;font-size:14px;display:flex}.field input{height:48px;color:var(--text);background:#fff;border:1px solid #cbd2d9;border-radius:10px;padding:0 12px;font-family:inherit;font-size:16px}.btn-primary{background:var(--blue);color:#fff;border:none;border-radius:12px;height:52px;font-size:17px;font-weight:700}.btn-primary:disabled{opacity:.5}.note{color:var(--sub);text-align:center;margin:0;font-size:13px;line-height:1.7}.pager{scroll-snap-type:x mandatory;scrollbar-width:none;height:100%;display:flex;overflow:auto hidden}.pager::-webkit-scrollbar{display:none}.panel{scroll-snap-align:start;scroll-snap-stop:always;height:100%;padding-top:env(safe-area-inset-top);flex-direction:column;flex:0 0 100%;max-width:100vw;padding-left:max(0px,50vw - 240px);padding-right:max(0px,50vw - 240px);display:flex;overflow-y:auto}.head{padding:14px 20px 8px}.head-logo{height:30px;margin:0 auto 10px;display:block}.head-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.head-name{flex-direction:column;gap:2px;min-width:0;display:flex}.head-clinic{color:var(--sub);font-size:13px}.head-clinic+.head-clinic{margin-top:-2px}.head-person{font-size:17px;font-weight:700}.head-id{color:var(--sub);background:var(--line);border-radius:999px;flex-shrink:0;padding:4px 10px;font-size:12px}.clock{flex-direction:column;flex-grow:1;justify-content:center;align-items:center;gap:6px;min-height:170px;display:flex}.clock-date{color:var(--sub2);font-size:20px}.holiday{color:var(--blue)!important}.clock-time{letter-spacing:2px;font-variant-numeric:tabular-nums;font-size:76px;font-weight:700;line-height:1.1}.geo{align-items:center;gap:6px;font-size:13px;display:flex}.geo-on{color:var(--green)}.geo-off{color:var(--red);font-weight:700}.geo-unknown{color:var(--sub)}.punch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 20px;display:grid}.punch-btn{color:#fff;touch-action:manipulation;border:none;border-radius:20px;height:150px;font-size:30px;font-weight:700;transition:transform 80ms,filter 80ms}.punch-btn:active:not(:disabled){filter:brightness(.9);transform:scale(.97)}.punch-btn:disabled{opacity:.45}.btn-in{background:var(--blue)}.btn-out{background:var(--dark)}.btn-bout{background:var(--orange)}.btn-bin{background:var(--orange-dark)}.msg{border-radius:12px;flex-direction:column;gap:2px;margin:18px 20px 0;padding:12px 14px;font-size:14px;line-height:1.6;display:flex}.login .msg{margin:0}.msg-ok{color:#1e5631;background:#e3f1e7}.msg-error{color:var(--red);background:#fde8e7}.msg-title{font-weight:700}.msg-sub{font-size:12px}.today{border:1px solid var(--line);color:var(--sub2);background:#fff;border-radius:12px;flex-direction:column;gap:4px;margin:18px 20px 0;padding:12px 14px;font-size:13px;display:flex}.today-title{font-weight:700}.msg+.today{margin-top:10px}.foot{padding:24px 20px calc(24px + env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:10px;margin-top:auto;display:flex}.dots{gap:8px;display:flex}.dot{background:#cbd2d9;border-radius:999px;width:8px;height:8px}.dot-on.dot-0,.dot-on.dot-1{background:var(--blue)}.dot-on.dot-2{background:var(--orange)}.foot-links{justify-content:space-between;width:100%;display:flex}.foot-links.end{justify-content:flex-end}.link{color:var(--blue);cursor:pointer;background:0 0;border:none;padding:6px 0;font-size:13px}.logout{color:var(--sub);background:0 0;border:none;margin-top:6px;font-size:12px;text-decoration:underline}.history{flex-direction:column;display:flex}.history-head{flex-direction:column;gap:4px;padding:4px 20px 8px;display:flex}.history-title{font-size:20px;font-weight:700}.history-sub{color:var(--sub);font-size:12px}.history-nav{justify-content:space-between;align-items:center;padding:8px 20px;display:flex}.history-nav button{width:44px;height:44px;color:var(--sub2);background:#fff;border:1px solid #cbd2d9;border-radius:12px;font-size:18px}.history-nav button:disabled{opacity:.35}.history-date{font-size:17px;font-weight:700}.history-list{border:1px solid var(--line);background:#fff;border-radius:14px;flex-direction:column;margin:8px 20px 0;display:flex;overflow:hidden}.history-row{color:var(--sub2);border-bottom:1px solid #f0f2f5;justify-content:space-between;align-items:center;padding:14px 16px;font-size:15px;display:flex}.history-row:last-child{border-bottom:none}.history-time{color:var(--text);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}.history-empty{color:var(--sub);text-align:center;padding:18px 16px;font-size:14px}@media (height<=700px){.clock{min-height:130px}.clock-time{font-size:60px}.punch-btn{height:120px}.foot{padding-top:14px}}