/* =====================================================
   人格测评三件套 · 纸本杂志风皮肤（mag-persona.css）
   2026-11-10：以养娃页（yangwa.html）与全站 mag-skin.css 为基准，
   只覆盖 persona.css 的视觉层，不动布局与 DOM、不动文案。
   加载顺序：persona.css 之后。
   ===================================================== */

:root{
  --paper:#FDFDFB;   --paper2:#EFE9DC;  --white:#FCFAF4;
  --ink:#20251F;     --ink-2:#3C423B;   --muted:#4B524A;  --ink-3:#8B8D82;
  --line:#D9D3C4;    --line-2:#E7E1D4;
  --accent:#1E4A38;  --accent-soft:#F1F4EF;
  --gold:#B08A42;    --gold-soft:#CDB684;
  --shadow:none;
  --r:2px;
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",Georgia,serif;
}

/* ---------- 全局 ---------- */
body{background:var(--paper);color:var(--ink);letter-spacing:.01em}
button{border-radius:0}

/* ---------- 报刊头 ---------- */
.pp-top{border-bottom:1px solid var(--line);height:64px}
.pp-brand{font-family:var(--serif);font-weight:500;letter-spacing:.2em}
.pp-mark{border-radius:2px;background:var(--accent);color:#F2EBDD;font-family:var(--serif);font-weight:400}
.pp-brand small{color:var(--ink-3);letter-spacing:.18em;font-weight:400}
.pp-back{color:var(--accent);font-weight:500;letter-spacing:.06em;font-size:12.5px}

/* ---------- 落地页 ---------- */
.landing{padding:46px 0 62px}
.kicker{background:none;border:0;border-radius:0;padding:0;
  color:var(--gold);font-size:11.5px;letter-spacing:.28em;font-weight:500;text-transform:uppercase}
.kicker i{width:5px;height:5px;border-radius:0;background:var(--gold)}
.landing h1{font-family:var(--serif);font-weight:600;letter-spacing:.02em;line-height:1.3}
.landing h1 em{color:var(--accent)}
.landing .lead{color:var(--ink-2);letter-spacing:.02em}
.landing .dialogue{border-left:2px solid var(--gold);color:var(--ink-2)}
.chip{border-radius:2px;background:var(--paper2);border:1px solid var(--line-2);
  color:var(--ink-3);letter-spacing:.1em;font-size:11.5px}
.meta-row{gap:10px}
.landing-foot{color:var(--ink-3)}
.intro-list li{color:var(--ink-2)}

/* ---------- 按钮：直角 · 墨绿 · 金线外框 ---------- */
.btn{border-radius:2px;font-weight:500;letter-spacing:.18em;font-size:14px;padding:14px 20px}
.btn:active{transform:none;opacity:.85}
.btn-primary{background:var(--accent);color:#F2EBDD;box-shadow:none;
  outline:1px solid var(--gold-soft);outline-offset:3px}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn-ghost:hover{border-color:var(--gold-soft)}

/* ---------- 答题 ---------- */
.quiz-count{color:var(--ink-3);letter-spacing:.08em}
.progress{height:2px;border-radius:0;background:var(--line-2)}
.progress > i{background:var(--accent)}
.q-card{border-radius:2px;background:var(--white);border:1px solid var(--line);box-shadow:none}
.q-group{color:var(--gold);font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.q-text{font-family:var(--serif);font-weight:600;letter-spacing:.02em;line-height:1.45}
.options{gap:10px}
.opt{border-radius:2px;background:var(--white);border:1px solid var(--line-2);color:var(--ink-2)}
.opt:hover{border-color:var(--gold-soft)}
.opt.picked{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.opt-key{border-radius:2px;border:1px solid var(--line-2);color:var(--ink-3);background:var(--white)}
.opt.picked .opt-key{background:var(--accent);border-color:var(--accent);color:#F2EBDD}
.link-btn{color:var(--ink-3);text-underline-offset:4px}

/* ---------- 计算中 ---------- */
.calc-ring{border:1px solid var(--line);border-top-color:var(--accent);border-radius:50%}
.calc p{color:var(--ink-3);letter-spacing:.06em}

/* ---------- 结果：杂志卡（上下金线） ---------- */
.result .hero{border-radius:2px;background:var(--white);
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold-soft);
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.hero:after{border-color:rgba(176,138,66,.25)}
.hero-label{color:var(--accent);font-weight:500;letter-spacing:.14em}
.hero h1{font-family:var(--serif);font-weight:600;letter-spacing:.03em;line-height:1.3}
.hero .sub{color:var(--ink-2)}
.hero blockquote{border-radius:2px;background:var(--paper2);color:var(--ink-2);
  border-left:1px solid var(--gold-soft)}
.hero .code{color:var(--gold);letter-spacing:.16em}

/* 隐藏角色：黑金保留（明面/隐藏必须可分），只把圆角对齐直角 */
.result.is-hidden .hero{background:#221E19;border-color:#3C3529;border-top-color:var(--gold)}
.result.is-hidden .hero h1{color:#F3E6CF}
.result.is-hidden .hero blockquote{background:#2C2721;color:#EDDFC8}
.result.is-hidden .identity{background:#26221C;border-color:#3C3529}

.identity{border-radius:2px;background:var(--paper2);border:1px dashed var(--line-2)}
.identity span{color:var(--gold);font-weight:500;letter-spacing:.14em}
.identity p{color:var(--ink-2)}

.sec{border-radius:2px;background:var(--white);border:1px solid var(--line)}
.sec h2{font-family:var(--serif);font-weight:600;letter-spacing:.06em;font-size:15px}
.sec h2 i{width:3px;height:13px;border-radius:0;background:var(--gold)}
.sec p,.sec li{color:var(--ink-2)}
.sec .hint{color:var(--ink-3)}

/* 雷达图说明 / 三轴 */
.radar-legend div{color:var(--ink-2)}
.radar-legend em{color:var(--accent)}
.axis-head{color:var(--ink-3)}
.axis-track{height:2px;border-radius:0;background:var(--line-2)}
.axis-track i{border-radius:0;background:var(--accent);box-shadow:0 0 0 3px var(--paper)}
.axis-read{color:var(--ink-3)}

/* 推荐 / 配对 / 角色卡 */
.reco{border-radius:2px;background:var(--white);border:1px solid var(--line)}
.reco:hover{border-color:var(--gold-soft)}
.reco span{color:var(--ink-3)}
.reco.warn{background:#FBF3EC;border-color:#E7D3C2}
.pair-box{border-radius:2px;background:var(--paper2);border:1px solid var(--line-2)}
.pair-code{color:var(--accent);letter-spacing:.26em}
.pair-note{color:var(--ink-3)}
.combo-title{font-family:var(--serif);font-weight:600;letter-spacing:.02em}
.role-card{border-radius:2px;background:var(--white);border:1px solid var(--line)}
.role-card span{color:var(--ink-3)}
.bias strong{color:var(--accent)}
.two-roles{gap:10px}
.reco-grid{gap:10px}
.accuracy p{color:var(--ink-3)}
.accuracy-row button{border-radius:2px;background:var(--white);border:1px solid var(--line);color:var(--ink-3)}
.accuracy-row button.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.foot-note{color:var(--ink-3)}

/* 未定型 */
.undet h2{font-family:var(--serif);font-weight:600;letter-spacing:.03em}
.undet p{color:var(--ink-2)}

/* 弹窗 / toast */
.modal-box{border-radius:2px;background:var(--white);border:1px solid var(--line)}
.modal-box h3{font-family:var(--serif);font-weight:600;letter-spacing:.06em}
.modal-box img{border-radius:2px;border:1px solid var(--line)}
.toast{border-radius:2px;background:var(--accent);color:#F2EBDD;letter-spacing:.04em}

/* ---------- 海报（分享图）---------- */
#poster .p-mark{border-radius:2px;background:var(--accent);color:#F2EBDD}
#poster .p-label{color:var(--gold)}
#poster .p-title{font-family:var(--serif);font-weight:600;letter-spacing:.02em}
#poster .p-sub,#poster .p-brand{color:var(--ink-3)}
#poster .p-line{color:var(--ink-2);border-left:4px solid var(--gold)}
#poster .p-bar{height:8px;background:var(--accent)}
#poster.is-hidden{background:#221E19;color:#F3E6CF}
#poster.is-hidden .p-mark{background:var(--gold);color:#221E19}
#poster.is-hidden .p-label{color:var(--gold)}
#poster.is-hidden .p-line{color:#EDDFC8}

/* ---------- 窄屏 ---------- */
@media(max-width:640px){
  .landing{padding:32px 0 46px}
  .landing h1{letter-spacing:.01em}
  .q-card{border-radius:2px}
  .result .hero{border-radius:2px}
  .sec{border-radius:2px}
  .pp-top{height:60px}
}