/*
  치즈모아 앱 받기 랜딩 공용 스타일 · /get(한국어)와 /get/en(영어)가 함께 쓴다.
  토큰은 본 웹앱 tailwind.config.js와 같은 값.
*/
:root {
  --primary: #ffc93c; /* 브랜드 옐로우 — 강조에만 쓴다 */
  /*
    배경은 브랜드 옐로우를 그대로 깔지 않는다. #FFC93C 는 채도가 높아 화면을 통째로
    덮으면 눈이 피로하다("너무 노랗다" — 2026-08-18). 스노우의 하늘색은 같은 방식이
    통하지만 옐로우는 아니라서, 브랜드 색임을 알아볼 만큼만 남긴 연한 톤을 쓴다.
  */
  --bg: #fff0cc;
  --heading: #4a3415;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
  브랜드 색이 화면을 통째로 덮는다. 글자는 흰색이 아니라 갈색인데, 옐로우 위 흰 글자는
  대비가 서지 않아 앱 전반에서 금지한 조합이기 때문이다(CHMO-512 ⑥).
*/
body {
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px calc(40px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--heading);
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, sans-serif;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* 단색 면이 넓어 비는 느낌을 덜어 주는 최소한의 결(본 웹앱 .cheese-dots와 같은 관용) */
.dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(74, 52, 21, 0.08) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  pointer-events: none;
}

main {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: auto;
}

/*
  심볼 단독. 배경을 연한 톤으로 낮추면서 흰 타일이 필요 없어졌다 — 타일은 진한 옐로우
  위에서 로고가 묻히는 걸 막는 장치였고, 앱 화면은 애초에 타일을 걷었다(CHMO-512 ③).
*/
.logo {
  width: 132px;
  height: 132px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

h1 {
  margin-top: 26px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tagline {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: rgba(74, 52, 21, 0.72);
}

/*
  스토어 공식 배지 — 크기만 조절하고 색·문구·비율은 손대지 않는다(양 사 상표 가이드라인).

  두 배지는 글자가 아니라 **배지 높이**를 맞춘다. 애플 SVG 는 배지가 곧 자산 경계라 높이
  55.5px 로 그리고(한국어판 129.7×40 → 폭 180px · 영어판 119.7×40 → 폭 166px), 구글 PNG 는
  규정 여백을 자산 안에 지고 있어서(646×250 중 실제 배지는 646×192 · 위아래 29px이 여백)
  72.4px 로 그려야 배지 부분이 애플과 같은 높이가 된다(폭 187px).

  폭이 아니라 높이로 정하는 건 언어마다 애플 배지 폭이 달라서다(문구 길이가 다르다).
  한국어판은 예전 폭 기준(180·187px)과 같은 크기로 그려진다.
*/
.badges {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 구글 배지가 여백을 지고 있어 눈에 보이는 간격은 여기에 8px이 더 붙는다 */
  gap: 6px;
}
.badge {
  display: inline-block;
  transition: transform 0.06s ease;
}
.badge:active {
  transform: scale(0.97);
}
.badge img {
  height: 55.5px;
  width: auto;
  display: block;
}
.badge.play img {
  height: 72.4px;
}

.note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(74, 52, 21, 0.62);
}

footer {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  color: rgba(74, 52, 21, 0.6);
}
footer a {
  color: inherit;
  text-decoration: none;
}
/*
  브랜드 아이콘은 각 사 색이 아니라 단색으로 통일한다 — 세 색이 그대로 들어오면
  연한 배경 위에서 셋만 튀어 페이지 톤이 깨진다(스노우 랜딩도 하단 SNS를 흰 단색으로
  통일해 뒀다). 색은 currentColor라 부모 색만 바꾸면 따라온다.
*/
.sns {
  display: flex;
  gap: 6px;
}
.sns a {
  /* 아이콘은 22px이지만 탭 영역은 44px — 손가락이 닿는 최소 크기(iOS HIG) */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(74, 52, 21, 0.55);
  transition: color 0.12s ease;
}
.sns a:active {
  color: rgba(74, 52, 21, 0.9);
}
.sns svg {
  width: 22px;
  height: 22px;
  display: block;
}
.legal .sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* 언어 전환 링크 · 법적 링크 줄 끝에 붙는다 */
.legal .lang {
  white-space: nowrap;
}

/* ── 영어판(/get/en) 첫 화면 아래 소개 ──────────────────────────────────────
  광고로 처음 들어온 사람은 브랜드를 모른다. 첫 화면(로고·한 줄·배지)은 한국어판과 같은 꼴이라
  바로 누를 수 있고, 망설이는 사람만 내려서 본다. 스크린샷은 첫 화면 아래에 일부가 비쳐서
  내릴 거리가 있다는 걸 알린다.
*/
.page-long {
  justify-content: flex-start;
}
.page-long main {
  margin: 0 auto;
}

/*
  첫 화면 사진(영어판만). body 좌우·위 여백을 음수 마진으로 걷어 화면 끝까지 깔고, 높이는
  화면보다 조금 짧게 둬서 아래 스크린샷 윗머리가 비친다(내릴 거리가 있다는 신호).

  폰은 세로 셀카라 사람 얼굴이 화면 가운데에 모인다. 그래서 글자를 둘로 나눈다: 브랜드(로고·이름·
  한 줄)는 위쪽 어두운 천장에, 배지는 아래쪽 탁자 위에. 한데 모아 아래에 두면 얼굴을 덮는다.
  넓은 화면은 가로 사진이라 얼굴이 위쪽에 있어 반대로 전부 아래에 모은다.

  글자는 흰색 · 사진 위라 갈색이 서지 않는다. 위·아래만 어둡게 깔아 가운데 얼굴은 그대로 둔다.
*/
.page-long .hero {
  position: relative;
  align-self: stretch;
  margin: -48px -24px 0;
  min-height: calc(100svh - 36px);
  display: flex;
  flex-direction: column;
  padding: calc(36px + env(safe-area-inset-top)) 24px 28px;
  overflow: hidden;
  /* 사진이 오기 전 · 사진 천장과 같은 톤이라 도착해도 번쩍이지 않는다 */
  background: #241a12;
  color: #fff;
}
.hero-photo,
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-photo img {
  object-fit: cover;
  object-position: 50% 50%;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 13, 7, 0.62) 0%,
    rgba(20, 13, 7, 0.34) 24%,
    rgba(20, 13, 7, 0) 40%,
    rgba(20, 13, 7, 0) 58%,
    rgba(20, 13, 7, 0.78) 100%
  );
  pointer-events: none;
}
.page-long .hero main {
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.hero .logo {
  width: 64px;
  height: 64px;
}
.hero h1 {
  margin-top: 12px;
  font-size: 36px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.hero .tagline {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.hero .badges {
  margin-top: 0;
}
.hero .note {
  color: rgba(255, 255, 255, 0.8);
}
.hero + .shots {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .page-long .hero {
    min-height: min(calc(100svh - 36px), 860px);
    padding: 56px 24px 44px;
  }
  .hero-photo img {
    object-position: 50% 30%;
  }
  .hero::after {
    background: linear-gradient(
      to bottom,
      rgba(20, 13, 7, 0) 40%,
      rgba(20, 13, 7, 0.55) 64%,
      rgba(20, 13, 7, 0.86) 100%
    );
  }
  .page-long .hero main {
    max-width: 560px;
    justify-content: flex-end;
    gap: 28px;
  }
  /* 가로 사진은 가운데에 사람이 서 있어 큰 로고가 그 몸 위에 얹힌다 · 로고를 이름 옆에 붙여 블록을 낮춘다 */
  .hero-brand {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 14px;
  }
  .hero .logo {
    width: 52px;
    height: 52px;
  }
  .hero h1 {
    margin-top: 0;
    font-size: 44px;
  }
  .hero .tagline {
    grid-column: 1 / -1;
    margin-top: 10px;
    font-size: 17px;
  }
  .hero .tagline br {
    display: none;
  }
  .hero .badges {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
  }
  .hero + .shots {
    margin-top: 44px;
  }
}

/*
  App Store 스크린샷을 그대로 쓴다 · 광고에서 본 말과 스토어에서 볼 말이 같아야 한다.
  이미지에 헤드라인이 들어 있어 따로 캡션을 달지 않고, 같은 문장을 alt 에 둔다.
  휴대폰에선 화면 끝까지 번지는 가로 스크롤, 넓은 화면에선 네 장을 한 줄로 늘어놓는다.
*/
.shots {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-top: 44px;
}
.shot-row {
  list-style: none;
  display: flex;
  gap: 12px;
  /* body 좌우 여백(24px)만큼 밖으로 번져 화면 끝까지 스크롤된다 */
  margin: 0 -24px;
  padding: 4px 24px 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shot-row::-webkit-scrollbar {
  display: none;
}
.shot-row li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.shot-row img {
  display: block;
  width: 220px;
  height: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(74, 52, 21, 0.12);
}
@media (min-width: 960px) {
  .shot-row {
    justify-content: center;
    margin: 0;
    padding: 4px 0 18px;
    overflow: visible;
  }
}

.private {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-top: 32px;
  padding: 22px 22px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.6);
  text-align: left;
}
.private svg {
  width: 22px;
  height: 22px;
  display: block;
  color: rgba(74, 52, 21, 0.75);
}
.private h2 {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.private p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(74, 52, 21, 0.72);
}

.cta {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-top: 44px;
}
.cta h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cta p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(74, 52, 21, 0.72);
}
.cta .badges {
  margin-top: 20px;
}
/* 법적 문서가 아직 한국어뿐이라 알린다(영어판은 CHMO-888 B) */
.legal .legal-lang {
  margin-left: 4px;
  opacity: 0.8;
}
.page-long footer {
  position: relative;
  margin-top: 40px;
}