/* _formrender.css — 外部表單三套版型（doc 正式文件／event 活動／simple 簡潔）。guest 網站與平台預覽共用。v1 20261024；v2 20261024 加員工入口（st-*） */
.fr-wrap{--acc:#1D3B6E;--ink:#1F2328;--mut:#5B636C;--rule:#DDE1E6;--bg:#FFFFFF;--card:#FFFFFF;--in-bg:#FFFFFF;--in-bd:#B8BFC7;--rad:4px;--err:#B23B32;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:var(--bg);
  -webkit-text-size-adjust:100%;line-height:1.6;box-sizing:border-box}
.fr-wrap *{box-sizing:border-box}
.fr-wrap:lang(ja){font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif}
.fr-wrap.t-event{--acc:#FF5A1F;--ink:#F2F2F2;--mut:#BDBDBD;--rule:#2E2E2E;--bg:#111111;--card:#1C1C1C;--in-bg:#1C1C1C;--in-bd:#3A3A3A;--rad:10px;--err:#FF8A80}
.fr-wrap.t-simple{--acc:#1B5FBF;--bg:#F3F4F6;--card:#FFFFFF;--in-bd:#C9CED4;--rad:10px}

/* 頁首／頁尾 */
.fr-top{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--rule)}
.fr-logo{width:36px;height:36px;flex:0 0 auto;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:var(--rad)}
.t-event .fr-logo{display:none}
.fr-co{display:flex;flex-direction:column;gap:1px;min-width:0}
.fr-co b{font-size:15px} .fr-co span{font-size:12px;color:var(--mut)}
.t-event .fr-top{border-bottom:0}
.t-event .fr-co b{font-family:"Archivo","Noto Sans TC",sans-serif;font-weight:800;font-size:20px;letter-spacing:.04em}
.t-simple .fr-top{border-bottom:0}
.fr-main{max-width:640px;margin:0 auto;padding:24px 16px 40px}
.fr-foot{max-width:640px;margin:0 auto;padding:20px 16px 32px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--mut)}
.fr-foot a{color:var(--mut)}
.fr-title{margin:0 0 8px;font-size:24px;font-weight:700;line-height:1.35}
.t-event .fr-title{font-weight:900}
.fr-sub{margin:0 0 16px;font-size:13px;color:var(--mut)}

/* 卡片外框 */
.t-simple .fr-card,.t-event .fr-card{background:var(--card);border-radius:16px;padding:20px}
.t-doc .fr-card{padding:0}

/* 段落 */
.fr-intro{margin:0 0 8px;font-size:14px;color:var(--mut);line-height:1.75;white-space:pre-line}
.fr-sec{display:flex;flex-direction:column;gap:16px;padding-top:28px}
.fr-sh{display:flex;align-items:baseline;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:8px}
.fr-sh h2{margin:0;font-size:17px;font-weight:700}
.fr-sn{font-size:13px;font-weight:700;color:var(--acc)}
.t-event .fr-sh{border-bottom:0;padding-bottom:0}.t-event .fr-sn{display:none}.t-event .fr-sh h2{font-size:20px;font-weight:900}
.t-simple .fr-sh{border-bottom:0;padding-bottom:0}.t-simple .fr-sn{display:none}
.t-simple .fr-sec{background:var(--card);border-radius:16px;padding:20px;margin-top:14px}
.fr-sd{margin:-8px 0 0;font-size:13px;color:var(--mut);white-space:pre-line}

/* 欄位 */
.fr-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.fr-lab{font-size:14px;font-weight:500;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.fr-req{color:var(--err)}
.fr-pii{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--mut);border:1px solid var(--rule);border-radius:3px;padding:1px 6px}
.fr-in{width:100%;min-height:48px;border:1px solid var(--in-bd);border-radius:var(--rad);background:var(--in-bg);color:var(--ink);padding:0 12px;font:inherit;font-size:16px}
.fr-in:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
select.fr-in{padding:0 10px;appearance:auto}
.fr-ta{min-height:110px;padding:10px 12px;resize:vertical}
.fr-ro{background:rgba(127,127,127,.10)!important;color:var(--ink)}
.fr-mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.05em}
.fr-help{font-size:12px;color:var(--mut)}
.fr-err{font-size:13px;color:var(--err);font-weight:500}
.fr-err:empty{display:none}
.fr-note{font-size:14px;line-height:1.75;white-space:pre-line;background:rgba(127,127,127,.08);border-radius:var(--rad);padding:12px 14px}
.fr-fs{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.fr-fs legend{padding:0;margin-bottom:10px}
.fr-opts{display:flex;flex-direction:column;gap:8px}
.fr-opt{display:flex;align-items:center;gap:10px;min-height:46px;border:1px solid var(--in-bd);border-radius:var(--rad);padding:0 12px;font-size:15px;cursor:pointer;background:var(--in-bg)}
.fr-opt input{width:18px;height:18px;accent-color:var(--acc);flex:0 0 auto}
.fr-opt:has(input:checked){border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.fr-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fr-chips .fr-opt{justify-content:center;padding:0;position:relative}
.fr-chips .fr-opt input{position:absolute;opacity:0;pointer-events:none}
.fr-chips .fr-opt:has(input:checked){background:var(--acc);color:#fff;font-weight:700}
.t-event .fr-chips .fr-opt:has(input:checked){color:#111}
.fr-agree{display:flex;gap:10px;font-size:13px;line-height:1.7;cursor:pointer}
.fr-agree input{width:18px;height:18px;margin-top:3px;accent-color:var(--acc);flex:0 0 auto}
.fr-bank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fr-bank select{grid-column:1/-1}
.fr-hide{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fr-up{display:flex;align-items:center;justify-content:center;gap:8px;min-height:72px;border:1px dashed var(--in-bd);border-radius:var(--rad);background:rgba(127,127,127,.06);font-size:14px;cursor:pointer}
.fr-up-i{font-size:20px;color:var(--acc)}
.fr-up:focus-within{outline:2px solid var(--acc)}
.fr-files{display:flex;flex-direction:column;gap:6px}
.fr-files:empty{display:none}
.fr-file{display:flex;align-items:center;gap:8px;justify-content:space-between;border:1px solid var(--rule);border-radius:var(--rad);padding:8px 10px;font-size:13px}
.fr-file.busy{opacity:.7}
.fr-file-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-x{min-height:36px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--rad);background:transparent;color:var(--mut);font:inherit;font-size:12px;cursor:pointer;flex:0 0 auto}
.fr-sigbox{position:relative;border:1px solid var(--in-bd);border-radius:var(--rad);background:#fff;overflow:hidden}
.fr-sig{display:block;width:100%;height:150px;cursor:crosshair}
.fr-sig-h{position:absolute;left:12px;top:10px;font-size:12px;color:#8A929B;pointer-events:none}
.fr-sig-clr{position:absolute;right:6px;top:6px;background:#fff}
.fr-group{display:flex;flex-direction:column;gap:12px}
.fr-gi{border:1px solid var(--in-bd);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px}
.fr-gi-h{display:flex;align-items:center;justify-content:space-between;font-weight:700}
.fr-add{min-height:50px;border:1px dashed var(--acc);border-radius:12px;background:transparent;color:var(--acc);font:inherit;font-size:15px;font-weight:700;cursor:pointer}

/* 按鈕與狀態 */
.fr-btn{width:100%;min-height:54px;border:0;border-radius:var(--rad);background:var(--acc);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.t-event .fr-btn{color:#111;font-weight:900;letter-spacing:.06em;border-radius:12px}
.fr-btn:disabled{opacity:.55;cursor:default}
.fr-btn2{min-height:44px;padding:0 16px;border:1px solid var(--in-bd);border-radius:var(--rad);background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.fr-actions{display:flex;flex-direction:column;gap:10px;margin-top:32px}
.fr-tip{margin:0;font-size:12px;color:var(--mut);text-align:center}
.fr-msg{padding:12px 14px;border-radius:var(--rad);font-size:14px;line-height:1.7}
.fr-msg.err{background:rgba(178,59,50,.10);color:var(--err)}
.fr-msg.ok{background:rgba(30,122,80,.10);color:#1E7A50}
.t-event .fr-msg.ok{color:#7FD8A6}
.fr-msg:empty{display:none}
.fr-gate{display:flex;flex-direction:column;gap:16px;padding-top:40px}
.fr-gate .fr-in{min-height:54px;font-size:18px;letter-spacing:.2em}
.fr-kv{border:1px solid var(--rule);border-radius:var(--rad)}
.fr-kv div{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--rule);font-size:14px}
.fr-kv div:last-child{border-bottom:0}
.fr-kv span{color:var(--mut)}
.fr-done-i{width:56px;height:56px;border-radius:50%;border:2px solid #1E7A50;color:#1E7A50;display:flex;align-items:center;justify-content:center;font-size:26px}
.fr-kv-pre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule);font-size:13px;margin-top:8px}
.fr-hero{height:200px;border-radius:12px;background:var(--card);border:1px solid var(--rule);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;margin-bottom:16px}
.fr-hero::before{content:"";position:absolute;top:-50px;right:-50px;width:200px;height:200px;border-radius:50%;background:var(--acc)}
.fr-hero>*{position:relative}
.fr-hero b{font-size:24px;font-weight:900;line-height:1.25}
.fr-hero span{font-size:13px;color:var(--mut)}
.fr-list{display:flex;flex-direction:column;gap:10px}
.fr-item{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:16px;text-decoration:none;color:var(--ink)}
.fr-item b{font-size:16px} .fr-item small{font-size:12px;color:var(--mut)}
.fr-item div{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.fr-badge{font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;background:#FAF3E2;color:#8A6510;flex:0 0 auto}
.fr-badge.done{background:#E8F2EC;color:#1E7A50}
.fr-pv-banner{background:#FAF3E2;color:#8A6510;font-size:12px;padding:6px 12px;text-align:center}
@media (max-width:380px){.fr-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 員工入口：出勤、零用金 */
.st-back{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--mut);text-decoration:none;margin-bottom:4px}
.st-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.st-tile{display:flex;flex-direction:column;gap:4px;min-height:88px;justify-content:center;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:14px;text-decoration:none;color:var(--ink)}
.st-tile b{font-size:16px} .st-tile small{font-size:12px;color:var(--mut)}
.st-month{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 12px}
.st-month .fr-btn2{min-width:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:20px;padding:0}
.st-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.st-chip{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;min-width:110px}
.st-chip small{font-size:12px;color:var(--mut)} .st-chip b{font-size:18px}
.st-days{display:flex;flex-direction:column;background:var(--card);border-radius:14px;overflow:hidden}
.st-day{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.st-day:last-child{border-bottom:0}
.st-day.off .st-dd b{color:var(--err)}
.st-dd{flex:0 0 52px;display:flex;flex-direction:column;align-items:flex-start}
.st-dd b{font-size:20px;line-height:1.1} .st-dd small{font-size:11px;color:var(--mut)} .st-dt{color:var(--err)!important}
.st-dl{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.st-dl>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
.st-dl small{font-size:12px;color:var(--mut)}
.st-k{font-size:12px;font-weight:700;color:var(--mut);min-width:40px}
.st-r{border-radius:999px;padding:1px 8px;background:rgba(127,127,127,.12)}
.st-done{background:#E8F2EC!important;color:#1E7A50!important} .st-pending{background:#FAF3E2!important;color:#8A6510!important} .st-rejected{background:rgba(178,59,50,.10)!important;color:var(--err)!important}
.st-fund{cursor:pointer;flex-wrap:wrap}
.st-fund input{width:20px;height:20px;accent-color:var(--acc);flex:0 0 auto}
.st-amt{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto}
.st-amt b{font-size:16px} .st-amt small{font-size:12px;color:var(--mut)}
.st-add{margin-top:16px}