/* 안내 글 · 안내 모음 · 움터의 약속 — site.css 토큰(색·모서리·간격) 위에 얹는다. 요소 규칙은 .page 안에만(소개 무대와 부딪히지 않게).
   첫 화면(index.html)에는 '많이 찾는 안내'(.home-guides) 몇 줄만 쓴다.
   숫자: DESIGN_PRINCIPLES 3장 — 폭 360 + 양옆 16 · 누르는 곳 44 · 글자는 rem · 밝게/어둡게는 토큰이 알아서(여기서 색을 새로 만들지 않는다).
   만드는 곳: scripts/site/build-guides.mjs (안내 글) · 움터의 약속은 손으로 쓴 쪽 */

/* 현재 위치(빵부스러기) · 갈래 꼬리표 */
.page .crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:0 4px; margin:4px 0 0; color:var(--sub); font-size:.8125rem; line-height:1.385; }
.crumbs a { display:inline-flex; align-items:center; min-height:var(--hit); font-weight:600; }
.crumbs [aria-current="page"] { display:inline-flex; align-items:center; min-height:var(--hit); }
.page .cat-row { margin:0; }
.page .guide h1 { margin-top:4px; font-size:1.5rem; line-height:1.3; }

/* 30초 답 — site.css 의 .glance 모양 그대로(연초록 상자), 날짜 줄만 더함 */
.answer .meta { margin:0 0 4px; }
.answer li, .page .read .answer li { margin:0 0 4px; }

/* 30초 답 바로 아래 앱 한 줄 (자리 answer) — 띄우는 창이 아니라 조용한 글 한 줄. 답 상자에 붙여 두고 누르는 곳은 44. 주소가 없을 때는 링크 없는 글 */
.page .guide .answer { margin-bottom:0; }
.page .app-line { margin:0 0 4px; }
.page .app-line a { display:inline-flex; align-items:center; min-height:var(--hit); font-size:.8125rem; line-height:1.385; }
.page .app-line.soon { padding:8px 0; color:var(--sub); font-size:.8125rem; line-height:1.385; }

/* 본문 — 제목은 글자 단계(1.25rem · 1rem), 문단은 읽기 줄 간격 */
.guide-body { margin-top:8px; }
.page .guide-body h2 { margin:24px 0 8px; font-size:1.25rem; line-height:1.3; font-weight:800; }
.page .guide-body h3 { margin:16px 0 4px; font-size:1rem; line-height:1.375; font-weight:700; }
.page .guide-body ul, .page .guide-body ol { margin:0 0 12px; padding-left:20px; }
.page .guide-body li { margin:0 0 4px; }
.page .guide-body p { margin:0 0 12px; }

/* 참고 상자( '> ' ) */
.page blockquote.note { margin:12px 0; padding:12px; background:var(--sunken); border-left:4px solid var(--brand); border-radius:var(--r-md); }
.page blockquote.note p { margin:0 0 8px; line-height:1.6; }
.page blockquote.note p:last-child { margin-bottom:0; }

/* 움터로 하면 — 읽다 멈추는 자리의 한 상자 */
.page .app-cta { margin:16px 0; padding:12px; background:var(--accent-soft); border:1px solid var(--line); border-radius:var(--r-md); }
.page .app-cta h2 { margin:0 0 4px; color:var(--accent-ink); font-size:1rem; line-height:1.375; font-weight:800; }
.page .app-cta p { margin:0 0 8px; line-height:1.6; }
.page .app-cta .cta-main { font-weight:600; }   /* 앱이 없는 사람이 얻는 것 한 문장 */
.page .app-cta .cta-detail { line-height:1.5; }   /* (선택) 어디서 어떻게 하는지 한 줄 — 13 보조 글자(.meta) */
.page .app-cta > :last-child { margin-bottom:0; }

/* /#watch — 첫 화면(.hero, position:relative) 맨 위 끝에 두는 보이지 않는 닻. 가운데 놓인 .hero-in 에 id 를 두면 주소로 올 때 164px 아래에서 시작해 씨앗 그림이 잘린다 */
.hero > .watch-anchor { position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; }

/* 앱 받기 — 공개 전에는 링크 없는 글 */
.page .store-soon { margin:8px 0 0; padding:10px 12px; border-radius:var(--r-md); background:var(--sunken); color:var(--sub); font-weight:700; font-size:.9375rem; text-align:center; }
.page .get-app { margin:16px 0 8px; }
.page .get-app > :first-child { margin-top:0; }

/* 출처 */
.page .sources h2 { margin-top:24px; }
.page .read .src-list { list-style:none; margin:0 0 8px; padding:0; }
.page .src-list li { margin:0; padding:4px 0; border-top:1px solid var(--line); }
.page .src-list li:first-child { border-top:0; }
.src-list a { display:flex; align-items:center; min-height:var(--hit); font-weight:700; }
.src-list .meta { display:block; margin-top:2px; }
.page .byline { margin-top:8px; }

/* 고친 내용 — 날짜 한 줄 + 한 줄 글, 최근 5개까지 */
.page .changelog h2 { margin-top:24px; }
.page .read .chg-list { list-style:none; margin:0 0 8px; padding:0; }
.page .chg-list li { margin:0; padding:8px 0; border-top:1px solid var(--line); line-height:1.5; }
.page .chg-list li:first-child { padding-top:0; border-top:0; }
.chg-list time { display:block; margin-bottom:2px; color:var(--sub); font-size:.8125rem; line-height:1.385; }

/* 안내 카드(같이 보면 좋은 글 · 모음) — 카드 전체가 하나의 링크 */
.page .cat-block h2 { margin-top:24px; font-size:1.25rem; font-weight:800; }
.page .related h2 { margin-top:24px; }
.list-plain .guide-card { padding:0; }
.page .guide-card a { display:block; padding:12px; color:inherit; text-decoration:none; border-radius:var(--r-lg); }
.guide-card b { display:block; color:var(--brand-ink); }
.guide-card .meta { display:block; margin-top:4px; }
.guide-card .meta.cat { color:var(--muted); font-size:.8125rem; }
.page .cat-row .chip { font-size:.8125rem; min-height:24px; }
.page .guide-card a:active { background:var(--sunken); }
@media (hover:hover) { .page .guide-card a:hover { background:var(--sunken); } .page .guide-card a:hover b { text-decoration:underline; text-underline-offset:3px; } }

/* 앱 받기 중간 쪽(/go/play/…) — 스크립트 없이 1초 뒤 Play 로. 안 넘어가면 이 단추 */
.page .hop { padding-top:16px; }
.page .hop .btn { margin:16px 0 8px; }
.page .hop-back { margin:0; }
.page .hop-back a { display:inline-flex; align-items:center; min-height:var(--hit); }

/* 움터 1분 소개 카드 */
.page .watch-card { margin:24px 0 8px; }
.page .watch-card h2 { margin:0 0 4px; font-size:1rem; font-weight:800; }
.page .watch-card p { margin:0 0 8px; }

/* 움터의 약속 */
.page .read .promise-list, .page .guide-body .promise-list { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.page .read .promise-list li { margin:0; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); line-height:1.6; }
.promise-list b { display:block; margin-bottom:2px; }
.page .promise-end { margin-top:24px; }

/* 첫 화면 '많이 찾는 안내' — 소개 끝 부분의 .feat 카드 위에서, 카드 전체를 하나의 링크로 */
.home-guides li { position:relative; }
.home-guides a::after { content:''; position:absolute; inset:0; border-radius:14px; }
.home-guides a:focus-visible { outline:none; }
.home-guides a:focus-visible::after { outline:2px solid var(--focus); outline-offset:2px; }
.home-guides-more { margin:12px 0 0; }
.home-guides-more .btn { text-decoration:none; }

/* 첫 화면 믿음 한 줄 — 새싹 글(.lead) 아래, 나머지 글이 뜬 뒤 살며시. 모양은 site.css .trust-line (움직임 끄기면 motion.css 의 .rm .hero * 가 꺼 준다) */
.hero .trust-line { max-width:360px; margin:16px auto 0; animation:fadeUp .9s var(--ease) 1.1s both; }

/* 끝 부분 믿음 칸(.trust) 아래 한 줄 — 가족 공유를 켰을 때의 사실을 바로 곁에 */
.end .trust-more { margin:8px 0 0; color:var(--sub); font-size:.8125rem; line-height:1.5; }
.end .trust-more a { display:flex; align-items:center; min-height:var(--hit); }

@media print { .page .app-cta, .page .app-line, .page .watch-card, .page .get-app { display:none; } }