/* ════════════════════════════════════════════════════════════════ blog.css — MyPet 정적 블로그 / 지역(near) 페이지 전용 스타일 ──────────────────────────────────────────────────────────────── ⚠️ tokens.css 를 복제/추출하지 않는다. tokens.css 의 CSS 변수 (--green, --gold, --surface …)를 "사용만" 한다. 전제: 정적 페이지 에서 /tokens.css 를 먼저 link 하고, 그 다음 /blog.css 를 link 한다. (tokens.css 를 public 으로 복사하는 것은 build 스크립트가 담당 — 여기선 blog.css 만.) 브랜드: --green 계열 + --gold 포인트. 그림자 --shadow-rest/raised. radius 22px. 시스템 폰트 스택(Quicksand 는 앱 전용). 반응형: 320 ~ 1440. ════════════════════════════════════════════════════════════════ */ /* ── 로컬 기본값 폴백 ──────────────────────────────────────────── tokens.css 가 어떤 이유로 로드 실패해도 페이지가 완전히 깨지지 않도록, blog.css 가 참조하는 변수의 최소 폴백만 :root 에 둔다. (tokens.css 가 먼저 로드되면 그 값이 우선하므로 드리프트 아님 — 아래는 "없을 때만" 쓰이는 안전망.) */ :root { --blog-green: var(--green, #2f7d5e); --blog-green-deep: var(--green-deep, #2e5d4b); --blog-gold: var(--gold, #caa46a); --blog-surface: var(--surface, #f7fafe); --blog-ink: var(--on-surface, #181c1f); --blog-ink-variant: var(--on-surface-variant, #4a4f54); --blog-outline: var(--outline-variant, #d4d8de); --blog-radius: var(--radius-card, 22px); --blog-radius-sm: var(--radius-sm, 16px); --blog-shadow-rest: var(--shadow-rest, 0 1px 3px rgba(24, 28, 31, 0.08), 0 1px 2px rgba(24, 28, 31, 0.06)); --blog-shadow-raised: var(--shadow-raised, 0 6px 18px rgba(24, 28, 31, 0.1), 0 2px 6px rgba(24, 28, 31, 0.08)); --blog-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; /* 페이지 로컬 스케일 */ --blog-header-h: 60px; --blog-gap: 16px; --blog-gap-lg: 24px; } /* ── Base ─────────────────────────────────────────────────────── 앱 tokens.css 의 body 는 홍보웹(React) 기준이라, 정적 블로그 페이지는 흰 계열 배경 + 시스템 폰트로 가독성 우선(문서형). */ .blog-page { margin: 0; background-color: #ffffff; color: var(--blog-ink); font-family: var(--blog-font); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .blog-page *, .blog-page *::before, .blog-page *::after { box-sizing: border-box; } .blog-page img { display: block; max-width: 100%; height: auto; } .blog-page a { color: var(--blog-green); text-decoration: none; } .blog-page a:hover { text-decoration: underline; } /* 스크린리더 전용(스킵 링크 등) */ .blog-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── 레이아웃 컨테이너 ─────────────────────────────────────────── .wrap = 본문(글) 최대 720px .wrap.wide = 목록/지역 매트릭스 최대 920px */ .wrap { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: 20px; } .wrap.wide { max-width: 920px; } /* ── 사이트 헤더 ───────────────────────────────────────────────── 로고(홈) + 네비(블로그/지역) + 스토어 CTA. sticky. */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--blog-outline); } .site-header__inner { max-width: 920px; margin-inline: auto; min-height: var(--blog-header-h); padding: 8px 20px; display: flex; align-items: center; gap: var(--blog-gap); } .site-header__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--blog-green-deep); } .site-header__brand:hover { text-decoration: none; } .site-header__brand img { width: 28px; height: 28px; border-radius: 8px; } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .site-nav a { padding: 8px 12px; border-radius: var(--radius-pill, 9999px); color: var(--blog-ink-variant); font-size: 15px; font-weight: 600; } .site-nav a:hover { background: var(--green-fixed, #dcead9); color: var(--blog-green-deep); text-decoration: none; } .site-nav a[aria-current='page'] { color: var(--blog-green-deep); background: var(--green-fixed, #dcead9); } /* 헤더 우측 스토어 CTA(작은 pill) */ .site-header__cta, .site-header__cta:link, .site-header__cta:visited { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: var(--radius-pill, 9999px); /* 진한 green 단색 — 흰 헤더에서 또렷하게 분리(전역 링크색 상속 방지 위해 명시). */ background: var(--green-deep, #2e5d4b); color: #ffffff !important; font-size: 14px; font-weight: 800; box-shadow: 0 3px 8px rgba(46, 93, 75, 0.28); white-space: nowrap; } .site-header__cta:hover { background: #244a3c; color: #ffffff !important; text-decoration: none; box-shadow: 0 4px 12px rgba(46, 93, 75, 0.36); } /* ── Breadcrumb ───────────────────────────────────────────────── 홈 > 블로그 > 현재. 접근성: