@import "tailwindcss"; @import "@o2o/shared/styles/base.css"; /* 시안 토큰·유틸(타이포·.shell·.h2·.panel·슬라이더)은 캔버스와 한 파일을 쓴다. ★ 값을 두 곳에 적으면 한쪽만 고쳐지고 에디터와 발행본이 다시 갈라진다. */ @import "@o2o/shared/styles/site.css"; /* * 발행 사이트의 디자인 토큰. * * 색·서체·모서리·테두리·여백은 전부 사장님이 고른 템플릿에서 온다. 프리렌더가 에 * `--tpl-*` 를 심고(`seo/head.ts` themeStyle) 여기서 Tailwind 토큰으로 연결한다. * 관리자 토큰(tokens.css)은 이 앱에 들어오지 않는다 — 두 색 체계를 섞지 않는다. * * ★ 이 파일에 하드코딩된 색을 두지 않는다. 아래 :root 값은 주입이 없는 * 개발 서버(`npm run dev:site`)용 폴백이다. */ :root { --tpl-primary: #18181b; --tpl-secondary: #52525b; --tpl-bg: #ffffff; --tpl-card: #fafafa; --tpl-text: #09090b; --tpl-accent: #2563eb; --tpl-surface: #ffffff; --tpl-surface-alt: #f5f5f4; --tpl-inverse: #1c1917; --tpl-border: #e7e5e4; /* * 생김새 폴백 = '심플' 템플릿(admin `industryData.ts` 의 LOOK.simple). * ★ 예전엔 서체 폴백이 명조였다. 발행 잡은 이제 항상 look 을 실어 보내지만 * (backend `_DEFAULT_LOOK`), 개발 서버에는 주입이 없어 이 값이 곧 화면이 된다 — * 폴백이 제품 기본값과 다르면 개발자가 보는 것과 손님이 보는 것이 갈린다. */ --tpl-font-heading: 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif; --tpl-font-body: 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif; --tpl-radius: 0.75rem; --tpl-border-width: 1px; --tpl-shadow: 0 1px 2px rgb(0 0 0 / 0.06); --tpl-heading-tracking: -0.02em; --tpl-heading-weight: 700; --tpl-section-space: 4rem; } @theme inline { --color-brand: var(--tpl-primary); --color-brand-soft: var(--tpl-secondary); --color-surface: var(--tpl-bg); --color-surface-alt: var(--tpl-card); --color-ink: var(--tpl-text); --color-accent: var(--tpl-accent); --font-sans: 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif; --font-serif: 'Noto Serif KR', 'Batang', 'Times New Roman', serif; /* * 선 색은 **둘레 글자색에서 뽑는다.** * 예전에는 전 섹션이 `border-black/8` 이었다 — 어두운 바탕(푸터·필름·플립보드)에서 * 검은 선은 그냥 안 보인다. currentColor 를 섞으면 밝은 면에서는 진해지고 * 어두운 면에서는 밝아져, 어떤 팔레트에서도 선이 남는다. * * ★ 여기(@theme inline)에 있어야 하는 이유 — Tailwind 가 이 이름으로 * `text-muted` · `border-line` · `divide-line` 유틸을 **만들어 준다.** * 공유 파일(shared/styles/site.css)로 옮겼더니 유틸 생성이 끊겨, 마크업이 188곳에서 * 쓰는 `text-muted` 와 101곳의 `border-line` 이 통째로 죽었다(실측 2026-09-09). * 공유 파일에는 캔버스용 같은 값의 명시 정의가 따로 있다 — 값이 같으니 어느 쪽이 이겨도 된다. */ --color-line: color-mix(in oklab, currentColor 14%, transparent); --color-line-soft: color-mix(in oklab, currentColor 8%, transparent); /* 본문 보조 글자. opacity-60 을 반복해 쓰던 자리를 색 하나로 모은다. */ --color-muted: color-mix(in oklab, currentColor 62%, transparent); /* * 모서리는 템플릿이 정한 값 하나에서 **비율로** 펼친다. * 하나로 통일하면 칩과 카드가 같은 곡률이라 층이 안 보이고, * 따로 박으면 레트로(0px)를 골라도 카드만 둥글게 남는다. */ --radius-sm: calc(var(--tpl-radius, 0.75rem) * 0.4); --radius-md: calc(var(--tpl-radius, 0.75rem) * 0.7); --radius-lg: var(--tpl-radius, 0.75rem); --radius-xl: calc(var(--tpl-radius, 0.75rem) * 1.35); --radius-2xl: calc(var(--tpl-radius, 0.75rem) * 1.7); --radius-3xl: calc(var(--tpl-radius, 0.75rem) * 2.2); } html { scroll-behavior: smooth; /* 고정 헤더에 앵커가 가리지 않게. 헤더 높이(4rem)+여유. */ scroll-padding-top: 5.5rem; } body { background-color: var(--color-surface); background-image: var(--tpl-texture, none); color: var(--color-ink); /* ★ 본문 서체도 템플릿이 정한다(theme.look → seo/head.ts). 토큰이 없는 옛 payload 에서는 지금까지와 똑같이 Pretendard/Noto Sans KR 로 떨어진다. */ font-family: var(--tpl-font-body, var(--font-sans)); font-size: var(--fs-body); line-height: 1.7; font-feature-settings: "tnum" 1; /* 하단 고정 탭(모바일)에 마지막 섹션이 가리지 않게. */ padding-bottom: env(safe-area-inset-bottom); } /* 키보드 사용자에게만 보이는 초점 테두리. 마우스 클릭에는 안 뜬다. */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }