/* 시니어이음 홈페이지(앱 소개) 전용 스타일
   🔴 style.css는 법적 고지 세 쪽이 함께 쓴다 — 홈페이지 모양은 이 파일에서만 바꾼다.
   방향: 무채색 바탕(#111 · #F9F9F9)에 강조색은 앱 초록 하나. 위계는 상자가 아니라 글자 크기와 여백으로 만든다.
   시니어 기준(style.css 머리와 같다): 가장 작은 글자 18px · 글자 대비 7:1 이상 · 얇은 굵기 안 씀 · 움직임 없음. */

:root {
  color-scheme: light dark;
  --bg: #f9f9f9;
  --paper: #ffffff;
  --ink: #111111;
  --muted: #4a4a4a;        /* #f9f9f9 위 약 8.4:1 — 연회색 본문은 쓰지 않는다 */
  --hair: #e2e2e2;
  --accent: #175019;       /* 앱 primary(seniorhub-app lib/design/theme.dart) — 강조색은 이것 하나 */
  --bezel: #111111;
  --shadow: 0 2.5rem 4rem -1.75rem rgba(17, 17, 17, 0.3);
  --shot-filter: none;
  --map-bg: #ededed;
  --map-road: #ffffff;
  --gutter: 1.5rem;
  --max: 72rem;
  --section: clamp(5rem, 14vw, 9rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --paper: #1a1a1a;
    --ink: #f9f9f9;
    --muted: #b8b8b8;
    --hair: #2c2c2c;
    --accent: #8fcb8b;     /* 같은 초록을 어두운 바탕에서 읽히게 밝힌 것 — 색은 여전히 하나 */
    --bezel: #2e2e2e;
    --shadow: 0 2.5rem 4rem -1.75rem rgba(0, 0, 0, 0.7);
    --shot-filter: brightness(0.88);  /* 앱 화면은 밝은 판뿐이라 어두운 바탕에서 눈부시지 않게 */
    --map-bg: #202020;
    --map-road: #313131;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", "Noto Sans KR", sans-serif;
  /* 본문 18px(기기 글자 크기 설정을 따라 커지게 rem) */
  font-size: 1.125rem;
  line-height: 1.75;
  word-break: keep-all;      /* 한글 단어 중간에서 안 끊기게 */
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, figure { margin: 0; }
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.nb { white-space: nowrap; }  /* 「받을 수 있어요」처럼 한 덩어리로 읽히는 말을 줄 끝에서 가르지 않는다 */
.q { white-space: nowrap; }   /* 「내 기록」 같은 짧은 단추 이름을 가운데서 가르지 않는다 */
/* 기기 기본 글자를 키운 사람(약 1.2배 이상)에게는 묶음을 푼다 — em 미디어 쿼리는 기본 글자 크기를 따른다.
   기본 16px에서는 304px 이하에서만 풀려 실제 휴대전화에서는 묶인 채다. */
@media (max-width: 19em) {
  .nb, .q { white-space: normal; }
}

.tone { background: var(--paper); }  /* 구획을 상자 없이 바탕 한 겹으로만 가른다 */

/* ── 머리 ── */
.top .wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 4.5rem;
}
.top img { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; }
.top .name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }

/* ── 첫 화면 ── */
.hero { padding: clamp(2.5rem, 8vw, 5.5rem) 0 var(--section); }
.hero .wrap {
  display: grid;
  gap: clamp(3rem, 8vw, 5rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 8vw, 4.75rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.lead {
  margin-top: 1.5rem;
  max-width: 26em;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.65;
  color: var(--muted);
}

/* 화면 사진 — 휴대전화 한 대 */
.phone { margin: 0 auto; width: min(78vw, 20rem); }
.phone img {
  border: 0.6rem solid var(--bezel);
  border-radius: 2.4rem;
  background: var(--paper);
  box-shadow: var(--shadow);
  filter: var(--shot-filter);
}

/* ── 기능 하나 = 한 구획 ── */
.feature { padding: var(--section) 0; }
.feature .wrap {
  display: grid;
  gap: clamp(3.5rem, 9vw, 6rem);
  align-items: center;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
  color: var(--accent);
  font-size: 1.125rem;
  font-weight: 700;
}
.kicker svg { flex: none; width: 1.5rem; height: 1.5rem; }

.feature h2, .stage h2, .more h2 {
  font-size: clamp(2rem, 5.6vw, 3.25rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.lines {
  list-style: none;
  margin-top: 2.25rem;
  padding: 0;
  max-width: 30em;
  display: grid;
  gap: 1.15rem;
  color: var(--muted);
}

/* 내 주변 — 직접 그린 지도 그림. 바탕·길은 순회색, 공원·내 위치·핀은 강조색 하나를 옅고 진하게만 쓴다.
   그림 안에는 글자를 두지 않는다 — 좁은 폭·큰 글자 설정에서 겹치거나 잘리지 않게(종류 이름은 위 문장에 있다). */
.map {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  aspect-ratio: 400 / 440;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid var(--hair);
}
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-bg { fill: var(--map-bg); }
.m-park { fill: var(--accent); fill-opacity: 0.12; }
.m-road path { fill: none; stroke: var(--map-road); stroke-width: 16; stroke-linecap: round; }
.m-road .m-wide { stroke-width: 22; }
.m-road .m-lane { stroke-width: 7; }
.m-halo { fill: var(--accent); fill-opacity: 0.22; }
.m-me { fill: var(--accent); stroke: var(--paper); stroke-width: 5; }
.m-pin path { fill: var(--accent); stroke: var(--paper); stroke-width: 3; stroke-linejoin: round; }
.m-pin circle { fill: var(--paper); }

/* ── 글자 크기 — 앱의 세 단계(기본 1.0 · 중간 1.5 · 크게 2.0)를 실제 글자로 ── */
.stage { padding: var(--section) 0; text-align: center; }
.stage .kicker { justify-content: center; }
.stage .lead { margin-left: auto; margin-right: auto; }
.scale {
  --base: min(2.25rem, 9vw);   /* 「기본」 한 글자 — 중간·크게는 앱과 같은 배율을 곱한다 · 큰 글자 설정에서도 폭을 넘지 않게 9vw로 막는다 */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(2rem, 7vw, 4.5rem);
  margin-top: clamp(3rem, 8vw, 4.5rem);
}
.scale figure { display: grid; justify-items: center; gap: 0.75rem; }
.scale span {
  font-size: calc(var(--base) * var(--f));
  font-weight: 800;
  line-height: 1;
}
.scale figcaption { color: var(--muted); }

/* ── 그 밖에도 ── */
.more { padding: var(--section) 0; }
.more .cols {
  display: grid;
  gap: 3rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.more h3 { margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 700; }
.rows { list-style: none; padding: 0; }
.rows li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 1rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--hair);
}
.rows svg { width: 1.5rem; height: 1.5rem; margin-top: 0.3rem; color: var(--accent); }
.rows strong { display: block; font-size: 1.25rem; }
.rows span.t { color: var(--muted); }

/* ── 꼬리 ── */
.foot { padding: 3rem 0 4.5rem; border-top: 1px solid var(--hair); color: var(--muted); }
.foot p + p { margin-top: 0.5rem; }

/* ── 넓은 화면 ── */
@media (min-width: 960px) {
  .hero .wrap { grid-template-columns: 1.15fr 0.85fr; }
  .phone { width: 21rem; }
  .feature .wrap { grid-template-columns: 1fr 1fr; }
  .feature.flip .wrap > :last-child { order: -1; }   /* 사진이 번갈아 왼쪽·오른쪽에 선다 */
  .lines { font-size: 1.25rem; }
  .scale { --base: 3rem; }
  .more .cols { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

@media print {
  .phone img { box-shadow: none; }
}