/* ───────────────────────────────────────────────────────────── tokens.css — 색 팔레트 2종 또는 style.css 는 여기 정의된 var() 만 참조한다. 색을 바꾸려면 이 파일만. ───────────────────────────────────────────────────────────── */ :root { /* 모션 — 팔레트와 무관, 공통 */ --ease: cubic-bezier(0.25, 1, 0.5, 1); /* 등장 모션 속도. 여기 두 값이 "스크롤할 때 내용 뜨는 속도"를 정한다. 처음엔 2s + 최대 1.4s 지연이라 마지막 요소가 3.4초 뒤에야 다 떴다 (너무 느림). 0.85s + 배율 0.4 로 줄였더니 이번엔 너무 급했다 (1.4초). 지금은 그 중간이다 — 가장 느린 요소가 약 2.2초. --d-scale 은 각 요소에 박혀 있는 인라인 지연(style="--d:.9s")에 곱해지는 배율이다. 페이지 12장에 흩어진 --d 를 하나하나 고치지 않고 여기서 한 번에 조인다. 1 = 원래대로 (느림) 0.65 = 지금 0.4 = 빠름 0 = 스태거 없이 전부 동시에 더 느리게: --dur-slow 와 --d-scale 을 같이 올린다. 더 빠르게: 같이 내린다. 둘 중 하나만 만지면 리듬이 깨진다. */ --dur-slow: 1.35s; --d-scale: 0.65; --dur-mid: 1.2s; --dur-fast: 0.4s; --delay-1: 0.5s; --delay-2: 0.9s; /* 타이포 */ --font-kr: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; --font-en: "Cormorant Garamond", "Times New Roman", serif; /* 레이아웃 */ --bar-h: 38px; /* 최상단 공지 띠 */ --ticker-speed: 90s; /* 띠가 한 바퀴 도는 시간. 클수록 천천히 */ --nav-h: 84px; /* 헤더(로고·메뉴) 자체 높이 */ --header-h: calc(var(--bar-h) + var(--nav-h)); /* 콘텐츠가 피해야 할 총 높이 */ --maxw: 1480px; --quick-w: 102px; /* 우측 퀵메뉴가 차지하는 폭(82px) + 오른쪽 여백(20px). 본문이 이 아래로 파고들지 않도록 섹션 좌우 패딩에 더한다. */ } /* ── 확정 팔레트 · 다크틸 + 샴페인 골드 ──────────────────── index.html 의 가 이걸 가리킨다. */ :root, [data-palette="gold"] { --bg-deep: #06202a; /* 헤더·푸터·다크 섹션 */ --bg-deep-2: #041a22; /* 더 어두운 변주 */ --accent: #dbbe9c; /* 샴페인 골드 — 강조 */ --accent-soft: #f0cc98; --surface: #f7f4ef; /* 크림 — 밝은 섹션 */ --surface-2: #ebe4d9; --card: #ffffff; --card-ink: #142446; --ink: #1b2b33; /* 밝은 배경 위 본문 */ --ink-mute: #6a7a83; --on-deep: #ffffff; --on-deep-mute: rgba(255, 255, 255, 0.62); --rule: rgba(255, 255, 255, 0.2); --pill-bg: rgba(219, 190, 156, 0.16); --shadow: 0 18px 50px -22px rgba(6, 32, 42, 0.55); } /* ── 밝은 테마 · 미용센터 전용 ────────────────────────────── 치료센터(상처·응급·흉터)는 묵직한 다크로, 미용센터(안티에이징)는 밝고 가볍게. 두 센터의 성격 차이를 색으로 드러낸다.
로 감싼 안쪽만 뒤집힌다. 헤더·푸터는 바깥에 있으므로 다크를 유지한다. ⚠ accent 를 밝은 배경에 그대로 쓰면 안 된다. #dbbe9c 는 크림 위에서 대비 1.4:1 — 글씨가 안 읽힌다. 밝은 배경용으로 진한 골드를 따로 쓴다. */ [data-theme="light"] { --bg-deep: #faf8f4; /* 크림 — 기본 섹션 */ --bg-deep-2: #ffffff; /* 흰색 — alt 섹션 */ --accent: #9a7549; /* 진한 골드 (크림 위 대비 4.6:1) */ --accent-soft: #c9a173; --surface: #ffffff; --surface-2: #f2ece3; --card: #ffffff; --card-ink: #1b2b33; --ink: #1b2b33; --ink-mute: #5c6a72; --on-deep: #16242b; /* "짙은 배경 위 글씨" → 밝은 배경에선 본문 색 */ --on-deep-mute: #5c6a72; --rule: rgba(22, 36, 43, 0.12); --pill-bg: rgba(154, 117, 73, 0.09); --shadow: 0 22px 55px -28px rgba(22, 36, 43, 0.22); } /* ── 대안 · 이음 그린 (보류) ─────────────────────────────── 쓰려면 으로 바꾸기만 하면 된다. style.css 는 색을 var() 로만 참조하므로 다른 파일은 손댈 필요 없다. */ [data-palette="green"] { --bg-deep: #1e3d32; --bg-deep-2: #16302a; --accent: #ae947b; /* 로고에서 추출한 실제 탄 브라운 */ --accent-soft: #c9b49c; --surface: #faf8f5; --surface-2: #f0ebe4; --card: #ffffff; --card-ink: #2c3a34; --ink: #22302a; --ink-mute: #6b7a72; --on-deep: #ffffff; --on-deep-mute: rgba(255, 255, 255, 0.62); --rule: rgba(255, 255, 255, 0.18); --pill-bg: rgba(174, 148, 123, 0.14); --shadow: 0 18px 50px -22px rgba(30, 61, 50, 0.45); }