/* ════════════════════════════════════════════════════════════════════ 디자인 토큰 — 날값(색·크기·간격)은 이 파일 한 곳에만 있습니다 **창업·폐업 버티컬 플랫폼** 의 팔레트입니다 (2026-09-29 전면 리뉴얼). ⚠️ **업종을 연상시키는 색을 쓰지 않습니다.** 예전 팔레트는 고기 플랫폼이라 버건디·크림슨이었습니다. 지금은 모든 업종의 사장님이 손님이라 특정 업종이 떠오르면 안 됩니다 — 남색(신뢰)과 파랑(행동) 두 가지로만 갑니다. ⚠️⚠️ **START = 초록 · CLOSE = 주황입니다** (2026-09-30 지시). 예전 규칙은 "창업과 폐업을 색으로 가르지 말 것" 이었는데, 그 걱정 (폐업이 '나쁜 것' 으로 읽히는 것)은 **빨강**에서 나오는 것이라 지시서가 주황으로 정했습니다. 그래서 — · 폐업 쪽 색은 **주황이지 빨강이 아닙니다.** `--close` 를 붉은 쪽으로 옮기지 마세요 (`check.js` 가 g 값을 봅니다). · 폐업 쪽 글에서 실패 · 손실 · 끝을 말하지 않습니다. CLOSE 는 **정리와 다음 단계**입니다 (§6). ⚠️ 여기 없는 색을 화면 CSS 에 직접 적지 마세요. 한 곳에서 못 바꾸게 됩니다. 토큰을 못 읽는 자리(404.html · manifest.json · 그림 생성기) 가 셋 있고, CLAUDE.md 에 적어 두었습니다. ════════════════════════════════════════════════════════════════════ */ :root{ /* ⚠️⚠️ **브라우저가 색을 제멋대로 뒤집는 것을 막습니다.** 안드로이드 크롬 · 삼성 인터넷의 "자동 다크 모드" 는 색을 선언하지 않은 사이트를 **알고리즘으로 반전**시킵니다. 실제로 사장님 폰에서 바탕이 검정이 되고 **폐업 주황이 빨강**으로 바뀌어 보였습니다 — 그 빨강은 이 파일 어디에도 없는 색이고, 폐업을 '나쁜 것' 으로 읽히게 만드는 바로 그 색입니다 (위 §2 경고). `only light` 가 그 자동 반전을 끄는 **표준 방법**입니다. 지우지 마세요. `index.html` · `404.html` · `admin.html` 의 메타 태그도 같은 일을 합니다 (CSS 가 늦게 와도 먼저 막으라고 둘 다 둡니다). */ color-scheme: only light; /* ── 색 (2026-09-30 랜딩 지시서 §1) ─────────────────────────── ⚠️ **기존 토큰 이름을 바꾸지 않았습니다.** 값만 새 팔레트로 갈아 끼웁니다 — 이름을 바꾸면 화면 51개가 한꺼번에 깨집니다 (§28: 기존 기능을 랜딩 수정 때문에 깨뜨리지 않는다). ⚠️⚠️ **START = Green · CLOSE = Orange** 입니다. 예전 규칙은 "창업과 폐업을 색으로 가르지 말 것" 이었는데 이번 지시가 그것을 뒤집었습니다 (§1 · §5 · §9 · §13 · §15 · §25). 주황은 빨강이 아니고, §6 이 "폐업하는 사람을 실패자처럼 표현하지 않는다 — CLOSE 는 정리와 다음 단계" 라고 못박고 있습니다. ⚠️ **면적 비율을 지키세요** (§2). 흰색 · 아이보리 · 옅은 바탕 70% 남색 12~15% 초록 7~8% 주황 7~8% 그 밖의 악센트 5% 이하 ⚠️ **짙은 남색 전면 배경은 푸터 말고 쓰지 마세요** (§2 · §26). ⚠️ 카드를 전부 같은 색으로 만들지 마세요 (§26). */ /* Brand — 남색은 제목과 신뢰. 넓게 칠하지 않습니다. ⚠️ 2026-09-30 랜딩 지시서 §14 의 값입니다. 지시서가 색을 숫자로 못박아 두어서 여기를 그 값에 맞췄습니다 — 전과 머리카락 차이라 다른 화면은 눈에 띄게 바뀌지 않습니다. */ --navy: #0C3D70; --navy-dark: #062B51; --navy-soft: #EEF4FA; /* 옛 이름을 쓰는 화면이 있어 남겨 둡니다 — 값만 새 팔레트로 */ --navy-2: #0E3159; --navy-3: #17497E; /* START — 창업 */ --start: #08A875; --start-dark: #07865F; --start-soft: #EAF8F3; /* 눌렀을 때 · 흰 글자를 얹는 자리에만 (마지막 CTA · 창업 쪽 버튼) */ --start-deep: #056B4C; /* CLOSE — 폐업. ⚠️ 주황이지 빨강이 아닙니다 */ --close: #F36B38; --close-dark: #D95128; --close-soft: #FFF0E9; /* 마지막 CTA 처럼 **흰 글자를 얹는 자리**에만. 옅은 주황에 흰 글자를 얹으면 안 읽힙니다 — 그때 이 값을 씁니다. */ --close-deep: #C2431E; /* Premium — ⚠️ 남발 금지 (§26). 선 · 배지 · 작은 강조까지 */ --gold: #D5AA55; --gold-soft: #FBF5E8; --gold-on-dark:#E4C687; /* ⚠️ 글자로 쓰는 금색은 **따로**입니다. `--gold` 는 선 · 배지용이라 13px 글자로 쓰면 대비가 1.82 밖에 안 됩니다 (STEP 01 이 그랬습니다). */ --gold-text: #7A5A1C; --gold-line: rgba(213,170,85,.30); --gold-bg: rgba(213,170,85,.12); /* 글자 */ /* ⚠️⚠️ **세 단계 전부 읽혀야 합니다** (2026-10-01). 전에는 `--ink3` 가 #7B8794 라 흰 바탕에서 대비 3.66, 아이보리 · 푸터 위에서는 **3.08** 이었습니다. 13px 설명글이 거기 앉아 있어서 사이트 전체에서 **40군데 넘게** 안 읽혔습니다 — 손님이 40~60대 사장님인 플랫폼에서 제일 나쁜 종류의 결함입니다. ⚠️ 전수 점검의 "글자가 바탕에 묻힘" 은 기준이 **1.6** 이라 못 잡았습니다. 그건 "완전히 사라졌나" 를 보는 값이지 읽힘이 아닙니다. ⚠️ 밝은 바탕 아홉 **전부**에서 재고 넣은 값입니다 (최저 대비) — 색상은 그대로, 밝기만 내렸습니다. 위계는 크기 · 굵기가 같이 냅니다. ⚠️ 더 밝게 되돌리시려면 아홉 바탕에서 다시 재 보세요. */ --ink: #102F50; /* 본문 · 제목 최저 11.42 */ --ink2: #4A596A; /* 설명 최저 6.02 */ --ink3: #5F6A76; /* 흐린 글자 · 예시글 최저 4.63 */ /* 행동 — 링크와 일반 버튼. START/CLOSE 버튼은 각자 색입니다 */ /* ⚠️⚠️ **2026-10-01 — #3488D8 에서 내렸습니다.** 이 색은 "일반 링크 · 기본 버튼" 이라 거의 전부 **글자가 올라앉는** 자리입니다. 그런데 옅은 바탕 위 글자로는 대비 3.12, 흰 글자를 얹으면 3.71 이라 기준(4.5)에 한참 못 미쳤습니다 — 필수 표시(*) · 동의 상자의 방침 링크 · 검색 단추 · 분류 배지가 전부 거기 걸려 있었습니다. ⚠️ **파랑을 버린 것이 아닙니다** — 같은 파랑의 한 단계 짙은 쪽이고, 옅은 쪽은 `--blue-400` 에 그대로 있습니다 (테두리 · 아이콘 · 틴트). ⚠️ 속화면에서는 `.side-start` · `.side-close` 가 이 변수를 통째로 갈아 끼웁니다 — 창업 초록 · 폐업 주황은 그대로입니다. */ --blue: #2A6FB0; --blue-600: #215A90; --blue-400: #7FB4E6; --blue-50: #EEF4FA; --blue-100: #DCE8F5; /* 분류 악센트 (§13) — ⚠️ 아이콘 타일 · 배지 · 작은 칩까지만 */ --c-pink: #E96DA7; --c-purple: #8467D7; --c-cyan: #42AFC6; --c-brown: #B78358; --c-olive: #789348; --c-steel: #367DB2; --bg: #FDFBF7; /* 웜 화이트 — 기본 바탕 */ --bg-2: #F5F7F9; /* 번갈아 칠하는 두 번째 바탕 */ --ivory: #FAF7F1; /* 브랜드 스토리 구간 */ --surface: #FFFFFF; /* 카드 · 흰 구간 */ --line: #E6EBEF; --line-soft: #EEF1F4; /* ── 지시서(§1)가 쓰는 이름 ─────────────────────────────────── 같은 값을 가리키는 **별칭**입니다. 지시서에 적힌 이름 그대로 쓰고 싶을 때가 있어서 둡니다. ⚠️ 여기에 **다른 값을 적지 마세요.** 두 이름이 서로 다른 색이 되면 어느 쪽이 맞는지 아무도 모릅니다. */ --white: var(--surface); --warm-white: var(--bg); --gray-bg: var(--bg-2); --text-primary: var(--ink); --text-secondary: var(--ink2); --text-muted: var(--ink3); --border: var(--line); --border-soft: var(--line-soft); --pink: var(--c-pink); --purple: var(--c-purple); --cyan: var(--c-cyan); --brown: var(--c-brown); /* ── 2026-09-30 메인 개편 §28 — 악센트마다 옅은 바탕 한 짝 ──────── 아이콘 타일 · 작은 칩에만 씁니다. 카드 전체를 이 색으로 칠하지 마세요 (§12 · §16). 밝기는 그 색의 8~12% 수준입니다. */ /* ── 2026-10-01 밝기 전면 재조정 §2 — 배경은 이 아홉 가지만 ────── ⚠️⚠️ **이 사이트는 DARK PREMIUM 이 아니라 BRIGHT PREMIUM 입니다.** 고급스러움을 어두운 바탕으로 만들지 않습니다. 화면의 80% 이상이 밝은 면이어야 하고, 어두운 면은 푸터와 업체 입점까지입니다. ⚠️ 한 가지 흰색으로만 만드는 것도 금지입니다 — 구간마다 번갈아 칠해서 스크롤에 리듬을 냅니다 (§21). */ --bg-white: #FFFFFF; /* Pure White */ --bg-cream: #FCFAF6; /* Warm Cream — 히어로 · 연결 구간 */ --bg-ivory2: #F8F5EE; /* Warm Ivory — START/CLOSE 바탕 · 업체 · 후기 */ --bg-gray: #F5F7F9; /* Soft Gray — 핵심 서비스 */ --bg-mint: #ECF8F3; /* Mint Tint — 창업 쪽 · 매장 인수 */ --bg-peach: #FFF1EA; /* Peach Tint — 폐업 쪽 */ --bg-sky: #EFF6FC; /* Sky Tint — 가격 · 정보 */ --bg-lav: #F5F1FB; /* Lavender Tint */ --bg-sand: #FAF4E8; /* Sand Tint */ /* 옅은 바탕 위의 테두리 (§9 · §22) */ /* 푸터 — ⚠️ 구간 바탕 아홉 가지 **어느 것과도** ΔE 3.3 이상입니다. 아이보리2 로 두었다가 `--ivory` 구간과 ΔE 0.88 이라 푸터가 본문에 **녹아 버렸습니다.** 값을 바꾸시려면 아홉 가지와 전부 재 보세요 — `check.js` 가 마지막 구간과 푸터도 비교합니다. */ --bg-foot: #EFEBE1; --line-sky: #D9E8F6; --line-mint: #D6EEE4; --line-peach: #F9DED1; /* 밝은 면 위의 카드 그림자 — ⚠️ 진하게 넣지 마세요 (§22 · §30) */ --shadow-soft: 0 10px 35px rgba(15,43,68,.06); --teal: #28A59A; --teal-soft: #EAF7F5; --purple-soft: #F2EEFC; --pink-soft: #FDEEF5; --blue-soft: var(--blue-50); --gold-soft: #FBF5E8; --brown-soft: #F6EFE8; --cyan-soft: #E8F5F8; --slate: #5B7186; --slate-soft: #EEF1F4; --indigo: #5A63C7; --indigo-soft: #EEEFFB; --burgundy: #9A4257; --burgundy-soft: #F9EDF0; /* 상태값에만 씁니다 — 진단 · 배지 · 검증 표시 */ --ok: #0E9F6E; --ok-bg: #E7F7F1; /* ⚠️ `--warn` 은 배지 **바탕**용입니다. 13px 글자로 쓰면 옅은 면에서 대비 3.32 라 안 읽혀서, 글자로 쓸 짙은 단계를 따로 둡니다. */ --warn: #C2760B; --warn-bg: #FCF4E6; --warn-dark: #8A5300; --bad: #D03A3A; --bad-bg: #FCECEC; /* 어두운 면 위의 글자 */ --on-dark: rgba(255,255,255,.76); --on-dark-2: rgba(255,255,255,.55); /* 어두운 면 위의 구분선 — 푸터가 두 곳에서 씁니다. ⚠️ 날값을 화면 CSS 에 또 적지 마세요 (여기 한 곳입니다). */ --on-dark-line:rgba(255,255,255,.14); /* ── 분류색 열넷 ────────────────────────────────────────────── ⚠️ **아이콘 타일 · 배지 · 작은 칩에만** 씁니다. 구간 배경 · 카드 전체 · 버튼에는 쓰지 마세요 — 브랜드는 파랑 하나입니다. ⚠️ 한 줄에 나란히 서는 것끼리는 서로 다른 색이어야 합니다. ⚠️⚠️ **2026-10-01 지시서 §19 로 여섯을 더했습니다.** 전에는 여덟 뿐이라 업종 열넷에서 t7 이 넷 · t8 · t2 · t5 · t1 이 둘씩 겹쳤고, "사이트에 컬러가 살아있어야 한다" 는 말이 안 지켜졌습니다. 이제 **업종 열넷이 전부 다른 색**입니다 — `check.js` 가 셉니다. ⚠️ 어느 업종이 어느 색인지는 `js/data/industries.js` 의 `tone` 한 줄입니다. 화면에 손으로 적지 마세요. ⚠️ 아이콘은 글자가 아니라서 대비 3.0 이상이면 됩니다 — 열넷 전부 재 보고 넣었습니다. */ --tn1-ink:#1B5CFF; --tn1-bg:#EEF3FF; /* 파랑 — 헬스 */ --tn2-ink:#0E9F6E; --tn2-bg:#E7F7F1; /* 초록 — 반려동물 */ --tn3-ink:#7C4DD8; --tn3-bg:#F1ECFD; /* 라벤더 — 네일 · 뷰티 */ --tn4-ink:#C2760B; --tn4-bg:#FCF4E6; /* 앰버 — 기타 */ --tn5-ink:#0B8BA8; --tn5-bg:#E5F5F9; /* 시안 — 무인매장 */ --tn6-ink:#C03552; --tn6-bg:#FBEBEE; /* 와인 — 주점 · 바 */ --tn7-ink:#3F5A85; --tn7-bg:#EDF1F8; /* 남색틴트 — 숙박 */ --tn8-ink:#B0476F; --tn8-bg:#FBECF2; /* 분홍 — 미용 · 헤어 */ --tn9-ink:#D1601F; --tn9-bg:#FDEFE6; /* 주황 — 음식점 */ --tn10-ink:#8A5A33; --tn10-bg:#F6EFE7; /* 웜브라운 — 카페 · 디저트 */ --tn11-ink:#4338CA; --tn11-bg:#EDEDFB; /* 인디고 — 학원 · 교육 */ --tn12-ink:#0E7C6B; --tn12-bg:#E4F4F1; /* 청록 — 소매 · 편의점 */ --tn13-ink:#4A6572; --tn13-bg:#ECF1F3; /* 스틸 — 사무 · 전문서비스 */ --tn14-ink:#8B3FBF; --tn14-bg:#F5EBFA; /* 보라 — 온라인 · 판매 */ /* ── 글씨 ──────────────────────────────────────────────────── ⚠️ **12px 미만 금지.** 제일 작은 단계가 --t-cap 입니다. */ --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; /* §18 — 히어로와 구간 제목은 화면 폭을 따라갑니다 */ /* ⚠️ 2026-10-01 — 5vw → 5.4vw. 지시서 §4 "Headline 크기 약간 증가". 1440px 에서 72→76 · 1280px 에서 64→69 입니다. 위아래 한계는 그대로라 폰과 큰 화면은 안 바뀝니다. */ --t-hero: clamp(48px, 5.4vw, 76px); --t-sig: 56px; /* 장면용 큰 글자 */ --t-3xl: clamp(36px, 3.5vw, 52px); /* 구간 제목 (§18) */ --t-2xl: 30px; --t-xl: 23px; --t-lg: 18.5px; --t-md: 17px; --t-base: 17px; --t-sm: 14.5px; --t-cap: 13px; --t-num: 56px; /* 크게 보여 주는 숫자 */ --t-num-s: 34px; --lh-hero: 1.08; --lh-tight:1.22; --lh-base: 1.70; --tr-hero: -.045em; --tr-head: -.035em; /* ── 간격 ──────────────────────────────────────────────────── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 88px; --s11: 116px; --s12: 160px; /* ── 폭 ────────────────────────────────────────────────────── */ /* §3 — 바깥 1440 · 콘텐츠 1280 · 좌우 여백 32(폰 20) */ --w: 1280px; --w-wide: 1440px; /* ⚠️ 1280px 노트북에서 본문이 화면 가장자리에 32px 까지 붙습니다 (1280 이 `--w` 와 같아서 바깥 여백이 안 생깁니다). 40px 로 띄웠습니다 — 좁은 화면(760px 아래)은 20px 그대로입니다. */ --pad: 40px; --w-read: 760px; /* 글 읽는 폭 */ /* ── 모서리 ────────────────────────────────────────────────── */ /* §20 — 작은 것 10 · 버튼 12~14 · 카드 18~22 · 큰 구간 카드 28~32 ⚠️ 알약(`--r-pill`)은 칩과 배지까지입니다. 버튼을 알약으로 두지 마세요 (§20: 과도한 Pill Shape 금지). */ --r-sm: 10px; --r: 12px; --r-in: 14px; --r-lg: 20px; --r-xl: 22px; --r-2xl: 28px; --r-3xl: 32px; --r-pill: 999px; /* ── 그림자 — 아주 옅게. 카드는 그림자가 아니라 면으로 구분합니다 */ --shadow: 0 1px 2px rgba(15,27,45,.05); --shadow-md: 0 4px 14px -6px rgba(15,27,45,.12); --shadow-lg: 0 18px 40px -18px rgba(15,27,45,.22); /* §19 카드 · §7 떠 있는 카드 — 밝은 화면이라 아주 옅게 */ --shadow-card: 0 8px 30px rgba(15,43,68,.05); --shadow-card-h: 0 18px 45px rgba(15,43,68,.10); --shadow-float: 0 16px 50px rgba(15,43,68,.10); --shadow-btn: 0 12px 30px rgba(0,0,0,.12); /* ── 누르는 것 ─────────────────────────────────────────────── */ --tap: 48px; /* §3 — 구간 위아래 여백. 폰에서 64px 로 내려갑니다 */ --sec-y: 96px; --hdr-h: 72px; /* §4 */ --mnav-h: 62px; } /* ── 폰 ──────────────────────────────────────────────────────── ⚠️ 폰은 넓은 화면의 축소판이 아닙니다. 글자 단계를 통째로 내리고, 여백도 같이 줄입니다. 자세한 것은 CLAUDE.md. */ @media (max-width:900px){ :root{ --t-hero: 42px; --t-sig: 32px; --t-3xl: 27px; --t-2xl: 22px; --t-xl: 19px; --t-lg: 17px; --t-base: 16px; --t-num: 36px; --t-num-s: 26px; --s9: 44px; --s10: 60px; --s11: 72px; --s12: 88px; --sec-y: 64px; --pad: 20px; --hdr-h: 60px; } } @media (max-width:420px){ :root{ --t-hero: 36px; --t-sig: 28px; --t-3xl: 24px; } }