/* 結石島・結石博物館：選擇器都加 .sm 前綴，不影響全站樣式 */
.sm {
  --bg: #e7efe9;
  --surface: #f8fbf9;
  --surface-2: #d8e3dc;
  --ink: #16232b;
  --ink-soft: #4a5f6b;
  --line: #c8d6cd;
  --accent: #0f7a6c;
  --accent-soft: #e3f2ef;
  --accent-ink: #0a5f54;
  --amber: #b9771a;
  --amber-soft: #f7ead2;
  --shadow: 0 1px 2px rgba(16, 35, 43, 0.05), 0 8px 24px rgba(16, 35, 43, 0.06);
  --font: "Noto Sans TC", "Source Han Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
@media (prefers-color-scheme: dark) {
  .sm {
    --bg: #0f1619;
    --surface: #172126;
    --surface-2: #1d2a30;
    --ink: #e7eef1;
    --ink-soft: #b0c2ca;
    --line: #2a3940;
    --accent: #4ecdb8;
    --accent-soft: #16302c;
    --accent-ink: #7fe0cf;
    --amber: #f0b445;
    --amber-soft: #33281a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}
.sm, .sm * { box-sizing: border-box; }
.sm { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.75; }
.sm .sm-crumb { max-width: 68rem; margin: 0 auto; padding: 1rem var(--pad) 0; }
.sm .sm-wrap { max-width: 68rem; margin: 0 auto; padding: .5rem var(--pad) 3rem; display: grid; gap: 1.6rem; }
.sm .eyebrow { margin: 0 0 -1.2rem; font-size: .8rem; letter-spacing: .12em; color: var(--accent); font-weight: 700; }
.sm h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.3; text-wrap: balance; }
.sm .lede { margin: -.8rem 0 0; color: var(--ink-soft); max-width: 46rem; }
.sm a { color: var(--accent-ink); }

/* 三個數字 */
.sm .sm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.sm .sm-facts p { margin: 0; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: .88rem; color: var(--ink-soft); }
.sm .sm-facts b { display: block; font-size: 1.15rem; color: var(--amber); }
@media (max-width: 640px) { .sm .sm-facts { gap: .4rem; } .sm .sm-facts p { padding: .5rem .55rem; font-size: .72rem; line-height: 1.45; } .sm .sm-facts b { font-size: .92rem; margin-bottom: .15rem; } }

/* 展區目錄 */
.sm .sm-toc { display: flex; flex-wrap: wrap; gap: .4rem; }
.sm .sm-toc a { text-decoration: none; font-size: .88rem; font-weight: 700; padding: .25rem .8rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); }
.sm .sm-toc a:hover, .sm .sm-toc a:focus-visible { border-color: var(--accent); }

/* 展區：左邊說明牌，右邊展品 */
.sm .sm-hall { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.2rem; align-items: start; padding-top: 1.4rem; border-top: 1px solid var(--line); scroll-margin-top: 4.5rem; }
@media (max-width: 860px) { .sm .sm-hall { grid-template-columns: minmax(0, 1fr); } }
.sm .sm-label { position: sticky; top: 5rem; }
@media (max-width: 860px) { .sm .sm-label { position: static; } }
.sm h2 { margin: 0 0 .4rem; font-size: 1.3rem; line-height: 1.35; }
.sm .sm-label p { margin: 0; font-size: .95rem; }
.sm .sm-tags { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.sm .sm-tags li { font-size: .84rem; font-weight: 700; padding: 0 .55rem; border-radius: 999px; background: var(--amber-soft); color: var(--amber); }
.sm .sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: .8rem; }
.sm .sm-grid.sm-one { grid-template-columns: minmax(0, 32rem); }
.sm figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.sm figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sm figure img.sm-contain { object-fit: contain; background: var(--surface-2); }
.sm figure img.sm-top { object-position: center 30%; }
.sm figcaption { padding: .45rem .7rem .55rem; font-size: .85rem; color: var(--ink-soft); line-height: 1.55; }

/* 館藏還沒有的、成分怎麼知道 */
.sm .sm-more { padding-top: 1.4rem; border-top: 1px solid var(--line); scroll-margin-top: 4.5rem; }
.sm .sm-more > p { margin: 0 0 .6rem; max-width: 46rem; }
.sm .sm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .8rem; }
.sm .sm-cards div { padding: .8rem 1rem; background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; }
.sm h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.sm .sm-cards p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.sm .sm-src { font-size: .82rem; color: var(--ink-soft); }
.sm figure img.sm-high { object-position: center 12%; }
/* 隔壁展覽：連到結石圖鑑、成因文章 */
.sm .sm-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .8rem; }
.sm .sm-next a { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .6rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); }
.sm .sm-next a:hover, .sm .sm-next a:focus-visible { border-color: var(--accent); }
.sm .sm-next img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.sm .sm-next span { font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.sm .sm-next b { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: .15rem; }
.sm .sm-next i { display: block; font-style: normal; font-weight: 700; color: var(--accent); margin-top: .2rem; }