/* Affinity Test */
.aff-page { min-height: 100vh; background: var(--paper); }
.aff-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(244,239,231,.9); backdrop-filter: blur(8px); z-index: 5;
}
.aff-progress { display: flex; align-items: center; gap: 14px; flex: 1; max-width: 400px; margin: 0 40px; }
.aff-progress-bar { flex: 1; height: 3px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.aff-progress-fill { height: 100%; background: var(--red); transition: width .35s ease; }
.aff-progress-txt { font-size: 11px; color: var(--ink-3); }

.aff-body {
  max-width: 1200px; margin: 0 auto; padding: 60px 40px;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start;
}
@media (max-width: 900px) { .aff-body { grid-template-columns: 1fr; padding: 30px 24px; } }

.aff-panel {
  background: white; border-radius: var(--r-lg); padding: 40px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.aff-q { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -0.01em; margin: 20px 0 32px; max-width: 600px; }

.aff-opts { display: flex; flex-direction: column; gap: 10px; }
.aff-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
  font-size: 16px; color: var(--ink-2);
  text-align: left;
  transition: all .15s;
}
.aff-opt:hover { border-color: var(--ink); background: white; }
.aff-opt.active { border-color: var(--red); background: rgba(230,57,70,.05); color: var(--ink); }
.aff-opt-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
.aff-opt.active .aff-opt-check { background: var(--red); border-color: var(--red); color: white; }

.aff-slider { padding: 20px 0; }
.aff-slider-labels {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--ink-3); margin-bottom: 30px;
}
.aff-slider input[type=range] {
  width: 100%; height: 4px;
  -webkit-appearance: none; background: var(--paper-3); border-radius: 999px; outline: none;
}
.aff-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red);
  cursor: grab; box-shadow: 0 3px 12px rgba(230,57,70,.4);
  border: 3px solid white;
}
.aff-slider input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--red);
  cursor: grab; box-shadow: 0 3px 12px rgba(230,57,70,.4); border: 3px solid white;
}
.aff-slider-val { text-align: center; margin-top: 40px; font-size: 48px; letter-spacing: -0.02em; }

.aff-multi-hint { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.aff-multi-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.aff-multi-chip {
  padding: 12px 20px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line-2);
  font-size: 14px; color: var(--ink-2);
  transition: all .15s;
}
.aff-multi-chip:hover { border-color: var(--ink); }
.aff-multi-chip.active { background: var(--ink); color: white; border-color: var(--ink); }

.aff-text textarea {
  width: 100%; padding: 16px; background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: 15px; line-height: 1.5; resize: vertical;
  font-family: inherit;
}
.aff-text textarea:focus { outline: none; border-color: var(--ink); background: white; }
.aff-text-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-4); margin-top: 8px; }

.aff-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
}

.aff-side { display: flex; flex-direction: column; gap: 14px; }
.aff-side-card {
  display: flex; gap: 12px; padding: 20px;
  background: var(--paper-2); border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.aff-side-card > svg { color: var(--red); flex-shrink: 0; margin-top: 3px; }
.aff-side-note {
  padding: 14px 20px; background: rgba(74,93,58,.08);
  border-radius: var(--r-md);
  border: 1px solid rgba(74,93,58,.18);
  text-align: center;
}

/* Analyzing */
.aff-analyzing {
  min-height: 100vh; background: #141210; color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.aff-anal-inner { max-width: 640px; width: 100%; }
.aff-anal-logo {
  width: 90px; height: 90px; border-radius: 50%;
  background: rgba(230,57,70,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  margin: 0 auto; position: relative;
}
.aff-anal-circle {
  position: absolute; inset: -10px;
  border-radius: 50%; border: 2px solid var(--red);
  border-right-color: transparent; border-bottom-color: transparent;
  animation: spin 1.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.aff-anal-steps { margin-top: 50px; display: flex; flex-direction: column; gap: 12px; }
.aff-anal-step {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; background: rgba(255,255,255,.04);
  border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.06);
  font-size: 15px; color: rgba(244,239,231,.6);
  transition: all .3s;
}
.aff-anal-step.run { background: rgba(230,57,70,.1); border-color: rgba(230,57,70,.3); color: var(--paper); }
.aff-anal-step.done { background: rgba(74,93,58,.12); border-color: rgba(122,152,90,.3); color: var(--paper); }

.aff-anal-step-ico {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aff-anal-step.done .aff-anal-step-ico { background: #7a985a; color: white; }
.dot-wait { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.dot-run { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1s infinite; }

/* Result */
.aff-result { min-height: 100vh; background: var(--paper); padding: 60px 40px; }
.aff-result-inner { max-width: 900px; margin: 0 auto; }
.aff-result-preview {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  padding: 24px; background: white; border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) { .aff-result-preview { grid-template-columns: repeat(3, 1fr); } }

.aff-result-face { position: relative; }
.aff-result-face .portrait { height: auto; aspect-ratio: 3/4; }
.aff-result-score {
  position: absolute; top: 8px; right: 8px;
  background: rgba(20,18,16,.85); backdrop-filter: blur(8px);
  color: white; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; letter-spacing: -0.01em;
}