/* ============================================================
   廷亮美學牙醫 官網樣式 — 依原站 (allshine.com.tw) 規格復刻
   來源 token：--main-color #666 / 品牌藍 #7798C7 / minor #D2CAC2
   ============================================================ */
:root {
  --main-color: #666666;
  --accent: #7798C7;
  --accent-soft: rgba(119, 152, 199, 0.6);
  --minor-color: #D2CAC2;
  --hamburger-color: #0052A8;
  --footer-bg: #EDE8E7;
  --line: #dddddd;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--main-color);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--main-color); text-decoration: none; transition: .3s; }
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; }

/* ===== Header（原站：高120、logo 270、字16/字距1.6、藍膠囊CTA） ===== */
.header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  height: 120px; background: #fff;
  transition: box-shadow .3s ease-in-out;
}
.header.fixed-top {
  box-shadow: rgba(0,0,0,.15) 0 3px 5px;
}
/* 錨點跳轉預留 sticky header 高度 */
[id] { scroll-margin-top: 140px; }
@media (max-width: 991px) { [id] { scroll-margin-top: 106px; } }
.header > .container { display: flex; align-items: center; justify-content: space-between; }
.header a.logo img { width: 270px; }
.menu { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; }
.menu-item { position: relative; display: flex; align-items: center; }
.menu-item > a {
  color: var(--main-color); font-size: 16px; letter-spacing: 1.6px;
  padding: 12px 20px; white-space: nowrap;
}
.menu-item:hover > a { opacity: .8; }
.menu-item.cta > a {
  color: #fff; background-color: var(--accent); border-radius: 30px;
}
.menu-item.cta:hover > a { opacity: .9; }
.menu-item > a .caret { font-size: 12px; margin-left: 4px; }
.submenu {
  position: absolute; top: 80%; left: 0; display: none; min-width: 100%;
  background: #fff; border: 1px solid var(--main-color);
  margin: 0; padding: 0; list-style: none; z-index: 60;
}
.menu-item:hover > .submenu { display: block; }
.submenu-item a {
  display: block; color: var(--main-color); font-size: 16px; text-align: center;
  padding: 10px 14px; white-space: nowrap;
}
.submenu-item a:hover { background: var(--main-color); color: #fff; }
.hamburger { display: none; }

/* mobile 選單 */
@media (max-width: 991px) {
  .header { height: 88px; }
  .header a.logo img { width: 200px; }
  .menu-wrap {
    position: fixed; inset: 0 30% 0 0; background: #fff; z-index: 90;
    transform: translateX(-105%); transition: .25s; padding: 20px;
    overflow-y: auto; box-shadow: rgba(0,0,0,.2) 24px 0 15px 0;
  }
  .menu-wrap.open { transform: none; }
  .menu { flex-direction: column; align-items: stretch; margin-top: 40px; }
  .menu-item { flex-direction: column; align-items: stretch; }
  .menu-item > a { padding: 14px 10px; border-bottom: 1px solid #eee; }
  .menu-item.cta > a { text-align: center; margin-top: 14px; border-bottom: 0; }
  .submenu { position: static; display: block; border: 0; }
  .submenu-item a { text-align: left; padding-left: 26px; font-size: 15px; color: #999; }
  .hamburger {
    display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px;
  }
  .hamburger span { width: 26px; height: 2px; background: var(--hamburger-color); }
  .menu-close {
    position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; cursor: pointer;
  }
  .menu-close::before, .menu-close::after {
    content: ""; position: absolute; top: 10px; left: 0; width: 22px; height: 2px;
    background: var(--hamburger-color);
  }
  .menu-close::before { transform: rotate(45deg); }
  .menu-close::after { transform: rotate(-45deg); }
  .mask { position: fixed; inset: 0; background: rgba(210,210,210,.5); z-index: 80; display: none; }
  .mask.show { display: block; }
}
@media (min-width: 992px) { .menu-close, .mask { display: none !important; } }

/* ===== Banner ===== */
.slider-main img { width: 100%; height: auto; }
.slider-main .d { aspect-ratio: 1920/822; object-fit: cover; }
.slider-main .m { aspect-ratio: 4/5; object-fit: cover; }
.slider-main .m { display: none; }
@media (max-width: 767px) {
  .slider-main .d { display: none; }
  .slider-main .m { display: block; }
}

/* ===== About（原站：40px/字距4/行高1.7＋藍色螢光筆效果） ===== */
.about .row { align-items: center; }
.about .title-wrap, .about .text-wrap { flex: 1 1 50%; min-width: 300px; }
.about .title {
  position: relative; width: 80%; margin: 180px auto;
  font-size: 40px; font-weight: 500; letter-spacing: 4px; line-height: 1.7;
  color: var(--main-color);
}
.about .title .hl { position: relative; display: inline-block; z-index: 0; }
.about .title .hl::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: -0.2em;
  height: .6em; top: .75em; background: var(--accent-soft);
}
.about .text {
  width: 85%; margin: 180px auto;
  font-size: 16px; letter-spacing: 1.6px; line-height: 2.2;
}
@media (max-width: 991px) {
  .about .title { margin: 50px auto; text-align: center; }
  .about .text { margin: 30px auto 50px; }
}
@media (max-width: 767px) { .about .title { font-size: 35px; } }

/* ===== 區塊標題（EN＋線＋中文，原站 32px/線120px） ===== */
.main-title {
  display: flex; justify-content: flex-end; align-items: baseline;
  font-size: 32px; letter-spacing: 1.2px; color: var(--main-color);
  margin: 0;  font-weight: 400;
}
.main-title .line { width: 120px; border-bottom: 1px solid var(--main-color); padding-top: 20px; margin: 0 30px; }
@media (max-width: 991px) {
  .main-title { justify-content: center; font-size: 30px; }
  .main-title .line { width: 50px; margin: 0 20px; }
}
@media (max-width: 575px) { .main-title .line { width: 40px; margin: 0 10px; } }

/* ===== Treatment（背景圖＋圓形圖200px＋編號26/標題22） ===== */
.section-treatment { background-repeat: no-repeat; background-size: cover; background-position: center; }
.treatment, .team, .information { padding: 80px 0; }
.owl-wrap { position: relative; margin-top: 60px; }
.owl-row {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.owl-row::-webkit-scrollbar { display: none; }
.owl-row .item {
  flex: 0 0 25%; min-width: 230px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center;
  color: var(--main-color); text-align: center;
}
.treatment .item .num { font-size: 26px; letter-spacing: 2.6px; }
.treatment .item .picture {
  position: relative; width: 200px; height: 200px; border-radius: 50%;
  overflow: hidden; margin: 15px 0; background: #fff;
}
.treatment .item .picture img { width: 100%; height: 100%; object-fit: cover; }
.treatment .item .title { font-size: 22px; letter-spacing: 2.2px; margin-bottom: 5px; }
.treatment .item .text { font-size: 14px; letter-spacing: .5px; color: #999; }
.owl-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: var(--main-color); color: #fff;
  border-radius: 50%; cursor: pointer; z-index: 5; user-select: none;
  font-size: 20px; line-height: 1;
}
.prev-btn { left: -8px; } .next-btn { right: -8px; }
a.item:hover .title { color: var(--accent); }

/* ===== Team（照片260×350、名26＋職稱20） ===== */
.team .item { color: var(--main-color); }
.team .item .picture {
  width: 260px; height: 350px; overflow: hidden; margin-bottom: 30px; background: #f5f5f5;
}
.team .item .picture img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.team .item .name-title { display: flex; align-items: flex-end; margin-bottom: 10px; }
.team .item .name { font-size: 26px; }
.team .item .position { font-size: 20px; margin-left: 10px; }
.team .item .text { font-size: 17px; letter-spacing: 1px; line-height: 1.7; }

/* ===== Information（地圖550＋時間表 th150/字20/點13藍） ===== */
.information .info { margin-top: 60px; }
.information .row { gap: 40px; }
.google-map-wrap { flex: 1 1 40%; min-width: 300px; }
.time-table-wrap { flex: 1 1 52%; min-width: 300px; }
.google-map { position: relative; width: 100%; height: 550px; }
.google-map iframe { width: 100%; height: 100%; border: 0; }
.time-table .logo { width: 90%; margin: 0 auto; }
.time-table .logo img { width: 100%; }
table.table { width: 100%; border-collapse: collapse; margin-top: 40px; }
.table th, .table td {
  border-bottom: 1px solid var(--main-color);
  font-size: 20px; font-weight: 400; text-align: center;
  letter-spacing: 2px; padding: 12px 5px; color: var(--main-color);
}
.table th { width: 150px; text-align: center; }
.table th div { font-size: 13px; letter-spacing: 1px; color: #999; }
.table td { position: relative; min-width: 40px; height: 52px; }
.table .dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent);
}
.info-note { margin-top: 18px; font-size: 14px; color: #999; letter-spacing: 1px; text-align: center; }
@media (max-width: 991px) {
  .treatment, .team, .information { padding: 60px 0; }
  .google-map { width: 90%; height: 400px; margin: 0 auto; }
  .time-table { margin-top: 40px; }
}
@media (max-width: 575px) {
  .treatment, .team, .information { padding: 40px 0; }
  .google-map { height: 300px; }
  .table th { width: 110px; }
  .table th, .table td { font-size: 16px; letter-spacing: 1px; }
}

/* ===== Footer（#EDE8E7、logo250、聯絡置中18/字距2、icon45） ===== */
.footer { position: relative; background: var(--footer-bg); padding: 140px 0; color: var(--main-color); }
.footer .container { position: relative; display: flex; align-items: center; min-height: 120px; }
.footer .logo { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
.footer .logo img { width: 250px; }
.footer .contact {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 18px; letter-spacing: 2px; line-height: 2; text-align: center;
}
.footer .contact a { color: var(--main-color); }
.footer .contact a:hover { color: var(--accent); }
.footer .icon { margin-left: auto; display: flex; gap: 20px; }
.footer .icon img, .footer .icon svg { width: 45px; height: 45px; }
.footer .icon a { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background: var(--main-color); color: #fff; }
.footer .icon a:hover { background: var(--accent); }
.footer .icon svg { width: 24px; height: 24px; }
.copyright { background: var(--footer-bg); text-align: center; font-size: 12px; color: #999; padding: 0 15px 20px; letter-spacing: 1px; }
@media (max-width: 991px) {
  .footer { padding: 40px 0; }
  .footer .container { flex-direction: column; min-height: unset; }
  .footer .logo, .footer .contact { position: static; transform: none; }
  .footer .contact { margin: 30px 0; }
  .footer .icon { margin: 0 auto; justify-content: space-evenly; width: 80%; }
}

/* ===== 內頁通用 ===== */
.page-hero { background: #fff; padding: 60px 0 10px; }
.page-hero .main-title { justify-content: flex-start; }
@media (max-width: 991px) { .page-hero .main-title { justify-content: center; } }
.section-pad { padding: 60px 0; }
.text-body { font-size: 16px; letter-spacing: 1.2px; line-height: 2.1; }

/* 服務內頁 */
.svc-block { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding: 50px 0; border-bottom: 1px solid var(--line); }
.svc-block:last-child { border-bottom: 0; }
.svc-block .pic { flex: 1 1 42%; min-width: 280px; }
.svc-block .pic img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.svc-block .body { flex: 1 1 50%; min-width: 280px; }
.svc-block .num-en { color: var(--accent); font-size: 15px; letter-spacing: 2px; }
.svc-block h2 { font-size: 28px; font-weight: 500; letter-spacing: 2.4px; margin: 8px 0 14px; color: #555; }
.svc-block ul { margin: 18px 0 0; padding-left: 2px; list-style: none; }
.svc-block li { padding-left: 22px; position: relative; margin-bottom: 10px; letter-spacing: 1px; }
.svc-block li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.anchor-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 6px; }
.anchor-chips a { border: 1px solid var(--line); border-radius: 30px; padding: 8px 18px; font-size: 15px; letter-spacing: 1px; }
.anchor-chips a:hover { border-color: var(--accent); color: var(--accent); }

/* 醫師內頁卡 */
.doctor-card { display: flex; flex-wrap: wrap; gap: 40px; padding: 50px 0; border-bottom: 1px solid var(--line); }
.doctor-card:last-child { border-bottom: 0; }
.doctor-card .photo { flex: 0 0 260px; }
.doctor-card .photo img { width: 260px; height: 350px; object-fit: cover; object-position: top; background: #f5f5f5; }
.doctor-card .info { flex: 1 1 55%; min-width: 280px; }
.doctor-card .name-line { display: flex; align-items: flex-end; }
.doctor-card .name { font-size: 30px; color: #555; }
.doctor-card .position { font-size: 20px; margin-left: 12px; }
.doctor-card .tags { margin: 14px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.doctor-card .tags span { background: rgba(119,152,199,.12); color: var(--accent); border-radius: 30px; padding: 5px 16px; font-size: 15px; letter-spacing: 1px; }
.doctor-card h3 { font-size: 18px; letter-spacing: 2px; color: #555; margin: 22px 0 10px; }
.doctor-card ul { list-style: none; margin: 0; padding: 0; }
.doctor-card li { position: relative; padding-left: 20px; margin-bottom: 8px; letter-spacing: 1px; line-height: 1.8; }
.doctor-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* 文章列表 */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.article-card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: .3s; }
.article-card:hover { box-shadow: rgba(0,0,0,.12) 0 6px 18px; transform: translateY(-2px); }
.article-card .cover { aspect-ratio: 16/10; background: #f2f2f2; overflow: hidden; }
.article-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.article-card .cover .ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--minor-color); font-size: 40px; }
.article-card .pad { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.article-card .meta { color: var(--accent); font-size: 13px; letter-spacing: 1.5px; margin-bottom: 8px; }
.article-card h2 { font-size: 19px; font-weight: 500; letter-spacing: 1px; margin: 0 0 8px; color: #555; line-height: 1.6; }
.article-card p { font-size: 14px; line-height: 1.9; color: #888; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .more { margin-top: auto; padding-top: 14px; color: var(--accent); font-size: 14px; letter-spacing: 1px; }
.filter-chips { display: flex; gap: 10px; margin-top: 26px; }
.filter-chips button { border: 1px solid var(--line); background: #fff; color: var(--main-color); border-radius: 30px; padding: 8px 22px; font-size: 15px; letter-spacing: 1px; cursor: pointer; transition: .3s; font-family: inherit; }
.filter-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 文章內頁 prose */
.prose-als { font-size: 16.5px; letter-spacing: .8px; }
.prose-als h2 { font-size: 24px; font-weight: 500; letter-spacing: 2px; color: #555; margin: 2.2em 0 .8em; padding-left: 14px; border-left: 4px solid var(--accent); line-height: 1.5; }
.prose-als h3 { font-size: 20px; font-weight: 500; letter-spacing: 1.5px; color: #555; margin: 1.8em 0 .6em; }
.prose-als h4 { font-size: 17px; font-weight: 700; margin: 1.4em 0 .5em; }
.prose-als p { line-height: 2.1; margin: .9em 0; }
.prose-als ul, .prose-als ol { margin: .9em 0 .9em 1.5em; line-height: 2; }
.prose-als img { border-radius: 6px; margin: 1.5em auto; border: 1px solid var(--line); }
.prose-als a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose-als blockquote { border-left: 3px solid var(--accent); background: rgba(119,152,199,.08); padding: .8em 1.2em; margin: 1.2em 0; border-radius: 4px; }
.prose-als hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose-als code { background: #f2f2f2; padding: .1em .4em; border-radius: 4px; }

/* CTA 條 */
.cta-strip { background: rgba(119,152,199,.1); border-radius: 8px; padding: 40px; text-align: center; margin: 60px 0; }
.cta-strip h2 { font-size: 24px; font-weight: 500; letter-spacing: 2px; color: #555; margin: 0 0 8px; }
.cta-strip p { margin: 0 0 22px; letter-spacing: 1px; }
.btn-line, .btn-tel { display: inline-flex; align-items: center; gap: 8px; border-radius: 30px; padding: 12px 30px; font-size: 16px; letter-spacing: 1.5px; margin: 0 8px 8px; }
.btn-line { background: #06C755; color: #fff; }
.btn-line:hover { opacity: .9; }
.btn-tel { background: var(--accent); color: #fff; }
.btn-tel:hover { opacity: .9; }

/* 淡入 */
.u-fade { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.u-fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .u-fade { opacity: 1; transform: none; transition: none; } }