/* 소개 페이지의 모양.

   ── 왜 앱(React) 안이 아니라 정적 페이지인가
   검색엔진과 광고 심사자가 읽을 수 있어야 한다. 앱은 React가 그리므로 크롤러에게는
   빈 껍데기이고, 그러면 소개 페이지를 만드는 목적 절반이 사라진다. 약관·개인정보
   처리방침이 이미 같은 이유로 정적 페이지다.

   ── 왜 legal.css 를 같이 안 쓰나
   그쪽은 긴 글을 읽히려고 만든 모양이다(한 줄 폭이 좁고 제목이 작다). 여기는 그림을
   크게 보여 주고 눈을 끌어야 하는 자리라 셈이 다르다. 색만 같은 값을 쓴다.

   ── 인라인 style 을 안 쓰는 이유
   vercel.json 의 CSP 가 style-src 에 'self' 만 허용한다. 파일로 빼야 먹는다. */

/* 앱과 같은 글꼴을 쓴다. 파일은 이미 /fonts/ 로 서비스되고 있고(index.html 참고),
   약관 페이지는 이 선언이 없어 시스템 글꼴로 떨어진다 — 광고를 태우는 자리는
   앱과 같은 얼굴이어야 해서 여기만 불러 온다. */
@font-face { font-family:"Freesentation"; font-style:normal; font-weight:400;
  font-display:swap; src:url("/fonts/Freesentation-4Regular.woff2") format("woff2"); }
@font-face { font-family:"Freesentation"; font-style:normal; font-weight:600;
  font-display:swap; src:url("/fonts/Freesentation-6SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Freesentation"; font-style:normal; font-weight:700;
  font-display:swap; src:url("/fonts/Freesentation-7Bold.woff2") format("woff2"); }

:root {
  --ink: #E9EDF1; --ink2: #B4BEC8; --muted: #8A95A1; --rule: #2B323A;
  --paper: #14181C; --card: #1A1F25; --accent: #D9A544; --brand: #008A4F;
}
@media (prefers-color-scheme: light) {
  :root {
    --ink: #14181D; --ink2: #3E464F; --muted: #79838E; --rule: #E2E6E9;
    --paper: #FFFFFF; --card: #F7F8F9; --accent: #8A6A1E; --brand: #00693C;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Freesentation", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 880px; margin: 0 auto; padding: 0 22px 80px; }

a { color: var(--brand); }
strong { color: var(--ink); font-weight: 700; }
img { max-width: 100%; }

/* ── 첫 화면 ───────────────────────────────────────────────── */
.hero { text-align: center; padding: 64px 0 40px; }
/* 로고 원본은 흰 워드마크에 배경이 투명이다. 밝은 모드에서는 흰 종이에 묻혀
   아무것도 안 보인다(index.html의 파비콘 주석과 같은 사정). 투명한 곳은 그대로
   두고 흰 획만 검게 뒤집는다 — 그림을 한 장 더 만들지 않아도 된다. */
.hero img.logo { width: 260px; max-width: 70%; height: auto; }
@media (prefers-color-scheme: light) { .hero img.logo { filter: invert(1); } }
.hero h1 {
  margin: 18px 0 6px; font-size: 34px; line-height: 1.3; letter-spacing: -0.5px;
}
.hero .sub { margin: 0; color: var(--ink2); font-size: 18px; }

/* 단추. 누르는 곳이 하나뿐이어야 어디로 가야 할지 헷갈리지 않는다. */
.cta { margin-top: 28px; }
.btn {
  display: inline-block; padding: 13px 32px; border-radius: 10px;
  background: var(--brand); color: #fff; text-decoration: none;
  font-size: 17px; font-weight: 700;
}
.btn:hover { filter: brightness(1.08); }
.cta .note { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; }

/* ── 묶음 ─────────────────────────────────────────────────── */
section { margin-top: 56px; }
h2 {
  margin: 0 0 6px; font-size: 24px; letter-spacing: -0.4px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
h2 .tag {
  margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; vertical-align: 3px;
}
.tag.free { background: rgba(0,138,79,.16); color: var(--brand); }
.tag.pro  { background: rgba(217,165,68,.16); color: var(--accent); }
section > p.lead { margin: 14px 0 0; color: var(--ink2); }

/* ── 기능 한 칸 ───────────────────────────────────────────── */
.feat { margin-top: 30px; }
.feat h3 { margin: 0 0 4px; font-size: 18px; }
.feat p { margin: 0 0 12px; color: var(--ink2); font-size: 15px; }
/* 그림은 화면 폭에 맞춰 줄이되 테두리를 둘러 어디까지가 화면인지 보이게 한다 —
   배경과 같은 색이라 테두리가 없으면 그림이 허공에 떠 있는 것처럼 보인다. */
.feat img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 10px;
}

/* ── 요금 ─────────────────────────────────────────────────── */
.price {
  margin-top: 24px; padding: 26px; border: 1px solid var(--rule);
  border-radius: 12px; background: var(--card); text-align: center;
}
.price .won { font-size: 34px; font-weight: 800; letter-spacing: -1px; }
.price .won span { font-size: 17px; font-weight: 600; color: var(--muted); }
.price p { margin: 10px 0 0; color: var(--ink2); font-size: 15px; }

/* ── 바닥 ─────────────────────────────────────────────────── */
footer {
  margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 13.5px; line-height: 1.85;
}
footer a { color: var(--muted); }
footer .biz { margin-top: 14px; }
/* 면책은 작게 두되 읽을 수는 있어야 한다 — 광고 심사자가 찾는 것이기도 하다.
   처음에 선 색(--rule)을 그대로 썼더니 배경과 거의 같아 글자가 안 보였다. */
footer .disc { margin-top: 14px; font-size: 12.5px; color: #6B7480; }
@media (prefers-color-scheme: light) { footer .disc { color: #9AA3AC; } }

@media (max-width: 560px) {
  .hero { padding: 44px 0 30px; }
  .hero h1 { font-size: 27px; }
  .hero .sub { font-size: 16px; }
  h2 { font-size: 21px; }
}