/* ============================================================
   psytest.css — 심리테스트 전용 스타일
   ★ 이 도구의 모양만 바꾸고 싶을 때 이 파일을 수정하세요.
   ============================================================ */

.stage{
  background:linear-gradient(180deg,var(--card),#141631);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px 22px 26px;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
}

/* --- 테스트 목록 --- */
.test-grid{display:grid;gap:12px}
.test-card{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;
  padding:18px 20px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
}
.test-card:hover{border-color:rgba(242,201,76,.5);background:rgba(242,201,76,.06)}
.t-emoji{font-size:30px}
.t-name{font-size:16.5px;font-weight:800}
.t-desc{font-size:13px;color:var(--muted)}

/* --- 진행 화면 --- */
.progress{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:18px}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold-soft),var(--gold));transition:width .3s ease}
.q-count{text-align:center;font-size:12px;font-weight:800;color:var(--gold);letter-spacing:.12em;margin-bottom:8px}
.q-text{text-align:center;font-size:18px;font-weight:800;margin-bottom:22px;line-height:1.55}
.q-options{display:grid;gap:10px}
.q-opt{
  padding:16px;border-radius:14px;font-size:14.5px;font-weight:700;line-height:1.45;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  text-align:center;
}
.q-opt:hover{border-color:rgba(242,201,76,.5);background:rgba(242,201,76,.07)}
.q-back{
  margin-top:16px;padding:8px;font-size:13px;color:var(--muted);
  background:none;border:none;width:100%;
}
.q-back:hover{color:var(--text)}

/* --- 결과 화면 --- */
#result{text-align:center}
.r-label{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.06em}
.r-emoji{font-size:72px;margin:12px 0 4px;animation:bounce .6s cubic-bezier(.18,1.4,.4,1)}
@keyframes bounce{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.r-name{font-size:27px;font-weight:800;color:var(--gold);margin-bottom:12px}
.r-desc{font-size:14.5px;color:#d6d9f5;line-height:1.75;margin-bottom:18px;text-align:left}
.r-box{
  text-align:left;background:rgba(242,201,76,.06);border:1px solid rgba(242,201,76,.22);
  border-radius:14px;padding:14px 16px;margin-bottom:10px;
}
.r-box-title{font-size:12.5px;font-weight:800;color:var(--gold);margin-bottom:5px}
.r-box-text{font-size:13.5px;color:#d6d9f5;line-height:1.65}
.r-actions{display:flex;gap:10px;margin-top:20px}
.btn-gold{
  flex:1.3;padding:15px;font-size:15px;color:#241c00;border-radius:14px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  box-shadow:0 12px 24px -10px rgba(242,201,76,.5);
}
.btn-ghost{
  flex:1;padding:15px;font-size:14px;font-weight:700;color:var(--text);border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
}
.btn-ghost:hover{background:rgba(255,255,255,.09)}

@media (max-width:420px){
  .q-text{font-size:16.5px}
  .r-name{font-size:23px}
}