/* =========================================================
   common.css — 사이트 전역 공통 스타일
   (모든 페이지에서 로드: 디자인 토큰 · 헤더 · 푸터 · 스토어 배지 · 기본)
   ========================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ---------- 디자인 토큰 (CSS 변수) ---------- */
/* 색은 앱에서 실제로 쓰는 값을 그대로 가져왔습니다. 스크린샷과 페이지가 같은 팔레트여야
   폰 목업이 배경에 자연스럽게 얹힙니다. 색을 바꾸려면 여기만 고치면 전 페이지에 반영됩니다.
   라이트 전용 디자인이라 다크 모드는 두지 않았습니다. */
:root {
  --color-bg: #fbfaf7;
  --color-bg-alt: #f1ede6;
  /* 앱 화면 배경. 폰 목업의 위아래 여백을 이 색으로 채워 스크린샷과 이어 붙입니다. */
  --color-screen: #faf8f5;

  --color-ink: #14120f;
  --color-text: #3a352f;
  --color-muted: #6b645b;
  --color-border: #e5e0d7;

  /* 시그니처 블루. 크림 바탕에서 3.69:1 이라 작은 글씨에는 못 씁니다 —
     큰 글씨(h1)·채움·마크 전용입니다. 본문과 링크는 아래 -ink(5.36:1)를 쓰세요. */
  --color-primary: #5b7fd6;
  --color-primary-ink: #4b63b5;
  --color-primary-soft: #e7edfb;

  /* 콘텐츠 폭 1160px. 약관·처리방침 페이지만 이 값을 덮어씁니다. */
  --max-width: 1160px;
  --radius: 16px;
  --radius-lg: 24px;

  --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system,
    "Apple SD Gothic Neo", sans-serif;
}

/* ---------- 리셋 & 기본 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.7;
  /* 한국어는 단어 중간에서 줄바꿈되면 읽기 나빠집니다("본인확 인" 방지).
     body에 걸어 자식 전부에 상속시킵니다. */
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  /* CLS 방지로 <img>에 width/height 속성을 답니다. height: auto가 없으면
     CSS가 width만 덮을 때 height 속성값이 그대로 남아 이미지가 세로로 늘어납니다. */
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-ink);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

p {
  margin: 0;
}

a {
  color: var(--color-primary-ink);
  text-decoration: none;
}

/* ---------- 레이아웃 컨테이너 ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- 헤더 ---------- */
/* 로고 하나뿐입니다. 내비게이션은 두지 않았고, 처리방침 링크는 푸터에 있습니다. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9;
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  height: 72px;
}

.logo img {
  height: 30px;
  width: auto;
}

/* ---------- 스토어 배지 ---------- */
/* 구글 스토어로 링크할 때는 공식 배지 에셋만 쓰도록 정하고 있어 구글이 제공하는
   공식 URL을 참조합니다. 외부 URL이라 예고 없이 끊길 수 있으니 assets/images/ 에
   self-host 하는 편이 안전합니다.
   공식 배지는 이미지 안쪽에 여백이 포함돼 있어 height를 키우고 margin으로 되받습니다. */
.store-badge {
  display: inline-block;
  filter: drop-shadow(0 10px 16px rgba(20, 18, 15, 0));
  transition: translate 0.18s ease, filter 0.18s ease;
}

.store-badge img {
  height: 76px;
  width: auto;
  margin-block: -9px;
}

.store-badge:hover {
  translate: 0 -3px;
  filter: drop-shadow(0 14px 22px rgba(20, 18, 15, 0.26));
}

/* ---------- 푸터 ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: 40px 56px;
  font-size: 14px;
  color: var(--color-muted);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.site-footer a {
  margin-left: auto;
  color: var(--color-muted);
  font-weight: 600;
}

.site-footer a:hover {
  color: var(--color-ink);
}

/* ---------- 모션 ---------- */
@media (prefers-reduced-motion: reduce) {
  .store-badge,
  .card {
    transition: none;
  }

  .store-badge:hover,
  .card:hover {
    translate: none;
  }
}