/* layouts.css — 구조만 담습니다. 색은 palettes.css 가 따로 맡습니다. 시안은 "내용을 어떤 순서와 짜임으로 보이는가"이고, 색은 그와 별개로 고르는 것입니다. 그래서 body 에 두 클래스를 함께 씁니다. 여기 있는 값: 컨테이너 폭 · 제목과 본문 크기 · 섹션 여백 · 모서리 · 제목 글꼴. 팔레트를 바꿔도 이 값들은 움직이지 않습니다. */ :root { /* 글꼴 — 본문과 숫자는 어느 시안에서나 Pretendard 입니다. 제목 글꼴만 시안별로 --font-heading 을 덮어씁니다. */ --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic", sans-serif; --font-heading: var(--font-body); --font-en: "Inter", var(--font-body); /* 글자 */ --fs-hero: 44px; --lh-hero: 1.5; --fs-h2: 30px; --lh-h2: 1.5; --fs-h3: 19px; --lh-h3: 1.6; --fs-body: 15px; --lh-body: 1.9; --fs-sm: 13px; --lh-sm: 2.0; --fs-xs: 11px; --lh-xs: 1.6; /* 여백 */ --sp-section: 80px; --sp-side: 60px; --sp-card: 22px; --container: 1320px; /* 표 안에서만 쓰는 톤. 팔레트마다 --paper 와 --primary-lt 가 같은 값인 경우가 있어, 섹션 배경이 --paper 인 자리에서 표 머리행이 바탕에 묻힙니다. 표는 어느 색 위에 놓여도 칸이 보여야 하므로 배경색에서 떼어 냅니다. */ --table-head: rgba(0, 0, 0, 0.045); --table-sum: rgba(0, 0, 0, 0.065); /* 그리드 */ --gap-2: 24px; --gap-3: 24px; --gap-4: 20px; } /* ── 시안 1 — 보호자가 한 번에 다 보길 원하는 센터 ─── 원페이지 · 중앙정렬 · 알약 버튼. 컨테이너를 좁혀 한 줄기로 읽힙니다. */ .layout-1 { --font-heading: "Gowun Dodum", var(--font-body); --container: 1120px; --fs-hero: 48px; --fs-h2: 40px; --fs-body: 15px; --sp-section: 72px; --radius-card: 16px; --radius-btn: 24px; --radius-img: 12px; } /* ── 시안 2 — 활동 사진과 소식이 많은 센터 ────────── 정보량 최대 · 좌우교차 블록 · 섹션마다 영문 라벨. */ .layout-2 { --font-heading: var(--font-body); --container: 1320px; --fs-hero: 40px; --fs-h2: 30px; --fs-body: 14px; --sp-section: 88px; --radius-card: 18px; --radius-btn: 26px; --radius-img: 14px; } /* ── 시안 3 — 직원이 오래 일하는 센터 ─────────────── 사람 먼저 · 중앙정렬 · 인물 사진 원형. 명조는 같은 px 에서 작아 보여 본문을 16px 로 올렸습니다. */ .layout-3 { --font-heading: "Gowun Batang", serif; --container: 1200px; --fs-hero: 60px; --fs-h2: 52px; --fs-body: 16px; --sp-section: 120px; --radius-card: 20px; --radius-btn: 28px; --radius-img: 14px; } /* ── 시안 4 — 비용을 투명하게 안내하는 센터 ───────── 2열 피드 · 링크 카드. 자리와 비용을 히어로 바로 다음에 둡니다. */ .layout-4 { --font-heading: "Sunflower", var(--font-body); --container: 1320px; --fs-hero: 44px; --fs-h2: 36px; --fs-body: 15px; --sp-section: 80px; --radius-card: 16px; --radius-btn: 26px; --radius-img: 12px; } /* ── 시안 5 — 등급과 인력에 자신 있는 센터 ────────── 각진 기업형 · 다크 히어로 · 인사말 없이 숫자로 시작. */ .layout-5 { --font-heading: var(--font-body); --container: 1320px; --fs-hero: 76px; --fs-h2: 64px; --fs-body: 15px; --sp-section: 100px; --radius-card: 4px; --radius-btn: 2px; --radius-img: 4px; } /* ── 시안 6 — 문의부터 빠르게 받고 싶은 센터 ──────── 최소 구성 · 여덟 섹션 · 가장 짧은 쪽. */ .layout-6 { --font-heading: "Gowun Dodum", var(--font-body); --container: 1040px; --fs-hero: 34px; --fs-h2: 28px; --fs-body: 15px; --sp-section: 48px; --radius-card: 20px; --radius-btn: 28px; --radius-img: 16px; } /* ── 모바일(768px 이하) ───────────────────────────── 시안 블록과 무게가 같으므로 반드시 뒤에 둡니다. */ @media (max-width: 768px) { .layout-1, .layout-2, .layout-3, .layout-4, .layout-5, .layout-6 { --sp-side: 20px; } .layout-1 { --fs-hero: 30px; --fs-h2: 24px; --fs-body: 14px; --sp-section: 48px; } .layout-2 { --fs-hero: 28px; --fs-h2: 22px; --fs-body: 14px; --sp-section: 52px; } .layout-3 { --fs-hero: 32px; --fs-h2: 26px; --fs-body: 15px; --sp-section: 56px; } .layout-4 { --fs-hero: 30px; --fs-h2: 24px; --fs-body: 14px; --sp-section: 50px; } .layout-5 { --fs-hero: 36px; --fs-h2: 28px; --fs-body: 14px; --sp-section: 56px; } .layout-6 { --fs-hero: 26px; --fs-h2: 22px; --fs-body: 14px; --sp-section: 40px; } }