/* 페이지에 쓰인 글자만 담은 가변 폰트(build-font.sh로 생성).
   서드파티 요청 0, 한 파일 88KB — Google Fonts 경유(461KB) 대비 5배 가볍다.
   ⚠️ 카피를 고치면 build-font.sh를 다시 돌릴 것. 안 하면 새 글자만 폴백 서체로 섞여 렌더된다. */
@font-face {
  font-family: "Noto Sans KR";
  src: url(/assets/cog-kr.woff2) format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

/* 코그 가계부 소개 페이지
   색·서체는 앱의 디자인 시스템(Theme.swift)을 그대로 따른다.

   레이아웃 규칙 — .wrap은 '인라인 축'(좌우 거터)만, 섹션은 '블록 축'(상하 여백)만 잡는다.
   둘 다 padding 단축 속성을 쓰면 나중에 선언된 섹션이 거터를 통째로 덮어써 0이 된다. */

:root {
  --ink: #191F28;
  --gray-strong: #4E5968;
  --gray: #6B7480;          /* 4.74:1 — 14px 본문(요금 고지·푸터 링크)이 이 색이라 4.5:1을 넘겨야 한다 */
  --bg: #FFFFFF;
  --card: #F4F5F7;
  --divider: #CBD2D9;
  --blue: #3182F6;          /* 아웃라인·불릿 등 비텍스트(3:1) 전용 */
  --blue-text: #1B64DA;     /* 텍스트용(5.41:1) */
  --accent: #191F28;
  --on-accent: #FFFFFF;
  /* 프라이버시 밴드 — 라이트에선 반전 강조, 다크에선 '살짝 올라온 면'으로 번역한다.
     다크에서 그대로 반전하면 지면 대비 15.9:1의 발광 슬래브가 된다. */
  --band-bg: #191F28;
  --band-fg: #FFFFFF;

  /* 폰 목업 — 다크에서는 배경과 붙지 않게 베젤을 밝혀 실루엣을 남긴다. */
  --bezel: #111417;
  --bezel-edge: rgba(25, 31, 40, .06);
  --shadow: 0 24px 60px rgba(25, 31, 40, .12);

  /* Pro 태그 — 11~12px 작은 글자라 대비를 4.5:1 위로 올린다. */
  --focus-on-accent: #4C8DFF;
  --tag-bg: #1B64DA;
  --tag-fg: #FFFFFF;

  /* 수직 리듬 — 두 단계만 쓴다. 모바일은 낮게 시작해 720px부터 복원한다
     (390px에서 섹션 패딩만 전체 길이의 22%를 차지했다). */
  --sec: 64px;
  --sec-lg: 80px;

  --radius: 20px;
  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E8EAED;
    --gray-strong: #ADB5BD;
    --gray: #7C8590;
    --bg: #0D0F12;
    --card: #1A1D21;
    --divider: #454B54;
    --blue: #4C8DFF;
    --blue-text: #4C8DFF;   /* 다크에서는 6.00:1로 이미 충분 */
    --accent: #E8EAED;
    --on-accent: #191F28;
    --band-bg: #232833;   /* --card(#1A1D21)보다 위 — 강조 지면이 일반 지면보다 낮으면 위계가 뒤집힌다 */
    --band-fg: #E8EAED;

    --bezel: #4A515C;   /* 지면 대비 1.53:1은 실루엣이 안 보인다 — 2.4:1로 올린다 */
    --bezel-edge: rgba(255, 255, 255, .12);
    --shadow: 0 24px 60px rgba(0, 0, 0, .65);

    --focus-on-accent: #1B64DA;
    --tag-bg: #4C8DFF;
    --tag-fg: #0D0F12;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.68;
  word-break: keep-all;
}

@media (prefers-color-scheme: light) {
  body { -webkit-font-smoothing: antialiased; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 24px;
}

#main:focus { outline: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 16px; top: 16px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 10px;
}

/* 헤더 */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);                                    /* 폴백 — color-mix 미지원 시 투명해지는 걸 막는다 */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);       /* Safari 17까지는 접두사가 필요하다 */
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--divider);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 62px;   /* 텍스트 전용 확대에서 버튼이 헤더를 넘치지 않게 */
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; text-decoration: none; letter-spacing: -.01em;
}
.brand-icon { border-radius: 8px; flex-shrink: 0; }

@media (max-width: 359px) {
  /* 320px에서 브랜드+버튼 여유가 3.6px뿐이라 2줄로 접힌다. */
  .nav-inner .btn-sm { padding: 9px 11px; font-size: 13px; }
}

/* 버튼 */

.btn {
  display: inline-block;
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 700;
  border-radius: 14px; padding: 12px 20px;
  transition: opacity .18s ease, transform .18s ease;
}
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.985); }
.btn-sm { padding: 11px 14px; font-size: 14px; border-radius: 11px; }
.btn-lg { padding: 16px 28px; font-size: 17px; border-radius: 16px; }

:where(a, button):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* 공통 타이포 — 디스플레이 제목은 한 값으로 통일한다. */

.eyebrow {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  color: var(--gray);
}
.feature h2,
.privacy h2,
.learning h2,
.closing h2 {
  margin: 0 0 18px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 900; line-height: 1.32; letter-spacing: -.03em;
}
.section-title {
  margin: 0 0 36px;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 900; letter-spacing: -.02em;
  color: var(--ink);
}
.lead {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--gray-strong);
}

/* 히어로 */

.hero { padding-block: var(--sec-lg) 72px; }
.hero-inner {
  display: grid; gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}
.hero-copy { container-type: inline-size; }
.hero h1 {
  margin: 0 0 20px;
  /* 뷰포트(vw)가 아니라 컬럼(cqi) 기준 — 2단 전환 구간에서 제목이 3줄로 깨지지 않는다. */
  font-size: clamp(34px, 9vw, 40px);
  font-size: clamp(34px, 11cqi, 40px);
  font-weight: 900; line-height: 1.25; letter-spacing: -.03em;
}
.cta { margin-top: 32px; }
.cta-note { margin: 14px 0 0; font-size: 14px; color: var(--gray); line-height: 1.7; }

.phone {
  border: 12px solid var(--bezel);
  border-radius: 44px;
  overflow: hidden;
  background: var(--bezel);
  box-shadow: var(--shadow), 0 0 0 1px var(--bezel-edge);
  max-width: 320px;
  margin: 0 auto;
}
.phone img { border-radius: 32px; }
@media (prefers-color-scheme: dark) {
  /* 라이트 앱 화면이 어두운 지면 위에서 17:1로 튄다. 검은 그림자는 near-black 배경에서
     1.05:1이라 완충이 안 되므로, 광원 표현과 밝기 조정으로 대신한다. */
  .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 20px 50px -12px rgba(76,141,255,.25); }
  .phone img { filter: brightness(.88); }
}
.hero-shot { min-width: 0; }

/* 3가지 축 */

.pillars { padding-block: 72px; }
.pillar-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 28px;
  grid-template-columns: 1fr;
}
.pillar-list h2 {
  margin: 0 0 8px;
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
}
.pillar-list p { margin: 0; color: var(--gray-strong); }

/* 기능 섹션 */

.feature { padding-block: var(--sec); }
.feature--alt { background: var(--card); }
.feature-inner {
  display: grid; gap: 44px;
  grid-template-columns: 1fr;
  align-items: center;
}
/* 섹션 스코프 요소 선택자로 컴포넌트 클래스를 덮지 않는다 —
   .feature p (0,1,1)가 .eyebrow (0,1,0)를 이겨 아이브로우가 섹션마다 달라 보였다. */
.feature-copy > p { margin: 0; color: var(--gray-strong); font-size: 17px; }
.feature-shot { min-width: 0; }

/* 두 대 겹쳐 놓기 — 좁은 화면에서는 앞의 한 대만 보여 스크롤을 아낀다. */
.feature-shot--pair .phone--back { display: none; }

.checks {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: 10px;
}
.checks li { position: relative; padding-left: 26px; color: var(--gray-strong); }
.checks li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
}

/* Pro 표시 */

.tag {
  display: inline-block; vertical-align: middle;
  margin-left: 6px; padding: 2px 9px;
  border-radius: 999px;
  background: var(--tag-bg); color: var(--tag-fg);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  line-height: 1.6;
}
.tag-inline { margin-left: 0; margin-top: 10px; }

/* 프라이버시 — 페이지에서 유일한 반전 지면.
   배경이 테마마다 뒤집히므로 포커스 색도 함께 뒤집어야 3:1이 유지된다. */
.privacy :where(a, button):focus-visible { outline-color: var(--focus-on-accent); }

.privacy {
  padding-block: var(--sec-lg);
  background: var(--band-bg); color: var(--band-fg);
  border-block: 1px solid var(--divider);
}
.privacy-inner { max-width: 780px; }
.privacy-inner > p { margin: 0; font-size: 17px; opacity: .82; }
.privacy-inner > .privacy-note { margin-top: 18px; font-size: 15px; opacity: .70; }

/* 추천 학습 */

.learning { padding-block: var(--sec-lg); }
.learning-inner { max-width: 820px; }
.learning-points {
  list-style: none; margin: 40px 0 0; padding: 0;
  counter-reset: lp;
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
.learning-points li {
  display: grid; gap: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}
.learning-points li::before {
  counter-increment: lp;
  content: counter(lp, decimal-leading-zero);
  font-size: 13px; font-weight: 900; letter-spacing: .06em;
  color: var(--blue-text);
}
.learning-points strong { font-weight: 700; }
.learning-points span { color: var(--gray-strong); font-size: 15px; }

/* 그 밖에 */

.more { padding-block: var(--sec); }
.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
  align-items: start;          /* 내용이 짧은 카드가 빈 공간을 끌고 다니지 않게 */
}
.grid li {
  background: var(--card);
  border-radius: var(--radius);
  padding: 26px;
}
.grid h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.grid p { margin: 0; color: var(--gray-strong); font-size: 15px; }

/* 받기 전에 */

.specs { padding-block: var(--sec); }
.spec-list { margin: 0; }
.spec-list > div {
  display: grid; gap: 4px;
  grid-template-columns: 1fr;
  padding: 18px 0;
  border-top: 1px solid var(--divider);
}
.spec-list > div:last-child { border-bottom: 1px solid var(--divider); }
.spec-list dt { font-weight: 700; }
.spec-list dd { margin: 0; color: var(--gray-strong); }

/* 마무리 */

.closing { padding-block: var(--sec-lg); text-align: center; }
.closing-icon { border-radius: 18px; margin: 0 auto 24px; }
.closing h2 { margin-bottom: 30px; }

/* 푸터 */

.footer {
  border-top: 1px solid var(--divider);
  padding-block: 30px;
  color: var(--gray);
  font-size: 14px;
}
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer p { margin: 0; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { padding-block: 10px; margin-block: -10px; }

/* 본문 문서(개인정보 처리방침 등) */

.doc { padding-block: 56px 88px; max-width: 760px; }
.doc h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4.4vw, 38px);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.3;
}
.doc .updated { margin: 0 0 40px; color: var(--gray); font-size: 14px; }
.doc h2 { margin: 40px 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.doc p, .doc li { color: var(--gray-strong); }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--ink); font-weight: 700; }


/* 보조 문구 — 기기 조건, 섹션 안내, 마무리 안전장치 */

/* 시각적으로 숨기되 스크린리더는 읽는 텍스트 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.feature-copy > .note {
  margin-top: 20px;
  font-size: 15px;
  color: var(--gray);
}
.section-note {
  margin: -20px 0 32px;
  color: var(--gray-strong);
  font-size: 15px;
}
.closing-note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--gray);
}
.desktop-only { display: none; }

/* 확신이 서는 지점에 놓는 인라인 CTA */

.feature-copy > .inline-cta {
  margin-top: 28px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.inline-cta span { font-size: 14px; color: var(--gray); }

/* 반전 지면 위 링크는 밑줄로 존재를 알린다(색 대비만으로는 부족). */
.privacy a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* 넓은 화면 */

@media (min-width: 720px) {
  .desktop-only { display: block; }
  /* iPad 세로(768·834)와 분할 화면이 모바일 레이아웃으로 떨어지지 않도록 720에서 전환한다. */
  .hero { padding-block: 128px 80px; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; gap: 56px; }
  .hero h1 { font-size: clamp(32px, 4.2vw, 48px); font-size: clamp(32px, 12.2cqi, 48px); }
  .pillars { padding-block: 72px; }
  .pillar-list { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .feature-inner { grid-template-columns: 1fr 1fr; gap: 56px; }
  .feature--alt .feature-copy { order: 2; }
  .feature--alt .feature-shot { order: 1; }
  .learning-points { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .spec-list > div { grid-template-columns: minmax(140px, 180px) minmax(0, 62ch); gap: 24px; }
  .phone { max-width: 340px; }

  /* 겹침은 grid로는 만들 수 없다 — 절대 위치로 앞뒤 관계를 실제로 만든다.
     단독 폰과 크기가 어긋나지 않도록 상한을 px로도 함께 건다. */
  .feature-shot--pair { position: relative; padding-bottom: 16%; }
  .feature-shot--pair .phone {
    position: relative; z-index: 2;
    max-width: min(340px, 76%); margin: 0;
  }
  .feature-shot--pair .phone--back {
    display: block; position: absolute;
    right: 0; top: 12%; z-index: 1;
    max-width: min(300px, 68%); margin: 0;
  }

  :root { --sec: 96px; --sec-lg: 120px; }
}

@media (min-width: 960px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .grid { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 1500px) {
  /* 대형 화면에서 좌우 여백이 400px씩 남고 폰이 상대적으로 작아 보인다. */
  :root { --wrap: 1280px; }
  .phone { max-width: 400px; }
  .feature-shot--pair .phone { max-width: min(400px, 76%); }
  .feature-shot--pair .phone--back { max-width: min(352px, 68%); }
}

/* 접근성 모드 — Windows 고대비와 대비 강화 요청 */

@media (forced-colors: active) {
  /* 강제 색 모드는 배경·그림자를 시스템 값으로 덮어쓴다.
     색으로만 그린 요소(불릿·배지·카드·버튼)는 테두리로 형태를 남겨야 의미가 산다. */
  .checks li::before { background: CanvasText; forced-color-adjust: none; }
  .tag { border: 1px solid; padding-inline: 8px; }
  .grid li, .feature--alt { border: 1px solid; }
  .btn { border: 1px solid; }
  .phone { border-color: CanvasText; }
  .privacy-inner > p, .privacy-inner > .privacy-note { opacity: 1; }
}

@media (prefers-contrast: more) {
  :root { --gray: #55606D; }
  .privacy-inner > p, .privacy-inner > .privacy-note { opacity: 1; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --gray: #A8B1BC; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}