/** * ┌─────────────────────────────────────────────────────────────────────┐ * │ FILE INDEX — 여수뉴스포털 │ * ├──────────────┬──────────────────────────────────────────────────────┤ * │ 파일명 │ _typography.css │ * │ 위치 │ /assets/css/_typography.css │ * │ 생성일 │ 2026-05-16 │ * │ 수정일 │ 2026-05-16 │ * │ 버전 │ v1.0 │ * ├──────────────┼──────────────────────────────────────────────────────┤ * │ 기능/역할 │ 스타일시트 — 포털·컴포넌트별 규칙 적용 │ * ├──────────────┼──────────────────────────────────────────────────────┤ * │ 레이아웃 │ 기준 너비: 1200px (전역·포털 변수와 연동) │ * │ 섹터 구조 │ .sector-wrap width:100% — 다열은 .sector-inner (원칙2) │ * │ 폰트 기준 │ 최소 14px (--fs-base 등 변수 연동) │ * ├──────────────┼──────────────────────────────────────────────────────┤ * │ 연관 파일 │ load-by : header.php·포털 레이아웃 (상이) │ * │ │ 변수 주입: echoLayoutVars()·포털 CSS (해당 시) │ * ├──────────────┼──────────────────────────────────────────────────────┤ * │ 참조 사항 │ /docs/PROJECT_RULES.md 원칙8·포털 CSS 접두 규칙 │ * ├──────────────┼──────────────────────────────────────────────────────┤ * │ 변경 이력 │ 2026-05-16 v1.0 - FILE INDEX 일괄 부여 │ * └──────────────┴──────────────────────────────────────────────────────┘ */ :root { /* ── 사용자 확정 9 변수 (정부 표준 준용) ─────────────── */ --fs-badge: 14px; /* 배지 전용 */ --fs-meta: 15px; /* 메타·날짜·보조텍스트 (최솟값) */ --fs-body: 16px; /* 본문 기본 */ --fs-emphasis: 17px; /* 강조 본문·버튼·폼 */ --fs-card-title: 18px; /* 카드 제목·섹션명 */ --fs-subheader: 19px; /* 서브 헤더 (= 14pt 뉴스 본문) */ --fs-page-title: 20px; /* 페이지 제목 */ --fs-section-title: 24px; /* 섹션 대제목 */ --fs-hero: 32px; /* 히어로 제목 */ /* ── 뉴스 본문 특별 (14pt = 19px) ──────────────────── */ --fs-news-body: 19px; --lh-news-body: 1.8; /* 위아래 균등 차별화 */ /* ── 기본 line-height ─────────────────────────────── */ --lh-tight: 1.3; /* 제목용 */ --lh-normal: 1.5; /* 본문 기본 */ --lh-relaxed: 1.7; /* 가독성 우선 */ /* ── font-weight 표준 ────────────────────────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; /* ── letter-spacing 한글 최적화 ───────────────────── */ --tracking-tight: -0.02em; --tracking-normal: -0.01em; /* 한글 기본 */ --tracking-wide: 0; } /* ============================================================ * 자동 적용 — body 와 .ko-typo 컨테이너 * ============================================================ */ body { font-size: var(--fs-body); line-height: var(--lh-normal); letter-spacing: var(--tracking-normal); } /* ============================================================ * 시맨틱 태그 기본값 — h1~h6, small 등 * ============================================================ */ h1 { font-size: var(--fs-hero); font-weight: var(--fw-heavy); line-height: var(--lh-tight); } h2 { font-size: var(--fs-section-title); font-weight: var(--fw-bold); line-height: var(--lh-tight); } h3 { font-size: var(--fs-page-title); font-weight: var(--fw-bold); line-height: var(--lh-tight); } h4 { font-size: var(--fs-subheader); font-weight: var(--fw-semibold); line-height: var(--lh-normal); } h5 { font-size: var(--fs-card-title); font-weight: var(--fw-semibold); line-height: var(--lh-normal); } h6 { font-size: var(--fs-emphasis); font-weight: var(--fw-semibold); line-height: var(--lh-normal); } small, .text-meta, time, .meta, .date { font-size: var(--fs-meta); color: #64748b; } /* 폼/버튼 표준 — 시인성 + 터치 우선 */ input, select, textarea, button, .btn { font-size: var(--fs-emphasis); } /* ============================================================ * 유틸리티 클래스 (1회용 / 점진 치환용) * ============================================================ */ .typo-badge { font-size: var(--fs-badge); } .typo-meta { font-size: var(--fs-meta); color: #64748b; } .typo-body { font-size: var(--fs-body); } .typo-emphasis { font-size: var(--fs-emphasis); font-weight: var(--fw-semibold); } .typo-card-title { font-size: var(--fs-card-title); font-weight: var(--fw-semibold); } .typo-subheader { font-size: var(--fs-subheader); font-weight: var(--fw-semibold); } .typo-page-title { font-size: var(--fs-page-title); font-weight: var(--fw-bold); } .typo-section-title { font-size: var(--fs-section-title); font-weight: var(--fw-bold); } .typo-hero { font-size: var(--fs-hero); font-weight: var(--fw-heavy); } /* 뉴스 본문 특별 — .news-body, .article-body, [data-news-body] */ .news-body, .article-body, [data-news-body] { font-size: var(--fs-news-body) !important; line-height: var(--lh-news-body) !important; text-align: justify; word-break: keep-all; /* 한글 자연 줄바꿈 */ } /* ============================================================ * 사용자 토글 — 글자크기 ±2단계 (접근성) * data-typo-scale="lg" 시 +2px, "xl" 시 +4px, "sm" 시 -1px * ============================================================ */ html[data-typo-scale="sm"] { --fs-body: 15px; --fs-emphasis: 16px; --fs-card-title: 17px; --fs-subheader: 18px; --fs-page-title: 19px; --fs-section-title: 22px; --fs-hero: 28px; --fs-news-body: 17px; } html[data-typo-scale="lg"] { --fs-body: 18px; --fs-emphasis: 19px; --fs-card-title: 20px; --fs-subheader: 21px; --fs-page-title: 22px; --fs-section-title: 26px; --fs-hero: 34px; --fs-news-body: 21px; } html[data-typo-scale="xl"] { --fs-body: 20px; --fs-emphasis: 21px; --fs-card-title: 22px; --fs-subheader: 23px; --fs-page-title: 24px; --fs-section-title: 28px; --fs-hero: 36px; --fs-news-body: 23px; } /* ============================================================ * 인쇄용 — pt 단위 보장 * ============================================================ */ @media print { body { font-size: 11pt; } h1 { font-size: 22pt; } h2 { font-size: 18pt; } h3 { font-size: 14pt; } h4, h5, h6 { font-size: 12pt; } .news-body, .article-body, [data-news-body] { font-size: 14pt !important; line-height: 1.7 !important; } small, .text-meta, .meta, .date, time { font-size: 9pt; } } /* ============================================================ * 모바일 (≤768px) — 약간 축소 * ============================================================ */ @media (max-width: 768px) { :root { --fs-section-title: 22px; --fs-hero: 26px; } }