/* ========================================================================= * themes.css — 컬러 테마 & 폰트 * * 각 테마는 두 가지 방법으로 적용됩니다. * 1) — 사이트 전체에 적용 (실제 사용) * 2)
— 일부 영역에만 적용 (시안 비교 페이지) * 그래서 선택자를 항상 두 개씩 붙여 둡니다. * * 값을 지정하지 않은 토큰은 styles.css 의 :root 기본값(현재 파랑)을 그대로 씁니다. * ========================================================================= */ /* ---------------- 폰트 ---------------- */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); @import url('https://cdn.jsdelivr.net/npm/wanted-sans@1.0.3/fonts/webfonts/variable/split/WantedSansVariable.css'); @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Noto+Serif+KR:wght@500;600;700&display=swap'); :root{ --font-body:'Pretendard Variable',Pretendard,-apple-system,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; --font-head:var(--font-body); --head-ls:-.02em; /* 제목 자간 */ --head-w:700; /* 제목 굵기 */ } /* 원티드 산스 — 획이 또렷하고 기하학적. 큰 제목에서 강합니다. */ [data-font="wanted"], .f-wanted{ --font-body:'Wanted Sans Variable','Wanted Sans',Pretendard,-apple-system,system-ui,sans-serif; --font-head:var(--font-body); --head-ls:-.025em; } /* 본문은 산세리프, 제목만 세리프 — 에디토리얼·부티크 느낌 */ [data-font="serif"], .f-serif{ --font-body:'Pretendard Variable',Pretendard,-apple-system,system-ui,"Apple SD Gothic Neo",sans-serif; --font-head:'Instrument Serif','Noto Serif KR',Georgia,serif; --head-ls:-.01em; --head-w:600; } /* ---------------- 1. Ink — 무채색 + 최소한의 액센트 ---------------- */ /* Vercel·Linear 계열. 색을 거의 쓰지 않아 가장 오래 가고, 콘텐츠가 주인공이 됩니다. */ [data-theme="ink"], .t-ink{ --accent-bold:#0A0A0A; --accent:#0A0A0A; --accent-ring:rgba(0,0,0,.08); --primary:#0A0A0A; --primary-dark:#000000; --primary-soft:#F4F4F5; --link:#0A0A0A; --text:#09090B; --text-sub:#52525B; --text-mute:#A1A1AA; --border:#E9E9EC; --border-strong:#D4D4D8; --bg-page:#FFFFFF; --bg-soft:#FAFAFA; --success:#15803D; --danger:#DC2626; --radius:6px; --radius-lg:10px; } /* ---------------- 1b. Ink + 블루 포인트 ---------------- */ /* Ink 의 무채색 골격은 그대로 두고, 포인트 컬러만 그리팅 파랑(#0066CC)으로. * 버튼·로고는 검정으로 남겨 두는 것이 핵심입니다 — 파랑을 아껴 쓸수록 눈에 띕니다. * 파랑이 쓰이는 곳: 링크, 채용사명, 입력 포커스, 현재 위치 표시, 강조 띠. */ [data-theme="ink-blue"], .t-ink-blue{ --primary:#0A0A0A; /* 버튼·로고 — 검정 유지 */ --primary-dark:#000000; --primary-soft:#EDF4FD; /* 옅은 파랑 — 안내박스·현재 탭 배경 */ /* apple.com 이 실제로 쓰는 두 가지 파랑입니다. * #0066CC — 글자용. 흰 배경에서 대비 5.1:1 로 작은 글씨도 읽힙니다. * #0071E3 — 면·테두리용. 더 선명하지만 작은 글씨로 쓰면 대비가 부족합니다. * 애플이 링크와 버튼에 서로 다른 파랑을 쓰는 이유가 이것입니다. */ --accent:#0066CC; /* 채용사명·현재 위치 등 글자 */ --accent-bold:#0071E3; /* 포커스 테두리·강조 띠·카드 호버 */ --accent-ring:rgba(0,113,227,.14); --cta:#0A0A0A; /* 지원하기·제출하기 버튼 — 검정 */ --cta-dark:#000000; --link:#0066CC; --text:#09090B; --text-sub:#52525B; --text-mute:#A1A1AA; --border:#E9E9EC; --border-strong:#D4D4D8; --bg-page:#FFFFFF; --bg-soft:#FAFAFA; --success:#15803D; --danger:#DC2626; --radius:6px; --radius-lg:10px; } /* ---------------- 2. Indigo — 딥 인디고 ---------------- */ /* Linear·Stripe 계열. 신뢰감과 현대성을 동시에. 가장 무난하게 "테크"합니다. */ [data-theme="indigo"], .t-indigo{ --accent-bold:#5B5BD6; --accent:#5B5BD6; --accent-ring:rgba(91,91,214,.12); --primary:#5B5BD6; --primary-dark:#4A48C4; --primary-soft:#EEEEFB; --link:#5B5BD6; --text:#16161D; --text-sub:#60646C; --text-mute:#8B8D98; --border:#E8E8EC; --border-strong:#D8D9E0; --bg-page:#FFFFFF; --bg-soft:#FAFAFB; --success:#0F9D71; --danger:#E5484D; --radius:6px; --radius-lg:10px; } /* ---------------- 3. Evergreen — 딥 그린 ---------------- */ /* Ramp·Stripe 프리미엄 계열. 채용 사이트에서는 흔치 않아 기억에 남습니다. */ [data-theme="evergreen"], .t-evergreen{ --accent-bold:#0F5F48; --accent:#0F5F48; --accent-ring:rgba(15,95,72,.12); --primary:#0F5F48; --primary-dark:#0A4736; --primary-soft:#E8F2EE; --link:#0F5F48; --text:#111815; --text-sub:#55625C; --text-mute:#8C978F; --border:#E4E9E6; --border-strong:#D2DAD6; --bg-page:#FFFFFF; --bg-soft:#F7F9F8; --success:#0F5F48; --danger:#C0392B; --radius:6px; --radius-lg:10px; } /* ---------------- 4. Sand — 웜 뉴트럴 + 차콜 ---------------- */ /* 종이 질감의 오프화이트 배경. 기계적이지 않고, 사람을 다루는 일에 어울립니다. */ [data-theme="sand"], .t-sand{ --accent-bold:#A85C32; --accent:#A85C32; --accent-ring:rgba(168,92,50,.12); --primary:#1C1917; --primary-dark:#0C0A09; --primary-soft:#F2EDE6; --link:#A85C32; --text:#1C1917; --text-sub:#6B635B; --text-mute:#A39A90; --border:#E9E3DA; --border-strong:#D8D0C4; --bg-page:#FDFCFA; --bg-soft:#F6F2EC; --success:#15803D; --danger:#B3261E; --radius:4px; --radius-lg:8px; }