/* ============================================================================
   results.css — 제출 완료 화면 · 다음 단계 안내 · 예비 스킬밴드 미리보기
   ============================================================================ */

.completion-wrap{display:flex;flex-direction:column;gap:var(--ap-s4)}

.completion-card{
  padding:var(--ap-s8) var(--ap-s7);text-align:center;
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);
  border-radius:var(--ap-r-xl);box-shadow:var(--ap-shadow-xs);
}
.completion-check{
  width:68px;height:68px;margin:0 auto var(--ap-s5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ap-green-solid),var(--ap-green));
  color:#fff;font-size:30px;font-weight:600;
  box-shadow:0 6px 20px rgba(30,116,51,.28);
}
.completion-title{
  margin-bottom:var(--ap-s1);
  font-size:var(--ap-t-title1);line-height:var(--ap-t-title1-lh);letter-spacing:var(--ap-t-title1-ls);
  font-weight:700;color:var(--ap-label);
}
.completion-title-en{
  margin-bottom:var(--ap-s5);
  font-size:var(--ap-t-footnote);font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ap-label-3);
}
.completion-msg{
  margin-bottom:var(--ap-s3);
  font-size:var(--ap-t-callout);line-height:1.75;color:var(--ap-label);
}
.completion-msg-en{
  margin-bottom:var(--ap-s5);padding:13px 16px;border-radius:var(--ap-r-md);
  background:var(--ap-fill);
  font-size:var(--ap-t-footnote);line-height:1.7;color:var(--ap-label-3);
}
.completion-divider{height:1px;margin:var(--ap-s5) 0;background:var(--ap-separator-soft)}
.completion-meta{display:flex;flex-direction:column;text-align:left}
.cm-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3);
  padding:10px 0;border-bottom:1px solid var(--ap-separator-soft);
}
.cm-row:last-child{border-bottom:none}
.cm-row span{font-size:var(--ap-t-caption);color:var(--ap-label-3)}
.cm-row strong{font-size:var(--ap-t-footnote);font-weight:600;color:var(--ap-label)}

.completion-ai-note{
  display:flex;align-items:center;gap:var(--ap-s3);
  margin-top:var(--ap-s5);padding:13px 16px;text-align:left;border-radius:var(--ap-r-md);
  background:var(--ap-blue-tint);
  font-size:var(--ap-t-footnote);line-height:1.6;color:var(--ap-blue-text);
}
.ai-spinner{
  width:17px;height:17px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--ap-blue-tint-strong);border-top-color:var(--ap-blue);
  animation:spin .7s linear infinite;
}
.ai-done{font-weight:600;color:var(--ap-green)}

/* ── 다음 단계 ────────────────────────────────────────────────────────── */
.next-steps-card{
  padding:var(--ap-s6) var(--ap-s7);
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);
  border-radius:var(--ap-r-xl);box-shadow:var(--ap-shadow-xs);
}
.ns-title{
  margin-bottom:var(--ap-s5);padding-bottom:var(--ap-s3);
  border-bottom:1px solid var(--ap-separator-soft);
  font-size:var(--ap-t-headline);font-weight:600;letter-spacing:-.012em;color:var(--ap-label);
}
.ns-item{display:flex;align-items:flex-start;gap:var(--ap-s4);margin-bottom:var(--ap-s4)}
.ns-item:last-child{margin-bottom:0}
.ns-num{
  width:28px;height:28px;flex-shrink:0;margin-top:1px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ap-blue);color:#fff;
  font-size:var(--ap-t-footnote);font-weight:600;
}
.ns-text{font-size:var(--ap-t-footnote);line-height:1.65;color:var(--ap-label-2)}
.ns-text strong{font-weight:600;color:var(--ap-label)}

/* ── 예비 스킬밴드 미리보기 (Phase 3) ─────────────────────────────────── */
.skill-preview{
  margin:var(--ap-s6) 0 var(--ap-s2);padding:var(--ap-s5);text-align:left;
  background:var(--ap-fill);border-radius:var(--ap-r-lg);
}
.skill-preview .sk-title{margin-bottom:var(--ap-s1);font-size:var(--ap-t-subhead);font-weight:600;color:var(--ap-label)}
.skill-preview .sk-sub{margin-bottom:var(--ap-s4);font-size:var(--ap-t-caption);line-height:1.55;color:var(--ap-label-3)}
.skill-preview .sk-top-badge{
  margin-bottom:var(--ap-s3);padding:8px 12px;text-align:center;border-radius:var(--ap-r-sm);
  background:var(--ap-orange-tint);color:var(--ap-orange);
  font-size:var(--ap-t-caption);font-weight:600;
}
.sk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--ap-s2)}
.sk-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:84px;padding:13px 8px;text-align:center;
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);border-radius:var(--ap-r-md);
}
.sk-card .sk-name{font-size:var(--ap-t-caption2);font-weight:600;line-height:1.3;color:var(--ap-label-3)}
.sk-card .sk-band{
  font-size:var(--ap-t-title3);font-weight:700;line-height:1;letter-spacing:-.014em;
  color:var(--ap-label);
}
.sk-card .sk-pend{font-size:var(--ap-t-caption2);font-weight:500;color:var(--ap-label-4)}

@media (max-width:520px){
  .sk-grid{grid-template-columns:repeat(2,1fr)}
  .sk-card:nth-child(5){grid-column:span 2}
  .completion-card,.next-steps-card{padding:var(--ap-s6) var(--ap-s5)}
}