/* ============================================================================= token.css — 더파크사이드 서울 디자인 토큰 ----------------------------------------------------------------------------- 컨셉: 컬러/폰트/폰트사이즈/여백. 여백 리듬은 orsia.co.kr을 따름. 사용: 모든 페이지 에서 header.css보다 먼저 . 원칙: 새 섹션/컴포넌트의 색·폰트·여백·글자크기는 반드시 아래 var(--token) 사용. (하드코딩 hex/px 금지 — 외부 사이트 섹션을 가져올 때도 토큰으로 치환) ============================================================================= */ /* ============================= FONT FACE ================================== */ /* 영문/숫자 세리프 (제목·디스플레이) — Cormorant Garamond (OFL, 무료) */ @font-face { font-family:'Cormorant Garamond'; src:url('../font/cormorant-garamond-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Cormorant Garamond'; src:url('../font/cormorant-garamond-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Cormorant Garamond'; src:url('../font/cormorant-garamond-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } /* 영문/숫자 산세리프 (본문 라틴) — Inter (OFL, 무료) */ @font-face { font-family:'Inter'; src:url('../font/inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Inter'; src:url('../font/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } /* 한글 (본문) — Pretendard (OFL, 무료). Inter에 한글이 없어 한글 글리프 담당 */ @font-face { font-family:'Pretendard'; src:url('../font/Pretendard-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Pretendard'; src:url('../font/Pretendard-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Pretendard'; src:url('../font/Pretendard-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } :root { /* =========================================================================== 1. COLOR - 브랜드 코어 3색(컬러칩) + 각 스케일 + 보색(accent) + 뉴트럴 + 시맨틱 ========================================================================= */ /* --- 브랜드 코어 (지정값) --- */ --color-primary: #5F4526; /* 메인 — warm brown */ --color-bg: #A79D92; /* 배경 — taupe / greige */ --color-text: #241917; /* 본문 블랙 텍스트 */ /* --- Primary scale (브라운 틴트/셰이드) --- */ --color-primary-50: #F7F1E9; --color-primary-100: #ECE3D6; --color-primary-200: #D4C5AE; --color-primary-300: #B29A78; --color-primary-400: #8E6E45; --color-primary-500: #74562F; --color-primary-600: #5F4526; /* = --color-primary */ --color-primary-700: #4C371E; --color-primary-800: #3A2A17; --color-primary-900: #2A1E10; /* --- Accent = Primary의 보색 (색상환 반대편, 딥 스틸블루) --- */ --color-accent: #263F5F; /* 보색 base */ --color-accent-50: #EEF3F8; --color-accent-100: #DBE4EE; --color-accent-200: #B0C2D6; --color-accent-300: #7C97B7; --color-accent-400: #4C6E97; --color-accent-500: #33547A; --color-accent-600: #263F5F; /* = --color-accent */ --color-accent-700: #1E374C; --color-accent-800: #182B3D; --color-accent-900: #12202E; /* --- Map marker (조닝맵 핀 번호와 매핑되는 리스트 마커) --- */ --color-map-marker: #DE2F43; /* --- Neutral (배경 taupe ~ 본문 블랙 축의 웜 그레이) --- */ --color-neutral-0: #FFFFFF; --color-neutral-50: #F7F5F2; --color-neutral-100: #EFEBE6; --color-neutral-200: #E2DCD4; --color-neutral-300: #CFC7BC; --color-neutral-400: #BBB1A4; --color-neutral-500: #A79D92; /* = --color-bg */ --color-neutral-600: #8B8175; --color-neutral-700: #6B6259; --color-neutral-800: #47403A; --color-neutral-900: #241917; /* = --color-text */ /* --- 시맨틱 별칭 (실제 사용 시 이 토큰들을 우선 사용) --- */ --color-surface: var(--color-neutral-0); /* 카드/콘텐츠 면 */ --color-surface-alt: var(--color-neutral-50); /* 옅은 대체 면 */ --color-surface-muted: var(--color-neutral-100); --color-heading: var(--color-primary); /* 제목색(브라운) */ --color-body: var(--color-text); /* 본문색 */ --color-body-muted: var(--color-neutral-700); /* 보조 텍스트 */ --color-border: var(--color-neutral-300); --color-border-strong: var(--color-neutral-400); --color-on-primary: var(--color-neutral-0); /* primary 위 글자 */ --color-on-accent: var(--color-neutral-0); --color-on-bg: var(--color-text); /* bg(taupe) 위 글자 */ --color-link: var(--color-accent); --color-link-hover: var(--color-accent-700); /* --- 기능색 (브랜드 톤에 맞춘 최소 세트) --- */ --color-success: #4B6B4A; --color-warning: #B08430; --color-error: #9B3B2E; --color-info: var(--color-accent); /* =========================================================================== 2. TYPOGRAPHY ========================================================================= */ /* 폰트 패밀리 */ --font-serif: 'Cormorant Garamond', 'Times New Roman', serif; /* 영문 제목/디스플레이 */ --font-sans: 'Inter', 'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; /* 본문(라틴=Inter, 한글=Pretendard) */ --font-display: var(--font-serif); --font-heading: var(--font-serif); --font-body: var(--font-sans); /* 웨이트 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* 폰트 사이즈 (반응형 clamp — orsia식 큰 디스플레이) */ --fs-display: clamp(2.75rem, 6vw, 5rem); /* 44 → 80 */ --fs-h1: clamp(2rem, 4.5vw, 3.5rem); /* 32 → 56 */ --fs-h2: clamp(1.6rem, 3.2vw, 2.5rem); /* 25.6 → 40 */ --fs-h3: clamp(1.35rem, 2.4vw, 1.875rem);/* 21.6 → 30 */ --fs-h4: clamp(1.15rem, 1.8vw, 1.375rem);/* 18.4 → 22 */ --fs-h5: 1.125rem; /* 18 */ --fs-lg: 1.125rem; /* 18 */ --fs-base: 1rem; /* 16 (기준) */ --fs-sm: 0.875rem; /* 14 */ --fs-xs: 0.75rem; /* 12 */ /* 라인하이트 */ --lh-display: 1.05; --lh-heading: 1.25; --lh-base: 1.6; /* 본문(한글 가독) */ --lh-relaxed: 1.85; /* 자간 */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.12em; /* 대문자 세리프 메뉴 */ /* =========================================================================== 3. SPACING (8px 그리드 + orsia식 섹션 리듬) ========================================================================= */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-11: 10rem; /* 160 */ /* 섹션/레이아웃 리듬 (orsia 기준) */ --section-py: clamp(4rem, 10vw, 10rem); /* 섹션 상하 여백 */ --section-py-sm: clamp(3rem, 6vw, 6rem); --gutter: clamp(1.25rem, 5vw, 2.5rem);/* 좌우 안전 여백 */ --container: 1440px; /* 기본 컨테이너 (사이트 표준 최대 폭) */ --container-wide: 1900px; /* 넓은 컨테이너 (wrap1900) */ --container-narrow: 1280px; /* 좁은 컨테이너 (wrap1280) */ /* =========================================================================== 4. RADIUS / SHADOW / MOTION / Z ========================================================================= */ --radius-sm: 2px; --radius: 4px; --radius-lg: 12px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(36,25,23,0.06); --shadow: 0 4px 14px rgba(36,25,23,0.08); --shadow-lg: 0 12px 32px rgba(36,25,23,0.12); --ease: cubic-bezier(0.45, 0.46, 0.05, 0.96); /* orsia 이징 */ --transition: 0.4s var(--ease); --transition-fast: 0.25s ease; --z-header: 9998; --z-overlay: 9999; } /* ============================================================================= BASE — 토큰을 전역에 적용. 외부에서 섹션을 붙여넣어도 이 규칙으로 자동 정렬. (레이아웃을 깨지 않도록 폰트/색/여백 리듬 위주의 가벼운 베이스) ============================================================================= */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-body); background-color: var(--color-bg); letter-spacing: var(--ls-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { margin: 0 0 var(--space-4); font-family: var(--font-heading); color: var(--color-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); } h1 { font-size: var(--fs-h1); line-height: var(--lh-display); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } h5 { font-size: var(--fs-h5); } p { margin: 0 0 var(--space-4); } a { color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-link-hover); } small { font-size: var(--fs-sm); } strong, b { font-weight: var(--fw-semibold); } hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; } img { max-width: 100%; height: auto; display: block; } /* ============================================================================= UTILITIES — 가져온 섹션에 빠르게 토큰을 입힐 때 사용 ============================================================================= */ /* 레이아웃 */ .container { width: 90%; max-width: var(--container); margin-inline: auto; } .container--wide { max-width: var(--container-wide); } .container--narrow{ max-width: var(--container-narrow); } .section { padding-block: var(--section-py); } .section--sm { padding-block: var(--section-py-sm); } /* 타이포 */ .u-serif { font-family: var(--font-serif); } .u-sans { font-family: var(--font-sans); } .u-display { font-family: var(--font-serif); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-semibold); } .u-eyebrow { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: var(--ls-wider); font-size: var(--fs-sm); } .u-muted { color: var(--color-body-muted); } /* 컬러 */ .u-text-primary { color: var(--color-primary); } .u-text-accent { color: var(--color-accent); } .bg-primary { background-color: var(--color-primary); color: var(--color-on-primary); } .bg-accent { background-color: var(--color-accent); color: var(--color-on-accent); } .bg-base { background-color: var(--color-bg); color: var(--color-on-bg); } .bg-surface { background-color: var(--color-surface); color: var(--color-body); } /* 버튼(기본형) */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-6); font-family: var(--font-serif); font-size: var(--fs-base); letter-spacing: var(--ls-wide); text-transform: uppercase; border: 1px solid var(--color-primary); border-radius: var(--radius); background: var(--color-primary); color: var(--color-on-primary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .btn:hover { background: var(--color-primary-700); color: var(--color-on-primary); } .btn--outline { background: transparent; color: var(--color-primary); } .btn--outline:hover { background: var(--color-primary); color: var(--color-on-primary); }