/* Well 線上課程 2.0 · Figma MztfqbEJGWfZ1EoTRI69FY
   Color 2554:305 · Type 2554:369 · Components 2554:429 · RWD 2554:498.
   Palette refinement: 8SLlq0i7F2PkGGnry2cz2f / 2397:5918, white space + blue/green/yellow/orange.
   Existing selectors and data workflows are retained. */
:root{
  --well-navy-900:#032639;--well-navy-800:#003864;
  --well-blue-600:#256ca6;--well-blue-500:#4891e6;--well-blue-300:#96bcfa;--well-blue-100:#e9f3ff;
  --well-orange:#ffad45;--well-yellow:#fff09e;--well-purple:#52956b;
  --well-ice:#f2f8fc;--well-mist:#edf4f7;--well-lavender:#edf6e2;
  --well-cream:#fff9db;--well-peach:#fff4e5;--well-mint:#f0f7df;
  --c-black:var(--well-navy-900);--c-blue:var(--well-navy-800);--c-grayblue:#526f88;
  --blue-900:var(--well-navy-900);--blue-700:var(--well-navy-800);--blue-500:var(--well-blue-500);
  --blue-300:var(--well-blue-300);--blue-200:#c5dbf7;--blue-100:var(--well-blue-100);
  --n-900:var(--well-navy-900);--n-700:#5a6573;--n-500:#5a6573;--n-300:#9aa3b0;
  --a-orange:var(--well-orange);--a-yellow:var(--well-yellow);--a-purple:var(--well-purple);
  --bg-blue:var(--well-ice);--bg-mint:var(--well-mint);--bg-green:var(--well-mint);
  --bg-yellow:var(--well-cream);--bg-peach:var(--well-peach);--bg-lavender:var(--well-lavender);
  --font-head:'Gen Jyuu Gothic','PingFang TC','Noto Sans TC',sans-serif;
  --font-body:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --page-max:1280px;--radius:24px;--radius-sm:13px;--radius-lg:32px;
  --shadow-s:0 2px 8px #03263904;--shadow-m:0 12px 36px #0326390c;
  --gut:clamp(20px,4.45vw,64px);
}
html{scroll-padding-top:160px;}
body{font-size:15px;line-height:1.8;word-break:normal;overflow-wrap:break-word;padding-bottom:0;}
h1,h2,h3,h4{color:var(--well-navy-900);letter-spacing:.01em;text-wrap:balance;}
h1{font-size:clamp(30px,3.6vw,45px);line-height:1.4;}
h2{font-size:clamp(26px,3.3vw,45px);line-height:1.45;}
h3{font-size:clamp(22px,2.2vw,28px);line-height:1.5;}
h4{font-size:22px;line-height:1.5;}
.lead{font-size:17px;line-height:2;}
.eyebrow{color:var(--well-navy-800);font-size:12px;letter-spacing:.16em;}
.muted{font-size:14px;}
.sec{padding-block:clamp(36px,5.5vw,80px);}
.site-head{border-color:#e9e9e9;box-shadow:none;}
.head-row{min-height:88px;justify-content:space-between;gap:24px;flex-wrap:nowrap;}
.head-row .brand{min-width:0;}
.head-row .tabs{margin-left:auto;width:auto;flex:0 0 auto;order:0;padding:0;}
.site-head .brand{flex-wrap:wrap;gap:12px;}
.site-head .brand img{height:36px;}
.site-head .brand b{font-size:15px;}
.tabs{gap:6px;}
.tab{font-size:14px;border-color:transparent;padding:10px 20px;font-weight:500;}
.tab[aria-selected="true"]{background:#e4f1fb;color:#205b88;box-shadow:none;font-weight:700;}
.tab:hover{background:var(--well-ice);}
.tab[aria-selected="true"]:hover{background:#d3e8f8;color:#205b88;}
.subtabs{border-top:1px solid #e9e9e9;padding-block:12px;}
.subtab{min-height:44px;background:transparent;font-weight:500;}
.subtab[aria-selected="true"]{background:var(--well-lavender);color:var(--well-navy-900);}
.hero{background:white;padding:40px 0 52px;min-height:0;isolation:isolate;}
.hero h1{font-size:clamp(32px,3.6vw,48px);line-height:1.3;max-width:900px;}
.hero .lead{max-width:690px;margin-top:10px!important;}
.hero .eyebrow{margin-bottom:12px;}
.hero .eyebrow::before,.handoff-panel>.eyebrow::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--well-orange);margin-right:10px;}
.well-art{position:absolute;width:100%;height:100%;inset:0;overflow:hidden;z-index:-1;pointer-events:none;}
.well-art img{position:absolute;object-fit:contain;width:auto;height:auto;}
/* 扁 hero：裝飾集中在右側一小簇，不再往下溢出 */
.well-art .art-capsule{position:absolute;background:#e4f1fb;width:300px;height:120px;right:-30px;top:-46px;border-radius:200px;transform:rotate(14deg);z-index:-1;}
.well-art .art-circle{width:150px;height:150px;right:-40px;top:-30px;}
.well-art .art-sun{width:78px;height:78px;right:17%;top:30px;transform:rotate(-18deg);}
.well-art .art-star{width:54px;height:54px;right:9%;bottom:26px;transform:rotate(10deg);}
.well-art .art-yellow{width:260px;height:260px;right:0;bottom:-190px;transform:rotate(54deg);}
.well-art .art-green{width:190px;height:190px;left:-90px;bottom:-135px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.btn{font-size:14px;min-height:44px;padding:11px 22px;box-shadow:none;touch-action:manipulation;}
.btn-primary{background:var(--well-blue-600);color:white;}
.btn-primary:hover{background:#205b88;box-shadow:none;}
.btn-ghost{border-color:#9aa3b0;}
.btn-ghost:hover{background:var(--well-ice);border-color:var(--well-navy-800);}
.btn-sm{min-height:44px;font-size:13px;}
.btn-mail{background:var(--well-cream);color:var(--well-navy-900);border-color:#e5bf49;}
.btn-mail:hover{background:var(--well-yellow);}
.card{border-color:#e5e9ef;box-shadow:none;padding:28px;}
.card-tint{background:var(--well-cream);}
#flowCards{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
#flowCards .card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:288px;border:0;overflow:hidden;padding:28px 24px;}
#flowCards .card:nth-child(1){background:var(--well-ice);}
#flowCards .card:nth-child(2){background:var(--well-mint);}
#flowCards .card:nth-child(3){background:var(--well-cream);}
#flowCards .card:nth-child(4){background:white;border:1px solid #eedfcb;}
#flowCards .pill{align-self:flex-start;background:#ffffffb3;color:var(--well-navy-900);}
#flowCards h3{margin-top:24px!important;}
#flowCards .btn{align-self:flex-start;margin-top:auto!important;background:transparent;padding-inline:16px;}
#flowCards .card>p:last-of-type{margin-bottom:24px;}
.sec-tint{background:var(--well-ice);}
.step{border:1px solid #dbe0e3;border-radius:24px;padding:clamp(22px,3vw,40px);box-shadow:none;}
.step:hover{border-color:var(--well-blue-300);box-shadow:none;}
.step-no{padding:5px 14px;font-size:13px;background:#e4f1fb;color:#205b88;}
.step h4{font-size:clamp(21px,2vw,28px);}
.step figure{background:var(--well-ice);padding:clamp(12px,2vw,24px);border-radius:16px;}
.step figure img{margin:auto;max-height:680px;object-fit:contain;}
.step figure figcaption{text-align:center;}
.note{border-left:0;padding:16px 20px;font-size:14px;}
.note-key{background:var(--well-mint);color:#315827;border-color:#65bc2f;}
.note-info{background:var(--well-ice);}
input,select,textarea{border-color:#9aa3b0;}
input:focus-visible,select:focus-visible,textarea:focus-visible,:focus-visible{outline:3px solid #2f6bd8;outline-offset:3px;}
button,a,input,select,textarea{scroll-margin-block:160px 32px;}
th{background:var(--well-mist);}
td,th{font-variant-numeric:tabular-nums;}
.site-foot{background:var(--well-mist);}
.skip-link{position:fixed;top:8px;left:16px;z-index:200;padding:12px 20px;background:var(--well-navy-900);color:white;border-radius:999px;transform:translateY(-200%);}
.skip-link:focus{transform:translateY(0);}
.handoff-panel{padding:clamp(24px,3vw,40px);background:var(--well-ice);border:1px solid #e0edf5;border-radius:24px;margin-bottom:36px;}
.handoff-panel h2{font-size:clamp(25px,2.5vw,34px);margin:10px 0;}
.handoff-panel>p:not(.eyebrow){max-width:70ch;color:var(--n-700);}
.handoff-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.handoff-details{margin-top:24px;border-top:1px solid #03263920;padding-top:16px;}
.handoff-details summary{cursor:pointer;min-height:44px;font-weight:700;}
.handoff-details ol{padding-left:24px;}
.handoff-details li+li{margin-top:10px;}
.hr-start{background:var(--well-cream);}
.responsibilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:12px;}
.responsibilities dt{font-weight:700;margin-bottom:8px;}
.responsibilities dd{margin:0;color:var(--n-700);font-size:14px;}
.completion-hint{margin-top:14px;background:var(--well-mint);color:#315827;border-radius:12px;padding:12px 16px;font-size:14px;}
.completion-hint b{display:inline-block;margin-right:8px;}
.zoom-button{display:block;width:100%;border:0;padding:0;background:transparent;cursor:zoom-in;border-radius:13px;}
#lb{border:0;padding:24px;background:transparent;max-width:100vw;max-height:100dvh;margin:auto;overflow:auto;overscroll-behavior:contain;}
#lb::backdrop{background:#032639e8;}
#lbClose{display:block;position:sticky;top:0;margin:0 0 12px auto;z-index:1;}
#lbImg{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 110px);object-fit:contain;}
/* No decorative left rails on rounded components; preserve full keyboard focus outlines. */
.hl-item.hl-debrief{border-left-width:1px;}
.wv-tag,.cal-d .ev{border-left:0;}
/* The Figma palette and component language applied to the existing admin shell. */
.admin-shell{background:#fafcfd;--side-w:264px;}
.side{background:#f3f8f5;border-right:1px solid #e0ebe5;padding:28px 18px;}
.side .brand{color:var(--well-navy-900);line-height:1.7;padding-bottom:28px;}
.side .brand img{background:white;border-radius:10px;padding:4px;width:38px;height:38px;}
.side .nav-grp{color:#5d7166;font-size:12px;letter-spacing:.1em;padding-top:24px;}
.side .nav-i{color:#405c50;border-radius:999px;padding:12px 16px;min-height:48px;margin:3px 0;font-size:14px;}
.side .nav-i:hover{background:#e6f0e9;}
.side .nav-i[aria-current="page"]{background:#dfedc8;color:#345624;box-shadow:none;}
.side .side-foot{color:#5d7166;font-size:12px;}
.topbar{background:white;backdrop-filter:none;border-color:#e5e9ef;padding:28px 36px;flex-wrap:wrap;}
.topbar h1{font-size:28px;font-weight:700;}
.topbar .hint{font-size:13px;}
.awrap{padding:36px;}
.unit>.lead{max-width:78ch;}
.admin-shell .card{box-shadow:0 3px 12px #03263903;}
.admin-shell h3{font-size:24px;}
.ord button{min-width:44px;min-height:44px;}
@media(max-width:1024px){
  #flowCards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .head-row{gap:16px;}
  .hero{padding-top:32px;}
}
@media(max-width:820px){
  .admin-shell{grid-template-columns:1fr;}
  .side{padding:12px 16px;max-height:75dvh;overflow-y:auto;}
  .side .brand{padding:0 0 0 4px;font-size:14px;}
  .side .burger{background:var(--well-cream);border:0;border-radius:50%;}
  .topbar{position:static;padding:24px 20px;gap:8px;}
  .topbar h1{font-size:24px;flex-basis:100%;}
  .awrap{padding:24px 20px;}
}
@media(max-width:600px){
  .responsibilities{grid-template-columns:1fr;}
  .brand b{white-space:normal;}
  .head-row{gap:8px;min-height:76px;}
  .site-head .brand{gap:6px;flex:1 1 auto;}
  .site-head .brand img{height:auto;width:36px;flex:none;}
  .site-head .brand b{font-size:12px;white-space:normal;flex:1;}
  .head-row .tabs{gap:2px;}
  .head-row .tab{padding:8px 10px;font-size:13px;min-width:44px;}
  .site-head .brand .firm{font-size:12px;max-width:100%;border:0;padding-left:0;}
  .hero{min-height:0;padding:28px 0 48px;}
  .hero h1{font-size:36px;}
  .hero .lead{font-size:16px;line-height:1.85;}
  .hero-actions .btn{font-size:13px;padding-inline:18px;}
  .well-art .art-capsule{width:200px;height:80px;top:-30px;}
  .well-art .art-circle{width:100px;height:100px;top:-30px;right:-30px;}
  .well-art .art-sun{width:52px;height:52px;right:12%;top:20px;}
  .well-art .art-star{width:38px;height:38px;right:6%;bottom:14px;}
  .well-art .art-yellow{width:170px;height:170px;bottom:-125px;right:-20px;}
  .well-art .art-green{width:130px;height:130px;bottom:-85px;left:-50px;}
  #flowCards{grid-template-columns:1fr;}
  #flowCards .card{min-height:260px;padding:28px;}
  .card{padding:22px;}
  .g3{grid-template-columns:1fr;}
  h4{font-size:20px;}
  .step-head{flex-wrap:nowrap;}
  .step h4{flex:1;min-width:0;}
  .note{padding:14px 16px;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation:none!important;transition:none!important;}}

/* Important onsite survey: full outline + light background, never a left accent rail. */
.step-important{background:#fffdf1;border:2px solid #e8d985;}
.step-important:hover{border-color:#ccb955;}
.important-label{display:inline-block;margin:0 0 16px;padding:5px 14px;background:var(--well-yellow);color:#66510d;border-radius:999px;font-size:13px;font-weight:700;}
.step-important .step-no{background:var(--well-yellow);color:#66510d;}
.survey-entry{margin-top:24px;background:white;border:1px solid #e6e9df;border-radius:20px;padding:clamp(16px,2.5vw,28px);}
.survey-entry-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.survey-entry-head h3{font-size:24px;margin-bottom:8px;}
.survey-entry-head p{color:var(--n-700);font-size:14px;}
.survey-entry-head .btn{flex-shrink:0;}
.survey-entry figure{padding:0;background:transparent;margin-top:20px;}
.survey-entry figure img{width:100%;height:auto;border-radius:12px;}
.survey-entry figcaption{margin-top:12px;}
@media(max-width:600px){.survey-entry-head .btn{width:100%;}.step-important{padding:20px;}}

.cloud-status{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:20px 0;padding:14px 18px;background:var(--well-cream);border:1px solid #eee4bd;border-radius:14px;font-size:14px;color:#66510d;}
.cloud-status p{margin:0;flex:1 1 240px;}
.cloud-status[data-state="ok"]{background:var(--well-mint);border-color:#dae6ce;color:#345624;}
.cloud-status[data-state="saving"]{background:var(--well-ice);border-color:#dbe9f4;color:#205b88;}
.cloud-status[hidden],.cloud-status button[hidden],.cloud-status a[hidden],.cloud-status p[hidden]{display:none;}

/* ---- 登入狀態與版本紀錄（2026-09-23） ---- */
.cloud-status .cloud-user{flex:1 1 100%;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--n-700);}
.cloud-status .cloud-user a{color:var(--well-navy-800);}
.cloud-status[data-state="noaccess"]{background:var(--well-peach);border-color:#f2d6b5;color:#7a4a12;}
.cloud-status .cloud-user[hidden]{display:none;}
.sw-hist{border:0;padding:0;background:transparent;max-width:min(680px,calc(100vw - 32px));width:100%;}
.sw-hist::backdrop{background:rgba(3,38,57,.35);}
.sw-hist .box{background:#fff;border-radius:var(--radius);padding:26px;max-height:min(80vh,720px);display:flex;flex-direction:column;gap:14px;}
.sw-hist h3{font-size:20px;margin:0;}
.sw-hist .list{overflow:auto;display:grid;gap:10px;padding:2px;}
.sw-hist .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid #e5e9ef;border-radius:14px;padding:12px 16px;font-size:14px;}
.sw-hist .row.named{background:var(--well-cream);border-color:#eee4bd;}
.sw-hist .row.restore{background:var(--well-mint);border-color:#dae6ce;}
.sw-hist .row.current{border-color:var(--well-blue-500);}
.sw-hist .row .meta{flex:1 1 240px;min-width:0;}
.sw-hist .row .meta b{display:block;}
.sw-hist .row .meta small{color:var(--n-700);}
.sw-hist .foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--n-700);}
.sw-hist .empty{color:var(--n-700);font-size:14px;padding:12px 0;}