/*
 * 홈페이지 전용 스타일. index.html 만 읽는다.
 * 나머지 페이지(/privacy, /terms, /support, /contact, /account-deletion, /diagnostic)는
 * 여전히 공용 styles.css 를 쓴다. 여기 :root 토큰은 그쪽에 영향을 주지 않는다.
 * 시안 원본: mockup/product-flow-2026/ · 설계 근거: docs/02-design/product-flow-2026-spec.md
 *
 * 이전 홈과 다른 점:
 *  - 좌우 지그재그를 버리고 비대칭 그리드로 간다
 *  - 카드 그림자를 없애고 실선 한 줄로 구분한다
 *  - 중간 크기 글자를 없애 큰 제목과 아주 작은 라벨만 남긴다
 *  - 흰 화면이 이어지지 않도록 어두운 구간을 하나 넣는다
 */

:root {
  --ink: #0d1a18;
  --ink-2: #46564f;
  --ink-3: #8b9994;
  --line: #e3e8e5;
  --paper: #ffffff;
  --dark: #12302c;
  --dark-2: #9db2ad;
  --mint: #0f8f85;
  --mint-on-dark: #3fd9c8;
  --gutter: max(20px, calc((100vw - 1200px) / 2));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2 { margin: 0; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* 아주 작은 라벨. 중간 크기를 안 쓰는 대신 여기서 대비를 만든다.
   한글은 자간을 넓히면 띄어쓰기가 어긋나 보여서 라틴 문자처럼 트래킹하지 않는다. */
.tag {
  margin: 0 0 24px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ---------- 히어로 ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(32px, 5vw, 88px);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  max-width: 620px;
  padding: clamp(52px, 6.2vw, 88px) 0;
}

.hero h1 {
  font-size: clamp(44px, 6.2vw, 88px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.045em;
}

.hero-sub {
  max-width: 27em;
  margin-top: 26px;
  color: var(--ink-2);
  line-height: 1.78;
}

/* 좁은 화면에서 '치릅니다.' 한 마디만 다음 줄로 떨어지는 걸 막는다. */
.hero-sub .nb { white-space: nowrap; }

.hero-do {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 40px;
}

.badge { display: block; width: 172px; line-height: 0; }
.badge img { display: block; width: 100%; height: auto; }

.ghost {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
}

/* 그림자 없이 실선 한 줄만 두고, 히어로 아래 경계선에 걸쳐 잘리게 한다.
   이미지는 보여줄 구간만 잘라 넣는다 — CSS로 가리면 아이 이름이 파일에 남는다. */
.hero-shot {
  align-self: end;
  width: clamp(280px, 33vw, 420px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: #fff;
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 사실 한 줄 ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.facts li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 22px 0 22px 26px;
  border-left: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
}

.facts li:first-child { padding-left: var(--gutter); border-left: 0; }

.facts b {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 이용 방법 3단계 ---------- */

/* 결과(41→12)를 보여주기 전에, 어떻게 돌아가는지를 먼저 설명한다.
   번호 원 + 제목 + 한 줄. 넓은 화면은 가로 3단, 좁아지면 세로로 쌓는다. */
.howto {
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.howto-head { margin-bottom: clamp(36px, 4.5vw, 56px); }

.howto-head h2 {
  margin-top: 14px;
  font-size: clamp(28px, 3.1vw, 42px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.04em;
}

.howto-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.howto-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 20px;
  border: 1.5px solid var(--mint);
  border-radius: 50%;
  color: var(--mint);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.howto-step h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 800;
  letter-spacing: -.03em;
}

.howto-step p {
  max-width: 22em;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---------- 어두운 구간 ---------- */

.rank {
  padding: clamp(76px, 9vw, 132px) var(--gutter);
  color: #eef5f3;
  background: var(--dark);
}

/* 카드 원본이 469px이라 그보다 넓은 열에 깔면 앱 UI가 확대돼 보인다. */
.rank-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 469px;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

/* 단위가 없으면 41·12를 정답률로 읽는다. */
.huge .unit {
  display: block;
  margin-bottom: 12px;
  color: var(--mint-on-dark);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: 0;
}

.huge .pair {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  font-size: clamp(54px, 9.4vw, 124px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

.huge .from { color: #6f837d; }
.huge .to { color: var(--mint-on-dark); font-weight: 800; }
.huge i {
  margin-left: .03em;
  font-style: normal;
  font-size: .4em;
  letter-spacing: 0;
}

/* 막대만 두면 41→12가 내려간 걸로 읽힌다. */
.huge em {
  position: relative;
  flex: none;
  width: clamp(38px, 4.6vw, 74px);
  height: 2px;
  background: #3f5a55;
}

.huge em::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: clamp(9px, 1.1vw, 15px);
  height: clamp(9px, 1.1vw, 15px);
  border-top: 2px solid #3f5a55;
  border-right: 2px solid #3f5a55;
  transform: translateY(-50%) rotate(45deg);
}

/* 화살표가 aria-hidden이라, 조사를 넣어야 "41%에서 12%로"로 읽힌다. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* <br>로 고정하면 좁은 폭에서 두어 글자만 남는 줄이 생긴다. */
.rank-say {
  max-width: 34em;
  margin-top: 30px;
  color: var(--dark-2);
}

.rank-say b {
  color: #eef5f3;
  font-weight: 600;
}

.rank-shot { margin: 0; }

/* ── 앱 카드 재현 ─────────────────────────────────────────────────
   앱 소스(ranking_screen.dart _GrowthCard, test_result_screen.dart
   _InsightBox, app_theme.dart AppColors)의 값을 웹 크기로 옮긴 것.
   스크린샷이 아니라 실제 글자라 확대해도 안 뭉개진다.
   앱은 폭 330에 맞춘 치수라 웹에서 그대로 쓰면 잔글씨가 안 읽힌다.
   그래서 작은 것들은 비례보다 조금 더 키웠다. */
.appcard {
  background: #fff;
  border-radius: 26px;
  padding: 22px 28px 20px;
  font-family: Pretendard, system-ui, sans-serif;
}

.ac-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ac-title { font-size: 24px; font-weight: 800; color: #191F28; letter-spacing: -.02em; }

.ac-pill {
  flex: none;
  background: #E8F7F6;
  color: #0F8F95;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 16px;
  font-weight: 700;
}

.ac-sub { margin: 5px 0 0; font-size: 17px; font-weight: 500; color: #8B95A1; }

.ac-chart { display: block; width: 100%; height: auto; margin-top: 12px; }

/* SVG 안 글자도 뷰박스와 같이 커진다 */
.ac-val text, .ac-mon text, .ac-fix text { text-anchor: middle; font-weight: 700; }
.ac-val text, .ac-mon text { font-size: 10.5px; fill: #6B7280; }
.ac-fix text { font-size: 9.5px; fill: #8B95A1; }

.ac-note {
  margin: 12px 0 0;
  background: #F2F8F6;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #0F8F95;
  letter-spacing: -.01em;
}

.insight { border-radius: 18px; padding: 18px 20px; }
.insight--good { background: #F0F8F8; }
.insight--gap  { background: #FFF1E8; }

.in-top { display: flex; align-items: center; gap: 10px; margin: 0; }
.in-top svg { flex: none; width: 26px; height: 26px; }
.in-top span { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.insight--good .in-top svg { fill: #0F8F95; }
.insight--good .in-top span { color: #0F8F95; }
.insight--gap .in-top svg { fill: #FF6B2C; }
.insight--gap .in-top span { color: #FF6B2C; }

.in-body { margin: 10px 0 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: #191F28; }

.rank-shot figcaption,
.split-shots figcaption {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: .01em;
}

.rank-shot figcaption { color: #93a7a2; }

/* ---------- 강점·보완점 구간 ---------- */

/* 글 왼쪽·카드 오른쪽 2열. 위 다크 구간과 구조는 같지만 밝은 배경에 작은
   카드라 무게가 전혀 달라 단조롭지 않다. 카드를 세로로 쌓아 글 높이와 맞춰,
   전에 오른쪽이 비어 보이던 걸 없앤다.
   흰 카드를 흰 배경에 두면 가장자리가 안 보여서 옅은 판을 깐다. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 469px);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(72px, 8vw, 112px) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: #eff5f3;
}

.split h2 {
  font-size: clamp(28px, 3.1vw, 42px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.04em;
}

.split-copy p:last-child {
  max-width: 30em;
  margin-top: 20px;
  color: var(--ink-2);
}

.split-shots { margin: 0; }

.split-shots .shots {
  display: grid;
  grid-template-columns: minmax(0, 469px);
  gap: 16px;
}

/* ---------- 진단테스트 ---------- */

.try {
  padding: clamp(52px, 6vw, 84px) var(--gutter);
  border-bottom: 1px solid var(--line);
}

/* 넓은 화면에서 마스코트와 버튼이 양끝으로 벌어져 가운데가 비지 않도록,
   세 요소를 가운데로 뭉친다. 글이 늘어나 버튼을 밀지 않게 flex-grow도 끈다. */
.try-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  max-width: 940px;
  margin: 0 auto;
}

.try .momo { flex: none; width: 84px; height: auto; }

.try-copy { flex: 0 1 auto; }

.try h2 {
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.04em;
}

.try-copy p { margin-top: 10px; color: var(--ink-2); }

.go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* ---------- 블로그 한 줄 ---------- */

/* 앞뒤 구간과 모양이 겹치지 않도록 제목 없이 한 줄로만 둔다. */
/* 블로그 안내는 옛날에 자투리 띠 섹션이었는데, 무게에 비해 자리를 차지해
   푸터로 내렸다. .ftr-blog 스타일은 chrome.css(공용 푸터)에 있다. */

/* ---------- 다운로드 ---------- */

/* 페이지의 마지막 칸이다. 앞의 진단테스트 구간과 같은 가로 배치로 두면
   같은 것이 두 번 나온 것처럼 보여서, 가운데로 모아 끝맺음을 만든다. */
.get {
  padding: clamp(76px, 9vw, 124px) var(--gutter);
  text-align: center;
}

.get-in {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.get h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.04em;
}

.get-in p {
  max-width: 30em;
  margin-top: 18px;
  color: var(--ink-2);
}

/* 앵커 문장은 한 단계 뒤로 빼서, 뒤따르는 0원이 두드러지게 한다. */
.get-anchor {
  color: var(--ink-3);
  font-size: .94em;
}

.get-in p + p { margin-top: 6px; }

/* 결론이 두 줄로 갈리면 힘이 빠진다. 한 덩어리로 붙여 둔다. */
.get-in p b { color: var(--ink); font-weight: 700; white-space: nowrap; }

.get .badge { margin-top: 34px; }

/* ---------- 모션 ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
  }

  .js .reveal.in { opacity: 1; transform: none; }

  .hdr-cta, .go, .hdr-in nav a { transition: color .18s ease, background-color .18s ease; }
}

/* ---------- 태블릿 ---------- */

@media (max-width: 900px) {
  :root { --gutter: 20px; }

  .hero {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-copy { padding-bottom: 40px; }

  .hero-shot {
    width: min(340px, 100%);
    margin: 0 auto;
  }

  .facts { grid-template-columns: repeat(2, 1fr); }

  .facts li {
    padding-left: 20px;
    border-top: 1px solid var(--line);
  }

  .facts li:nth-child(odd) { padding-left: var(--gutter); border-left: 0; }
  .facts li:nth-child(-n+2) { border-top: 0; }

  .rank-in { grid-template-columns: 1fr; }

  .rank-shot {
    width: 100%;
    max-width: 469px;
  }
  .rank-say { margin-bottom: 38px; }

  .split { grid-template-columns: 1fr; }
  .split-copy { max-width: 40em; }
  .split-shots { margin-top: clamp(32px, 5vw, 48px); }
  .split-shots .shots { max-width: 469px; }

  /* 좁아지면 3단이 눌리니 세로로 쌓고, 번호는 글 왼쪽으로 뺀다. */
  .howto-steps { grid-template-columns: 1fr; gap: 28px; }
  .howto-step { display: flex; align-items: flex-start; gap: 16px; }
  .howto-n { flex: none; margin-bottom: 0; }

  .try-in { flex-wrap: wrap; }
  .try .momo { width: 66px; }
  .go { width: 100%; justify-content: space-between; }
}

/* ---------- 모바일 ---------- */

@media (max-width: 560px) {
  body { font-size: 15px; }

  .hero h1 { letter-spacing: -.055em; }

  .facts { grid-template-columns: 1fr; }

  .facts li {
    padding-left: var(--gutter);
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .facts li:first-child { border-top: 0; }

  .huge { gap: 12px; }
  .try-copy { flex: 1 1 100%; }
}