/* 한 장짜리 사이트다. 프레임워크를 붙이지 않는다 — 이 파일이 전부다.

   **색은 앱의 토큰에서 그대로 가져온다**(`ui/theme/Color.kt`). 전에는 아이콘에서 눈으로
   뽑은 근사값이었다(노랑 #FFC857, 흰 바탕 #FFFFFF). 앱에 실제 토큰이 생겼으므로
   짐작을 지우고 같은 값을 쓴다 — 앱과 사이트가 같은 제품으로 읽혀야 한다.

   **대비는 재서 적었다.** 주 독자가 40대 이상이고 노안이 그때 시작된다. 아래 비율은
   WCAG 공식으로 계산한 값이다. 새 조합을 넣을 때는 반드시 같이 재서 적는다. */
:root {
  --ink: #1E2340;         /* 종이 위 13.4:1 */
  --muted: #4A4F6B;       /* 종이 위 7.0:1 — 본문 기준을 넘으므로 보조 문구에 써도 된다 */
  --line: #E3E1DC;
  --bg: #F4EFE6;          /* 종이. 흰색이 아니다 */
  --surface: #FFFCF6;     /* 카드 */
  --accent: #3B5BA9;      /* 링크. 종이 위 5.6:1.
                             앱의 #5B8DEF 는 2.8:1 이라 글자로 못 쓴다 — 칠 전용이다 */
  --gold: #F2B544;        /* 어두운 히어로 위 6.4:1 — 거기서는 글자로 써도 된다.
                             **종이 위에서는 1.6:1 이라 칠 전용이다.** 밝은 면의 글자에
                             쓰지 않는다 */
}
@media (prefers-color-scheme: dark) {
  /* 어두운 판은 잠금화면과 같은 색이다. 거기가 이 앱의 얼굴이다. */
  :root { --ink:#FFFFFF; --muted:#B3C2D1; --line:#24364A; --bg:#0D1B2A;
          --surface:#132742; --accent:#BFE3F7; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR",
        "Hiragino Sans", "Microsoft JhengHei", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* 한국어는 아무 글자 사이에서나 줄이 바뀐다. 그대로 두면 제목이 낱말 한가운데서
     끊긴다("잠금화 / 면"). 띄어쓰기에서만 끊기게 한다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---- 글 페이지(개인정보처리방침·문의)의 골격. 좁은 한 단이다 ---- */
.wrap { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
header { margin-bottom: 3rem; }
h1 { font-size: 1.9rem; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 .4rem; }
.tagline { color: var(--muted); margin: 0; }
h2 { font-size: 1.15rem; font-weight: 650; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1rem; font-weight: 650; margin: 1.75rem 0 .5rem; }
p, li { color: var(--ink); }
.muted { color: var(--muted); }
a { color: var(--accent); }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .94rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 650; }
code { font: .9em ui-monospace, SFMono-Regular, Menlo, monospace;
       background: rgba(127,127,127,.12); padding: .1em .35em; border-radius: 3px; }
nav.lang { font-size: .9rem; margin-bottom: 2rem; }
nav.lang a { margin-right: .75rem; }
nav.lang strong { margin-right: .75rem; }  /* 없으면 「한국어English」로 붙는다 */
footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
         font-size: .9rem; color: var(--muted); }
footer a { margin-right: 1rem; }
.updated { font-size: .9rem; color: var(--muted); margin-top: -.25rem; }

/* 글 페이지 맨 위의 집으로 가는 줄. 심사자가 방침만 보고 나가지 않게 한다 */
.crumb { display: flex; align-items: center; gap: .5rem; font-weight: 650;
         text-decoration: none; color: var(--ink); }
.crumb svg { display: block; width: 24px; height: 24px; flex: none; }
nav.lang.row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
nav.lang.row a:last-child, nav.lang.row strong:last-child { margin-right: 0; }

/* ---- 여기서부터 첫 화면(index) 전용이다 ---- */

/* 히어로는 라이트든 다크든 네이비다. 앱 아이콘과 같은 바탕이라
   첫 화면에서 "이 앱" 이라는 인상이 먼저 선다. */
.hero {
  /* 앱의 LockScreenBrush 와 같은 3단이다. 가운데 색이 없으면 띠가 보인다. */
  background: linear-gradient(155deg, #1B3A5C 0%, #132742 45%, #0D1B2A 100%);
  color: #FFFFFF;
  padding: 1.75rem 1.25rem 3.5rem;
}
.hero a { color: var(--gold); }
.hero-top { max-width: 60rem; margin: 0 auto 3rem; display: flex;
            align-items: center; justify-content: space-between; gap: 1rem; }
.hero .brand { display: flex; align-items: center; gap: .55rem; color: #FFFFFF;
              font-weight: 650; letter-spacing: -.01em; margin: 0; }
.hero .brand svg { display: block; width: 30px; height: 30px; flex: none; }
.hero nav.lang { margin: 0; white-space: nowrap; }
.hero nav.lang a, .hero nav.lang strong { margin-left: .75rem; margin-right: 0; }
.hero nav.lang strong { color: #FFFFFF; font-weight: 650; }

.hero-grid {
  max-width: 60rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 3rem; align-items: center;
}
.hero h1 {
  font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1.32;
  font-weight: 700; letter-spacing: -.03em; margin: 0 0 1rem;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.lede { color: rgba(255,255,255,.8); margin: 0 0 1.75rem; max-width: 30rem; }

/* 프라이버시 문구를 히어로 안까지 끌어올린다 — 2026 년에 이건 곧 신뢰 신호다(#49).
   아래로 내리면 스크롤하지 않는 심사자와 사용자에게는 없는 것이나 같다. */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
         padding: 0; margin: 0 0 1.75rem; }
.chips li { margin: 0; font-size: .85rem; color: #dce6f0; line-height: 1.5;
            border: 1px solid rgba(255,200,87,.45); border-radius: 999px;
            padding: .3rem .8rem; background: rgba(255,200,87,.08); }
.status { display: inline-flex; align-items: center; gap: .5rem;
          font-size: .88rem; color: rgba(255,255,255,.8); margin: 0; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%;
                  background: var(--gold); flex: none; }

/* 스크린샷 자리다. **아직 이미지가 없다(#21).** 비어 있어도 모양이 무너지지 않도록
   aspect-ratio 로 높이를 잡아 둔다. 이미지가 생기면 .shot 안에 <img> 를 넣으면 끝이다. */
.shotwrap { justify-self: center; text-align: center; margin: 0; }
.shot {
  width: min(230px, 70vw); aspect-ratio: 9 / 19.5; margin: 0 auto;
  border: 1px solid rgba(255,255,255,.22); border-radius: 30px;
  background: linear-gradient(170deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  display: grid; place-items: center; overflow: hidden; position: relative;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot::before {  /* 수화기 자리. 이 선 하나로 빈 상자가 폰으로 읽힌다 */
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22);
}
.shot svg { width: 60px; height: 60px; opacity: .28; }
.shotwrap figcaption { font-size: .8rem; color: #93a7ba; margin-top: .9rem; }

/* ---- 본문 ---- */
main { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
main section { margin: 3.5rem 0; }
main h2 { font-size: 1.35rem; margin: 0 0 .4rem; letter-spacing: -.02em; }
.sub { color: var(--muted); margin: 0 0 1.5rem; }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: 14px; padding: 1.1rem 1.2rem; }
.card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.card p { margin: 0; font-size: .94rem; color: var(--muted); line-height: 1.7; }

/* 프라이버시 카드에만 노랑 띠를 세운다. 신뢰 문단이라 눈에 먼저 걸려야 한다 */
.privacy .card { border-left: 3px solid var(--gold); }

.note { font-size: .92rem; color: var(--muted); margin-top: 1.25rem; }
main footer { max-width: 60rem; margin: 4rem auto 0; padding: 1.5rem 1.25rem 4rem; }

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero-top { margin-bottom: 2.25rem; }
  .cards { grid-template-columns: 1fr; }
  .lede { max-width: none; }
  /* 좁은 화면에서 폰 자리를 줄인다. 9:19.5 는 폭이 조금만 커져도 세로가 크게 늘어나는데,
     지금은 그 안이 비어 있어 스크롤만 길어진다. 실제 스크린샷이 들어오면 다시 본다 */
  .shot { width: min(200px, 54vw); }
  main section { margin: 2.75rem 0; }
}