；2026-09-16 彭子祐 About：照片下方兩顆按鈕） */
.ms-prose .ms-btn-stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin: 16px 0;
}
/* 小圖並排（內文裡包
；2026-09-16 彭子祐 About：ORCID、ResearchGate） */
.ms-root .ms-prose .ms-btn-stack > a.ms-btn {
align-self: stretch;
margin: 0;
}
.ms-prose .ms-logo-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.ms-prose .ms-logo-row img {
display: block;
max-width: 100%;
margin: 0;
}
.ms-prose .ms-logo-row > a {
flex: 1 1 0;
min-width: 0;
}
/* 窄欄裡（舊站側欄那一排按鈕）上下排、同寬 */
.ms-prose .ms-col--narrow > a.ms-btn {
display: flex;
margin: 0 0 12px;
}
.ms-prose img {
border-radius: var(--radius-md);
/* 圖比欄窄時置中（.ms-root img 是 display:block，靠左看起來會偏一邊；舊站的圖也是置中，2026-09-21） */
margin: 1.2em auto;
}
.ms-prose figure {
margin: 1.4em 0;
}
.ms-prose figcaption {
font-size: var(--text-caption);
color: var(--text-secondary);
margin-top: 8px;
}
.ms-prose blockquote {
margin: 1.4em 0;
padding-left: 20px;
border-left: 3px solid var(--accent);
color: var(--text-secondary);
}
.ms-prose hr {
border: 0;
border-top: 1px solid var(--border);
margin: 2.4em 0;
}
.ms-prose iframe, .ms-prose video {
max-width: 100%;
border: 0;
}
.ms-prose .ms-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.4em 0;
}
.ms-prose table {
border-collapse: collapse;
width: 100%;
font-size: var(--text-body);
line-height: 1.7;
}
.ms-prose th, .ms-prose td {
border: 1px solid var(--border);
padding: 10px 14px;
text-align: left;
vertical-align: top;
}
.ms-prose th {
background: var(--bg-soft);
font-weight: 600;
}
/* 多欄排版：搬家匯入把舊站的排版表格換成這個（2026-09-13 Rex：排版不要用表格，見 HtmlRewriter::layout_tables）
窄欄是照片、日期、小圖示那一欄，照內容寬、最多三成；其餘平分。手機直排 */
.ms-prose .ms-cols {
display: flex;
align-items: flex-start;
gap: 16px 32px;
margin: 1.4em 0;
}
.ms-prose .ms-col {
flex: 1 1 0;
min-width: 0;
}
.ms-prose .ms-col--narrow {
flex: 0 1 auto;
max-width: 30%;
}
.ms-prose .ms-col > :first-child {
margin-top: 0;
}
.ms-prose .ms-col > :last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.ms-prose .ms-cols {
flex-direction: column;
}
.ms-prose .ms-col,
.ms-prose .ms-col--narrow {
flex: 1 1 auto;
max-width: 100%;
}
}
/* ---------- post（頁型 ④ 明細） ---------- */
.ms-post {
max-width: var(--reading-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 32px;
}
.ms-post__cover {
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--border);
}
.ms-post__cover img {
width: 100%;
height: auto;
}
.ms-post__embed {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: var(--radius-card);
overflow: hidden;
}
.ms-post__embed iframe, .ms-post__embed video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.ms-post__foot {
border-top: 1px solid var(--border);
padding-top: 24px;
}
/* ---------- contact（頁型 ⑤） ---------- */
.ms-contact {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 64px;
align-items: start;
}
@media (max-width: 1023px) {
.ms-contact {
grid-template-columns: 1fr;
gap: 40px;
}
}
.ms-contact-solo {
max-width: 720px;
}
.ms-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.ms-info__item {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: start;
}
.ms-info__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--accent-soft);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
}
.ms-info__text {
padding-top: 8px;
overflow-wrap: anywhere;
}
.ms-map {
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--border);
aspect-ratio: 16/9;
}
.ms-info__map {
margin-top: 8px;
aspect-ratio: 4/3;
}
.ms-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.ms-form {
display: flex;
flex-direction: column;
gap: 20px;
padding: 40px;
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
}
@media (max-width: 639px) {
.ms-form {
padding: 24px;
}
}
.ms-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.ms-field label {
font-size: var(--text-caption);
font-weight: 600;
}
.ms-field input, .ms-field textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-base);
color: var(--text-primary);
line-height: 1.6;
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ms-field textarea {
min-height: 160px;
resize: vertical;
}
.ms-field input:focus, .ms-field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ms-field.has-error input, .ms-field.has-error textarea {
border-color: var(--accent-press);
}
.ms-field__error {
font-size: var(--text-caption);
color: var(--accent-press);
font-weight: 600;
}
.ms-field--trap {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.ms-notice {
padding: 16px 20px;
border-radius: var(--radius-md);
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
}
/* ---------- footer ---------- */
.ms-footer {
background: var(--bg-soft);
padding: 72px var(--container-pad) 32px;
}
/* 頁尾上方的主色分隔線（八軸 footer_rule＝accent，2026-09-21） */
.ms-footer-rule--accent .ms-footer {
border-top: 3px solid var(--accent-light);
}
.ms-footer__grid {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 48px;
}
.ms-footer__col {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.ms-footer__col .ms-nav__logo img {
height: 36px;
}
.ms-footer__links {
display: flex;
flex-direction: column;
gap: 10px;
}
.ms-footer__links a {
color: var(--text-secondary);
}
.ms-footer__contact {
display: flex;
flex-direction: column;
gap: 10px;
color: var(--text-secondary);
}
.ms-footer__contact-item {
display: flex;
gap: 10px;
align-items: flex-start;
overflow-wrap: anywhere;
}
.ms-footer__contact-item svg {
margin-top: 4px;
color: var(--accent);
}
.ms-footer__social {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ms-footer__social a {
padding: 6px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-size: var(--text-caption);
background: var(--bg-base);
}
/* 只有圖的清單（award-list 的 style = photos，2026-09-24 而沃媒體報導） */
.ms-photo-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.ms-photo-list__item { display: block; }
.ms-root .ms-photo-list__item img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
.ms-photo-list-group + .ms-photo-list-group { margin-top: 64px; }
@media (max-width: 639px) {
.ms-photo-list { grid-template-columns: 1fr; gap: 16px; }
}
/* 頁尾社群改用圖示列（config footer_social = 'icons'）：拿掉文字按鈕的膠囊外框 */
.ms-footer__social--icons .ms-social { margin: 0; }
.ms-footer__social--icons a {
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.ms-footer__bottom {
max-width: var(--container-max);
margin: 56px auto 0;
padding-top: 24px;
border-top: 1px solid var(--neutral-silver);
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.ms-footer {
padding-top: 48px;
}
.ms-footer__grid {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media print {
.ms-nav, .ms-footer, .ms-skip {
display: none;
}
}
/* ---------- 清單（spec 15，2026-09-18）：成員／獲獎／研究計畫由 content.blade 依 config pages 的 list 附掛在內文下方；最新論文在首頁 ---------- */
/* 內容頁內文下方附掛的清單（config pages 的 list，2026-09-18 Rex：不用內文佔位字） */
.ms-page-list,
.ms-page-section {
margin-top: 2.4em;
}
.ms-page-list > .ms-list-group__title:first-child,
.ms-page-list > .ms-list-group:first-child > .ms-list-group__title:first-child {
margin-top: 0;
}
/* 首頁「最新論文」區塊標題（後台 首頁 → 最新論文區塊，對齊原站置中的 NEWS UPDATE） */
.ms-prose .ms-news-update__title {
margin: 0 0 12px;
text-align: center;
}
/* 清單的分段大標（第二級：Lab Members、Collaborators、Congress Presentation…，2026-09-20 改）
跟第三級小標拉開層級：字大一級、下面一條細線、上方留白多 */
.ms-root .ms-list-group__title,
.ms-root .ms-prose .ms-list-group__title,
.ms-root .ms-list-group > .ms-list-group__title {
margin: 2em 0 1em;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
font-size: 26px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
}
.ms-root .ms-page-list > .ms-list-group__title:first-child,
.ms-root .ms-page-list > .ms-list-group:first-child > .ms-list-group__title:first-child,
.ms-root .ms-list-group:first-child > .ms-list-group__title {
margin-top: 0;
}
/* 列表頁的分段容器（list.blade，2026-09-20） */
.ms-root .ms-list-group + .ms-list-group {
margin-top: 2.4em;
}
@media (max-width: 767px) {
.ms-root .ms-list-group__title,
.ms-root .ms-prose .ms-list-group__title,
.ms-root .ms-list-group > .ms-list-group__title {
font-size: 22px;
}
}
.ms-team {
margin: 1.2em 0 2em;
}
/* 成員的下層分類小標（Ph.D. Students…，2026-09-20） */
/* 第三級小標（成員的 Ph.D. Students…、區塊標題底下的分類名）：主色＋前面一小條線，跟第二級明顯不同 */
.ms-root .ms-list-subtitle,
.ms-root .ms-prose .ms-list-subtitle,
.ms-root .ms-team__subtitle {
display: flex;
align-items: center;
gap: 8px;
margin: 1.6em 0 0.8em;
font-size: var(--text-body);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
color: var(--accent);
}
.ms-root .ms-list-subtitle::before,
.ms-root .ms-team__subtitle::before {
content: "";
flex: none;
width: 20px;
height: 2px;
background: var(--accent);
}
.ms-team__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 28px 20px;
}
.ms-team__card {
text-align: center;
line-height: 1.5;
}
.ms-team__photo {
aspect-ratio: 3 / 4;
margin-bottom: 10px;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--accent-soft, #eef2f6);
display: flex;
align-items: center;
justify-content: center;
}
.ms-prose .ms-team__photo img {
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border-radius: 0;
}
.ms-team__photo svg {
width: 44%;
height: 44%;
fill: none;
stroke: var(--accent);
stroke-width: 1.2;
opacity: 0.45;
}
.ms-team__name {
font-weight: 700;
}
.ms-team__name-en,
.ms-team__role,
.ms-team__summary {
font-size: var(--text-caption);
}
.ms-team__role,
.ms-team__summary {
margin-top: 2px;
color: var(--text-secondary);
}
.ms-team__summary {
text-align: left;
}
.ms-awards,
.ms-research-list,
.ms-latest {
margin: 1em 0 2em;
}
.ms-award,
.ms-research {
display: grid;
gap: 8px 28px;
padding: 20px 0;
border-top: 1px solid var(--border);
}
.ms-award {
grid-template-columns: 110px minmax(0, 1fr);
}
.ms-award--image {
grid-template-columns: 110px minmax(0, 1fr) 220px;
}
.ms-research--image {
grid-template-columns: minmax(0, 1fr) 220px;
}
.ms-award:first-child,
.ms-research:first-child {
border-top: 0;
padding-top: 0;
}
.ms-award__date,
.ms-research__no {
font-size: var(--text-caption);
font-weight: 600;
color: var(--accent);
letter-spacing: 0.02em;
}
.ms-award__date {
padding-top: 4px;
}
.ms-prose .ms-award__title,
.ms-prose .ms-research__title {
margin: 0 0 4px;
font-size: var(--text-body-lg);
line-height: 1.5;
}
.ms-research__title-en {
font-weight: 600;
line-height: 1.5;
}
.ms-award__content > :first-child {
margin-top: 0;
}
.ms-award__content > :last-child {
margin-bottom: 0;
}
.ms-prose .ms-award__image img,
.ms-prose .ms-research__image img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
.ms-prose .ms-research__meta {
margin: 8px 0 0;
font-size: var(--text-caption);
color: var(--text-secondary);
line-height: 1.6;
}
.ms-research__meta div {
display: flex;
flex-wrap: wrap;
gap: 0 6px;
}
.ms-research__meta dt {
font-weight: 600;
}
.ms-research__meta dt::after {
content: ":";
}
.ms-research__meta dd {
margin: 0;
}
.ms-prose .ms-research__summary {
margin: 8px 0 0;
}
.ms-root .ms-prose .ms-item-actions a.ms-btn {
margin: 0;
}
.ms-latest__item {
padding: 10px 0;
border-top: 1px dashed var(--border);
}
.ms-latest__item:first-child {
border-top: 0;
}
.ms-latest__date {
margin-right: 8px;
font-weight: 700;
color: var(--accent);
}
.ms-latest__type {
display: inline-block;
padding: 1px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-size: var(--text-caption);
color: var(--text-secondary);
vertical-align: 1px;
}
.ms-latest__title {
font-weight: 600;
}
.ms-latest__meta {
margin-top: 2px;
font-size: var(--text-caption);
color: var(--text-secondary);
}
/* 首頁的地圖＋聯絡表單（home.blade 的 contact_block，2026-09-21） */
.ms-home-contact {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 40px;
align-items: start;
}
.ms-home-contact__map iframe {
display: block;
width: 100%;
min-height: 420px;
border: 0;
border-radius: var(--radius-md);
}
.ms-home-contact__info {
margin-top: 20px;
font-size: var(--text-body);
}
.ms-home-contact__info p {
margin: 0 0 10px;
}
@media (max-width: 1023px) {
.ms-home-contact {
grid-template-columns: 1fr;
gap: 28px;
}
.ms-home-contact__map iframe {
min-height: 320px;
}
}
/* 清單的分類快速跳轉（partials/list-jump，2026-09-19） */
.ms-list-jump {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 8px;
}
.ms-root .ms-prose a.ms-list-jump__link,
.ms-root a.ms-list-jump__link {
display: inline-flex;
align-items: center;
padding: 6px 16px;
border: 1px solid var(--accent);
border-radius: var(--radius-pill);
color: var(--accent);
font-size: var(--text-caption);
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.ms-root .ms-prose a.ms-list-jump__link:hover,
.ms-root .ms-prose a.ms-list-jump__link:focus-visible {
background: var(--accent);
color: var(--on-accent);
}
/* 前台清單搜尋（partials/list-search，2026-09-19）：隱藏用 hidden 屬性，蓋掉各元件自己的 display */
[data-ms-search-scope] [hidden] {
display: none !important;
}
.ms-list-search {
margin: 0 0 16px;
}
.ms-root .ms-list-search__input {
display: block;
width: 100%;
max-width: 420px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--bg-base);
color: inherit;
font: inherit;
line-height: 1.4;
}
.ms-root .ms-list-search__input:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: var(--accent);
}
.ms-root .ms-prose .ms-list-search__status,
.ms-list-search__status {
margin: 6px 0 0;
font-size: var(--text-caption);
color: var(--text-secondary);
}
/* 回到頁首（layouts/migrate_std，2026-09-19） */
.ms-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 40;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
box-shadow: var(--shadow-sm);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration) var(--ease);
}
.ms-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
.ms-to-top:hover {
background: var(--accent-press, var(--accent));
}
.ms-to-top:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.ms-to-top svg {
width: 22px;
height: 22px;
}
@media (max-width: 767px) {
.ms-to-top {
right: 16px;
bottom: 16px;
width: 44px;
height: 44px;
}
}
@media print {
.ms-to-top,
.ms-list-jump {
display: none;
}
}
/* 圖片點擊放大（site.js 的 data-ms-zoom，2026-09-19） */
.ms-zoom-link {
display: block;
cursor: zoom-in;
}
.ms-zoom {
width: 100vw;
height: 100vh;
max-width: 100vw;
max-height: 100vh;
margin: 0;
padding: 24px;
border: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.ms-zoom:not([open]) {
display: none;
}
.ms-zoom::backdrop {
background: rgba(0, 0, 0, 0.85);
}
.ms-zoom__figure {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 100%;
max-height: 100%;
}
.ms-zoom__img {
display: block;
max-width: 92vw;
max-height: 82vh;
object-fit: contain;
border-radius: var(--radius-md);
cursor: zoom-out;
}
.ms-zoom__caption {
color: #fff;
font-size: var(--text-caption);
text-align: center;
max-width: 92vw;
}
.ms-zoom__close {
position: fixed;
top: 12px;
right: 16px;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.ms-zoom__close:hover,
.ms-zoom__close:focus-visible {
background: rgba(255, 255, 255, 0.3);
outline: 2px solid #fff;
outline-offset: 2px;
}
@media (max-width: 767px) {
.ms-award,
.ms-award--image,
.ms-research--image {
grid-template-columns: 1fr;
}
.ms-award__image,
.ms-research__image {
max-width: 320px;
}
/* 手機一排兩位，22 位成員不用滑太長 */
.ms-team__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 14px;
}
}
/* ---------- 頁型 ⑦ 合作夥伴（2026-09-23 梅獅「網頁相連」）----------
一格一個單位：標誌置中、名稱在下。標誌是各單位的原圖（比例與去背狀況都不一樣），
所以用固定高度的框＋object-fit: contain，不裁切也不變形。 */
.ms-partner-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
/* auto-fit：欄數跟著容器寬度走，7 個單位不會在最後一列留一張孤卡 */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
@media (max-width: 639px) {
.ms-partner-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
}
.ms-partner-card__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
height: 100%;
padding: 22px 16px;
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
color: var(--text-primary);
text-align: center;
text-decoration: none;
transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.ms-decoration--none .ms-partner-card__link { border-color: transparent; }
a.ms-partner-card__link:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.ms-partner-card__logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 72px;
padding: 0 8px;
}
.ms-partner-card__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.ms-partner-card__name {
font-size: var(--text-caption);
font-weight: 600;
line-height: 1.6;
color: var(--text-secondary);
}
a.ms-partner-card__link:hover .ms-partner-card__name { color: var(--accent); }
.ms-partner-card__desc {
font-size: var(--text-caption);
color: var(--text-secondary);
line-height: 1.7;
}
/* ---------- 頁型 ⑧ 問答（2026-09-23 梅獅「重劃問答」）----------
用
／，展開收合不靠 JS。箭頭自己畫，因為各瀏覽器的預設三角形長得不一樣。 */
.ms-faq {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 820px;
}
.ms-prose + .ms-faq { margin-top: 32px; }
.ms-faq__item {
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.ms-faq__item[open] {
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
box-shadow: var(--shadow-sm);
}
.ms-faq__q {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 18px 22px;
font-size: var(--text-body-lg);
font-weight: 600;
line-height: 1.6;
cursor: pointer;
list-style: none;
}
.ms-faq__q::-webkit-details-marker { display: none; }
.ms-faq__q::before {
content: "";
flex: 0 0 auto;
width: 10px;
height: 10px;
margin-top: 8px;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
transition: transform var(--duration) var(--ease);
}
.ms-faq__item[open] .ms-faq__q::before { transform: rotate(45deg); }
.ms-faq__q:hover { background: var(--bg-soft); }
.ms-faq__a {
padding: 0 22px 20px 44px;
color: var(--text-secondary);
}
@media (max-width: 767px) {
.ms-faq__q { padding: 16px 18px; font-size: var(--text-body); }
.ms-faq__a { padding: 0 18px 18px 40px; }
}
/* 選單列的站名：長名一律單行，寬度上限內放不下就截斷，絕不換行擠進內容區
（2026-09-23：梅獅全名 18 字，原本被擠成一行一個字並蓋住頁首標題） */
.ms-nav__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
}
@media (max-width: 1023px) {
.ms-nav__name { max-width: 60vw; }
}
/* 內文裡的連結清單（問答頁上方的法令連結那種）。原站是「▶ 粗體連結」＋硬換行，
改成語意的 ，箭頭由 CSS 畫（2026-09-23 梅獅） */
.ms-prose .ms-linklist {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ms-prose .ms-linklist li { margin: 0; }
.ms-prose .ms-linklist a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
background: var(--accent-soft);
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
border-radius: 999px;
font-size: var(--text-body);
font-weight: 600;
color: var(--accent-press);
text-decoration: none;
}
.ms-prose .ms-linklist a::after {
content: "";
width: 7px;
height: 7px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
opacity: .7;
}
.ms-prose .ms-linklist a:hover {
background: color-mix(in srgb, var(--accent) 12%, var(--bg-base));
border-color: var(--accent);
}
/* 活動照片牆（活動紀事明細頁）。點圖開原尺寸，所以整格是連結 */
.ms-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
margin: 24px 0;
}
.ms-photo-grid a {
display: block;
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg-soft);
}
.ms-photo-grid img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration) var(--ease);
}
.ms-photo-grid a:hover img { transform: scale(1.04); }
@media (max-width: 639px) {
.ms-photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
}
/* 列表頁籤（config news_lists 的 tabs，2026-09-23 梅獅「最新公告｜會議紀錄」）。
原站是置中的兩顆按鈕、選中的反白；這裡用主色底，未選的是淡底 */
.ms-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 32px;
}
.ms-tabs__item {
padding: 10px 28px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg-base);
color: var(--text-primary);
font-weight: 600;
text-decoration: none;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
/* .ms-root 前綴：要贏過 .ms-root a:hover { color: accent }，否則滑到選中的頁籤，
字會變成跟底色一樣的主色而消失（2026-09-23 Rex 回報，同 .ms-btn--solid 的做法） */
.ms-root .ms-tabs__item:hover {
border-color: var(--accent);
color: var(--accent);
}
.ms-root .ms-tabs__item.is-active,
.ms-root .ms-tabs__item.is-active:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
.ms-root .ms-tabs__item.is-active:hover {
background: var(--accent-press);
}
/* 表格式文字列（config news_lists 的 table，2026-09-23 梅獅「最新公告｜會議紀錄」）：
照原站表格排成 日期｜標題｜相關附件 三欄加表頭。手機放不下三欄，附件改到標題下面、表頭藏起來 */
.ms-rows--table .ms-rows__head,
.ms-rows--table .ms-row {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) 180px;
gap: var(--gap);
align-items: center;
}
.ms-rows--table .ms-rows__head {
padding: 12px 16px;
background: var(--bg-soft);
border-top: 1px solid var(--border);
font-size: var(--text-caption);
font-weight: 700;
color: var(--text-secondary);
letter-spacing: 0.04em;
}
.ms-rows--table .ms-row {
padding: 18px 16px;
}
.ms-rows--table .ms-row__date { padding-top: 0; }
.ms-rows--table .ms-row__actions .ms-item-actions {
margin-top: 0;
justify-content: flex-start;
}
@media (max-width: 639px) {
.ms-rows--table .ms-rows__head { display: none; }
.ms-rows--table .ms-row {
grid-template-columns: 88px minmax(0, 1fr);
align-items: start;
padding: 18px 0;
}
.ms-rows--table .ms-row__actions { grid-column: 2; }
}
/* 作品資訊表（config info_fields，2026-09-23 而沃）：標籤在左、內容在右，手機改上下 */
.ms-work-info {
margin: 24px 0 32px;
padding: 20px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
display: grid;
gap: 10px;
}
.ms-work-info__row {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 16px;
}
.ms-work-info dt {
font-size: var(--text-caption);
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.04em;
padding-top: 2px;
}
.ms-work-info dd {
margin: 0;
line-height: 1.7;
}
@media (max-width: 639px) {
.ms-work-info__row { grid-template-columns: 1fr; gap: 2px; }
}
/* 作品相簿（works.gallery）：比照片牆大一點，作品照是主角；有說明文字放在圖下 */
.ms-photo-grid--gallery {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
.ms-photo-grid--gallery figure { margin: 0; }
.ms-photo-grid--gallery figcaption {
margin-top: 6px;
font-size: var(--text-caption);
color: var(--text-secondary);
}
@media (max-width: 639px) {
.ms-photo-grid--gallery { grid-template-columns: 1fr; }
}
/* 首頁附掛清單的標題（2026-09-23 而沃 PROJECTS） */
.ms-home-list__title {
margin: 0 0 28px;
text-align: center;
letter-spacing: 0.12em;
}
/* ===== 2026-09-23 而沃補的通用元件（都要在 config 打開才會出現） ===== */
/* 視覺上藏起來、搜尋引擎與螢幕閱讀器仍讀得到（首屏用 logo 取代標題時的 h1） */
.ms-visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* 首屏正中的 logo 圖（pages.home.hero_logo） */
.ms-hero__logo {
display: block;
width: min(260px, 50vw);
height: auto;
margin: 0 auto;
}
/* 圖磚：只有照片、縫很細（works-list style => tiles）。滑過去才出現作品名 */
.ms-tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.ms-tile {
position: relative;
display: block;
aspect-ratio: var(--media-ratio);
overflow: hidden;
background: var(--bg-soft);
}
.ms-tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.ms-tile__name {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 12px 14px;
font-size: var(--text-caption);
color: #fff;
background: linear-gradient(transparent, rgba(0, 0, 0, .6));
opacity: 0;
transition: opacity var(--duration) var(--ease);
}
.ms-tile:hover img { transform: scale(1.03); opacity: .85; }
.ms-tile:hover .ms-tile__name { opacity: 1; }
@media (max-width: 1023px) { .ms-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ms-tiles { grid-template-columns: 1fr; } }
/* 一行一筆：左大圖（約七成）、右兩行標題＋SEE MORE（news_lists layout => feature） */
.ms-feature-rows {
display: flex;
flex-direction: column;
gap: 56px;
}
.ms-feature-row {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
gap: 32px;
align-items: start;
}
.ms-feature-row__media {
display: block;
aspect-ratio: var(--media-ratio);
overflow: hidden;
background: var(--bg-soft);
}
.ms-feature-row__media img { width: 100%; height: 100%; object-fit: cover; }
.ms-feature-row__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding-top: 4px;
}
.ms-feature-row__title {
margin: 0;
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
line-height: 1.9;
}
.ms-root .ms-feature-row__title a { color: var(--text-primary); }
@media (max-width: 767px) {
.ms-feature-row { grid-template-columns: 1fr; gap: 16px; }
.ms-feature-rows { gap: 40px; }
}
/* 作品頁輪播（news_lists gallery_mode => carousel） */
.ms-post__carousel { margin: 32px 0; }