/* 워크스페이스 안의 질문 생성 흐름(.qf). 카드 껍데기·색 토큰·질문 목록은 로그인 전
   랜딩(.al-*, landing.css)을 그대로 쓰고 -- 그래서 마크업 루트가 `class="al qf"`다 --
   여기에는 두 화면이 갈리는 만큼만 둔다. 토큰을 복사해 오면 랜딩 색이 바뀔 때 이
   화면만 옛 색으로 남는다. */

/* .landing은 가운데 정렬 세로 flex다 -- 걸음마다 화면을 갈라 두면서 그 사이에 래퍼가
   하나 끼었으므로, 래퍼가 폭을 그대로 넘겨주지 않으면 안쪽 .landing-stage의 width:100%가
   내용 폭에 걸려 화면이 좁게 접힌다. */
.landing > [data-landing-screen] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 랜딩 안에 들어가 있으므로 카드 바깥 여백은 랜딩이 이미 잡아 둔 것을 쓴다. */
.landing .qf { width: 100%; margin-top: 0; margin-bottom: 0; }

/* 고르기 화면의 오른쪽 갈래: 실행으로 갈지 후보를 더 다듬을지. 좁은 화면에서
   버튼이 서로 붙어 오독되지 않도록 묶어서 간격을 준다. 이 화면에만 있는 갈래라
   여기 남는 규칙은 사실상 이것 하나다 -- 분광 무대·질문 칩·걸음 표시·푸터 배치는
   전부 로그인 전 랜딩과 같은 .al-* 규칙을 그대로 쓴다. */
.qf-actions { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* 실행 화면으로 넘어가는 갈래는 부차적인 출구다 -- 기본 동작(분석 시작) 옆에서
   같은 무게로 보이면 어느 쪽이 다음 걸음인지 읽히지 않는다. */
.qf-actions .al-ghost { white-space: nowrap; }

/* 좁은 폭에서 푸터를 접는 것은 .al-stepfoot이 이미 한다(landing.css) -- 여기서
   flex로 다시 접으면 걸음 표시가 가운데 자리를 잃는다. 이 폭에서 필요한 것은
   버튼 두 개가 남는 폭을 나눠 갖는 것뿐이다. */
/* 좁은 폭에서 랜딩의 푸터는 [이전] [다음] 두 칸으로 접힌다(.al-stepfoot). 이 화면은
   마지막 칸이 버튼 둘이라 그 접힘을 그대로 쓰면 칸 안에서 다시 줄바꿈이 일어나고,
   왼쪽의 "N개 선택됨"이 두 줄짜리 칸 옆에서 어긋난 높이로 선다. 버튼 줄에 자기 줄을
   주고 양 끝으로 벌린다 -- 걸음 표시와 선택 개수는 랜딩과 같은 자리에 그대로 남는다. */
/* U-10 (docs/plans/ROADMAP.md §2.1): was 560px and, below it, a 400px step
 * kept in sync with landing.css's own narrowest-phone tier (see the comment
 * that used to sit here) -- both collapsed onto the console's ≤760px tier.
 * landing.css's matching 400px rules were collapsed the same way, so the two
 * stay in sync; the button padding/font-size shrink this used to reserve for
 * very narrow phones now triggers as early as 760px, which is unverified in
 * this environment and worth a visual check at a phone width. */
@container content-col (width < 720px) {
  .qf .al-stepfoot > .qf-actions { grid-row: 3; grid-column: 1 / -1; justify-self: stretch; }
  .qf-actions { justify-content: space-between; }
  .qf-actions .al-cta { padding: 12px 16px; font-size: var(--fs-3); }
  .qf-actions .al-ghost { font-size: var(--fs-2); }
}
/* 제일 좁은 폭의 버튼 축소는 landing.css가 .al-stepfoot의 직계 자식에만 건다.
   이 화면의 두 버튼은 .qf-actions 안에 한 겹 더 들어가 있어 거기에 걸리지 않으므로,
   같은 값을 여기서 한 번 더 준다. */
@container content-col (width < 360px) {
  .qf-actions .al-cta { padding: 12px 16px; font-size: 14.5px; }
  .qf-actions .al-ghost { font-size: 13px; }
}