@charset "UTF-8"; /*! ========================================================================== * WIWI 配色系統 v1.0 —— 興濠企業有限公司 * -------------------------------------------------------------------------- * 只有顏色。沒有元件、沒有版面、沒有 class 名稱綁定。 * 你的按鈕、卡片、表格要長什麼樣自己決定，顏色從這裡拿就好。 * * 基準：wiwi.com.tw 官網 CSS 與原廠 Logo SVG 實測值（2026-07 稽核）。 * 官網既有色票全部錨定不動，只推導兩個新色（見下方註記 ★）。 * * 核心：感溫雙極。橘＝溫感／發熱，藍綠＝涼感／防曬。 * 兩極不是主色副色，是同一份設計的兩種語意狀態。 * * 整站預設溫感 *
這一區切涼感，可任意巢狀 * 深色（後台工具） * ========================================================================== */:root{--wiwi-orange-50:#FEF9F0;--wiwi-orange-100:#FDF2E1;--wiwi-orange-200:#FBDCAB;--wiwi-orange-300:#F8C46F;--wiwi-orange-400:#F5AE42;--wiwi-orange-500:#F2971B;--wiwi-orange-600:#DD8103;--wiwi-orange-700:#B76A01;--wiwi-orange-800:#8D5202;--wiwi-orange-900:#643A02;--wiwi-teal-50:#F5FBFC;--wiwi-teal-100:#EAF7F9;--wiwi-teal-200:#C4E9EF;--wiwi-teal-300:#96D8E3;--wiwi-teal-400:#6BC9D8;--wiwi-teal-500:#44BCCE;--wiwi-teal-600:#22A1B4;--wiwi-teal-700:#157E8E;--wiwi-teal-800:#0F6471;--wiwi-teal-900:#0B4851;--wiwi-ember-500:#CD4400;--wiwi-ember-600:#A83800;--wiwi-ember-700:#822B00;--wiwi-gray-50:#F7F7F7;--wiwi-gray-100:#F0F0F0;--wiwi-gray-200:#DDDDDD;--wiwi-gray-300:#C4C4C4;--wiwi-gray-400:#8A8A8A;--wiwi-gray-500:#626262;--wiwi-gray-600:#555555;--wiwi-gray-700:#333333;--wiwi-gray-800:#22262A;--wiwi-gray-900:#14181A;--wiwi-white:#FFFFFF;--wiwi-green-500:#1F7A45;--wiwi-green-100:#E6F4EC;--wiwi-amber-500:#8A5A00;--wiwi-amber-100:#FDF3DC;--wiwi-red-500:#C0281F;--wiwi-red-100:#FCEAE8;--wiwi-blue-500:#1E5FA8;--wiwi-blue-100:#E8F0FA;--wiwi-bg:var(--wiwi-white);--wiwi-surface:var(--wiwi-white);--wiwi-surface-sunken:var(--wiwi-gray-50);--wiwi-surface-raised:var(--wiwi-white);--wiwi-text:var(--wiwi-gray-700);--wiwi-text-muted:var(--wiwi-gray-500);--wiwi-text-subtle:var(--wiwi-gray-400);--wiwi-border:var(--wiwi-gray-200);--wiwi-border-strong:var(--wiwi-gray-400);--wiwi-focus-ring:var(--wiwi-ember-500);--wiwi-overlay:rgba(20,24,26,0.55);--wiwi-success:var(--wiwi-green-500);--wiwi-success-tint:var(--wiwi-green-100);--wiwi-warning:var(--wiwi-amber-500);--wiwi-warning-tint:var(--wiwi-amber-100);--wiwi-danger:var(--wiwi-red-500);--wiwi-danger-tint:var(--wiwi-red-100);--wiwi-info:var(--wiwi-blue-500);--wiwi-info-tint:var(--wiwi-blue-100)}[data-theme=dark]{--wiwi-bg:var(--wiwi-gray-900);--wiwi-surface:var(--wiwi-gray-800);--wiwi-surface-sunken:#101315;--wiwi-surface-raised:#2A2F34;--wiwi-text:#ECEEF0;--wiwi-text-muted:#A8AEB4;--wiwi-text-subtle:#7C8288;--wiwi-border:#343A40;--wiwi-border-strong:#6A727A;--wiwi-focus-ring:var(--wiwi-orange-500);--wiwi-overlay:rgba(0,0,0,0.7);--wiwi-success:#4ADE80;--wiwi-success-tint:#16281D;--wiwi-warning:#FBBF4E;--wiwi-warning-tint:#2A2110;--wiwi-danger:#F87171;--wiwi-danger-tint:#2C1717;--wiwi-info:#7DB3F0;--wiwi-info-tint:#14202E}:root,[data-thermal=warm]{--wiwi-thermal-tint:var(--wiwi-orange-100);--wiwi-thermal-tint-strong:var(--wiwi-orange-200);--wiwi-thermal-fill:var(--wiwi-orange-500);--wiwi-thermal-fill-hover:var(--wiwi-orange-400);--wiwi-thermal-on-fill:var(--wiwi-gray-700);--wiwi-thermal-solid:var(--wiwi-ember-500);--wiwi-thermal-solid-hover:var(--wiwi-ember-600);--wiwi-thermal-solid-active:var(--wiwi-ember-700);--wiwi-thermal-on-solid:var(--wiwi-white);--wiwi-thermal-text:var(--wiwi-ember-500);--wiwi-thermal-text-strong:var(--wiwi-ember-600);--wiwi-thermal-border:var(--wiwi-orange-500);--wiwi-thermal-arrow:"▲";--wiwi-thermal-label:"溫感"}[data-thermal=cool]{--wiwi-thermal-tint:var(--wiwi-teal-100);--wiwi-thermal-tint-strong:var(--wiwi-teal-200);--wiwi-thermal-fill:var(--wiwi-teal-500);--wiwi-thermal-fill-hover:var(--wiwi-teal-400);--wiwi-thermal-on-fill:var(--wiwi-gray-700);--wiwi-thermal-solid:var(--wiwi-teal-700);--wiwi-thermal-solid-hover:var(--wiwi-teal-800);--wiwi-thermal-solid-active:var(--wiwi-teal-900);--wiwi-thermal-on-solid:var(--wiwi-white);--wiwi-thermal-text:var(--wiwi-teal-700);--wiwi-thermal-text-strong:var(--wiwi-teal-800);--wiwi-thermal-border:var(--wiwi-teal-500);--wiwi-thermal-arrow:"▼";--wiwi-thermal-label:"涼感"}[data-theme=dark],[data-theme=dark] [data-thermal=warm],[data-theme=dark][data-thermal=warm]{--wiwi-thermal-tint:#2A1E0B;--wiwi-thermal-tint-strong:#3D2C10;--wiwi-thermal-text:var(--wiwi-orange-500);--wiwi-thermal-text-strong:var(--wiwi-orange-500);--wiwi-thermal-border:var(--wiwi-orange-600)}[data-theme=dark] [data-thermal=cool],[data-theme=dark][data-thermal=cool]{--wiwi-thermal-tint:#0C2429;--wiwi-thermal-tint-strong:#113238;--wiwi-thermal-text:var(--wiwi-teal-500);--wiwi-thermal-text-strong:var(--wiwi-teal-500);--wiwi-thermal-border:var(--wiwi-teal-600)}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--wiwi-surface-sunken);color:var(--wiwi-text);font-family:PingFang TC,Microsoft JhengHei,Noto Sans TC,system-ui,sans-serif;font-size:15px;line-height:1.65}h1,h2,h3,h4{margin:0 0 .5em;line-height:1.35}p{margin:0 0 .8em}a{color:var(--wiwi-thermal-text);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:1100px;margin:0 auto;padding:24px 20px 64px}.container--narrow{max-width:720px}@media (max-width:560px){.container{padding:16px 12px 48px}}.grid-2{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px}.grid-work{display:grid;grid-template-columns:1fr 220px;grid-gap:10px;gap:10px}@media (max-width:560px){.grid-2,.grid-work{grid-template-columns:1fr}}.topbar{background:var(--wiwi-surface);border-bottom:1px solid var(--wiwi-border);padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}@media (max-width:560px){.topbar{padding:8px 12px;gap:8px}.login-card{padding:28px 22px}}.topbar__logo{height:48px;display:block}.topbar__title{font-size:17px;font-weight:700;color:var(--wiwi-text)}.topbar__sub{font-size:13px;color:var(--wiwi-text-muted)}.topbar__spacer{flex:1 1}.banner{background:var(--wiwi-thermal-fill);color:var(--wiwi-thermal-on-fill);padding:6px 20px;font-size:13px;font-weight:600}.card{background:var(--wiwi-surface);border:1px solid var(--wiwi-border);border-radius:12px;padding:22px 24px;margin-bottom:18px}.card__title{font-size:16px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}.card__title:before{content:"";width:4px;height:18px;border-radius:2px;background:var(--wiwi-thermal-fill)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;border:1px solid transparent;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit;text-decoration:none;white-space:nowrap}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--wiwi-thermal-solid);color:var(--wiwi-thermal-on-solid)}.btn--primary:hover:not(:disabled){background:var(--wiwi-thermal-solid-hover)}.btn--secondary{background:var(--wiwi-surface);color:var(--wiwi-text);border-color:var(--wiwi-border-strong)}.btn--secondary:hover:not(:disabled){background:var(--wiwi-surface-sunken)}.btn--danger{background:var(--wiwi-danger);color:#fff}.btn--ghost{background:transparent;color:var(--wiwi-thermal-text-strong)}.btn--ghost:hover:not(:disabled){background:var(--wiwi-thermal-tint);text-decoration:none}.btn--sm{padding:5px 12px;font-size:13px;border-radius:6px}.btn:focus-visible{outline:2px solid var(--wiwi-focus-ring);outline-offset:2px}.field{margin-bottom:14px}.field__label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}.field__label .req{color:var(--wiwi-danger);margin-left:2px}.field__hint{font-size:12.5px;color:var(--wiwi-text-muted);margin-top:4px}.input,.select,.textarea{width:100%;font-family:inherit;font-size:14.5px;color:var(--wiwi-text);background:var(--wiwi-surface);border:1px solid var(--wiwi-border-strong);border-radius:8px;padding:9px 12px}.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--wiwi-focus-ring);outline-offset:1px;border-color:var(--wiwi-thermal-border)}.textarea{resize:vertical;min-height:90px}.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:14.5px}.checkbox-row input{width:18px;height:18px;margin-top:3px;accent-color:var(--wiwi-thermal-solid)}.table{width:100%;border-collapse:collapse;font-size:14px}.table th{text-align:left;background:var(--wiwi-surface-sunken);padding:9px 12px;font-weight:700;border-bottom:2px solid var(--wiwi-border);white-space:nowrap}.table td{padding:9px 12px;border-bottom:1px solid var(--wiwi-border);vertical-align:top}.table tr:hover td{background:var(--wiwi-surface-sunken)}.table--plain tr:hover td{background:transparent}.table-wrap{overflow-x:auto}.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}.badge--draft{background:var(--wiwi-surface-sunken);color:var(--wiwi-text-muted);border:1px solid var(--wiwi-border-strong)}.badge--in_progress{background:var(--wiwi-info-tint);color:var(--wiwi-info)}.badge--submitted{background:var(--wiwi-warning-tint);color:var(--wiwi-warning)}.badge--returned{background:var(--wiwi-danger-tint);color:var(--wiwi-danger)}.badge--approved{background:var(--wiwi-success-tint);color:var(--wiwi-success)}.badge--archived{background:var(--wiwi-surface-sunken);color:var(--wiwi-text-muted)}.stepper{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap}.stepper__item{flex:1 1;min-width:128px;border:1px solid var(--wiwi-border);border-radius:10px;padding:10px 12px;background:var(--wiwi-surface);cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;gap:9px}.stepper__item:focus-visible{outline:2px solid var(--wiwi-focus-ring);outline-offset:2px}.stepper__num{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--wiwi-surface-sunken);color:var(--wiwi-text-muted);border:1.5px solid var(--wiwi-border-strong)}.stepper__label{font-size:13.5px;font-weight:600;color:var(--wiwi-text-muted)}.stepper__state{font-size:11.5px;color:var(--wiwi-text-muted)}.stepper__item--active{border-color:var(--wiwi-thermal-border);background:var(--wiwi-thermal-tint)}.stepper__item--active .stepper__num{background:var(--wiwi-thermal-solid);color:var(--wiwi-thermal-on-solid);border-color:var(--wiwi-thermal-solid)}.stepper__item--active .stepper__label{color:var(--wiwi-text)}.stepper__item--done .stepper__num{background:var(--wiwi-success);color:#fff;border-color:var(--wiwi-success)}.alert{border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:14px}.alert--info{background:var(--wiwi-info-tint);color:var(--wiwi-info)}.alert--warning{background:var(--wiwi-warning-tint);color:var(--wiwi-warning)}.alert--danger{background:var(--wiwi-danger-tint);color:var(--wiwi-danger)}.alert--success{background:var(--wiwi-success-tint);color:var(--wiwi-success)}.alert ul{margin:6px 0 0;padding-left:20px}.alert pre{white-space:pre-wrap;margin:6px 0 0;font-family:inherit}.sigpad{border:1px dashed var(--wiwi-border-strong);border-radius:10px;background:var(--wiwi-surface);position:relative}.sigpad canvas{display:block;width:100%;height:160px;touch-action:none;border-radius:10px;cursor:crosshair}.sigpad__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--wiwi-text-subtle);font-size:15px;pointer-events:none}.sigpad__actions{margin-top:6px;display:flex;gap:8px;align-items:center}.sigpad--done{border-style:solid;border-color:var(--wiwi-success)}.sig-preview{max-height:90px}.doc-sheet,.sig-preview{border:1px solid var(--wiwi-border);border-radius:8px;background:#fff}.doc-sheet{color:#333;padding:34px 40px;margin-bottom:22px;font-size:14px;line-height:1.8}.doc-sheet h2{text-align:center;font-size:19px;letter-spacing:2px;margin-bottom:4px}.doc-sheet .doc-company{text-align:center;font-size:15px;letter-spacing:3px;margin-bottom:2px}.doc-sheet .doc-meta{text-align:right;font-size:13px;color:#626262;margin-bottom:12px}.doc-table{width:100%;border-collapse:collapse;margin:10px 0}.doc-table td,.doc-table th{border:1px solid #8a8a8a;padding:7px 10px;font-size:13.5px;text-align:left;vertical-align:top}.doc-table th{background:#F7F7F7;font-weight:700;white-space:nowrap}.doc-section-title{font-weight:700;margin:14px 0 6px}.doc-terms{white-space:pre-wrap;font-size:13.5px}.doc-sign-row{display:flex;gap:40px;margin-top:22px;align-items:flex-end;flex-wrap:wrap}.doc-sign-slot{min-width:220px}.doc-sign-slot .sig-img{height:64px;display:block;margin-bottom:4px}.doc-sign-slot .sig-line{border-bottom:1px solid #333;height:44px;margin-bottom:4px;min-width:200px}.doc-sign-slot .sig-label{font-size:13px;color:#626262}.doc-date-line{text-align:right;margin-top:26px;letter-spacing:1px}.doc-empty{color:#8A8A8A}.review-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--wiwi-surface-sunken);border:1px solid var(--wiwi-border);margin-bottom:14px}.review-bar__label{font-weight:700;font-size:13.5px}.review-bar .input{width:auto;flex:1 1;min-width:180px}.clr-group-title{font-weight:700;font-size:13.5px;color:var(--wiwi-text-muted);margin:14px 0 6px}.clr-item{display:grid;grid-template-columns:auto 1fr auto;grid-gap:10px;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--wiwi-border);border-radius:8px;margin-bottom:6px}.clr-item--checked{background:var(--wiwi-success-tint);border-color:var(--wiwi-success)}.clr-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--wiwi-thermal-solid)}.clr-item__meta{font-size:12.5px;color:var(--wiwi-text-muted)}.kv{display:grid;grid-template-columns:110px 1fr;grid-gap:4px 14px;gap:4px 14px;font-size:14px}.kv dt{color:var(--wiwi-text-muted)}.kv dd{margin:0;font-weight:600}.code-chip{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:20px;font-weight:700;letter-spacing:2px;background:var(--wiwi-thermal-tint);color:var(--wiwi-thermal-text-strong);border:1px dashed var(--wiwi-thermal-border);border-radius:10px;padding:10px 22px;display:inline-block}.events{font-size:13px}.events li{margin-bottom:5px;color:var(--wiwi-text-muted)}.events time{font-family:ui-monospace,Menlo,monospace;font-size:12px;margin-right:8px}.entry-wrap{min-height:100vh;justify-content:center;gap:40px;padding:48px 20px}.entry-head,.entry-wrap{display:flex;flex-direction:column;align-items:center}.entry-head{gap:10px;text-align:center}.entry-title{font-size:26px;font-weight:700;margin:0}.entry-sub{font-size:14px;color:var(--wiwi-text-muted);margin:0}.entry-grid{display:grid;grid-gap:16px;gap:16px;width:100%;max-width:640px;grid-template-columns:1fr 1fr}@media (max-width:560px){.entry-grid{grid-template-columns:1fr}}.entry-card{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--wiwi-surface);border:1px solid var(--wiwi-border);border-radius:14px;padding:30px 24px;text-align:center;text-decoration:none;color:var(--wiwi-text);transition:box-shadow .15s,border-color .15s}.entry-card:hover{text-decoration:none;border-color:var(--wiwi-thermal-border);box-shadow:0 4px 16px rgba(0,0,0,.08)}.entry-card__title{font-size:17px;font-weight:700}.entry-card__desc{font-size:13.5px;color:var(--wiwi-text-muted);line-height:1.6}.modal-overlay{position:fixed;inset:0;z-index:50;background:var(--wiwi-overlay);display:flex;align-items:center;justify-content:center;padding:16px}.modal-card{background:var(--wiwi-surface);border-radius:14px;padding:24px 26px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login-card{background:var(--wiwi-surface);border:1px solid var(--wiwi-border);border-radius:16px;padding:40px 44px;width:100%;max-width:440px}.login-logo{height:72px;display:block;margin:0 auto 14px}.login-title{text-align:center;font-size:20px;margin-bottom:2px}.login-sub{font-size:13.5px;margin-bottom:24px}.login-foot,.login-sub{text-align:center;color:var(--wiwi-text-muted)}.login-foot{margin-top:18px;font-size:13px}@media print{body{background:#fff}.no-print{display:none!important}.doc-sheet{border:none;border-radius:0;margin:0;padding:10mm 6mm;page-break-after:always}.doc-sheet:last-child{page-break-after:auto}.container{max-width:none;padding:0}}