/* health-explorer · 共用外殼樣式
   配色沿用「客廳實拍-健康互動.html」原型（茶色 arch／墨綠藍 health／暖金 sun），非官網玫紅。
   字體與中性色（ink/muted/line/白底）對齊 tokidokiinteriors.com 的 css/site.css。
   跨案子重用：只改 *.data.js 與照片，不動這支。 */

:root{
  --ink:#333; --ink-dark:#000; --muted:#8a8a8a; --line:#e5e5e5;
  --arch:#8a6a54; --arch-bg:#f4ece4; --arch-line:#e6d8cb;
  --health:#4f7f86; --health-bg:#e9f0f0; --health-line:#d3e4e4;
  --sage:#6f8560; --sun:#e0c489;
  --paper:#fff; --card:#fff; --wash:#faf9f8;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box} html,body{margin:0}
/* 修正：右側詳情面板用 transform 平移藏到畫面外時，部分瀏覽器仍把它算進可捲動範圍，
   導致 iframe 內部長出多餘的水平捲軸、連帶讓寬度跟外面內文對不齊。鎖死 x 軸可捲動範圍解決。 */
html, body{ overflow-x:hidden; }
body{
  background:var(--paper); color:var(--ink);
  font-family:"Noto Serif TC","PMingLiU",serif; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* 左右 padding 刻意留 0：這支頁面只會以 iframe 嵌進 works 文章的內文欄，
   欄寬與左右邊界已由外層頁面決定，這裡再加 padding 只會讓內容比外面文字多縮進一截、對不齊。
   沒有獨立 header：標題／導言由外層 works 文章的 .health-embed 區塊負責，這裡重複會很多餘。
   上 padding 壓低：外層文章段落自己已有 22px margin-bottom，這裡不用再留太多，
   不然「內文→照片」中間空得太多，跟上面文字脫節。 */
.hx-wrap{ max-width:960px; margin:0 auto; padding:8px 0 26px; }

/* ── photo stage ──
   照片欄 + 右側說明欄並排：說明永遠在照片「旁邊」而不是「上面」，
   不管點哪個光點，6 個編號點都留在照片上、永遠不會被說明卡蓋住。
   無 box-shadow：站上其他相片都是平的（只有 1px 邊框），這裡加陰影反而顯得突兀。 */
.hx-stage{ position:relative; border:1px solid #d8d4cc; background:#f4f4f4; display:flex; align-items:stretch; }
.hx-photo-col{ position:relative; flex:1 1 60%; min-width:0; overflow:hidden; }
.hx-photo{ display:block; width:100%; height:auto; }
.hx-layer{ position:absolute; inset:0; }

.hx-progress{ position:absolute; top:13px; left:15px; right:15px; display:flex; align-items:center; gap:9px;
  font-size:11.5px; color:#fff; letter-spacing:.05em; text-shadow:0 1px 4px rgba(0,0,0,.45); z-index:4; pointer-events:none; }
.hx-pdots{ display:flex; gap:6px; }
.hx-pdot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.35); transition:all .35s var(--ease); }
.hx-pdot.on{ background:var(--sun); transform:scale(1.25); }
.hx-plabel{ margin-left:auto; }

/* ── hotspots ──
   半透明：光點會直接疊在照片重要細節上（燈具、窗），50% 透明度讓底下的照片內容還看得到，
   不是純裝飾的圓點。seen/active 也維持半透明，不會在互動後忽然變成不透光的實心色塊。 */
.hx-hot{ position:absolute; transform:translate(-50%,-50%); width:26px; height:26px; z-index:3;
  border:none; background:none; cursor:pointer; padding:0; }
.hx-hot .ring{ position:absolute; inset:0; border-radius:50%; background:rgba(255,255,255,.5);
  border:2px solid var(--health); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--health); font-family:"Noto Serif TC",serif;
  box-shadow:0 1px 6px rgba(0,0,0,.3); transition:transform .18s var(--ease), background .18s, color .18s; }
.hx-hot::before{ content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid rgba(255,255,255,.7); opacity:.9; animation:hx-pulse 2.6s var(--ease) infinite; }
@keyframes hx-pulse{ 0%{transform:scale(.7);opacity:.9} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }
.hx-hot:hover .ring{ transform:scale(1.14); }
.hx-hot:focus{ outline:none; } .hx-hot:focus .ring{ box-shadow:0 0 0 3px rgba(79,127,134,.4); }
.hx-hot.seen .ring{ background:rgba(79,127,134,.5); color:#fff; }
.hx-hot.seen::before{ display:none; }
.hx-hot.active .ring{ background:rgba(79,127,134,.5); color:#fff; transform:scale(1.18); }
.hx-hot.active::before{ display:none; }

/* ── 照片切換鈕（多照片時才渲染）──
   貼在照片左下角的小藥丸，樣式比照 hx-hint 的半透明黑底，不搶照片本身的視覺 */
.hx-ptabs{ position:absolute; left:12px; bottom:12px; z-index:4; display:flex; gap:6px; }
.hx-ptab{ font-size:12px; letter-spacing:.06em; color:#fff; cursor:pointer;
  background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:6px 13px; backdrop-filter:blur(4px); transition:background .2s var(--ease); font-family:inherit; }
.hx-ptab:hover{ background:rgba(0,0,0,.6); }
.hx-ptab.on{ background:rgba(255,255,255,.92); color:var(--ink-dark); border-color:rgba(255,255,255,.92); }

/* ── 右側說明欄 ──
   照片的固定旁欄，不是浮在照片上的卡片：永遠不會擋到任何一個編號光點。
   還沒點光點前顯示提示文字；點了就換成該光點內容。手機版摺到照片下方（見最下方 media query）。 */
/* max-height 由 JS 量照片實際高度後寫進 inline style：
   內容比照片矮時，欄位跟著照片一樣高（flex stretch）；內容比照片長時，欄位鎖在照片高度、內部捲動，
   不然照片會被撐高、底下多出一截灰底空白。 */
.hx-pop{ flex:0 0 320px; position:relative; background:var(--card);
  border-left:1px solid #d8d4cc; display:flex; flex-direction:column; overflow-y:auto; }
/* 內容超過照片高度時欄內捲動，預設捲軸太粗又貼邊、在這種淺色卡片上很搶眼。
   改成細的圓角滑塊＋透明軌道，用 background-clip 讓滑塊兩側留白像是浮著的；
   滑鼠移到欄位上才加深，不碰的時候幾乎隱形。 */
.hx-pop{ scrollbar-width:thin; scrollbar-color:rgba(90,80,70,.22) transparent; }
.hx-pop::-webkit-scrollbar{ width:9px; }
.hx-pop::-webkit-scrollbar-track{ background:transparent; }
/* 去掉軌道兩端的上下箭頭按鈕，只留滑塊 */
.hx-pop::-webkit-scrollbar-button{ display:none; width:0; height:0; }
.hx-pop::-webkit-scrollbar-thumb{ background:rgba(90,80,70,.22); border-radius:99px;
  border:3px solid transparent; background-clip:content-box; }
.hx-pop:hover::-webkit-scrollbar-thumb{ background:rgba(90,80,70,.38); background-clip:content-box; }
.hx-pop-empty{ margin:auto; padding:32px; text-align:center; font-size:13px; color:var(--ink); line-height:1.9; }
.hx-pop.open .hx-pop-empty{ display:none; }
.hx-pop-content{ display:none; position:relative; padding:22px 24px 18px; }
.hx-pop.open .hx-pop-content{ display:block; }

.hx-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 15px; padding-right:20px; }
/* ── 照片右下角的因子×健康標籤（桌機）──
   與左下角的照片切換鈕左右對稱；說明欄少了這一列，內容就少捲一點。
   壓在照片上的版本改用白底七成透明，讓底下的照片透一點出來；外框留大地色（建築）／綠色（健康）
   維持兩軸的顏色分類，字改黑色以求對比。欄內那組維持原本的米色／淡藍實底配彩色字，不受影響。
   中間的 × 沒有底色可依附，維持白色實心。
   ≥900px 才啟用：840px 那種窄桌機照片只剩約 518px，放不下切換鈕加標籤兩塊。 */
.hx-chips-photo{ position:absolute; right:12px; bottom:12px; z-index:4; display:none;
  margin:0; padding:0; gap:7px; flex-wrap:nowrap; }
.hx-chips-photo .hx-chip{ white-space:nowrap; background:rgba(255,255,255,.7); color:var(--ink-dark); }
.hx-chips-photo .hx-chip-a{ border-color:var(--arch); }
.hx-chips-photo .hx-chip-h{ border-color:var(--health); }
.hx-chips-photo .hx-chip-x{ color:#fff; }
@media(min-width:900px){
  .hx-chips-photo.on{ display:flex; }
  .hx-pop-content > .hx-chips{ display:none; }
}
.hx-chip{ font-size:12px; padding:4px 11px; border-radius:999px; letter-spacing:.04em; }
.hx-chip-a{ color:var(--arch); background:var(--arch-bg); border:1px solid var(--arch-line); }
.hx-chip-h{ color:var(--health); background:var(--health-bg); border:1px solid var(--health-line); }
.hx-chip-x{ color:var(--muted); }
.hx-one{ font-weight:600; font-size:17px; line-height:1.6; letter-spacing:.02em; color:var(--ink-dark); margin:0 0 18px; }
.hx-lab{ font-size:10.5px; letter-spacing:.16em; color:var(--muted); font-weight:600;
  margin:0 0 9px; display:flex; align-items:center; gap:8px; }
.hx-lab::after{ content:""; flex:1; height:1px; background:var(--line); }
/* 內文（研究這樣說的每一則、設計可以這樣做）14px：13px 在這個襯線中文字級下偏吃力，
   標題與區段小標維持原級數，只放大真正要讀的段落。 */
.hx-find{ font-size:14px; line-height:1.72; color:var(--ink-dark); margin:0 0 10px; padding-left:14px; position:relative; }
.hx-find::before{ content:""; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--health); opacity:.7; }
.hx-find .ref{ font-size:10.5px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 6px; margin-left:5px;
  white-space:nowrap; text-decoration:none; transition:color .15s var(--ease), border-color .15s var(--ease); }
a.hx-find .ref, .hx-find a.ref{ cursor:pointer; }
.hx-find a.ref:hover{ color:var(--arch); border-color:var(--arch-line); text-decoration:underline; }
.hx-do{ font-size:14px; line-height:1.72; color:var(--ink-dark); margin:0; }
.hx-do strong{ color:var(--arch); font-weight:600; }
.hx-sect{ margin-bottom:16px; }
.hx-sect:last-child{ margin-bottom:0; }
/* 常駐邊界說明：字級與顏色都收到最小，是註腳不是內容，但每一則都看得到 */
.hx-caveat{ margin:14px 0 0; padding-top:11px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.6; color:var(--muted); }

@media(max-width:820px){
  .hx-wrap{ padding:6px 0 20px; }
  .hx-hot{ width:24px; height:24px; } .hx-hot .ring{ font-size:11px; }
  /* 手機螢幕太窄放不下並排兩欄，改成照片在上、說明欄摺到下面 */
  .hx-stage{ flex-direction:column; }
  /* 手機版說明欄摺到照片下方、JS 也會清掉高度鎖定，內容自然往下長＝不需要欄內捲軸 */
  .hx-pop{ flex:none; width:auto; border-left:none; border-top:1px solid var(--line); overflow:visible; }
  .hx-pop-empty{ padding:22px; }
}