/* 家事找律師｜溫暖款（design: warm）
   柔和、像生活雜誌：淺米色頁首、霞鶩文楷標題、大圓角、首屏左文右圖（拱門形框）、律師圓形照片。
   家事案件的讀者情緒重，刻意不用深色壓迫感；這裡只寫「跟另外兩款不一樣」的地方，共用版面在 site.css。 */

.design-warm { --hand: "LXGW WenKai TC", "Noto Sans TC", serif; --cream: color-mix(in srgb, var(--accent-soft) 45%, #fffdf9); }
body.design-warm { background: var(--cream); }
.design-warm h1, .design-warm h2, .design-warm h3, .design-warm .brand-name, .design-warm .ft-name,
.design-warm .sec-title, .design-warm .page-title, .design-warm .hero-title, .design-warm .art-title,
.design-warm .card h3, .design-warm .person-name, .design-warm .step h3, .design-warm .tl-body h3,
.design-warm .cta-copy h2, .design-warm .art-cta h2, .design-warm .art-body h2, .design-warm .art-body h3,
.design-warm .net-name, .design-warm .split-quote blockquote, .design-warm .art-service-name, .design-warm .panel h3 { font-family: var(--hand); font-weight: 700; }
.design-warm .sec-surface { background: #fff; }
.design-warm .sec-tint { background: color-mix(in srgb, var(--tint) 70%, #fff); }

/* ── 頁首：淺色、頂端一條品牌色資訊列 ── */
.design-warm .topbar { background: var(--brand); color: #fff; }
.design-warm .topbar a { color: #fff; }
.design-warm .site-header { background: var(--cream); border-bottom: 0; box-shadow: 0 10px 24px -22px rgba(20, 60, 55, .5); }
.design-warm .brand-name { font-size: 23px; color: var(--brand); }
/* 選單：每項上面一個小圖示（像法律010的分類列），不用圓形色塊；選中的那一項用珊瑚色手寫波浪線（Jimmy 2026-10-05：「我不要你用這種圓形的」） */
.design-warm .main-nav ul { gap: 4px; }
.design-warm .main-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px 12px;
  border-radius: 0; background: none; font-size: 15.5px; color: var(--brand); }
.design-warm .nav-ico { display: block; width: 23px; height: 23px; color: var(--accent); transition: transform .2s; }
.design-warm .main-nav a:hover { background: none; }
.design-warm .main-nav a:hover .nav-ico { transform: translateY(-2px); }
.design-warm .main-nav a[aria-current] { background: none; color: var(--brand); font-weight: 700; box-shadow: none; }
.design-warm .main-nav a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 34px; height: 7px; transform: translateX(-50%);
  background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 12'%3E%3Cpath d='M2 7Q9.5 1 17 7T32 7T47 7T62 7T77 7T90 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 12'%3E%3Cpath d='M2 7Q9.5 1 17 7T32 7T47 7T62 7T77 7T90 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.design-warm .hd-line { border-radius: 12px; }
.design-warm .btn { border-radius: 12px; box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .5); }   /* Jimmy 2026-10-05：「我不要圓的」——按鈕、標籤、分頁都不用膠囊形 */
.design-warm .tags li, .design-warm .badge { border-radius: 8px; }

/* ── 首屏：左文右圖，圖放在拱門形框裡，背後兩團柔和色塊 ── */
.design-warm .hero-split { position: relative; overflow: hidden; background:
  radial-gradient(ellipse 42% 62% at 86% 34%, var(--accent-soft) 0%, transparent 100%),
  radial-gradient(ellipse 30% 40% at 4% 70%, var(--tint) 0%, transparent 100%), var(--cream); }
.design-warm .hero-title { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.3; color: var(--brand); }
.design-warm .hero-lead { color: var(--hero-sub); font-size: clamp(17px, 1.5vw, 19px); }
.design-warm .hero-frame { border-radius: 260px 260px 28px 28px; box-shadow: 0 40px 70px -40px rgba(20, 60, 55, .6); border: 10px solid #fff; }
.design-warm .hero-facts .ico { color: var(--accent-ink); }
.design-warm .hero-facts { color: var(--hero-sub); }

/* ── 內頁頁首：左文右圖，圖片大圓角 ── */
.design-warm .page-hero { background: transparent; padding: 46px 0 40px; }
.design-warm .page-hero-split { padding: 40px 0 34px; }
.design-warm .page-hero-art-img { border-radius: 28px; border: 8px solid #fff; box-shadow: 0 30px 60px -40px rgba(20, 60, 55, .55); }
.design-warm .page-title { color: var(--brand); }
.design-warm .eyebrow { display: inline-block; padding: 4px 14px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); letter-spacing: .1em; }
.design-warm .eyebrow-hero { background: #fff; }

/* ── 背景：淺色區塊右上角一團珊瑚色、底色區塊左下角一團薄荷色（柔和漸層，沒有硬邊） ── */
.design-warm .sec-tint::before, .design-warm .sec-plain::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.design-warm .sec-tint::before { right: -240px; top: 4%; width: 640px; height: 480px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-soft) 92%, transparent), transparent); }
.design-warm .sec-plain::before { left: -260px; top: 22%; width: 600px; height: 460px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 95%, transparent), transparent); }
.design-warm .no-deco::before { display: none; }

/* ── 區段大標下面一條手寫感的波浪線 ── */
.design-warm .sec-head .sec-title::after { content: ""; display: block; width: 92px; height: 12px; margin-top: 12px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 12'%3E%3Cpath d='M2 7Q9.5 1 17 7T32 7T47 7T62 7T77 7T90 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 12'%3E%3Cpath d='M2 7Q9.5 1 17 7T32 7T47 7T62 7T77 7T90 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.design-warm .sec-head-center .sec-title::after { margin-inline: auto; }

/* ── 卡片：大圓角、柔和陰影，圖示放在圓形色塊裡 ── */
.design-warm .card { border-radius: 26px; border: 0; box-shadow: 0 18px 44px -32px rgba(20, 60, 55, .55); }
.design-warm .card-link:hover { box-shadow: 0 26px 50px -30px rgba(20, 60, 55, .6); }
.design-warm .card-icon { border-radius: 16px; width: 60px; height: 60px; background: #fff; box-shadow: 0 8px 18px -12px rgba(20, 60, 55, .55); }
.design-warm .card-ic:nth-child(3n+2) .card-icon { color: var(--brand); }
.design-warm .card-ic:nth-child(3n) .card-icon { color: var(--brand-2); }
.design-warm .card h3 { font-size: 23px; }
/* 情況卡片輪流用三種很淡的底色（米杏、薄荷、蜜桃），一整排才不會全是白色 */
.design-warm .card-ic:nth-child(3n+1) { background: color-mix(in srgb, var(--accent-soft) 42%, #fff); }
.design-warm .card-ic:nth-child(3n+2) { background: color-mix(in srgb, var(--tint) 62%, #fff); }
.design-warm .card-ic:nth-child(3n) { background: color-mix(in srgb, var(--mark) 30%, #fff); }
.design-warm .step { border-radius: 26px; border: 0; box-shadow: 0 18px 44px -34px rgba(20, 60, 55, .5); }
.design-warm .step-num { font-family: var(--hand); color: var(--accent); }
.design-warm .panel, .design-warm .acc, .design-warm .contact-card, .design-warm .net-card, .design-warm .toc, .design-warm .faq-item { border-radius: 22px; }
.design-warm .split-img { border-radius: 200px 200px 26px 26px; border: 8px solid #fff; }
.design-warm .split-quote { border-radius: 34px; }

/* ── 律師：圓形照片置中，名字用手寫感字體 ── */
.design-warm .people { gap: 26px; }
.design-warm .person { align-items: center; padding: 30px 24px 26px; border: 0; border-radius: 30px; text-align: center;
  box-shadow: 0 20px 48px -34px rgba(20, 60, 55, .55); }
.design-warm .person-photo { width: 168px; height: 168px; border-radius: 50%; overflow: hidden; border: 6px solid var(--accent-soft); flex: none; }
.design-warm .portrait { width: 100%; height: 100%; aspect-ratio: 1; object-position: center 22%; }
.design-warm .person-body { align-items: center; padding: 16px 0 0; }
.design-warm .person-title { justify-content: center; }
.design-warm .person-name { font-size: 27px; }
.design-warm .tags { justify-content: center; }
.design-warm .tags li { background: color-mix(in srgb, var(--accent-soft) 70%, #fff); }
.design-warm .text-link { margin-top: 10px; }
/* 律師小卡與首頁頭像格（共用寫法在 site.css）：圓角方形、不用圓形（Jimmy：家事站不要圓的），暖色框 */
.design-warm .people.people-compact .person { border-radius: 16px; border-color: color-mix(in srgb, var(--accent-soft) 70%, var(--line)); box-shadow: 0 16px 36px -30px rgba(20, 60, 55, .5); }
.design-warm .people.people-compact .person-photo { border-radius: 10px; }
.design-warm .people.people-faces .person-photo { border-radius: 16px; border: 5px solid var(--accent-soft); }
/* 團隊頁：圓形照片在左、內容在右的長卡 */
.design-warm .person-detail { flex-direction: row; align-items: flex-start; gap: 34px; padding: 34px 36px; text-align: left; }
.design-warm .person-detail .person-photo { width: 190px; height: 190px; }
.design-warm .person-detail .person-body { align-items: stretch; padding: 4px 0 0; }
.design-warm .person-detail .person-title, .design-warm .person-detail .tags { justify-content: flex-start; }
.design-warm .person-detail .portrait { height: 100%; }

/* ── 文章列表分頁：膠囊按鈕 ── */
.design-warm .tab { border-radius: 10px; background: #fff; color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--line); }
.design-warm .tab:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.design-warm .blog-filter input:checked + .tab { background: var(--brand); color: #fff; box-shadow: none; }
.design-warm .post-card .card-img { aspect-ratio: 16 / 10; }

/* ── 行動呼籲帶、頁尾：圓角大色塊 ── */
.design-warm .cta-band { width: min(1180px, 100% - 32px); margin: 0 auto clamp(48px, 7vw, 90px); border-radius: 36px; }
.design-warm .site-footer { border-radius: 40px 40px 0 0; }

@media (max-width: 860px) {
  .design-warm .main-nav ul { gap: 0; }
  .design-warm .main-nav a { padding: 6px 2px 10px; font-size: 13.5px; }
  .design-warm .nav-ico { width: 20px; height: 20px; }
  .design-warm .main-nav a[aria-current] { box-shadow: none; }
  .design-warm .hero-split-inner { padding: 34px 0 40px; }
  .design-warm .hero-art { max-width: 380px; margin-inline: auto; }
  .design-warm .page-hero-art { max-width: 420px; }
  .design-warm .person-detail { flex-direction: column; align-items: center; text-align: center; padding: 28px 22px; }
  .design-warm .person-detail .person-photo { width: 168px; height: 168px; }
  .design-warm .person-detail .person-title, .design-warm .person-detail .tags { justify-content: center; }
  .design-warm .cta-band { border-radius: 26px; }
  .design-warm .site-footer { border-radius: 28px 28px 0 0; }
}