/* ============================================================ 전남동부지역사회연구소(동사연) — Design Tokens colors_and_type.css ============================================================ */ /* @view-transition (페이지 간 크로스페이드) 제거 — 2026.07.30 안드로이드 카카오톡 웹뷰에서 전환 합성이 실패하면 이전 화면 스냅샷에 얼어붙는 프리징 유발 (페이지는 뒤에서 이미 이동 완료, 앱 전환 시에야 화면 갱신). 장식 효과일 뿐이므로 제거. 재도입하려면 웹뷰 호환성 검증 필수. */ /* 콘텐츠 교체 시 부드러운 페이드(트랜지션만 — 절대 숨기지 않음). */ .hero, .photo-grid, .notice-table tbody, .activities-grid, .activities-list, .issue-grid, .archive-board tbody, .video-grid, .gallery { transition: opacity 0.2s ease; } /* ---------- Web Fonts ---------- */ @font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: url('./fonts/PretendardVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'SUIT Variable'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('./fonts/SUIT-Variable.woff2') format('woff2-variations'); } /* Noto Serif KR — 진중한 발간자료/리포트용. @import는 CSS 로드를 직렬화(이 파일 수신 완료 후에야 구글 요청 시작)해 모바일에서 지연이 누적되므로 제거 — 각 HTML 의 로 병렬 로드한다. */ :root { /* ============================================================ 1. 색상 — 동사연 팔레트 "순천만의 갯벌, 갈대, 흑두루미, 시민의 행동" ============================================================ */ /* Brand — Civic Blue (동사연 공식 로고 컬러: 시민의 외침·물·연대) */ --brand-50: #eef5fb; --brand-100: #d5e6f3; --brand-200: #abcde7; --brand-300: #7eb0d8; /* logo light-blue splash */ --brand-400: #4d8fc5; --brand-500: #2c75b3; /* logo dark-blue splash */ --brand-600: #1e5e96; /* primary ★ */ --brand-700: #174a78; --brand-800: #11385c; --brand-900: #0a2440; --brand-950: #051426; /* Accent — Living Coral (강조 - 따뜻한 산호색, 후원/행동) */ --accent-50: #fef3ef; --accent-100: #fcdfd3; --accent-200: #f9bea7; --accent-300: #f29274; --accent-400: #e96b48; /* highlight */ --accent-500: #d44e2c; /* CTA */ --accent-600: #b03b1f; /* Action — Civic Red (긴급 알림 전용) */ --action-100: #fdebe8; --action-300: #e88472; --action-400: #d65a44; --action-500: #b8412b; --action-600: #8f2f1f; /* Info — Soft Blue (링크, 정보 라벨) */ --info-50: #eaf2fb; --info-100: #d4e4f5; --info-400: #5083c2; --info-500: #2f64a8; --info-600: #234876; /* Neutrals — Cool Paper (정보제공형: 깨끗하고 살짝 차가운 그레이) */ --paper: #fafaf8; /* page bg - very light off-white */ --paper-warm: #f4f4f1; /* section bg */ --paper-100: #ececea; --paper-200: #d8d8d4; --paper-300: #b4b4ae; --paper-400: #87877f; --paper-500: #5a5a54; --paper-600: #3d3d38; --paper-700: #2a2a26; --paper-800: #1a1a17; --ink: #111110; /* near-black */ --white: #ffffff; --black: #000000; /* ============================================================ 2. 시맨틱 색상 ============================================================ */ --fg-1: var(--ink); /* primary text */ --fg-2: var(--paper-600); /* secondary text */ --fg-3: var(--paper-500); /* muted text */ --fg-4: var(--paper-400); /* placeholder, disabled */ --fg-inverse: var(--paper); --bg-1: var(--paper); /* page */ --bg-2: var(--paper-warm); /* card / section */ --bg-3: var(--paper-100); /* nested */ --bg-inverse: var(--brand-900); /* footer, hero */ --border-1: var(--paper-200); --border-2: var(--paper-300); --border-strong: var(--paper-600); --link: var(--brand-700); --link-hover: var(--brand-900); --link-visited: var(--brand-800); --success: var(--brand-600); --warning: var(--accent-500); --danger: var(--action-500); --info: var(--info-500); --primary: var(--brand-600); --primary-hover: var(--brand-700); --primary-fg: var(--paper); --donate: var(--accent-500); /* "후원하기" CTA - Living Coral */ --donate-hover: var(--accent-600); /* ============================================================ 3. 타이포그래피 ============================================================ */ --font-sans: 'Pretendard Variable', 'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'SUIT Variable', 'Pretendard Variable', sans-serif; --font-serif: 'Noto Serif KR', 'Times New Roman', serif; /* 리포트/인용문용 */ --font-mono: 'SF Mono', ui-monospace, Menlo, monospace; /* Type scale — modular, 1.250 ratio */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px; --fs-4xl: 48px; --fs-5xl: 60px; --fs-6xl: 76px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.55; --lh-relaxed: 1.75; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ============================================================ 4. Spacing — 4px base ============================================================ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ============================================================ 5. Radii — 보수적, 진중한 인상 ============================================================ */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; /* ============================================================ 6. Shadows — soft, paper-like ============================================================ */ --shadow-xs: 0 1px 2px rgba(20, 19, 15, 0.04); --shadow-sm: 0 1px 3px rgba(20, 19, 15, 0.06), 0 1px 2px rgba(20, 19, 15, 0.04); --shadow-md: 0 4px 12px rgba(20, 19, 15, 0.08), 0 1px 3px rgba(20, 19, 15, 0.04); --shadow-lg: 0 12px 32px rgba(20, 19, 15, 0.12), 0 4px 8px rgba(20, 19, 15, 0.06); --shadow-xl: 0 24px 60px rgba(20, 19, 15, 0.18); --shadow-inset: inset 0 1px 2px rgba(20, 19, 15, 0.06); /* ============================================================ 7. Layout ============================================================ */ --container-narrow: 720px; --container-base: 1080px; --container-wide: 1280px; --container-max: 1440px; --header-h: 76px; --header-h-compact: 60px; /* ============================================================ 8. Motion ============================================================ */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* ============================================================ Semantic typography ============================================================ */ html, body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .h-display { font-family: var(--font-display); font-size: var(--fs-6xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-black); } h1, .h1 { font-family: var(--font-display); font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); } h2, .h2 { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: var(--weight-bold); } h3, .h3 { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: var(--weight-bold); } h4, .h4 { font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: var(--weight-semibold); } h5, .h5 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--weight-semibold); } h6, .h6 { font-size: var(--fs-md); font-weight: var(--weight-semibold); } p, .body { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--fg-1); } .lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--fg-2); } .small, small { font-size: var(--fs-sm); color: var(--fg-2); } .caption { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); font-weight: var(--weight-medium); } .serif { font-family: var(--font-serif); } .mono { font-family: var(--font-mono); } /* Eyebrow label — section intro, e.g. "활동 보고" */ .eyebrow { font-size: var(--fs-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-600); display: inline-flex; align-items: center; gap: var(--space-2); } .eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--brand-600); } a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--link-hover); } ::selection { background: var(--brand-200); color: var(--brand-900); } /* Sticky footer — 콘텐츠가 짧은 페이지(예: 본문이 한두 줄뿐인 게시글)에서 footer가 화면 중간에서 끝나고 그 아래 빈 여백이 보이는 문제 방지.
유무·페이지별 본문 구조와 무관하게 footer에만 margin-top:auto를 줘서 항상 화면 하단에 붙도록 함(콘텐츠가 뷰포트보다 길면 기존과 동일하게 동작). */ body { min-height: 100vh; display: flex; flex-direction: column; } /* !important 필요: 각 페이지 자체