/* 雇主管理學堂｜跨頁共用元件（各頁原有版型仍保留在頁面內） */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#16243d;color:#fff;padding:10px 14px;border-radius:10px;font-weight:800;transition:top .15s}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #174ea6;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 權益與求助專區 */
.help-box{background:#fff;border:1px solid #f1d3a6;border-radius:18px;padding:20px 22px;box-shadow:0 8px 25px #16243d0a}
.help-box h2,.help-box h3{margin:0 0 6px;font-size:19px;line-height:1.4}
.help-box>p{margin:0 0 12px;color:#65738b;font-size:14px}
.help-lines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.help-lines li{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start}
.help-tel{display:grid;place-items:center;min-height:44px;border-radius:11px;background:#fff1d8;color:#8a4b00;font-weight:900;font-size:17px;text-decoration:none}
.help-lines strong{display:block;font-size:14px;line-height:1.45}
.help-lines small{display:block;color:#65738b;font-size:13px;line-height:1.5}
.help-rights{margin:14px 0 0;padding:12px 14px 12px 32px;background:#f6f8fc;border-radius:12px;font-size:14px;color:#40536f}
.help-rights li{margin:3px 0}

/* 教材頁新增元件 */
.key-question{margin:14px 0 18px;padding:14px 16px;border-radius:12px;background:#eef4ff;border:1px solid #c9d9f5;color:#1f3f7a}
.key-question strong{display:block;font-size:13px;letter-spacing:.06em;color:#2d6cdf;margin-bottom:2px}
.notice-bar{margin:14px 0 0;padding:12px 15px;border-radius:12px;background:#fff7ea;border:1px solid #f7d7a6;color:#715021;font-size:14px}
.notice-bar[hidden]{display:none}
.pending-note{margin:0 0 16px;padding:12px 15px;border-radius:12px;background:#fff1d8;color:#7d5a1e;font-size:14px}
.lesson-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:16px;border-top:1px dashed #e1e8f1}
.lesson-nav a{color:#2d6cdf;font-weight:800;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.lesson-nav a[aria-disabled="true"]{visibility:hidden}

/* 進度（首頁用） */
.real-progress[data-empty="true"] .progress i{width:0!important}

@media print{
  .top,.nav,header,.topbar,footer,.side,.actions,.toolbar,.pager,.skip-link,.lesson-nav,.hero-img{display:none!important}
  body{background:#fff;font-size:12pt}
  .layout{display:block!important}
  .content{border:0!important;box-shadow:none!important;padding:0!important}
}
@media(max-width:850px){.layout>.side{display:none}}

/* 單堂獨有內容 vs 模組通用內容 */
.action-box{margin:12px 0 16px;padding:14px 16px;border-radius:12px;background:#e4f7f2;border:1px solid #9fdccd;color:#0b5a4b}
.action-box strong{display:block;font-size:13px;letter-spacing:.06em;color:#087764;margin-bottom:2px}
.shared-label{margin:6px 0 4px;font-size:13px;color:#65738b}
.shared-label[hidden],.action-box[hidden]{display:none}
.module-kit{margin:22px 0 4px;border:1px solid #e1e8f1;border-radius:14px;padding:4px 16px;background:#fbfcfe}
.module-kit summary{cursor:pointer;font-weight:800;color:#2d6cdf;min-height:44px;display:flex;align-items:center}
.module-kit[open]{padding-bottom:14px}.module-kit h3{font-size:16px!important;margin:14px 0 6px!important}
@media print{.module-kit{border:0;padding:0}.module-kit summary{display:none}}
.related-guides{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:#65738b}.related-guides[hidden]{display:none}.related-guides a{display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;border-radius:99px;background:#eef4ff;color:#2d6cdf;font-weight:800}

/* 同站頁面與工作台分頁：短暫淡入淡出，避免切換時畫面跳閃。 */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:130ms ease-in both academy-page-out}
  ::view-transition-new(root){animation:190ms ease-out both academy-page-in}
  .panel.active{animation:190ms ease-out academy-page-in}
}
@keyframes academy-page-out{to{opacity:0}}
@keyframes academy-page-in{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}}