/*
 * closer.me 공통 스타일.
 *
 * 색은 closer-mobile `src/theme/palette.ts`(Figma Foundation v2)에서 가져왔다 — coral primary
 * 와 warm neutral. 앱과 브랜드를 맞추기 위해서다.
 *
 * 약관 문서는 헤더·푸터를 함께 두고(디자인 확인), 앱 웹뷰에서만 숨긴다 — assets/terms.css.
 */

:root {
  --coral-500: #f58061;
  --coral-600: #e96e4e;
  --neutral-0: #fefefe;
  --neutral-50: #fbf9f5;
  --neutral-300: #c6c2bc;
  --neutral-400: #a8a49e; /* Figma color/text/quaternary */
  --neutral-500: #87847e;
  --neutral-700: #66635e;
  --neutral-900: #242220;
  /*
   * 제목 색. 앱 시안의 `teal/900` 이고 warm neutral 이 아니라 차가운 쪽으로 살짝 기운다.
   * `--neutral-900`(#242220) 으로 대체하지 않았다 — 나란히 놓으면 다른 색으로 읽힌다.
   */
  --teal-900: #374443;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--neutral-50);
  color: var(--neutral-900);
  /*
   * Pretendard 로 확정됐다(WEBF-562 코멘트). 처음 Figma 는 Apple SD Gothic Neo 였는데 그 폰트는
   * Apple 시스템 폰트라 웹폰트로 재배포할 수 없어서, 디자인 쪽에서 Pretendard 로 일괄 교체했다.
   */
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.6;
  word-break: keep-all;
}

/* ── 안내 화면(404 · 딥링크 폴백) ────────────────────────────────────── */

/*
 * Figma "클로저"(H89IiOWVIoDjSEgLYRDGwF) node 1675:51887(404) · 1675:51719(딥링크).
 *
 * 두 화면이 같은 부품을 쓴다 — 아이콘 → 제목 → 설명 → 버튼. 소개 페이지와 달리 **px 고정**
 * 이다. 시안이 375 폭 한 장뿐이고 화면 가운데 앉는 카드라, 폭에 따라 키울 이유가 없다
 * (소개 페이지는 1920 시안을 vw 로 환산했다 — 그쪽은 전면 레이아웃이라 사정이 다르다).
 *
 * 자간은 시안 그대로 `-0.25px` 절대값이다. 소개 페이지의 `-0.04em` 과 다른데, 이 두 화면은
 * 앱 디자인 파일에서 왔고 그쪽 토큰이 앱(Muntorial)과 같은 절대값을 쓴다.
 */

/*
 * grid + `place-content: center` 로는 안 된다. 그 조합은 트랙을 내용 폭으로 줄여서 안쪽
 * `width: min(347px, 100%)` 의 100% 가 다시 내용 폭을 가리키게 되고(순환), 제목이 347 이
 * 아니라 글자 폭(실측 253.9)만큼만 차지한다. 글이 길어지면 시안보다 먼저 줄바꿈된다.
 */
.notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 14px;
  text-align: center;
}

.notice__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 시안 폭 347 = 375 - 좌우 14 */
  width: min(347px, 100%);
  /* 아이콘 블록과 그 뒤 사이. 404 는 16 이라 아래에서 덮는다 */
  gap: 32px;
}

/* 404 는 아이콘이 곧바로 본문을 이끌어 더 붙는다(시안 16 vs 32) */
.notice--tight .notice__inner {
  gap: 16px;
}

/* 아이콘 + 제목·설명 (딥링크) */
.notice__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* 제목·설명 + 버튼 (404) */
.notice__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.notice__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.notice__title {
  margin: 0;
  color: var(--teal-900);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.25px;
}

.notice__text {
  margin: 0;
  color: var(--neutral-700);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.25px;
}

.notice__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/*
 * 앱 아이콘. 시안은 52 사각형 안에 워드마크를 41.6×7.905 로 앉힌다. 바깥 상자와 안쪽
 * 글리프를 각각 못 박아 둔다 — 한쪽만 비율로 두면 폰트 크기나 부모 폭에 끌려간다.
 */
.notice__appicon {
  position: relative;
  display: block;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--coral-500);
}

.notice__appicon img {
  position: absolute;
  left: 5.2px;
  top: 22.05px;
  width: 41.6px;
  height: 7.905px;
}

/* 404 의 그림 아이콘. 시안 40×37 을 그대로 쓴다 */
.notice__icon {
  display: block;
  flex: none;
  width: 40px;
  height: 37px;
}

.notice__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 100px;
  background: var(--coral-500);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.25px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.notice__cta:active {
  background: var(--coral-600);
}

/*
 * **글자색만 특정도를 올린다.** landing.css 의 `.landing :where(a) { color: inherit }` 는
 * `:where()` 안이 0 이라 특정도가 (0,1,0) 인데 `.notice__cta` 도 (0,1,0) 이고, landing.css 가
 * base.css 뒤에 로드되므로 클래스만으로는 흰색을 빼앗긴다 — 실제로 "클로저 설치하기" 가
 * 검게 나왔다. 소개 페이지 CTA 에서 한 번 겪은 함정이라 여기서 미리 못 박는다.
 *
 * 요소 선택자를 붙여 (0,1,1) 로 만들면 로드 순서와 무관하게 이긴다.
 */
a.notice__cta,
button.notice__cta {
  color: #fff;
}

a.notice__link,
button.notice__link {
  color: var(--neutral-400);
}

.notice__link {
  /* 시안의 글상자는 347 폭이고 글자만 가운데다. 폭을 채워 두면 탭 영역도 넓어진다 */
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--neutral-400);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.25px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}