/* ===========================================================
   林建平律師事務所 — 共用樣式
   =========================================================== */

:root{
  /* 深藍 ── 主視覺、預約區、頁尾 */
  --navy:#142A43;
  --navy-2:#1F3A5A;
  --navy-deep:#0D1E31;          /* 按鈕 hover */

  /* 文字 */
  --ink:#202A32;                /* 主要文字 */
  --ink-soft:#55606B;           /* 次要文字（較 GPT 建議再加深，確保對比 ≥ 5:1） */

  /* 底色 ── 暖白系 */
  --paper:#F7F4EE;              /* 全站底色 */
  --paper-2:#EEEAE1;            /* 次要區塊 */
  --white:#FFFDF9;              /* 卡片、表格底色（暖白，非純白） */
  --line:#DEDACF;

  /* 金色 ── 僅作點綴 */
  --gold:#8A6A3C;               /* 金色「文字」用，對比 4.5:1 以上 */
  --gold-accent:#AD8950;        /* 短線、細框、hover 等非文字用途 */
  --gold-soft:#C9A874;          /* 深藍底上的金字 */

  --wrap:1120px;
  --serif:"Noto Serif TC",'PingFang TC','Microsoft JhengHei',serif;
  --sans:"Noto Sans TC",'PingFang TC','Microsoft JhengHei',-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:20px;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

/* ---------- 頁首 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,244,238,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;flex-wrap:wrap;gap:12px 32px;
  align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px;
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;line-height:1.35;}
.brand-logo{display:block;width:auto;height:48px;flex:none;object-fit:contain;}
.brand-text{display:flex;flex-direction:column;width:244px;min-width:0;}
.brand b{
  display:block;width:100%;font-family:var(--serif);font-size:25px;font-weight:700;
  letter-spacing:.08em;color:var(--navy);text-align:center;
}
.brand-text>span{
  display:block;width:100%;font-size:11px;letter-spacing:.055em;color:var(--gold);
  text-transform:uppercase;text-align:center;
}

.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;}
.nav a{
  text-decoration:none;font-size:16px;color:var(--ink);font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--gold);}
.nav a[aria-current="page"]{border-bottom-color:var(--gold-accent);color:var(--navy);font-weight:600;}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-block;text-decoration:none;text-align:center;
  padding:14px 30px;border-radius:2px;font-size:16px;letter-spacing:.06em;font-weight:500;
  border:1px solid transparent;transition:.18s;
}
.btn-line{background:#06C755;color:#fff;}
.btn-line:hover{background:#05a948;}
.btn-tel{background:var(--navy);color:#fff;}
.btn-tel:hover{background:var(--navy-deep);}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn-ghost:hover{background:var(--navy);color:#fff;}
.btn-ghost-light{border-color:rgba(255,255,255,.6);color:#fff;}
.btn-ghost-light:hover{background:#fff;color:var(--navy);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}

/* ---------- 主視覺 ---------- */
/* 主視覺底圖：把圖片命名為 hero-bg.jpg 放在同一層即可自動套用。
   沒有這個檔案時會退回純色漸層，版面不會壞。
   上方兩層半透明色塊是為了壓暗底圖，確保白字讀得清楚。 */
.hero{
  background:
    linear-gradient(180deg,rgba(20,42,67,.92) 0%,rgba(31,58,90,.84) 100%),
    url("hero-bg.jpg") center 30% / cover no-repeat,
    linear-gradient(180deg,#142A43 0%,#1F3A5A 100%);
  color:#fff;padding:60px 0 72px;
  overflow:hidden;
}
.hero-layout{
  display:grid;grid-template-columns:minmax(200px,.55fr) minmax(0,1.75fr);
  gap:16px;align-items:center;
}
.hero-visual{display:flex;align-items:flex-start;justify-content:center;align-self:start;min-width:0;padding-top:92px;}
.hero-mark{
  display:block;position:static;width:min(100%,360px);max-width:none;height:auto;
  opacity:.48;mix-blend-mode:screen;pointer-events:none;user-select:none;
}
.hero-copy{min-width:0;width:100%;}
.hero .eyebrow{
  font-size:12px;letter-spacing:.34em;color:var(--gold-soft);
  text-transform:uppercase;margin:0 0 22px;
}
.hero h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(36px,5.8vw,58px);line-height:1.4;
  letter-spacing:.12em;margin:0 0 20px;width:min(560px,100%);max-width:100%;
}
.hero-title{display:block;width:100%;}
.hero h1 .sub{
  display:block;margin-top:16px;font-weight:400;text-align:left;
  font-size:clamp(17px,2.5vw,23px);letter-spacing:.14em;
  color:var(--gold-soft);
}
@media (min-width:861px){
  .hero-title{text-align:left;text-align-last:auto;}
  .hero-title{letter-spacing:.11em;text-align:justify;text-align-last:justify;}
  .hero h1 .sub{text-align:justify;text-align-last:justify;}
}
.hero .lead{
  max-width:none;color:#D3DBE6;font-size:17px;margin:0 0 30px;text-align:justify;text-align-last:left;
}
.hero .rule{width:56px;height:2px;background:var(--gold-accent);margin:0 0 22px;}

/* 主視覺下方的聯絡資訊 */
.hero-info{
  display:grid;grid-template-columns:max-content 1fr;
  gap:11px 26px;margin:0;align-items:baseline;
}
.hero-info dt{
  font-family:var(--serif);font-size:14px;letter-spacing:.14em;
  color:var(--gold-soft);margin:0;white-space:nowrap;
}
.hero-info dd{margin:0;font-size:16.5px;color:#E4EAF1;}
.hero-info dd a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);}
.hero-info dd a:hover{color:var(--gold-soft);}
@media (max-width:860px){
  .hero-layout{grid-template-columns:1fr;gap:28px;}
  .hero-visual{justify-content:flex-start;padding-top:0;}
  .hero-mark{width:min(220px,72vw);max-width:100%;opacity:.42;}
  .hero-title,.hero h1 .sub,.hero .lead{text-align:left;text-align-last:auto;}
  .hero-lead-break{display:none;}
  .hero-info{gap:9px 18px;}
  .hero-info dd{font-size:16px;min-width:0;overflow-wrap:anywhere;}
}
@media (max-width:520px){
  .hero{padding:44px 0 52px;}
  .hero h1{letter-spacing:.06em;font-size:31px;}
  .hero h1 .sub{font-size:16.5px;letter-spacing:.06em;line-height:1.8;}
  .hero-info{grid-template-columns:1fr;gap:4px;}
  .hero-info dt{margin-top:12px;}
  .hero-info dt:first-child{margin-top:0;}
}

/* 內頁小標頭 */
.page-head{
  background:var(--navy);color:#fff;padding:64px 0 56px;
}
.page-head .eyebrow{
  font-size:12px;letter-spacing:.34em;color:var(--gold-soft);
  text-transform:uppercase;margin:0 0 16px;
}
.page-head h1{
  font-family:var(--serif);font-size:clamp(28px,4.6vw,40px);
  letter-spacing:.08em;margin:0;font-weight:700;
}

/* ---------- 區塊 ---------- */
section{padding:76px 0;}
section.alt{background:var(--paper-2);}
.sec-head{margin-bottom:44px;}
.sec-head h2{
  font-family:var(--serif);font-size:clamp(26px,4.2vw,38px);
  letter-spacing:.08em;color:var(--navy);margin:0 0 14px;font-weight:700;
}
.sec-head p{margin:0;color:var(--ink-soft);max-width:720px;}
.sec-head .rule{width:44px;height:2px;background:var(--gold-accent);margin-bottom:20px;}

/* ---------- 服務卡 ---------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.card{
  background:var(--white);border:1px solid var(--line);
  padding:32px 28px;text-decoration:none;color:inherit;
  display:block;transition:.18s;
}
.card:hover{border-color:var(--gold-accent);transform:translateY(-3px);}
.card .num{
  font-family:var(--serif);font-size:14px;letter-spacing:.14em;
  color:var(--gold);display:block;margin-bottom:12px;
}
.card h3{
  font-family:var(--serif);font-size:22px;letter-spacing:.05em;
  color:var(--navy);margin:0 0 12px;font-weight:700;
}
.card p{margin:0;font-size:16px;color:var(--ink-soft);line-height:1.85;}

/* ---------- 費用表 ---------- */
.fee-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);}
.fee-table th,.fee-table td{
  padding:18px 20px;border-bottom:1px solid var(--line);
  text-align:left;font-size:16.5px;vertical-align:top;
}
.fee-table th{
  width:34%;font-weight:600;color:var(--navy);background:var(--paper-2);
  font-family:var(--serif);letter-spacing:.05em;
}
.fee-table tr:last-child th,.fee-table tr:last-child td{border-bottom:none;}
.table-scroll{overflow-x:auto;}
.note{font-size:15px;color:var(--ink-soft);margin-top:16px;line-height:1.85;}

/* ---------- 條列 ---------- */
.plain-list{list-style:none;padding:0;margin:0;}
.plain-list li{
  padding:9px 0 9px 22px;position:relative;font-size:16px;border-bottom:1px dashed var(--line);
}
.plain-list li:last-child{border-bottom:none;}
.plain-list li::before{
  content:"";position:absolute;left:2px;top:19px;
  width:6px;height:6px;background:var(--gold-accent);
}

/* ---------- 服務項目分節 ---------- */
.svc-grid{
  display:grid;gap:20px;grid-template-columns:repeat(2,1fr);
}
.svc-block{
  background:var(--white);border:1px solid var(--line);
  padding:32px 30px;margin:0;
}
.svc-block h3{
  font-family:var(--serif);font-size:24px;color:var(--navy);
  letter-spacing:.06em;margin:0 0 8px;font-weight:700;
}
.svc-block .tag{
  font-family:var(--serif);font-size:14px;letter-spacing:.14em;
  color:var(--gold);display:block;margin-bottom:14px;
}
.svc-block p{margin:0 0 16px;color:var(--ink-soft);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.chips li{
  font-size:15px;padding:7px 15px;background:var(--white);
  border:1px solid #D6D1C4;color:var(--ink);
}

/* ---------- 律師簡介 ---------- */
.profile{display:grid;gap:44px;grid-template-columns:1fr;align-items:start;max-width:820px;}
.portrait{
  background:var(--paper-2);border:1px solid var(--line);
  aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:14px;text-align:center;padding:20px;line-height:1.9;
}
.profile h2{
  font-family:var(--serif);font-size:34px;color:var(--navy);
  letter-spacing:.1em;margin:0 0 6px;font-weight:700;
}
.profile .role{
  font-size:13px;letter-spacing:.24em;color:var(--gold);
  text-transform:uppercase;margin:0 0 26px;
}
.dl{margin:0;}
.dl dt{
  font-family:var(--serif);font-size:14px;letter-spacing:.14em;
  color:var(--gold);margin-top:26px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.dl dd{margin:14px 0 0;font-size:16px;}

/* ---------- 關於本所：壓縮間距，讓整區落在一個畫面內 ---------- */
#about{padding-top:46px;padding-bottom:50px;}
#about .sec-head{margin-bottom:22px;}
#about .profile h2{font-size:29px;margin:0 0 4px;}
#about .profile .role{margin:0 0 13px;}
#about .profile > div > p{line-height:1.8;}
#about .dl dt{margin-top:15px;padding-bottom:6px;}
#about .dl dd{margin-top:9px;line-height:1.75;}

/* 執業領域：三欄對齊，取代原本用 <br> 與｜手動斷行的排法 */
.field-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:7px 22px;list-style:none;margin:0;padding:0;
}
.field-grid li{
  font-size:16px;line-height:1.75;position:relative;padding-left:14px;
}
.field-grid li::before{
  content:"";position:absolute;left:0;top:11px;
  width:5px;height:5px;background:var(--gold-accent);
}
@media (max-width:860px){
  .field-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .field-grid{grid-template-columns:1fr;}
}

/* ---------- FAQ ---------- */
.faq{background:var(--white);border:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq details:last-child{border-bottom:none;}
.faq summary{
  cursor:pointer;padding:21px 24px;font-size:17px;font-weight:600;
  color:var(--navy);list-style:none;position:relative;padding-right:56px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"＋";position:absolute;right:24px;top:19px;color:var(--gold);font-weight:400;
}
.faq details[open] summary::after{content:"－";}
.faq .a{padding:0 24px 22px;color:var(--ink-soft);font-size:16.5px;}

/* ---------- 深藍底聯絡／預約區 ---------- */
.cta{background:var(--navy);color:#fff;padding:76px 0;}
.cta .sec-head{margin-bottom:40px;}
.cta .sec-head h2{color:#fff;}
.cta .sec-head p{color:#C6D0DD;font-size:15px;line-height:1.85;}
@media (min-width:861px){
  .cta .sec-head p{max-width:372px;}
}
/* 左：聯絡資訊　中：LINE QR ＋ 按鈕　右：地圖 */
.contact-3{
  display:grid;gap:36px 40px;
  grid-template-columns:1.15fr .8fr 1.05fr;
  align-items:start;
}
.contact-3 .info-list dt{color:var(--gold-soft);}
.contact-3 .info-list dd{color:#E4EAF1;font-size:16px;}
.contact-3 .info-list dd a{border-bottom-color:rgba(255,255,255,.26);}
.contact-3 .info-list dd a:hover{color:var(--gold-soft);}
.btn-stack{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.btn-sm{padding:11px 18px;font-size:15px;letter-spacing:.04em;}
.c-map .map{height:260px;min-height:0;border-color:rgba(255,255,255,.22);}
.mini{margin:14px 0 0;font-size:13px;color:#8D9BAC;line-height:1.8;}
.mini a{color:#C3CDDA;white-space:nowrap;}
.mini a:hover{color:var(--gold-soft);}

/* ---------- 聯絡 ---------- */
.map{border:1px solid var(--line);width:100%;height:100%;min-height:420px;}
.info-list{margin:0;}
.info-list dt{
  font-family:var(--serif);font-size:13.5px;letter-spacing:.16em;
  color:var(--gold);margin-top:24px;
}
.info-list dt:first-child{margin-top:0;}
.info-list dd{margin:8px 0 0;font-size:17px;}
.info-list dd a{text-decoration:none;border-bottom:1px solid var(--line);}
.info-list dd a:hover{color:var(--gold);}


.qr-inline{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
}
.qr-inline img{width:96px;height:96px;flex:none;background:#fff;padding:6px;}
.qr-inline span{font-size:13.5px;letter-spacing:.08em;color:#C6D0DD;line-height:1.6;}




/* ---------- 頁尾 ---------- */
.site-footer{background:var(--navy);color:#AFBBCB;padding:56px 0 28px;font-size:15px;}
.site-footer a{text-decoration:none;}
.site-footer a:hover{color:var(--gold-soft);}
.foot-grid{display:grid;gap:36px;grid-template-columns:1.4fr 1fr 1fr;}
.foot-grid h4{
  font-family:var(--serif);color:#fff;font-size:16px;
  letter-spacing:.1em;margin:0 0 16px;font-weight:700;
}
.foot-grid p{margin:0 0 8px;line-height:1.9;}
.foot-brand{display:flex;align-items:center;gap:8px;width:fit-content;margin-bottom:18px;line-height:1.35;}
.foot-brand-logo{display:block;width:auto;height:48px;flex:none;object-fit:contain;}
.foot-brand-text{display:flex;flex-direction:column;width:244px;min-width:0;}
.foot-brand h4{
  display:block;width:100%;font-family:var(--serif);font-size:25px;font-weight:700;
  letter-spacing:.08em;color:#fff;text-align:center;line-height:1.35;margin:0;
}
.foot-grid p.motto{
  display:block;width:100%;font-size:11px;letter-spacing:.055em;color:var(--gold-soft);
  text-transform:uppercase;text-align:center;margin:0;line-height:1.35;opacity:1;font-weight:400;
  font-family:var(--sans);
}
.foot-links{list-style:none;padding:0;margin:0;}
.foot-links li{margin-bottom:10px;}
.copyright a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);}
.copyright a:hover{color:var(--gold-soft);}
.copyright{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:44px;padding-top:22px;font-size:13.5px;color:#8794A6;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
}

/* ---------- 行動裝置 ---------- */
@media (max-width:860px){
  body{font-size:16px;}
  .brand{gap:7px;}
  .brand-logo{height:40px;}
  .brand-text{width:204px;}
  .brand b{font-size:21px;}
  .profile{grid-template-columns:1fr;gap:28px;}
  .portrait{max-width:280px;}
    .contact-3{grid-template-columns:1fr;gap:32px;}
  .c-map .map{height:230px;}
    .btn-stack .btn{width:100%;}
  .foot-grid{grid-template-columns:1fr;gap:28px;}
  section{padding:56px 0;}
  .site-header .wrap{padding-top:12px;padding-bottom:12px;}
  .nav{gap:2px 18px;}
  .nav a{font-size:15px;}
  .btn{padding:13px 24px;font-size:15px;}
  .btn-row .btn{flex:1 1 auto;}
  .fee-table th{width:38%;}
  .svc-grid{grid-template-columns:1fr;}
  .nav-home,.nav-faq{display:none;}
  .foot-nav{display:none;}
}

/* 手機：收費表改成「項目在上、說明在下」，左欄才不會被擠成細長條 */
@media (max-width:640px){
  .fee-table,.fee-table tbody,.fee-table tr,.fee-table th,.fee-table td{
    display:block;width:auto;
  }
  .fee-table tr{border-bottom:1px solid var(--line);}
  .fee-table tr:last-child{border-bottom:none;}
  .fee-table th{
    width:auto;background:transparent;border-bottom:none;
    padding:18px 18px 2px;font-size:17px;
  }
  .fee-table td{padding:0 18px 18px;border-bottom:none;}
}

/* ---------- 手機：放大電話與信箱的可點範圍 ---------- */
/* 這些連結本身只有 17–18px 高，手指不容易點準（Apple 建議 44px、
   Google 建議 48dp）。用一層看不見的偽元素把感應範圍上下各撐開 10px，
   文字位置、底線、字級完全不動，畫面看起來一模一樣。 */
@media (max-width:860px){
  .hero-info dd a,
  .contact-3 .info-list dd a,
  .site-footer p a[href^="tel"],
  .site-footer p a[href^="mailto"]{
    position:relative;
  }
  .hero-info dd a::after,
  .contact-3 .info-list dd a::after,
  .site-footer p a[href^="tel"]::after,
  .site-footer p a[href^="mailto"]::after{
    content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;
  }
}

/* ---------- 列印／輸出 PDF ---------- */
@media print{
  .site-header{position:static;}
  .hero{background:var(--navy) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .cta{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .svc-card,.faq details,.fee-table{break-inside:avoid;page-break-inside:avoid;}
  section{page-break-inside:auto;}
  .btn{border:1px solid #999;}
  iframe{display:none;}
  a[href^="http"]::after{content:"";}
}