/* daypoint.co.kr 첫 페이지 (결정 446) — 글은 scripts/web/build-home.py가 만든 web/index.html. 안내 페이지(결정 448)도 이 파일 + pages.css
   색: 앱과 같음 (첫 화면 지도 = A안 "아침 공원", src/welcome/palette.ts). 제목 = DP Title(SUIT ExtraBold에서 쓰는 글자만, OFL 예약 이름 때문에 다른 이름)
   보라·분홍 그라데이션·반짝이·빛 번짐 없음. 움직임은 CSS만(스크립트 없음 — web/_headers CSP), "움직임 줄이기"면 멈춘 그림 */
@font-face { font-family: 'DP Title'; font-weight: 800; font-display: swap; src: url('/assets/fonts/dptitle-800.woff2') format('woff2'); }

:root {
  --m-bg: #F5FAF7; --m-park: #DDF1E4; --m-water: #D6EBFA; --m-street: #D3DCE6; --m-line: #226EB4; --m-paint: #2EAF9F;
  --stamp-ink: #13274E; --stamp-ring: #FFFFFF;
  --btn-bg: #172c4f; --btn-text: #ffffff;
  --title: 'DP Title', 'DP Sans', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --m-bg: #0B0F17; --m-park: #12221D; --m-water: #0F1D2B; --m-street: #222A39; --m-line: #6AA9E9; --m-paint: #34B8A6;
    --stamp-ink: #13274E; --stamp-ring: #0B0F17;
    --btn-bg: #e8edf5; --btn-text: #0f1a2e;
  }
}

body.home { background: var(--bg); }

/* ── 첫 화면 ───────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--m-bg);
}
/* 휴대폰: 위에 지도(걸어간 선·스탬프가 다 보이게), 아래에 글 */
.hero .map { position: relative; width: 100%; height: 46vh; height: 46svh; min-height: 280px; max-height: 460px; display: block; }
.m-bg { fill: var(--m-bg); }
.m-park { fill: var(--m-park); }
.m-water { fill: var(--m-water); }
.m-street { fill: none; stroke: var(--m-street); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.m-paint { fill: none; stroke: var(--m-paint); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.m-line { fill: none; stroke: var(--m-line); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.stamp-ring { stroke: var(--stamp-ring); stroke-width: 2.4; }
.stamp-ink { stroke: var(--stamp-ink); stroke-linecap: round; stroke-linejoin: round; }
.stamp-inner { stroke-width: 1.6; opacity: .35; }
.stamp-check { stroke-width: 3.6; }

/* 걷고(선이 그려짐) → 칠하고(뒤에 청록 길) → 모으고(스탬프가 톡) — 8초마다 다시 */
.m-line, .m-paint { stroke-dasharray: 860; stroke-dashoffset: 860; }
.m-line { animation: draw 8s cubic-bezier(.45, .05, .35, 1) infinite; }
.m-paint { animation: draw 8s cubic-bezier(.45, .05, .35, 1) .35s infinite; }
@keyframes draw {
  0%, 6% { stroke-dashoffset: 860; opacity: 1; }
  52%, 86% { stroke-dashoffset: 0; opacity: 1; }
  94% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 860; opacity: 0; }
}
.m-paint { animation-name: paint; }
@keyframes paint {
  0%, 6% { stroke-dashoffset: 860; opacity: .55; }
  52%, 86% { stroke-dashoffset: 0; opacity: .55; }
  94% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 860; opacity: 0; }
}
.stamp .pop { transform-box: fill-box; transform-origin: center; opacity: 0; animation: 8s ease-out infinite; }
.s1 .pop { animation-name: stamp1; }
.s2 .pop { animation-name: stamp2; }
.s3 .pop { animation-name: stamp3; }
@keyframes stamp1 { 0%, 19% { opacity: 0; transform: scale(.3); } 22% { opacity: 1; transform: scale(1.12); } 24%, 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1); } }
@keyframes stamp2 { 0%, 34% { opacity: 0; transform: scale(.3); } 37% { opacity: 1; transform: scale(1.12); } 39%, 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1); } }
@keyframes stamp3 { 0%, 50% { opacity: 0; transform: scale(.3); } 53% { opacity: 1; transform: scale(1.12); } 55%, 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .m-line, .m-paint { animation: none; stroke-dashoffset: 0; }
  .stamp .pop { animation: none; opacity: 1; transform: none; }
}

/* 글: 아래쪽, 지도 위로 바탕색이 서서히 덮어 글이 또렷하게 (한 가지 색 — 빛 번짐 아님) */
.hero-in {
  position: relative;
  margin-top: -24px;
  padding: 32px 24px 40px;
  background: linear-gradient(180deg, transparent 0, var(--m-bg) 24px);
}
.hero .logo { display: block; width: 172px; height: auto; margin-bottom: 18px; }
.hero h1 { margin: 0; word-break: keep-all; font-family: var(--title); font-weight: 800; font-size: clamp(30px, 8.2vw, 52px); line-height: 1.18; letter-spacing: -0.02em; color: var(--navy); }
.hero .lead { margin: 10px 0 24px; font-size: 17px; font-weight: 600; color: var(--muted); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  border-radius: 12px; background: var(--btn-bg); color: var(--btn-text); font-weight: 700; font-size: 17px; text-decoration: none;
}
.btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.map-note { position: absolute; right: 12px; top: 10px; margin: 0; font-size: 11px; color: var(--muted); opacity: .85; }

@media (min-width: 860px) {
  .hero { min-height: 640px; height: 88vh; justify-content: center; }
  .hero .map { position: absolute; top: 0; left: 34%; width: 66%; height: 100%; max-height: none; }
  .hero-in { width: 48%; max-width: 560px; margin-top: 0; padding: 0 0 0 max(48px, calc((100vw - 1080px) / 2)); background: none; }
  .hero::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 52%;
    background: linear-gradient(90deg, var(--m-bg) 70%, transparent);
  }
  .hero .logo { width: 206px; }
  .hero h1 { font-size: clamp(34px, 3.6vw, 46px); }
  .map-note { top: auto; bottom: 12px; }
}

/* ── 아래 칸들 ───────────────────────────── */
main section { max-width: 1080px; margin: 0 auto; padding: 56px 24px; }
main section + section { border-top: 1px solid var(--line); }
main h2 { margin: 0 0 18px; word-break: keep-all; font-family: var(--title); font-weight: 800; font-size: clamp(24px, 6vw, 32px); line-height: 1.25; letter-spacing: -0.015em; color: var(--navy); }
main h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--navy); }
main p { margin: 6px 0 0; color: var(--muted); line-height: 1.65; }
.sec-lead { max-width: 36em; margin: 0 0 24px; }

.ico { width: 44px; height: 44px; fill: none; stroke: var(--teal-text); stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: var(--teal-text); stroke: none; }
.ico .thin { stroke: var(--line); stroke-width: 24; }
.ico .thick { stroke-width: 56; }
.ico .faint { stroke-width: 20; opacity: .45; }
.ico-s { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--teal-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; }
.steps li .ico { grid-row: span 2; }
@media (min-width: 760px) { .steps ol { grid-template-columns: repeat(3, 1fr); } .steps li { grid-template-columns: 1fr; row-gap: 12px; } .steps li .ico { grid-row: auto; } }

.story { margin: 0 0 20px; padding: 2px 0 2px 16px; border-left: 3px solid var(--teal); max-width: 40em; }
.story figcaption { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); }
.story figcaption .ico-s { width: 18px; height: 18px; }
.story blockquote { margin: 6px 0 0; color: var(--text); line-height: 1.7; }

.d-row { display: grid; gap: 20px; align-items: center; }
@media (min-width: 760px) { .d-row { grid-template-columns: auto 1fr; gap: 36px; } }
.d-row p { margin: 0; max-width: 34em; }

.privacy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.privacy li { display: flex; gap: 14px; align-items: flex-start; }
.privacy li .ico-s { margin-top: 2px; }
@media (min-width: 760px) { .privacy ul { grid-template-columns: repeat(3, 1fr); } }

.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; max-width: 46em; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 600; color: var(--muted); }
.faq details[open] summary::after { content: '−'; }
.faq summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }

.apply { text-align: left; }
.apply .btn { margin-top: 18px; }
.pending { display: inline-block; margin-top: 18px !important; padding: 12px 18px; border: 1px dashed var(--line); border-radius: 12px; font-weight: 600; }

.foot p { margin: 4px 0; }