/* ============================================================ 단계 0: 파일 개요 — v3 "Tinted Grid" (목업 2a) - 파일명: style/tokens.css - 역할: 전 사이트 공통 디자인 토큰 단일 소스 (Single Source of Truth) - 근거: DESIGN.md v3 — 연한 파랑 패널(#EEF7FC) + 흰 셀 + 2px 잉크 룰 - 원칙: 그라디언트·그림자·라운드 금지 / 2px 잉크 룰로 구획 / 1px 내부 구분선 - 사용법: 각 페이지 에 아래 한 줄 추가 페이퍼(리딩) 표면 페이지는 선언 ============================================================ */ /* ============================================================ 단계 1: 다크 표면 — 기본값 (홈 · 허브 · 네비 · 푸터 = 상황실) ============================================================ */ :root { /* 단계 1-1: 브랜드 원색 v2 (Raw Palette) */ --maca-night: #0D2733; /* 잉크 — 2px 룰·제목·본문 텍스트 */ --maca-night-mid: #FFFFFF; /* 흰 셀 — 섹션 구분 */ --maca-night-card: #FFFFFF; /* 흰 셀 — 카드 */ --maca-blue: #0A5A73; /* 딥 시안 — 유일한 브랜드 액센트 (링크·CTA·수치) */ --maca-blue-bright: #073E52; /* 호버 — 라이트 배경이므로 더 진하게 */ --maca-blue-deep: #0A5A73; /* 액센트 동일값 (WCAG AA) */ --maca-paper: #EEF7FC; /* 연한 파랑 패널 — 페이지 바탕 */ --maca-paper-soft: #FFFFFF; /* 흰 셀 — 인용·하이라이트 */ --maca-gray: #52707E; /* 뮤트 블루그레이 — 다크 표면 보조 텍스트 */ --maca-health: #4CAF8D; /* High Health 데이터 의미색 (긍정 지표 전용) */ --maca-corrosive: #E4574A; /* Corrosive 데이터 의미색 (위험 지표 전용 — 장식 금지) */ /* 단계 1-2: 구 팔레트 별칭 (하위 호환 — 기존 페이지가 참조하는 이름을 새 값으로 연결) ※ 신규 코드에서는 사용 금지, 위의 v2 토큰을 사용할 것 */ --maca-ink: var(--maca-night); /* 구 잉크 → 미드나이트 네이비 */ --maca-slate: var(--maca-night-card); /* 구 슬레이트 → 다크 카드 */ --maca-slate-mid: #24365A; /* 구 미드 슬레이트 → 보조 다크 */ --maca-cyan: var(--maca-blue); /* 구 사이언 → 시그널 블루 */ --maca-cyan-bright: var(--maca-blue-bright); /* 구 밝은 사이언 → 밝은 블루 */ --maca-cyan-deep: var(--maca-blue-deep); /* 구 딥 사이언 → 차터 블루 */ /* 단계 1-3: 시맨틱 토큰 (페이지 코드는 반드시 이것만 참조) */ --bg: var(--maca-paper); /* v3: 연한 파랑 패널 */ --bg-section: #FFFFFF; /* v3: 흰 셀 */ --bg-card: #FFFFFF; /* v3: 흰 셀 */ --text: #0D2733; /* v3: 잉크 텍스트 */ --text-muted: #2C4E5E; /* v3: 본문 보조 */ --accent: var(--maca-blue); /* 링크·강조·액센트 */ --accent-hover: var(--maca-blue-bright); /* 호버 상태 액센트 */ --border: #0D2733; /* v3: 2px 잉크 룰 */ --border-light: rgba(13,39,51,0.30); /* v3: 1px 내부 구분선 */ /* 단계 1-4: 타이포그래피 — 세리프는 서사, 산세리프는 구조 */ --font-display: 'Playfair Display', serif; /* 히어로·섹션 제목 */ --font-serif: 'Noto Serif KR', Georgia, serif; /* 리딩 지면 본문 (저널 조판) */ --font-body: 'Inter', 'Noto Sans KR', sans-serif; /* UI·라벨·네비·버튼 */ --fs-hero: clamp(2.4rem, 5vw, 4rem); /* 히어로 타이틀 */ --fs-h2: clamp(1.6rem, 3vw, 2.2rem); /* 섹션 타이틀 */ --fs-h3: 1.25rem; /* 카드·소제목 */ --fs-body: 1.02rem; /* 세리프 본문 기준 */ --fs-small: 0.85rem; /* 메타·캡션·라벨 */ /* 단계 1-5: 간격 · 기하학 — 직각·헤어라인·무그림자 (인쇄물 서명) */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 2rem; --space-4: 4rem; --radius-sm: 0px; /* v2: 전 UI 직각 — 라운드 금지 */ --radius-md: 0px; /* v2: 카드도 직각 */ --shadow-card: none; /* v2: 드롭섀도 전면 금지 — 헤어라인이 위계를 만든다 */ --motion: 0.2s ease; /* 표준 전환 시간 */ } /* ============================================================ 단계 2: 페이퍼 표면 — 리딩 지면 (리더 상세 등 장문 영역) - 선언 시 시맨틱 토큰만 재정의 ============================================================ */ [data-surface="light"] { --bg: var(--maca-paper); /* 웜 페이퍼 배경 */ --bg-section: #FDFCF9; /* 본문 지면 (페이퍼보다 반 단계 밝게) */ --bg-card: var(--maca-paper-soft); /* 인용·하이라이트 박스 */ --text: var(--maca-night); /* 잉크 텍스트 = 다크 배경색과 동일값 (연속성) */ --text-muted: #5C6B7A; /* 페이퍼용 보조 텍스트 */ --accent: var(--maca-blue-deep); /* 차터 블루 (페이퍼 대비 AA) */ --accent-hover: #2E77C8; /* 호버 시 한 단계 밝게 */ --border: rgba(14,22,38,0.30); /* 진한 잉크 헤어라인 */ --border-light: rgba(14,22,38,0.12); /* 기본 잉크 헤어라인 */ --shadow-card: none; /* 페이퍼 표면도 무그림자 */ } /* ============================================================ 단계 3: 공통 접근성 — 모션 감소 설정 존중 (전 페이지 자동 적용) ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; /* 애니메이션 사실상 제거 */ animation-iteration-count: 1 !important; /* 반복 차단 */ transition-duration: 0.01ms !important; /* 전환 즉시 완료 */ scroll-behavior: auto !important; /* 부드러운 스크롤 해제 */ } } /* ============================================================ 단계 4: 공통 네비게이션 컴포넌트 (.maca-nav) - 전 페이지 동일 마크업, 표면에 따라 색 자동 결정 ============================================================ */ .maca-nav { position: sticky; top: 0; z-index: 100; /* 단계 4-1: 상단 고정 */ display: flex; align-items: center; /* 단계 4-2: 가로 정렬 */ justify-content: space-between; /* 단계 4-3: 로고-메뉴 양끝 배치 */ padding: 0.9rem var(--space-3); /* 단계 4-4: 토큰 간격 */ background: var(--maca-night); /* 단계 4-5: 네비는 표면 무관 네이비 띠 고정 */ border-bottom: 1px solid var(--border-light); /* 단계 4-6: 하단 헤어라인 */ } .maca-nav__logo { display: flex; align-items: center; gap: 0.7rem; /* 단계 4-7: 로고 정렬 */ text-decoration: none; } .maca-nav__logo img { height: 28px; width: auto; display: block; /* 단계 4-8: 로고 크기 */ background: #fff; padding: 4px 8px; /* 단계 4-9: 흰 칩 처리 */ border-radius: 0; box-sizing: content-box; /* v2: 직각 */ } .maca-nav__logo span { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700; color: var(--maca-blue); /* 단계 4-10: 워드마크 = 시그널 블루 */ letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; } .maca-nav__logo small { display: block; font-size: 0.6rem; font-weight: 400; color: var(--maca-gray); letter-spacing: 0.14em; } .maca-nav__links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; align-items: center; } .maca-nav__links a { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; /* 킥커(kicker) 스타일 */ letter-spacing: 0.12em; text-transform: uppercase; color: var(--maca-gray); text-decoration: none; transition: color var(--motion); /* 단계 4-11: 표준 모션 */ } .maca-nav__links a:hover, .maca-nav__links a:focus-visible { color: var(--maca-blue); } /* 단계 4-12: 호버 = 블루 */ .maca-nav__lang { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--maca-blue); background: transparent; border: 1px solid rgba(91,155,230,0.35); border-radius: 0; /* v2: 직각 */ padding: 0.35rem 0.7rem; cursor: pointer; transition: all var(--motion); } .maca-nav__lang:hover { background: var(--maca-blue); color: var(--maca-night); } /* 반전 호버 */ /* ============================================================ 단계 5: 공통 버튼 · 카드 · 인용 컴포넌트 — 직각·헤어라인·무그림자 ============================================================ */ .maca-btn { display: inline-block; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; /* 킥커 버튼 */ color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 0; /* v2: 직각 */ padding: 0.65rem 1.5rem; text-decoration: none; cursor: pointer; transition: all var(--motion); } .maca-btn:hover { background: var(--accent); color: var(--bg); } /* 호버 반전 */ .maca-btn--primary { background: var(--accent); color: var(--bg); } /* 주요 CTA = 채움 */ .maca-btn--primary:hover { background: var(--accent-hover); } .maca-card { background: var(--bg-card); border: 1px solid var(--border-light); /* 1px 헤어라인이 유일한 윤곽 */ border-radius: 0; /* v2: 직각 */ box-shadow: none; /* v2: 무그림자 */ padding: var(--space-3); transition: border-color var(--motion), background-color var(--motion); } .maca-card:hover { border-color: var(--border); } /* v2: 부상 효과 대신 헤어라인 강화 */ .maca-quote { border-left: 2px solid var(--text); /* 인용 = 잉크색 보더 (인쇄 조판) */ background: var(--bg-card); padding: var(--space-2) var(--space-3); border-radius: 0; font-family: var(--font-display); font-style: italic; } /* ============================================================ 단계 6: 데이터 의미색 유틸리티 — 등급 표시 전용 ============================================================ */ .maca-grade-health { color: var(--maca-health); } /* High Health */ .maca-grade-moderate { color: var(--text-muted); } /* Moderate — 뮤트 */ .maca-grade-corrosive { color: var(--maca-corrosive); } /* Corrosive — 데이터에만 */ /* ============================================================ 단계 7: 아카이브 사진 처리 — 흑백 통일 (에디토리얼 서명) ============================================================ */ .maca-photo { filter: grayscale(1); } /* 초상·자료 사진 흑백 처리용 클래스 */