/* 診療手冊：開放式章節、錯落格線與純色底襯。 */
.service-page-hero { position: relative; isolation: isolate; overflow: hidden; padding: 0; background: #eee7f1 url('../images/decoration/paper-grain.png') repeat; background-size: 320px; }
.service-page-hero .container { position: relative; z-index: 1; }
.service-page-hero h1 { margin: 16px 0; font-size: 50px; font-weight: 800; color: var(--clinic-deep); letter-spacing: .1em; }
.service-page-hero p { margin: 0; color: #75667c; }
.service-page-hero .eyebrow::before { content: ''; display: inline-block; width: 32px; height: 1px; margin-right: 14px; vertical-align: middle; background: var(--clinic-gold); }
.service-hero-copy { position: relative; isolation: isolate; }
.service-hero-art { position: absolute; inset: 0 0 0 -150px; overflow: hidden; z-index: -1; pointer-events: none; }
.service-hero-art img { position: absolute; left: 5%; top: -90px; width: 250px; height: 450px; object-fit: contain; opacity: .13; transform: rotate(17deg); }
.service-hero-orbit { position: absolute; left: -210px; bottom: -330px; width: 720px; height: 620px; border: 1px solid #b69a6d40; border-radius: 50%; transform: rotate(-25deg); }
.service-hero-orbit::after { content: ''; position: absolute; inset: 22px; border: 1px solid #b69a6d26; border-radius: inherit; }
.service-banner-media img { object-fit: cover; object-position: 70% 60%; }
.service-directory-section { padding: 54px 0 28px; }
.service-directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.service-directory-heading h2 { margin: 8px 0 0; font-size: 34px; font-weight: 700; color: var(--clinic-deep); letter-spacing: .08em; }
.service-directory-kicker { font-size: 12px; letter-spacing: .2em; color: #a48d67; }
.service-directory-heading p { margin: 0; color: var(--clinic-muted); }
.service-quick-nav { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); margin-bottom: 50px; border-top: 1px solid #e0d5e5; border-bottom: 1px solid #e0d5e5; }
.service-quick-nav a { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 10px 4px; font-size: 18px; }
.service-quick-nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: #9e82ad; transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.service-quick-nav a > span:first-child { font-size: 12px; color: #a28bac; }
.service-nav-arrow { display: inline-block; font-size: 16px; opacity: 0; transform: translate(-3px,-3px); transition: opacity .25s,transform .25s; }
.service-quick-nav a:hover::after, .service-quick-nav a:focus-visible::after { transform: scaleX(1); }
.service-quick-nav a:hover .service-nav-arrow, .service-quick-nav a:focus-visible .service-nav-arrow { opacity: 1; transform: none; }
.service-directory-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 54px 24px; align-items: start; }
.service-directory-card { --service-tint: #eae0ee; --service-edge: #cdbbd5; position: relative; isolation: isolate; min-width: 0; padding: 0 0 30px; border: 0; border-bottom: 1px solid #ded5e2; background: transparent; border-radius: 0; scroll-margin-top: 24px; }
.service-directory-card:nth-child(1) { grid-column: 1 / span 5; }
.service-directory-card:nth-child(2) { grid-column: 7 / -1; margin-top: 64px; }
.service-directory-card:nth-child(4) { grid-column: 1 / span 7; }
.service-directory-card:nth-child(5) { grid-column: 9 / -1; margin-top: 54px; }
.service-directory-card:nth-child(6) { grid-column: 1 / span 5; }
.service-directory-card:nth-child(7) { grid-column: 7 / -1; margin-top: 48px; }
.service-chapter-art { position: relative; isolation: isolate; height: 172px; margin-bottom: 22px; pointer-events: none; }
.service-chapter-art::before { content: ''; position: absolute; z-index: -1; left: 36px; top: 20px; width: 174px; height: 134px; background: var(--service-tint); border-radius: 58% 42% 43% 57%; transform: rotate(-13deg); transform-origin: 35% 50%; transition: transform .65s cubic-bezier(.22,1,.36,1); }
.service-card-kicker { position: absolute; top: 0; left: 0; color: #99859f; font-size: 11px; letter-spacing: .2em; }
.service-card-number { position: absolute; right: 0; top: 20px; font-size: 108px; font-weight: 300; color: var(--service-edge); opacity: .72; line-height: 1; letter-spacing: -.07em; }
.service-icon-plate { position: absolute; top: 18px; left: 0; display: grid; place-items: center; width: 142px; height: 142px; }
.service-icon-plate img { width: 128px; height: 128px; object-fit: contain; transform: rotate(-7deg); filter: drop-shadow(0 8px 5px #60486d0d); transition: transform .65s cubic-bezier(.22,1,.36,1),filter .65s; }
.service-chapter-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #ded5e2; }
.service-chapter-rule::before { content: ''; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; background: #b69a6d; border-radius: 50%; }
.service-chapter-rule::after { content: ''; position: absolute; left: 0; top: 0; width: 65px; height: 1px; background: #9a7eaa; transform-origin: left; transition: transform .65s; }
.service-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.service-card-heading h3 { margin: 0; font-size: 22px; font-weight: 700; color: var(--clinic-deep); letter-spacing: .08em; text-wrap: balance; }
.service-chapter-arrow { color: #b49cbe; font-size: 26px; line-height: 1; transition: transform .4s,color .4s; }
.service-card-intro { max-width: 560px; color: var(--clinic-muted); margin: 0 0 22px; line-height: 1.85; text-wrap: balance; }
.service-item-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 24px; list-style: none; margin: 0; padding: 0; }
.service-item-list li { position: relative; padding-left: 16px; font-size: 18px; line-height: 1.75; overflow-wrap: anywhere; }
.service-item-list li::before { content: ''; position: absolute; left: 0; top: .75em; width: 4px; height: 4px; border-radius: 50%; background: #b69a6d; }
.service-directory-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 44px; margin: 8px 0; padding: 40px 36px; border-bottom: 0; background: #f3eee5 url('../images/decoration/paper-grain.png') repeat; background-size: 320px; }
.service-directory-wide .service-chapter-art { height: 252px; margin-bottom: 0; }
.service-directory-wide .service-card-number { right: 0; top: 130px; font-size: 90px; }
.service-directory-wide .service-chapter-rule { right: 24px; }
.service-directory-wide .service-card-intro { max-width: none; }
.service-directory-wide .service-item-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding-top: 24px; border-top: 1px solid #ddd1bf; }
.service-directory-wide .service-item-list { grid-template-columns: 1fr; }
.service-item-group h4 { margin: 0 0 14px; color: var(--clinic-purple); font-size: 18px; font-weight: 700; }
.service-tone-sage { --service-tint: #e2eadd; --service-edge: #b7c8b0; }
.service-tone-sage .service-chapter-art::before { border-radius: 0 78px 0 78px; transform: rotate(10deg); left: 18px; }
.service-tone-sage .service-icon-plate img { transform: rotate(7deg); }
.service-tone-sand { --service-tint: #e9ddc7; --service-edge: #cdbb99; }
.service-tone-sand .service-chapter-art::before { border-radius: 0; transform: skewX(-16deg); left: 30px; width: 136px; }
.service-tone-rose { --service-tint: #efdfdf; --service-edge: #d1b4b7; }
.service-tone-rose .service-chapter-art::before { border-radius: 50%; width: 148px; height: 148px; top: 10px; }
.service-tone-blue { --service-tint: #e2eaf0; --service-edge: #b8c9d7; }
.service-tone-blue .service-chapter-art::before { border-radius: 0 0 90% 0; transform: rotate(-6deg); }
.service-tone-blue .service-icon-plate img { transform: rotate(5deg); }
.service-tone-oat { --service-tint: #ece6d8; --service-edge: #c9bea4; }
.service-tone-oat .service-chapter-art::before { border-radius: 76px 0 76px 0; transform: rotate(-8deg); }
.service-tone-oat .service-item-list { grid-template-columns: 1fr; }
.service-tone-mint { --service-tint: #dfece6; --service-edge: #b5cebf; }
.service-tone-mint .service-chapter-art::before { border-radius: 50% 50% 0 0; transform: rotate(16deg); }
.service-care-note { margin: 30px 0 0; color: var(--clinic-muted); }
.service-consult { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 24px; overflow: hidden; margin-top: 42px; padding: 40px; border-top: 1px solid #e0d5e5; border-bottom: 1px solid #e0d5e5; }
.service-consult::before { content: ''; position: absolute; z-index: -1; right: -80px; top: -40px; width: 430px; height: 300px; background: #eee7f1; border-radius: 50% 0 0 50%; transform: rotate(-15deg); transform-origin: 85% 50%; transition: transform .65s cubic-bezier(.22,1,.36,1),border-radius .65s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.service-consult:has(.service-consult-actions a:focus-visible)::before { transform: translateX(-22px) rotate(-6deg) scaleX(1.08); border-radius: 42% 0 0 58%; }
.service-consult h2 { margin: 8px 0 12px; color: var(--clinic-deep); font-size: 30px; font-weight: 700; }
.service-consult p { margin: 0; color: var(--clinic-muted); }
.service-consult-actions { display: grid; gap: 10px; flex-shrink: 0; text-align: center; }
.service-consult-actions .btn { display: flex; gap: 28px; align-items: center; justify-content: space-between; font-size: 18px; }
@media (min-width:1200px) {
  .service-directory-section .container { padding-right: 40px; }
}
@media (min-width:992px) and (max-width:1199.98px) {
  .service-directory-section .container { padding-right: 96px; }
}
@media (min-width:768px) and (max-width:991.98px) and (min-height:501px) {
  .service-directory-section .container { padding-right: 96px; }
}
@media (hover:hover) and (pointer:fine) {
  .service-consult:has(.service-consult-actions a:hover)::before { transform: translateX(-22px) rotate(-6deg) scaleX(1.08); border-radius: 42% 0 0 58%; }
  .service-directory-card:hover .service-chapter-art::before { transform: rotate(-5deg) scaleX(1.18); }
  .service-directory-card:hover .service-icon-plate img { transform: translateY(-6px) rotate(0); filter: drop-shadow(0 14px 8px #60486d1c); }
  .service-directory-card:hover .service-chapter-rule::after { transform: scaleX(2.1); }
  .service-directory-card:hover .service-chapter-arrow { color: #80608f; transform: translate(5px,-5px); }
}
@media (max-width:1199.98px) {
  .service-quick-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .service-quick-nav a { justify-content: flex-start; padding-left: 12px; }
  .service-directory-card:nth-child(1),.service-directory-card:nth-child(4),.service-directory-card:nth-child(6) { grid-column: 1 / span 6; }
  .service-directory-card:nth-child(2),.service-directory-card:nth-child(5),.service-directory-card:nth-child(7) { grid-column: 7 / -1; }
  .service-directory-wide { grid-template-columns: 150px minmax(0,1fr); gap: 32px; padding: 34px 28px; }
  .service-directory-wide .service-chapter-art::before { left: 10px; width: 120px; }
}
@media (max-width:991.98px) {
  .service-hero-art { left: 0; }
  .service-hero-art img { left: -45px; }
  .service-directory-heading { display: block; }
  .service-directory-heading p { margin-top: 12px; }
  .service-directory-grid { gap: 42px 30px; }
  .service-directory-wide { grid-template-columns: 1fr; gap: 0; padding: 30px; }
  .service-directory-wide .service-chapter-art { height: 172px; margin-bottom: 22px; }
  .service-directory-wide .service-card-number { top: 20px; font-size: 108px; }
  .service-directory-wide .service-chapter-rule { right: 0; }
  .service-directory-wide .service-item-groups { gap: 20px; }
  .service-consult { padding: 32px 20px; }
}
@media (max-width:767.98px) {
  .service-page-hero { padding: 0; }
  .service-page-hero h1 { font-size: 36px; }
  .service-page-hero .eyebrow { font-size: 12px; letter-spacing: .16em; }
  .service-hero-art img { width: 170px; height: 310px; left: -40px; top: -30px; opacity: .12; }
  .service-hero-orbit { width: 400px; height: 380px; bottom: -230px; }
  .service-directory-section { padding: 32px 0 10px; }
  .service-directory-heading h2 { font-size: 28px; }
  .service-quick-nav { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 32px; }
  .service-quick-nav a { min-height: 50px; font-size: 16px; padding-left: 8px; }
  .service-nav-arrow { opacity: 1; transform: none; margin-left: auto; margin-right: 12px; color: #a18bad; }
  .service-directory-grid { display: block; }
  .service-directory-card, .service-directory-card:nth-child(n) { margin-top: 0; margin-bottom: 38px; padding-bottom: 28px; }
  .service-directory-card:not(.service-directory-wide) .service-chapter-art { margin-inline: 8px; }
  .service-chapter-art { height: 150px; margin-bottom: 22px; }
  .service-chapter-art::before { left: 28px; top: 20px; width: 158px; height: 112px; }
  .service-card-number, .service-directory-wide .service-card-number { top: 26px; font-size: 88px; }
  .service-icon-plate { width: 120px; height: 120px; top: 16px; }
  .service-icon-plate img { width: 108px; height: 108px; }
  .service-card-heading { gap: 16px; }
  .service-card-heading h3 { font-size: 22px; letter-spacing: .04em; }
  .service-card-intro { font-size: 18px; }
  .service-item-list { gap: 10px 16px; }
  .service-item-list li { font-size: 17px; }
  .service-directory-wide { display: block; margin-inline: 0; padding: 22px 20px 28px; }
  .service-directory-wide .service-chapter-art { height: 150px; }
  .service-directory-wide .service-item-groups { grid-template-columns: 1fr; gap: 26px; }
  .service-directory-wide .service-item-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-tone-rose .service-chapter-art::before { width: 126px; height: 126px; }
  .service-care-note { font-size: 16px; margin-top: 0; }
  .service-consult { display: block; margin-top: 28px; padding: 28px 0; }
  .service-consult h2 { font-size: 26px; text-wrap: balance; }
  .service-consult::before { top: 110px; width: 220px; height: 240px; opacity: .65; }
  .service-consult-actions { margin-top: 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .service-consult::before { transition: none; }
  .service-consult:has(.service-consult-actions a:hover)::before,.service-consult:has(.service-consult-actions a:focus-visible)::before { transform: rotate(-15deg); border-radius: 50% 0 0 50%; }
  .service-chapter-art::before,.service-icon-plate img,.service-chapter-rule::after,.service-chapter-arrow,.service-nav-arrow,.service-quick-nav a::after { transition: none; }
  .service-directory-card:hover .service-chapter-art::before { transform: none; }
  .service-directory-card:hover .service-icon-plate img,.service-directory-card:hover .service-chapter-arrow { transform: none; }
}