/* =========================================================
   人資系統　外殼樣式
   ---------------------------------------------------------
   色階刻意跟夥伴入口網站一致（--ink / --line / --paper），
   兩個網站看起來像同一家公司的東西，只是分開部署。
   班表本身的樣式在 shift.css。
   ========================================================= */

:root{
  --ink:#0B0B0C;
  --ink-2:#2E2E31;
  --ink-3:#6B6B70;
  --ink-4:#9A9A9F;
  --line:#E4E3E0;
  --line-2:#EFEEEB;
  --paper:#FBFBF9;
  --paper-2:#F4F3F0;
  --white:#FFFFFF;

  --serif:"Noto Serif TC","Songti TC","Source Han Serif TC","PingFang TC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Helvetica Neue",Arial,sans-serif;
  --maxw:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
code{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:.92em;background:var(--paper-2);padding:1px 5px}
pre{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:12.5px;background:var(--paper-2);
  border:1px solid var(--line);padding:13px 15px;overflow-x:auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- 頁首 ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:22px;padding:0 22px;height:60px;flex-wrap:wrap}
.top__brand{display:flex;flex-direction:column;justify-content:center;text-decoration:none;line-height:1.25}
.top__brand b{font-family:var(--serif);font-size:17px;letter-spacing:.08em;font-weight:700}
.top__brand i{font-style:normal;font-size:9px;letter-spacing:.22em;color:var(--ink-4)}
.top__nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.top__nav a{padding:6px 13px;text-decoration:none;color:var(--ink-3);font-size:13.5px;border:1px solid transparent}
.top__nav a:hover{color:var(--ink);border-color:var(--line)}
.top__nav a.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}
.top__right{display:flex;align-items:center;gap:10px}
.who{font-size:12.5px;color:var(--ink-3);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.btn{padding:6px 13px;border:1px solid var(--line);background:var(--white);cursor:pointer;font-size:13px}
.btn:hover{border-color:var(--ink)}
.btn--sm{padding:5px 11px;font-size:12.5px}
.btn--solid{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.btn--solid:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn--ghost{background:transparent}

/* ---------- 主區 ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:30px 22px 80px}
.page{margin:0 0 26px;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.page__eyebrow{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-4)}
.page h1{font-family:var(--serif);font-size:clamp(24px,4vw,32px);font-weight:700;letter-spacing:.04em;
  margin:6px 0 8px;line-height:1.15}
.page p{margin:0;color:var(--ink-3);font-size:13.5px;max-width:68ch}

.card{background:var(--white);border:1px solid var(--line);padding:22px 24px;max-width:76ch}
.card h3{margin:24px 0 8px;font-size:15px;letter-spacing:.02em}
.card h3:first-child{margin-top:0}
.card p{margin:0 0 14px;font-size:13.5px;line-height:1.9}
.card .muted{color:var(--ink-3)}

/* ---------- 頁尾 ---------- */
.foot{border-top:1px solid var(--line);padding:20px 22px;display:flex;gap:18px;flex-wrap:wrap;
  justify-content:space-between;font-size:12px;color:var(--ink-4);max-width:var(--maxw);margin:0 auto}
.foot a{text-decoration:none;border-bottom:1px solid var(--line-2)}
.foot a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- 登入頁 ---------- */
body.is-gate{background:var(--ink)}
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px}
.gate__box{width:100%;max-width:360px;color:var(--paper)}
.gate__brand{text-align:center;margin-bottom:26px}
.gate__brand b{display:block;font-family:var(--serif);font-size:24px;letter-spacing:.34em;
  text-indent:.34em;font-weight:700}
.gate__brand i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.28em;
  color:rgba(251,251,249,.45);margin-top:8px}
.gate__hint{text-align:center;font-size:13px;color:rgba(251,251,249,.62);line-height:1.9;margin:0 0 24px}
.gate__err{text-align:center;font-size:12.5px;color:#E8A6A2;margin:0 0 16px}
.gate label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(251,251,249,.45);margin:0 0 7px}
.gate input{width:100%;padding:11px 13px;margin:0 0 18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);color:var(--paper);font:inherit}
.gate input:focus{outline:0;border-color:var(--paper);background:rgba(255,255,255,.09)}
.gate input::placeholder{color:rgba(251,251,249,.28)}
.gate__go{width:100%;padding:12px;background:var(--paper);color:var(--ink);border:0;cursor:pointer;
  font-weight:700;letter-spacing:.14em;font-size:13.5px}
.gate__go:hover{background:#fff}
.gate__go:disabled{opacity:.5;cursor:not-allowed}
.gate__forgot{display:block;margin:22px auto 0;background:none;border:0;cursor:pointer;font-size:12px;
  color:rgba(251,251,249,.45);border-bottom:1px solid rgba(255,255,255,.2);padding:0 0 2px}
.gate__forgot:hover{color:var(--paper)}

/* ---------- 提示 ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);
  color:var(--paper);padding:11px 20px;font-size:13px;z-index:90;letter-spacing:.02em;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.45)}

@media (max-width:640px){
  .top{height:auto;padding:12px 16px;gap:12px}
  .top__nav{order:3;width:100%}
  main{padding:22px 16px 70px}
}

/* ---------- 彈窗（薪資明細用）----------
   ui.js 是跟 portal 共用的同一份，所以 class 名稱要對得上：
   .overlay / .modal / .modal__hd / __bd / __ft / __x */
.overlay{position:fixed;inset:0;background:rgba(11,11,12,.55);z-index:70}
.modal{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;
  background:var(--white);border:1px solid var(--line);box-shadow:0 24px 60px -16px rgba(0,0,0,.4)}
.modal__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.modal__hd h3{margin:0;font-family:var(--serif);font-size:19px;letter-spacing:.04em;font-weight:700}
.modal__x{width:30px;height:30px;border:1px solid var(--line);background:transparent;cursor:pointer;
  flex:none;position:relative}
.modal__x::before,.modal__x::after{content:'';position:absolute;left:8px;top:14px;width:12px;height:1.5px;
  background:var(--ink)}
.modal__x::before{transform:rotate(45deg)}
.modal__x::after{transform:rotate(-45deg)}
.modal__x:hover{border-color:var(--ink)}
.modal__bd{padding:20px 22px}
.modal__bd h4{font-family:var(--mono,ui-monospace,Menlo,monospace)}
.modal__ft{padding:14px 22px 20px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line)}