/* ============================================================ ㈜아이픽코리아 대표이사 디지털 명함 — Design Tokens ------------------------------------------------------------ 기준 파일: 아이픽코리아 홈페이지 /src/styles/tokens.css 색상·폰트·반경은 홈페이지 값을 그대로 가져왔습니다. 새로 지어낸 색은 하나도 없습니다. 타이포 스케일과 간격만 명함(모바일 단일 화면)용으로 축소했습니다. 주석 규칙 "홈페이지 동일" → 홈페이지 tokens.css 에서 그대로 가져온 값 "명함용" → 명함을 위해 새로 조정하거나 추가한 값 ⚠ 값을 바꿔야 하면 홈페이지 tokens.css 를 먼저 고치고 여기에 반영할 것. 반대 방향은 금지 — 홈페이지가 단일 진실 공급원입니다. ============================================================ */ /* ------------------------------------------------------------ FONT FACE — 홈페이지 동일 (자체 호스팅 서브셋) ⚠ 서브셋 파일은 명함 전용이다. tools/fonts.py 가 명함에 실제로 그려지는 글자만 골라 tools/source/ 의 원본 폰트에서 잘라 낸다 (node tools/build.mjs 가 호출한다). 홈페이지 서브셋을 그대로 복사해 쓰던 때에는 "휴대폰"·"닫기"·"갱신"의 일부 글자가 없어 그 글자만 시스템 서체로 보였다. ⚠ 디스크립터는 홈페이지와 글자 그대로 맞춰 두었습니다. font-weight 를 45 920 으로 적는 것도 원본이 그렇게 선언하기 때문입니다. ------------------------------------------------------------ */ @font-face { font-family: "Pretendard Variable"; font-style: normal; font-display: swap; font-weight: 45 920; src: url("/assets/fonts/PretendardVariable.subset.woff2") format("woff2-variations"); } @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/Inter.subset.woff2") format("woff2-variations"); } :root { /* -------------------------------------------------------- 1. COLOR — 홈페이지 팔레트에서 명함에 실제로 쓰는 것만 추림 사용 비율 원칙: 화이트·그레이 70% / 네이비·청록 25% / accent 5% 이내 -------------------------------------------------------- */ /* Brand — Navy — 홈페이지 동일 */ --navy-900: #0a1e3c; /* 명함 상단 헤더 배경 */ --navy-700: #12356b; /* 이름·제목 등 강조 텍스트 */ /* Brand — Teal — 홈페이지 동일 로고 실측 대조 완료: 로고의 청록 밴드(hue 190~209)가 아래 값과 일치. 최초 기획의 로얄블루(#1B6FD4)는 로고와 계열이 달라 홈페이지 단계에서 이미 폐기된 색입니다. 명함에도 쓰지 말 것. 대비: teal-500 위 흰 텍스트 5.68:1 / navy-900 위 teal-300 6.93:1 (AA 충족) */ --teal-500: #0f6e96; /* 브랜드 메인: 액션 버튼, 링크, 아이콘 */ --teal-300: #4fb4d8; /* 다크 헤더 위 보조 액센트 */ --teal-050: #ecf5f9; /* 블록 구분용 연한 배경 */ /* Neutral — 홈페이지 동일 */ --white: #ffffff; --gray-100: #f4f6f8; /* 연락처 카드 배경 */ --gray-300: #d8dee5; /* 보더, 항목 구분선 */ --gray-600: #5a6673; /* 연락처 라벨 등 보조 텍스트 */ --black-900: #111417; /* 본문 기본 텍스트 */ /* 홈페이지의 --gray-450 은 입력칸 플레이스홀더 전용이라 제외했습니다. 명함에는 폼이 없습니다. */ /* Accent — 홈페이지 동일. 극도로 제한적 사용. 명함에서는 24시간 긴급 대응 배지가 있을 경우에만. 없으면 미사용. */ --accent: #e8433a; /* ----- 의미론적 별칭 — 홈페이지 동일 ----- card.css 에서는 원색 변수보다 아래 별칭을 우선 사용할 것. */ --color-text: var(--black-900); --color-text-muted: var(--gray-600); --color-text-invert: var(--white); --color-heading: var(--navy-700); --color-bg: var(--white); --color-bg-subtle: var(--teal-050); --color-bg-card: var(--gray-100); --color-bg-dark: var(--navy-900); --color-border: var(--gray-300); --color-border-strong: var(--navy-700); --color-border-dark: rgba(255, 255, 255, 0.16); /* 다크 헤더 내부 구분선 */ --color-link: var(--teal-500); --color-link-hover: var(--navy-700); --color-focus: var(--teal-500); /* 명함 상단 네임블록 오버레이 — 홈페이지 --overlay-hero 와 동일 각도·색. 배경 이미지를 안 쓰면 미사용. 홈페이지 동일 값. */ --overlay-hero: linear-gradient( 100deg, rgba(10, 30, 60, 0.92) 0%, rgba(10, 30, 60, 0.86) 45%, rgba(18, 53, 107, 0.72) 100% ); /* -------------------------------------------------------- 2. TYPOGRAPHY — 폰트 스택·두께는 홈페이지 동일 -------------------------------------------------------- */ --font-ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* 홈페이지 동일 */ --font-en: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Arial, sans-serif; /* 홈페이지 동일 */ --font-body: var(--font-ko); /* /en/ 문서는 html[lang="en"] 에서 재정의 */ --font-mono-num: var(--font-en); /* 전화번호·영문 라벨 조판 */ /* 화면에 섞여 나오는 영문 표기(회사 영문명·네트워크 표기·QR 주소·EN 버튼). 한국어 페이지에서는 Pretendard 로 돌린다 — Pretendard 의 영문은 Inter 를 바탕으로 만든 것이라 모양 차이가 거의 없는데, 이렇게 하면 한국어 방문자가 Inter(28KB)를 아예 받지 않는다. 첫 화면이 그만큼 빨라진다. */ --font-latin: var(--font-en); /* Weight — 홈페이지 동일 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* -------------------------------------------------------- 3. TYPE SCALE — 명함용 축소 홈페이지 스케일은 데스크톱 1200px 지면 기준이라 명함에 그대로 쓰면 이름 한 줄이 화면 폭을 넘습니다. 아래는 360~430px 지면 기준입니다. 역할 이름으로 선언해 card.css 가 크기 숫자를 몰라도 되게 했습니다. -------------------------------------------------------- */ /* 이름 — 명함에서 가장 큼. 홈페이지 --fs-h1(최대 3.5rem)을 축소. 상한 2.25rem 은 "홍길동" 3자 + 영문 성명 병기가 한 줄에 들어가는 폭. */ --fs-name: clamp(1.75rem, 7vw, 2.25rem); /* 직함(대표이사 / CEO) — 홈페이지 --fs-h4(1.0625rem)와 같은 값 */ --fs-title: 1.0625rem; /* 홈페이지 동일 */ /* 회사명 — 홈페이지 --fs-body 와 같은 값 */ --fs-company: 1rem; /* 홈페이지 동일 */ /* 배지 텍스트 — 홈페이지 --fs-eyebrow 와 같은 값 */ --fs-badge: 0.75rem; /* 홈페이지 동일 */ /* 연락처 라벨(휴대폰 / 이메일 …) — eyebrow 와 같은 크기 */ --fs-label: 0.75rem; /* 홈페이지 --fs-eyebrow 동일 */ /* 연락처 값(번호·주소) — 탭 대상이므로 본문 크기 유지, 축소 금지 */ --fs-value: 1rem; /* 홈페이지 --fs-body 동일 */ /* 캡션(주소 보조행, 갱신일) — 홈페이지 --fs-caption 동일 */ --fs-caption: 0.875rem; /* 홈페이지 동일 */ /* Line height — 홈페이지 동일 */ --lh-tight: 1.2; /* 이름 */ --lh-snug: 1.4; /* 직함, 회사명, 연락처 값 */ --lh-body: 1.7; /* 주소 등 여러 줄 본문 */ /* Letter spacing — 홈페이지 동일 */ --ls-heading-ko: -0.02em; --ls-heading-en: 0em; --ls-body: 0em; --ls-badge: 0.14em; /* 홈페이지 --ls-eyebrow 동일 */ /* -------------------------------------------------------- 4. SPACING — 8px 기반. 이 외 수치 사용 금지. — 홈페이지 동일 홈페이지의 --space-5(64) / --space-6(96)은 섹션 간 여백용이라 단일 화면 명함에는 제외했습니다. (명함용) -------------------------------------------------------- */ --space-1: 8px; /* 라벨↔값 */ --space-2: 16px; /* 연락처 항목 간 */ --space-3: 24px; /* 블록 간 */ --space-4: 40px; /* 헤더↔본문, 본문↔푸터 */ /* -------------------------------------------------------- 5. LAYOUT — 명함용 홈페이지의 12컬럼 그리드·1200px 컨테이너는 명함에 불필요합니다. -------------------------------------------------------- */ --card-max: 420px; /* 큰 화면에서도 명함 폭은 이 이상 벌리지 않음 */ --card-pad: 24px; /* 좌우 여백 = --space-3 */ /* 터치 타깃 최소 크기. 전화·메일·저장 버튼 전부 이 값 이상. iOS HIG 44pt / WCAG 2.5.5 기준. 명함은 전부 탭으로 쓰는 화면이라 홈페이지보다 중요합니다. */ --tap-min: 44px; /* -------------------------------------------------------- 6. SHAPE & LINE — 홈페이지 동일 각진 형태 = 물류·해운의 신뢰감. pill(999px) 금지. -------------------------------------------------------- */ --radius: 4px; --radius-sm: 2px; --border-w: 1px; --border: var(--border-w) solid var(--color-border); --border-dark: var(--border-w) solid var(--color-border-dark); /* 그림자는 최소화. 명함에서는 아래 하나만 사용. (명함용) (홈페이지 --shadow-header / --shadow-header-lift 는 sticky 헤더 전용이라 제외) 색은 navy-900 계열 — 회색 그림자는 종이처럼 보입니다. */ --shadow-overlay: 0 8px 24px rgba(10, 30, 60, 0.12); /* 홈페이지 동일 */ /* -------------------------------------------------------- 7. MOTION — 홈페이지 동일 — transform 금지. -------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur: 200ms; --transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease); /* -------------------------------------------------------- 8. FOCUS — 홈페이지 동일 — 모든 인터랙티브 요소에 적용. -------------------------------------------------------- */ --focus-ring: 2px solid var(--color-focus); --focus-offset: 2px; /* -------------------------------------------------------- 9. Z-INDEX — 명함용 축소 명함에는 헤더·드로어·모바일바가 없습니다. 남은 건 QR 모달과 "복사됨" 토스트뿐입니다. -------------------------------------------------------- */ --z-base: 1; --z-modal: 400; /* QR 확대 보기 */ --z-toast: 450; /* 복사 완료 피드백 — 모달 위에 보여야 함 */ } /* ------------------------------------------------------------ 언어별 조판 — 홈페이지 동일 영문 문서는 Inter를 본문 기본값으로, 제목 자간을 0으로. ------------------------------------------------------------ */ html[lang="en"] { --font-body: var(--font-en); --ls-heading: var(--ls-heading-en); } html[lang="ko"] { --font-body: var(--font-ko); --ls-heading: var(--ls-heading-ko); --font-latin: var(--font-ko); } /* ------------------------------------------------------------ 모션 최소화 선호 사용자 존중 — 홈페이지 동일 ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dur: 1ms; } }