/* 常勝美學 warm redesign (2026-10).
   Loaded last. Re-points the shared tokens for every page, then styles the new homepage (w-*).
   Palette: linen paper, sage panels, pine ink, a little honey for marks. Display type: LXGW WenKai TC. */
body {
  --paper: #faf7f1;      /* linen */
  --sand: #edf1e8;       /* sage wash */
  --sage: #dfe8da;
  --navy: #22433a;       /* pine: headings, primary actions */
  --pine-deep: #183129;
  --ink: #33413c;
  --muted: #5d6a64;
  --line: #e3ded2;
  --gold: #b98a3e;       /* honey: small marks only, never body text */
  --surface: #fffdf8;
  --line-green: #2f6b45;
  --serif: "LXGW WenKai TC", "Kaiti TC", "DFKai-SB", serif;
  --display: "LXGW WenKai TC", "Kaiti TC", "DFKai-SB", serif;
  background: var(--paper);
  color: var(--ink);
}
::selection { background: var(--sage); color: var(--pine-deep); }
:is(a,button,summary):focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: .02em; }

/* Header: same structure, calmer surface. */
.site-header { background: rgba(250,247,241,.92); border-bottom-color: var(--line); }
.desktop-nav-row { border-top: 1px solid var(--line); }
.desktop-nav a { color: var(--ink); }
.desktop-nav a[aria-current] { color: var(--navy); font-weight: 700; }
.desktop-nav a::after { background: var(--gold); }
.brand strong { font-family: var(--display); font-weight: 700; color: var(--navy); }
.header-location .header-address svg { color: var(--gold); }
.header-google-link>span { border-bottom-color: color-mix(in srgb, var(--navy) 35%, transparent); }
.button { background: var(--navy); border-color: var(--navy); }
.button-outline { background: transparent; color: var(--navy); border-color: color-mix(in srgb, var(--navy) 25%, var(--line)); }
.button-line { background: var(--line-green); border-color: var(--line-green); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .button:not(.button-outline):not(.button-line):hover { background: var(--pine-deep); }
}
.mobile-contact { background: var(--surface); }
.mobile-contact a:last-child { background: var(--line-green); }

/* Shared building blocks for the homepage */
.w-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.w-section-head { max-width: 640px; margin-bottom: 36px; }
.w-section-head h2 { font-size: clamp(1.75rem, 2.6vw, 2.35rem); line-height: 1.35; color: var(--navy); }
.w-section-head p { margin-top: 12px; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px; border-radius: 999px; font-size: 1rem; font-weight: 600; line-height: 1.3; text-decoration: none; border: 1.5px solid transparent; transition: background-color .16s ease-out, border-color .16s ease-out, transform .16s ease-out; }
.w-btn:active { transform: scale(.98); }
.w-btn-primary { background: var(--navy); color: #fff; }
.w-btn-line { background: var(--line-green); color: #fff; }
.w-btn-quiet { background: transparent; color: var(--navy); border-color: color-mix(in srgb, var(--navy) 28%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .w-btn-primary:hover { background: var(--pine-deep); }
  .w-btn-line:hover { background: #255838; }
  .w-btn-quiet:hover { background: var(--surface); border-color: var(--navy); }
}
.w-link { display: inline-block; margin-top: 20px; color: var(--navy); font-weight: 600; font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }

/* Hero: headline in WenKai, director in an arched window. */
.w-hero { position: relative; overflow: hidden; padding: 64px 0 76px; }
.w-hero::before { content: ""; position: absolute; right: -8vw; top: -12%; width: min(62vw, 820px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--sage), rgba(223,232,218,0) 72%); pointer-events: none; }
.w-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.w-hero-place { color: var(--muted); font-size: .9375rem; letter-spacing: .04em; }
.w-hero-copy h1 { margin-top: 0; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.28; letter-spacing: .03em; color: var(--navy); }
.w-hero-lead { max-width: 30em; margin-top: 26px; font-size: 1.0625rem; line-height: 1.95; }
.w-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.w-hero-note { margin-top: 18px; color: var(--muted); font-size: .875rem; }
.w-hero-portrait { justify-self: end; width: min(100%, 400px); }
.w-portrait-frame { overflow: hidden; border-radius: 20px; background: #e9ece8; box-shadow: 0 1px 0 var(--line), 0 24px 48px -28px rgba(34,67,58,.35); }
.w-portrait-frame img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 50% 14%; }
.w-hero-portrait figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 8px 0; }
.w-doctor-name { font-family: var(--display); font-size: 1.375rem; font-weight: 700; color: var(--navy); }
.w-doctor-id { display: flex; flex-direction: column; gap: 2px; }
.w-doctor-role { color: var(--muted); font-size: .9375rem; }
.w-about-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--navy) 28%, transparent); color: var(--navy); font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.w-about-link::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .w-about-link:hover { border-color: var(--navy); background: var(--surface); } }

/* Promises: four plain statements on a sage band, not a numbered list. */
.w-promises { background: var(--sand); padding: 44px 0; }
.w-promise-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.w-promise-list li { padding: 4px 28px; }
.w-promise-list li:first-child { padding-left: 0; }
.w-promise-list li + li { border-left: 1px solid color-mix(in srgb, var(--navy) 14%, transparent); }
.w-promise-list h3 { font-family: var(--display); font-size: 1.3rem; color: var(--navy); }
.w-promise-list p { margin-top: 8px; font-size: .9375rem; line-height: 1.8; word-break: keep-all; }

/* Needs */
.w-needs { padding: 84px 0 24px; }
.w-needs-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.w-needs .w-section-head { margin: 0; }
.w-needs-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.w-needs-links a { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 14px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--navy); font-weight: 600; font-size: 1.0625rem; transition: border-color .16s ease-out, background-color .16s ease-out; }
.w-needs-links a::after { content: ""; width: 9px; height: 9px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); flex: none; margin-left: 12px; }
@media (hover: hover) and (pointer: fine) { .w-needs-links a:hover { border-color: var(--navy); } }

/* First visit journey: real sequences, so they are numbered. */
.w-journey { padding: 72px 0 84px; }
.w-journey-card { max-width: 920px; padding: 34px 36px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.w-journey-lead { color: var(--muted); font-size: .9375rem; }
.w-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.w-path { padding: 20px 22px; border-radius: 18px; }
.w-path-nhi { background: var(--sand); }
.w-path-self { background: #f6efe3; }  /* warm sand, so the two paths read apart */
.w-path h3 { font-family: var(--display); font-size: 1.25rem; color: var(--navy); }
.w-path-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-top: 12px; }
.w-path-steps span { padding: 5px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(34,67,58,.08); color: var(--ink); font-size: .9375rem; line-height: 1.6; }
.w-path-steps i { font-style: normal; color: var(--gold); font-size: .875rem; }
.w-path .w-link { margin-top: 14px; }
.w-steps { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: wstep; }
.w-steps li { position: relative; counter-increment: wstep; padding: 0 0 18px 48px; }
.w-steps li::before { content: counter(wstep); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--sand); color: var(--navy); font-weight: 700; font-size: .875rem; display: grid; place-items: center; }
.w-steps li:last-child { padding-bottom: 0; }
.w-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 4px; width: 1px; background: var(--line); }
.w-steps strong { display: block; color: var(--navy); font-weight: 600; line-height: 1.9; }
.w-steps span { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.7; }
.w-journey-note { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9375rem; }

/* Digital dentistry film: the vertical clip beside its explanation, played only on request. */
.w-film { padding: 72px 0 84px; background: var(--sand); }
.w-film-inner { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; }
.w-film .w-section-head { margin: 0; }
.w-film .w-section-head p { word-break: keep-all; }  /* wrap after punctuation, not inside 說明 */
.w-film-media { margin: 0; width: 100%; }
.w-film-media video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 20px; background: var(--pine-deep); }

/* Treatment pages: the clinic's 3D procedure film, centred above the treatment timeline (院長 2026-10-19). */
.treatment-film-media { margin: 0 auto; max-width: 260px; }
.treatment-film-media video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 16px; background: var(--pine-deep); }
.treatment-film-media figcaption { margin-top: 12px; text-align: center; font-size: .8125rem; line-height: 1.8; color: var(--muted); text-wrap: pretty; }
@media (max-width: 620px) { .treatment-film-media { max-width: 220px; } }

/* Director's letter: the one large typographic moment. */
.w-letter { padding: 96px 0; }
.w-letter-inner { max-width: 820px; }
.w-letter blockquote { margin: 0; }
.w-letter blockquote p { font-family: var(--display); font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.w-letter blockquote p::before { content: "「"; margin-left: -.9em; color: var(--gold); }
.w-letter blockquote p::after { content: "」"; color: var(--gold); }
.w-letter-body { max-width: 34em; margin-top: 26px; font-size: 1.0625rem; line-height: 1.95; }
.w-letter-sign { margin-top: 18px; font-family: var(--display); font-size: 1.25rem; color: var(--navy); }

/* Visit */
.w-visit { padding: 64px 0; background: var(--sand); }
.w-visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.w-visit h2 { font-size: clamp(1.75rem, 2.6vw, 2.35rem); color: var(--navy); }
.w-visit-address { margin-top: 14px; font-family: var(--display); font-size: 1.375rem; color: var(--navy); }
.w-visit p + p { margin-top: 6px; }
.w-visit-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }
.w-visit-actions .w-link { margin: 0 0 0 8px; }

/* Education teaser and footer pick up the palette. */
.education-teaser { background: var(--paper); }
.site-footer { background: var(--surface); border-top: 1px solid var(--line); }

@media (max-width: 960px) {
  .w-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .w-hero-portrait { justify-self: start; }
  .w-promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .w-promise-list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .w-needs-inner, .w-visit-grid { grid-template-columns: 1fr; gap: 28px; }
  .w-visit-actions { justify-content: flex-start; }
  .w-film-inner { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
}
@media (max-width: 620px) {
  .w-hero { padding: 28px 0 48px; }
  .w-hero::before { right: -40vw; top: -4%; width: 120vw; }
  .w-hero-grid { gap: 32px; }
  .w-hero-copy h1 { font-size: 2.45rem; margin-top: 12px; }
  .w-hero-lead { font-size: 1rem; margin-top: 18px; }
  .w-hero-actions { margin-top: 26px; }
  .w-hero-actions .w-btn { flex: 1 1 0; padding-inline: 18px; }
  .w-hero-portrait { order: -1; width: 100%; display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: end; }
  .w-portrait-frame { border-radius: 14px; }
  .w-hero-portrait figcaption { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 0 2px; }
  .w-hero-portrait { align-items: center; }
  .w-promises { padding: 32px 0; }
  .w-promise-list { grid-template-columns: 1fr; gap: 0; }
  .w-promise-list li, .w-promise-list li:first-child { padding: 16px 0; border-left: 0; }
  .w-promise-list li + li { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--navy) 14%, transparent); }
  .w-needs { padding: 52px 0 8px; }
  .w-needs-links { gap: 8px; }
  .w-needs-links a { min-height: 56px; padding: 12px 16px; font-size: 1rem; border-radius: 14px; }
  .w-journey { padding: 48px 0 56px; }
  .w-paths { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .w-path { padding: 16px 16px 18px; border-radius: 16px; }
  .w-journey-card { padding: 26px 22px; border-radius: 20px; }
  .w-film { padding: 48px 0 56px; }
  .w-film-inner { grid-template-columns: 1fr; gap: 24px; }
  .w-film-media { justify-self: center; max-width: 220px; }
  .w-film-media video { border-radius: 16px; }
  .w-letter { padding: 64px 0; }
  .w-letter blockquote p { font-size: 1.6rem; }
  .w-letter blockquote p::before { margin-left: -.5em; }
  .w-visit { padding: 48px 0; }
  .w-visit-actions .w-btn { flex: 1 1 calc(50% - 6px); }
  .w-visit-actions .w-btn-quiet { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .w-btn, .w-needs-links a { transition: none; } }

/* Footer */
.site-footer { padding-top: 56px; }
.site-footer .footer-main { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.w-footer-clinic p { color: var(--muted); font-size: .9375rem; line-height: 1.9; }
.w-footer-clinic p + p { margin-top: 0; }
.w-footer-clinic a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.w-footer-name { font-family: var(--display); font-size: 1.375rem; font-weight: 700; color: var(--navy) !important; margin-bottom: 8px; }
.site-footer .footer-main nav a { color: var(--ink); }
.site-footer .trademark-notice { margin-top: 36px; color: var(--muted); font-size: .75rem; line-height: 1.8; }
.site-footer .trademark-notice + .copyright { margin-top: 12px; }

/* Calmer line endings for Chinese copy */
:is(.w-hero, .w-letter, .w-section-head, .w-journey, .w-visit) :is(p, h1, h2) { text-wrap: pretty; }

@media (max-width: 620px) {
  .site-footer .footer-main { grid-template-columns: 1fr; gap: 28px; }
  /* LINE and phone live in the fixed bottom bar on phones (existing site rule). */
  .w-visit-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .w-visit-actions .w-link { margin: 0; align-self: center; }
}

/* ---------- Treatment pages (植牙、全瓷冠、智齒、活動假牙…) ---------- */
body .treatment-hero h1, body .page-intro h1 { font-family: var(--display); font-weight: 700; letter-spacing: .02em; color: var(--navy); }
body .treatment-hero .price-tag { display: inline-block; margin-top: 14px; padding: 0 0 4px; border-radius: 0; background: transparent; font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--navy); border-bottom: 3px solid color-mix(in srgb, var(--gold) 70%, transparent); }
body .treatment-method p { color: var(--muted); }
body .treatment-doctor { border: 0; background: var(--sand); border-radius: 20px; }
body .treatment-doctor-copy { color: var(--ink); }
body .treatment-doctor-copy p:first-child { font-weight: 600; color: var(--navy); }

/* Sections sit on the page, not in boxes; a hairline separates them. */
body .article-body > .article-section { margin: 0; padding: 40px 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); }
body .article-body > .article-section:last-of-type { border-bottom: 0; }
body .article-body > .article-section > h2 { font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--navy); margin-bottom: 8px; }

/* Step timeline */
body .w-timeline { display: block; list-style: none; margin: 24px 0 0; padding: 0; counter-reset: wtl; }
body .w-timeline > .step-card { position: relative; counter-increment: wtl; margin: 0; padding: 0 0 26px 52px; border: 0; border-radius: 0; background: transparent; }
body .w-timeline > .step-card::before { content: counter(wtl); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 700; font-size: .9375rem; }
body .w-timeline > .step-card:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 40px; bottom: 6px; width: 1px; background: color-mix(in srgb, var(--navy) 22%, transparent); }
body .w-timeline .step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
body .article-section .w-timeline h3 { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--navy); }
body .w-timeline .step-payment { flex: none; margin: 0; color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
body .w-timeline .step-payment + p, body .w-timeline .step-head + p { margin-top: 4px; color: var(--muted); font-size: .9375rem; line-height: 1.8; }
body .step-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 4px 0 0 52px; padding-top: 16px; border-top: 1.5px solid var(--navy); }
body .step-total span { color: var(--navy); font-weight: 600; }
body .step-total strong { font-family: var(--display); font-size: 1.5rem; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Optional flow, collapsed by default */
.w-steps-optional details { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.w-steps-optional summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 22px; cursor: pointer; list-style: none; font-family: var(--display); font-size: 1.375rem; font-weight: 700; color: var(--navy); }
.w-steps-optional summary::-webkit-details-marker { display: none; }
.w-steps-optional summary span { flex: none; font-family: var(--sans); font-size: .875rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.w-steps-optional summary span::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg) translateY(-2px); transition: transform .16s ease-out; }
.w-steps-optional details[open] summary span::after { transform: rotate(-135deg) translateY(-2px); }
.w-steps-optional details[open] summary span { font-size: 0; gap: 0; }
.w-steps-optional details > .w-timeline, .w-steps-optional details > .step-total { margin-left: 22px; margin-right: 22px; }
.w-steps-optional details > .step-total { margin-left: 74px; margin-bottom: 22px; }
body .article-body > .w-steps-optional { border-bottom: 0; padding-top: 8px; }

/* "還有其他問題？" becomes one clear row link */
body .article-body > .treatment-questions { position: relative; padding: 24px 56px 24px 24px; margin: 8px 0 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
body .article-body > .treatment-questions > h2 { font-size: 1.375rem; margin: 0; }
body .treatment-questions p { margin-top: 4px; color: var(--muted); font-size: .9375rem; }
body .treatment-questions > .text-link { position: static; display: inline-block; margin-top: 8px; border: 0; padding: 0; color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
body .treatment-questions > .text-link::before { content: ""; position: absolute; inset: 0; border-radius: 18px; }
body .treatment-questions::after { content: ""; position: absolute; right: 26px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: translateY(-50%) rotate(45deg); }

/* Cases */
body .case-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
body .case-heading p { font-weight: 700; color: var(--navy); }
body .case-image { background: #f1efe8; }
body .patient-note { background: var(--sand); border-radius: 16px; }

@media (min-width: 621px) { body .shell.treatment-hero-text { width: min(860px, calc(100% - 96px)); max-width: none; } body .shell.treatment-hero-text.ortho-hero { width: min(960px, calc(100% - 96px)); } }
@media (max-width: 620px) {
  body .article-body > .article-section { padding: 32px 0; }
  body .w-timeline > .step-card { padding-left: 46px; padding-bottom: 22px; }
  body .w-timeline > .step-card::before { width: 30px; height: 30px; font-size: .875rem; }
  body .w-timeline > .step-card:not(:last-child)::after { left: 14.5px; }
  body .step-total { margin-left: 46px; }
  .w-steps-optional summary { font-size: 1.2rem; padding: 14px 18px; }
  .w-steps-optional details > .w-timeline { margin: 8px 16px 0; }
  .w-steps-optional details > .step-total { margin: 0 16px 18px 62px; }
  body .article-body > .treatment-questions { padding: 20px 48px 20px 20px; }
  body .treatment-questions::after { right: 22px; }
}

/* ---------- Orthodontics page ---------- */
body .ortho-hero > div > p:first-of-type { font-family: var(--display); font-size: 1.25rem; color: var(--navy); }
body .ortho-scope-group { border: 0; background: var(--sand); border-radius: 18px; padding: 16px 18px; }
body .ortho-scope-group .ortho-scope-title { color: var(--navy); }
body .ortho-hero .ortho-scope li { color: var(--ink); font-weight: 500; }
body .patient-shortcuts a { min-height: 44px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--navy) 28%, transparent); background: transparent; color: var(--navy); font-weight: 600; }
body .ortho-hero .patient-shortcuts a:first-child { background: var(--navy); border-color: var(--navy); color: #fff; }
body .ortho-section > h2 { font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--navy); }

body .ortho-plan { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
body .ortho-plan h3 { font-family: var(--display); font-size: 1.375rem; color: var(--navy); }
body .ortho-plan-price p { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: 0; color: var(--navy); }
body .ortho-plan-price { display: inline-block; border-bottom: 3px solid color-mix(in srgb, var(--gold) 70%, transparent); padding-bottom: 2px; }

/* Ortho steps share the numbered timeline look */
body .ortho-flow { border-top: 0; padding-top: 0; }
body .w-ortho-timeline { counter-reset: wotl; padding: 0; margin-top: 8px; }
body .w-ortho-timeline li { counter-increment: wotl; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 0 0 26px 52px; border-left: 0; }
body .w-ortho-timeline li::before { content: counter(wotl); top: 2px; left: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 700; font-size: .9375rem; }
body .w-ortho-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 40px; bottom: 6px; width: 1px; background: color-mix(in srgb, var(--navy) 22%, transparent); }
body .w-ortho-timeline h3 { font-size: 1.125rem; line-height: 1.6; color: var(--navy); }
body .w-ortho-timeline .ortho-step-fee p { font-weight: 700; white-space: nowrap; }
body .w-ortho-timeline .ortho-step-copy { margin-top: 4px; font-size: .9375rem; line-height: 1.8; }

body .ortho-benefits { border: 0; background: var(--sand); border-radius: 22px; }
body .ortho-benefits > h2 { margin-bottom: 12px; }
body .ortho-benefit-list > div { border-top-color: color-mix(in srgb, var(--navy) 12%, transparent); }
body .ortho-benefit-list h3 { color: var(--navy); }

body .ortho-questions { position: relative; padding: 24px 56px 24px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
body .ortho-questions > h2 { font-size: 1.375rem; margin-bottom: 4px; }
body .ortho-questions > p { font-size: .9375rem; }
body .ortho-questions > a { position: static; min-height: 0; margin-top: 8px; border: 0; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
body .ortho-questions > a::before { content: ""; position: absolute; inset: 0; border-radius: 18px; }
body .ortho-questions::after { content: ""; position: absolute; right: 26px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: translateY(-50%) rotate(45deg); }
body .ortho-payment { border-radius: 18px; background: var(--sand); }
body .ortho-payment h3 { color: var(--navy); }

@media (max-width: 620px) {
  body .w-ortho-timeline li { grid-template-columns: minmax(0, 1fr) auto; padding-left: 46px; padding-bottom: 22px; }
  body .w-ortho-timeline li::before { width: 30px; height: 30px; font-size: .875rem; }
  body .w-ortho-timeline li:not(:last-child)::after { left: 14.5px; }
  body .w-ortho-timeline .ortho-step-fee { margin-top: 0; }
  body .ortho-questions { padding: 20px 48px 20px 20px; }
  body .ortho-questions::after { right: 22px; }
}
/* 院長 2026-10-19: questions cards with several education links are a list, not one whole-card link. */
body .article-body > .treatment-questions.has-reading, body .ortho-questions.has-reading { padding: 24px; }
body .treatment-questions.has-reading::after, body .ortho-questions.has-reading::after { content: none; }
body .treatment-questions.has-reading > .text-link::before, body .ortho-questions.has-reading > a::before { content: none; }
body .treatment-questions .treatment-reading-title, body .ortho-questions .treatment-reading-title { margin-top: 18px; color: var(--navy); font-weight: 700; font-size: .9375rem; }
body .treatment-reading { list-style: none; margin: 8px 0 0; padding: 0; }
body .treatment-reading li { border-top: 1px solid var(--line); }
body .treatment-reading li:last-child { border-bottom: 1px solid var(--line); }
body .treatment-reading a { position: relative; display: block; padding: 12px 28px 12px 0; color: var(--navy); font-weight: 600; line-height: 1.6; border: 0; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
body .treatment-reading a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: translateY(-50%) rotate(45deg); }
@media (max-width: 620px) { body .article-body > .treatment-questions.has-reading, body .ortho-questions.has-reading { padding: 20px; } }
/* New general-dentistry pages: Chinese lines break after punctuation, so no single character is left on the last line. */
body .gd-page-hero p, body .gd-page-body p, body .gd-page-body li, body .general-dentistry .gd-lead { word-break: keep-all; overflow-wrap: anywhere; }
/* Long fees ("每月 NT$10,000，至矯正費用付清") wrap under themselves instead of squeezing the title. */
body .w-ortho-timeline li { grid-template-columns: max-content minmax(0, 1fr); }
body .w-ortho-timeline .ortho-step-fee { justify-self: end; text-align: right; }
body .w-ortho-timeline .ortho-step-fee p { white-space: normal; text-wrap: balance; }
@media (max-width: 620px) { body .w-ortho-timeline li { grid-template-columns: max-content minmax(0, 1fr); } }

/* ---------- Shared page intro ---------- */
body .page-intro { border-bottom: 0; padding-bottom: 28px; }
body .page-intro p, body .page-intro .intro-copy { color: var(--muted); }
body .patient-shortcuts, body .faq-categories { gap: 8px; }
body .faq-categories a { min-height: 44px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--navy) 28%, transparent); background: transparent; color: var(--navy); font-weight: 600; }
.eyebrow::before { display: none; }

/* ---------- 門診資訊 ---------- */
body .visit-layout .article-section { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 32px 0; box-shadow: none; }
body .visit-layout .article-section:last-child { border-bottom: 0; }
body .visit-layout .article-section > h2 { font-family: var(--display); color: var(--navy); }
body .article-section .clinic-timetable { border-radius: 16px; overflow: hidden; }
body .clinic-timetable thead th { background: var(--navy); }
body .clinic-timetable .clinic-open { background: var(--sand); color: var(--navy); }
body .clinic-timetable .clinic-guest { background: #f4ead6; color: #6f4f1d; }
body .clinic-timetable .clinic-closed { background: #f1efe9; color: var(--muted); }
body .first-appointment { background: var(--sand); border-radius: 18px; }
body .visit-address { font-family: var(--display); font-size: 1.375rem; color: var(--navy); }

/* ---------- 自費項目與收費標準: one price board per category ---------- */
body .fee-section > h2 { font-family: var(--display); color: var(--navy); }
body .fee-section table { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
body .fee-section th { background: var(--sand); color: var(--navy); }
body .fee-section td:nth-child(2) { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
body .fee-section td:first-child a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
body .fee-notes { background: var(--sand); border: 0; border-radius: 18px; }
@media (max-width: 620px) {
  body .fee-section table { border: 0; background: transparent; }
  body .fee-section tbody { gap: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
  body .fee-section tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 16px 18px; border-radius: 0; background: transparent; }
  body .fee-section tr + tr { border-top: 1px solid var(--line); }
  body .fee-section td { display: block; padding: 0 !important; border: 0; }
  body .fee-section td::before { display: none !important; content: none !important; }
  body .fee-section td:first-child { font-weight: 700; color: var(--navy); }
  body .fee-section td:nth-child(2) { text-align: right; font-size: 1rem; }
  body .fee-section td:nth-child(3) { grid-column: 1 / -1; margin-top: 4px; color: var(--muted); font-size: .9375rem; line-height: 1.75; }
}

/* ---------- 常見問題 ---------- */
body .faq-item { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
body .faq-item[open] { border-color: color-mix(in srgb, var(--navy) 35%, transparent); }
body .faq-item summary { border-radius: 16px; }
body .faq-item summary h2 { color: var(--navy); }
body .faq-number { color: var(--gold); font-weight: 700; }
body .faq-item summary::after { color: var(--gold); }
body .faq-answer { color: var(--ink); }
body .faq-related a, body .faq-related .text-link { color: var(--navy); font-weight: 600; border-bottom-color: var(--gold); }
.faq-title-suffix { color: var(--muted); font-family: var(--sans); font-size: .55em; }

/* ---------- 治療介紹 list: whole card is the link ---------- */
body .treatment-cards .service-card { position: relative; border: 1px solid var(--line); box-shadow: none; border-radius: 18px; }
body .treatment-cards h2 { font-family: var(--display); color: var(--navy); }
body .treatment-cards .treatment-card-copy > p { color: var(--muted); }
body .treatment-cards a.treatment-card-link { color: var(--navy); font-weight: 600; border: 0; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
body .treatment-cards a.treatment-card-link::before { content: ""; position: absolute; inset: 0; border-radius: 18px; }
body .treatment-cards .service-card::after { content: ""; position: absolute; right: 24px; top: 30px; width: 9px; height: 9px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { body .treatment-cards .service-card:hover { border-color: var(--navy); transform: none; } }

/* ---------- 關於院長 ---------- */
.w-bio-photo { width: min(100%, 320px); margin: 0 0 24px; }
.w-bio-photo img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 50% 14%; border-radius: 20px; background: #e9ece8; box-shadow: 0 24px 48px -30px rgba(34,67,58,.4); }
body .physician-profile { border: 0; background: var(--sand); border-radius: 22px; box-shadow: none; }
body .physician-profile h2, body .physician-profile h3 { font-family: var(--display); color: var(--navy); }
body .physician-profile li::marker { color: var(--gold); }
@media (max-width: 620px) { .w-bio-photo { width: 200px; } }

/* ---------- 一般牙科: steps as the shared timeline ---------- */
body .gd-services article { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
body .gd-services h2, body .gd-root h2, body .gd-periodontal h2, body .gd-fees h2 { font-family: var(--display); color: var(--navy); }
body .gd-root { background: var(--sand); border-block: 0; }
body .gd-steps { display: block; counter-reset: gdstep; margin: 20px 0 8px; }
body .gd-steps li { position: relative; counter-increment: gdstep; padding: 0 0 22px 52px; border: 0; border-radius: 0; background: transparent; }
body .gd-steps li::before { content: counter(gdstep); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 700 .9375rem/1 var(--sans); }
body .gd-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 40px; bottom: 4px; width: 1px; background: color-mix(in srgb, var(--navy) 22%, transparent); }
body .gd-steps h3 { margin: 0 0 2px; color: var(--navy); line-height: 1.6; }
body .gd-steps p { color: var(--muted); font-size: .9375rem; }
body .gd-crown { border-left: 0; border-radius: 18px; background: var(--surface); }
body .gd-case-picker button { border-radius: 999px; }
body .gd-walk-in-note { background: var(--surface); }

/* ---------- 缺牙怎麼補: three options are not a sequence ---------- */
.mt-number { display: none !important; }
body .mt-count-grid article, body .mt-method-grid article { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
body .missing-teeth h2, body .missing-teeth h1 { font-family: var(--display); color: var(--navy); }

/* ---------- 衛教 ---------- */
body .education-teaser-card, body [class*="education-article"] { border-color: var(--line); }
body .education-category, body .education-eyebrow { color: #7a5a22; }

/* Education article: key points first */
.education-key-points { margin: 20px 0 28px; padding: 20px 22px; border-radius: 18px; background: var(--sand); }
.education-key-points h2 { margin: 0 0 8px; font-family: var(--display); font-size: 1.25rem; color: var(--navy); }
.education-key-points ul { margin: 0; padding: 0; list-style: none; }
.education-key-points li { position: relative; padding-left: 20px; color: var(--ink); font-size: 1rem; line-height: 1.8; }
.education-key-points li + li { margin-top: 6px; }
.education-key-points li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.education-byline { margin: 10px 0 0; font-size: .875rem; color: var(--muted); }
.education-byline a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
/* Education list cards: the same key points, compact */
.education-card-points { margin: 0 0 18px; padding: 0; list-style: none; }
.education-card-points li { position: relative; padding-left: 16px; color: var(--muted); font-size: .9375rem; line-height: 1.75; }
.education-card-points li + li { margin-top: 4px; }
.education-card-points li::before { content: ""; position: absolute; left: 1px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
body .education-reading h1 { font-family: var(--display); color: var(--navy); }
body .education-body h2 { font-family: var(--display); color: var(--navy); }
/* Fee rows on phones: stack name, price, note so long prices never squeeze the item name. */
@media (max-width: 620px) {
  body .fee-section tr { grid-template-columns: 1fr; gap: 2px; }
  body .fee-section td:nth-child(2) { text-align: left; font-size: 1.0625rem; }
  body .fee-section td:nth-child(2) * { display: inline; }
}
body .visit-layout .article-section { padding-inline: 0 !important; }

/* 院長 2026-10-19: sections below the first screen fade in once; site.js only adds .reveal when motion is allowed. */
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); }
  .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease-out var(--reveal-delay, 0s), transform .6s cubic-bezier(.23, 1, .32, 1) var(--reveal-delay, 0s); }
  body .treatment-cards .service-card, .education-teaser-card, .education-card, .w-needs-links a, .gd-toc a { transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .16s ease-out, background-color .16s ease-out; }
  .treatment-cards .service-card:active, .education-teaser-card:active, .education-card:active, .w-needs-links a:active { transform: scale(.985); transition-duration: 80ms; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body .treatment-cards .service-card:hover, .education-teaser-card:hover, .education-card:hover, .w-needs-links a:hover, .gd-toc a:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(24, 55, 78, .09); }
}
/* Keep biography paragraph spacing when a local-copy paragraph is omitted. */
body[data-page="關於院長"] .article-section template[data-local-copy-empty] + p { margin-top: 1rem; }