@import "tailwindcss"; @import "@o2o/shared/styles/base.css"; /* * 발행 사이트의 색은 사장님이 고른 템플릿에서 온다. * 프리렌더가 에 --tpl-* 를 심고(`seo/head.ts` themeStyle), 여기서 Tailwind 색으로 연결한다. * 관리자 토큰(tokens.css)은 이 앱에 들어오지 않는다 — 두 색 체계를 섞지 않는다. * * 개발 서버에서는 주입이 없으므로 아래 :root 기본값이 쓰인다. */ :root { --tpl-primary: #18181b; --tpl-secondary: #52525b; --tpl-bg: #ffffff; --tpl-card: #fafafa; --tpl-text: #09090b; --tpl-accent: #2563eb; } @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; } html { scroll-behavior: smooth; /* 고정 헤더에 앵커가 가리지 않게. */ scroll-padding-top: 5rem; } body { background-color: var(--color-surface); color: var(--color-ink); /* ★ 본문 서체도 템플릿이 정한다(theme.look → seo/head.ts). 토큰이 없는 옛 payload 에서는 지금까지와 똑같이 Noto Sans KR 로 떨어진다. */ font-family: var(--tpl-font-body, var(--font-sans)); font-feature-settings: "tnum" 1; } @layer components { /* 제목 서체. 이름은 'serif' 로 남아 있지만 값은 템플릿이 정한다 — 레트로면 간판체, 심플이면 고딕이다. 토큰이 없으면 예전처럼 명조로 떨어진다. */ .serif { font-family: var(--tpl-font-heading, var(--font-serif)); letter-spacing: var(--tpl-heading-tracking, normal); } /* 카드·패널 테두리 두께도 템플릿이 정한다. 레트로는 2px 라야 인쇄물처럼 보인다. */ .tpl-border { border-width: var(--tpl-border-width, 1px); } /* 섹션 공통 폭 — 본문이 한 줄에 너무 길어지지 않게. */ .shell { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .shell { padding-inline: 1.5rem; } } }