/* MoaHub 공용 디자인 토큰 v1 (모아 코어 v2) — 2026-08-26 * 모든 서브도메인이 이 파일 하나를 로드한다. 크롬(서체·중립색·간격·라디우스)만 공통, * 사이트별 악센트는 각 사이트가 --mh-accent 를 덮어쓴다. * 사용: */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); :root { --mh-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; --mh-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* 중립 (살짝 따뜻한 회색 — 순수 회색 금지) */ --mh-bg: #FAFAF8; --mh-surface: #FFFFFF; --mh-ink: #15171C; --mh-ink-2: #5B5F6B; --mh-ink-3: #8A8E99; --mh-line: #ECEBE5; /* 악센트 — 사이트별로 덮어쓴다 (허브 인디고 기본) */ --mh-accent: #4353E8; --mh-accent-soft: #EEF0FD; --mh-on-accent: #FFFFFF; --mh-radius-sm: 8px; --mh-radius-md: 12px; --mh-radius-lg: 20px; --mh-shadow-card: 0 12px 40px rgba(20, 22, 30, 0.06); --mh-tap: 40px; /* 최소 탭 타깃 */ --mh-text-min: 12px; /* 본문 최소 글자 */ --mh-wrap: 1140px; } /* 사이트별 악센트 프리셋 — 처럼 지정 */ :root[data-mh-site="storymoa"] { --mh-accent: #E89B47; --mh-accent-soft: #FFF3E3; --mh-bg: #FFF8F0; --mh-ink: #2D2A26; } :root[data-mh-site="calc"] { --mh-accent: #1E3A5F; --mh-accent-soft: #E8EEF6; } :root[data-mh-site="tools"] { --mh-accent: #0E9AA7; --mh-accent-soft: #E2F5F7; } :root[data-mh-site="games"] { --mh-accent: #7CD957; --mh-accent-soft: #EAF9E2; } :root[data-mh-site="mind"] { --mh-accent: #E0655A; --mh-accent-soft: #FCE9E7; } :root[data-mh-site="blog"] { --mh-accent: #3B4252; --mh-accent-soft: #ECEEF2; } /* 다크 — 사이트가 를 쓸 때만 */ :root[data-theme="dark"] { --mh-bg: #101217; --mh-surface: #171A21; --mh-ink: #ECEDF1; --mh-ink-2: #B3B7C2; --mh-ink-3: #7F8492; --mh-line: #262A33; --mh-accent-soft: #1F2436; } /* 공용 유틸 — 필요한 곳에서 클래스만 붙인다 */ .mh-tap { min-height: var(--mh-tap); min-width: var(--mh-tap); display: inline-flex; align-items: center; justify-content: center; } .mh-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .mh-chips::-webkit-scrollbar { display: none; } .mh-chips > * { flex: 0 0 auto; min-height: var(--mh-tap); padding: 0 14px; border-radius: 999px; border: 1px solid var(--mh-line); background: var(--mh-surface); color: var(--mh-ink); font: 600 14px/1 var(--mh-font-sans); white-space: nowrap; } .mh-chips > [aria-current], .mh-chips > .on { background: var(--mh-accent); color: var(--mh-on-accent); border-color: var(--mh-accent); }