:root{
  --bg:#f3f4f6; --card:#fff; --ink:#1f2937; --sub:#6b7280; --line:#e5e7eb;
  --pri:#2563eb; --pri-soft:#dbeafe; --ok:#059669; --ok-soft:#d1fae5;
  --warn:#d97706; --warn-soft:#fef3c7; --ng:#dc2626; --ng-soft:#fee2e2;
  --brk:#7c3aed; --brk-soft:#ede9fe;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;font-size:14px;line-height:1.6}
button{font:inherit;cursor:pointer}
.topbar{position:sticky;top:0;z-index:50;background:#111827;color:#fff;padding:10px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.topbar b{font-size:15px}
.topbar .note{color:#9ca3af;font-size:12px}
.roles{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.roles button{border:1px solid #374151;background:#1f2937;color:#e5e7eb;padding:6px 12px;border-radius:8px}
.roles button.on{background:var(--pri);border-color:var(--pri);color:#fff}

/* ===== 社員（スマホ） ===== */
.staff-wrap{display:flex;gap:24px;justify-content:center;align-items:flex-start;padding:20px 16px;flex-wrap:wrap}
.phone{width:390px;max-width:100%;background:var(--card);border-radius:28px;border:10px solid #111827;min-height:780px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.ph-head{padding:14px 16px 8px;border-bottom:1px solid var(--line)}
.ph-head .row{display:flex;justify-content:space-between;align-items:center}
.ph-name{font-weight:700}
.ph-clock{font-size:13px;color:var(--sub)}
.place{font-size:12px;padding:2px 8px;border-radius:99px}
.place.in{background:var(--ok-soft);color:var(--ok)}
.place.out{background:var(--warn-soft);color:var(--warn)}
.ph-body{flex:1;overflow-y:auto;padding:14px 16px 90px}
.tabs{position:absolute;bottom:0;left:0;right:0;display:flex;border-top:1px solid var(--line);background:#fff}
.tabs button{flex:1;border:0;background:none;padding:10px 0 12px;color:var(--sub);font-size:12px}
.tabs button.on{color:var(--pri);font-weight:700}
.tabs .ico{display:block;font-size:18px}

.status{border-radius:16px;padding:16px;text-align:center;margin-bottom:14px}
.status.none{background:#f9fafb}
.status.work{background:var(--pri-soft)}
.status.brk{background:var(--brk-soft)}
.status.done{background:#f3f4f6}
.status .lbl{font-size:13px;color:var(--sub)}
.status .state{font-size:22px;font-weight:800;margin:2px 0}
.status .big{font-size:40px;font-weight:800;letter-spacing:1px;line-height:1.2}
.status .cap{font-size:12px;color:var(--sub)}
.status.work .state{color:var(--pri)}
.status.brk .state{color:var(--brk)}
.status .big.warn{color:var(--warn)}
.status .big.ng{color:var(--ng)}

.mini{display:flex;gap:8px;margin-bottom:14px}
.mini>div{flex:1;background:#f9fafb;border-radius:10px;padding:8px;text-align:center}
.mini .k{font-size:11px;color:var(--sub)}
.mini .v{font-size:17px;font-weight:700}

.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pbtn{border:0;border-radius:14px;padding:18px 0;font-size:17px;font-weight:700;color:#fff}
.pbtn:disabled{background:#e5e7eb!important;color:#9ca3af;cursor:not-allowed}
.b-in{background:var(--pri)} .b-bs{background:var(--brk)} .b-be{background:#6d28d9} .b-out{background:#374151}

.direct{background:#f9fafb;border-radius:12px;padding:10px 12px;margin-bottom:14px;font-size:13px}
.direct label{display:flex;gap:6px;align-items:center}
.direct input[type=text]{width:100%;margin-top:6px;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}

.banner{border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:13px}
.banner.warn{background:var(--warn-soft);color:#92400e}
.banner.ng{background:var(--ng-soft);color:#991b1b}
.banner.info{background:var(--pri-soft);color:#1e40af}

h3{font-size:14px;margin:16px 0 8px}
.plist{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.prow{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow .t{font-weight:700;width:48px}
.prow .ty{flex:1}
.prow .old{text-decoration:line-through;color:var(--sub);font-size:12px}
.tag{font-size:11px;padding:1px 7px;border-radius:99px;white-space:nowrap}
.tag.fix{background:var(--warn-soft);color:#92400e}
.tag.out{background:var(--warn-soft);color:#92400e}
.tag.in{background:var(--ok-soft);color:var(--ok)}
.tag.late{background:var(--ng-soft);color:#991b1b}
.tag.gray{background:#f3f4f6;color:var(--sub)}
.linkbtn{border:0;background:none;color:var(--pri);font-size:12px;padding:0}

.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.bigsum{background:var(--pri-soft);border-radius:14px;padding:14px;text-align:center;margin-bottom:12px}
.bigsum .v{font-size:30px;font-weight:800;color:var(--pri)}

.help h4{margin:14px 0 6px;font-size:14px}
.help table{width:100%;border-collapse:collapse;font-size:13px}
.help td{border-bottom:1px solid var(--line);padding:7px 4px;vertical-align:top}
.help td:first-child{white-space:nowrap;font-weight:700;width:112px}
.help .src{font-size:11px;color:var(--sub)}
.help .rev{font-size:11px;background:var(--warn-soft);color:#92400e;padding:1px 6px;border-radius:6px}

/* シミュレーター */
.sim{width:300px;max-width:100%;background:var(--card);border-radius:14px;padding:14px;border:1px dashed #9ca3af}
.sim h2{font-size:14px;margin:0 0 4px}
.sim p{font-size:12px;color:var(--sub);margin:0 0 10px}
.sim .now{font-size:28px;font-weight:800;text-align:center;margin:6px 0 10px}
.sim .g{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.sim button{border:1px solid var(--line);background:#f9fafb;border-radius:8px;padding:7px 0;font-size:13px}
.sim .wide{width:100%;margin-bottom:6px}
.sim .log{font-size:12px;background:#f9fafb;border-radius:8px;padding:8px;max-height:220px;overflow-y:auto}
.sim .log div{border-bottom:1px dotted var(--line);padding:3px 0}

/* モーダル（スマホの中） */
.modal{position:absolute;inset:0;background:rgba(17,24,39,.55);display:none;align-items:flex-end;z-index:20}
.modal.show{display:flex}
.sheet{background:#fff;width:100%;border-radius:20px 20px 0 0;padding:20px 18px 26px;max-height:92%;overflow-y:auto}
.sheet h2{margin:0 0 6px;font-size:19px}
.sheet p{margin:0 0 12px;color:var(--sub);font-size:13px}
.sheet .alarm{font-size:44px;text-align:center;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.sheet select,.sheet input,.sheet textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font:inherit;margin-bottom:10px}
.sheet .row2{display:flex;gap:8px}
.sheet .row2 button{flex:1}
.sbtn{border:0;border-radius:12px;padding:14px 0;font-weight:700;font-size:15px;width:100%}
.sbtn.p{background:var(--pri);color:#fff}
.sbtn.b{background:var(--brk);color:#fff}
.sbtn.g{background:#f3f4f6;color:var(--ink)}
.err{color:var(--ng);font-size:12px;min-height:18px;margin-top:-6px;margin-bottom:6px}

/* ===== 管理画面 ===== */
.admin{max-width:1180px;margin:0 auto;padding:20px 16px 40px}
.ro{background:var(--warn-soft);color:#92400e;border-radius:10px;padding:8px 12px;margin-bottom:14px;font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border-radius:14px;padding:14px 16px;border:1px solid var(--line)}
.kpi .k{color:var(--sub);font-size:12px}
.kpi .v{font-size:30px;font-weight:800}
.kpi.alert .v{color:var(--ng)}
.atabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.atabs button{border:0;background:none;padding:9px 14px;color:var(--sub);border-bottom:3px solid transparent;margin-bottom:-2px}
.atabs button.on{color:var(--pri);border-bottom-color:var(--pri);font-weight:700}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.panel{background:var(--card);border-radius:14px;border:1px solid var(--line);padding:14px 16px}
.panel h3{margin:0 0 10px}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;color:var(--sub);font-weight:600;font-size:12px;border-bottom:1px solid var(--line);padding:6px 6px}
table.t td{border-bottom:1px solid var(--line);padding:8px 6px;vertical-align:middle}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}
.st{font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.st.work{background:var(--pri-soft);color:var(--pri)}
.st.brk{background:var(--brk-soft);color:var(--brk)}
.st.none{background:#f3f4f6;color:var(--sub)}
.st.done{background:#f3f4f6;color:var(--ink)}
.feed div{border-bottom:1px solid var(--line);padding:8px 0;font-size:13px}
.feed .when{color:var(--sub);font-size:11px}
.minus{color:var(--ng);font-weight:700}
.plus{color:var(--ok);font-weight:700}
.setrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.setrow input{width:180px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.exp{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.exp select{padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.abtn{border:0;border-radius:10px;padding:9px 16px;background:var(--pri);color:#fff;font-weight:700}
.abtn.g{background:#f3f4f6;color:var(--ink)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 18px;border-radius:10px;display:none;z-index:100;font-size:13px}
/* ===== 社員（PC）：同じ部品を横長に並べ替える ===== */
.phone.pc{width:1000px;border:1px solid var(--line);border-radius:14px;min-height:auto}
.pc .ph-head{order:0;padding:14px 20px}
.pc .tabs{position:static;order:1;border-top:0;border-bottom:1px solid var(--line);justify-content:flex-start}
.pc .tabs button{flex:none;padding:10px 20px;font-size:14px}
.pc .tabs .ico{display:inline;font-size:14px;margin-right:4px}
.pc .ph-body{order:2;padding:18px 20px 24px}
.pc #tab-punch{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}
.pc #bannerArea{grid-column:1/3}
.pc #statusCard{grid-column:1;grid-row:2}
.pc .mini{grid-column:1;grid-row:3}
.pc .btns{grid-column:2;grid-row:2/4}
.pc .btns .pbtn{padding:26px 0}
.pc #tab-punch h3{grid-column:1/3;grid-row:4}
.pc #pList{grid-column:1/3;grid-row:5}
.pc #directBox{display:none!important}
.pc .modal{align-items:center;justify-content:center}
.pc .sheet{max-width:460px;border-radius:16px}
.pc #tab-month,.pc #tab-help{max-width:640px}
/* ===== カレンダー ===== */
.calhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.calhead b{font-size:16px}
.navb{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 10px;font-size:12px;color:var(--sub)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font-size:11px;text-align:center;color:var(--sub);padding-bottom:2px}
.cal .dow.sun{color:var(--ng)} .cal .dow.sat{color:var(--pri)}
.cal .d{border:1px solid var(--line);border-radius:8px;min-height:60px;padding:3px 4px;font-size:11px;cursor:pointer;background:#fff;display:flex;flex-direction:column;min-width:0}
.cal .d .n{font-weight:700;line-height:1.3}
.cal .d .n.sun{color:var(--ng)} .cal .d .n.sat{color:var(--pri)}
.cal .d .hol{font-size:9px;color:var(--ng);line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cal .d .h{font-size:13px;font-weight:700;margin-top:auto;text-align:right;font-variant-numeric:tabular-nums}
.cal .d.off{background:#f9fafb;cursor:default}
.cal .d.future{background:#fff;cursor:default}
.cal .d.today{outline:2px solid var(--pri);outline-offset:-1px}
.cal .d.sel{background:var(--pri-soft)}
.cal .d.blank{border:0;background:none;cursor:default}
.marks{display:flex;gap:2px;flex-wrap:wrap}
.mk{font-size:10px;border-radius:4px;padding:0 3px;line-height:1.5;font-weight:700}
.mk.late{background:var(--ng-soft);color:#991b1b} .mk.brk{background:var(--warn-soft);color:#92400e}
.mk.fix{background:#fef9c3;color:#854d0e} .mk.dir{background:var(--pri-soft);color:#1e40af}
.legend{font-size:11px;color:var(--sub);margin:8px 0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.caldetail{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;background:#f9fafb}
.caldetail .dt{font-weight:700;margin-bottom:4px}
.pc .cal .d{min-height:74px;font-size:12px}
.pc .cal .d .h{font-size:15px}
.admincal{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
.admincal .cal .d{min-height:70px}
.namebtn{border:0;background:none;color:var(--pri);padding:0;font:inherit;text-decoration:underline}
@media (max-width:820px){.admincal{grid-template-columns:1fr}}
/* ===================== 社員画面（デラックス） ===================== */
#staffView{background:radial-gradient(1200px 500px at 20% -10%,#e0e7ff 0%,transparent 60%),radial-gradient(900px 500px at 100% 0%,#fae8ff 0%,transparent 55%),#f5f7fb;min-height:calc(100vh - 52px)}
#staffView .phone{border:0;box-shadow:0 30px 60px -20px rgba(30,41,59,.35),0 0 0 10px #0f172a;background:#f8fafc}
#staffView .phone.pc{box-shadow:0 24px 50px -24px rgba(30,41,59,.35);border-radius:22px;overflow:hidden}
#staffView .ph-head{background:linear-gradient(135deg,#312e81 0%,#4f46e5 45%,#7c3aed 100%);color:#fff;border:0;padding:18px 20px 20px;position:relative;overflow:hidden}
#staffView .ph-head::after{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
#staffView .ph-head .row{align-items:flex-start;position:relative;z-index:1}
#staffView .hello{font-size:12px;opacity:.8;letter-spacing:.05em}
#staffView .ph-name{font-size:20px;font-weight:800;letter-spacing:.02em}
#staffView .ph-name small{font-size:12px;font-weight:500;opacity:.8}
#staffView .headright{text-align:right}
#staffView .ph-time{font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
#staffView .ph-clock{color:rgba(255,255,255,.8);font-size:11px;margin:4px 0 6px}
#staffView .place{background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px)}
#staffView .place.out{background:rgba(251,191,36,.3)!important}
#staffView .tabs{background:#fff}
#staffView .pc .tabs, #staffView .phone.pc .tabs{padding:8px 16px;gap:6px;background:#fff;border-bottom:1px solid #eef0f4}
#staffView .phone.pc .tabs button{border-radius:999px;padding:8px 18px;color:#64748b}
#staffView .phone.pc .tabs button.on{background:#eef2ff;color:#4338ca}
#staffView .phone:not(.pc) .tabs button.on .ico{background:#eef2ff;border-radius:12px;padding:2px 14px;display:inline-block}
#staffView .ph-body{background:#f8fafc}

/* 状態カード：輪で「あとどれくらい」を見せる */
#staffView .status{display:flex;gap:18px;align-items:center;text-align:left;border-radius:22px;padding:18px;box-shadow:0 10px 30px -18px rgba(30,41,59,.45);border:1px solid rgba(255,255,255,.6)}
#staffView .status.none{background:linear-gradient(135deg,#fff 0%,#f1f5f9 100%)}
#staffView .status.work{background:linear-gradient(135deg,#eff6ff 0%,#e0e7ff 100%)}
#staffView .status.brk{background:linear-gradient(135deg,#faf5ff 0%,#ede9fe 100%)}
#staffView .status.done{background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%)}
#staffView .ring{position:relative;width:132px;height:132px;flex:none}
#staffView .ring svg{transform:rotate(-90deg)}
#staffView .ring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#staffView .ring .rv{font-size:28px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
#staffView .ring .rl{font-size:10px;color:#64748b}
#staffView .ring .ri{font-size:38px}
#staffView .sinfo{flex:1;min-width:0}
#staffView .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:3px 12px;margin-bottom:6px}
#staffView .chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(79,70,229,.5)}70%{box-shadow:0 0 0 8px rgba(79,70,229,0)}100%{box-shadow:0 0 0 0 rgba(79,70,229,0)}}
#staffView .chip.work{background:#e0e7ff;color:#4338ca}
#staffView .chip.brk{background:#f3e8ff;color:#7e22ce}
#staffView .chip.none{background:#e2e8f0;color:#475569}
#staffView .chip.done{background:#d1fae5;color:#047857}
#staffView .sttl{font-size:20px;font-weight:800;margin-bottom:4px}
#staffView .sline{font-size:12px;color:#475569;margin:2px 0}
#staffView .sline b{color:#0f172a}
#staffView .sline.warn b{color:#b45309}
#staffView .sline.ok b{color:#047857}

/* 小さな数字のカード */
#staffView .mini{gap:10px}
#staffView .mini>div{background:#fff;border-radius:16px;padding:12px;text-align:left;box-shadow:0 6px 18px -14px rgba(30,41,59,.5);border:1px solid #eef0f4}
#staffView .mini .k{font-size:11px;color:#64748b}
#staffView .mini .v{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
#staffView .bar{height:6px;background:#f1f5f9;border-radius:99px;margin-top:6px;overflow:hidden}
#staffView .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a78bfa,#7c3aed);border-radius:99px;transition:width .4s}
#staffView .bar i.full{background:linear-gradient(90deg,#34d399,#059669)}

/* 打刻ボタン */
#staffView .pbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:18px;padding:16px 0 14px;font-size:17px;box-shadow:0 12px 24px -14px rgba(30,41,59,.7);transition:transform .12s, box-shadow .12s}
#staffView .pbtn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(30,41,59,.7)}
#staffView .pbtn:not(:disabled):active{transform:translateY(0)}
#staffView .pbtn .pi{font-size:24px;line-height:1}
#staffView .pbtn small{font-size:10px;font-weight:500;opacity:.85}
#staffView .b-in{background:linear-gradient(135deg,#3b82f6,#4f46e5)}
#staffView .b-bs{background:linear-gradient(135deg,#f59e0b,#ea580c)}
#staffView .b-be{background:linear-gradient(135deg,#14b8a6,#0d9488)}
#staffView .b-out{background:linear-gradient(135deg,#334155,#0f172a)}
#staffView .pbtn:disabled{background:#eef0f4!important;color:#94a3b8;box-shadow:none}
#staffView .pbtn:disabled .pi{filter:grayscale(1);opacity:.5}
#staffView .phone.pc .btns .pbtn{padding:22px 0 18px;font-size:19px}
#staffView .phone.pc .btns .pbtn .pi{font-size:30px}

/* 今日の打刻：タイムライン */
#staffView h3{font-size:13px;color:#475569;letter-spacing:.05em}
#staffView .plist{border:0;background:#fff;border-radius:16px;padding:6px 14px;box-shadow:0 6px 18px -14px rgba(30,41,59,.5)}
#staffView .prow{position:relative;padding:10px 0 10px 22px;border-bottom:1px dashed #e2e8f0}
#staffView .prow:last-child{border-bottom:0}
#staffView .prow::before{content:"";position:absolute;left:4px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px #f1f5f9}
#staffView .prow.t-in::before{background:#4f46e5}
#staffView .prow.t-bs::before{background:#f59e0b}
#staffView .prow.t-be::before{background:#14b8a6}
#staffView .prow.t-out::before{background:#0f172a}
#staffView .prow .t{font-size:15px;font-variant-numeric:tabular-nums}

/* お知らせ・ひとこと */
#staffView .banner{border-radius:14px;box-shadow:0 6px 16px -14px rgba(30,41,59,.6);border:1px solid rgba(0,0,0,.04)}
#staffView .banner.info{background:#eef2ff;color:#3730a3}
#staffView .tip{background:linear-gradient(135deg,#ecfdf5,#f0fdfa);border:1px solid #a7f3d0}
#staffView .status .tip{background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.9);margin-top:8px}

/* 今月・カレンダー */
#staffView .bigsum{background:linear-gradient(135deg,#312e81,#6d28d9);color:#fff;border-radius:20px;box-shadow:0 14px 30px -18px rgba(49,46,129,.8)}
#staffView .bigsum div{color:rgba(255,255,255,.8)!important}
#staffView .bigsum .v{color:#fff!important;font-size:34px}
#staffView .cal .d{border:0;background:#fff;border-radius:12px;box-shadow:0 4px 12px -10px rgba(30,41,59,.6);transition:transform .1s}
#staffView .cal .d:not(.off):not(.blank):not(.future):hover{transform:translateY(-1px)}
#staffView .cal .d.off{background:#f1f5f9;box-shadow:none}
#staffView .cal .d.future{background:rgba(255,255,255,.6);box-shadow:none}
#staffView .cal .d.sel{background:#eef2ff;box-shadow:0 0 0 2px #818cf8 inset}
#staffView .cal .d.today{outline:0;box-shadow:0 0 0 2px #4f46e5 inset}
#staffView .caldetail{background:#fff;border:0;border-radius:16px;box-shadow:0 6px 18px -14px rgba(30,41,59,.5)}
#staffView .panel{border:0;border-radius:16px;box-shadow:0 6px 18px -14px rgba(30,41,59,.5)}
#staffView .navb{border-radius:999px}

/* モーダル */
#staffView .modal{backdrop-filter:blur(3px)}
#staffView .sheet{box-shadow:0 30px 60px -20px rgba(15,23,42,.5)}
#staffView .sbtn.p{background:linear-gradient(135deg,#3b82f6,#4f46e5)}
#staffView .sbtn.b{background:linear-gradient(135deg,#f59e0b,#ea580c)}
#staffView .sim{box-shadow:0 10px 30px -20px rgba(30,41,59,.5)}
@media (max-width:420px){#staffView .ring{width:112px;height:112px}#staffView .ring .rv{font-size:23px}#staffView .mini .v{font-size:16px}}

/* 使い方 */
.guide .gcard{background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 6px 18px -14px rgba(30,41,59,.5);border:1px solid #eef0f4;margin-bottom:10px}
.guide .gcard.hero{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#eef2ff,#faf5ff);border-color:#e0e7ff}
.guide .gcard.hero span{font-size:13px;color:#475569}
.guide .chk{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed #e2e8f0;font-size:13px;cursor:pointer}
.guide .chk:last-of-type{border-bottom:0}
.guide .chk input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:#4f46e5}
.guide .chk .abtn{padding:6px 12px;font-size:12px;margin:4px 0}
.guide .gprog{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:#475569}
.guide .gprog .bar{flex:1;height:8px;background:#f1f5f9;border-radius:99px;overflow:hidden}
.guide .gprog .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#818cf8,#4f46e5);transition:width .3s}
.guide .steps{display:grid;gap:8px}
.guide .step{display:flex;gap:10px;background:#fff;border-radius:14px;padding:10px 12px;font-size:13px;box-shadow:0 6px 18px -14px rgba(30,41,59,.5)}
.guide .sn{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#4f46e5);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:12px}
.pc #tab-guide{max-width:720px}
.cntb{display:inline-block;min-width:18px;padding:0 5px;border-radius:99px;background:var(--ng);color:#fff;font-size:11px;line-height:18px;text-align:center}
.cntb:empty{display:none}
/* 理由・コメントの記録 */
.logbox{background:#fff;border-radius:16px;padding:12px 14px;margin-top:12px;border:1px solid #eef0f4;box-shadow:0 6px 18px -14px rgba(30,41,59,.5)}
.loghead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lognote{font-size:11px;color:var(--sub)}
.lategauge{display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:center;background:linear-gradient(135deg,#fff1f2,#fff7ed);border:1px solid #fecdd3;border-radius:14px;padding:10px 14px;margin-bottom:10px}
.lg-k{font-size:11px;color:#9f1239}
.lg-v{font-size:26px;font-weight:800;color:#be123c;line-height:1.1}
.lg-v small{font-size:13px;color:#9f1239;font-weight:600}
.ldots{display:flex;gap:6px}
.ldot{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #fda4af}
.ldot.on{background:#e11d48;border-color:#e11d48}
.lg-sub{font-size:11px;color:#6b7280}
.lchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.lchip{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:3px 12px;font-size:12px;color:#475569}
.lchip span{display:inline-block;min-width:16px;border-radius:99px;background:#f1f5f9;font-size:11px;margin-left:2px}
.lchip.on{background:#4f46e5;border-color:#4f46e5;color:#fff}
.lchip.on span{background:rgba(255,255,255,.25)}
.litem{display:flex;gap:12px;padding:10px 0;border-top:1px dashed #e5e7eb}
.ld{flex:none;width:52px;font-weight:800;font-size:15px}
.ld small{display:block;font-size:10px;color:var(--sub);font-weight:500}
.lbody{flex:1;min-width:0;font-size:13px}
.lt{font-weight:700;margin-bottom:2px}
.lr{color:#334155}
.lm{margin-top:4px;background:#f8fafc;border-left:3px solid #c7d2fe;border-radius:6px;padding:4px 8px;color:#334155}
.lbadge{font-size:10px;font-weight:600;border-radius:99px;padding:1px 8px;background:#f1f5f9;color:#475569;white-space:nowrap}
.lbadge.bad{background:#ffe4e6;color:#be123c}
.lempty{font-size:13px;color:var(--sub);padding:10px 0}
.locbox{border-radius:14px;padding:10px 14px;font-size:13px;margin:0 0 12px;line-height:1.6}
.locbox.ok{background:linear-gradient(135deg,#ecfeff,#f0fdfa);border:1px solid #99f6e4;color:#115e59}
.locbox.warn{background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1px solid #fcd34d;color:#92400e}
/* ログイン画面 */
.login-wrap{min-height:calc(100vh - 52px);display:flex;align-items:center;justify-content:center;padding:30px 16px;background:radial-gradient(900px 500px at 10% 0%,#c7d2fe 0%,transparent 60%),radial-gradient(800px 500px at 100% 100%,#f5d0fe 0%,transparent 55%),linear-gradient(135deg,#312e81,#6d28d9)}
.login-card{width:400px;max-width:100%;background:#fff;border-radius:24px;padding:30px 26px;box-shadow:0 30px 60px -20px rgba(15,23,42,.6)}
.lg-logo{width:64px;height:64px;margin:0 auto;border-radius:18px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -10px rgba(79,70,229,.8)}
.lg-title{text-align:center;font-size:24px;font-weight:800;margin-top:12px}
.lg-sub{text-align:center;font-size:12px;color:var(--sub);margin-bottom:22px}
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #dadce0;background:#fff;border-radius:12px;padding:13px 0;font-size:15px;font-weight:700;color:#3c4043;box-shadow:0 2px 6px -3px rgba(0,0,0,.2)}
.gbtn:hover{background:#f8fafc}
.gicon{width:22px;height:22px;border-radius:50%;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.lg-note{font-size:12px;color:#475569;margin:12px 0}
.lg-err{background:var(--ng-soft);color:#991b1b;border-radius:10px;padding:8px 12px;font-size:12px;margin-top:8px}
.lg-ok{background:var(--ok-soft);color:#065f46;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700}
.devsel{display:grid;gap:8px}
.devsel label{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;cursor:pointer}
.devsel input{accent-color:#4f46e5}
.lg-list{padding-left:0;list-style:none;font-size:13px;display:grid;gap:6px;margin:0}
.lg-list li{background:#f8fafc;border-radius:10px;padding:8px 10px}
/* 通知の設定 */
.nchan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ncard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.nh{display:flex;align-items:center;gap:8px}
.nh b{flex:1}
.nicon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800}
.nf{font-size:12px;color:var(--sub);display:flex;flex-direction:column;gap:3px}
.nf input{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;color:var(--ink);min-width:0}
.nf input:disabled{background:#f8fafc;color:var(--sub)}
.nf small{font-size:11px}
.ncard .ntest{align-self:flex-start;margin-top:auto}
.sw{position:relative;width:40px;height:22px;flex:none}
.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:#cbd5e1;border-radius:99px;transition:.2s;cursor:pointer}
.sw i::before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.sw input:checked+i{background:#4f46e5}
.sw input:checked+i::before{transform:translateX(18px)}
.nmatrix td:nth-child(n+2):nth-child(-n+5),.nmatrix th:nth-child(n+2):nth-child(-n+5){text-align:center;width:72px}
.nmatrix input{width:16px;height:16px;accent-color:#4f46e5}
.nsel{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit}
@media (max-width:820px){.nchan{grid-template-columns:1fr}}
.skopt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:6px;cursor:pointer}
.skopt small{display:block;font-size:11px;color:var(--sub);font-weight:400}
.skopt.ded{border-color:#c7d2fe;background:#f8faff}
.skopt input{margin-top:3px;accent-color:#4f46e5}
.skbox{background:#f8fafc;border-radius:12px;padding:10px 12px;margin:0 0 10px}
.skprev{font-size:12px;background:#eef2ff;color:#3730a3;border-radius:10px;padding:8px 12px;margin:0 0 8px}
.skopt.keep{border-color:#a7f3d0;background:#f0fdf4}
.skgroup{font-size:12px;font-weight:700;margin:10px 0 6px;padding-left:8px;border-left:4px solid}
.skgroup.ded{color:#3730a3;border-color:#818cf8}
.skgroup.keep{color:#047857;border-color:#34d399}
.skgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.skgrid .skopt{margin-bottom:0;font-size:13px;padding:8px 10px}
@media (max-width:420px){.skgrid{grid-template-columns:1fr}}
.outsum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.outsum div{background:#f8fafc;border:1px solid #eef0f4;border-radius:12px;padding:8px 12px;display:flex;justify-content:space-between;align-items:baseline}
.outsum span{font-size:12px;color:var(--sub)}
.outsum b{font-size:18px;font-variant-numeric:tabular-nums}
.tip{background:var(--ok-soft);color:#065f46;border-radius:10px;padding:8px 12px;font-size:13px;margin:0 0 12px;text-align:left}
.status .tip{margin:10px 0 0;background:rgba(255,255,255,.7)}
.hidden{display:none!important}
@media (max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}