/* ═══════════════════════════════════════════════════════════════════ 설레인 디자인 시스템 — 파운데이션 토큰 ─────────────────────────────────────────────────────────────────── 여기 있는 값이 유일한 정보원입니다. 새 CSS 는 리터럴(16px, #f3a3c6, 300ms …) 대신 반드시 토큰을 씁니다. 규칙 요약은 docs/design-system.md. 파일 로드 순서: stylesheet_link_tag :app 이 알파벳 순으로 전부 싣습니다. tokens.css 가 마지막이라 아래 :root 가 application.css 의 :root 를 덮어씁니다. 그래서 예전 변수들(--pink, --ink, --radius …)을 여기에 '별칭'으로 다시 선언해 둡니다. 값은 예전과 한 픽셀도 다르지 않게 맞췄으므로 기존 화면은 그대로입니다. ═══════════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────────── 1. 색 — 브랜드 핑크가 강조(accent), 라임이 활력(spark), 잉크가 본문·주 CTA 입니다. ───────────────────────────────────────────────────────────────── */ --brand-pink: #f3a3c6; --brand-pink-strong: #8b345c; /* 핑크 위/옆에 글자를 얹을 때 */ --brand-pink-tint: rgb(243 163 198 / 20%); --brand-pink-glow: #f9d8e7; --brand-pink-rgb: 243 163 198; /* rgb(var(--brand-pink-rgb) / 40%) 용 */ --brand-lime: #e0f26a; --brand-lime-strong: #59640b; --brand-lime-tint: rgb(224 242 106 / 24%); --brand-lime-rgb: 224 242 106; /* ───────────────────────────────────────────────────────────────── 2. 색 — 중립 --gray-900 이 잉크, --gray-600 이 보조 글자입니다. 그 사이 단계는 아직 화면에 거의 쓰이지 않았습니다. 회색이 필요하면 새로 만들지 말고 이 스케일에서 고르세요. ───────────────────────────────────────────────────────────────── */ --gray-0: #ffffff; --gray-50: #fafafa; --gray-100: #f2f2f2; --gray-200: #e6e6e6; --gray-300: #d4d4d4; --gray-400: #a3a3a3; --gray-500: #767676; --gray-600: #646464; /* 보조 글자 (기존 --muted) */ --gray-700: #444444; --gray-800: #2a2a2a; --gray-900: #111111; /* 본문·주 CTA (기존 --ink) */ /* ───────────────────────────────────────────────────────────────── 3. 색 — 표면 · 경계 경계선은 잉크의 알파라서 어떤 배경 위에 놓여도 톤이 튀지 않습니다. ───────────────────────────────────────────────────────────────── */ --surface-page: var(--gray-0); /* 페이지 바탕 */ --surface-card: var(--gray-0); /* 카드·패널 */ --surface-sunken: rgb(17 17 17 / 6%); /* 카드 안의 눌린 면(날짜 타일 등) */ --border-subtle: rgb(0 0 0 / 8%); --border-default: rgb(0 0 0 / 14%); --border-strong: rgb(0 0 0 / 24%); --border-heavy: rgb(0 0 0 / 62%); /* 에디토리얼 굵은 괘선 */ --border-heavy-soft: rgb(0 0 0 / 22%); /* ───────────────────────────────────────────────────────────────── 4. 색 — 상태 성공·경고·오류. 글자로 써도 흰 바탕에서 4.5:1 을 넘습니다. ───────────────────────────────────────────────────────────────── */ --success: #007a5e; --success-tint: rgb(0 122 94 / 12%); --warning: #a86400; --warning-tint: rgb(168 100 0 / 14%); --danger: #cc2b1d; --danger-tint: rgb(204 43 29 / 12%); /* ───────────────────────────────────────────────────────────────── 5. 색 — 분류 장소 카테고리와 일정 종류가 같은 팔레트를 씁니다. 지도 핀은 --category-cafe(비비드 마젠타), 클러스터는 잉크입니다. ───────────────────────────────────────────────────────────────── */ --category-cafe: #ff2e7e; --category-walk: #00a982; --category-night: #3d6cff; --category-exhibit: #8b5cf6; --category-food: #ff4b3e; --event-popup: var(--category-exhibit); --event-showcase: var(--category-walk); --event-gathering: var(--category-night); --event-festival: var(--category-food); /* ───────────────────────────────────────────────────────────────── 6. 간격 — 4px 기반 같은 묶음 안은 1~3, 요소 사이는 4~6, 섹션 사이는 7~9, 블록(색면) 사이는 10~12 를 씁니다. ───────────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ───────────────────────────────────────────────────────────────── 7. 타이포 — 배율 약 1.25 의 모듈러 스케일 본문은 --text-base(16px). 한글은 라틴보다 작아 보여 14px 밑으로는 본문에 쓰지 않습니다. 11~13px 은 라벨·메타 전용. ───────────────────────────────────────────────────────────────── */ --text-2xs: 11px; /* 대문자 라벨, 배지 */ --text-xs: 12px; /* 메타 정보 */ --text-sm: 13px; /* 보조 문장, 작은 버튼 */ --text-md: 14px; /* 조밀한 목록의 본문 */ --text-base: 16px; /* 본문 기본 */ --text-lg: 18px; /* 리드 문장 */ --text-xl: 21px; /* 카드 제목 */ --text-2xl: 26px; /* 섹션 제목 */ --text-3xl: 32px; --text-4xl: 40px; --text-5xl: 52px; --text-6xl: 64px; /* 페이지 히어로 */ --font-sans: SUIT, Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; --font-serif: "Noto Serif", Georgia, serif; /* 로고 'seolle in' 전용 */ --weight-regular: 400; /* 본문 */ --weight-strong: 600; /* 강조 */ --weight-label: 700; /* 라벨·배지 */ --weight-display: 800; /* 제목 */ --weight-display-strong: 900; /* 히어로 */ --tracking-display: -0.04em; --tracking-heading: -0.03em; --tracking-body: -0.01em; --tracking-label: 0.14em; /* 대문자 라벨 전용 */ --leading-display: 1.15; --leading-heading: 1.35; --leading-body: 1.7; --leading-label: 1; /* ───────────────────────────────────────────────────────────────── 8. 모서리 0 은 에디토리얼 각진 면, 1~2 는 작은 컨트롤, 3~4 는 카드·패널, full 은 칩·알약 버튼입니다. ───────────────────────────────────────────────────────────────── */ --radius-0: 0; --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-4: 16px; --radius-full: 999px; /* ───────────────────────────────────────────────────────────────── 9. 그림자 — 종이가 살짝 뜬 정도까지만 sm 은 얹힌 칩, md 는 떠 있는 컨트롤, lg 는 시트·패널. ───────────────────────────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgb(68 50 35 / 6%); --shadow-md: 0 8px 24px rgb(68 50 35 / 8%); --shadow-lg: 0 18px 50px rgb(68 50 35 / 10%); --shadow-focus: 0 0 0 3px var(--brand-pink-tint); /* ───────────────────────────────────────────────────────────────── 10. 브레이크포인트 CSS 변수는 @media 안에서 쓸 수 없습니다. 아래는 '규칙을 적는 자리'이고, 실제 미디어 쿼리에는 같은 숫자를 직접 적습니다. 네 개 말고 다른 값을 새로 만들지 마세요. @media (max-width: 479px) 아주 좁은 화면 — 폰트·간격만 조정 @media (max-width: 699px) 모바일 — 하단 탭바가 뜨는 구간, 1열 @media (max-width: 899px) 태블릿 — 2열까지 @media (min-width: 900px) 데스크톱 — 3열 이상 @media (min-width: 1200px) 와이드 — 컨테이너가 최대폭에 닿음 ───────────────────────────────────────────────────────────────── */ --bp-sm: 480px; --bp-md: 700px; --bp-lg: 900px; --bp-xl: 1200px; /* ───────────────────────────────────────────────────────────────── 11. 컨테이너 읽는 페이지는 narrow, 목록·그리드는 default, 매거진처럼 넓게 까는 화면은 wide 입니다. 좌우 여백은 --page-gutter 하나만 씁니다. ───────────────────────────────────────────────────────────────── */ --container-narrow: 760px; --container-default: 960px; --container-wide: 1200px; /* ───────────────────────────────────────────────────────────────── 12. 모션 fast 는 색·투명도, base 는 위치·크기, slow 는 펼침·시트, slower 는 배경처럼 느리게 도는 것. ───────────────────────────────────────────────────────────────── */ --duration-fast: 200ms; --duration-base: 320ms; --duration-slow: 480ms; --duration-slower: 800ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* 들어오고 나가는 기본 */ --ease-linear: linear; /* ───────────────────────────────────────────────────────────────── 13. z-index 레이어 아래 7단계 밖의 숫자는 새로 만들지 않습니다. 지금 코드에 흩어져 있는 값 → 옮겨 갈 레이어 (다음 태스크에서 적용) -1 .mag-block::before, .subpage-header::before, .about-team::before, .partners-contact::before → 배경 장식, 그대로 -1 유지 0 .seollein-marker-stem → --z-base 1~5 .hero__slide::after, .hero__body, .hero__folio, .place-card__close, .newsletter-signup__inner, .course-block(drag/drop), .course-drag-handle, .place-list-item__favorite, .favorite-login-prompt p → --z-raised 10 .course-share-map__status → --z-raised 20~40 .mag-menu, .mag-results, .account-menu__panel, .course-summary-bar, .course-editor-live-map__* → --z-raised (겹치면 --z-sticky) 1040 .map-intro → --z-sticky 1050 .map-configuration, .courses-map-configuration → --z-sticky 1060 .map-course-list-summary, .courses-map-summary → --z-sticky 1080 .places-surface, .courses-index-surface → --z-overlay 1090 .map-course-list-status, .courses-map-status → --z-overlay 1100 .map-header, .category-filter, .courses-map-header → --z-sticky 1150 .course-summary → --z-overlay 1200 .map-toast → --z-toast 1500 .mag-header → --z-header 1600 body:has(.map-page) .mag-header → --z-header 2000 .bottom-nav → --z-header 3000 .course-add-sheet → --z-modal ───────────────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 1000; --z-overlay: 1100; --z-modal: 1200; --z-toast: 1300; /* ═════════════════════════════════════════════════════════════════ 예전 변수 별칭 — 기존 CSS 가 그대로 돌아가도록 값을 보존합니다. 새 코드에서는 쓰지 마세요. 오른쪽 주석의 토큰을 쓰면 됩니다. ═════════════════════════════════════════════════════════════════ */ /* 브랜드 */ --pink: var(--brand-pink); --pink-strong: var(--brand-pink-strong); --pink-tint: var(--brand-pink-tint); --pink-rgb: var(--brand-pink-rgb); --lime: var(--brand-lime); --lime-strong: var(--brand-lime-strong); --lime-tint: var(--brand-lime-tint); --lime-rgb: var(--brand-lime-rgb); --paper: var(--gray-0); --accent-glow: var(--brand-pink-glow); /* 예전 팔레트 이름들 — 전부 핑크/라임으로 수렴한 상태입니다. */ --cream: var(--gray-0); --cream-strong: var(--brand-lime); --coral: var(--brand-pink); --coral-strong: var(--brand-pink-strong); --coral-ink: var(--gray-900); --coral-tint: var(--brand-pink-tint); --coral-rgb: var(--brand-pink-rgb); --cobalt: var(--brand-lime); --cobalt-strong: var(--brand-lime-strong); --cobalt-tint: var(--brand-lime-tint); --cobalt-rgb: var(--brand-lime-rgb); --accent: var(--brand-pink); --accent-strong: var(--brand-pink-strong); --accent-tint: var(--brand-pink-tint); --accent-rgb: var(--brand-pink-rgb); --spark: var(--brand-lime); --spark-strong: var(--brand-lime-strong); --spark-tint: var(--brand-lime-tint); --spark-rgb: var(--brand-lime-rgb); --rose-500: var(--brand-pink); --rose-50: var(--brand-pink-tint); --rose-100: var(--brand-lime); --rose-600: var(--brand-pink); /* 표면·글자·경계 */ --bg: var(--gray-0); --warm-50: var(--gray-0); --surface: var(--gray-0); --surface-solid: var(--gray-0); --ink: var(--gray-900); --muted: var(--gray-600); --muted-soft: rgb(17 17 17 / 62%); --line: var(--border-default); --hairline: var(--border-default); --hairline-soft: var(--border-subtle); --hairline-strong: var(--border-strong); --editorial-frame: var(--border-heavy); --editorial-frame-soft: var(--border-heavy-soft); /* 그림자 */ --panel-shadow: var(--shadow-lg); --control-shadow: var(--shadow-md); /* 모서리 — 스케일 밖이던 11px·20px 을 눈금으로 스냅했습니다. */ --radius: var(--radius-4); --radius-sm: var(--radius-3); --radius-pill: var(--radius-full); --subpage-radius: var(--radius-4); /* 모션 — 별칭을 눈금으로 돌려 두면 이 변수를 쓰는 모든 곳이 한 번에 옮겨집니다. */ --ease-out: var(--ease-standard); --sheet-ease: var(--ease-standard); --sheet-duration: var(--duration-slow); /* 타이포 */ --font-ui: var(--font-sans); --font-display: var(--font-sans); --font-logo: var(--font-serif); --display-weight: var(--weight-display); --display-weight-strong: var(--weight-display-strong); --label-tracking: var(--tracking-label); /* 폭 — 860px·1120px 을 컨테이너 눈금으로 스냅했습니다. */ --subpage-width-narrow: var(--container-narrow); --subpage-width-default: var(--container-default); --subpage-width-wide: var(--container-default); --page-width-wide: var(--container-wide); --page-gutter: var(--space-6); /* 페이지 타이틀 3단 — 다음 태스크에서 --text-* 로 정리합니다. */ --title-hero: clamp(30px, 5.4vw, 50px); --title-subpage: clamp(32px, 4vw, 44px); --title-detail: clamp(28px, 6vw, 38px); /* 분류색 */ --cafe: var(--category-cafe); --walk: var(--category-walk); --night: var(--category-night); --exhibit: var(--category-exhibit); --food: var(--category-food); /* 하단 탭바 높이 — 지도 시트·요약 카드가 가리지 않도록 노출합니다. */ --bottom-nav-height: 58px; --bottom-nav-inset: env(safe-area-inset-bottom, 0px); --bottom-nav-total: calc(var(--bottom-nav-height) + var(--bottom-nav-inset)); }