/* =====================================================================
   勤怠管理システム — デザインシステム（freee流：明るいブルー / 白基調 / 余白広め / 高可読）
   ※freeeの思想を参考にした独自実装。商標・ロゴ・アセットは不使用。
   ===================================================================== */
:root{
  /* primary (vivid blue) */
  --pri-700:#1b4fd0; --pri-600:#2864f0; --pri-500:#4178ff; --pri-100:#d8e3ff; --pri-50:#eef3ff;
  /* ink */
  --ink-900:#1b2230; --ink-800:#28303f; --ink-700:#3a4356; --ink-600:#515b70;
  --ink-500:#59637a; --ink-400:#666f87; --ink-300:#c4cad6;  /* 400/500はAA(4.5:1)確保のため濃色化 */
  /* surfaces */
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f8fafc; --line:#e7ebf3; --line-2:#eff2f8;
  /* semantic */
  --ok:#1f9d57; --ok-bg:#e9f7ef; --ok-line:#c2e7d2;
  --warn:#cf7a12; --warn-bg:#fdf3e0; --warn-line:#f3ddb4;
  --danger:#df463b; --danger-bg:#fdebea; --danger-line:#f6cdc9;
  --info:#2864f0; --info-bg:#eef3ff; --info-line:#cfdcff;
  /* work-state */
  --st-work:#1f9d57; --st-break:#cf7a12; --st-done:#939bac; --st-leave:#7159d6; --st-off:#c4cad6;
  /* shape */
  --r-sm:7px; --r:11px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(27,34,48,.05),0 1px 3px rgba(27,34,48,.04);
  --sh-2:0 6px 20px rgba(27,34,48,.08);
  --sh-pop:0 12px 36px rgba(27,34,48,.16);
  /* type */
  --font-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --font-num:"Inter",var(--font-jp);
  --sidebar-w:248px; --topbar-h:62px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-jp);color:var(--ink-800);background:var(--bg);
  font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;text-rendering:optimizeLegibility}
a{color:var(--pri-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.4;color:var(--ink-900);letter-spacing:.01em}
p{margin:0 0 .4em}
svg{width:20px;height:20px;flex:none}            /* アイコン既定サイズ（巨大化防止）。個別CSSが上書き */
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.muted{color:var(--ink-400)} .tiny{font-size:11.5px} .right{text-align:right}.center{text-align:center}

:focus-visible{outline:2.5px solid var(--pri-500);outline-offset:2px;border-radius:5px}
.punch-card :focus-visible{outline-color:#fff;outline-offset:3px}  /* 青地上は白リング（3:1確保） */

/* =========================== app shell =========================== */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column}
.sidebar__brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px}
.brand-mark{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;flex:none}
.brand-mark svg{width:26px;height:26px}
.brand-name{font-weight:800;font-size:15.5px;color:var(--ink-900);line-height:1.2}
.brand-sub{font-size:10px;color:var(--ink-400);letter-spacing:.18em;font-weight:700}
.sidebar__nav{padding:6px 12px;overflow-y:auto;flex:1}
.nav-group{margin:16px 8px 6px;font-size:10.5px;letter-spacing:.12em;color:var(--ink-400);font-weight:800}
.nav-link{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  color:var(--ink-600);font-weight:600;font-size:13.5px;margin:2px 0;transition:background .12s,color .12s;position:relative}
.nav-link:hover{background:var(--surface-2);text-decoration:none;color:var(--ink-900)}
.nav-link.is-active{background:var(--pri-50);color:var(--pri-700);font-weight:700}
.nav-link.is-active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;
  background:var(--pri-600);border-radius:0 3px 3px 0}
.nav-link svg{width:18px;height:18px;opacity:.85}
.nav-link.is-active svg{opacity:1;color:var(--pri-600)}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;border-radius:var(--r-pill);
  font-size:11px;font-weight:800;padding:1px 7px;min-width:20px;text-align:center}
.sidebar__foot{padding:12px 18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-400)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:20}
.topbar__title{font-size:17px;font-weight:800;color:var(--ink-900);line-height:1.2}
.topbar__crumb{color:var(--ink-400);font-size:11.5px;font-weight:600;margin-top:1px}
.topbar__spacer{flex:1}
.topbar__clock{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink-500);font-size:13px;font-weight:600;
  background:var(--surface-2);padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line)}
.topbar__user{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--pri-100);color:var(--pri-700);
  display:grid;place-items:center;font-weight:800;font-size:14px}
.topbar__user .nm{font-size:13px;font-weight:700;line-height:1.2;color:var(--ink-900)}
.topbar__user .rl{font-size:11px;color:var(--ink-400)}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--ink-700)}
/* 通知ベル */
.bell-wrap{position:relative}
.bell-btn{position:relative;width:38px;height:38px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-600)}
.bell-btn:hover{background:var(--surface-2);color:var(--ink-900)}
.bell-btn svg{width:19px;height:19px}
.bell-badge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;
  font-family:var(--font-num);min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--surface)}
.bell-panel{position:absolute;top:46px;right:0;width:340px;max-width:88vw;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-pop);z-index:60;overflow:hidden}
.bell-panel[hidden]{display:none}
.bell-panel__head{padding:12px 16px;border-bottom:1px solid var(--line-2);font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:8px}
.bell-panel__list{max-height:360px;overflow-y:auto}
.bell-item{display:flex;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-2);color:var(--ink-800)}
.bell-item:hover{background:var(--surface-2);text-decoration:none}
.bell-item.is-unread{background:var(--pri-50)}
.bell-item__ic{width:30px;height:30px;border-radius:8px;background:var(--surface-2);color:var(--ink-500);display:grid;place-items:center;flex:none}
.bell-item__ic svg{width:16px;height:16px}
.bell-item__tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.bell-item__tx b{font-size:12.5px;font-weight:700;line-height:1.4}
.bell-item__tx span{font-size:11.5px;color:var(--ink-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bell-item__tx em{font-size:11px;color:var(--ink-400);font-style:normal;font-family:var(--font-num)}
.bell-panel__all{display:block;text-align:center;padding:11px;font-size:12.5px;font-weight:700;color:var(--pri-700);border-top:1px solid var(--line-2)}
.bell-panel__all:hover{background:var(--surface-2);text-decoration:none}
@media(max-width:780px){.bell-panel{position:fixed;top:56px;right:8px;left:8px;width:auto;max-width:none}}
.content{padding:28px;max-width:1340px;width:100%}

/* =========================== page head =========================== */
.page-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:22px}
.breadcrumb{font-size:11.5px;color:var(--ink-400);font-weight:600;margin-bottom:5px}
.breadcrumb a{color:var(--ink-400)}
.page-head .sub{color:var(--ink-500);font-size:13px}
.page-head__actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* =========================== buttons =========================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-family:inherit;
  font-weight:700;font-size:13.5px;padding:9px 17px;border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--surface);color:var(--ink-700);transition:.12s;white-space:nowrap;line-height:1.3}
.btn svg{width:16px;height:16px}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--pri-600);color:#fff;box-shadow:0 1px 2px rgba(40,100,240,.25)}
.btn--primary:hover{background:var(--pri-700)}
.btn--ghost{background:var(--surface);border-color:var(--line);color:var(--ink-700)}
.btn--ghost:hover{background:var(--surface-2);border-color:var(--ink-300)}
.btn--danger{background:var(--danger);color:#fff}.btn--danger:hover{filter:brightness(.95)}
.btn--danger-ghost{background:var(--surface);border-color:var(--danger-line);color:#b8362c}
.btn--danger-ghost:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn--sm{padding:6px 12px;font-size:12.5px}
.btn--block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* =========================== cards / grid =========================== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.card__head{display:flex;align-items:center;gap:9px;padding:15px 20px;border-bottom:1px solid var(--line-2)}
.card__head svg{width:18px;height:18px;color:var(--ink-500)}
.card__head h2{font-size:15px;min-width:0;overflow-wrap:anywhere}
.card__head .more{margin:-8px -4px -8px auto;font-size:12.5px;font-weight:700;padding:8px 4px;display:inline-block}
.card__head .meta{margin-left:auto;font-size:11.5px;color:var(--ink-400)}
.card__body{padding:20px}
.card__body--flush{padding:0}
.grid{display:grid;gap:18px}.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.col-2{grid-column:span 2}

/* =========================== KPI =========================== */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;box-shadow:var(--sh-1)}
.kpi .label{font-size:12px;color:var(--ink-500);font-weight:700;display:flex;align-items:center;gap:7px}
.kpi .label .dot{width:8px;height:8px;border-radius:50%;flex:none}
.kpi .value{font-family:var(--font-num);font-weight:800;font-size:29px;letter-spacing:-.01em;margin-top:7px;
  color:var(--ink-900);font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .value .u{font-size:14px;color:var(--ink-400);font-weight:700;margin-left:3px}
.kpi .value--sm{font-size:22px}
.kpi .delta{font-size:12px;font-weight:700;margin-top:4px;color:var(--ink-400)}
.kpi .delta.up{color:#157a44} .kpi .delta.down{color:#b8362c}  /* 12px小文字でもAA(4.5:1)のトーン */

/* =========================== badges / chips =========================== */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 9px;
  border-radius:var(--r-pill);line-height:1.8}
.badge--ok{background:var(--ok-bg);color:#157a44}
.badge--warn{background:var(--warn-bg);color:#a4600c}
.badge--danger{background:var(--danger-bg);color:#b8362c}
.badge--info{background:var(--info-bg);color:var(--pri-700)}
.badge--muted{background:var(--line-2);color:var(--ink-500)}
.badge--teal,.badge--blue{background:var(--pri-100);color:var(--pri-700)}
.badge--leave{background:#efebfb;color:#5b46c0}  /* 休暇=紫（chip--leaveと同系）。blueとの見分け用 */
/* work-state chip */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 11px;border-radius:var(--r-pill);
  border:1px solid transparent}
.chip .status-dot{width:8px;height:8px}
.chip--work{background:var(--ok-bg);color:#157a44;border-color:var(--ok-line)}
.chip--break{background:var(--warn-bg);color:#a4600c;border-color:var(--warn-line)}
.chip--done{background:var(--line-2);color:var(--ink-600)}
.chip--leave{background:#efebfb;color:#5b46c0}
.chip--off{background:var(--surface-2);color:var(--ink-400);border-color:var(--line)}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.s-working{background:var(--st-work)} .s-break{background:var(--st-break)}
.s-done{background:var(--st-done)} .s-off{background:var(--st-off);box-shadow:inset 0 0 0 1px var(--ink-300)}
.s-leave{background:var(--st-leave)}

/* =========================== alert banner (freee流) =========================== */
.alertbar{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1);margin-bottom:12px}
.alertbar .ab-ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none}
.alertbar .ab-ic svg{width:19px;height:19px}
.alertbar .ab-body{flex:1;min-width:0}
.alertbar .ab-body b{font-size:13.5px;color:var(--ink-900)}
.alertbar .ab-body span{font-size:12.5px;color:var(--ink-500)}
.alertbar .ab-act{margin-left:auto}
.alertbar--danger{border-color:var(--danger-line);background:var(--danger-bg)}
.alertbar--danger .ab-ic{background:#fff;color:var(--danger)}
.alertbar--warn{border-color:var(--warn-line);background:var(--warn-bg)}
.alertbar--warn .ab-ic{background:#fff;color:var(--warn)}
.alertbar--info .ab-ic{background:var(--pri-50);color:var(--pri-600)}

/* =========================== shortcuts (freee流タイル) =========================== */
.shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.shortcut{display:flex;flex-direction:column;gap:9px;padding:16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink-800);transition:.12s;box-shadow:var(--sh-1)}
.shortcut:hover{text-decoration:none;border-color:var(--pri-500);box-shadow:var(--sh-2);transform:translateY(-1px)}
.shortcut .sc-ic{width:40px;height:40px;border-radius:11px;background:var(--pri-50);color:var(--pri-600);display:grid;place-items:center}
.shortcut .sc-ic svg{width:21px;height:21px}
.shortcut b{font-size:13.5px;color:var(--ink-900)}
.shortcut span{font-size:11.5px;color:var(--ink-400)}

/* =========================== tables (高可読) =========================== */
.table-wrap{overflow-x:auto}
/* 長い月次テーブル用: 縦スクロール上限を与えて thead sticky を発動させる */
.table-wrap--v{max-height:max(320px,calc(100vh - var(--topbar-h) - 120px));overflow:auto}
@supports(height:100dvh){.table-wrap--v{max-height:max(320px,calc(100dvh - var(--topbar-h) - 120px))}}
/* border-collapse:collapse では固定中のthの罫線が置き去りになるブラウザ癖への対策 */
.table-wrap--v .tbl thead th{box-shadow:0 1px 0 var(--line-2)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-2);white-space:nowrap;vertical-align:middle}
.tbl thead th{background:var(--surface-2);color:var(--ink-500);font-size:11.5px;font-weight:800;position:sticky;top:0;
  letter-spacing:.03em;z-index:1}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:var(--pri-50)}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.wd-sun{color:var(--danger)}.wd-sat{color:var(--info)}
.tbl .row-hol{background:#fdf1f0}.tbl .row-hol:hover{background:#fbe6e4}
.tbl .row-sat{background:#eff4ff}.tbl .row-sat:hover{background:#e3ecff}
.tbl .row-nat{background:#fdf3e6}.tbl .row-nat:hover{background:#fbe9d3}   /* 国民の祝日=橙系（土曜の青・法定休日の赤と区別） */
.tbl tfoot td{padding:12px 14px;font-weight:800;background:var(--surface-2);border-top:2px solid var(--line);color:var(--ink-900)}

/* =========================== forms =========================== */
.form-row{margin-bottom:16px}
.form-row label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-700);margin-bottom:6px}
.input,select.input,textarea.input{width:100%;font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--ink-300);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink-900);transition:.12s;line-height:1.4}
.input::placeholder{color:var(--ink-400)}
.input:focus{border-color:var(--pri-500);outline:none;box-shadow:0 0 0 3px var(--pri-50)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hint{font-size:11.5px;color:var(--ink-400);margin-top:5px}
.req{color:var(--danger);font-size:11px;margin-left:3px}
.dl{display:grid;grid-template-columns:140px 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.dl dt{background:var(--surface-2);padding:11px 14px;font-size:12.5px;font-weight:700;color:var(--ink-600);margin:0}
.dl dd{background:var(--surface);padding:11px 14px;margin:0;font-size:13.5px}

/* =========================== flash =========================== */
.flash{padding:12px 16px;border-radius:var(--r-sm);font-weight:700;font-size:13.5px;margin-bottom:16px;
  display:flex;align-items:center;gap:9px;border:1px solid transparent}
.flash svg{width:19px;height:19px}
.flash--success{background:var(--ok-bg);color:#157a44;border-color:var(--ok-line)}
.flash--error{background:var(--danger-bg);color:#b8362c;border-color:var(--danger-line)}
.flash--info{background:var(--info-bg);color:var(--pri-700);border-color:var(--info-line)}
.flash[tabindex="-1"]:focus{outline:2px solid currentColor;outline-offset:2px}

/* =========================== punch (signature) =========================== */
.punch-card{background:linear-gradient(135deg,var(--pri-600),var(--pri-700));color:#fff;border-radius:var(--r-lg);
  padding:26px 28px;position:relative;overflow:hidden;margin-bottom:10px;
  display:grid;grid-template-columns:1fr minmax(230px,300px);gap:26px;align-items:stretch}
.punch-main{position:relative;z-index:1;min-width:0}
.punch-log{position:relative;z-index:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;min-height:0;
  min-width:0}   /* ★打刻メモの長い連続文字列が列を押し広げてカードが画面外へ出るのを防ぐ */
.punch-log__h{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:#fff;margin-bottom:6px}
.punch-log__h a{color:#fff;font-size:12px;font-weight:600;padding:6px 4px;margin:-6px -4px}
.punch-log ul{list-style:none;margin:0;padding:0;overflow-y:auto}
.punch-log li{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.punch-log li:last-child{border-bottom:0}
.punch-log .t{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:800;font-size:16px;color:#fff;min-width:46px}
.punch-log .lb{font-size:12.5px;color:#fff;font-weight:600;min-width:0;overflow-wrap:anywhere}
.punch-log li{min-width:0}   /* URL等の切れ目が無いメモも折り返して枠内に収める */
.punch-log .empty-log{font-size:12px;color:#fff;line-height:1.6;padding:8px 0}
@media(max-width:780px){.punch-card{grid-template-columns:1fr;gap:18px}}
/* 打刻メモ（青背景の上：文字・プレースホルダーを白系に） */
.punch-memo{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);color:#fff}
.punch-memo::placeholder{color:rgba(255,255,255,.8)}
.punch-memo:focus{border-color:rgba(255,255,255,.8);box-shadow:0 0 0 3px rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.22)}
.punch-card::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.punch-now{position:relative;z-index:1}
.punch-date{font-size:13px;color:#eef3ff;font-weight:700;letter-spacing:.03em}
.punch-clock{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:800;font-size:58px;line-height:1.05;
  letter-spacing:-.02em;margin:2px 0 6px}
.punch-clock .sec{font-size:30px;color:#dbe6ff}
.punch-state{display:inline-flex;align-items:center;gap:8px;background:rgba(10,26,74,.25);padding:5px 13px;
  border-radius:var(--r-pill);font-weight:700;font-size:13px}
.punch-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px;position:relative;z-index:1}
.punch-btn{border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:16px;padding:18px 12px;border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:.12s}
.punch-btn .ic{width:26px;height:26px}
.punch-btn small{font-weight:600;font-size:11px;opacity:.85}
.punch-btn--in{background:#fff;color:var(--pri-700)}.punch-btn--in:hover{background:#f0f4ff}
.punch-btn--out{background:#fff;color:#c2410c}.punch-btn--out:hover{background:#fff7f0}
.punch-btn--bs,.punch-btn--be{background:rgba(10,26,74,.25);color:#fff}
.punch-btn--bs:hover,.punch-btn--be:hover{background:rgba(10,26,74,.35)}
.punch-btn:disabled{opacity:.4;cursor:not-allowed}
/* 送信中スピナー（押したボタンにis-sending。:disabledの薄化を打ち消して「処理中」を明示） */
.punch-btn{position:relative}
.punch-btn.is-sending{opacity:1;color:transparent}
.punch-btn.is-sending .ic,.punch-btn.is-sending small{visibility:hidden}
.punch-btn.is-sending::after{content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;border-radius:50%;
  border:3px solid rgba(40,100,240,.25);border-top-color:var(--pri-600);animation:punchspin .7s linear infinite}
.punch-btn--bs.is-sending::after,.punch-btn--be.is-sending::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes punchspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .punch-btn.is-sending{color:inherit}
  .punch-btn.is-sending .ic,.punch-btn.is-sending small{visibility:visible}
  .punch-btn.is-sending::after{content:none}
}
.punch-today{display:flex;gap:22px;margin-top:20px;position:relative;z-index:1;flex-wrap:wrap}
.punch-today .pt{font-size:12px;color:#eef3ff;font-weight:600}
.punch-today .pt b{display:block;font-family:var(--font-num);font-size:19px;color:#fff;font-weight:800;margin-top:2px}

/* progress / presence / chart */
.bar{height:8px;background:var(--line-2);border-radius:var(--r-pill);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--pri-500);border-radius:var(--r-pill)}
.bar--warn>span{background:var(--warn)} .bar--danger>span{background:var(--danger)} .bar--ok>span{background:var(--ok)}
.presence{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pbox{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--surface);box-shadow:var(--sh-1)}
.pbox .n{font-family:var(--font-num);font-size:32px;font-weight:800;color:var(--ink-900);line-height:1}
.pbox .l{font-size:12px;color:var(--ink-500);font-weight:700;display:flex;align-items:center;gap:7px;margin-top:6px}
.chart{display:flex;align-items:flex-end;gap:10px;height:160px;padding-top:10px}
.chart .cbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.chart .cbar .bar-v{width:62%;max-width:36px;background:linear-gradient(180deg,var(--pri-500),var(--pri-600));border-radius:6px 6px 0 0;min-height:3px;transition:height .3s}
.chart .cbar .cl{font-size:11px;color:var(--ink-400);font-weight:700}
.chart .cbar .cv{font-size:11px;font-weight:800;font-family:var(--font-num);color:var(--ink-700)}

/* =========================== login =========================== */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-art{background:linear-gradient(150deg,var(--pri-600),var(--pri-700));color:#fff;padding:56px;display:flex;
  flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-art::after{content:"";position:absolute;right:-90px;bottom:-90px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)}
.login-art h1{font-size:30px;line-height:1.45;position:relative;z-index:1;color:#fff}
.login-art p{color:#d5e1ff;position:relative;z-index:1;max-width:430px}
.login-feat{display:flex;flex-direction:column;gap:15px;position:relative;z-index:1}
.login-feat .lf{display:flex;gap:13px;align-items:flex-start}
.login-feat .lf .ic{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.login-feat .lf .ic svg{width:19px;height:19px}
.login-feat .lf b{display:block;font-size:14px}
.login-feat .lf span{font-size:12.5px;color:#d5e1ff}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--surface)}
.login-box{width:100%;max-width:370px}
.login-box .lg-brand{display:flex;align-items:center;gap:11px;margin-bottom:28px}
.login-box h2{font-size:23px;margin-bottom:5px}
.demo-accounts{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface-2)}
.demo-accounts h4{font-size:12px;color:var(--ink-500);margin-bottom:8px}
.demo-accounts .acc{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
.demo-accounts code{background:var(--pri-50);color:var(--pri-700);padding:1px 7px;border-radius:5px;font-weight:700;font-family:var(--font-num)}

/* timeline / seg / misc */
.tl{list-style:none;padding:0;margin:0}
.tl li{display:flex;gap:13px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.tl li>div{min-width:0}   /* ★打刻メモの長い連続文字列が枠外へ出るのを防ぐ */
.tl li:last-child{border-bottom:0}
.tl .tl-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--pri-50);color:var(--pri-600)}
.tl .tl-ic svg{width:17px;height:17px}
.tl .tl-t{font-family:var(--font-num);font-weight:800;font-size:15px;color:var(--ink-900)}
.tl .tl-l{font-size:12px;color:var(--ink-400);overflow-wrap:anywhere}
/* 打刻メモ：入力させたのに読む手段が無かったので、打刻履歴・管理者の勤怠画面に表示する */
.stamp-memo{display:flex;align-items:flex-start;gap:5px;margin-top:4px;padding:4px 8px;border-left:2px solid var(--pri-300,#a9c1fb);
  background:var(--pri-50);border-radius:0 var(--r-sm,4px) var(--r-sm,4px) 0;font-size:12px;color:var(--ink-700,#3b4453);line-height:1.55;word-break:break-word}
.stamp-memo svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--pri-600)}
.stamp-memo--inline{display:block;margin-top:3px;padding:2px 6px;font-size:11px}
.tl li.tl-date{display:block;padding:9px 0 3px;border-bottom:0;font-size:11.5px;font-weight:700;color:var(--ink-500);letter-spacing:.02em}
.tl li.tl-date:not(:first-child){border-top:1px solid var(--line);margin-top:5px}
.tl .tl-today{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:var(--pri-600);background:var(--pri-50);border-radius:var(--r-pill);padding:1px 7px;vertical-align:1px}
.seg{display:inline-flex;background:var(--line-2);border-radius:var(--r-pill);padding:3px}
.seg a{padding:6px 15px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;color:var(--ink-500)}
.seg a.is-active{background:var(--surface);color:var(--pri-700);box-shadow:var(--sh-1)}
.seg a:hover{text-decoration:none}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:10px 16px;font-size:13px;font-weight:700;color:var(--ink-500);border-bottom:2px solid transparent;margin-bottom:-1px;flex:none;white-space:nowrap}
.tabs a.is-active{color:var(--pri-700);border-bottom-color:var(--pri-600)}
.tabs a:hover{text-decoration:none;color:var(--ink-800)}
.empty{text-align:center;color:var(--ink-400);padding:44px 20px}
.empty svg{width:44px;height:44px;opacity:.45;margin-bottom:8px;color:var(--ink-300)}
.list-split{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.list-split:last-child{border-bottom:0}
.avatar-sm{width:30px;height:30px;border-radius:50%;background:var(--pri-100);color:var(--pri-700);display:inline-grid;place-items:center;font-weight:800;font-size:11.5px;flex:none}
.month-nav{display:inline-flex;align-items:center;gap:8px}
.month-nav .ym{font-weight:800;font-size:16px;font-family:var(--font-num);min-width:104px;text-align:center;color:var(--ink-900)}
.iconbtn{width:36px;height:36px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-600);transition:.12s}
.iconbtn:hover{background:var(--surface-2);color:var(--ink-900)}
.iconbtn svg{width:18px;height:18px}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--line-2);color:var(--ink-600)}
.backdrop{display:none}
/* PWAインストール案内バナー */
.pwa-install{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:200;
  width:min(460px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:13px 14px;display:flex;gap:12px;align-items:center}
.pwa-install__ic{width:46px;height:46px;border-radius:12px;flex:none}
.pwa-install__bd{flex:1;min-width:0}
.pwa-install__bd b{font-size:13.5px;color:var(--ink-900);display:block;line-height:1.4}
.pwa-install__bd span{font-size:12px;color:var(--ink-500);line-height:1.5}
.pwa-install__act{display:flex;gap:4px;align-items:center;flex:none}
.pwa-install__x{background:none;border:0;cursor:pointer;color:var(--ink-400);font-size:20px;line-height:1;padding:2px 6px}
.pwa-install__x:hover{color:var(--ink-700)}
/* iOS「ホーム画面に追加」図解ガイド */
.pwa-guide{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center;background:rgba(15,23,42,.5)}
.pwa-guide[hidden]{display:none}
.pwa-guide__card{background:var(--surface);width:min(440px,100%);border-radius:18px 18px 0 0;
  padding:20px 20px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--sh-pop);animation:pwaUp .24s ease}
@media(min-width:480px){.pwa-guide{align-items:center}.pwa-guide__card{border-radius:18px}}
@keyframes pwaUp{from{transform:translateY(18px);opacity:.5}to{transform:none;opacity:1}}
.pwa-guide__hd{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pwa-guide__hd b{font-size:15px;color:var(--ink-900)}
.pwa-guide__hd img{width:34px;height:34px;border-radius:9px}
.pwa-step{display:flex;gap:12px;align-items:flex-start;padding:11px 2px;border-top:1px solid var(--line)}
.pwa-step__n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--pri-50);color:var(--pri-600);font-size:12.5px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.pwa-step__tx{font-size:13.5px;color:var(--ink-800);line-height:1.55;flex:1}
.pwa-step__tx .gi{vertical-align:-4px;margin:0 3px}
.pwa-guide__note{font-size:12px;color:var(--ink-500);margin:12px 0 14px;line-height:1.6}
.pwa-guide__close{width:100%;justify-content:center}
@media(prefers-reduced-motion:reduce){.pwa-guide__card{animation:none}}
.stack{display:flex;flex-direction:column;gap:18px}
.filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filterbar .input,.filterbar select.input{width:auto;min-width:150px}

/* =========================== responsive =========================== */
@media(max-width:1040px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .shortcuts{grid-template-columns:repeat(2,1fr)}
  .presence{grid-template-columns:repeat(2,1fr)}
  .col-2{grid-column:auto}
  .login-wrap{grid-template-columns:1fr}.login-art{display:none}
  /* インラインで grid-template-columns を持つスプリット系は1列に折返す（インライン指定がメディアクエリを上書きする問題への対処） */
  [class*="grid"][style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1fr 1fr 1fr auto"]{grid-template-columns:1fr!important}
}
@media(max-width:780px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:60;width:84vw;max-width:300px;transform:translateX(-100%);
    visibility:hidden;transition:transform .2s,visibility .2s;box-shadow:var(--sh-pop)}  /* 閉時はTab到達も読み上げも不可 */
  .app.nav-open .sidebar{transform:none;visibility:visible}
  .app.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(20,28,48,.45);z-index:50}
  .menu-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0}
  .content{padding:16px}
  .grid-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}.dl dt{border-top:1px solid var(--line-2)}
  .punch-clock{font-size:46px}
  .topbar{padding:0 16px}
  .topbar__clock{display:none}
  .topbar__title,.topbar__crumb{display:none}   /* モバイルは見切れるので非表示（メニューはハンバーガー） */
  .topbar__user .rl{display:none}                /* 役職は省略してスペース確保 */
  .page-head h1{font-size:19px}
  /* 入力欄は16px＝iOS Safari のフォーカス時オートズーム防止（PCは14px維持） */
  .input,select.input,textarea.input{font-size:16px}
  /* タップ領域を推奨44pxへ（アイコンサイズは据え置き） */
  .iconbtn{width:44px;height:44px}
  .btn--sm{min-height:40px}
  /* スマホでは表の中で縦スクロールさせない（入れ子スクロールで操作しづらいため）。
     高さ制限を外してページ全体で縦に読み、表の中は横スクロールだけにする(#R11)。
     縦スクロール枠が無くなるので thead の固定も解除する（ページ追従だと上部バーに重なる）。 */
  .table-wrap--v{max-height:none;overflow-x:auto;overflow-y:hidden}
  .table-wrap--v .tbl thead th{position:static}

  /* 幅広テーブルは横スクロール時に先頭(日付)列を固定して照合しやすく。
     ★iOS Safari は border-collapse:collapse のセルに position:sticky を付けると
       罫線の再描画に失敗し、スクロール中にテーブルがガタつく（Androidは正常）。
       sticky を使うこの幅だけ separate にして、罫線をセル自身に描かせる。 */
  table.tbl{border-collapse:separate;border-spacing:0}   /* 元の table.tbl と同じ詳細度で上書き */
  .table-wrap--v .tbl thead th{box-shadow:none}   /* separate では th の border-bottom が出るので二重線を防ぐ */
  .tbl th:first-child,.tbl td:first-child{position:sticky;left:0;background:var(--surface);z-index:2}
  .tbl thead th:first-child{background:var(--surface-2);z-index:3}
  .tbl tfoot td:first-child{background:var(--surface-2)}
  .tbl .row-hol td:first-child{background:#fdf1f0}
  .tbl .row-sat td:first-child{background:#eff4ff}
  .tbl .row-nat td:first-child{background:#fdf3e6}
}

/* #R11: スマホで警告バナーが縦1文字ずつに潰れるのを防ぐ。
   ab-act（長いラベルのnowrapボタン）が幅を独占して ab-body が0幅になるため、
   狭い幅では折り返してボタンを次の行に落とす。 */
@media(max-width:780px){
  .alertbar{flex-wrap:wrap;align-items:flex-start}
  .alertbar .ab-body{flex:1 1 60%}
  .alertbar .ab-act{margin-left:0;width:100%;justify-content:center;white-space:normal;height:auto;padding:9px 12px}
}

/* #R11: 備考/メモ列は最小幅を確保する。確保しないと列数の多い表で幅数十pxまで潰れ、
   メモが1文字ずつ改行されて極端な縦長セルになる（テーブル自体は横スクロールするので支障なし）。 */
.tbl .note-col{min-width:200px;max-width:340px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:780px){.tbl .note-col{min-width:170px}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 今日の行ハイライト（勤務表系）。※モバイルの先頭列sticky上書きより後勝ちが必要なため必ず末尾に置く */
.tbl .row-today td{background:#e6efff}
.tbl .row-today:hover td{background:#dbe7ff}
.tbl .row-today td:first-child{background:#dbe7ff;color:var(--pri-700);font-weight:800}
/* #R9-H9: 375px幅対応。grid-5はKPI5枚が5列のままはみ出していた */
@media(max-width:780px){.grid-5{grid-template-columns:repeat(2,1fr)}.tabs{overflow-x:auto;flex-wrap:nowrap}}
/* #R10-J14: 打刻メモの改行を画面でも維持（CSVとの見え方差を無くす） */
.stamp-memo{white-space:pre-wrap}
/* ログイン画面の青背景上ではブランド文字を白系に（濃紺文字だと視認性が悪い） */
.login-art .brand-name{color:#fff}
.login-art .brand-sub{color:rgba(255,255,255,.72)}
.login-art .lf b{color:#fff}
.login-art .lf span:not(.ic){color:rgba(255,255,255,.78)}
/* 打刻位置のピン（絵文字をやめてSVG化）。行の文字サイズに馴染む大きさに */
.ic-pin{width:14px;height:14px;display:inline-block;vertical-align:-2px;color:var(--danger)}