/* ═══════════════════════════════════════════════════════════════
   馥靈之鑰 2027 多巴胺紙雕風格 · 測驗區共用皮膚
   研寶 2026-08-03（逸君「設計感OK」＝可以繼續做下去）

   定調：以雲霧白為底，以深霧玫瑰為骨架，以活力橙作光感聚焦，
        搭配暖心粉柔化情緒，呈現溫暖、立體、乾淨、可辨識的紙雕品牌視覺。

   色碼取【現行站上實際值】（逸君 8-03「數值用站上的」「用最多的就是正確的」）：
     深霧玫瑰 #A05A6B  結構／標題底／邊框／主按鈕（壓純白 5.04 AA）
     活力橙   #E88A2C  光點／引導線／局部重點  🔴 絕不當文字色（白底僅 2.59）
     雲霧白   #F0EEE9  主背景
     暖心粉   #FFCCCC  紙雕曲線與柔和區塊
     映輝     #3D3835  主要文字  🔴 不可當底色

   🔴 為什麼是一支共用檔而不是逐頁改：
      269 支測驗頁的內嵌 <style> 各寫各的，逐頁改既慢又會漂移。
      這支放在各頁 <style> 之【後】載入，同特異度後者勝，一改全站跟上。
   🔴 載入位置：各測驗頁 </head> 前。順序錯了就不會生效。
   ═══════════════════════════════════════════════════════════════ */

:root{
  --q-rose:#A05A6B;
  --q-rose-d:#7A4351;
  --q-orange:#E88A2C;
  --q-ink:#3D3835;
  --q-bg:#F0EEE9;
  --q-pink:#FFCCCC;
  --q-paper:#FBF9F5;
  /* 紙雕＝低透明、同方向的柔和玫瑰灰陰影（不使用黑色硬陰影） */
  --q-lift-1:0 1px 2px rgba(160,90,107,.10),0 3px 8px rgba(160,90,107,.07);
  --q-lift-2:0 2px 4px rgba(160,90,107,.12),0 8px 20px rgba(160,90,107,.09);
  --q-lift-3:0 3px 6px rgba(160,90,107,.14),0 14px 34px rgba(160,90,107,.11);
}

/* ── 版面底 ───────────────────────────────────────── */
body{background:var(--q-bg);color:var(--q-ink);}

/* ── 紙雕第二層：淡粉玫瑰曲線（雲霧白底 →【淡粉曲線】→ 主卡片 → 橙色光點）
      低透明、與陰影同方向、不接受點擊 ─────────────── */
/* 🔴 裝飾曲線是故意溢出容器的（::before left:-16%／::after right:-20%），
   但右側那片會把文件寬度撐大 ⇒ 桌機整頁可以左右拖動（實測 1280 寬溢出 269px、1440 寬 301px）。
   用 overflow-x:clip 裁掉溢出的裝飾：
   🔑 用 clip 不用 hidden —— hidden 會讓這層變成捲動容器，裡面的 position:sticky 會失效；
      clip 只裁切、不建立捲動容器，sticky 照常。 */
.quiz-wrap{position:relative;overflow-x:clip;}
.quiz-wrap::before,.quiz-wrap::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  background:var(--q-pink) !important;opacity:.38;
}
.quiz-wrap::before{left:-16%;top:150px;width:60%;height:330px;
  border-radius:58% 42% 46% 54%/44% 52% 48% 56%;transform:rotate(-8deg);}
.quiz-wrap::after{right:-20%;top:660px;width:54%;height:290px;
  border-radius:46% 54% 58% 42%/52% 44% 56% 48%;transform:rotate(6deg);opacity:.28;}
.quiz-wrap>*{position:relative;z-index:1;}

/* ── 主視覺：紙雕堆疊，不用硬陰影 ──────────────────── */
.quiz-hero{
  position:relative;background:var(--q-paper) !important;border:none !important;border-radius:22px !important;
  box-shadow:var(--q-lift-3) !important;padding:40px 30px 34px;margin-bottom:16px;overflow:hidden;
  color:var(--q-ink);
}
.quiz-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--q-rose);}
.quiz-hero h1{color:var(--q-ink);letter-spacing:-.035em;line-height:1.1;}
.quiz-hero p{color:var(--q-ink);opacity:.78;line-height:1.85;}
/* 🔴 圖標全面禁止：hero 與結果卡的裝飾圖示一律不顯示 */
.quiz-hero-icon,.rtc-icon,.hero-icon,.qh-icon{display:none!important;}

/* ── 卡片：白紙分層 ────────────────────────────────── */
.quiz-card,.result-section,.bars-wrap,.more-card,.type-strip,.intro-card{
  background:#fff !important;border:none !important;border-radius:20px !important;box-shadow:var(--q-lift-2) !important;
}
.rs-title,.result-section-title,.bars-title,.more-title{
  color:var(--q-rose-d);letter-spacing:.12em;
}
.rs-body,.result-section-content{color:var(--q-ink);line-height:1.9;}

/* ── 選項 ─────────────────────────────────────────── */
.q-opt,.likert-opt,.quiz-option{
  background:var(--q-paper) !important;border:1.5px solid rgba(61,56,53,.14) !important;border-radius:14px !important;
  box-shadow:none !important;color:var(--q-ink);transition:box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.q-opt:hover,.likert-opt:hover,.quiz-option:hover{
  background:#fff !important;border-color:rgba(160,90,107,.45);box-shadow:var(--q-lift-1) !important;transform:none;
}
.q-opt.selected,.likert-opt.selected,.quiz-option.selected{
  background:#fff !important;border-color:var(--q-rose);box-shadow:var(--q-lift-2) !important;color:var(--q-ink);font-weight:700;transform:none;
}

/* ── 按鈕：映輝不可當底色 → 主要動作一律深霧玫瑰底＋純白字 ── */
.btn-next,.btn-start,.btn-submit,.hb-cta{
  background:var(--q-rose) !important;color:#fff;border:none !important;border-radius:999px !important;
  box-shadow:var(--q-lift-2) !important;transition:box-shadow .18s ease,transform .18s ease;
}
.btn-next:hover:not(:disabled),.btn-start:hover,.btn-submit:hover,.hb-cta:hover{
  box-shadow:var(--q-lift-3) !important;transform:translateY(-1px);
}
.btn-next:disabled{opacity:.35;box-shadow:none;}
.btn-back,.btn-prev{
  background:transparent !important;color:var(--q-ink);border:1.5px solid rgba(61,56,53,.22) !important;
  border-radius:999px !important;box-shadow:none !important;
}
.share-btn{
  background:#fff !important;color:var(--q-rose-d);border:none !important;border-radius:999px !important;box-shadow:var(--q-lift-1) !important;
}

/* ── 進度 ─────────────────────────────────────────── */
.progress-bar,.quiz-progress-bar{background:rgba(160,90,107,.14);border:none;border-radius:999px;}
.progress-fill,.quiz-progress-fill{background:var(--q-rose);border-radius:999px;}

/* ── 結果主卡：深霧玫瑰滿版壓純白 ─────────────────── */
.result-title-card{
  background:var(--q-rose) !important;color:#fff;border:none !important;border-radius:22px !important;
  box-shadow:var(--q-lift-3) !important;text-align:left;
}
.result-title-card .rtc-title,.result-title-card .rtc-sub,.result-title-card .rtc-quote{color:#fff;}
.rtc-tag{background:rgba(255,255,255,.18);color:#fff;border:none;}

/* ── 分享區 ───────────────────────────────────────── */
.share-section{background:var(--q-pink);border:none;border-radius:20px;box-shadow:var(--q-lift-2);}

/* ── 🔴 活力橙只當邊線與點綴，任何情況都不當文字色 ──
   ⚠️ 上面卡片那條是 border:none !important，所以這裡的左邊線【也必須】帶 !important，
      否則會被自己上一條蓋掉（我第一版就是這樣把橙色邊線寫掉了）。 */
.intro-card,.result-section{border-left:3px solid var(--q-orange) !important;}
.qsec-head{border-bottom:2px solid rgba(232,138,44,.35) !important;}

/* ── 手機 ─────────────────────────────────────────── */
@media(max-width:640px){
  /* 同理：上面是 !important，這裡不帶就不會生效 */
  .quiz-hero{padding:32px 22px 28px;border-radius:18px !important;}
  .quiz-card,.result-section{border-radius:16px !important;}
  .quiz-wrap::before,.quiz-wrap::after{display:none !important;}  /* 小螢幕不放曲線，避免擠壓內容 */
}

/* ── 兩支頁面用 body .q-opt.selected（特異度 2）+ !important 蓋住皮膚，
      這裡用同樣的特異度收回來。實測只有這兩支：
      quiz-future-vision.html、quiz-surrender-style.html ── */
body .q-opt.selected,body .likert-opt.selected{
  background:#fff !important;border-color:var(--q-rose) !important;
  box-shadow:var(--q-lift-2) !important;color:var(--q-ink) !important;
}