:root {
  --bg:#f8f3ec;
  --card:#fffdf8;
  --ink:#4b3428;
  --muted:#8d796b;
  --soft:#ead8ca;
  --line:#e3cdbb;
  --gold:#b98963;
  --pink:#e7c7c7;
  --shadow:0 22px 60px rgba(117, 83, 62, .13);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.86), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(230,201,184,.52), transparent 32%),
    var(--bg);
  line-height:1.8;
  letter-spacing:.02em;
}
img { display:block; width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  padding:18px clamp(20px, 6vw, 120px);
  backdrop-filter:blur(18px);
  background:rgba(248,243,236,.82);
  border-bottom:1px solid rgba(227,205,187,.7);
}
.nav {
  max-width:1680px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:32px;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.08em;
  white-space:nowrap;
}
.brand-mark {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg, #b98963, #d9b99d);
}
.links {
  display:flex;
  justify-content:center;
  gap:28px;
  flex:1;
  font-size:15px;
  font-weight:700;
}
.links a {
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.links a:hover,
.links a[aria-current="page"] { border-color:var(--gold); }
.nav-cta,
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 22px;
  border-radius:999px;
  font-weight:800;
  border:1px solid var(--gold);
}
.nav-cta,
.button.primary {
  color:#fff;
  background:linear-gradient(135deg, #b98963, #8f6144);
  box-shadow:0 16px 38px rgba(143,97,68,.22);
}
.button.ghost { color:var(--ink); background:rgba(255,253,248,.72); }
.hero {
  max-width:1680px;
  margin:auto;
  padding:72px clamp(20px, 6vw, 120px) 94px;
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(460px, 1.08fr);
  gap:58px;
  align-items:center;
}
.eyebrow {
  color:var(--gold);
  font-size:13px;
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
}
h1,h2,h3 { margin:0; line-height:1.22; letter-spacing:.02em; }
h1 {
  margin-top:18px;
  font-size:clamp(30px, 3.4vw, 52px);
  font-weight:900;
}
h1 span, h2 span { color:var(--gold); }
h1 span {
  display:inline-block;
  font-size:clamp(20px, 2.25vw, 34px);
  line-height:1.18;
}
.hero p {
  max-width:660px;
  color:var(--muted);
  font-size:17px;
  margin:26px 0 0;
}
.hero-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:34px;
}
.hero-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}
.hero-tags span,
.tag {
  display:inline-flex;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,253,248,.72);
  color:#7f6758;
  font-size:13px;
  font-weight:800;
}
.hero-focus {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:28px;
}
.hero-focus span {
  display:block;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,253,248,.66);
  color:#80685a;
  font-size:13px;
  font-weight:800;
}
.hero-focus b {
  display:block;
  margin-bottom:2px;
  color:var(--ink);
  font-size:16px;
}
.hero-visual {
  position:relative;
}
.hero-visual img,
.photo img {
  border-radius:34px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hero-card {
  position:absolute;
  left:34px;
  bottom:30px;
  width:min(520px, calc(100% - 68px));
  padding:22px 24px;
  border-radius:26px;
  background:rgba(255,253,248,.82);
  border:1px solid rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 22px 52px rgba(87,62,45,.18);
}
.hero-card strong { display:block; font-size:20px; }
.hero-card span { color:var(--muted); font-size:14px; }
.hero-dots {
  position:absolute;
  right:44px;
  bottom:42px;
  display:flex;
  gap:8px;
}
.hero-dots i {
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,253,248,.72);
  border:1px solid rgba(185,137,99,.45);
}
.hero-dots i:first-child { width:28px; border-radius:999px; background:var(--gold); }
.section {
  max-width:1680px;
  margin:auto;
  padding:92px clamp(20px, 6vw, 120px);
}
.section.alt {
  background:linear-gradient(180deg, rgba(255,253,248,.62), rgba(246,232,220,.48));
  max-width:none;
}
.section.alt > * {
  max-width:1440px;
  margin-left:auto;
  margin-right:auto;
}
.section-head {
  text-align:center;
  max-width:820px;
  margin:0 auto 48px;
}
.section-head .eyebrow { display:block; margin-bottom:12px; }
.section-head h2 { font-size:clamp(28px, 2.55vw, 44px); }
.section-head p { color:var(--muted); font-size:16px; margin:16px 0 0; }
.grid-3 {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
}
.grid-4 {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
}
.grid-2 {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:42px;
  align-items:center;
}
.card {
  min-height:100%;
  padding:32px;
  border:1px solid var(--line);
  border-radius:28px;
  background:rgba(255,253,248,.82);
  box-shadow:0 14px 44px rgba(117,83,62,.08);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.card:hover {
  transform:translateY(-4px);
  border-color:#d4aa8a;
  box-shadow:0 24px 62px rgba(117,83,62,.14);
}
.icon {
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  margin-bottom:28px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--gold);
  background:#fbf5ee;
  font-weight:900;
}
.card h3 {
  font-size:22px;
  margin-bottom:12px;
}
.card p { color:var(--muted); margin:0; }
.card ul { margin:16px 0 0; padding-left:20px; color:var(--muted); }
.mini-link {
  display:inline-flex;
  margin-top:24px;
  color:var(--gold);
  font-weight:900;
}
.doctor-card img,
.treatment-card img,
.case-card img {
  aspect-ratio: 4 / 3;
  object-fit:cover;
  border-radius:22px;
  border:1px solid var(--line);
  margin-bottom:24px;
}
.doctor-card small,
.price,
.case-meta {
  color:var(--gold);
  font-weight:900;
  letter-spacing:.08em;
}
.split-copy h2 { font-size:clamp(28px, 2.55vw, 44px); margin:12px 0 18px; }
.split-copy p { color:var(--muted); margin:0 0 18px; }
.tag-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.treatment-card { position:relative; overflow:hidden; }
.treatment-card .price {
  position:absolute;
  right:26px;
  top:26px;
  padding:6px 12px;
  border-radius:999px;
  background:#fbf1e9;
  border:1px solid var(--line);
}
.case-card {
  background:linear-gradient(180deg, #fffdf8, #faeee5);
}
.case-note {
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:#5b4032;
  font-size:15px;
  font-weight:800;
}
.image-note,
.medical-note {
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,253,248,.92);
  color:#7f6658;
  font-size:15px;
  font-weight:800;
  line-height:1.65;
}
.medical-note {
  margin-top:28px;
  border-left:4px solid var(--gold);
  color:#5b4032;
  font-size:17px;
  background:#fff8ed;
}
.short-note {
  margin-top:10px;
  color:#8f7666;
  font-size:14px;
  font-weight:800;
}
.case-disclaimer {
  margin:0 auto 28px;
  max-width:980px;
  color:#fff;
  background:#5b4032;
  border-color:#5b4032;
  border-left:0;
  text-align:center;
  font-weight:900;
}
.info-card {
  padding:24px;
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(255,253,248,.86);
}
.info-card b,
.info-card strong { color:var(--ink); }
.info-card p { margin:8px 0 0; color:var(--muted); }
.store-info {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:28px;
}
.service-meta {
  margin-top:14px;
  display:grid;
  gap:10px;
}
.service-meta span {
  display:block;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,253,248,.8);
  color:#6f584a;
}
.service-meta b { color:var(--ink); }
.trust-strip {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:32px;
  background:var(--line);
  box-shadow:0 18px 52px rgba(117,83,62,.1);
}
.trust-item {
  min-height:190px;
  padding:30px;
  background:rgba(255,253,248,.84);
}
.trust-item b {
  display:block;
  margin-bottom:10px;
  color:var(--gold);
  font-size:14px;
  letter-spacing:.16em;
}
.trust-item strong {
  display:block;
  margin-bottom:12px;
  font-size:21px;
  line-height:1.35;
}
.trust-item p { margin:0; color:var(--muted); }
.credential-list {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:24px;
}
.credential {
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,253,248,.72);
}
.credential b { display:block; color:var(--gold); margin-bottom:4px; }
.timeline {
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
}
.step {
  padding:24px;
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(255,253,248,.8);
}
.step b { color:var(--gold); display:block; margin-bottom:10px; }
.appointment {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  padding:42px;
  border:1px solid var(--line);
  border-radius:34px;
  background:linear-gradient(135deg, #fffdf8, #f2dfd2);
  box-shadow:var(--shadow);
}
.form-grid {
  display:grid;
  gap:14px;
}
.fake-input {
  min-height:52px;
  padding:13px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.68);
  color:var(--muted);
}
.booking-phone {
  display:inline-block;
  margin-top:18px;
  color:var(--ink);
  font-size:clamp(28px, 3vw, 42px);
  font-weight:900;
  letter-spacing:.04em;
}
.footer {
  padding:46px clamp(20px, 6vw, 120px);
  border-top:1px solid var(--line);
  color:#907869;
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.legal-disclaimer {
  flex-basis:100%;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff8ed;
  color:#5b4032;
  font-size:16px;
  font-weight:700;
  line-height:1.9;
}
.float-cta {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:35;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,253,248,.9);
  border:1px solid var(--line);
  box-shadow:0 18px 42px rgba(117,83,62,.18);
}
.float-cta span {
  padding:9px 15px;
  border-radius:999px;
  color:#fff;
  background:#9c6a4b;
  font-weight:900;
}
.page-hero { padding-bottom:54px; }
.page-hero .hero-visual img { max-height:560px; object-fit:cover; }
.notice {
  margin-top:22px;
  padding:16px 18px;
  border-left:3px solid var(--gold);
  background:rgba(255,253,248,.78);
  color:var(--muted);
  border-radius:14px;
}
.faq-list {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}
.faq-list details {
  padding:24px;
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(255,253,248,.82);
}
.faq-list summary {
  cursor:pointer;
  font-weight:900;
  color:var(--ink);
}
.faq-list p { margin:14px 0 0; color:var(--muted); }
@media (max-width: 1100px) {
  .hero, .grid-2, .appointment { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .timeline { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .trust-strip, .credential-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .links { display:none; }
  .hero { padding-top:54px; }
}
@media (max-width: 760px) {
  .site-header { padding:14px 20px; }
  .brand span:last-child { max-width:10em; overflow:hidden; text-overflow:ellipsis; }
  .nav { gap:12px; }
  .nav-cta { padding:0 14px; font-size:13px; }
  .hero, .section { padding-left:20px; padding-right:20px; }
  .grid-3, .grid-4, .timeline, .hero-focus, .trust-strip, .credential-list, .faq-list { grid-template-columns:1fr; }
  .store-info { grid-template-columns:1fr; }
  .hero-card { position:static; width:auto; margin-top:18px; }
  .hero-dots { display:none; }
  .hero-visual img { border-radius:24px; }
  .footer { padding-bottom:104px; }
  .float-cta { left:16px; right:16px; justify-content:space-between; }
}