/* Shared site design system共用網站設計系統 */
/* Shared design tokens are defined in tokens.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body,button,input,select,textarea{font-family:var(--font-sans)}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-size:var(--type-body);line-height:1.75;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
main{position:relative;background:var(--g-pale)}
h1,h2,h3{margin-top:0;font-family:var(--font-serif);line-height:1.35;text-wrap:balance}
h1{font-size:var(--type-h1)}
h2{font-size:var(--type-h2)}
h3{font-size:var(--type-h3)}
p{margin-top:0}
.container{width:min(100% - (var(--gutter-page) * 2),var(--container-content));margin-inline:auto}
/* Header and navigation頁首與導覽 */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.92);border-bottom:1px solid rgba(217,222,242,.78);box-shadow:0 .5rem 1.75rem rgba(73,86,138,.06);backdrop-filter:blur(1rem)}
.site-nav{display:flex;align-items:center;justify-content:space-between;height:82px;padding-inline:4rem}
.brand img{width:16.5rem}
.main-nav .navbar-nav{display:flex;gap:clamp(.85rem,1.3vw,1.5rem);margin:0;padding:0;list-style:none}
.nav-dropdown{position:relative}
.nav-dropdown-label{display:flex;align-items:center}
.nav-submenu-toggle{display:grid;width:2rem;height:2rem;margin-left:.15rem;padding:0;place-items:center;border:0;background:transparent;color:var(--c-nav);font-size:.7rem;transition:color .2s ease}
.nav-dropdown.is-open .nav-submenu-toggle,.nav-dropdown:hover .nav-submenu-toggle,.nav-dropdown:focus-within .nav-submenu-toggle{color:var(--c-nav-active)}
.nav-dropdown.is-open .nav-submenu-toggle i{transform:rotate(180deg)}
.nav-submenu{position:absolute;z-index:var(--z-dropdown);top:calc(100% + 1rem);left:50%;display:none;width:max-content;min-width:19rem;margin:0;padding:.75rem;background:rgba(255,255,255,.98);border:1px solid var(--c-line);box-shadow:0 1rem 2.5rem rgba(44,59,108,.16);list-style:none;transform:translateX(-50%)}
.nav-submenu::before{position:absolute;right:0;bottom:100%;left:0;height:1.1rem;content:""}
.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu,.nav-dropdown.is-open .nav-submenu{display:grid}
.nav-submenu a{display:flex;align-items:center;min-height:2.55rem;padding:.55rem .9rem;color:#46547f;font-size:.9rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;transition:background-color .2s ease,color .2s ease,padding-left .2s ease}
.nav-submenu a:hover,.nav-submenu a:focus-visible{padding-left:1.15rem;background:var(--c-primary-soft);color:var(--c-primary-dark)}
.nav-link{position:relative;color:var(--c-nav);font-size:1.125rem;font-weight:600;letter-spacing:.1em}
.nav-link:hover,.nav-link.active{color:var(--c-nav-active)}
.nav-link.active::after{position:absolute;bottom:-.25rem;left:50%;width:calc(100% - .25rem);height:.125rem;background:var(--c-primary);content:"";transform:translateX(-50%)}
.nav-toggle{display:none;width:3rem;height:3rem;border:0;border-radius:.875rem;background:var(--c-primary-soft);color:var(--c-primary-dark);font-size:1.375rem}
.btn-soft,.btn-main,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:2.875rem;padding:.75rem 1.5rem;border-radius:var(--radius-pill);font-size:1rem;font-weight:600;letter-spacing:.08em;transition:transform var(--duration-ui) var(--ease-ui),filter var(--duration-ui) var(--ease-ui)}
.btn-soft,.btn-main{border:0;background:var(--g-main);color:#fff;box-shadow:var(--shadow-sm)}
.btn-line{border:1px solid var(--c-action);background:var(--c-action);color:var(--c-action-text);box-shadow:var(--shadow-sm)}
.btn-soft:hover,.btn-main:hover,.btn-line:hover{filter:brightness(.94);transform:translateY(-.125rem)}
.btn-line:hover{border-color:var(--c-action-hover);background:var(--c-action-hover);color:var(--c-action-text);}
/* Shared layout and content components共用版面與內容元件 */
.section-pad{padding-block:var(--section-space)}
.section-pad.compact{padding-top:3.5rem}
.pale{background:rgba(255,255,255,.55)}
.section-title{text-align:center;margin-bottom:2.25rem}
.section-title h2,.section-head-inline h2,.service-detail h2,.contact-box h2{color:var(--c-primary-dark);font-weight:600;letter-spacing:.1em}
.section-title p{color:var(--c-muted);font-size:1.125rem}
.section-head-inline{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.section-head-inline a{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.625rem 1.25rem;border-radius:var(--radius-pill);background:var(--c-action);color:var(--c-action-text);font-weight:600;letter-spacing:.06em;box-shadow:var(--shadow-sm);transition:background-color var(--duration-ui) var(--ease-ui),transform var(--duration-ui) var(--ease-ui);}
.section-head-inline a:hover{background:var(--c-action-hover);color:var(--c-action-text);transform:translateY(-.125rem);}
.eyebrow{margin-bottom:1rem;color:#33477d;font-size:.875rem;font-weight:600;letter-spacing:.16em}
.page-hero{padding:7.5rem 1rem 5rem;background:var(--g-page-hero);border-bottom:1px solid var(--c-line);text-align:center}
.page-hero h1{margin-bottom:.75rem;color:var(--c-primary-dark);letter-spacing:.12em}
.page-hero p{margin-bottom:0;color:var(--c-muted);font-size:1.125rem}
.contact-box,.consult-form,.calendar-card,.social-panel{background:rgba(255,255,255,.94);border:1px solid var(--c-line);box-shadow:var(--shadow-sm)}
.service-detail p{color:var(--c-muted);font-size:1.125rem;line-height:2}
.treat-card{height:100%;overflow:hidden;background:#fff;border:1px solid var(--c-line);box-shadow:var(--shadow-sm);transition:transform var(--duration-ui) var(--ease-ui),box-shadow var(--duration-ui) var(--ease-ui)}
.treat-card:hover{box-shadow:var(--shadow);transform:translateY(-.25rem)}
.treat-card img{width:100%;height:14.375rem;object-fit:cover}
.treat-body{padding:1.875rem 1.5rem;text-align:center}
.treat-body h3,.social-panel h3{margin-bottom:.75rem;color:var(--c-primary-dark);font-weight:600;letter-spacing:.08em}
.treat-body p{color:var(--c-muted);font-size:1rem;line-height:1.9}
.treat-body span{display:inline-flex;gap:.375rem;padding:.5rem 1.125rem;border:1px solid var(--c-action);border-radius:var(--radius-pill);background:var(--c-action);color:var(--c-action-text);font-weight:600;transition:background-color var(--duration-ui) var(--ease-ui),border-color var(--duration-ui) var(--ease-ui);}
.treat-card:hover .treat-body span{border-color:var(--c-action-hover);background:var(--c-action-hover);color:var(--c-action-text);}
.env-carousel{position:relative;}
.env-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2.25rem)/3);gap:1.125rem;overflow-x:auto;padding:1.125rem;background:#fff;border:1px solid var(--c-line);box-shadow:var(--shadow-sm);scroll-behavior:auto;scroll-snap-type:none;scrollbar-width:none;}
.env-gallery::-webkit-scrollbar{display:none;}
.env-gallery figure{margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--c-primary-soft);scroll-snap-align:start;}
.env-gallery img{display:block;width:100%;height:100%;object-fit:cover;}
.env-gallery.is-auto-scrolling{cursor:grab;}
.env-gallery.is-auto-scrolling:active{cursor:grabbing;}
.env-arrow{position:absolute;z-index:2;top:50%;display:grid;width:2.75rem;height:2.75rem;place-items:center;border:1px solid rgba(86,103,155,.32);border-radius:50%;background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);color:var(--c-primary-dark);transform:translateY(-50%);}
.env-prev{left:-1.15rem;}
.env-next{right:-1.15rem;}
/* Shared inner-page modules內頁共用模組 */
.service-detail{display:grid;gap:1.625rem;margin-top:3rem}
.service-detail article{display:grid;grid-template-columns:22.5rem 1fr;gap:1.875rem;align-items:center;padding:1.5rem;background:#fff;border:1px solid var(--c-line);box-shadow:var(--shadow-sm);scroll-margin-top:7.5rem}
.service-detail img{width:100%;height:14.375rem;object-fit:cover}
.news-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:2rem}
.news-filter button{padding:.625rem 1.5rem;border:1px solid var(--c-line);border-radius:999rem;background:#fff;color:var(--c-primary-dark);font-size:1rem;font-weight:600}
.news-filter button.active{background:var(--g-main);color:#fff}
.news-item.is-hidden{display:none}
.news-card .treat-body{text-align:left}
.info-grid .news-card .treat-body span{border-color:var(--c-action);background:var(--c-action);color:var(--c-action-text);}
.info-grid .news-card:hover .treat-body span{border-color:var(--c-action-hover);background:var(--c-action-hover);color:var(--c-action-text);}
.news-card time{color:var(--c-muted);font-size:.875rem}
.faq-list{display:grid;max-width:57.5rem;margin:auto;gap:1.125rem}
.faq-item{overflow:hidden;background:#fff;border:1px solid var(--c-line);box-shadow:var(--shadow-sm)}
.faq-item button{width:100%;padding:1.5rem 1.875rem;border:0;background:#fff;color:var(--c-primary-dark);font-family:var(--font-serif);font-size:1.125rem;font-weight:600;text-align:left}
.faq-item div{display:none;padding:0 1.875rem 1.625rem;color:var(--c-muted);font-size:1rem;line-height:1.8}
.faq-item.open div{display:block}
.contact-box,.consult-form{padding:2.125rem}
.contact-box p{display:flex;align-items:center;gap:.875rem;color:var(--c-text);font-size:1.125rem}
.contact-box i{display:inline-flex;align-items:center;justify-content:center;width:2.625rem;height:2.625rem;border-radius:50%;background:var(--g-main);color:#fff}
.contact-box img{width:9.375rem;margin-top:1.5rem;border:1px solid var(--c-line)}
.consult-form label{display:block;margin-bottom:.5rem;color:var(--c-primary-dark);font-weight:600}
.consult-form input,.consult-form select,.consult-form textarea{width:100%;padding:.8125rem .9375rem;border:1px solid var(--c-line);background:#fbfcff;color:var(--c-text);font-size:1rem}
.consult-form .is-error{border-color:#d96a6a;background:#fff7f7}
/* Shared clinic-hours component */
.clinic-hours-section{background:linear-gradient(180deg,#eef2ff 0%,#f8f9fc 100%)}
.clinic-hours-section .section-title{max-width:44rem;margin-inline:auto}
.clinic-hours-section .section-title p:last-child{margin-bottom:0}
.clinic-hours-section .calendar-card{max-width:72rem;margin:2.25rem auto 0;padding:1.5rem;background:#fff;border:1px solid var(--c-line);box-shadow:var(--shadow-sm)}
.clinic-hours-section .calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.75rem}
.clinic-hours-section .calendar-grid>div{display:grid;align-content:center;gap:.5rem;min-height:7rem;padding:1.25rem .75rem;background:#f7f8fc;border:1px solid #dfe4f5;color:#344578;text-align:center;font-size:1rem;font-weight:600;line-height:1.5;letter-spacing:.04em}
.clinic-hours-section .calendar-grid strong{display:block;color:var(--c-primary-dark);font-size:1rem;font-weight:600;line-height:1.5;letter-spacing:0;white-space:nowrap}
.clinic-hours-section .calendar-grid>div:nth-last-child(-n+2){background:#f1f2f8;border-color:#d8dcea;color:#6c7390}
.clinic-hours-section .calendar-grid>div:nth-last-child(-n+2) strong{color:#6c7390}
/* Interaction and accessibility互動與無障礙 */
button{cursor:pointer;}
a,button,input,select,textarea{touch-action:manipulation;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:.1875rem solid var(--c-focus);outline-offset:.1875rem;}
.news-filter button{min-height:2.75rem;}
.consult-form input:focus,.consult-form select:focus,.consult-form textarea:focus{border-color:var(--c-focus);box-shadow:0 0 0 .1875rem rgba(35,79,189,.15);outline:0;}
@media (min-width:48.0625rem){.main-nav .navbar-nav{flex-direction:row;align-items:center;}
.nav-dropdown .nav-submenu-toggle{width:2.75rem;min-width:2.75rem;opacity:1;transform:translateY(0);transition:opacity var(--duration-ui) var(--ease-ui),color var(--duration-ui) var(--ease-ui),transform var(--duration-ui) var(--ease-ui);}
.nav-dropdown:hover .nav-submenu-toggle,.nav-dropdown:focus-within .nav-submenu-toggle,.nav-dropdown.is-open .nav-submenu-toggle{opacity:1;transform:translateY(0);}
.nav-submenu{display:grid;visibility:hidden;opacity:0;pointer-events:none;transform:translate(-50%,-.4rem);transition:visibility .2s ease,opacity .2s ease,transform .2s ease;}
.nav-submenu::after{position:absolute;bottom:100%;left:50%;width:0;height:0;border-right:.55rem solid transparent;border-bottom:.55rem solid rgba(255,255,255,.98);border-left:.55rem solid transparent;content:"";transform:translateX(-50%);filter:drop-shadow(0 -.08rem 0 var(--c-line));}
.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu,.nav-dropdown.is-open .nav-submenu{display:grid;visibility:visible;opacity:1;pointer-events:auto;transform:translate(-50%,0);}
}
/* Tablet layout平板版面 */
@media (max-width:62rem){.site-nav{padding-inline:1.5rem;}
.service-detail article{grid-template-columns:1fr;}
.clinic-hours-section .calendar-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* Mobile layout手機版面 */
@media (max-width:48rem){body{overflow-x:hidden;}
.site-nav{position:relative;height:5.25rem;padding-inline:1rem;}
.brand img{width:min(13.625rem,calc(100vw - 5.5rem));}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;min-height:3rem;}
.main-nav{position:absolute;z-index:var(--z-dock);top:5.25rem;right:0;left:0;display:none;max-height:calc(100dvh - 5.25rem);overflow-y:auto;background:rgba(255,255,255,.98);border-bottom:1px solid var(--c-line);box-shadow:0 .875rem 1.5rem rgba(36,57,111,.14);}
.main-nav.open{display:block;}
.main-nav .navbar-nav{display:flex;align-items:stretch !important;flex-direction:column !important;gap:0;padding:.5rem 1rem 1rem;}
.main-nav .nav-item{width:100%;}
.nav-dropdown-label{width:100%;}
.nav-dropdown-label .nav-link{flex:1;}
.nav-submenu-toggle{width:2.75rem;height:2.75rem;margin-left:0;border-radius:.5rem;background:var(--c-primary-soft);}
.nav-submenu{position:static;display:none;width:100%;min-width:0;margin:0 0 .5rem;padding:.35rem .5rem .5rem;background:#f7f8ff;border:0;border-left:.2rem solid #d6ddf3;box-shadow:none;transform:none;}
.nav-submenu::before{display:none;}
.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu{display:none;}
.nav-dropdown.is-open .nav-submenu{display:grid;}
.nav-submenu a{min-height:2.5rem;padding:.55rem .75rem;white-space:normal;}
.nav-link{display:flex;align-items:center;min-height:2.75rem;padding:.75rem .5rem;}
.main-nav .nav-link.active{padding-left:.875rem;background:var(--c-primary-soft);border-left:.25rem solid var(--c-primary);color:var(--c-primary-dark);font-weight:700;}
.nav-link.active::after{display:none;}
.main-nav .nav-cta{padding-top:.5rem;}
.main-nav .nav-cta .btn-soft{width:100%;min-height:3rem;}
.section-pad{padding-block:3.5rem;}
.page-hero{padding-block:5.375rem 2.75rem;}
.env-gallery{grid-auto-columns:calc((100% - 1.125rem)/2);}
.clinic-hours-section .calendar-card{padding:1rem;}
.clinic-hours-section .calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;}
}
/* Compact mobile layout小螢幕手機版面 */
@media (max-width:36rem){
.env-gallery{grid-auto-columns:88%;padding:.75rem;gap:.75rem;}
.env-arrow{width:2.5rem;height:2.5rem;}
.env-prev{left:-.5rem;}
.env-next{right:-.5rem;}
.contact-box,.consult-form{padding:1.5rem;}
.clinic-hours-section .calendar-grid{grid-template-columns:1fr;}
.clinic-hours-section .calendar-grid>div{min-height:4.5rem;padding:1rem;}
.clinic-hours-section .calendar-grid strong{white-space:normal;}
}
/* Reduced motion減少動態效果 */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}