:root{--bg:#0b1220;--bg-2:#0f1a2e;--panel:#16233c;--panel-2:#1c2c49;--line:#263a5e;--line-soft:#1e3050;--text:#eaf1fb;--muted:#94a7c4;--muted-2:#6b83a8;--brand:#38bdf8;--brand-ink:#05233a;--ok:#34d399;--warn:#fbbf24;--danger:#f87171;--danger-strong:#ef4444;--radius:14px;--radius-sm:9px;--shadow:0 10px 30px #00000059;--font:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Meiryo, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font);background:radial-gradient(1200px 800px at 20% -10%, #14243f 0%, var(--bg) 55%) fixed;color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0}button{cursor:pointer;font-family:inherit}input,select{font-family:inherit}a{color:var(--brand)}.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:var(--radius-sm);white-space:nowrap;align-items:center;gap:7px;padding:9px 14px;font-size:14px;font-weight:600;transition:transform 50ms,background .15s,border-color .15s;display:inline-flex}.btn:hover{background:#22355a;border-color:#3b5680}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:default}.btn.primary{color:var(--brand-ink);background:linear-gradient(#4cc5fb,#2aa4e6);border-color:#2aa4e6}.btn.primary:hover{background:linear-gradient(#5ecbfb,#37abe9)}.btn.ghost{color:var(--muted);background:0 0;border-color:#0000}.btn.ghost:hover{background:var(--panel);color:var(--text)}.btn.danger{color:#fecaca;background:#331a1d;border-color:#5a2a2f}.btn.danger:hover{background:#40201f}.btn.sm{border-radius:7px;padding:5px 10px;font-size:12.5px}.btn.block{justify-content:center;width:100%}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.field label{color:var(--muted);font-size:12.5px;font-weight:600}.input{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);outline:none;width:100%;padding:11px 13px;font-size:15px;transition:border-color .15s}.input:focus{border-color:var(--brand)}.input.mono{font-variant-numeric:tabular-nums;letter-spacing:.5px}.tag{border:1px solid var(--line);color:var(--muted);border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-flex}.tag.out{color:#fdba74;background:#2c1c10;border-color:#6b3f1f}.tag.in{color:#7dd3fc;background:#0e2434;border-color:#1e4a63}.tag.role{text-transform:uppercase;letter-spacing:.5px}.spinner{border:2.5px solid #fff3;border-top-color:var(--brand);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.center-screen{place-items:center;gap:14px;min-height:100%;display:grid}.banner{border-radius:var(--radius-sm);margin-bottom:14px;padding:10px 14px;font-size:13.5px;font-weight:600}.banner.err{color:#fecaca;background:#331a1d;border:1px solid #5a2a2f}.banner.info{color:#bae6fd;background:#0e2434;border:1px solid #1e4a63}.auth-wrap{place-items:center;min-height:100%;padding:24px;display:grid}.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:400px;box-shadow:var(--shadow);padding:30px 28px}.auth-card h1{margin:0 0 4px;font-size:22px}.auth-card .sub{color:var(--muted);margin:0 0 22px;font-size:13.5px}.brand-badge{letter-spacing:.2px;align-items:center;gap:9px;margin-bottom:20px;font-size:16px;font-weight:800;display:inline-flex}.brand-badge .dot{background:linear-gradient(135deg,#4cc5fb,#2aa4e6);border-radius:8px;place-items:center;width:26px;height:26px;font-size:15px;display:grid}.auth-switch{text-align:center;color:var(--muted);margin-top:18px;font-size:13.5px}.auth-switch button{color:var(--brand);background:0 0;border:none;padding:0;font-size:13.5px;font-weight:700}.shell{flex-direction:column;height:100%;display:flex;position:relative}.topbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);z-index:20;background:#0b1220d9;flex-wrap:wrap;align-items:center;gap:14px;padding:10px 16px;display:flex;position:sticky;top:0}.topbar .title{align-items:center;gap:9px;font-size:16px;font-weight:800;display:flex}.topbar .spacer{flex:1}.conn{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}.conn .led{background:var(--muted-2);border-radius:50%;width:8px;height:8px}.conn.open .led{background:var(--ok);box-shadow:0 0 8px var(--ok)}.conn.connecting .led{background:var(--warn)}.conn.closed .led{background:var(--danger)}.menu{position:relative}.menu-pop{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);z-index:40;min-width:220px;padding:6px;position:absolute;top:calc(100% + 8px);right:0}.menu-pop button,.menu-pop a{text-align:left;width:100%;color:var(--text);background:0 0;border:none;border-radius:7px;align-items:center;gap:9px;padding:9px 11px;font-size:13.5px;text-decoration:none;display:flex}.menu-pop button svg,.menu-pop a svg{color:var(--muted)}.menu-pop button:hover,.menu-pop a:hover{background:var(--panel-2)}.menu-pop .div{background:var(--line-soft);height:1px;margin:6px 4px}.menu-pop .head{color:var(--muted-2);padding:8px 11px 4px;font-size:12px}.board{flex:1;align-items:stretch;gap:12px;padding:14px;display:flex;overflow:auto hidden}.col{background:linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);border:1px solid var(--line-soft);border-radius:var(--radius);flex-direction:column;flex:0 0 300px;min-height:0;display:flex}.col.dragover{border-color:var(--brand);box-shadow:inset 0 0 0 2px #38bdf84d}.col-head{border-bottom:1px solid var(--line-soft);align-items:center;gap:8px;padding:12px 14px 10px;display:flex}.col-head .name{font-size:14.5px;font-weight:700}.col-head .count{color:var(--muted);background:var(--bg);font-variant-numeric:tabular-nums;border-radius:999px;margin-left:auto;padding:1px 9px;font-size:12px}.kind-dot{border-radius:3px;flex:none;width:9px;height:9px}.kind-entry{background:#a78bfa}.kind-wait{background:#38bdf8}.kind-active{background:#34d399}.kind-done{background:#64748b}.col-body{flex-direction:column;flex:1;gap:9px;padding:10px;display:flex;overflow-y:auto}.col-body.empty:after{content:"ここにドロップ";color:var(--muted-2);text-align:center;border:1.5px dashed var(--line);border-radius:10px;padding:18px 0;font-size:12.5px}.card{background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--line);cursor:grab;-webkit-user-select:none;user-select:none;border-radius:11px;flex-direction:column;gap:9px;padding:10px 11px;transition:border-color .15s,box-shadow .15s,transform 50ms;display:flex}.card:active{cursor:grabbing}.card.dragging{opacity:.4}.card.warn{border-left-color:var(--warn)}.card.danger{border-left-color:var(--danger)}.card.noresponse{border-left-color:var(--danger-strong);border-color:var(--danger-strong);animation:1.1s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #ef444480}50%{box-shadow:0 0 0 5px #ef444400}}.card.called:after{content:""}.card-top{align-items:center;gap:8px;display:flex}.card .num{font-variant-numeric:tabular-nums;letter-spacing:.5px;font-size:19px;font-weight:800}.card .badges{align-items:center;gap:5px;margin-left:auto;display:flex}.card .timer{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:5px;font-size:12px;display:flex}.card .timer.warn{color:var(--warn)}.card .timer.danger{color:var(--danger)}.card .called-chip{color:var(--brand-ink);background:linear-gradient(#7dd3fc,#38bdf8);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800}.card .called-chip.late{color:#2a0808;background:linear-gradient(#fca5a5,#ef4444)}.card-actions{flex-wrap:wrap;gap:6px;display:flex}.card-actions .btn{flex:1;justify-content:center;min-width:0}.card-actions .btn.icon-only{flex:none;padding-left:9px;padding-right:9px}.card-actions .btn.active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);flex:none}.card-more{border-top:1px dashed var(--line);flex-wrap:wrap;gap:6px;margin-top:2px;padding-top:8px;display:flex}.card-more .btn{flex:1;justify-content:center;min-width:0}.icon-btn{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;flex:none;place-items:center;width:30px;height:30px;font-size:15px;display:grid}.icon-btn:hover{color:var(--text);background:var(--panel-2)}.help-steps{flex-direction:column;gap:14px;margin:18px 0;display:flex}.help-step{align-items:flex-start;gap:13px;display:flex}.help-ico{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;flex:none;place-items:center;width:40px;height:40px;font-size:22px;display:grid}.help-h{margin-bottom:3px;font-size:14.5px;font-weight:700}.help-b{color:var(--muted);font-size:13px;line-height:1.6}.help-flow{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;padding:13px 15px;font-size:13px;line-height:1.9}.help-chip{background:var(--panel-2);border:1px solid var(--line);vertical-align:middle;border-radius:6px;align-items:center;gap:4px;margin:0 3px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-flex}.board-empty{pointer-events:none;z-index:5;place-items:start center;padding-top:8vh;display:grid;position:absolute;inset:60px 0 0}.board-empty-card{pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;max-width:440px;padding:28px 30px}.board-empty-card .be-ico{color:var(--brand);background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px;display:inline-flex}.board-empty-card h2{margin:8px 0 6px;font-size:19px}.board-empty-card p{color:var(--muted);margin:0 0 18px;font-size:13.5px;line-height:1.7}.confirm-bar{background:var(--panel);border:1px solid var(--warn);box-shadow:var(--shadow);z-index:60;border-radius:12px;align-items:center;gap:12px;max-width:92vw;padding:12px 14px;display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}.confirm-bar .msg{font-size:13.5px;font-weight:600}.toast-wrap{z-index:55;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}.toast{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:10px;align-items:center;gap:10px;padding:10px 14px;font-size:13px;animation:.2s rise;display:flex}.toast.err{border-color:#5a2a2f}@keyframes rise{0%{opacity:0;transform:translateY(6px)}}.modal-back{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:80;background:#04081099;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:560px;max-height:88vh;box-shadow:var(--shadow);overflow-y:auto}.modal-head{border-bottom:1px solid var(--line-soft);background:var(--panel);align-items:center;padding:16px 20px;display:flex;position:sticky;top:0}.modal-head h2{margin:0;font-size:17px}.modal-head .spacer{flex:1}.modal-body{padding:20px}.modal-foot{border-top:1px solid var(--line-soft);background:var(--panel);justify-content:flex-end;gap:10px;padding:14px 20px;display:flex;position:sticky;bottom:0}.section{margin-bottom:26px}.section h3{text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 12px;font-size:13px}.row{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;align-items:center;gap:10px;margin-bottom:8px;padding:11px 12px;display:flex}.row .grow{flex:1;min-width:0}.row .r-name{font-size:14px;font-weight:600}.row .r-sub{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:12px;overflow:hidden}.grid-2{grid-template-columns:1fr 1fr;gap:12px;display:grid}.switch{background:var(--line);border:none;border-radius:999px;flex:none;width:42px;height:24px;transition:background .15s;position:relative}.switch.on{background:var(--brand)}.switch:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:3px;left:3px}.switch.on:after{transform:translate(18px)}.select{background:var(--bg-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:7px 9px;font-size:13px}.copybox{align-items:center;gap:8px;display:flex}.copybox .val{background:var(--bg);border:1px solid var(--line);text-overflow:ellipsis;white-space:nowrap;border-radius:8px;flex:1;padding:9px 11px;font-family:ui-monospace,monospace;font-size:13px;overflow:hidden}.slip{text-align:center}.slip .qr{background:#fff;border-radius:12px;padding:14px;display:inline-block}.slip .qr img{width:220px;height:220px;display:block}.slip .big-num{letter-spacing:1px;font-variant-numeric:tabular-nums;margin:14px 0 4px;font-size:46px;font-weight:900}.slip .url{color:var(--muted);word-break:break-all;font-family:ui-monospace,monospace;font-size:14px}.patient{background:var(--bg);flex-direction:column;min-height:100%;transition:background .4s;display:flex}.patient.called{background:linear-gradient(#0ea5e9 0%,#0369a1 100%)}.patient-inner{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:28px 22px;display:flex}.patient .clinic{color:var(--muted);font-size:15px;font-weight:600}.patient.called .clinic{color:#ffffffd9}.patient .my-label{color:var(--muted);margin-top:20px;font-size:14px}.patient.called .my-label{color:#ffffffd9}.patient .my-number{letter-spacing:1px;font-variant-numeric:tabular-nums;font-size:72px;font-weight:900;line-height:1.05}.patient .state-main{margin-top:26px;font-size:30px;font-weight:800;line-height:1.25}.patient.called .state-main{font-size:40px}.patient .state-sub{color:var(--muted);margin-top:8px;font-size:17px;line-height:1.5}.patient.called .state-sub{color:#ffffffe6}.patient .call-ico{color:#fff;transform-origin:top;animation:1.1s ease-in-out infinite bell}@keyframes bell{0%,to{transform:rotate(0)}25%{transform:rotate(14deg)}75%{transform:rotate(-14deg)}}.patient .ahead-num{font-variant-numeric:tabular-nums;color:var(--brand);font-size:58px;font-weight:900}.patient .pill{border-radius:999px;align-items:center;gap:7px;margin-top:16px;padding:7px 16px;font-size:14px;font-weight:700;display:inline-flex}.pill.outside{color:#fdba74;background:#2c1c10;border:1px solid #6b3f1f}.pill.inside{color:#7dd3fc;background:#0e2434;border:1px solid #1e4a63}.patient.called .pill{color:#fff;background:#fff3;border:1px solid #fff6}.patient-foot{text-align:center;color:var(--muted-2);border-top:1px solid var(--line-soft);justify-content:center;align-items:center;gap:8px;padding:14px;font-size:12px;display:flex}.patient.called .patient-foot{color:#ffffffb3;border-color:#fff3}.live-dot{background:var(--ok);border-radius:50%;width:7px;height:7px}.live-dot.stale{background:var(--warn)}.a2hs{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:11px;align-items:center;gap:10px;margin:0 14px 14px;padding:11px 14px;font-size:12.5px;display:flex}.display{flex-direction:column;min-height:100%;padding:3vh 3vw;display:flex}.display h1{align-items:center;gap:16px;margin:0 0 2vh;font-size:clamp(24px,3.4vw,46px);display:flex}.display .cols{flex:1;grid-auto-columns:1fr;grid-auto-flow:column;gap:2vw;display:grid}.display .dcol{background:var(--panel);border:1px solid var(--line-soft);border-radius:18px;flex-direction:column;min-width:0;padding:2vh 1.4vw;display:flex}.display .dcol h2{color:var(--muted);align-items:center;gap:10px;margin:0 0 1.4vh;font-size:clamp(16px,1.7vw,28px);display:flex}.display .nums{flex-wrap:wrap;align-content:flex-start;gap:1vh 1vw;display:flex;overflow:hidden}.display .dnum{font-variant-numeric:tabular-nums;background:var(--bg-2);color:var(--muted);border:2px solid #0000;border-radius:12px;padding:.4vh 1.4vw;font-size:clamp(26px,3vw,52px);font-weight:800}.display .dnum.called{color:#04121f;background:linear-gradient(#38bdf8,#0284c7);border-color:#7dd3fc;animation:1.2s ease-in-out infinite pulse}.display .called-banner{color:var(--brand);font-size:clamp(18px,2vw,30px);font-weight:700}.muted{color:var(--muted)}.small{font-size:12.5px}.stack{flex-direction:column;gap:10px;display:flex}.hstack{align-items:center;gap:10px;display:flex}.wrap-narrow{width:100%;max-width:760px;margin:0 auto;padding:22px 16px 60px}.empty-hint{text-align:center;color:var(--muted);padding:60px 20px}@media (max-width:640px){.grid-2{grid-template-columns:1fr}.col{flex-basis:84vw}}@media print{body{color:#000!important;background:#fff!important}.topbar,.board,.confirm-bar,.toast-wrap,.modal-head,.modal-foot,.a2hs{display:none!important}.modal-back{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;padding:0;position:static}.modal{box-shadow:none;border:none;max-width:none;max-height:none}#print-slip .big-num{color:#000}#print-slip .muted,#print-slip .url{color:#333!important}#print-slip .qr{border:1px solid #ddd}}