/* ========================================================================== tokens.css — 디자인 토큰 단일 출처 DESIGN-TOKENS.md 의 사본입니다. 값을 여기서 즉흥적으로 정하지 마세요. · 새 --c4- 토큰 추가는 언제나 허용이며, 자리는 이 파일 하나뿐입니다. · 기존 토큰의 값 변경은 원칙적으로 금지입니다(다른 화면이 조용히 끌려갑니다). 예외는 시안 Text style · Color style 이 수정돼 문서가 뒤처진 경우뿐이며, 그때는 DESIGN-TOKENS.md 도 함께 갱신합니다. · "[N단계]" 주석이 붙은 토큰은 값이 이미 확정됐고 아직 그 화면을 안 만들었을 뿐입니다. 참조가 0이어도 '참조 0 정리' 대상이 아닙니다. ========================================================================== */ :root { /* ---------- 색: 시안 Color styles ---------- */ --c4-color-grey900: #212121; --c4-color-grey700: #5B5B5B; --c4-color-grey500: #8A8A8A; --c4-color-grey300: #BCBCBC; --c4-color-grey100: #F2F2F2; /* 인라인 code · 코드블록 배경 [4단계] */ --c4-color-white: #FFFFFF; --c4-color-border: #E6E6E6; /* 시안 divider */ --c4-color-footer-bg: #2E2E2E; /* 시안 bg_darkgrey [2단계] */ /* 포인트 컬러 — 단일 출처. 관리자 [테마 디자인 > 사이트 공통 > 일반]에서 덮어쓸 수 있습니다. 덮어쓰기는 inc/enqueue.php 가 wp_add_inline_style()로 이 핸들 뒤에 붙입니다. */ --c4-color-accent: #32B493; /* 파생색 — 폴백 줄이 반드시 먼저 옵니다. color-mix 미지원 브라우저에서 호버가 아예 안 뜨는 것을 막기 위한 것이며, "hex 하드코딩 금지"의 명시적 예외로 문서에 기록돼 있습니다. 포인트 컬러를 옵션으로 바꿀 때는 두 줄을 모두 갱신합니다. */ --c4-color-accent-soft: rgba(50, 180, 147, .1); --c4-color-accent-soft: color-mix(in srgb, var(--c4-color-accent) 10%, transparent); /* 포커스 링. ★★ 8단계에서 **포인트 컬러를 따라가도록 바꿨습니다**(사용자 요청). 원래는 `#279A7E` 고정으로, accent 를 따라가지 않는 독립 토큰이었습니다 — 관리자가 어떤 색을 골라도 포커스 대비를 지키려는 의도였습니다. 이제 사이트 전역의 포커스 링·입력 테두리 강조가 포인트 컬러로 통일되고, **대비는 보장되지 않습니다**(DESIGN-TOKENS §12 의 포인트 컬러 예외에 포함). ★ 값을 고정 hex 로 되돌리려면 이 한 줄만 바꾸면 전역이 함께 돌아옵니다. */ --c4-color-focus: var(--c4-color-accent); /* 헤더 배경 (시안 렌더 실측: rgba(255,255,255,.7) + BACKGROUND_BLUR 40 = CSS 20px) [2단계] */ --c4-color-header-bg: rgba(255, 255, 255, .7); --c4-header-blur: 20px; /* ---------- 색: 역할 매핑 ---------- */ --c4-color-text: var(--c4-color-grey900); /* 기본 텍스트 */ --c4-color-text-sub: var(--c4-color-grey700); /* 보조 텍스트 */ --c4-color-text-muted: var(--c4-color-grey500); /* 상세 날짜 · 푸터 카피라이트 */ --c4-color-text-faint: var(--c4-color-grey300); /* 카드 날짜 · placeholder */ /* 값은 grey300 과 같지만 의미가 달라 분리 유지합니다(합치지 마세요). [3단계] */ --c4-color-img-placeholder: #BCBCBC; /* ---------- 타이포: 공통 ---------- */ --c4-font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* 시안 letterSpacing -4 는 -4% 이며 CSS 로는 -0.04em 입니다. base.css 가 전역 선택자로 걸어 각 요소가 자기 font-size 로 다시 계산하게 합니다. body 한 곳에만 걸면 큰 글자까지 본문 크기 기준 px 를 상속받습니다. */ --c4-ls: -0.04em; /* ---------- 타이포: 계열 (PC 값 / 모바일은 아래 미디어 쿼리) ---------- */ /* 페이지 제목 — 목록·카테고리·검색·빈 상태·404·문의 폼·그 밖의 고정 페이지. 가운데 정렬 */ --c4-type-page-title-size: 44px; --c4-type-page-title-weight: 700; --c4-type-page-title-lh: 1.3; /* 상세 글 제목 — 상세 + 약관 2종. 좌측 정렬 */ --c4-type-single-title-size: 32px; --c4-type-single-title-weight: 700; --c4-type-single-title-lh: 1.2; /* 카드 제목 — PC·모바일 동일, 2줄 클램프 [3단계] ★ 시안(Heading/H2/post_title)은 17px 이지만 사용자 지시로 +5px 했습니다. 의도된 차이이며 PROGRESS '⑦ 시안 갈림'에 기록돼 있습니다 — 8단계 시안 대조에서 17 로 되돌리지 마세요. */ --c4-type-card-title-size: 22px; --c4-type-card-title-weight: 700; --c4-type-card-title-lh: 1.3; /* 아티클 헤딩 [4단계] */ --c4-type-article-h2-size: 24px; --c4-type-article-h2-weight: 700; --c4-type-article-h2-lh: 1.9; --c4-type-article-h3-size: 22px; --c4-type-article-h3-weight: 700; --c4-type-article-h3-lh: 1.9; /* 아티클 문단 — PC·모바일 동일. Pretendard Medium(500) [4단계] */ --c4-type-article-body-size: 17px; --c4-type-article-body-weight: 500; --c4-type-article-body-lh: 1.9; /* 메뉴 [2단계] 드로어는 뷰포트가 아니라 컴포넌트가 다른 자리라 별도 토큰으로 둡니다 (드로어 경계는 1024, 타이포 경계는 768 — 미디어 쿼리로 묶을 수 없습니다). */ --c4-type-menu-size: 17px; --c4-type-menu-weight: 700; --c4-type-menu-lh: 1.5; --c4-type-menu-drawer-size: 22px; --c4-type-menu-drawer-lh: 1.2; /* 헤더 CTA 문구 — 헤더 PC · 모바일 드로어 동일 [2단계] */ --c4-type-cta-size: 16px; --c4-type-cta-weight: 700; --c4-type-cta-lh: 1.5; /* 로고 — PC·모바일 동일. ★ 이 계열만 자간 0 입니다 [2단계] */ --c4-type-logo-size: 20px; --c4-type-logo-weight: 700; --c4-type-logo-lh: 1.4; --c4-type-logo-ls: 0; /* 시안에 대응 Text style 이 없어 렌더 값으로 확정한 둘 [4단계] */ --c4-type-single-cat-size: 16px; /* 상세 카테고리 라벨 — 카드 라벨과 줄간격만 다름 */ --c4-type-single-cat-weight: 700; --c4-type-single-cat-lh: 1.2; --c4-type-single-date-size: 14px; /* 상세 날짜 — 굵기 500 은 이 자리에만 */ --c4-type-single-date-weight: 500; --c4-type-single-date-lh: 1.5; /* 그 밖의 텍스트 — PC·모바일 동일 */ --c4-type-body1-size: 17px; --c4-type-body2-size: 16px; --c4-type-body3-size: 15px; --c4-type-body4-size: 14px; --c4-type-caption-size: 13px; --c4-type-body-lh: 1.5; --c4-type-caption-lh: 1.4; --c4-type-weight-regular: 400; --c4-type-weight-bold: 700; /* ---------- 레이아웃: 전환 기준선 ---------- 세 값은 용도가 다릅니다. 서로 대체하지 마세요. 미디어 쿼리 조건부에는 var() 를 쓸 수 없으므로 조건부에는 리터럴이 남습니다 (8단계 "하드코딩 px 0건" 검증의 예외). 이 토큰은 calc() 용입니다. */ --c4-bp-mobile: 768px; /* PC/모바일 값 전환의 기본선 */ --c4-bp-drawer: 1024px; /* 헤더 메뉴 → 드로어 전용 */ --c4-bp-sidebox: 1360px; /* 사이드 박스 인라인 전환 전용 */ /* ---------- 레이아웃: 폭 · 여백 ---------- */ --c4-container-chrome: 1280px; /* 헤더·푸터 내부 폭 [2단계] */ --c4-container-body: 720px; /* 본문 컬럼 */ --c4-sidebox-w: 242px; /* [3단계] */ --c4-grid-gap: 40px; /* 3열 그리드 column-gap [3단계] */ --c4-gutter-mobile: 24px; /* 콘텐츠 영역 좌우 여백 (본문 컬럼 컨테이너가 상시 사용) */ --c4-gutter-mobile-chrome: 20px; /* 헤더·푸터는 예외로 20 [2단계] */ --c4-gutter-pc-chrome: 20px; /* 헤더·푸터 PC 좌우 패딩 [2단계] */ /* ---------- 레이아웃: 헤더 · 관리자 바 ---------- */ --c4-header-h: 80px; /* <768 은 72px — 아래 미디어 쿼리. 전환은 768 (1024 아님) */ /* 기본 0. is_admin_bar_showing() 일 때만 inc/enqueue.php 가 :root 기준으로 덮어씁니다. body.admin-bar 에 정의하면 의 scroll-padding-top 이 못 읽어 항상 0 이 됩니다. */ --c4-admin-bar-h: 0px; /* ---------- 페이지 세로 여백 (확정값 표의 사본) ---------- 상단은 전 화면 공통이라 이름에 화면이 없고, 하단은 화면마다 달라 이름에 화면이 들어갑니다. ★ 화면 이름 없는 하단 토큰(--c4-page-pb 같은)을 만들지 마세요 — 그 이름이 생기는 순간 다음 단계가 자기 화면 값을 거기에 덮어씁니다. */ --c4-pad-top: 80px; /* 헤더 아래 → 페이지/글 제목. 모바일 60px. ★ 고정 페이지·상세는 전 화면 공통이지만, **목록 계열은 1360 이상에서만** 이 값을 씁니다(1360 미만은 --c4-list-gap-title-cards 가 대신합니다). */ --c4-pad-bottom-list: 40px; /* 목록 · 카테고리 · 검색 [3·5단계] */ --c4-pad-bottom-single: 60px; /* 상세 [4단계] */ --c4-pad-bottom-page: 60px; /* 고정 페이지 · 약관 · 문의 폼 [1-4 사용 중] */ --c4-pad-bottom-empty: 40px; /* 빈 상태 · 404 [6단계] */ /* 문의 폼 전용 토큰은 만들지 않습니다 — page.php 를 쓰므로 위 -page 를 그대로 참조합니다. 별칭(--c4-pad-bottom-form: var(--c4-pad-bottom-page))도 만들지 마세요. */ /* 고정 페이지 제목 → 본문 간격 (모바일 28px) */ --c4-page-title-gap: 40px; /* ---------- 로고 슬롯 ---------- */ --c4-logo-w: 190px; /* [2단계] */ --c4-logo-h: 48px; /* 헤더 높이는 이 값에 영향을 주지 않습니다(슬롯 고정) */ /* ---------- radius ---------- 값이 같아도 의미가 다르면 분리 유지합니다. 합치지 마세요. */ --c4-radius-img: 20px; /* 카드 썸네일 · 상세 대표 이미지 [3·4단계] */ --c4-radius-banner: 8px; /* 중간 배너 [4단계] */ --c4-radius-box: 8px; /* 사이드 박스 · 목차 · 관련글 박스 [3·4단계] */ --c4-radius-button: 8px; /* 헤더 CTA 버튼 [2단계] */ --c4-radius-page: 4px; /* 페이지네이션 현재 페이지 [3단계] */ --c4-radius-pill: 100px; /* 검색 입력 · 스크롤바 [3·4단계] */ /* ---------- 전환 ---------- */ --c4-transition-sidebox: .25s ease; /* [3단계] */ /* ---------- 헤더 [2단계] ---------- */ --c4-header-menu-gap: 32px; /* 좁아지면 16px — 파일 맨 아래 '헤더 국소 전환' 참조 */ --c4-header-logo-indent: 4px; /* 모바일: 컨테이너 패딩 20 + 4 = 로고 기준선 24 */ --c4-icon-burger: 32px; --c4-icon-cta: 19px; /* 헤더 CTA 버튼 */ --c4-cta-h: 48px; --c4-cta-min-w: 120px; /* ★ 하한선이지 목표치가 아닙니다. 문구가 옵션이라 길어지면 늘어나야 하므로 width 로 고정하지 마세요. */ --c4-cta-pad-y: 10px; --c4-cta-pad-x: 21px; --c4-cta-gap: 6px; /* 아이콘 ↔ 문구 */ /* ---------- 모바일 드로어 [2단계] ---------- */ --c4-drawer-pad-x: 24px; --c4-drawer-pad-top: 24px; --c4-drawer-pad-bottom: 12px; --c4-drawer-link-gap: 24px; --c4-drawer-cta-inset: 24px; /* ---------- 푸터 [2단계] ---------- ★ 세로 간격 셋은 값이 다릅니다. 하나로 묶지 마세요. 특히 20은 '로고→회사정보'가 아니라 '약관 링크 줄→로고' 값입니다. */ --c4-footer-pad-y: 40px; /* 모바일 28px */ --c4-footer-gap-terms-logo: 20px; /* 약관 링크 줄 → 로고 · 모바일 24px */ --c4-footer-gap-logo-company: 8px; /* 로고 → 회사 정보 · 모바일 12px */ --c4-footer-gap-company-copy: 16px; /* 회사 정보 → 카피라이트 · 모바일 8px */ --c4-footer-terms-gap: 20px; /* 약관 링크 사이 */ --c4-footer-sep-gap: .5em; /* 회사 정보 구분자 '|' 좌우 여백. 시안은 공백 두 칸 폭이며, 공백 문자로 재현하지 않고 의사요소 margin 으로 만듭니다. */ /* ---------- 블로그 띠 배너 [2단계] ---------- */ --c4-topbar-pad-y: 12px; --c4-topbar-gap: 6px; /* PC 가로 6 · 모바일 세로 2px */ /* ---------- 목록 화면 세로 리듬 [3단계] ---------- ★★ 모바일 열이 40 / 60 / 40 으로 엇갈립니다. **가운데만 60** 입니다. 세 값을 한 값으로 묶거나 위아래에 맞춰 적지 마세요. */ --c4-list-gap-title-cards: 60px; /* 제목 → 카드 리스트 · 모바일 40px ★ **1360 미만에서만** 쓰입니다. 1360 이상은 --c4-pad-top 하나로 만듭니다. */ --c4-list-gap-cards-pagination: 60px; /* 카드 리스트 → 페이지네이션 · 모바일 60px */ --c4-list-gap-pagination-search: 60px; /* 페이지네이션 → 검색 폼 · 모바일 40px */ /* ---------- 글 카드 [3단계] ---------- */ --c4-card-thumb-w: 300px; /* PC. 모바일은 100%(=327) */ --c4-card-thumb-ratio: 5 / 3; --c4-card-gap: 28px; /* 썸네일 ↔ 텍스트 · 모바일 12px */ --c4-card-text-gap: 6px; --c4-card-text-pad-top: 8px; /* ★ PC 만. 모바일은 0 — 썸네일과의 간격 12 가 그 역할 */ --c4-card-list-gap: 60px; /* 카드 사이 · 모바일 40px */ /* ---------- 사이드 박스 [3단계] ---------- ★ 접힘 상태 박스의 **바깥** 높이가 48 입니다. 테두리 1px 을 포함한 치수라 토글 바 안쪽은 46 이어야 합니다. 바를 48 로 잡으면 박스가 50 이 됩니다. */ --c4-sidebox-head-h: 46px; --c4-sidebox-head-pad-y: 12px; --c4-sidebox-head-pad-x: 20px; --c4-sidebox-body-pad-y: 15px; --c4-sidebox-body-pad-x: 24px; --c4-sidebox-item-gap: 8px; --c4-sidebox-indent: 12px; /* 2차 들여쓰기 */ --c4-sidebox-chevron-w: 12px; --c4-sidebox-chevron-h: 6px; --c4-sidebox-sticky-top: 24px; /* 헤더 아래 여유분 */ /* ---------- 페이지네이션 [3단계] ---------- ★ 숫자·화살표·현재 페이지가 **전부 같은 크기의 슬롯**을 차지합니다. 현재 페이지는 그 슬롯에 배경만 칠하는 것이지 더 커지지 않습니다. ★ 변형이 `State=Desktop, Mobile` 하나뿐 — PC·모바일이 같은 값을 씁니다. */ --c4-page-slot-w: 26px; --c4-page-slot-h: 22px; --c4-page-gap: 4px; /* 슬롯 사이. 26+4 = 중심 간 30(시안 숫자 간격) */ --c4-page-arrow-w: 12px; /* chevron 원본 폭(회전 전) */ /* ---------- 검색 폼 [3단계] ---------- ★ 테두리·radius·높이는 컨테이너가 아니라 자신에게 줍니다. 컨테이너에 주면 :focus-visible 로 테두리 색을 바꾸는 규칙이 아무 효과도 못 냅니다. */ --c4-search-h: 48px; --c4-search-w: 400px; /* PC 상한. 모바일은 컨테이너 폭(327)을 따름 */ --c4-search-pad-y: 15px; --c4-search-pad-x: 19px; --c4-search-icon: 16px; --c4-search-icon-gap: 16px; --c4-search-border-w: 2px; /* ---------- 상세 화면 세로 리듬 [4단계] ---------- ★★ 모바일에서 20 과 28 이 섞입니다. 아티클 **안쪽**(대표 이미지·본문 블록 사이)은 20, 아티클 **바깥 경계**(제목 블록·목차·배너)는 28 입니다. 한 값으로 묶지 마세요. */ --c4-single-gap: 40px; /* 바깥 경계 — 제목블록 → 다음 / 배너 위아래 · 모바일 28px */ --c4-article-gap: 40px; /* 안쪽 — 대표 이미지 → 본문, 본문 블록 사이 · 모바일 20px */ /* 제목 블록 내부 */ --c4-single-head-gap-cat: 8px; /* 카테고리 → 제목 */ --c4-single-head-gap-date: 20px; /* 제목 → 날짜 · 모바일 12px */ /* ---------- 아티클 본문 요소 [4단계 확정] ---------- ★ 시안에 실물이 없는 요소는 새 색·새 크기를 만들지 않고 기존 토큰과 시안 리듬(8 / 20 / 40)에서만 도출했습니다. */ --c4-article-space-sm: 8px; /* 헤딩 → 다음 요소 · 표 셀 상하 패딩 */ --c4-article-space-md: 20px; /* 목록 들여쓰기 · 인용 들여쓰기 · 코드 패딩 · 표 셀 좌우 패딩 */ /* h4 — 아티클 헤딩 계열 h3 보다 한 단계 작게(이 디자인의 헤딩 단차는 2), 굵기·줄간격은 h3 와 동일 */ --c4-type-article-h4-size: 20px; /* 모바일 16px */ --c4-type-article-h4-weight: 700; --c4-type-article-h4-lh: 1.9; /* ---------- 같은 카테고리 글 [4단계] ---------- */ --c4-related-head-pad-y: 16px; --c4-related-head-pad-x: 20px; --c4-related-list-pad-y: 8px; /* 모바일 6px — 스크롤바 안쪽 여백과 같은 값 */ --c4-related-item-pad-y: 8px; --c4-related-item-pad-x: 20px; --c4-related-max-h: 350px; /* ★ 최대치이지 고정 높이가 아님 · 모바일 334px */ --c4-related-scrollbar-w: 4px; --c4-related-item-size: 16px; /* PC Body/body2 · 모바일 Body/body3(15) — 한 단계 다르다 */ /* ---------- 빈 상태 · 404 [6단계] ---------- ★ 이 화면은 '위 묶음(제목·문구) / 아래 묶음(검색 폼·푸터)' 구조다. 고정값은 셋뿐이며, **문구 → 검색 폼 사이는 가변**이다. 시안의 PC 370 / 모바일 140 은 프레임 높이에서 나온 결과값이지 확정값이 아니므로 CSS 에 박지 않는다. */ --c4-empty-gap-title: 108px; /* 제목 블록 → 문구 · 모바일 80px */ --c4-empty-gap-min: 40px; /* 문구 → 검색 폼 **최소** 간격. 남는 공간이 그 위에 얹힌다. 시안 리듬 8/20/40 에서 골랐다. 없으면 화면이 짧을 때 문구와 검색 폼이 딱 붙는다. */ --c4-404-link-gap: 24px; /* 404 전용 — 문구 → '홈으로 가기'. ★ 시안이 없는 화면이라 새로 지은 값이다. 값이 같은 다른 토큰(드로어 항목 간격 등)을 빌려 쓰지 말 것 — 그쪽을 바꿀 때 404 간격이 따라 움직인다. */ /* ---------- 문의 폼 [7단계] ---------- ★★ 폼 전용 **색 토큰**은 여전히 하나도 없습니다. 제출 버튼이 포인트 컬러를 따라가지만, 그건 새 토큰이 아니라 기존 --c4-color-accent 를 참조하는 것입니다. · 제출 버튼 색은 [테마 디자인 > 사이트 공통 > 일반]의 포인트 컬러가 단일 출처입니다 (사용자 요청으로 8단계에 추가 — form.css §7-1). · 그 외(입력 테두리·배경·필수 표시·에러 메시지)는 플러그인 기본값이고 구매자가 [Fluent Forms > 해당 폼 > 스타일]에서 바꿉니다. */ --c4-form-gap: 20px; /* 필드 묶음 사이 */ --c4-form-field-h: 48px; /* 입력 · 셀렉트 · 제출 버튼 높이 */ --c4-form-radius: 8px; /* 입력 · 제출 버튼 */ --c4-form-pad-x: 16px; /* 입력 좌우 안쪽 여백 */ --c4-form-textarea-min-h: 120px; /* ★ 최소값. 고정 높이가 아닙니다 */ --c4-form-textarea-pad-y: 14px; /* ★ 디자인 값이 아니라 브라우저 제약입니다. iOS Safari 는 입력 글자가 16 미만이면 탭할 때 화면을 자동 확대합니다. 그래서 모바일에서 **입력 요소만** 이 값으로 올립니다. 라벨·설명은 그대로 둡니다. */ --c4-form-ios-min-size: 16px; /* ---------- 골격 수치 ---------- 확정값은 화면 디자인 값만 다루므로 아래는 이 단계(1-4)에서 새로 지은 이름입니다. DESIGN-TOKENS.md 에 이름·값·용도를 기록했습니다. */ --c4-border-w: 1px; /* 테두리 · 구분선 기본 두께 */ --c4-focus-w: 2px; /* :focus-visible 링 두께 */ --c4-focus-offset: 2px; /* :focus-visible 링 오프셋 */ --c4-skip-inset: 8px; /* 스킵 링크가 펼쳐졌을 때의 화면 여백 */ --c4-anchor-gap: 16px; /* 앵커 이동 시 헤더 아래 남길 여유분 */ } /* ========================================================================== 모바일 (<768) — 전환 기준선은 768 입니다. 1024 는 드로어 전용, 1360 은 사이드 박스 전용이라 여기에 쓰지 않습니다. ========================================================================== */ @media (max-width: 767.98px) { :root { --c4-type-page-title-size: 30px; --c4-type-single-title-size: 22px; --c4-type-article-h2-size: 20px; --c4-type-article-h3-size: 18px; --c4-header-h: 72px; --c4-pad-top: 60px; --c4-page-title-gap: 28px; /* 푸터 — 세로 간격 셋이 PC 와 다릅니다(시안 실측). */ --c4-footer-pad-y: 28px; --c4-footer-gap-terms-logo: 24px; --c4-footer-gap-logo-company: 12px; --c4-footer-gap-company-copy: 8px; /* 띠 배너 — PC 는 가로 6, 모바일은 두 줄로 나뉘며 2 */ --c4-topbar-gap: 2px; /* 목록 세로 리듬 — ★ 40 / 60 / 40. 가운데만 60 입니다. */ --c4-list-gap-title-cards: 40px; --c4-list-gap-cards-pagination: 60px; --c4-list-gap-pagination-search: 40px; /* 글 카드 */ --c4-card-gap: 12px; --c4-card-text-pad-top: 0px; --c4-card-list-gap: 40px; /* 상세 — ★ 바깥 경계는 28, 아티클 안쪽은 20. 섞여 있는 것이 맞습니다. */ --c4-single-gap: 28px; --c4-article-gap: 20px; --c4-single-head-gap-date: 12px; /* 아티클 h4 — 모바일 h3(18)보다 한 단계 작게 */ --c4-type-article-h4-size: 16px; /* 같은 카테고리 글 */ --c4-related-list-pad-y: 6px; --c4-related-max-h: 334px; --c4-related-item-size: 15px; /* 빈 상태 · 404 */ --c4-empty-gap-title: 80px; } } /* ========================================================================== 헤더 국소 전환 — 1279px ★★ 이 값은 전환 기준선 3개(768 · 1024 · 1360)에 끼워 넣는 값이 아닙니다. 그 셋은 화면 구성이 바뀌는 선이고, 1279 는 헤더 컨테이너 폭 1280 에서 도출한 **헤더 안에서만 쓰는 국소값**입니다. 메뉴 항목이 늘어도 CTA 와 겹치지 않게 항목 간격만 32 → 16 으로 줄입니다. 다른 화면에서 이 값을 기준선처럼 쓰지 마세요. ========================================================================== */ @media (max-width: 1279px) { :root { --c4-header-menu-gap: 16px; } }