:root{
  --ink:#1f2937; --sub:#6b7280; --line:#e5e7eb; --bg:#f4f6f9;
  --brand:#1e5fa8; --brand-dark:#164a85; --accent:#e8f1fb;
  --ok:#15803d; --warn:#b45309; --danger:#b91c1c;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6;}
header.app{background:var(--brand); color:#fff; padding:10px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
header.app h1{font-size:16px; font-weight:700;}
header.app .role-badge{background:rgba(255,255,255,.2); border-radius:99px; padding:2px 12px; font-size:12px;}
header.app .sp{flex:1;}
header.app .me{font-size:13px;}
main{max-width:1080px; margin:0 auto; padding:16px;}
.card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px;}
.card h2{font-size:15px; color:var(--brand-dark); border-left:4px solid var(--brand); padding-left:8px; margin-bottom:12px;}
.grid{display:grid; gap:10px;}
label.f{display:block; font-size:12px; color:var(--sub); font-weight:600;}
select,input[type=date],input[type=number],input[type=text]{width:100%; padding:9px 10px; border:1px solid #cbd5e1; border-radius:8px; font-size:15px; background:#fff; color:var(--ink);}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.row>div{flex:1; min-width:130px;}
button{font-family:inherit; cursor:pointer; border:none; border-radius:8px; font-size:14px;}
.btn-p{background:var(--brand); color:#fff; padding:11px 20px; font-weight:700;}
.btn-p:hover{background:var(--brand-dark);}
.btn-ok{background:var(--ok); color:#fff; padding:12px 20px; font-weight:700; font-size:15px;}
.btn-s{background:#fff; color:var(--brand-dark); border:1px solid var(--brand); padding:8px 14px;}
.btn-ghost{background:#eef2f7; color:var(--ink); padding:6px 12px; font-size:12px;}
.btn-danger{background:#fff; color:var(--danger); border:1px solid #fca5a5; padding:4px 10px; font-size:12px;}
table.t{width:100%; border-collapse:collapse; font-size:13px;}
table.t th{background:var(--accent); color:var(--brand-dark); padding:7px 8px; text-align:left; border:1px solid #d4e2f2; white-space:nowrap;}
table.t td{padding:6px 8px; border:1px solid var(--line); background:#fff;}
table.t td.num, table.t th.num{text-align:right; font-variant-numeric:tabular-nums;}
table.t tr.total td{background:#fef9e7; font-weight:700;}
.tag{display:inline-block; font-size:11px; border-radius:99px; padding:1px 8px; white-space:nowrap;}
.tag.trainee{background:#fef3c7; color:#92400e;}
.tag.honka{background:#e0e7ff; color:#3730a3;}
.tag.help{background:#ffedd5; color:#9a3412;}
.tag.koshu{background:#dcfce7; color:#166534;}
.pubbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:9px 12px; font-size:13px; color:#991b1b; margin-bottom:10px;}
.pubbar.on{background:#ecfdf5; border-color:#a7f3d0; color:#065f46;}
.pubbar .sp{flex:1;}
.tag.jimu{background:#f1f5f9; color:#334155; border:1px solid #cbd5e1;}
.tag.manual{background:#fce7f3; color:#9d174d;}
.tag.cap{background:#fee2e2; color:#991b1b;}
.tag.auto{background:#e5e7eb; color:#374151;}
.tag.test{background:#ccfbf1; color:#115e59;}
.muted{color:var(--sub); font-size:12px;}
.notice{background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 12px; font-size:12px; color:#92400e; margin:8px 0;}
.flash{background:#ecfdf5; border:1px solid #6ee7b7; color:#065f46; border-radius:8px; padding:10px 14px; font-weight:700; margin-bottom:12px; text-align:center;}
.tabs{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
.tabs button{padding:9px 18px; border-radius:8px 8px 0 0; background:#dde5ee; color:var(--sub); font-weight:600;}
.tabs button.on{background:#fff; color:var(--brand-dark); border:1px solid var(--line); border-bottom:2px solid #fff;}
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px;}
.toolbar .sp{flex:1;}
.scrollx{overflow-x:auto;}
/* 講師: 名前選択（カルテ方式） */
.namegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px;}
.namegrid button{background:#fff; border:1.5px solid #cbd5e1; border-radius:10px; padding:12px 4px; font-size:14px; font-weight:600; color:var(--ink);}
.namegrid button:active{background:var(--accent);}
.tsummary{display:flex; gap:8px; text-align:center;}
.tsummary>div{flex:1; background:var(--accent); border-radius:8px; padding:8px 4px;}
.tsummary .v{font-size:18px; font-weight:800; color:var(--brand-dark);}
.tsummary .k{font-size:11px; color:var(--sub);}
ul.mylist{list-style:none;}
ul.mylist li{display:flex; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px dashed var(--line); font-size:13px;}
ul.mylist li .d{font-weight:700; white-space:nowrap;}
ul.mylist li .sp{flex:1;}
/* 確認画面 */
.overlay{position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px;}
.confirm{background:#fff; border-radius:14px; padding:20px; max-width:440px; width:100%;}
.confirm h3{font-size:17px; color:var(--brand-dark); text-align:center; margin-bottom:12px;}
.confirm table{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:16px;}
.confirm th{text-align:left; color:var(--sub); font-size:12px; padding:7px 8px; border-bottom:1px solid var(--line); width:38%; white-space:nowrap;}
.confirm td{padding:7px 8px; border-bottom:1px solid var(--line); font-weight:700;}
.confirm .btns{display:grid; gap:8px;}
/* 給与明細（B5） */
#printArea{display:none;}
.slip{background:#fff; width:176mm; min-height:240mm; padding:14mm 14mm; margin:0 auto 20px; border:1px solid var(--line); font-size:11.5px; line-height:1.55; color:#111;}
.slip h3{text-align:center; font-size:16px; letter-spacing:6px; border-bottom:2px solid #333; padding-bottom:6px; margin-bottom:10px;}
.slip .head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:8px;}
.slip .name{font-size:15px; font-weight:700; border-bottom:1px solid #333; padding:0 16px 2px;}
.slip table{width:100%; border-collapse:collapse; margin-bottom:10px; font-size:11px;}
.slip th{background:#f0f0f0; border:1px solid #999; padding:3px 6px; font-weight:600;}
.slip td{border:1px solid #999; padding:3px 6px;}
.slip td.num{text-align:right; font-variant-numeric:tabular-nums;}
.slip .gtotal{display:flex; justify-content:flex-end; align-items:center; gap:14px; font-size:14px; margin:6px 0 10px;}
.slip .gtotal .amt{font-size:20px; font-weight:800; border-bottom:3px double #333; padding:0 8px;}
.slip .foot{font-size:10px; color:#555; text-align:right;}
@media print{
  @page{size:B5; margin:0;}
  body{background:#fff;}
  body.printing > *:not(#printArea){display:none !important;}
  #printArea{display:block !important;}
  .slip{border:none; margin:0; width:auto; min-height:auto; page-break-after:always;}
  .slip:last-child{page-break-after:auto;}
}
@media (max-width:640px){ main{padding:10px;} .card{padding:12px;} }