/* 馥靈之鑰 · 個人傾域測驗（成人向 5 支）共用樣式 · 研寶 2026-07-17
   母品牌 2026 多巴胺五色硬規矩：
     映輝 #3D3835 只當文字／雲霧白 #F0EEE9 底／變革藍綠 #007B7F 填充陰影／
     律動絢藍 #2E5EA6 線框／暖心粉 #FFCCCC CTA
   🔴 這裡【不可以】走黑底金框的暗黑神祕館感 —— 內容是成人向，視覺不是。
      成人向不等於幽暗曖昧；這 5 支要維持母品牌的明亮，客人才不會覺得自己在做壞事。 */

.quiz-hero { background: var(--teal); padding: 34px 20px 26px; text-align: center; }
.quiz-hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.quiz-hero h1 { font-size: 2rem; font-weight: 900; color: #F0EEE9; letter-spacing: -.01em; margin: 10px 0 8px; line-height: 1.3; }
.quiz-hero-sub { font-size: .98rem; color: #F0EEE9; line-height: 1.8; margin: 0; opacity: .92; }
.quiz-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #FFCCCC; color: #3D3835; font-size: .78rem; font-weight: 800; letter-spacing: .06em; }
.accent { color: var(--teal); }

.likert-row { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.lk-btn { padding: 13px 18px; border: 2.5px solid #3D3835; border-radius: 10px; background: #fff; color: #3D3835; font-size: .95rem; font-weight: 600; cursor: pointer; text-align: center; transition: .12s; box-shadow: 3px 3px 0 #3D3835; font-family: inherit; }
.lk-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #3D3835; background: #FFF6F6; }
.lk-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #3D3835; }
.lk-btn.n2 { background: #E9F4F4; }
.lk-btn.p2 { background: #FFF0F0; }

.prog-wrap { display: block; max-width: 560px; margin: 0 auto 18px; padding: 0 20px; }
.prog-bar { height: 8px; background: rgba(61, 56, 53, .10); border-radius: 999px; overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg, var(--teal), #2E5EA6); border-radius: 999px; transition: width .3s ease; }
.prog-label { text-align: center; font-size: .8rem; color: #6A6560; font-weight: 700; margin-top: 8px; letter-spacing: .04em; }

.start-area, .questions-area { padding: 0 20px 30px; }
.start-card { max-width: 620px; margin: 0 auto; padding: 34px 30px; background: #fff; border: 2.5px solid #3D3835; border-radius: 20px; box-shadow: 6px 6px 0 rgba(61, 56, 53, .10); text-align: center; }
.start-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 12px; }
.start-title { font-size: 1.28rem; font-weight: 900; color: #3D3835; line-height: 1.55; margin: 0 0 16px; letter-spacing: -.005em; }
.start-desc { font-size: .95rem; line-height: 1.95; color: #5C5651; margin: 0 0 12px; text-align: left; }
.start-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; margin: 20px 0 24px; font-size: .85rem; color: #6A6560; font-weight: 700; }
.start-card .btn-primary { padding: 15px 44px; font-size: 1.02rem; font-weight: 800; border-radius: 12px; border: 2.5px solid #3D3835; background: #FFCCCC; color: #3D3835; cursor: pointer; font-family: inherit; box-shadow: 4px 4px 0 #3D3835; transition: transform .12s, box-shadow .12s; letter-spacing: .02em; }
.start-card .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #3D3835; }

.question-card { max-width: 620px; margin: 0 auto; padding: 30px 28px; background: #fff; border: 2.5px solid #3D3835; border-radius: 20px; box-shadow: 6px 6px 0 rgba(61, 56, 53, .10); }
.q-num { display: inline-block; font-size: .78rem; font-weight: 800; color: #007B7F; letter-spacing: .1em; margin-bottom: 10px; }
.q-text { font-size: 1.18rem; font-weight: 800; color: #3D3835; line-height: 1.7; margin: 0 0 10px; text-align: center; letter-spacing: -.005em; }
.q-hint { font-size: .84rem; color: #6A6560; line-height: 1.75; text-align: center; margin: 0 0 18px; font-weight: 600; }

.type-code { font-size: 2rem; font-weight: 900; letter-spacing: .04em; color: #3D3835; text-align: center; margin: 8px 0 2px; }
.type-sub { font-size: 1.02rem; color: #007B7F; font-weight: 800; text-align: center; margin-bottom: 14px; }
.dim-bars { max-width: 520px; margin: 20px auto; }
.dim-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .88rem; }
.dim-l { width: 108px; color: #6B6460; font-weight: 700; text-align: right; }
.dim-r { width: 8px; }
.dim-track { flex: 1; height: 14px; background: #fff; border: 2px solid #3D3835; border-radius: 999px; position: relative; overflow: hidden; }
.dim-fill { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #2E5EA6, #007B7F); }
.dim-pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .68rem; font-weight: 900; color: #3D3835; text-shadow: 0 0 3px #fff; }

.res-section { max-width: 560px; margin: 22px auto; padding: 24px 26px; background: #fff; border: 2px solid #3D3835; border-radius: 16px; box-shadow: 5px 5px 0 rgba(61, 56, 53, .10); }
.res-section h3 { text-align: center; font-size: 1.12rem; font-weight: 900; color: #3D3835; margin: 0 0 14px; letter-spacing: .02em; }
.res-section h3::after { content: ''; display: block; width: 44px; height: 2px; background: #007B7F; margin: 8px auto 0; border-radius: 2px; }
.res-section p { font-size: .95rem; line-height: 1.95; color: #5C5651; margin: 0 0 10px; }
.res-section p:last-child { margin-bottom: 0; }

.share-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 560px; margin: 26px auto 8px; }
.btn-share, .btn-more { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 12px; border: 2.5px solid #3D3835; font-size: .95rem; font-weight: 800; font-family: inherit; cursor: pointer; text-decoration: none; letter-spacing: .02em; transition: transform .12s, box-shadow .12s; }
.btn-share { background: #FFCCCC; color: #3D3835; box-shadow: 4px 4px 0 #3D3835; }
.btn-more { background: #fff; color: #007B7F; border-color: #007B7F; box-shadow: 4px 4px 0 rgba(0, 123, 127, .28); }
.btn-share:hover, .btn-more:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #3D3835; }

.quiz-disclaimer { max-width: 720px; margin: 8px auto 0; padding: 18px 22px 6px; font-size: .72rem; line-height: 1.75; color: rgba(61, 56, 53, .55); text-align: center; }

/* 說明書 CTA（5 支頁共用·由 hl-yedu-quiz.js 注入 #yeduCtaSlot） */
.yedu-cta { background: #3D3835; color: #F0EEE9; padding: 28px 24px; border-radius: 16px; text-align: center; margin: 30px auto; max-width: 560px; border: 3px solid #3D3835; box-shadow: 6px 6px 0 #FFCCCC; }
.yedu-cta h3 { color: #FFCCCC; font-size: 1.15rem; font-weight: 900; margin: 0 0 10px; line-height: 1.6; }
.yedu-cta p { font-size: .9rem; line-height: 1.8; margin: 0 0 14px; color: #F0EEE9; }
.yedu-cta a.buybtn { display: inline-block; background: #FFCCCC; color: #3D3835; font-weight: 800; padding: 14px 28px; border-radius: 10px; border: 2px solid #3D3835; font-size: 1rem; cursor: pointer; box-shadow: 3px 3px 0 #1f1c1a; text-decoration: none; }
.yedu-cta p.bless { margin: 18px 0 0; font-size: .82rem; line-height: 1.85; color: #FFCCCC; opacity: .95; font-weight: 700; }

/* 這一條在 5 支頁都會出現：告訴她「這份結果會被誰用、怎麼用、怎麼收回」。
   成人向資料要讓她隨時知道它在哪、拿得回來。 */
.yedu-note { max-width: 560px; margin: 18px auto; padding: 16px 20px; background: #F0EEE9; border: 2px dashed #2E5EA6; border-radius: 12px; font-size: .85rem; line-height: 1.85; color: #3D3835; }
.yedu-note strong { color: #007B7F; }

#adultGate { position: fixed; inset: 0; z-index: 100000; background: #F0EEE9; display: flex; align-items: center; justify-content: center; padding: 22px; font-family: "Noto Sans TC", Inter, system-ui, sans-serif; }
#adultGate .ag-card { background: #fff; border: 3px solid #3D3835; border-radius: 18px; box-shadow: 8px 8px 0 #007B7F; max-width: 460px; width: 100%; padding: 28px 26px; }
#adultGate h2 { margin: 0 0 14px; font-size: 1.2rem; font-weight: 900; color: #3D3835; line-height: 1.5; }
#adultGate p { margin: 0 0 12px; font-size: .92rem; color: #3D3835; line-height: 1.8; }
#adultGate p.sub { font-size: .84rem; color: #5C5651; }
#adultGate label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; margin: 16px 0; padding: 12px; background: #F0EEE9; border: 2px solid #2E5EA6; border-radius: 10px; }
#adultGate label span { font-size: .9rem; color: #3D3835; line-height: 1.6; font-weight: 700; }
#adultGate input[type=checkbox] { margin-top: 3px; width: 18px; height: 18px; accent-color: #007B7F; flex: 0 0 auto; }
#adultGate .ag-row { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
#adultGate button { font-family: inherit; font-weight: 800; border-radius: 999px; cursor: pointer; min-height: 44px; font-size: .9rem; }
#adultGate #agNo { padding: 11px 18px; background: #fff; color: #3D3835; border: 2px solid #3D3835; }
#adultGate #agGo { padding: 11px 24px; background: #FFCCCC; color: #3D3835; border: 2px solid #3D3835; box-shadow: 4px 4px 0 #007B7F; opacity: .45; cursor: not-allowed; }

@media (max-width: 600px) {
  .quiz-hero h1 { font-size: 1.55rem; }
  .start-card, .question-card { padding: 24px 18px; border-radius: 16px; }
  .start-title { font-size: 1.12rem; }
  .q-text { font-size: 1.05rem; }
  .start-card .btn-primary { width: 100%; padding: 15px 20px; }
  .res-section { padding: 20px 18px; margin: 18px 12px; }
  .share-row { margin: 22px 12px 8px; }
  .btn-share, .btn-more { width: 100%; }
  .dim-l { width: 84px; font-size: .8rem; }
}