/* =====================================================================
   question.css — 질문 화면(SCR-02)과 분석 중 화면(SCR-03) 모양

   이 파일이 하는 일
   - 질문 화면: 맨 위 줄(이전 버튼 · 진행 바 · "3 / 10"), "Q3" 스티커, 질문, 선택지, 도움말 배치.
     선택지·진행 바·이전 버튼 자체의 모양은 components.css 의 부품을 그대로 쓴다.
   - 분석 중 화면: 노란 쟁반 위 아이콘 3개가 차례로 통통 튀고, 세 단계가 차례로
     "지금 하는 중(노란 원 + 점 3개)" → "다 됨(파란 원 + 체크)"으로 바뀐다(1.5초 안, 0.95초에 모두 다 됨).
   - 키가 작은 휴대폰·가로 화면에서는 간격을 줄여 한 화면에 들어오게 한다 (맨 아래 @media, F-05).
   - 기준 화면: design/drafts/c/index.html 의 SCR-02 · SCR-03.
   - 질문 화면에서는 태그 색을 쓰지 않는다 (D-38). 색·크기 값은 tokens.css 의 이름으로만 쓴다.
   ===================================================================== */

/* ---------- 1. 질문 화면 ---------- */
.question-screen {
  padding-top: max(var(--space-4), env(safe-area-inset-top));
}

.question-body {
  padding-top: var(--space-10);
}

/* "Q3" 스티커 (왼쪽) + 선물 상자 스티커 그림 또는 "절반 왔어요!" 스티커 (오른쪽) */
.question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--question-art-size);  /* 그림 대신 "절반 왔어요!"가 나오는 질문에서도 높이가 같아 글자가 위아래로 튀지 않게 */
}

/* "Q3" 스티커는 오른쪽 그림과 세로 가운데를 맞춘다 (시안 SCR-02).
   공용 .sticker 는 align-self: flex-start(위로 붙음)라서 질문 화면에서만 덮어쓴다 */
.question-head > .sticker {
  align-self: center;
}

/* 선물 상자 스티커 그림: 스티커라서 기울인다 (C안 규칙 2: 기울이는 것은 스티커와 캐릭터만) */
.question-art {
  flex: none;
  width: var(--question-art-size);
  height: var(--question-art-size);
  transform: rotate(7deg);
}

.question-title {
  margin-top: var(--space-4);
}
/* JS가 새 질문마다 제목으로 초점을 옮긴다. 제목은 누르는 것이 아니라서 초점 고리는 그리지 않는다 */
.question-title:focus {
  outline: none;
}

.question-choices {
  margin-top: var(--space-8);
}

.question-hint {
  margin-top: var(--space-5);
}

/* 키가 작은 휴대폰(아이폰 SE 사파리처럼 보이는 높이가 600px 이하): 위·사이 여백만 줄여
   선택지 3개와 안내 문구가 스크롤 없이 한 화면에 들어오게 한다 (F-05, e2e common-layout 에서 점검).
   왜: 셋째 선택지가 화면 아래로 밀리면 둘 중에서만 고르게 될 수 있다 */
@media (max-height: 600px) {
  .question-body {
    padding-top: var(--space-4);
  }
  .question-choices {
    margin-top: var(--space-5);
  }
  .question-hint {
    margin-top: var(--space-3);
  }
}

/* 휴대폰을 가로로 돌렸을 때(보이는 높이 450px 이하): 오른쪽 위 장식 그림을 작게 해서 질문과 선택지가 더 위로 오게 한다.
   가로 화면에서는 어차피 위아래로 밀어 보게 되지만, 첫 선택지까지는 밀지 않고 보이게 (F-05) */
@media (max-height: 450px) {
  .question-screen {
    --question-art-size: 56px;
  }
  .question-body {
    padding-top: var(--space-2);
  }
  .question-title {
    margin-top: var(--space-2);
  }
  .question-choices {
    margin-top: var(--space-4);
  }
}

/* ---------- 2. 분석 중 화면 ---------- */
/* 화면 가운데에 모아 둔다 */
.analyzing-screen {
  align-items: center;
  justify-content: center;
  padding-top: max(var(--space-10), env(safe-area-inset-top));      /* 아이폰 노치 아래로 */
  padding-bottom: max(var(--space-10), env(safe-area-inset-bottom)); /* 아이폰 홈 막대 위로 */
  text-align: center;
}

/* 노란 쟁반 (.pop-panel) + 왼쪽 위 "잠깐만요!" 스티커 */
.analyze-tray-wrap {
  position: relative;
}

.analyze-tray {
  display: flex;
  gap: var(--space-3);
}

.analyze-wait {
  position: absolute;
  top: -22px;
  left: -14px;
  z-index: 2;
  transform: rotate(-5deg);
}

/* 아이콘 블록 3개: 흰 블록 + 먹색 테두리 + 블록 그림자. 차례로 통통 튄다 (.anim-hop) */
.analyze-tile {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: var(--border);
  border-radius: calc(var(--radius-md) + var(--space-1));
  background-color: var(--color-surface);
  box-shadow: var(--shadow-block);
}
.analyze-tile:nth-child(2) {
  animation-delay: 0.25s;
}
.analyze-tile:nth-child(3) {
  animation-delay: 0.5s;
}

/* 아이콘 그림의 색: HTML에는 class 이름만 있고 색은 여기서 tokens.css 이름으로 칠한다
   (작업 규칙 13장 2번: 색 값은 tokens.css 에서만 → 브랜드 색이 바뀌면 아이콘 색도 함께 바뀜) */
.analyze-icon {
  width: 46px;
  height: 46px;
}
.ai-line {
  stroke: var(--color-ink);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ai-primary { fill: var(--color-primary); }
.ai-surface { fill: var(--color-surface); }
.ai-ink     { fill: var(--color-ink); }
.ai-none    { fill: none; }
.ai-neon {                 /* 네온 액자 안 빛나는 선 */
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.analyze-title {
  margin-top: var(--space-10);
}
.analyze-title:focus {
  outline: none;
}

/* 세 단계: 단계마다 세 가지 모습을 차례로 거친다 (기준 화면 SCR-03)
     기다림   : 빈 흰 동그라미
     지금 하는 중: 노란 동그라미 + 먹색 점 3개 ("일하는 중"을 보여 줌, 03 조사 5-3 노동 착각)
     다 됨    : 네온 블루 동그라미 + 흰 체크, 글자는 진회색으로 한 단계 물러남
   - 단계 N 이 "다 됨"이 되는 순간 = 단계 N+1 이 "지금 하는 중"이 되는 순간이다.
     그때(초)는 tokens.css 의 --analyze-step-1·2·3 (0.25 · 0.6 · 0.95초).
   - JS 없이 CSS 움직임의 "기다렸다가 시작(delay)"만으로 바꾼다. 분석 중 화면이 나올 때마다 처음부터 다시 돈다
     (숨겨져 있던 화면이 보이면 그 안의 움직임이 새로 시작되기 때문).
   - "동작 줄이기" 설정이면 기다림이 0초가 되어 처음부터 모두 "다 됨"으로 보인다 (tokens.css). */
.analyze-steps {
  /* 단계마다 "지금 하는 중"이 시작되는 때(--now)와 "다 됨"이 되는 때(--done) */
  --now: 0s;
  --done: var(--analyze-step-1);
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 290px;
  margin-top: var(--space-6);
  text-align: left;
}
.analyze-step:nth-child(2) {
  --now: var(--analyze-step-1);
  --done: var(--analyze-step-2);
}
.analyze-step:nth-child(3) {
  --now: var(--analyze-step-2);
  --done: var(--analyze-step-3);
}

.analyze-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
/* 다 된 단계의 글자는 진회색 (배경 위 8.57:1, 글자는 그대로 읽힘) */
.analyze-step > :last-child {
  animation: step-text-done var(--duration-press) var(--ease-out) var(--done) forwards;
}

/* 동그라미: 두 움직임을 겹쳐 쓴다.
   ① step-now  : --now 에 노랗게 (both = 시작 전에는 흰색으로 기다림)
   ② step-done : --done 에 파랗게 (forwards = 시작 전에는 손대지 않아서, 그동안은 ①의 노랑이 보임)
   목록 뒤쪽에 적은 움직임이 이기므로, --done 이 지나면 파랑이 노랑을 덮는다 */
.analyze-step__mark {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  animation:
    step-now var(--duration-press) var(--ease-out) var(--now) both,
    step-done var(--duration-press) var(--ease-out) var(--done) forwards;
}
/* 점 3개 ("지금 하는 중"일 때만 보임) */
.analyze-step__mark::before {
  content: "";
  position: absolute;
  inset: 5px;
  background-color: var(--color-ink);
  -webkit-mask: var(--icon-dots) center / contain no-repeat;
  mask: var(--icon-dots) center / contain no-repeat;
  opacity: 0;
  animation:
    step-show var(--duration-press) var(--ease-out) var(--now) both,
    step-hide var(--duration-press) var(--ease-out) var(--done) forwards;
}
/* 흰 체크 ("다 됨"부터 보임) */
.analyze-step__mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  background-color: var(--color-white);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
  animation: step-show var(--duration-press) var(--ease-out) var(--done) both;
}

@keyframes step-now {
  from { background-color: var(--color-surface); }
  to   { background-color: var(--color-primary); }
}
@keyframes step-done {
  from { background-color: var(--color-primary); }
  to   { background-color: var(--color-accent); }
}
@keyframes step-show {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes step-hide {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes step-text-done {
  to { color: var(--color-ink-sub); }
}

/* 아래 진행 막대: 1.5초 동안 한 번 차오른다 (계속 도는 효과는 쓰지 않음, C안 4-8) */
.analyze-bar {
  width: 100%;
  max-width: 290px;
  height: 14px;
  margin-top: var(--space-8);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  overflow: hidden;
}
.analyze-bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  animation: analyze-fill var(--duration-analyzing) var(--ease-out) both;
}
@keyframes analyze-fill {
  from { width: 8%; }
  to   { width: 100%; }
}

/* 아주 좁은 휴대폰(360px 미만, 예: 320px): 아이콘 블록 3개가 든 쟁반이 글자 칸(280px)보다 넓어져
   양옆 여백이 16px 아래로 줄고, 왼쪽 위 "잠깐만요!" 스티커가 화면 왼쪽 끝 밖으로 잘렸다 (작업 규칙 13장 4번).
   → 블록·아이콘·쟁반 안쪽 여백을 조금 줄이고, 스티커를 덜 내민다. 360px 이상은 그대로 */
@media (max-width: 359px) {
  .analyze-tile {
    width: 62px;
    height: 62px;
  }
  .analyze-icon {
    width: 40px;
    height: 40px;
  }
  .analyze-tray {
    padding: var(--space-4);
  }
  .analyze-wait {
    left: -6px;
  }
}

/* 휴대폰을 가로로 돌렸을 때(보이는 높이 450px 이하): 1.5초만 보이는 화면이라 위아래 간격을 줄여 세 단계까지 한 화면에 들어오게 */
@media (max-height: 450px) {
  .analyzing-screen {
    padding-top: max(var(--space-6), env(safe-area-inset-top));
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
  .analyze-tile {
    width: 56px;
    height: 56px;
  }
  .analyze-icon {
    width: 36px;
    height: 36px;
  }
  .analyze-tray {
    padding: var(--space-4);
  }
  .analyze-title {
    margin-top: var(--space-4);
    font-size: var(--text-choice);
  }
  .analyze-steps {
    margin-top: var(--space-3);
    gap: var(--space-2);
  }
  .analyze-bar {
    margin-top: var(--space-4);
  }
}