/* ═══════════════════════════════════════════════════════════ default 레이아웃 스킨 — 참고 디자인 재현 (헤더·GNB·푸터 크롬). - 디자인 토큰(@import) 보존 (기존 그대로) - 크롬 전용 수치는 --skin-* 지역 변수로 분리, 전역 토큰 오염 없음 - 원본 CSS 참조 불가로 디자인 명세 수치를 직접 적용 ═══════════════════════════════════════════════════════════ */ /* ── 디자인 토큰 (반드시 다른 규칙보다 먼저) ─────────────────── */ @import url("./tokens/colors.css"); @import url("./tokens/typography.css"); @import url("./tokens/spacing.css"); @import url("./tokens/radius.css"); @import url("./tokens/shadows.css"); @import url("./tokens/motion.css"); /* =========================================================== [디자이너 가이드] nodongtalktalk 레이아웃 스킨 — style.css =========================================================== 이 파일은 헤더·GNB·본문·푸터의 레이아웃 공통 디자인을 담당합니다. 홈 화면 전용 디자인은 main/nodongtalktalk/css_images/main.css 파일에 있습니다. ■ 무엇을 어디서 바꾸나 · 브랜드 색상 / 헤더·푸터 색: 바로 아래 :root { ... } 블록의 값을 수정하세요. (구체적 안내는 각 변수 옆 한글 설명 참고) · 로고 이미지: css_images/images/logo.png 를 같은 파일명으로 덮어쓰세요. · 헤더 높이: --skin-header-h 값을 바꾸세요 (기본 100px). · 푸터 배경색·글자색: --skin-footer-bg, --skin-footer-text 값을 바꾸세요. · 콘텐츠 최대 폭: --skin-container 값을 바꾸세요 (기본 1400px). · 폰트(글꼴): 아래 @font-face 블록의 woff2 파일을 교체하거나, body { font-family: ... } 부분에서 폰트 이름을 변경하세요. 폰트 파일은 css_images/fonts/ 폴더에 있습니다. ■ 주의 · 색상 변수 이름(--skin-... 형식)은 바꾸지 마세요. 값(#224191 같은 색코드)만 수정하세요. · 선택자(.site-header, .gnb 등)의 이름은 HTML과 연결되므로 변경 금지. =========================================================== */ /* ── 크롬 전용 스킨 변수 (전역 토큰 미오염) ─────────────────── */ /* 👉 아래 색상 값(#...)을 수정해 브랜드 색상을 바꿀 수 있습니다. */ :root { /* ★★★ 사이트 주색(브랜드) ★★★ 이 한 줄이 헤더·GNB·버튼·강조 전체를 결정합니다. 디자인 시스템(--ds-primary)도 이 값을 자동으로 따릅니다. 사이트 브랜드 변경 = 아래 값만 수정. (스킨 구조: 같은 폴더 README.md) */ --skin-primary: #15527A; /* 브랜드 블루(디자인 산출물 content.css --primary, 콘텐츠 페이지용) */ --skin-header-accent: #053863; /* 헤더/GNB/메가메뉴 전용 강조색(디자인 산출물 style.css/main.css --navy 그대로) */ --skin-accent: #15527A; /* 보조 블루 */ --skin-footer-bg: #102B3A; /* 푸터 배경(다크 네이비) */ --skin-footer-text: #FFFFFF; /* 푸터 본문 */ --skin-footer-strong: #FFFFFF; /* 푸터 강조 */ --skin-footer-privacy: #FFFFFF; /* 개인정보처리방침 강조 */ --skin-section-bg: #f3f3f3; /* 섹션 배경 */ --skin-container: 1400px; /* 최대폭(디자인 산출물 header-bar/page-body max-width) */ --skin-header-h: 100px; /* 메인헤더 높이(디자인 산출물 header-bar height) */ --skin-gnb-fs: 20px; /* GNB 1차 폰트(디자인 산출물 nav font-size) */ --skin-gutter: 24px; } /* 👉 폰트 교체: 아래 src: url('...') 경로를 바꾸세요. */ /* ── 웹폰트: Pretendard (외부 CDN 우선 로드, 실패 시 로컬 자가호스팅 폰트로 폴백) ────────── src에 두 경로를 콤마로 나열하면 브라우저가 순서대로 시도하다가 첫 번째(CDN) 요청이 실패(네트워크 차단·404 등)할 때만 다음 경로(로컬 woff2)로 자동 폴백한다 — 별도 스크립트 불필요. 폐쇄망(인터넷 차단) 환경에서도 로컬 폰트로 정상 표시됨. */ @font-face { font-family: 'Pretendard'; font-weight: 400; font-style: normal; font-display: optional; /* 폰트 로드 후 스왑 금지 → 페이지 전체 리플로우(흔들림) 제거 */ src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'), url('./fonts/Pretendard-Regular.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 600; font-style: normal; font-display: optional; /* 폰트 로드 후 스왑 금지 → 페이지 전체 리플로우(흔들림) 제거 */ src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'), url('./fonts/Pretendard-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-style: normal; font-display: optional; /* 폰트 로드 후 스왑 금지 → 페이지 전체 리플로우(흔들림) 제거 */ src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'), url('./fonts/Pretendard-Bold.woff2') format('woff2'); } /* 인사말(menu-11) 서명 손글씨체(노회찬재단 배포 '노회찬체', 상업적 이용 가능) — 로컬 자가호스팅(폐쇄망 대응). font-display:swap이라 폰트 로드 전/실패 시에도 font-family 폴백(Pretendard)으로 즉시 보이고, 로드되면 자연스럽게 손글씨체로 바뀐다. */ @font-face { font-family: 'NohHaeChan'; font-weight: 500; font-style: normal; font-display: swap; src: url('./fonts/NohHaeChan.woff') format('woff'); } /* ── 기본 리셋 ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* scrollbar-gutter: 짧은/긴 페이지 이동 시 스크롤바 유무로 폭이 변해 헤더(가운데 정렬)·GNB가 좌우로 흔들리는 현상 방지 — 스크롤바 공간 항상 예약 */ html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-x: auto; } /* PC 화면은 1600px을 기준폭으로 유지 — 그 밑으로 줄어들면(1024px까지) 축소 대신 가로 스크롤. 1024px 이하는 아래 @media에서 해제(모바일은 완전 반응형). */ body { margin: 0; min-height: 100vh; min-width: 1600px; overflow-x: auto; display: flex; flex-direction: column; font-family: var(--font-sans); font-size:1.7rem; line-height: 1.5; letter-spacing: -0.025em; color: #111; background: #ffffff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; word-break: keep-all; } img { max-width: 100%; } /* button은 브라우저 기본 UI 폰트를 쓰기 때문에 body의 font-family를 상속하지 않음 — 명시적으로 지정 필요 */ button { font-family: var(--font-sans); } a { color: var(--skin-primary); text-decoration: none; } a:hover { color: var(--skin-accent); } /* ── 접근성: 포커스 링(3px 고대비) — 절대 제거 금지 ──────────── */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ── 접근성: 본문 바로가기 ──────────────────────────────────── */ .skip-link { position: absolute; left: var(--space-4); top: -64px; z-index: 200; padding: var(--space-2) var(--space-4); background: var(--skin-primary); color: #ffffff; border-radius: var(--radius-md); font-weight: 600; font-size:1.5rem; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: var(--space-3); color: #ffffff; } /* 👉 헤더 디자인 구역입니다. 디자인 산출물 index.html의 header#header를 그대로 이식(유틸바 없음, sticky 아님). */ /* ════════════════════════════════════════════════════════════ HEADER — 로고 + GNB(가운데) + 아이콘형 유틸(우측) ════════════════════════════════════════════════════════════ */ .site-header { position: relative; background: #ffffff; border-bottom: 1px solid #eee; } .site-header__inner { max-width: var(--skin-container); margin: 0 auto; padding: 0; height: var(--skin-header-h); display: flex; align-items: center; justify-content: space-between; position: relative; } /* 로고 */ /* display:flex로 감싸 inline-block 기본 baseline strut(줄높이 기반 여백)을 제거 — 그렇지 않으면 로고 이미지 아래 보이지 않는 여백이 생겨 헤더 중앙보다 위로 치우쳐 보인다. */ .site-brand-wrap { flex-shrink: 0; display: flex; align-items: center; } .site-brand { display: inline-block; line-height: 0; } .site-brand__logo-dynamic, .site-brand__logo-static { height: 45px; width: auto; display: block; } /* 우측 아이콘 유틸(로그인/검색/전체메뉴) */ .site-header__actions { display: flex; align-items: center; gap: 20px; flex: none; } .site-header__action { display: flex; align-items: center; justify-content: center; color: #000; border: 0; background: none; padding: 0; cursor: pointer; transition: color .15s; } .site-header__action:hover { color: var(--skin-header-accent); } .site-header__hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 28px; height: 21px; } .site-header__hamburger span { display: block; height: 2px; background: #000; } /* 인증 후 사람 아이콘: 신청내역/로그아웃 드롭다운(.page-breadcrumb__dropdown과 동일한 톤) */ .site-header__account { position: relative; } /* 버튼과 드롭다운 사이 margin-top(10px) 간격은 :hover 판정에는 포함되지 않는 "빈 공간"이라 마우스가 버튼→드롭다운으로 이동하는 도중 그 틈을 지나는 순간 hover가 끊겨 메뉴가 먼저 사라진다 — .site-header__account에 그 틈만큼 투명한 ::after를 깔아 hover 영역을 이어준다(요청사항). */ .site-header__account::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } .site-header__account-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 10px 0 0; padding: 6px; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #e7edf7; border-radius: 10px; box-shadow: 0 14px 32px rgba(16,42,99,.14); z-index: 10; min-width: 96px; text-align: center; } /* 클릭(기존, 키보드·터치 접근성 유지) + 마우스오버 둘 다 열림 — 데스크톱은 호버로 바로 확인 가능 */ .site-header__account.is-open .site-header__account-menu, .site-header__account:hover .site-header__account-menu { display: flex; } .site-header__account-menu a { display: block; padding: 7px 10px; border-radius: 8px; font-size:1.4rem; font-weight: 600; color: #444; text-decoration: none; white-space: nowrap; } .site-header__account-menu a:hover { background: #f5f8fc; color: var(--skin-primary); } /* 마이페이지 드롭다운 인사말("OOO님 반갑습니다.") — 링크가 아닌 안내 텍스트라 클릭 불가 표시(hover 배경 없음), 기본 드롭다운(min-width:96px)보다 문장이 길어 이 드롭다운만 폭을 넓히고, 마이페이지 링크와 동일하게 중앙 정렬 */ .site-header__account-menu--mypage { min-width: 170px; text-align: center; } /* 인사말은 안내 전용이라 아래 "마이페이지" 링크와 구분되도록 배경을 깔아 카드 형태로 분리(border-radius는 상위 드롭다운(10px)에서 padding(6px)만큼 안쪽으로 맞춘 8px) */ .site-header__account-greeting { margin: -6px -6px 6px; padding: 15px; background: #f5f8fc; border-radius: 8px 8px 0 0; font-size:1.5rem; font-weight: 600; color: #444; white-space: nowrap; } /* 👉 GNB(상단 내비게이션) — 디자인 산출물의 nav(5열 grid, 가운데)+메가메뉴를 이식. 메뉴 항목 자체(문구·개수)는 CMS 메뉴관리(menus.json)에서 변경합니다. */ /* ════════════════════════════════════════════════════════════ GNB — 5열 그리드 내비 + 전체컬럼 동시노출 메가패널 마크업(공유 프래그먼트, 고정): nav.gnb > ul > li > (a|span) + ul(2차) > li > (a|span) 디자인 산출물은