/*
 * 站台.css — 首頁以外的所有頁面共用（範例、挑戰、遊戲、角色、網頁、關卡頁）
 *
 * 首頁刻意把樣式內嵌在 HTML 裡（零請求、零 JavaScript，Lighthouse 100 分）。
 * 這幾頁不一樣：它們一定要讀玩家的進度，本來就不能被公用快取，
 * 而且使用者會在這幾頁之間跳來跳去，共用一支可以永久快取的 CSS 划算得多。
 * 代價是這裡重複了一份設計代幣（顏色、字體）。四十行的重複，
 * 換掉一個建置步驟，這個交易划算。
 */

:root {
   color-scheme: dark;

   --底:     #12131a;
   --面:     #1a1c26;
   --面亮:   #22252f;
   --線:     #2f3444;
   --字:     #e2e5ec;
   --字淡:   #a8b0c4;
   --字更淡: #868ea3;
   --主色:   #ffb454;
   --主色深: #1a1206;
   --綠:     #7ddc7d;
   --藍:     #6bb8ff;
   --紫:     #c39aff;
   --紅:     #ff7b7b;

   --寬: 74rem;
   --圓角: 12px;
   --字體: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
           "Hiragino Sans", "Noto Sans JP", system-ui, -apple-system, sans-serif;
   --等寬: "JetBrains Mono", "Cascadia Code", Consolas,
           "Noto Sans Mono CJK TC", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
   margin: 0;
   background: var(--底);
   color: var(--字);
   font-family: var(--字體);
   font-size: clamp(15px, 0.95rem + 0.15vw, 17px);
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 3px solid var(--主色); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
   }
}

a { color: var(--藍); }
a:hover { color: var(--主色); }

h1 { margin: 0 0 .6rem; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); line-height: 1.25; }
h2 { margin: 2rem 0 1rem; font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); }
p { margin: 0 0 1rem; }

.框 { width: 100%; max-width: var(--寬); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.僅螢幕閱讀器 {
   position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.跳過 {
   position: absolute; left: .5rem; top: -4rem; z-index: 100;
   padding: .7rem 1.1rem; background: var(--主色); color: var(--主色深);
   font-weight: 700; border-radius: var(--圓角); text-decoration: none; transition: top .15s;
}
.跳過:focus { top: .5rem; }

/* ═══ 頁首與導覽 ═══════════════════════════════════════════════ */
.頁首 { border-bottom: 1px solid var(--線); background: var(--面); position: sticky; top: 0; z-index: 40; }
.頁首 .框 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-block: .6rem; }

.標誌 {
   display: inline-flex; align-items: center; gap: .5rem;
   font-weight: 700; color: var(--主色); text-decoration: none; white-space: nowrap;
}

.主導覽 ul { display: flex; flex-wrap: wrap; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.主導覽 a {
   display: block; padding: .45rem .75rem; border-radius: 8px;
   color: var(--字淡); text-decoration: none; font-size: .95rem; white-space: nowrap;
}
.主導覽 a:hover { color: var(--字); background: var(--面亮); }
.主導覽 a[aria-current] { color: var(--主色); background: var(--面亮); font-weight: 600; }

.頁首 .右 { margin-inline-start: auto; display: flex; align-items: center; gap: .6rem; }

/* 經驗條。數字用等寬，跳動時不會左右晃。 */
.經驗盒 {
   display: flex; align-items: center; gap: .55rem;
   padding: .3rem .7rem; background: var(--底);
   border: 1px solid var(--線); border-radius: 999px;
   font-size: .85rem; text-decoration: none; color: var(--字);
}
.經驗盒:hover { border-color: var(--字更淡); color: var(--字); }
.等級章 {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 1.9rem; height: 1.9rem; padding: 0 .35rem;
   background: var(--主色); color: var(--主色深);
   border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.經驗槽 { width: 6rem; height: .5rem; background: var(--面亮); border-radius: 999px; overflow: hidden; }
.經驗條 { height: 100%; width: 0; background: var(--主色); border-radius: 999px; transition: width .5s ease-out; }
.經驗數 { font-family: var(--等寬); color: var(--字淡); font-size: .8rem; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
   .經驗槽 { display: none; }
   .頁首 { position: static; }
}

/* ═══ 主要內容 ═════════════════════════════════════════════════ */
main { padding-block: clamp(1.5rem, 4vw, 2.5rem) 4rem; }
.前言 { color: var(--字淡); max-width: 46rem; margin-bottom: 1.5rem; }

.規則說明 {
   margin: 0 0 1.5rem; padding: .9rem 1.1rem;
   background: var(--面); border: 1px solid var(--線);
   border-inline-start: 3px solid var(--主色);
   border-radius: var(--圓角); color: var(--字淡); font-size: .92rem;
}
.規則說明 b { color: var(--字); }

/* ═══ 卡片格線 ═════════════════════════════════════════════════ */
.格 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
   gap: 1.1rem;
}

.卡 {
   position: relative; display: flex; flex-direction: column;
   background: var(--面); border: 1px solid var(--線);
   border-radius: var(--圓角); overflow: hidden;
   text-decoration: none; color: inherit;
   transition: border-color .15s, transform .15s;
}
a.卡:hover { border-color: var(--主色); transform: translateY(-2px); }

/*
 * 鎖住的卡片：用底色和虛線邊框表示，**不要用 opacity**。
 *
 * 原本是整張卡 opacity:.62，看起來很自然，但那會把文字和背景一起拉近，
 * 說明文字的對比從 7.4:1 掉到 3.75:1，Lighthouse 的無障礙分數直接掉到 93。
 * 「看起來比較淡」對視力好的人是提示，對視力不好的人是障礙。
 * 鎖住的狀態已經有 🔒 標籤和文字說明，不需要再靠顏色講一次。
 */
.卡.鎖住 { background: #16171e; border-style: dashed; }
.卡.鎖住 .卡頭 h3 { color: var(--字淡); }
.卡.鎖住:hover { border-color: var(--字更淡); transform: none; }

.卡頭 { display: flex; align-items: baseline; gap: .5rem; padding: 1rem 1.1rem .3rem; }
.卡頭 h3 { margin: 0; font-size: 1.12rem; font-weight: 700; }
.卡身 { padding: 0 1.1rem 1rem; color: var(--字淡); font-size: .93rem; flex: 1; }
.卡腳 {
   display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
   padding: .7rem 1.1rem; border-top: 1px solid var(--線);
   background: rgba(0, 0, 0, .18); font-size: .85rem; color: var(--字更淡);
}
.卡腳 .撐開 { margin-inline-start: auto; }

/* 小標籤。分類、難度、狀態都用同一個外型，只有顏色不同。 */
.標 {
   display: inline-flex; align-items: center; gap: .3rem;
   padding: .12rem .55rem; border-radius: 999px;
   border: 1px solid var(--線); background: var(--底);
   font-size: .78rem; color: var(--字淡); white-space: nowrap;
}
.標.經驗 { color: var(--主色); border-color: rgba(255, 180, 84, .35); }
.標.完成 { color: var(--綠); border-color: rgba(125, 220, 125, .4); }
/* 鎖住的標籤用 --字淡 而不是 --字更淡：
 * 它常常出現在鎖住的卡片上，再淡下去就過不了 WCAG AA 了。 */
.標.鎖 { color: var(--字淡); }
.標.新 { color: var(--紫); border-color: rgba(195, 154, 255, .4); }

/* 難度用點，不用星星：星星會被讀成「評價」，點只是「幾層」 */
.難度 { display: inline-flex; gap: 3px; align-items: center; }
.難度 i { width: 6px; height: 6px; border-radius: 50%; background: var(--線); display: block; }
.難度 i.滿 { background: var(--主色); }

/* ═══ 角色卡 ═══════════════════════════════════════════════════ */
.角色格 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

.角色圖 {
   height: 150px; display: flex; align-items: flex-end; justify-content: center;
   background: radial-gradient(ellipse at 50% 88%, #262a38 0%, var(--面) 68%);
   overflow: hidden;
}
/*
 * 角色的圖是一整張連續圖（好幾格排在一起）。
 * 這裡不裁圖檔，改用 background-position 只露出第一格，
 * 省下一次影像處理，也讓同一個檔案能同時當頭像和遊戲動畫用。
 */
.角色圖 span {
   display: block;
   background-repeat: no-repeat;
   background-position: 0 0;
   image-rendering: auto;
}
.角色卡.未擁有 .角色圖 span { filter: grayscale(1) brightness(.45); }
.角色卡.未擁有 .角色圖 { background: repeating-linear-gradient(45deg, #16171f 0 10px, #191b24 10px 20px); }

.能力列 { display: grid; grid-template-columns: auto 1fr auto; gap: .3rem .6rem; align-items: center; font-size: .85rem; }
.能力列 span:first-child { color: var(--字淡); }
.能力槽 { height: 6px; background: var(--面亮); border-radius: 999px; overflow: hidden; }
.能力槽 i { display: block; height: 100%; background: var(--藍); border-radius: 999px; }
.能力槽 i.弱 { background: var(--字更淡); }
.能力值 { font-family: var(--等寬); font-size: .78rem; color: var(--字淡); font-variant-numeric: tabular-nums; }

/* ═══ 按鈕 ═════════════════════════════════════════════════════ */
.鈕 {
   display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
   min-height: 2.7rem; padding: .5rem 1.2rem;
   border-radius: 10px; border: 1px solid var(--線);
   background: transparent; color: var(--字);
   font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
   transition: background .15s, border-color .15s;
}
.鈕:hover { background: var(--面亮); border-color: var(--字更淡); color: var(--字); }
.鈕.主 { background: var(--主色); color: var(--主色深); border-color: var(--主色); }
.鈕.主:hover { background: #ffc275; color: var(--主色深); }
.鈕:disabled, .鈕[aria-disabled="true"] { opacity: .45; cursor: default; }
.鈕.小 { min-height: 2.1rem; padding: .25rem .8rem; font-size: .85rem; }

/* ═══ 關卡頁 ═══════════════════════════════════════════════════ */
.關卡版 { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .關卡版 { grid-template-columns: 1fr; } }

.舞台 {
   position: relative; background: #000; border: 1px solid var(--線);
   border-radius: var(--圓角); overflow: hidden;
   /* 沙箱裡的畫布是 4:3，外框跟著它，才不會上下留一大塊黑 */
   aspect-ratio: 4 / 3;
}
/*
 * 網頁作品沒有固定比例：它是一張會往下長的網頁。
 * 綁 4:3 的話，長一點的作品下半截會被切掉——
 * 而被切掉的通常正是「送出」那顆按鈕。
 * 給一個固定高度，讓 iframe 自己捲。
 */
/* 分享頁只有一個舞台，沒有側欄，整個框會寬到誇張。
 * 限一下寬度，看起來才像一個作品而不是一面牆。 */
.看版 { max-width: 56rem; margin-inline: auto; }

.舞台.網頁 {
   aspect-ratio: auto;
   height: min(78vh, 780px);
   background: #fff;
}
.舞台 iframe { width: 100%; height: 100%; border: 0; display: block; }

.舞台列 {
   display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
   padding: .6rem .8rem; background: var(--面); border-bottom: 1px solid var(--線);
}
.目標文 { color: var(--字); font-weight: 600; }
.分數文 { font-family: var(--等寬); color: var(--主色); font-variant-numeric: tabular-nums; }

.側欄 { background: var(--面); border: 1px solid var(--線); border-radius: var(--圓角); padding: 1.1rem; }
.側欄 h2 { margin-top: 1.2rem; font-size: 1rem; }
.側欄 h2:first-child { margin-top: 0; }
.側欄 dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0 0 1rem; font-size: .9rem; }
.側欄 dt { color: var(--字淡); }
.側欄 dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.出戰 { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.出戰 .頭 { width: 56px; height: 56px; border-radius: 10px; background: var(--面亮); overflow: hidden; flex: 0 0 auto; }
.出戰 .頭 span { display: block; background-repeat: no-repeat; }

/* ═══ 完成的結算 ═══════════════════════════════════════════════ */
.結算 {
   position: absolute; inset: 0; z-index: 5;
   display: flex; flex-direction: column; align-items: center; justify-content: center;
   gap: .6rem; padding: 1.5rem; text-align: center;
   background: rgba(10, 11, 16, .93); backdrop-filter: blur(3px);
}
.結算[hidden] { display: none !important; }
.結算 h2 { margin: 0; font-size: clamp(1.4rem, 1rem + 2vw, 2rem); color: var(--主色); }
.結算 .大數 {
   font-size: clamp(2.2rem, 1.5rem + 4vw, 3.4rem); font-weight: 800;
   color: var(--主色); line-height: 1; font-variant-numeric: tabular-nums;
}
.結算 .細 { color: var(--字淡); font-size: .95rem; max-width: 26rem; }
.結算 .鈕列 { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .5rem; }
.結算 .動效格 { position: absolute; inset: 0; pointer-events: none; }

/* ═══ 提示條（拿到經驗、拿到角色） ═════════════════════════════ */
.提示區 {
   position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
   display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
   pointer-events: none;
}
.提示 {
   display: flex; align-items: center; gap: .6rem;
   padding: .7rem 1rem; border-radius: 10px;
   background: var(--面); border: 1px solid var(--主色);
   color: var(--字); box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
   animation: 冒出 .25s ease-out;
}
.提示 b { color: var(--主色); }
@keyframes 冒出 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══ 空狀態與頁尾 ═════════════════════════════════════════════ */
.空 {
   padding: 2.5rem 1rem; text-align: center; color: var(--字更淡);
   border: 1px dashed var(--線); border-radius: var(--圓角);
}

.頁尾 {
   border-top: 1px solid var(--線); background: var(--面);
   padding-block: 1.6rem; color: var(--字淡); font-size: .88rem;
}
.頁尾 .框 { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: baseline; }
.頁尾 .撐開 { margin-inline-start: auto; }

/* ═══ 表單（加入班級、老師後台） ═══════════════════════════════ */
.框.窄 { max-width: 44rem; }

.表單卡 {
   background: var(--面); border: 1px solid var(--線);
   border-radius: var(--圓角); padding: 1.2rem; margin-bottom: 1.2rem;
}
.欄 { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; }
.欄 label { color: var(--字淡); font-size: .9rem; font-weight: 600; }
.欄 .細 { margin: 0; }
input[type="text"], input:not([type]), input[type="date"], select {
   background: var(--底); color: var(--字);
   border: 1px solid var(--線); border-radius: 8px;
   padding: .5rem .7rem; font: inherit; min-height: 2.6rem;
   max-width: 100%;
}
input:focus, select:focus { border-color: var(--主色); }
.碼欄 {
   font-family: var(--等寬); font-size: 1.4rem; letter-spacing: .18em;
   text-transform: uppercase; max-width: 9em;
}
.鈕列 { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0; }
.細 { color: var(--字淡); font-size: .86rem; }
.警語 {
   border-inline-start: 3px solid var(--主色);
   background: rgba(255, 180, 84, .08);
   padding: .6rem .9rem; border-radius: 0 8px 8px 0; color: var(--字);
}
.鈕.危險 { color: var(--紅); border-color: rgba(255, 123, 123, .4); }
.鈕.危險:hover { background: rgba(255, 123, 123, .12); border-color: var(--紅); color: var(--紅); }
.提示.壞 { border-color: var(--紅); }
.提示.壞 b { color: var(--紅); }

/* ═══ 學生：我的作業 ═══════════════════════════════════════════ */
.班卡 {
   background: var(--面); border: 1px solid var(--線);
   border-radius: var(--圓角); padding: 1.2rem; margin-bottom: 1.2rem;
}
.班卡 h2 { margin-top: 0; }
.作業表 { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.作業列 {
   display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
   padding: .6rem .8rem; border-radius: 8px; background: var(--面亮);
}
.作業列 .勾 {
   font-family: var(--等寬); color: var(--字更淡);
   width: 1.4rem; text-align: center; flex: 0 0 auto;
}
.作業列.做完了 .勾 { color: var(--綠); }
.作業列 a { font-weight: 600; }

/* ═══ 老師後台 ═════════════════════════════════════════════════ */
.班級列 {
   display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
   margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--線);
}
.班籤 { display: flex; flex-wrap: wrap; gap: .4rem; }
.班籤鈕 {
   display: inline-flex; flex-direction: column; align-items: flex-start;
   gap: .1rem; padding: .45rem .9rem; border-radius: 8px;
   background: var(--面); color: var(--字淡);
   border: 1px solid var(--線); font: inherit; cursor: pointer; line-height: 1.3;
}
.班籤鈕:hover { color: var(--字); border-color: var(--字更淡); }
.班籤鈕.選中 { background: var(--面亮); color: var(--字); border-color: var(--主色); font-weight: 600; }
.班籤鈕 .細 { font-size: .74rem; }
.開班表單 { display: flex; gap: .5rem; margin-inline-start: auto; align-items: center; }

.後台上排 {
   display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
   gap: 1rem; align-items: start; margin-bottom: 1rem;
}
@media (max-width: 46rem) { .後台上排 { grid-template-columns: 1fr; } }

.加入卡 {
   background: var(--面); border: 1px solid var(--線);
   border-radius: var(--圓角); padding: 1.1rem;
}
.加入卡 h2 { margin: 0 0 .4rem; font-size: 1rem; }
.大碼 {
   font-family: var(--等寬); font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem);
   letter-spacing: .16em; color: var(--主色); margin: 0 0 .2rem; line-height: 1.1;
}
#加入網址 { word-break: break-all; margin-bottom: .8rem; }
.開關 input { accent-color: var(--主色); width: 1.05rem; height: 1.05rem; }
.開關 { display: inline-flex; align-items: center; gap: .4rem; color: var(--字淡); font-size: .88rem; }

.摘要格 {
   display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
   gap: .8rem; margin: 0;
}
.摘要塊 {
   background: var(--面); border: 1px solid var(--線);
   border-radius: var(--圓角); padding: .9rem 1rem;
}
.摘要塊 dt { color: var(--字淡); font-size: .85rem; }
.摘要塊 dd {
   margin: 0; font-size: 1.8rem; font-weight: 700;
   font-variant-numeric: tabular-nums; line-height: 1.2;
}

.指派列 {
   display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
   padding: .7rem .9rem; margin-bottom: .5rem;
   background: var(--面); border: 1px solid var(--線); border-radius: 8px;
}
.指派名 {
   display: flex; flex-direction: column; align-items: flex-start;
   gap: .15rem; min-width: 12rem; flex: 1;
}
.指派標題 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.完成槽 {
   width: 8rem; height: 8px; background: var(--面亮);
   border-radius: 999px; overflow: hidden; flex: 0 0 auto;
}
.完成槽 i { display: block; height: 100%; background: var(--主色); border-radius: 999px; }
.完成數 { font-family: var(--等寬); font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--字淡); }
.標.逾期 { color: var(--紅); border-color: rgba(255, 123, 123, .4); }

.指派表單 {
   display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   gap: 0 1rem; align-items: end;
   background: var(--面); border: 1px dashed var(--線);
   border-radius: var(--圓角); padding: 1rem; margin-top: 1rem;
}
.指派表單 .欄.寬 { grid-column: 1 / -1; }
.指派表單 .鈕列 { grid-column: 1 / -1; }

/* 表格會比螢幕寬——讓它自己橫捲，不要把整頁推寬 */
.表捲動 { overflow-x: auto; border: 1px solid var(--線); border-radius: var(--圓角); }
.進度表 { border-collapse: collapse; width: 100%; font-size: .9rem; }
.進度表 th, .進度表 td { padding: .45rem .6rem; border-bottom: 1px solid var(--線); text-align: left; }
.進度表 thead th {
   background: var(--面亮); color: var(--字淡); font-size: .82rem;
   vertical-align: bottom;
   /* 「等級」「本週」那幾欄很窄，不擋住換行的話會被折成「等／級」 */
   white-space: nowrap;
}
.進度表 tbody th { font-weight: 600; }
.進度表 tbody th .細 { display: block; font-size: .74rem; font-weight: 400; }
.進度表 tbody tr:hover { background: var(--面); }
/* 數字與勾勾只佔自己需要的寬度，剩下的留給學生名字 */
.進度表 .數, .進度表 .格, .進度表 .作業欄 { width: 1%; white-space: nowrap; }
.進度表 .數 { font-family: var(--等寬); font-variant-numeric: tabular-nums; text-align: right; }
.進度表 .格 { text-align: center; font-family: var(--等寬); font-size: 1.05rem; }
.進度表 .格.做完 { color: var(--綠); }
.進度表 .格.沒做 { color: var(--字更淡); }
.進度表 .格.逾期 { color: var(--主色); font-weight: 700; }
/* 作業欄的標題截斷就好。整張表本來就會橫捲，
   把字轉九十度只是換一種看不懂的方式。 */
.作業欄 span {
   display: block; max-width: 7em; overflow: hidden;
   text-overflow: ellipsis; white-space: nowrap;
}

.對話框 {
   background: var(--面); color: var(--字);
   border: 1px solid var(--線); border-radius: var(--圓角);
   padding: 1.4rem; max-width: min(34rem, 92vw);
}
.對話框::backdrop { background: rgba(0, 0, 0, .6); }
.對話框 h2 { margin-top: 0; }
.對話框 hr { border: 0; border-top: 1px solid var(--線); margin: 1.2rem 0; }
.對話框 input { width: 100%; font-family: var(--等寬); font-size: .85rem; }