/* =====================================================================
   result.css — 결과 화면(SCR-04) 모양

   이 파일이 하는 일
   - 결과 카드 · 1순위 키트 상자 · 행동 버튼 · 2순위 · 만들닷 연결 · 의견 남기기 · "처음부터 다시 하기"의
     간격과 이 화면에만 있는 부품(연령대 칩, 별점, 저장용 결과 카드)의 모양을 정한다.
     카드·키트 상자·칩·정보 줄·버튼 자체의 모양은 components.css 의 부품을 그대로 쓴다.
   - 기준 화면: design/drafts/c/index.html 의 SCR-04 (위쪽·아래쪽), 저장용 카드는 C안 4-9.
   - 한 화면 = 먹색 + 옐로 + 1순위 키트 첫 태그 색 하나 (C안 규칙 3).
     태그 색은 결과 카드의 data-tag 로 정해진다 (JS·CSS 어디에도 색 값을 직접 쓰지 않음, tokens.css 이름만 씀).
   ===================================================================== */

.result-screen {
  padding-top: max(var(--space-6), env(safe-area-inset-top));
  padding-bottom: max(var(--space-10), env(safe-area-inset-bottom));
}

/* JS가 결과가 나오면 유형 이름으로 초점을 옮긴다. 제목은 누르는 것이 아니라서 초점 고리는 그리지 않는다 */
.result-card__name:focus {
  outline: none;
}

/* 키트 이름 칸이 좁아도 긴 이름·태그 칩이 줄을 바꿔 들어가게.
   이름 칸이 120px 보다 좁아지면(화면을 크게 확대했을 때) 사진 아래 줄로 내려가 글자가 세로로 한 글자씩 쌓이지 않게 한다 */
.kit-box__title {
  flex: 1 1 120px;
  min-width: 0;
}

/* 유형 그림 면의 반짝이 별 2개 (기준 화면 SCR-04). 왼쪽 위 큰 별, 오른쪽 아래 작은 별.
   결과가 나온 뒤 0.25초·0.35초에 한 번씩 "반짝" 나타나고 그대로 있다 (계속 깜빡이지 않음, C안 4-8) */
.result-card__art .spark {
  position: absolute;
  width: 26px;
  height: 26px;
  overflow: visible;
}
.result-card__art .spark--big {
  left: 16px;
  top: 14px;
}
.result-card__art .spark--small {
  right: 20px;
  bottom: 16px;
  width: 20px;
  height: 20px;
  animation-delay: calc(var(--delay-kit) + 0.1s);
}
.spark__shape {
  fill: var(--color-primary);
  stroke: var(--color-ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* 작은 키트 그림 칸: 키트 사진은 칸에 꽉 채우고(components.css 기본), 캐릭터·기본 그림은 잘리지 않게 칸 안에 맞춘다.
   data-kind 는 result-view.js 가 지금 보이는 그림에 맞춰 붙인다 (photo = 키트 사진, art = 그림) */
.kit-thumb img[data-kind="art"] {
  object-fit: contain;
  padding: 4px;
}


/* ---------------------------------------------------------------------
   1. 행동 버튼: "결과 이미지 저장" + "이 키트 알아보기" (두 개 나란히, components.css 의 .btn-row)
   ------------------------------------------------------------------- */
.result-actions {
  margin-top: var(--space-6);
}

/* 저장 버튼 아래 안내. 알려 줄 것이 있을 때만 글자가 생기고, 비어 있으면 높이 0 이라 자리를 차지하지 않는다.
   두 가지 모양 (app.js 가 data-kind 를 붙인다):
   - 저장이 안 됨 ("화면을 캡처해서 저장해 주세요", data-kind="failed"): 아래 기본 모양.
     누를 수 있는 버튼으로 오해하지 않게 그림자 없이 점선 테두리 + 크림 바탕 (시작 화면의 오류 안내와 같은 방식, C안 규칙 1)
   - 저장은 됐고 알려 줄 것만 있음 (아이폰 "'파일' 앱에 저장돼요" 안내, data-kind="info"): 그 아래 info 모양 */
.result-save-message:not(:empty) {
  margin-top: var(--space-2);
  padding: 10px 14px;
  border: var(--border-width-thin) dashed var(--color-ink);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-heavy);
  line-height: 1.4;
  text-align: center;
}
/* 저장 뒤 알림: 실패처럼 보이지 않게 점선 상자 없이, 의견 칸 아래 개인정보 안내와 같은 "안내 문구" 모양
   (진회색 14px, 굵기 600, 왼쪽 정렬). 두 문장을 줄 바꿈(\n) 그대로 두 줄로 보여 준다 */
.result-save-message[data-kind="info"]:not(:empty) {
  padding: 0 var(--space-1);
  border: 0;
  background-color: transparent;
  color: var(--color-ink-sub);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  text-align: left;
  white-space: pre-line;
}


/* ---------------------------------------------------------------------
   2. 2순위 · 만들닷 연결
   ------------------------------------------------------------------- */
/* 2순위 영역: 결과 카드와 간격 (스티커가 위 테두리에 걸치므로 넉넉하게) */
.result-second {
  margin-top: var(--space-10);
}

/* 만들닷 홈페이지 · 체험·교육 문의 (주소가 없는 버튼은 hidden, 하나만 남으면 한 줄을 다 쓴다) */
.result-links {
  margin-top: var(--space-4);
}


/* ---------------------------------------------------------------------
   3. 의견 남기기 (F-11) — 흰 카드(components.css 의 .card) 안에 연령대 · 만족도 · 보내기
   ------------------------------------------------------------------- */
.feedback {
  margin-top: var(--space-6);
}

.feedback__title {
  font-size: 20px;
  font-weight: var(--weight-heavy);
  line-height: 1.4;
}

/* 라디오 묶음(fieldset)의 브라우저 기본 테두리·여백을 지운다 */
.feedback__group {
  min-width: 0;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

/* 묶음 이름 ("연령대", "만족도 … 4점")
   float 를 주는 이유: 묶음 이름(legend)은 브라우저가 특별한 자리(테두리 위)에 그려서 위아래 여백이 듣지 않는다.
   float 를 주면 보통 글 상자처럼 그려져 여백이 그대로 적용된다. 바로 다음 칩·별 줄은 clear 로 그 아래에 놓는다 */
.feedback__label {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--space-2);
  color: var(--color-ink-sub);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: 1.3;
}
.feedback__label + * {
  clear: both;
}
.feedback__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feedback__score {
  color: var(--color-ink);
  font-weight: var(--weight-heavy);
}

/* --- 연령대 칩: 알약 블록 4개 (2줄 × 2칸), 하나만 고름 ---
   진짜 라디오 버튼(input)을 칩 전체 위에 투명하게 덮어 둔다.
   왜: 칩 어디를 눌러도 라디오가 눌리고, 키보드(Tab·화살표)와 화면 읽기 프로그램도 그대로 쓸 수 있게 */
.age-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.age-chip {
  position: relative;
  display: block;
}

.age-chip__input,
.rating-star__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.age-chip__face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap-min);
  margin-bottom: var(--press-depth);   /* 그림자 자리 */
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-block);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-heavy);
  line-height: 1;
  transition:
    transform var(--duration-press) var(--ease-out),
    box-shadow var(--duration-press) var(--ease-out),
    background-color var(--duration-press) var(--ease-out);
}
.age-chip__face .icon {
  display: none;
  width: 18px;
  height: 18px;
}

/* 누르는 순간: 4px 내려가며 그림자가 사라진다 (블록 "딸깍") */
.age-chip__input:active + .age-chip__face {
  transform: translateY(var(--press-depth));
  box-shadow: var(--shadow-none);
}

/* 고름: 옐로 바탕 + 체크 + 눌린 블록. 색만이 아니라 체크로도 알린다 (작업 규칙 13장 5번) */
.age-chip__input:checked + .age-chip__face {
  background-color: var(--color-primary);
  transform: translateY(var(--press-depth));
  box-shadow: inset 0 0 0 var(--border-extra-selected) var(--color-ink);
}
.age-chip__input:checked + .age-chip__face .icon {
  display: block;
}

/* --- 만족도 별 5개: 누르는 칸 48px, 별 그림 40px. 고른 별까지 옐로로 칠한다 (feedback.js 가 .is-on) ---
   별 그림은 components.css 의 난이도 별(.star)을 크게 해서 쓴다 */
.rating-stars {
  display: flex;
  gap: 6px;
}

.rating-star {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 1 var(--tap-min);   /* 기본 48px. 화면을 크게 확대해 폭이 아주 좁아지면 다섯 개가 한 줄에 들어가게 줄어든다
                                 (확대한 만큼 실제 손가락 크기는 커지므로 누르기 어렵지 않다) */
  min-width: 0;
  height: var(--tap-min);
}

.rating-star .star {
  width: min(40px, 100%);
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);   /* 키보드 초점 고리를 둥글게 */
}

/* 방금 고른 별이 살짝 튀어 오른다 (한 번만, "동작 줄이기" 설정이면 꺼짐).
   곡선은 ease-out: 1 → 1.18 → 1 키프레임이 이미 한 번 넘치므로, 넘치는 곡선까지 쓰면 두 번 튕긴다 (03 조사 Top 10 7번) */
.rating-star__input:checked + .star {
  animation: rating-bump var(--duration-screen) var(--ease-out);
}
@keyframes rating-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* 키보드로 칩·별에 왔을 때 보이는 초점 고리 (base.css 와 같은 네온 블루 3px) */
.age-chip__input:focus-visible + .age-chip__face,
.rating-star__input:focus-visible + .star {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* 보낸 뒤(잠김): 누를 수 없다는 뜻으로 칩을 모두 눌린 블록처럼 납작하게 (components.css 의 잠긴 버튼과 같은 방식) */
.age-chip__input:disabled,
.rating-star__input:disabled {
  cursor: default;
}
.age-chip__input:disabled + .age-chip__face {
  transform: translateY(var(--press-depth));
  box-shadow: var(--shadow-none);
}

.feedback__send {
  margin-top: var(--space-4);
}

/* 좁은 휴대폰(360px 미만, 예: 320px): 카드 안쪽 여백을 조금 줄이고 별 사이 틈을 없애
   별 5개가 48px 그대로 한 줄에 들어가게 한다 (F-05. 줄이기 전에는 320px 에서 5번째 별이 카드 밖으로 잘렸음) */
@media (max-width: 359px) {
  .feedback {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .rating-stars {
    gap: 0;
  }
}

/* "응답해 주셔서 감사합니다!" — 보내기 전에는 비어 있어 높이 0.
   앞에 옐로 동그라미 + 먹색 체크를 붙여 "보내기 끝"을 글자와 모양으로 함께 알린다 (연령대 칩 "고름"의 옐로 + 먹색 체크와 같은 모양).
   왜 네온 블루가 아닌가: 결과 화면은 먹색 + 옐로 + 1순위 키트 태그 색 하나만 쓴다 (06 가이드 2장, C안 4-11).
     파란 면이 여기만 생기면 넷째 색이 된다 (키보드 초점 고리는 모든 화면 공통이라 예외) */
.feedback__thanks:not(:empty) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-heavy);
  line-height: 1.4;
  text-align: center;
}
/* "보내기"를 누르면 feedback.js 가 초점을 이 문구로 옮긴다(화면 읽기 프로그램이 바로 읽게).
   제목들(.result-card__name 등)과 같은 이유로 초점 고리는 그리지 않는다: 누르는 것이 아니라서,
   네모 고리가 그려지면 버튼처럼 보인다 */
.feedback__thanks:focus {
  outline: none;
}
/* ::before = 옐로 동그라미, ::after = 먹색 체크. 둘 다 글자 앞(order: -1)에 두고,
   체크를 왼쪽으로 (동그라미 너비 + 간격)만큼 당겨 동그라미 위에 겹친다 */
.feedback__thanks:not(:empty)::before,
.feedback__thanks:not(:empty)::after {
  content: "";
  order: -1;
  flex: none;
  width: 24px;
  height: 24px;
}
.feedback__thanks:not(:empty)::before {
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
}
.feedback__thanks:not(:empty)::after {
  margin-left: calc((24px + var(--space-2)) * -1);
  background-color: var(--color-ink);
  -webkit-mask: var(--icon-check) center / 14px no-repeat;
  mask: var(--icon-check) center / 14px no-repeat;
}

.feedback__privacy {
  margin-top: 10px;
}

.result-restart {
  margin-top: var(--space-8);
}


/* =====================================================================
   4. 저장용 결과 카드 (F-06, C안 4-9 "결과 이미지 카드")
   - 540×960 크기로 그리고, save-image.js 가 2배로 찍어 1080×1920 그림을 만든다.
     그래서 아래 숫자는 시안(1080×1920)의 숫자를 반으로 줄인 값이다. 예) 유형 이름 110px → 55px
   - 평소에는 hidden. 저장하는 순간에만 화면 왼쪽 바깥(-10000px)에 그려서 체험객 눈에는 보이지 않는다.
   - 바탕: 1순위 키트 첫 태그 색(data-tag) + 먹색 점 무늬. 글자는 흰 카드와 먹색 띠 안에만 둔다.
   - 위 0~135px, 아래 830~960px 은 SNS 가 가리는 자리라 비워 둔다 (시안의 "가림 영역").
   - 긴 이름도 잘리지 않게 낱말 단위로 줄을 바꾸고(keep-all), 그래도 넘치면 아무 곳에서나 바꾼다(anywhere).
     카드 높이는 정해져 있고, 글자가 길어지면 가운데 캐릭터 그림이 대신 작아진다(flex: 1).
   ===================================================================== */
.poster-stage {
  position: fixed;
  top: 0;
  left: -10000px;
  pointer-events: none;
}

.poster {
  position: relative;
  width: 540px;
  height: 960px;
  overflow: hidden;
  background-color: var(--tag-color, var(--color-primary));
  background-image: var(--pattern-dots);
  background-size: var(--pattern-dots-size) var(--pattern-dots-size);
  color: var(--color-ink);
  font-family: var(--font-body);
  text-align: left;
}

/* 흰 카드 + 그 뒤의 먹색 판(블록 그림자, 오른쪽 아래로 8px).
   왜 box-shadow 를 쓰지 않나: 그림으로 찍으면 사파리 계열에서 둥근 카드의 그림자가 네모로 찍혔다.
   먹색 판을 따로 깔면 어느 브라우저에서나 같은 모양이 된다 */
.poster__card,
.poster__shadow {
  position: absolute;
  top: 135px;
  left: 31px;
  width: 470px;
  height: 645px;
  border-radius: 28px;
}
.poster__shadow {
  transform: translate(8px, 8px);
  background-color: var(--color-ink);
}
.poster__card {
  display: flex;
  flex-direction: column;
  padding: 25px 30px 24px;
  border: 3px solid var(--color-ink);
  background-color: var(--color-surface);
}

.poster__title {
  align-self: flex-start;
  padding: 7px 14px 6px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-3deg);
}

.poster__pre {
  margin-top: 13px;
  font-size: 22px;
  font-weight: var(--weight-heavy);
  line-height: 1.3;
}

.poster__name,
.poster__desc,
.poster__kit-name {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.poster__name {
  margin-top: 2px;
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: 55px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.poster__desc {
  margin-top: 8px;
  color: var(--color-ink-sub);
  font-size: 18px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
}

/* 캐릭터 그림: 남는 높이를 모두 쓴다 (최대 290px), 살짝 기울인 스티커 */
.poster__art {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 8px 0 12px;
}
.poster__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 290px;
  margin: auto;
  object-fit: contain;
  transform: rotate(-2deg);
}

/* 1순위 키트 줄: 키트 그림 + "나에게 딱 맞는 키트"(결과 화면 1순위 상자와 같은 문구) + 키트 이름 + 빨간 1순위 스티커 */
.poster__kit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 11px;
  border: var(--border);
  border-radius: 20px;
  background-color: var(--tag-soft, var(--color-bg));
}

.poster__kit-photo {
  display: grid;
  place-items: center;
  flex: none;
  width: 90px;
  height: 90px;
  border: var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  overflow: hidden;
}
.poster__kit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.poster__kit-photo img[data-kind="art"] {
  object-fit: contain;
  padding: 6px;
}

.poster__kit-text {
  flex: 1;
  min-width: 0;
  padding-right: 44px;   /* 오른쪽 위 1순위 스티커와 겹치지 않게 */
}
.poster__kit-label {
  display: block;
  color: var(--color-ink-sub);
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}
.poster__kit-name {
  display: block;
  margin-top: 4px;
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
}

/* 빨간 1순위 스티커: 먹색 원(바깥 선 2px) 안에 흰 테두리 4px + 빨간 원. 같은 이유로 box-shadow 대신 원을 두 겹으로 */
.poster__rank {
  position: absolute;
  top: -26px;
  right: -15px;
  width: 74px;
  height: 74px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-ink);
  transform: rotate(8deg);
}
.poster__rank-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 4px solid var(--color-white);
  border-radius: var(--radius-pill);
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 18px;
  font-weight: var(--weight-heavy);
  line-height: 1;
  white-space: nowrap;
}

/* 아래 먹색 띠: 만들닷 표시 (먹색 위 옐로 글자 12.08:1) */
.poster__band {
  position: absolute;
  top: 790px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  background-color: var(--color-ink);
  color: var(--color-primary);
  font-size: 17px;
  font-weight: var(--weight-heavy);
  line-height: 1;
  white-space: nowrap;
}
.poster__band .band-dot {
  width: 9px;
  height: 9px;
}


/* =====================================================================
   5. 결과 이미지 미리보기 창 (F-06 예외: 카카오톡 등 앱 안 브라우저에서만 열림)
   - index.html 의 <dialog class="save-preview">. 여닫기는 js/save-image.js 의 showPreview.
   - 화면 가운데 흰 카드 + 먹색 테두리 (C안 카드와 같은 모양). 창 뒤는 반투명 먹색으로 덮는다.
   - 휴대폰 한 화면 안에 제목 · 그림 · 안내 · 닫기 버튼이 다 보이게, 그림 높이를 화면 높이에 맞춰 줄인다.
     화면이 아주 낮으면(가로로 돌린 휴대폰) 창 안에서 위아래로 밀어 볼 수 있다.
   ===================================================================== */
/* 닫혀 있는 창은 숨긴다. 왜: <dialog> 를 모르는 오래된 브라우저(예: iOS 15.3 이하 사파리와 그 위의 앱 안 브라우저)는
   이 태그를 보통 상자처럼 그대로 그려서, 결과 화면 맨 아래에 빈 그림 칸과 눌러도 안 되는 '닫기' 버튼이 보일 수 있다.
   (그런 브라우저에서는 save-image.js 의 chooseSaveWay 가 "none" 을 골라 캡처 안내를 보여 준다. 아는 브라우저는 원래 동작과 같다) */
.save-preview:not([open]) {
  display: none;
}
.save-preview {
  /* base.css 가 모든 요소의 바깥 여백(margin)을 0 으로 지워서, 창을 화면 가운데에 두는 브라우저 기본값(auto)을 다시 적는다 */
  margin: auto;
  width: min(100% - 2 * var(--space-4), 400px);
  max-width: none;
  max-height: calc(100% - 2 * var(--space-4));
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-block-lg); /* 결과 카드·의견 카드와 같은 먹색 블록 그림자 (C안 카드 규칙) */
  overflow-y: auto;
  overscroll-behavior: contain; /* 창 안을 끝까지 밀어도 창 뒤 화면이 같이 밀리지 않게 */
}
.save-preview::backdrop {
  background-color: var(--color-backdrop);
}

.save-preview__title {
  font-size: var(--text-choice);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-snug);
  text-align: center;
}

/* 1080×1920 그림을 비율 그대로 줄여 보여 준다 (가로·세로 중 먼저 닿는 쪽에 맞춤) */
.save-preview__image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 52vh;
  max-height: 52dvh; /* 휴대폰 주소창을 뺀 실제 화면 높이 기준 (지원 안 하면 윗줄) */
  margin: var(--space-3) auto;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  /* 길게 눌렀을 때 "이미지 저장"·"사진 앱에 저장" 메뉴가 나오게, 메뉴를 막는 설정이 있어도 이 그림에서는 풀어 둔다 */
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}

.save-preview__help {
  margin-bottom: var(--space-4);
  text-wrap: balance; /* 두 줄일 때 줄 길이를 고르게 ("…저장해 / 주세요"처럼 끝에 한 낱말만 넘어가지 않게, 지원 안 하면 무시) */
}

/* 가로로 돌린 휴대폰처럼 화면이 낮으면 그림과 여백을 더 줄여, 닫기 버튼까지 창 안을 밀지 않고 보이게 한다
   (568×320 화면에서 창 안 내용이 18px 넘쳐 닫기 버튼 그림자가 잘리던 것을 고침) */
@media (max-height: 500px) {
  .save-preview {
    padding-top: var(--space-3);
  }
  .save-preview__image {
    max-height: 34vh;
    max-height: 34dvh;
    margin: var(--space-2) auto;
  }
  .save-preview__help {
    margin-bottom: var(--space-3);
  }
}