/* 랜딩페이지 전용. **`style.css` 와 섞지 않는다.**
 *
 * 나머지 다섯 쪽(개인정보·문의, 그리고 그 영문판과 영문 첫 화면)이 아직 옛 클래스를
 * 쓰고 있고, `.hero` 가 양쪽에 다 있어 **한 파일에 합치면 그쪽이 깨진다**(2026-10-30 확인).
 *
 * **Hello Weather 의 히어로 구조를 그대로 가져왔다.** 눈대중이 아니라 그쪽 CSS 를 읽고
 * 1440px 에서의 실제 값을 옮겼다 — 헤드라인 74px·line-height 1, 로고 글자 25.6px/500,
 * 폰 최대 28rem. 그중 **line-height 1 이 그 화면의 인상을 만든다.**
 */

:root {
  --ink: #1e243c;
  --ink-light: #39415e;
  --grey: #577181;
  --purple: #7708fd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background:
    radial-gradient(1200px 520px at 76% -8%, #fff 0%, rgba(255,255,255,0) 58%),
    radial-gradient(900px 440px at 14% 6%, rgba(255,255,255,.86) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(170deg, #BBD8EE 0%, #D8E9F5 36%, #EEF5FA 70%, #FEFEFE 100%);
  background-attachment: fixed;
}

a { color: var(--ink); text-decoration: none; transition: ease-in-out .2s; }
a:hover { color: var(--purple); }

/* ── 네비 ─────────────────────────────────────── */

.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto; padding: 44px 40px 0;
}
.site-logo { display: flex; align-items: center; gap: .5em; color: var(--grey); }
.site-logo img {
  width: 56px; height: 56px; border-radius: 13px; object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(30,30,30,.1));
}
.site-logo p { margin: .5rem 0; font-size: 25.6px; font-weight: 500; color: var(--grey); }
.site-menu {
  display: flex; align-items: center; gap: 2rem;
  margin: 0; padding: 0; list-style: none;
  font-size: 25.6px; font-weight: 500;
}
.site-menu a { color: var(--grey); }

/* ── 히어로 ───────────────────────────────────── */

.hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 88px; max-width: 1200px; margin: 0 auto; padding: 84px 40px 104px;
}
.hero__phone { order: 1; flex: 0 1 25rem; min-width: 260px; margin: 0 auto; }
.hero__content { order: 2; flex: 999 1 420px; min-width: 300px; width: 60%; }

.phone {
  padding: 11px; border-radius: 46px; background: #10151C;
  box-shadow: 0 34px 72px rgba(30,36,60,.30), 0 3px 10px rgba(30,36,60,.14);
}
.phone__screen { border-radius: 35px; overflow: hidden; background: #173352; }
.phone__screen img { display: block; width: 100%; height: auto; }

/* **상태바는 그려서 얹는다.** 기기 스크린샷의 상태바에는 알림 아이콘과 무음·방해금지
 * 표시가 섞여 들어오는데, 삼성 One UI 가 adb 데모 모드를 무시해 끌 수가 없었다. */
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 26px 7px; color: #fff;
}
.statusbar__time { font-size: 14px; font-weight: 500; letter-spacing: .2px; }
.statusbar__icons { display: flex; align-items: center; gap: 7px; }

.hero__headline {
  margin: .5rem 0 1rem;
  font-size: clamp(2rem, calc(3.5vw + 1.5rem), 74px);
  font-weight: 700; line-height: 1; letter-spacing: -2.8px;
  text-wrap: pretty;
}
.hero__copy { max-width: 40rem; }
.byline { margin: 1em 0; font-size: 16px; line-height: 1.7; }

.hero__cta { display: flex; align-items: center; gap: .5em; padding-top: 1rem; flex-wrap: wrap; }
.store-button {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 18px; border-radius: 10px;
  background: #000; color: #fff; min-height: 44px;
}
.store-button:hover { color: #fff; }
.store-button > span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-button__small { font-size: 10.5px; font-weight: 400; opacity: .86; }
.store-button__big { font-size: 18px; font-weight: 500; letter-spacing: -.2px; }
.cta-note { font-size: 14px; color: var(--grey); }

/* ── 기능 ─────────────────────────────────────── */

.features-wrap { background: #fff; }
.features {
  padding: 5% 40px 4%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px; max-width: 1200px; margin: 0 auto;
}
.feature { text-align: center; }
.feature img { width: 132px; height: 132px; object-fit: contain; margin-bottom: 14px; }
.feature h2 { margin: 0 0 10px; font-size: 24px; font-weight: 700; line-height: 1.25; }
.feature p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-light); }

/* ── 바닥 ─────────────────────────────────────── */

.site-footer {
  background: #fff; padding: 0 40px 56px; text-align: center;
  font-size: 14.5px; color: var(--grey);
}
.site-footer a { color: var(--grey); text-decoration: underline; }

/* ── 좁은 화면 ─────────────────────────────────── */

@media (max-width: 860px) {
  .site-nav { padding: 28px 24px 0; }
  .site-logo img { width: 44px; height: 44px; }
  .site-logo p, .site-menu { font-size: 18px; }
  .site-menu { gap: 1.1rem; }
  .hero { gap: 40px; padding: 48px 24px 64px; }
  .hero__phone { order: 2; }
  .hero__content { order: 1; width: 100%; text-align: center; }
  .hero__headline { letter-spacing: -1.2px; }
  .hero__copy { margin: 0 auto; }
  .hero__cta { justify-content: center; }
  .features { grid-template-columns: 1fr; gap: 40px; padding: 48px 24px; }
}