/*
  陳政瑜醫師｜心臟血管外科 — 共用樣式
  ==========================================================================
  這一份給四頁共用（首頁、關於我、手術與治療、門診與掛號）。

  ★ 為什麼這裡有獨立的 CSS 檔，入口頁 ../index.html 卻是內嵌的
    入口頁只有一頁，內嵌可以少發一個請求。這裡有四頁——樣式再內嵌下去，
    等於同一組顏色抄四份，改色時一定會漏掉其中一份。
    （書櫃踩過這個坑：值抄了兩份、只改到一份，手動切深色的人看到舊顏色。）

  ★ 顏色是從入口頁／書櫃 styles.css 抄過來的，刻意的重複
    --l-* / --d-* 三個地方要一起改：
      Home/index.html 的 <style>、這一份、Reads/static/styles.css
    抄而不共用的理由寫在 Home/README.md。

  ★ 深淺色切換的規則跟另外兩站一樣
    沒按過按鈕就跟系統，按過之後以讀者的選擇為準（包含「系統深色但我要淺色」），
    記在 localStorage 的 'theme'。行為寫在 theme.js，三邊要一起改。
*/

:root {
  /* ---- 兩套顏色的「原料」。要調色只改這一段。 ---- */
  --l-bg: #e9f1f6;
  --l-surface: #f4f9fc;
  --l-text: #233039;
  --l-muted: #556b7d;
  --l-accent: #336f8c;
  --l-accent-soft: #dbe8f1;
  --l-border: #d2e0ea;
  --l-ochre: #b05242;
  --l-glow:
    radial-gradient(72rem 44rem at 12% -12%, rgba(120, 170, 205, 0.16), transparent 62%),
    radial-gradient(54rem 36rem at 90% 0%, rgba(150, 195, 215, 0.12), transparent 58%);

  --d-bg: #121a21;
  --d-surface: #1a242d;
  --d-text: #e1eaf1;
  --d-muted: #92a4b2;
  --d-accent: #7cb4d1;
  --d-accent-soft: #1d2f3a;
  --d-border: #2a3a46;
  --d-ochre: #ef9077;
  --d-glow:
    radial-gradient(72rem 44rem at 12% -12%, rgba(90, 145, 185, 0.13), transparent 62%),
    radial-gradient(54rem 36rem at 90% 0%, rgba(70, 130, 165, 0.1), transparent 58%);

  /* ---- 實際在用的。預設淺色，下面兩個區塊負責切換。 ---- */
  color-scheme: light;
  --bg: var(--l-bg);
  --surface: var(--l-surface);
  --text: var(--l-text);
  --muted: var(--l-muted);
  --accent: var(--l-accent);
  --accent-soft: var(--l-accent-soft);
  --border: var(--l-border);
  --ochre: var(--l-ochre);
  --glow: var(--l-glow);

  --font-sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-serif: Georgia, "Songti TC", "Noto Serif TC", "Source Han Serif TC", serif;

  /* 內文欄寬。中文一行落在三十幾個字，讀長段落才不會跳行。 */
  --measure: 42rem;
  /* 兩側留白。與入口頁同一組值，切換頁面時邊界不會跳。 */
  --gutter: clamp(1.125rem, 5vw, 2.5rem);
}

/* 順序不能反：按過之後以讀者的選擇為準。 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--d-bg);
  --surface: var(--d-surface);
  --text: var(--d-text);
  --muted: var(--d-muted);
  --accent: var(--d-accent);
  --accent-soft: var(--d-accent-soft);
  --border: var(--d-border);
  --ochre: var(--d-ochre);
  --glow: var(--d-glow);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: var(--d-bg);
    --surface: var(--d-surface);
    --text: var(--d-text);
    --muted: var(--d-muted);
    --accent: var(--d-accent);
    --accent-soft: var(--d-accent-soft);
    --border: var(--d-border);
    --ochre: var(--d-ochre);
    --glow: var(--d-glow);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 跟另外兩站同一條規矩：任何情況都不准出現水平捲軸。 */
  overflow-x: hidden;
  background: var(--bg);
  /*
    從首頁的病症卡跳到手術頁的錨點時，標題不要被黏頂的導覽列蓋住。
    5rem 是導覽列高度（約 55px）再留一點餘裕。導覽列改高度要回來調這個值。
  */
  scroll-padding-top: 5rem;
  /*
    這裡刻意不寫 scroll-behavior: smooth。
    首頁卡片連到的錨點最遠有四千多 px，平滑捲動要跑一秒、中間整片模糊，
    讀者只會覺得「畫面在亂動」。直接跳反而清楚：他按了，就到了。
  */
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.85;
  /* 中文長句與長網址一律允許斷行。 */
  overflow-wrap: anywhere;
}

/* 背景微光。fixed 偽元素比 background-attachment 在行動版穩。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--glow);
  pointer-events: none;
  z-index: -1;
}

a { color: var(--accent); }

/* --- 導覽列 ------------------------------------------------------------- */

/*
  四頁共用。黏在頂端是因為這個站的讀者常常是「看完手術頁想找門診時間」——
  那個動作不該逼他捲回最上面。
  背景用半透明＋模糊，捲動時底下的字不會糊成一團但仍看得出有東西在動。
*/
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.625rem var(--gutter);
}

/* 左上角的名字。點了回這個站的首頁，不是回 chengyuchen.net——
   讀者在這個站裡的「家」是這裡，不是入口頁。 */
.nav-home {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.nav-home:hover, .nav-home:focus-visible { color: var(--accent); }

/*
  手機上把左上角的名字收起來。
  四個連結加上名字塞不進 375px，最後一項「門診與掛號」會被推到畫面外——
  而那一項正是整個站最需要被看到的東西。名字讓位是對的：
  每一頁的 <h1> 本來就寫著他是誰，導覽列再寫一次只是重複。
*/
@media (max-width: 33.99rem) {
  .nav-home { display: none; }
  .nav-links { margin-left: 0; }
}

/*
  連結列。窄螢幕上會超出寬度，所以讓它可以橫向捲，
  而不是折成第二行——折行會把導覽列撐高兩倍，手機上很佔畫面。
  scrollbar 藏起來，但仍然可以滑。
*/
.nav-links {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}

.nav-links a:hover, .nav-links a:focus-visible { color: var(--accent); background: var(--accent-soft); }

/* 目前所在的那一頁。每頁的 <a> 自己加 aria-current="page"。
   用 aria-current 而不是另外一個 class：這樣螢幕閱讀器也知道。 */
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* --- 深淺色切換鈕 -------------------------------------------------------- */

/* 這裡是塞進導覽列裡的（入口頁是 fixed，因為那一頁垂直置中）。
   外觀一樣，讀者跨站不會覺得換了一個網站。 */
.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  margin-left: 0.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.theme-toggle:hover, .theme-toggle:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: rotate(-12deg);
}

.theme-toggle svg { width: 1rem; height: 1rem; }

/*
  兩個圖示都印在 HTML 裡，靠 CSS 決定誰現身：
  淺色顯示月亮（點了會變暗），深色顯示太陽。
  這樣 JavaScript 還沒跑，圖示就已經是對的。
*/
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

/* --- 版面骨架 ------------------------------------------------------------ */

/*
  整頁的容器是 62rem，跟導覽列的 .nav-inner 同寬——
  這樣導覽列的名字、內文、卡片牆三者的左緣會對在同一條線上。
*/
main {
  width: 100%;
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--gutter);
}

/*
  內文用的窄欄。**只收右邊，不置中。**
  置中的話，42rem 的文字會浮在 62rem 的卡片牆中間，兩者的左緣差一截，
  讀者捲動時會看到版面在左右晃。右邊留白多一點沒關係，左緣對齊才是看得出來的那件事。
*/
.wrap { width: 100%; max-width: var(--measure); margin-right: auto; }

/* 卡片牆：吃滿容器的寬度。一排才擺得下三張。 */
.wrap-wide { width: 100%; }

section { margin-top: clamp(3rem, 7vw, 4.5rem); }

/* --- 標題 --------------------------------------------------------------- */

h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

h2 {
  margin: 0 0 0.25rem;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
}

/* 標題底下那一句：說明這一節在回答什麼問題。不是裝飾，是導讀。 */
.section-note { margin: 0 0 1.5rem; color: var(--muted); font-size: 0.9375rem; }

/* 名字底下那一道赭紅。整個網域只有這一條紅線。 */
.rule { width: 3.5rem; height: 2px; margin: 1.75rem 0; border: 0; background: var(--ochre); }

/* --- 頁首（每頁最上面的名字或標題）--------------------------------------- */

.page-head { padding-top: clamp(2.5rem, 6vw, 3.75rem); }

.romanised {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.role { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9375rem; letter-spacing: 0.02em; }

.lede { margin: 0 0 1rem; font-size: 1.0625rem; }
.lede:last-child { margin-bottom: 0; }

/* --- 內文 --------------------------------------------------------------- */

.prose p { margin: 0 0 1.125rem; }
.prose p:last-child { margin-bottom: 0; }

/* 一句要被記住的話。左邊一道線，不加引號——引號會讓它看起來像在引用別人。 */
.pull {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.125rem;
  border-left: 2px solid var(--ochre);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.8;
}

/* --- 卡片 --------------------------------------------------------------- */

/*
  病症卡與手術卡共用。
  auto-fit + minmax 而不是固定欄數：卡片數量之後會增減，
  用固定欄數的話每次加一張都要回來改斷點。
  18rem 是中文標題加三行細目不會擠的下限。
*/
.cards {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

a.card:hover, a.card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }

/*
  病症卡左上角的小圖。
  用意是讓讀者在八張卡片裡「掃」而不是「讀」——他心裡已經有一個畫面
  （胸口、腿、手臂上的廔管），圖先對上了，才會停下來看標題。

  一律線稿、一律 currentColor、一律跟強調色同一個顏色：
  這些圖是路標不是插畫，填色或多色會變成八個互相爭取注意力的東西，
  反而回到沒有圖的狀態。stroke-width 跟導覽列的日月圖示同一個級距。
*/
.card-icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.625rem;
  color: var(--accent);
}

.card p { margin: 0; font-size: 0.9375rem; line-height: 1.75; }

.card ul { margin: 0; padding-left: 1.1rem; }
.card li { font-size: 0.9375rem; line-height: 1.75; }
.card li::marker { color: var(--accent); }

/* 卡片底部那一行「想知道怎麼開 →」。margin-top:auto 把它壓到底，
   文案長短不一的卡片才會對齊。 */
.card-more {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.875rem;
  color: var(--accent);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

a.card .card-more::after { content: "→"; transition: transform 0.18s ease; }
a.card:hover .card-more::after { transform: translateX(3px); }

/* --- 條列（學經歷、論文）------------------------------------------------- */

/*
  關於我那一頁的主體。drweimis 的做法是純條列不做卡片——
  學經歷本來就是被「掃過」的東西，套上卡片反而每一項都在爭取注意力。
*/
.facts { margin: 0; }

.facts > div { padding: 0.875rem 0; }
.facts > div + div { border-top: 1px solid var(--border); }

@media (min-width: 34rem) {
  .facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 1.5rem; align-items: baseline; }
  /*
    一個 <dt> 底下常常有兩三個 <dd>（專科資格、學會）。
    不把欄位釘死的話，第二個 <dd> 會被自動排版丟回左欄，
    看起來就像標籤欄裡混進了內容。
  */
  .facts dt { grid-column: 1; grid-row: 1; }
  .facts dd { grid-column: 2; }
}

.facts dt {
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.facts dd { margin: 0; font-size: 0.9375rem; }
.facts dd + dd { margin-top: 0.25rem; }

/* 一個欄位底下有好幾項（例如兩張專科證書）時，用這個分行，
   不要寫成好幾個 <dd>——理由在 about/index.html 那一段註解裡。 */
.facts dd.stack span { display: block; }
.facts dd.stack span + span { margin-top: 0.3rem; }

/* 論文引註。字級小一點、行距緊一點——它是給會看的人看的，
   不看的人掃過去就好，不需要佔用一般內文的重量。 */
.citation {
  margin: 0;
  padding: 1rem 0;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* 每一筆之間一道細線。三筆引註堆在一起時，
   不分隔的話讀者分不出上一筆的期刊和下一筆的標題。 */
.citation + .citation { border-top: 1px solid var(--border); }
.citation:first-child { padding-top: 0; }
.citation:last-child { padding-bottom: 0; }

/* 標題、作者、期刊各自一行。三者擠成一段的話，
   要找「這是哪一年、登在哪裡」得整段讀過去。 */
.citation .title,
.citation .authors,
.citation .journal { display: block; }

.citation .title { color: var(--text); font-weight: 600; }
.citation .journal { color: var(--muted); }
/* 作者群裡把自己標出來。不加粗的話，讀者要在十個名字裡找他是誰。 */
.citation .authors { color: var(--muted); }
.citation .authors b { color: var(--text); font-weight: 600; }

/* --- 行動呼籲（門診與掛號）----------------------------------------------- */

.cta {
  display: block;
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding: 1.5rem 1.625rem;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: var(--accent-soft);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease;
}

.cta:hover, .cta:focus-visible { transform: translateY(-2px); }
.cta h2 { margin-bottom: 0.375rem; }
.cta p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.cta .card-more { padding-top: 0.75rem; }
.cta .card-more::after { content: "→"; transition: transform 0.18s ease; }
.cta:hover .card-more::after { transform: translateX(3px); }

/* --- 門診資訊表 ---------------------------------------------------------- */

.panel {
  margin: 0;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

/* 急症那一段。用赭紅框而不是紅底白字——
   這是一句要被讀進去的提醒，不是警報器。 */
.urgent {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ochre);
  border-radius: 14px;
  font-size: 0.9375rem;
}

.urgent strong { color: var(--ochre); }

/*
  ★ 待補的欄位。
  刻意做得醒目——它的工作是讓人（包括我自己）一眼看到這裡還沒填完，
  不是讓頁面看起來完整。填上真的內容時連同 class 一起拿掉。
  2026-09-23 門診那四欄填完後目前沒有地方在用，留著給下一個還沒定案的欄位。
*/
.todo {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border: 1px dashed var(--ochre);
  border-radius: 6px;
  color: var(--ochre);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

/*
  還沒開放的欄位值。灰掉而不是用虛線框（.todo）——
  .todo 是講給我自己聽的「這裡還沒填」，這個是講給讀者聽的
  「這件事還沒發生」。對讀者來說後者是一個答案，不是一個缺口。
*/
.pending-value { color: var(--muted); }

/* --- 頁尾 --------------------------------------------------------------- */

.site-foot {
  margin-top: clamp(4rem, 9vw, 6rem);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.8;
}

/* 頁尾自己要有容器與左右留白——它在 <main> 外面，吃不到 main 的 padding。
   寬度跟 main 一樣是 62rem，左緣才會跟上面的內容對齊。 */
.site-foot > .wrap { max-width: 62rem; margin-left: auto; padding: 1.5rem var(--gutter) 3rem; }
.site-foot p { margin: 0 0 0.5rem; }
.site-foot p:last-child { margin-bottom: 0; }

/* 醫療免責。不是法律儀式——真的會有人拿這一頁的字對照自己的報告然後自己下結論。 */
.disclaimer { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}