/*
 * 자기이해 리캡 — 한 화면에 사실 하나씩 보는 결과 화면.
 *
 * 색과 여백은 common.css의 --pf-* 토큰을 그대로 씁니다.
 * 앞서 어두운 그라데이션으로 만들었더니 이 화면만 다른 앱처럼 보여서,
 * 나머지 페이지와 같은 밝은 톤으로 맞췄습니다. 슬라이드 구분은
 * 배경색 대신 카드 상단의 얇은 색 띠와 키커 색으로만 줍니다.
 */
html,
body {
  height: 100%;
}

.recap-page {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  margin: 0;
  /*
   * min-height가 아니라 height로 확정하고 dvh를 씁니다.
   * 100vh만 쓰면 모바일 주소창 높이가 포함돼 아래가 잘립니다.
   */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--pf-bg);
  color: var(--pf-text);
  }

.recap-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: var(--pf-bg);
}

/* ------------------------------------------------------------ 상단 바 */

.recap-top {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) var(--pf-gutter) 12px;
  border-bottom: 1px solid var(--pf-border);
  background: var(--pf-surface);
}

.recap-brand {
  font-size: 15px;
  font-weight: 900;
  color: var(--pf-text);
}

.recap-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  background: var(--pf-surface);
  color: var(--pf-text);
  cursor: pointer;
}

.recap-icon:hover {
  border-color: var(--pf-border-strong);
  background: var(--pf-primary-pale);
}

.recap-icon .pf-icon {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------ 슬라이드 */

.slides {
  position: relative;
  min-height: 0;
}

.slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  /*
   * safe center: 내용이 영역보다 커져도 위쪽이 잘리지 않고 시작 지점에 맞춰집니다.
   * 넘칠 때는 내부 스크롤로 남은 내용을 볼 수 있게 둡니다.
   */
  align-content: safe center;
  justify-items: center;
  gap: 14px;
  overflow-y: auto;
  padding: 28px var(--pf-gutter) 32px;
  text-align: center;
}

.slide.is-active {
  z-index: 2;
  display: grid;
}

/* 슬라이드 성격은 키커 색과 상단 띠로만 구분합니다. */
.slide::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--accent, var(--pf-primary));
}

.theme-intro { --accent: var(--pf-primary); }
.theme-identity { --accent: #7b5cf0; }
.theme-keywords { --accent: #0ea5a5; }
.theme-strengths { --accent: #e8892b; }
.theme-flow { --accent: #2f6fed; }
.theme-values { --accent: #b0468f; }
.theme-portfolio { --accent: #0d9488; }
.theme-fields { --accent: #c2761c; }
.theme-outro { --accent: var(--pf-primary); }

/* 슬라이드 안 요소는 --step 순서대로 차례로 올라옵니다. */
.slide.is-active > * {
  animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.06s + var(--step, 0) * 0.09s);
}

.slide-kicker {
  margin: 0;
  color: var(--accent, var(--pf-primary));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.slide-title {
  margin: 0;
  color: var(--pf-text);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.slide-hero {
  display: block;
  color: var(--pf-text);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.slide-copy {
  max-width: 32ch;
  margin: 0;
  color: var(--pf-muted);
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
}

.slide-hint {
  margin: 4px 0 0;
  color: var(--pf-muted);
  font-size: 12px;
}

/* ------------------------------------------------------- 키워드 막대 */

.slide-bars {
  display: grid;
  gap: 12px;
  width: min(420px, 100%);
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.35fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.bar-row span {
  overflow: hidden;
  color: var(--pf-text);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-row i {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #e5edf8;
}

.bar-row i b {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pf-accent), var(--pf-primary));
  animation: bar-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.35s + var(--item, 0) * 0.08s);
}

.bar-row em {
  color: var(--pf-primary-dark);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

/* ------------------------------------------------------- 목록 / 칩 */

.slide-items {
  display: grid;
  gap: 10px;
  width: min(460px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}

.slide-items li {
  padding: 14px 16px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-surface);
  color: var(--pf-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  text-align: left;
  word-break: keep-all;
  animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--item, 0) * 0.1s);
}

.slide-items.numbered li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.slide-items.numbered li::before {
  counter-increment: item;
  content: counter(item);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--pf-primary-soft);
  color: var(--pf-primary-dark);
  font-size: 13px;
  font-weight: 900;
}

.slide-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(460px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.slide-chips li {
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--pf-primary-soft);
  color: var(--pf-primary-dark);
  font-size: 14px;
  font-weight: 800;
  animation: pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--item, 0) * 0.07s);
}

/* ------------------------------------------------------- AI 추천 로드맵 */

.theme-roadmap { --accent: #2f6fed; }

.slide-targets {
  display: grid;
  gap: 10px;
  width: min(460px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.slide-targets li {
  padding: 13px 16px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-surface);
  text-align: left;
  animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--item, 0) * 0.1s);
}

.slide-targets li > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
}

.slide-targets strong {
  color: var(--pf-text);
  font-size: 15px;
}

.slide-targets span {
  color: var(--pf-primary-dark);
  font-size: 14px;
  font-weight: 900;
}

.slide-targets p {
  margin: 0;
  color: var(--pf-muted);
  font-size: 13px;
  line-height: 1.55;
  word-break: keep-all;
}

/* ---------------------------------------------------------- 마무리 CTA */

.slide-actions {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 10px;
  width: min(340px, 100%);
  margin-top: 4px;
}

.recap-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--pf-border-strong);
  border-radius: 999px;
  background: var(--pf-surface);
  color: var(--pf-primary-dark);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

.recap-cta.primary {
  border-color: var(--pf-primary);
  background: var(--pf-primary);
  color: #ffffff;
}

.recap-cta.primary:hover {
  border-color: var(--pf-primary-dark);
  background: var(--pf-primary-dark);
}

/* --------------------------------------------------------- 하단 이동 */

.recap-nav {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px var(--pf-gutter) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--pf-border);
  background: var(--pf-surface);
}

.recap-nav-button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--pf-border-strong);
  border-radius: 999px;
  background: var(--pf-surface);
  color: var(--pf-primary-dark);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

/*
 * hover를 반드시 명시합니다.
 * common.css의 전역 button:hover(명시도 0,1,1)가 클래스 하나짜리 규칙(0,1,0)을 이겨서
 * 그냥 두면 마우스를 올렸을 때 버튼이 진한 파랑으로 바뀝니다.
 */
.recap-nav-button:hover:not(:disabled) {
  border-color: var(--pf-primary);
  background: var(--pf-primary-pale);
  color: var(--pf-primary-dark);
}

.recap-nav-button.primary {
  border-color: var(--pf-primary);
  background: var(--pf-primary);
  color: #ffffff;
}

.recap-nav-button.primary:hover:not(:disabled) {
  border-color: var(--pf-primary-dark);
  background: var(--pf-primary-dark);
  color: #ffffff;
}

.recap-nav-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.recap-step {
  color: var(--pf-muted);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- 로딩 / 오류 */

.recap-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 32px;
  background: var(--pf-bg);
  color: var(--pf-muted);
  text-align: center;
}

.recap-overlay p {
  margin: 0;
  color: inherit;
}

.analyzing-orbit {
  position: relative;
  width: 58px;
  height: 58px;
}

.analyzing-orbit i {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--pf-primary);
  border-radius: 50%;
  animation: spin 1.15s linear infinite;
}

.analyzing-orbit i:nth-child(2) {
  inset: 9px;
  border-top-color: var(--pf-accent);
  animation-duration: 1.5s;
  animation-direction: reverse;
}

.analyzing-orbit i:nth-child(3) {
  inset: 18px;
  border-top-color: #b9cff8;
  animation-duration: 1.9s;
}

/* ------------------------------------------------------------ 키프레임 */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes bar-grow {
  from { width: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------ 반응형 */

@media (min-width: 761px) {
  /* 데스크톱에서는 가운데 카드 한 장으로 둡니다. */
  .recap-page {
    place-items: center;
    padding: var(--pf-gutter);
  }

  .recap-shell {
    width: min(460px, 100%);
    height: min(820px, 100%);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
  }

  .slide-title { font-size: 32px; }
  .slide-hero { font-size: 36px; }
}

@media (max-width: 400px) {
  .slide-title { font-size: 26px; }
  .slide-hero { font-size: 30px; }
  .slide { padding: 22px var(--pf-gutter) 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide.is-active > *,
  .slide-items li,
  .slide-chips li,
  .bar-row i b {
    animation: none;
  }

  .bar-row i b { width: var(--w, 0%); }
}