/* 首頁專用版面（Phase 2）
 *
 * 目標是「冷靜的底色＋清楚的資訊重點」：底色仍是藏藍／米白／灰，
 * 只在數據、Alvin 判斷、風險三種語意上用 site.css 的 semantic tokens 拉開層級。
 * 顏色一律取 token（--data／--attention／--risk），這裡不寫新的 hex。
 * 刻意不做：每區三張卡、每張卡不同底色、漸層、大量 icon、進場動畫以外的動效。
 */

/* ---- 01 Hero：手機第一屏要同時看到定位與兩個 CTA，所以收掉署名列與多餘留白 ---- */
.hero{padding:clamp(64px,9vw,120px) 0 clamp(48px,6vw,84px)}
.hero .lede{max-width:34em}
.hero .cta .btn{min-height:48px;display:inline-flex;align-items:center}
@media(max-width:760px){
  .hero{padding:44px 0 40px}
  .hero-lead .eyebrow{margin-bottom:18px}
  .hero h1{font-size:clamp(2.3rem,10.4vw,2.9rem);line-height:1.12}
  .hero .lede{margin-top:20px;font-size:1.04rem;line-height:1.75}
  .hero .cta{margin-top:26px;gap:10px}
  .hero .cta .btn{flex:1 1 100%;justify-content:center}
}

/* ---- 首頁各區共用的區塊標頭：編號用 data 色的小字，不再用羅馬數字 ---- */
.hm{padding:clamp(52px,7vw,92px) 0}
.hm-head{margin-bottom:clamp(26px,3.6vw,40px);max-width:60ch}
.hm-no{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.24em;color:var(--text-mute)}
.hm-no b{color:var(--attention-ink);font-weight:600;margin-right:10px;font-variant-numeric:tabular-nums}
.hm-head h2{margin:12px 0 0;font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:600;letter-spacing:.02em;line-height:1.24;text-wrap:balance}
.hm-head p{margin:14px 0 0;color:var(--text-soft);line-height:1.85;max-width:54ch}
@media(max-width:760px){.hm{padding:40px 0}}

/* ---- 02 你現在遇到什麼問題？----
   四個入口不是四張一樣的卡：最接近核心轉換的「我看到一間房」用藏藍實底、佔左欄；
   其餘三個是右欄的細框列，靠邊框與編號區分，不靠底色。 */
.entry{background:var(--atmos-panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.en-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:14px}
.en-card:not(.en-card--key){grid-column:2}
.en-card{display:grid;grid-template-columns:auto 1fr auto;column-gap:16px;align-items:center;
  padding:20px 22px;text-decoration:none;color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:2px;
  transition:border-color .25s ease,background-color .25s ease}
.en-card:hover{border-color:var(--data-line)}
.en-card:focus-visible{outline:2px solid var(--attention);outline-offset:2px}
.en-n{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--text-mute);font-variant-numeric:tabular-nums}
.en-t{font-family:var(--serif);font-size:1.16rem;font-weight:600;letter-spacing:.02em}
.en-d{grid-column:2;margin-top:2px;font-family:var(--sans);font-size:.86rem;line-height:1.7;color:var(--text-soft)}
.en-go{grid-row:1 / span 2;grid-column:3;font-family:var(--sans);font-size:1rem;color:var(--text-mute)}
/* 主入口：藏藍實底，兩個主題下都維持深底淺字（跟 hero 一樣是刻意的深色面） */
.en-card--key{grid-column:1;grid-row:1 / 4;grid-template-columns:1fr;align-content:center;row-gap:0;padding:clamp(26px,3.4vw,40px);
  background:var(--navy);border-color:rgba(198,160,82,.34);color:#F6F1E6}
.en-card--key:hover{border-color:var(--attention);background:var(--navy-deep)}
.en-card--key .en-n{color:var(--gold-lt)}
.en-card--key .en-t{margin-top:10px;font-size:clamp(1.5rem,3vw,2rem);color:#F6F1E6}
.en-card--key .en-d{grid-column:1;margin-top:12px;font-size:.96rem;line-height:1.85;color:#C9D0DE;max-width:30em}
.en-card--key .en-go{grid-row:auto;grid-column:1;margin-top:22px;font-size:.84rem;letter-spacing:.12em;color:var(--gold-lt)}
@media(max-width:760px){
  /* 手機照 DOM 順序堆疊：買房、賣房、看到一間房、看市場 */
  .en-grid{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .en-card:not(.en-card--key),.en-card--key{grid-column:1;grid-row:auto}
  .en-card{padding:16px 18px}
  .en-card--key{padding:22px 20px}
  .en-card--key .en-t{font-size:1.4rem}
}

/* ---- 03 Alvin 怎麼判斷：左邊理念、右邊五列，不做五張卡 ---- */
.judge-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,72px);align-items:start}
.judge-lead p{margin:16px 0 0;color:var(--text-soft);line-height:1.95}
.judge-key{margin:26px 0 0;padding:14px 0 14px 18px;border-left:3px solid var(--attention);
  font-family:var(--serif);font-size:clamp(1.12rem,2.1vw,1.34rem);line-height:1.7;color:var(--text);text-wrap:balance}
.jd-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.jd-row{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;column-gap:14px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line)}
.jd-n{font-family:var(--serif);font-size:.95rem;color:var(--data);font-weight:600;font-variant-numeric:tabular-nums}
.jd-t{font-family:var(--serif);font-size:1.12rem;font-weight:600;margin:0;color:var(--text)}
.jd-d{grid-column:2;margin:4px 0 0;font-family:var(--sans);font-size:.9rem;line-height:1.75;color:var(--text-soft)}
/* 對應工具：沿用 .svc[data-entry]，assets/site.js 的 property_entry_click 追蹤才接得到 */
.jd-tool{grid-column:3;grid-row:1 / span 2;align-self:center;white-space:nowrap;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.06em;color:var(--data);text-decoration:none;
  padding:8px 0 8px 14px;border-left:1px solid var(--line)}
.jd-tool:hover{color:var(--attention-ink)}
.jd-tool:focus-visible{outline:2px solid var(--attention);outline-offset:3px}
@media(max-width:860px){
  .judge-grid{grid-template-columns:1fr;gap:26px}
}
@media(max-width:560px){
  .jd-row{grid-template-columns:2.2em minmax(0,1fr);padding:15px 0}
  .jd-tool{grid-column:2;grid-row:auto;border-left:0;padding:8px 0 0;justify-self:start}
}

/* ---- 04 真實案例：卡片改成有欄位名的四段資訊 ----
   這一帶在兩個主題下都固定是藏藍深底（跟 hero 一樣是刻意的深色面）。原本 dark mode 會把
   .cases 反轉成米白底，但卡片內的金色與淺色字是為深底設計的，反轉後幾乎看不見。
   在這裡把 on-invert 變數鎖成深底用的值，子元素不必各自處理主題。 */
.cases.hm{
  --on-invert:#EDE6D6;--on-invert-mute:#9AA6BE;
  background:
    radial-gradient(95% 72% at 50% -8%, rgba(198,160,82,.13), transparent 56%),
    radial-gradient(130% 95% at 50% 110%, rgba(0,0,0,.30), transparent 62%),
    var(--navy);
  color:var(--on-invert);
}
.cases.hm .hm-no{color:var(--on-invert-mute)}
.cases.hm .hm-no b{color:var(--gold-lt)}
.cases.hm .hm-head h2{color:var(--on-invert)}
.cases.hm .hm-head p{color:var(--on-invert-mute)}
.cs-hrow{margin-top:14px;padding-top:12px;border-top:1px solid rgba(214,199,160,.14)}
.cs-hrow-k{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;color:var(--on-invert-mute)}
.cs-hrow-v{margin-top:5px;font-family:var(--sans);font-size:.88rem;line-height:1.75;color:var(--on-invert);opacity:.86}
.cs-hrow--verdict{border-top-color:rgba(198,160,82,.4)}
.cs-hrow--verdict .cs-hrow-k{color:var(--gold-lt)}
.cs-hrow--verdict .cs-hrow-v{font-family:var(--serif);font-size:.98rem;color:var(--on-invert);opacity:1}
.cs-harea{font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;color:var(--gold-lt)}

/* ---- 05 最新一期市場訊號：首頁最大的數據展示區 ---- */
.signals{background:var(--panel)}
.sig-headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 28px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,30px)}
.sig-headrow .hm-head{margin-bottom:0}
.sig-more{list-style:none;margin:clamp(26px,3.4vw,36px) 0 0;padding:0;border-top:1px solid var(--line)}
.sig-more li{border-bottom:1px solid var(--line)}
.sig-more a{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;gap:14px;align-items:baseline;
  padding:14px 0;text-decoration:none;color:var(--text)}
.sig-more a:hover .sm-t{color:var(--data)}
.sm-k{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;color:var(--text-mute)}
.sm-t{font-family:var(--serif);font-size:1rem;line-height:1.6;transition:color .2s ease}
.sm-go{font-family:var(--sans);font-size:.9rem;color:var(--text-mute)}
.sig-foot{margin-top:26px}
@media(max-width:560px){
  .sig-more a{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .sm-k{grid-column:1 / -1}
}

/* ---- 情報、關於、聯絡：內容不變，只收手機高度 ---- */
@media(max-width:820px){
  #journal.hm .jrnl-grid>.post:nth-child(n+3){display:none}
  .about-grid{grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:start}
  .about .portrait{width:104px}
  .about-body p:nth-of-type(2){display:none}
  .creds{margin-top:16px;padding-top:16px}
  .fcard{padding:22px 20px}
  .fcard ul.suit{display:none}
  .fcard .qr-chip{display:none}
  .final-cta{padding-top:32px}
}

/* 藏藍帶上的 ghost 按鈕：原本沿用淺底的深色字，在深底上幾乎看不見 */
.cases .btn-ghost{border-color:rgba(224,214,190,.4);color:#EFEADD}
.cases .btn-ghost:hover{border-color:var(--gold);color:var(--gold-lt)}
.cases .cs-home-foot{margin-top:24px}
.cases.hm{padding-bottom:clamp(44px,6vw,72px)}