/* findcore.css — 파인드코어 진단 폼(findcore.html) 전용 스타일.
 * 파인드코어_디자인스펙.md(v2) 그대로 구현. `fc-` prefix만 새로 만들고,
 * 나머지는 base.css·contact.css·test.css의 기존 컴포넌트를 최대한 재사용해요.
 * 색·간격·모서리·모션은 전부 tokens.css에 실제로 있는 변수만 썼어요.
 */

/* ── 0. 페이지 골격 ───────────────────────────── */
.fc-shell { max-width: 40rem; margin-inline: auto; }

/* ── 1. 페이지 히어로 — 가운데 정렬 ──
 * base.css의 .page-hero는 왼쪽 정렬이 기본이고(story·test가 그대로 씀),
 * 가운데로 쓸 페이지가 각자 스코프로 덮어쓰는 구조예요.
 * service.css:7 · expert.css:6 · contact.css:169에 **똑같은 3줄**이 있고
 * 이게 네 번째 사본이에요 — 다섯 번째가 생기면 base.css에
 * `.page-hero--center` 모디파이어로 합치는 게 나아요.
 * h1(20ch)·lede(36rem)에 max-width가 걸려 있어서 text-align만으론 글자만
 * 가운데로 가고 덩어리는 왼쪽에 남아요 — margin-inline:auto가 같이 필요해요. */
.page--findcore .page-hero { text-align: center; }
.page--findcore .page-hero h1,
.page--findcore .page-hero .lede { margin-inline: auto; }

/* ── 2-0. 결제 안내 ────────────────────────────
 * 20~30분을 쓰기 전에 "내가 쓸 자리가 맞나"를 먼저 알려주는 자리예요.
 * 안내 박스(.fc-guide, 회색 면)와 구분되게 왼쪽에 코럴 선만 세워요. */
.fc-notice {
  margin-block-start: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-accent);
  display: grid;
  gap: var(--space-2xs);
  color: var(--color-ink-2);
  line-height: 1.6;
}
.fc-notice strong { color: var(--color-ink); }

/* ── 2. "먼저 읽어주세요" 안내 박스 ──────────────── */
.fc-guide {
  margin-block-start: var(--space-lg);
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-sm);
}
.fc-guide__title { font-weight: 700; color: var(--color-ink); }
.fc-guide__list { display: grid; gap: var(--space-sm); }
.fc-guide__item { display: flex; gap: var(--space-sm); color: var(--color-ink-2); line-height: 1.6; }
.fc-guide__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-block-start: 0.6em;
  border-radius: 50%;
  background: var(--color-accent);
}
/* 마지막 항목(자동 저장 안내)만 흐리게 */
.fc-guide__list .fc-guide__item:last-child { color: var(--color-muted); }

/* ── 3. Sticky 진주 스테이지 ───────────────────────
 * 답할수록 진주가 빛나는 진행 표시예요. 네이비 미니 돔(스토리 히어로 축소판) 위에
 * 진주 SVG + 텍스트 카운트(접근성 기준)를 함께 놓아요.
 *
 * sticky top은 네비 높이에 따라 4구간이에요 — 값은 한 곳(--fc-sticky-top)에서만 정해요.
 * 네비 높이는 포인터 종류에 따라 달라져요 — base.css의 @media (pointer: coarse)가
 * 링크에 min-height:44px, .btn에 48px을 붙여서 터치 기기에선 네비가 더 커져요.
 * coarse 규칙은 좁은 화면 규칙보다 먼저 와야 해요(모바일 값이 이걸 덮어써야 하니까). */
.page--findcore { --fc-sticky-top: calc(var(--space-md) + 4rem); } /* 네비 실측 58px(bottom 74px)+여백 아래 */
/* 터치 데스크톱·태블릿(>40rem): 네비 66px(bottom 82px) */
@media (pointer: coarse) {
  .page--findcore { --fc-sticky-top: calc(var(--space-md) + 4.5rem); }
}
@media (max-width: 40rem) {
  /* 모바일 네비는 링크가 2단으로 접혀 실측 높이가 92px(bottom 108px) — 4.75rem(76px)로는 겹쳤음 */
  .page--findcore { --fc-sticky-top: calc(var(--space-md) + 6rem); }
}
/* 모바일 + 터치: 2단 랩에 터치 타겟까지 겹쳐 네비가 117px(bottom 133px)로 가장 커요 */
@media (max-width: 40rem) and (pointer: coarse) {
  .page--findcore { --fc-sticky-top: calc(var(--space-md) + 7.75rem); }
}

.fc-progress {
  position: sticky;
  top: var(--fc-sticky-top);
  z-index: var(--z-sticky);
  margin-inline: auto;
  margin-block-start: var(--space-lg);
  max-width: 40rem;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  /* 스토리 히어로 돔과 같은 결 — 수면 청록에서 심해 네이비로 */
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--color-teal) 26%, var(--color-deep)),
    var(--color-deep) 72%
  );
  border: var(--rule-hair) solid var(--color-deep-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
}
.fc-progress__meta { flex: 1 1 auto; min-width: 0; }
.fc-progress__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.fc-progress__label { font-weight: 700; color: var(--color-on-deep); }
.fc-progress__hint { font-size: var(--text-sm); color: var(--color-on-deep-3); }
.fc-progress .quiz-bar {
  margin-block: var(--space-2xs) 0;
  /* 어두운 돔 위 트랙 — 밝은 트랙(paper-3)은 여기서 안 보여요 */
  background: color-mix(in oklch, var(--color-paper) 16%, transparent);
}

/* ── 3-1. 진주 — 단계는 정적 스타일이 기본, 애니메이션은 덧칠이에요.
 * (base.css의 모션 축소 규칙이 animation을 1회로 줄여도 진행 상태가 보여야 해요)
 * 연속값 --pearl(답한 비율 0~1)은 findcore.js가 넣어줘요. */
.fc-pearl { width: 46px; height: 46px; flex: none; overflow: visible; }
.fcp-glow {
  opacity: calc(var(--pearl, 0) * 0.9);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-long) var(--ease-out);
}
.fcp-pearl {
  opacity: 0.45;
  filter: saturate(0.5) brightness(0.85);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-long) var(--ease-out), filter var(--dur-long) var(--ease-out);
}
.fcp-hl { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.fcp-spark { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
/* 반짝임은 자기 transform이 없는 안쪽 path에만 걸어요(바깥 g가 위치 담당) */
.fcp-spark__shape { transform-box: fill-box; transform-origin: center; }
.fcp-bubble { opacity: 0; }

/* 1단계(1~5답): 속에서 희미한 빛 */
.fc-progress[data-stage="1"] .fcp-pearl { opacity: 0.7; filter: saturate(0.8) brightness(0.95); }
/* 2단계(6~11답)부터: 온전한 진주 + 광택 하이라이트 */
.fc-progress[data-stage="2"] .fcp-pearl,
.fc-progress[data-stage="3"] .fcp-pearl,
.fc-progress[data-stage="4"] .fcp-pearl,
.fc-progress[data-stage="5"] .fcp-pearl { opacity: 1; filter: none; }
.fc-progress[data-stage="2"] .fcp-hl,
.fc-progress[data-stage="3"] .fcp-hl,
.fc-progress[data-stage="4"] .fcp-hl,
.fc-progress[data-stage="5"] .fcp-hl { opacity: 0.8; }
/* 3단계(12~17답)부터: 글로우가 숨쉬어요 */
.fc-progress[data-stage="3"] .fcp-glow,
.fc-progress[data-stage="4"] .fcp-glow,
.fc-progress[data-stage="5"] .fcp-glow { animation: fc-glow 5s ease-in-out infinite alternate; }
/* 4단계(18~22답): 코럴 스파클 등장 */
.fc-progress[data-stage="4"] .fcp-spark--1,
.fc-progress[data-stage="5"] .fcp-spark--1 { opacity: 1; }
.fc-progress[data-stage="4"] .fcp-spark--1 .fcp-spark__shape,
.fc-progress[data-stage="5"] .fcp-spark--1 .fcp-spark__shape { animation: fc-twinkle 3.6s ease-in-out infinite alternate; }
/* 5단계(전부): 스파클 셋 + 진주가 한 번 부풀어요 */
.fc-progress[data-stage="5"] .fcp-spark--2 { opacity: 1; }
.fc-progress[data-stage="5"] .fcp-spark--2 .fcp-spark__shape { animation: fc-twinkle 3.6s ease-in-out -1.4s infinite alternate; }
.fc-progress[data-stage="5"] .fcp-spark--3 { opacity: 1; }
.fc-progress[data-stage="5"] .fcp-spark--3 .fcp-spark__shape { animation: fc-twinkle 3.6s ease-in-out -2.6s infinite alternate; }
.fc-progress[data-stage="5"] .fcp-pearl { animation: fc-pearl-pop 700ms var(--ease-out) 1; }

/* 답 하나가 채워질 때 — 기포 하나가 떠올라요 (findcore.js가 is-pop을 붙였다 떼요) */
.fcp-bubble.is-pop { animation: fc-bubble-rise 800ms var(--ease-out) 1; }

/* story.css의 sea-glow/sea-twinkle과 같은 결 — findcore.html은 story.css를 안 불러오니 로컬 정의예요 */
@keyframes fc-glow {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 0.95; transform: scale(1.08); }
}
/* 주의: 스파클은 SVG transform 속성으로 위치·크기를 잡아요.
 * CSS `transform:`을 쓰면 그 속성을 통째로 덮어써서 거대해지니,
 * 속성과 합성되는 개별 `scale` 프로퍼티만 써요(story.css sea-twinkle과 동일). */
@keyframes fc-twinkle {
  from { opacity: 0.55; scale: 0.85; }
  to { opacity: 1; scale: 1.1; }
}
@keyframes fc-pearl-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes fc-bubble-rise {
  0% { transform: translateY(0); opacity: 0.9; }
  100% { transform: translateY(-30px); opacity: 0; }
}

/* ── 4. 섹션 헤더 ─────────────────────────────── */
.fc-section {
  padding-block: var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.fc-section:first-of-type { border-block-start: none; padding-block-start: var(--space-xl); }

.fc-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
}
.fc-section__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: color-mix(in oklch, var(--color-ink) 14%, var(--color-paper));
  line-height: 1;
}
.fc-section .kicker { margin-block-start: var(--space-xs); }
.fc-section .section-intro { margin-block-start: var(--space-xs); }

@media (max-width: 40rem) {
  .fc-section__head { flex-direction: column; gap: var(--space-2xs); }
  .fc-section__num { font-size: clamp(1.5rem, 7vw, 2rem); }
}

/* 문항 사이 리듬 */
.fc-section__fields {
  margin-block-start: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
}

/* ── 5. 문항 필드 ─────────────────────────────── */
.field__textarea--fc { min-height: 4.5rem; }

/* 라디오·체크박스 문항 그룹 — .field 재사용 + 그룹 라벨은 p (버튼 그룹이라 for 연결 없음) */
.fc-field__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }

/* q5_3 "기타" 하위 입력 — 아코디언 */
.fc-etc {
  margin-block-start: var(--space-sm);
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-short) var(--ease-out);
}
.fc-etc.is-open { grid-template-rows: 1fr; }
.fc-etc__inner { min-height: 0; }

/* 체크박스 다중(q6_2) — 사각 인디케이터로 라디오와 형태 구분 */
.opt--multi { position: relative; padding-inline-end: 2.5rem; }
.opt--multi::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-md);
  width: 20px;
  height: 20px;
  margin-block-start: -10px;
  border: 1.5px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-paper);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.opt--multi[aria-pressed="true"]::after { background: var(--color-accent); border-color: var(--color-accent); }

/* 2줄 라디오 카드(q4_4) — 괄호 설명을 작은 글씨로 함께 보여줘요.
 * test.css의 .opt는 display:block이라, 두 줄을 쌓으려면 여기서 flex로 바꿔줘야 해요. */
.opt--2line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
}
.opt__desc { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.opt[aria-pressed="true"] .opt__desc { color: var(--color-ink-2); }

/* 안심 문구(q6_3 ③) — .fc-etc의 펼침을 그대로 쓰고 글씨만 조용하게 */
.fc-etc--note .fc-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  padding-block-start: var(--space-2xs);
}

/* ── 5-1. 주소 칸 묶음(q6_1) ───────────────────── */
.fc-links {
  margin-block-start: var(--space-sm);
  display: grid;
  gap: var(--space-sm);
}
.fc-links__row { display: grid; gap: var(--space-2xs); }
.fc-links__label { font-size: var(--text-sm); color: var(--color-ink-2); }
/* 주소는 한 줄이라 textarea보다 낮게 — 칸이 4개라 높으면 화면을 다 먹어요 */
.fc-links__input { min-height: 44px; }

/* ── 5-2. 자료 파일 올리기(q6_4) ──────────────── */
.fc-upload { margin-block: var(--space-sm) var(--space-lg); }

/* 입력칸은 sr-only로 숨기고 label을 버튼처럼 써요. 입력칸이 탭 순서에 남아 있어서
 * 포커스가 오면 아래 규칙이 label에 포커스 링을 그려줘요(키보드로도 고를 수 있게). */
.fc-upload__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--space-lg);
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1.5px dashed var(--color-rule);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
  .fc-upload__btn:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
}
.fc-upload__input:focus-visible + .fc-upload__btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.fc-upload__list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}
.fc-upload__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
/* 파일 이름이 길면 이름만 줄이고 상태·빼기 버튼은 항상 보이게 */
.fc-upload__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink);
}
.fc-upload__status { flex: none; color: var(--color-muted); }
.fc-upload__item[data-status="done"] .fc-upload__status { color: var(--color-teal); }
.fc-upload__item[data-status="error"] .fc-upload__status { color: var(--color-accent-text); }
.fc-upload__remove {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-muted);
}
@media (hover: hover) {
  .fc-upload__remove:hover { background: var(--color-paper-3); color: var(--color-ink); }
}
.fc-upload__warn:not(:empty) {
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-accent-text);
}
.fc-upload__note {
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ── 6. 복원 배너 — 인라인 ────────────────────── */
.fc-restore {
  margin-block-start: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-paper-2);
  border-inline-start: 3px solid var(--color-teal); /* 코럴은 CTA용 — 복원은 청록("이어감") */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.fc-restore p { color: var(--color-ink-2); }
.fc-restore__actions {
  display: flex;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
  flex-wrap: wrap;
}

/* 오버레이 확인 카드 — 복원 "새로 쓰기" 확인 + 제출 "5개 미만" 확인이 공유 */
.fc-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: color-mix(in oklch, var(--color-deep) 45%, transparent);
}
.fc-overlay[hidden] { display: none; }
.fc-overlay .quiz-card { max-width: 26rem; width: 100%; }
.fc-overlay .quiz-card p { color: var(--color-ink-2); margin-block-start: var(--space-sm); }
.fc-overlay__actions {
  display: flex;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  flex-wrap: wrap;
}

/* .btn--danger — inbox.css에만 있고 findcore.html은 inbox.css를 안 불러오니 여기서 로컬로 정의해요.
 * (inbox.css 정의를 그대로, 토큰만 사용) "네, 새로 시작"처럼 되돌릴 수 없는 동작에 시각적 경고를 줘요. */
.btn--danger {
  background: transparent;
  color: var(--color-accent-text);
  border: 1.5px solid color-mix(in oklch, var(--color-accent) 55%, transparent);
}
.btn--danger:hover {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

/* ── 7. 연락 블록 — 딥씨 존 전환 ──────────────── */
.fc-contact { padding-block: var(--space-2xl) var(--space-3xl); }
.fc-contact__card {
  max-width: 40rem;
  margin-inline: auto;
  background: var(--color-deep-2);
  border: var(--rule-hair) solid var(--color-deep-rule);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  display: grid;
  gap: var(--space-lg);
}
.fc-contact__note { font-size: var(--text-md); }

/* 딥존 색 보정 — 입력창은 밝게 유지(다크 폼 일반 패턴) */
.deep .field__label { color: var(--color-on-deep); }
.deep .field__input { background: var(--color-paper); color: var(--color-ink); }
.deep .check__text { color: var(--color-on-deep-2); }
.deep .fc-contact__note { color: var(--color-on-deep-2); }
/* display 지정이 hidden 속성을 이기지 않게(test.css .quiz-progress[hidden] 패턴과 동일) —
 * 완료 화면으로 바뀔 때 이 카드를 hidden 처리하는데, display:grid가 없으면 안 사라져요. */
.fc-contact__card[hidden] { display: none; }

/* ── 8. 제출 영역 ─────────────────────────────── */
.fc-submit {
  min-height: 56px;
  padding-inline: 3rem;
  font-size: var(--text-md);
  justify-self: center;
}
@media (max-width: 40rem) {
  .fc-submit { width: 100%; }
}

/* ── 9. 완료 화면 ─────────────────────────────── */
/* @keyframes reveal — home.css에만 있고 findcore.html은 home.css를 안 불러오니
 * 여기서 로컬로 정의해요(안 그러면 아래 animation이 조용히 무효가 돼요. report.css에서
 * 같은 이유로 .reveal-on-scroll을 로컬 보완한 것과 같은 이유예요). */
@keyframes reveal { to { opacity: 1; transform: none; } }

.fc-done {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  color: var(--color-on-deep-2);
  opacity: 0;
  transform: translateY(8px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
}
.fc-done__icon { width: 56px; height: 56px; margin-inline: auto; }
.fc-done h2 { margin-block-start: var(--space-md); color: var(--color-on-deep); font-size: var(--text-xl); }
.fc-done p { margin-block-start: var(--space-sm); }
.fc-done a { color: var(--color-teal); }

/* ── 10. 진주 마법사 — 한 번에 한 섹션 ─────────────
 * findcore.js의 마법사가 켜지면 body에 .fc-wiz(항상)와
 * .fc-wiz-steps(인트로가 아닐 때)가 붙어요. 마법사가 꺼지면(스크립트 실패 등)
 * 아래 규칙은 하나도 적용되지 않고 기존 세로 스크롤 그대로예요. */

/* hidden 속성은 display 지정(.fc-wiznav의 flex 등)보다 항상 우선이에요 */
.page--findcore [hidden] { display: none !important; }

/* 마법사 스텝 중: 히어로가 숨어서 첫 요소(진주 스테이지)가 네비 밑으로 파고들지 않게
 * sticky 오프셋만큼 위 여백을 줘요 */
body.fc-wiz-steps main { padding-block-start: var(--fc-sticky-top); }

/* 스텝에서는 섹션 위 구분선이 필요 없어요(한 번에 하나만 보이니까) */
body.fc-wiz-steps .fc-section {
  border-block-start: none;
  padding-block: var(--space-xl) var(--space-lg);
}

/* 깊이 틴트 — 스텝이 내려갈수록 배경에 청록이 살짝 스며요 (--fc-tint는 findcore.js가 넣어요) */
.page--findcore main {
  background: color-mix(in oklch, var(--color-teal) var(--fc-tint, 0%), var(--color-paper));
  transition: background-color 600ms var(--ease-out);
}

/* 시작 버튼 */
.fc-start {
  margin-block-start: var(--space-xl);
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
}
.fc-start__btn { min-height: 56px; padding-inline: 3rem; font-size: var(--text-md); }
.fc-start__hint { font-size: var(--text-sm); color: var(--color-muted); }

/* 스텝 내비 */
.fc-wiznav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block: var(--space-lg) var(--space-2xl);
}
.fc-wiznav__step {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.fc-wiznav__next { min-width: 8.5rem; }
@media (max-width: 40rem) {
  .fc-wiznav__next { flex: 1 1 auto; }
}

/* 섹션 도착 격려 문구 — 코럴 스파클 점 하나로 새로디의 손짓만 살짝 */
.fc-cheer {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-teal);
}
.fc-cheer::before { content: "✦"; color: var(--color-accent); }

/* 딥씨 존의 "질문으로 돌아가기" */
.fc-back {
  justify-self: start;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-teal);
}
.fc-back:hover { color: var(--color-on-deep); }

/* 스텝 등장 — 섹션이 아래에서 살짝 떠오르고, 문항들이 순서대로 따라와요 */
@keyframes fc-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.fc-step-in { animation: fc-step-in var(--dur-long) var(--ease-out) both; }
.fc-step-in .field { animation: fc-step-in var(--dur-long) var(--ease-out) both; }
.fc-step-in .field:nth-child(1) { animation-delay: 60ms; }
.fc-step-in .field:nth-child(2) { animation-delay: 120ms; }
.fc-step-in .field:nth-child(3) { animation-delay: 180ms; }
.fc-step-in .field:nth-child(4) { animation-delay: 240ms; }
.fc-step-in .field:nth-child(5) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .fc-etc { transition: none; }
  /* 무한 애니메이션 정지 — 단계별 정적 스타일만으로 진행 상태가 보여요 */
  .fcp-glow, .fcp-pearl, .fcp-spark, .fcp-spark__shape, .fcp-bubble { animation: none !important; }
  .fc-step-in, .fc-step-in .field { animation-delay: 0ms; }
  .page--findcore main { transition: none; }
}