// FoxPageHeader — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) page-tit-area (3002:6823)
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-page-header">
//     <div class="fox-page-header__main">
//       …fox-breadcrumb…                          <!-- 선택 -->
//       <h1 class="fox-page-header__title">제목</h1>
//       <p class="fox-page-header__description">설명</p>   <!-- 선택 -->
//     </div>
//     <div class="fox-page-header__actions">…</div>  <!-- 선택 -->
//   </div>
//
// 제목이 남는 폭을 먹고 오른쪽에 24px 간격이 남는다. 시안에는 그 자리에 들어간 것이 없지만
// 배치가 자리를 비워 두고 있어 `__actions`로 열어 둔다.
//
// 본문과의 간격(아래 여백)을 머리말이 갖는다 — 시안이 그렇게 묶어 놓았다. 화면마다 따로
// 띄우지 않아도 된다.
//
// 설명 한 줄은 가맹몰 시안(FOX-PAY_2.0 2805:635 머리말)에서 왔다 — 제목과 같은 세로 쌓임에
// 서고 글자는 FoxHeadingGroup의 설명과 같은 토큰이다.
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.
//   - `<h1>`·`<p>`의 브라우저 기본 여백 0: UA 기본값 지우기.

@use "abstracts" as fox;

.fox-page-header {
  display: flex;
  align-items: flex-start;
  gap: fox.gap(7);
  inline-size: 100%;
  padding-block-end: fox.spacing(bottom-xlg);

  // 현재 위치와 제목이 세로로 쌓이고 남는 폭을 먹는다.
  &__main {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: fox.gap(3);
    min-inline-size: 0;
  }

  &__title {
    inline-size: 100%;
    margin: 0;
    color: fox.color(font-neutral-strong);
    font-family: fox.font-family(title);
    font-size: fox.font-size(display-md);
    font-weight: fox.font-weight(bold);
    line-height: 1.5;
    letter-spacing: -0.025em;
    word-break: break-word;
  }

  &__description {
    inline-size: 100%;
    margin: 0;
    color: fox.color(font-neutral-subtle);
    font-family: fox.font-family(body);
    font-size: fox.font-size(body-md);
    font-weight: fox.font-weight(regular);
    line-height: 1.5;
    letter-spacing: -0.025em;
    word-break: break-word;
  }

  // 제목 옆에 서고 줄어들지 않는다. 오른쪽 끝에 붙는 것을 선언으로 못박는다 — 제목 칸이
  // 남는 폭을 먹어 밀려나는 것에 기대면, 제목 칸이 없거나 좁아질 때 자리가 흔들린다.
  &__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  // 여러 개가 들어와 줄이 넘어가도 오른쪽에 맞춘다.
  &__actions > * {
    justify-content: flex-end;
  }
}