.big5-intro { margin-bottom:18px; }
.big5-intro strong { display:block; margin-bottom:7px; font-size:17px; }
.big5-intro p { margin:0; color:#5f6672; line-height:1.7; }

.big5-question { margin:0 0 14px; padding:20px; border:1px solid #e5e7eb; border-radius:18px; background:#fff; }
.big5-question legend { display:flex; align-items:flex-start; gap:10px; width:100%; padding:0 0 15px; color:#151922; font-size:16px; font-weight:700; line-height:1.55; }
.big5-question legend > span { display:grid; flex:0 0 30px; width:30px; height:30px; place-items:center; border-radius:50%; background:#c8103a; color:#fff; font-size:13px; }
.big5-scale { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.big5-scale label { position:relative; min-width:0; cursor:pointer; }
.big5-scale input { position:absolute; width:1px; height:1px; opacity:0; }
.big5-scale span { display:grid; min-height:58px; place-items:center; padding:7px 3px; border:1px solid #d9dce2; border-radius:12px; color:#555d69; background:#fafafa; text-align:center; font-size:12px; line-height:1.35; transition:.15s ease; }
.big5-scale input:checked + span { border-color:#c8103a; background:#c8103a; color:#fff; font-weight:700; box-shadow:0 5px 14px rgba(200,16,58,.18); }
.big5-scale input:focus + span { outline:3px solid rgba(200,16,58,.18); outline-offset:2px; }

.big5-result > h1 { margin:8px 0 12px; font-size:29px; }
.big5-summary { margin:0 0 26px; color:#3f4650; font-size:16px; line-height:1.8; }
.big5-summary strong { color:#c8103a; }
.big5-bars { padding:22px 0; border-top:1px solid #e7e8ec; border-bottom:1px solid #e7e8ec; }
.big5-bar + .big5-bar { margin-top:20px; }
.big5-bar-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; font-size:14px; }
.big5-bar-head strong { color:#c8103a; }
.big5-bar i { display:block; height:10px; overflow:hidden; border-radius:999px; background:#e1e3e8; }
.big5-bar i em { display:block; height:100%; border-radius:inherit; background:#c8103a; }
.big5-bar-labels { display:flex; justify-content:space-between; gap:15px; margin-top:6px; color:#7a808b; font-size:11px; }

.big5-details { margin-top:28px; }
.big5-dimension { padding:0 0 27px; }
.big5-dimension + .big5-dimension { padding-top:27px; border-top:1px solid #e7e8ec; }
.big5-dimension-title { display:flex; align-items:center; gap:13px; margin-bottom:15px; }
.big5-dimension-title > span { display:grid; flex:0 0 45px; width:45px; height:45px; place-items:center; border-radius:14px; background:#c8103a; color:#fff; font-size:20px; font-weight:800; }
.big5-dimension-title h2 { margin:0 0 4px; font-size:21px; }
.big5-dimension-title p { margin:0; color:#747b87; font-size:13px; }
.big5-dimension > p, .big5-notice p { line-height:1.85; }
.big5-dimension h3 { margin:21px 0 7px; color:#c8103a; font-size:17px; }
.big5-tip { margin-top:21px; padding:16px; border-radius:14px; background:#fff4f6; }
.big5-tip strong { color:#c8103a; }
.big5-tip p { margin:7px 0 0; line-height:1.75; }
.big5-notice { margin-top:5px; padding:22px; border-radius:16px; background:#f5f6f8; }
.big5-notice h2 { margin:0 0 12px; font-size:19px; }
.big5-notice p { margin:0; color:#555d69; }
.big5-notice p + p { margin-top:10px; }
.big5-retry { display:grid; place-items:center; margin-top:20px; text-decoration:none; }

@media (max-width:480px) {
  .big5-question { padding:17px 13px; border-radius:15px; }
  .big5-question legend { gap:8px; font-size:15px; }
  .big5-question legend > span { flex-basis:27px; width:27px; height:27px; }
  .big5-scale { gap:4px; }
  .big5-scale span { min-height:55px; padding:5px 1px; font-size:10px; }
  .big5-result > h1 { font-size:25px; }
  .big5-dimension-title h2 { font-size:19px; }
  .big5-bar-labels { font-size:10px; }
}