/* 徐立真醫師個人網站｜Aman 方向改版 2026-10-20
   原則：文字小而安靜、照片說話；全站重複同一種卡片模組；照片比例只用 2:1、16:10、3:2、4:5 */

@font-face{font-family:"Hsu Serif";src:url(assets/fonts/hsu-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hsu Sans";src:url(assets/fonts/hsu-sans.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --paper:#f5f1ea; --ink:#343830; --muted:#62665d; --stone:#e2dcd2;
  --wash:#eae6dd; --accent:#535e4f;
  --serif:"Hsu Serif","Noto Serif TC","Songti TC",serif;
  --sans:"Hsu Sans","Noto Sans TC","PingFang TC",sans-serif;
  --gutter:clamp(24px,5vw,72px); --max:1296px;
  --section:clamp(96px,10vw,160px); --gap:clamp(24px,3vw,48px);
  --header-h:84px; --motion:220ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.9 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.6}
h1{font-size:clamp(26px,2.3vw,34px);letter-spacing:.06em}
h2{font-size:clamp(23px,2vw,30px);letter-spacing:.05em}
h3{font-size:clamp(19px,1.45vw,21px);letter-spacing:.04em}
p{max-width:42em}
a{color:inherit;text-underline-offset:7px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
img{display:block;width:100%;height:auto}
button,summary{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button{color:inherit;background:none;border:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.wrap{width:min(calc(100% - 2 * var(--gutter)),var(--max));margin-inline:auto}
.section{margin-top:var(--section)}
.skip{position:absolute;top:8px;left:8px;z-index:30;transform:translateY(-200%);background:var(--paper);padding:10px}
.skip:focus{transform:none}

/* 共用元件 */
.eyebrow{font:400 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.text{color:var(--muted);margin-top:16px}
.link{display:inline-flex;align-items:center;gap:20px;margin-top:20px;min-height:44px;text-decoration:none;font-size:15px}
.link .label{text-decoration:underline;text-underline-offset:7px}
.arrow{font-size:20px;transition:transform var(--motion)}
.link:hover .arrow{transform:translateX(5px)}
.button{display:inline-flex;justify-content:space-between;align-items:center;gap:42px;padding:15px 24px;background:var(--ink);color:var(--paper);min-height:56px;text-decoration:none;letter-spacing:.06em}
.button:hover{background:var(--accent);color:var(--paper)}
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}

/* 卡片模組：照片 → 小標籤 → 標題 → 一兩行說明 → 連結 */
.card>img{object-fit:cover}
.card>img+.eyebrow,.card .card-copy{margin-top:24px}
.card>img+.eyebrow{display:block}
.card>.text{font-size:15px;margin-top:10px}
.card details{margin-top:14px;font-size:15px}
.card details>summary{min-height:44px;display:flex;align-items:center;gap:12px;width:fit-content;text-decoration:underline;text-underline-offset:7px}
.card details>summary::after{content:'＋';text-decoration:none;display:inline-block}
.card details[open]>summary::after{content:'−'}
.card details>p{color:var(--muted);margin-top:6px}

/* 頁首：左選單、中名字、右預約 */
.site-header{position:sticky;top:0;z-index:20;background:var(--paper)}
.header-inner{height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.brand{text-decoration:none;text-align:center;line-height:1;white-space:nowrap}
.brand strong{display:block;font:400 24px/1 var(--serif);letter-spacing:.28em;margin-right:-.28em}
.brand span{display:block;font-size:9px;letter-spacing:.3em;margin-top:9px;margin-right:-.3em;color:var(--muted)}
.header-cta{justify-self:end;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;background:var(--ink);color:var(--paper);font-size:14px;letter-spacing:.1em;text-decoration:none;white-space:nowrap}
.header-cta:hover{background:var(--accent);color:var(--paper)}
.menu{justify-self:start}
.menu>summary{display:flex;align-items:center;gap:12px;min-height:44px;min-width:44px;font-size:14px;letter-spacing:.1em}
.menu-icon{width:18px;height:7px;border-block:1px solid currentColor;transition:height var(--motion)}
.menu[open] .menu-icon{height:1px;border-bottom:0}
.menu[open]>summary::after{content:'';position:fixed;inset:var(--header-h) 0 0 0;background:rgba(52,56,48,.28);z-index:-1;cursor:default}
.menu-panel{position:fixed;top:var(--header-h);left:0;bottom:0;width:min(400px,100%);background:var(--paper);padding:40px var(--gutter);display:flex;flex-direction:column;gap:6px;overflow-y:auto;z-index:1}
.menu-panel>a{font:400 21px/1.6 var(--serif);letter-spacing:.06em;text-decoration:none;padding-block:8px;width:fit-content}
.menu-contact{margin-top:auto;padding-top:32px;font-size:14px;color:var(--muted);line-height:2}

/* 首屏：滿版照片 */
.hero{--hero-w:960px;padding-top:clamp(24px,4vw,56px)}
/* 照片固定最大寬度、置中，大螢幕兩側留白（參考 Aman）；文字欄與照片同寬 */
.hero picture{display:block;width:min(calc(100% - 2 * var(--gutter)),var(--hero-w));margin-inline:auto}
.hero img{aspect-ratio:2/1;object-fit:cover;object-position:50% 0}
.hero-intro{width:min(calc(100% - 2 * var(--gutter)),var(--hero-w));display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gap);align-items:end;margin-top:48px}
.hero-intro .eyebrow{grid-column:1/-1;margin-bottom:-8px}
.hero-side p{color:var(--muted)}
.hero-side .link{margin-top:12px}

/* 理念與醫師：大橫幅＋直式，兩張照片同高 */
.stories{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap);align-items:start}
.philosophy>img{aspect-ratio:16/10}
.physician>img{aspect-ratio:4/5}
.physician .role{font-size:14px;margin-top:6px}
.credential-toggle{margin-top:12px}
.credential-toggle>summary{min-height:44px;display:flex;align-items:center;gap:12px;width:fit-content;font-size:15px}
.credential-toggle>summary::after{content:'＋'}
.credential-toggle[open]>summary::after{content:'−'}
.credentials{padding:12px 0 0 1.2em;margin:0;font-size:14px;color:var(--muted);line-height:2}

/* 治療：左側介紹＋三張等寬卡片 */
.treatments{display:grid;grid-template-columns:1fr 3fr;gap:var(--gap);align-items:start}
.treatment-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.treatment>img{aspect-ratio:4/5}

/* 案例 */
.case-section{background:var(--wash);padding-block:clamp(72px,8vw,120px)}
.case-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end;max-width:1060px;margin:auto}
.case-head .text{margin-top:0}
.case-picker{display:grid;grid-template-columns:repeat(3,1fr);max-width:1060px;margin:48px auto 0;border-bottom:1px solid var(--stone)}
.case-picker[hidden]{display:none}
.case-picker button{text-align:left;padding:14px 4px 16px;font:400 18px/1.5 var(--serif);letter-spacing:.05em;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--motion),border-color var(--motion)}
.case-picker button .eyebrow{display:block;margin-bottom:6px}
.case-picker button:hover{color:var(--ink)}
.case-picker button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
.case{max-width:1060px;margin:40px auto 0}
.case[hidden]{display:none}
.case+.case{margin-top:72px}
.js-cases .case+.case{margin-top:40px}
.case-title{font:400 20px/1.6 var(--serif);letter-spacing:.05em}
.case-title .eyebrow{display:block;margin-bottom:6px}
.js-cases .case-title{display:none}
.case-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:24px 0 8px}
.case-tabs[hidden]{display:none}
.case-tabs button{padding:10px 22px;min-height:44px;font-size:14px;letter-spacing:.08em;transition:background var(--motion)}
.case-tabs button:hover{background:var(--stone)}
.case-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.case-pair{margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.case-pair[hidden]{display:none}
.case-pair img{height:auto}  /* 比例取自 width/height 屬性；同一組前後照片比例相同 */
.case-pair figcaption{display:flex;justify-content:space-between;margin-top:12px;font-size:14px}
.case-pair figcaption span{color:var(--muted)}
.case-note{max-width:1060px;margin:24px auto 0;font-size:13px;color:var(--muted)}

/* 診所：閃電型（左右交錯）排列 */
.clinic-intro{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px}
.clinic-intro .text{max-width:24em;margin-top:0}
.clinic-list{display:flex;flex-direction:column;gap:clamp(56px,7vw,104px)}
.clinic-item{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,80px);align-items:center}
.clinic-item.is-portrait{grid-template-columns:5fr 7fr}
.clinic-item.is-landscape.reverse{grid-template-columns:5fr 7fr}
.clinic-item.is-portrait.reverse{grid-template-columns:7fr 5fr}
.clinic-item.reverse>img{order:2}
.clinic-item.is-landscape>img{aspect-ratio:4/3;object-fit:cover}
.clinic-item.is-portrait>img{aspect-ratio:4/5;object-fit:cover}
.clinic-item.is-portrait:not(.reverse)>img{width:82%;justify-self:end}
.clinic-item.is-portrait.reverse>img{width:82%}
.clinic-bottom>img{aspect-ratio:3/2;object-fit:cover}
.clinic-copy address{font:normal 15px/1.9 var(--sans);margin-top:12px;color:var(--muted)}
.clinic-links{display:flex;gap:0 28px;flex-wrap:wrap;margin-top:16px}
.clinic-links .link{margin-top:4px}
.clinic-bottom{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center;margin-top:clamp(72px,8vw,120px)}
.clinic-bottom .quote{justify-self:center}
.quote{font:400 clamp(19px,1.7vw,24px)/2 var(--serif);letter-spacing:.06em}

/* 衛教 */
.articles-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:40px}
.articles-head .text{max-width:25em;margin-top:0}
.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.article>img{aspect-ratio:3/2}
.article-body{font-size:15px;padding-top:10px;color:var(--muted)}
.article-body p+p{margin-top:12px}
.article-body ul{padding-left:1.3em;margin:10px 0}
.article-body h4{font:400 17px/1.6 var(--serif);letter-spacing:.05em;color:var(--ink);margin:20px 0 6px}
.article-body h4:first-child{margin-top:6px}
.article-body .source{font-size:12px}

/* 預約 */
.appointment{padding:88px 8%;display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;background:var(--wash)}
.appointment-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.appointment-actions .link{margin:0}

/* 頁尾 */
.site-footer{padding-block:72px 32px}
.footer-top{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}
.footer-name{font:24px var(--serif);letter-spacing:.28em}
.footer-role{font-size:13px;color:var(--muted);margin-top:12px}
.footer-links{display:flex;gap:28px;flex-wrap:wrap;font-size:14px}
.footer-links a{min-height:44px;display:flex;align-items:center;text-decoration:none}
.footer-bottom{display:flex;justify-content:space-between;gap:30px;margin-top:64px;font-size:12px;color:var(--muted)}
.footer-bottom p{max-width:50em}

/* 平板 */
@media(max-width:1100px){
  .treatments{grid-template-columns:1fr}
  .section-intro{max-width:34em}
}

/* 手機 */
@media(max-width:760px){
  :root{--gutter:20px;--section:88px;--gap:28px;--header-h:64px}
  .brand strong{font-size:20px}
  .brand span{font-size:8px;margin-top:7px}
  .header-cta{padding:0 14px;font-size:13px;letter-spacing:.06em}
  .menu-label{font-size:13px}
  .hero{padding-top:8px}
  .hero img{aspect-ratio:1/1}
  .hero-intro{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .hero-intro .eyebrow{margin-bottom:0}
  .hero-side p{font-size:15px}
  .stories{grid-template-columns:1fr;gap:64px}
  .philosophy>img{aspect-ratio:3/2}
  .treatments{gap:32px}
  /* 治療卡片改橫向滑動，露出下一張提示可滑 */
  .treatment-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scroll-padding-inline:var(--gutter);scrollbar-width:none;align-items:start}
  .treatment-list::-webkit-scrollbar{display:none}
  .treatment{scroll-snap-align:start}
  .case-head{grid-template-columns:1fr;gap:16px}
  .case-tabs{gap:4px;margin:28px 0 20px;justify-content:flex-start}
  .case-tabs button{padding:8px 12px;font-size:13px}
  .case-pair{grid-template-columns:1fr;gap:24px;margin-top:20px}
  .case-pair figcaption{font-size:13px;margin-top:8px}
  .case-note{font-size:12px}
  .case-picker{margin-top:32px}
  .case-picker button{font-size:15px;padding:10px 2px 12px}
  .case-picker button .eyebrow{font-size:10px;letter-spacing:.16em}
  .case{margin-top:28px}
  .clinic-intro{display:block;margin-bottom:36px}
  .clinic-intro .text{margin-top:14px}
  .clinic-list{gap:56px}
  .clinic-item,.clinic-item.is-portrait,.clinic-item.is-landscape.reverse,.clinic-item.is-portrait.reverse{grid-template-columns:1fr;gap:20px}
  .clinic-item.reverse>img{order:0}
  .clinic-item.is-portrait:not(.reverse)>img,.clinic-item.is-portrait.reverse>img{width:100%;justify-self:stretch}
  .clinic-bottom{grid-template-columns:1fr;gap:20px;margin-top:64px}
  .articles-head{display:block;margin-bottom:28px}
  .articles-head .text{margin-top:14px;font-size:15px}
  .articles{grid-template-columns:1fr;gap:48px}
  .appointment{padding:48px 24px;grid-template-columns:1fr;gap:28px}
  .button{width:100%}
  .footer-top{display:block}
  .footer-links{margin-top:24px;gap:24px}
  .footer-bottom{display:block;margin-top:36px}
  .footer-bottom p+p{margin-top:16px}
  .site-footer{padding-top:56px}
}
@media(max-width:360px){
  :root{--gutter:16px}
  .menu-label{display:none}
  .brand strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.menu,.header-cta,.case-tabs,.case-picker,.appointment-actions{display:none!important}.site-header{position:static}.case[hidden]{display:block!important}.case-pair[hidden]{display:grid!important}.js-cases .case-title{display:block}body{background:#fff}}

/* 平滑展開與切換（main.js） */
.case-stage,.case-pairs{display:flow-root}
.details-body{display:flow-root}
.card details.is-closing>summary::after,.credential-toggle.is-closing>summary::after{content:'＋'}
.case-photo{display:block;background:#111}
.case-photo img{display:block}