/* 乙級職安衛（OSH_B）作答頁的火榜外框：共用導覽列（同 FS_PROMO／FSEQ_TECH 頁面的 nav-css）＋線條圖示＋手機觸控尺寸。
   作答區沿用原站 app.css／pages.css 的冷白藏青；這裡只管頂列，選擇器都掛在 nav.nav 底下，不碰作答區。 */
@import url("/assets/print.css") print;
nav.nav{--ink:#15130f;--flame:#c0392b;--promo:#1e3a5f;position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid #dfe4ec;display:flex;align-items:center;padding:0 20px;height:52px;font-family:var(--sans);letter-spacing:0;line-height:1.5}
nav.nav a{color:inherit}
nav.nav .nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:6px}
nav.nav .nav-icon{width:28px;height:28px;background:var(--flame);border-radius:7px;color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
nav.nav .nav-name{font-weight:800;font-size:16px;color:var(--ink)}
nav.nav .nav-tag{background:#eaf1fb;color:var(--promo);font-size:12px;font-weight:700;padding:2px 8px;border-radius:5px;margin-right:12px;white-space:nowrap}
nav.nav .nav-links{display:flex;align-items:center}
nav.nav .nav-a{color:#5f5a4f;font-size:14px;font-weight:500;padding:0 11px;height:52px;display:flex;align-items:center;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap}
nav.nav .nav-a:hover,nav.nav .nav-a.on{color:var(--ink);border-bottom-color:var(--flame)}
nav.nav .nav-gap{flex:1}
nav.nav .nav-login{height:auto;padding:6px 11px;border-bottom:0}
nav.nav .nav-menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #dfe4ec;border-radius:8px;background:transparent;color:var(--ink);font-size:16px;cursor:pointer;margin-right:6px;flex-shrink:0}
nav.nav .nav-switch{position:relative;height:52px;display:flex;align-items:center}
nav.nav .nav-switch-btn{cursor:pointer;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:0 14px;min-height:36px;display:inline-flex;align-items:center;border-radius:8px;text-decoration:none;white-space:nowrap}
nav.nav .nav-switch-btn::after{content:'▾';font-size:14px;margin-left:5px}
nav.nav .nav-switch-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #dfe4ec;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:8px;min-width:190px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .15s;z-index:250}
nav.nav .nav-switch:hover .nav-switch-menu,nav.nav .nav-switch:focus-within .nav-switch-menu{opacity:1;visibility:visible;transform:translateY(0)}
nav.nav .nav-switch-item{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:7px;font-size:14px;font-weight:600;color:#15130f;text-decoration:none}
nav.nav .nav-switch-item:hover{background:#f3f4f6}
nav.nav .nav-switch-item.on{color:#c0392b}
nav.nav .nav-switch-grp{font-size:12px;font-weight:600;letter-spacing:.04em;color:#5b6577;padding:8px 12px 2px}
nav.nav .nav-switch-sep{border-top:1px solid #e3e7ee;margin-top:4px}
nav.nav a:focus-visible,nav.nav button:focus-visible,nav.nav .nav-switch:focus-visible{outline:2px solid #1e3a5f;outline-offset:2px;border-radius:6px}
@media(max-width:900px){
  nav.nav{padding:0 12px}
  nav.nav .nav-tag{display:none}
  nav.nav .nav-links .nav-a:not(.on){display:none}
  nav.nav .nav-menu-btn{display:flex}
  nav.nav.menu-open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:6px 8px 10px;border-bottom:1px solid #dfe4ec;box-shadow:0 14px 28px rgba(0,0,0,.12);z-index:320}
  nav.nav.menu-open .nav-links .nav-a{display:flex;height:44px;border-bottom:2px solid transparent;border-radius:8px}
  nav.nav.menu-open .nav-links .nav-a.on{background:rgba(127,127,127,.13)}
}
@media(max-width:820px){
  nav.nav .nav-brand{min-height:44px;padding:0 6px;margin-left:-6px}
  nav.nav>a.nav-a{min-height:44px;height:44px;padding:0 9px;display:inline-flex;align-items:center}
  nav.nav .nav-switch-btn{min-height:44px;padding:0 11px}
  nav.nav .nav-name{white-space:nowrap}
  nav.nav .nav-links .nav-a.on{padding:0 6px;min-width:44px;justify-content:center}
}
@media(max-width:400px){nav.nav .nav-switch-btn{padding:0 7px}}

/* 線條圖示（同 /assets/design-fix.css） */
.hb-ic{display:inline-block;width:1.05em;height:1.05em;background-color:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;vertical-align:-.17em;flex:none}
.hb-menu{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h16'/%3E%3C/svg%3E")}
.hb-lock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}

/* 分級鎖：未開通／等級不夠時的說明框（作答區配色） */
.lockbox{background:var(--surface);border:1px solid var(--line-2);border-left:4px solid var(--navy);border-radius:var(--r);padding:var(--s-4) var(--s-5);margin:0 0 var(--s-4)}
.lockbox h2,.lockbox h3{font:700 var(--t-md)/1.4 var(--sans);margin:0 0 var(--s-2);display:flex;align-items:center;gap:8px}
.lockbox p{color:var(--fg-2);font-size:var(--t-sm);margin:0 0 var(--s-3)}
.lockbox .lock-btns{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.samplebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);background:var(--sunk);border-radius:var(--r);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-4);font-size:var(--t-sm);color:var(--fg-2)}
.samplebar a{color:var(--navy-2);font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.syncnote{font-size:var(--t-xs);color:var(--fg-3)}

/* 術科全庫載入前先保留高度，載入後換成題卡或說明框時頁尾不跳動 */
.pqlist{min-height:60vh;align-content:start}
.samplebar>span{flex:1 1 100%}

/* 學科解析（作答後按看解析才載入） */
.expl-row{margin-top:var(--s-3)}
.expl{margin-top:var(--s-3)}
.expl-dl{margin:0;display:grid;gap:var(--s-2)}
.expl-dl div{display:grid;grid-template-columns:5.5em 1fr;gap:var(--s-3)}
.expl-dl dt{font-weight:700;color:var(--fg-2);font-size:var(--t-sm)}
.expl-dl dd{margin:0}
@media(max-width:600px){.expl-dl div{grid-template-columns:1fr;gap:2px}}
/* 2026-10-09 低等級 #6：減少動態偏好（關動畫、轉場、平滑捲動） */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* 2026-10-09 低等級 #8（cls）：≤900px 時 site-nav.js 會在導覽列後插入 45px 的「消防 › 產品名」麵包屑，整個 main 被往下推（768/820 寬量到 CLS 0.05）。
   同 design-fix.css 的作法：導覽後第一個元素先留 45px，麵包屑插入後改由它自己佔位，同一幀淨位移為 0。 */
@media (max-width:900px){
  nav.nav:has(.nav-tag):not(:has(+ .hb-mcrumb)) + *{margin-top:45px}
}
/* 2026-10-11 UX #1：手機橫向溢出（stats 131px、calc 448px）。未登入時 main 是直向 flex，.wrap 的 margin:auto 讓寬度改成依內容，
   公式選單（.fchips 橫向捲動）與長條表把整欄撐寬。區段一律占滿欄寬、可以縮；長條表外面包 .tscroll 在自己的框裡橫捲。 */
main#main>.wrap{width:100%;min-width:0}
.calc-pick,.fchips{min-width:0;max-width:100%}
.tscroll{max-width:100%;-webkit-overflow-scrolling:touch}