/* ============================================================
   성향 테스트 5단계 UI (2026-09-07)
   기존 personality/styles.css 는 롤백 기준으로 그대로 두고, 새 화면만 여기에 둔다.
   ============================================================ */

.scale-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 20px 80px;
}

/* ---- 진행 상태 ---- */
.scale-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #a99cbe;
}
.scale-head b {
  color: #e7c98c;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.scale-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(214, 194, 240, 0.16);
  overflow: hidden;
  margin-bottom: 34px;
}
.scale-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #9b7ad8, #e7c98c);
  transition: width 0.35s ease;
}

/* ---- 질문 ---- */
.scale-question {
  font-family: 'Gowun Batang', serif;
  font-size: clamp(20px, 4.6vw, 27px);
  font-weight: 700;
  line-height: 1.55;
  color: #f5f0fb;
  margin: 0 0 34px;
  text-wrap: balance;
  min-height: 2.6em;
}

/* ---- 5단계 선택 ---- */
.scale-ends {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #b8abcf;
  margin-bottom: 12px;
}
.scale-ends span:last-child {
  text-align: right;
}

.scale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.scale-row button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 10px 2px;
  cursor: pointer;
  color: #8d82a3;
  font: inherit;
  border-radius: 12px;
  transition: color 0.18s;
}
.scale-row button:hover {
  color: #d6c2f0;
}

/* 달이 차오르고 기우는 느낌 - 양 끝이 가장 크고 가운데가 가장 작다.
   크기만으로 방향을 읽지 않도록 문구를 항상 함께 둔다. */
.scale-row i {
  display: block;
  border-radius: 50%;
  border: 2px solid rgba(214, 194, 240, 0.4);
  background: rgba(214, 194, 240, 0.05);
  transition: all 0.18s;
}
.scale-row button[data-size='2'] i { width: 40px; height: 40px; }
.scale-row button[data-size='1'] i { width: 32px; height: 32px; }
.scale-row button[data-size='0'] i { width: 25px; height: 25px; }

.scale-row button:hover i {
  border-color: rgba(231, 201, 140, 0.7);
}
.scale-row button[aria-pressed='true'] {
  color: #f5f0fb;
}
.scale-row button[aria-pressed='true'] i {
  border-color: #e7c98c;
  background: radial-gradient(circle at 34% 30%, #fff6e2, #e7c98c 62%, #b98f45);
  box-shadow: 0 0 18px rgba(231, 201, 140, 0.45);
}

/* 각 단계 문구 - 좁은 화면에서는 숨기고 선택한 것만 아래에 크게 보여준다 */
.scale-row small {
  font-size: 11.5px;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
}

.scale-picked {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #e7c98c;
  min-height: 1.5em;
}
.scale-picked.empty {
  color: #7f748f;
  font-weight: 400;
}

/* ---- 이동 ---- */
.scale-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 40px;
}
.scale-nav button {
  border: 1px solid rgba(214, 194, 240, 0.22);
  background: transparent;
  color: #d6c2f0;
  border-radius: 999px;
  padding: 11px 20px;
  font: 600 13px 'Noto Sans KR', sans-serif;
  cursor: pointer;
  min-height: 44px;
}
.scale-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}
.scale-nav button:hover:not(:disabled) {
  border-color: #e7c98c;
  color: #e7c98c;
}

/* ---- 결과 ---- */
.scale-result h2 {
  font-family: 'Gowun Batang', serif;
  font-size: clamp(30px, 7vw, 44px);
  margin: 8px 0 6px;
  color: #f5f0fb;
}
.scale-result .result-sub {
  color: #a99cbe;
  margin: 0 0 34px;
  line-height: 1.8;
}
.axis-row {
  border: 1px solid rgba(214, 194, 240, 0.16);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.025);
}
.axis-row .axis-name {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #9b7ad8;
  font-weight: 700;
  margin: 0 0 12px;
}
.axis-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Gowun Batang', serif;
  font-size: 17px;
  color: #e7c98c;
}
.axis-bar .track {
  flex: 1;
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(214, 194, 240, 0.16);
}
.axis-bar .track em {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff6e2, #e7c98c 62%, #b98f45);
  box-shadow: 0 0 14px rgba(231, 201, 140, 0.5);
  transform: translate(-50%, -50%);
  transition: left 0.5s ease;
}
.axis-bar .side {
  width: 1.4em;
  text-align: center;
  font-weight: 700;
}
.axis-bar .side.dim {
  color: #6f657d;
}
.axis-word {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: #d5cde3;
  line-height: 1.7;
}
.axis-word span {
  color: #8d82a3;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .scale-shell { padding: 22px 16px 64px; }
  /* 좁은 화면에서 5개 문구를 한 줄에 욱여넣지 않는다.
     원 5개만 남기고, 양 끝 의미와 선택한 문구로 읽게 한다. */
  .scale-row small { display: none; }
  .scale-row { gap: 2px; }
  .scale-row button { padding: 8px 0; }
  .scale-row button[data-size='2'] i { width: 44px; height: 44px; }
  .scale-row button[data-size='1'] i { width: 36px; height: 36px; }
  .scale-row button[data-size='0'] i { width: 29px; height: 29px; }
  .scale-picked { margin-top: 22px; font-size: 15px; }
  .axis-bar { font-size: 15px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .scale-progress i,
  .axis-bar .track em,
  .scale-row i { transition: none; }
}

.scale-row button:focus-visible,
.scale-nav button:focus-visible {
  outline: 2px solid #e7c98c;
  outline-offset: 3px;
}