/** * 콘텐츠 액셀러레이터 — Theme * * 토큰: Ryan Design Language CDN에서 자동 로드 * 이 파일: 프로젝트 전용 스타일만 (reset, body, scrollbar, links, utilities) * * 테마 전환: (기본: light) */ @import url('https://design-tokens-production.up.railway.app/design-tokens.css'); @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css'); @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Noto+Serif+KR:wght@400;500;600;700&display=swap'); /* ═══════════════════════════════════════════════════════════ EDITORIAL-PAPER 토큰 오버라이드 (SSOT · 다크→라이트 고정) CDN @import 뒤에 와서 cascade 우선. 변수 페이지 + tailwind-dark remap 페이지가 한 번에 크림 종이 + 잉크 + 매거진레드로 통일됨. ═══════════════════════════════════════════════════════════ */ :root, [data-theme="light"], [data-theme="dark"] { /* 배경 — 크림 종이 */ --bg-base: #f4f0e6; --bg-surface: #faf7ef; --bg-elevated: #ede8db; --bg-elevated-2: #e4ddcc; /* 텍스트 — 잉크 */ --text-primary: #171717; --text-secondary: rgba(23, 23, 23, 0.72); --text-tertiary: rgba(23, 23, 23, 0.52); --text-ghost: rgba(23, 23, 23, 0.32); /* 악센트 — 매거진레드 */ --color-accent: #9c2618; --accent-hover: #7e1d12; --accent-text: #9c2618; --accent-secondary: #5f5a48; --accent-bg: rgba(156, 38, 24, 0.06); --accent-glow: rgba(156, 38, 24, 0.04); --on-accent: #faf7ef; /* 시맨틱 — 종이 톤에 맞춰 차분하게 (danger=매거진레드 정합) */ --color-success: #4f7a52; --color-warning: #b0832c; --color-danger: #9c2618; --color-info: #5a6b85; --color-purple: #6b5e85; --success-hover: #436b46; /* 보더 — 잉크 16% / 강조 32% */ --border-subtle: rgba(23, 23, 23, 0.16); --border-emphasis: rgba(23, 23, 23, 0.32); --border-focus: rgba(156, 38, 24, 0.4); /* 오버레이 — 따뜻한 잉크. 0.5는 배경 텍스트가 비쳐 모달이 '깨져' 보였다 → 0.62로 강화 + blur. */ --overlay: rgba(23, 23, 23, 0.62); --modal-backdrop-blur: 6px; /* .modal-overlay(tailwind-dark)가 참조 — 미정의라 blur가 무효였음 */ /* 폰트 — 헤드라인 세리프 / 본문 Pretendard */ --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --font-serif: 'Newsreader', 'Noto Serif KR', Georgia, serif; /* 그라디언트 — 플랫 단색 */ --gradient-accent: #9c2618; --gradient-surface: var(--bg-surface); /* 그림자 — 거의 제거 (플랫 에디토리얼) */ --shadow-sm: none; --shadow-md: 0 1px 0 rgba(23, 23, 23, 0.04); --shadow-lg: 0 1px 2px rgba(23, 23, 23, 0.06); --shadow-glow: none; /* radius — 2~4px 플랫 (full 은 유지) */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 4px; --radius-xl: 6px; --radius-2xl: 8px; /* ─────────────────────────────────────────────────────── creator-os.app EDITORIAL 토큰 alias (하위호환 + 명명 통일) 대시보드는 --bg-base/--text-primary/--color-accent 체계를 쓰고 creator-os.app 마케팅 사이트는 --paper/--ink/--accent 명명을 씀. 값은 동일 — alias 로 두 명명을 SSOT 한 곳에서 연결. (절대 rename 아님 — 기존 토큰 그대로 살아있고 별칭만 추가) ─────────────────────────────────────────────────────── */ --paper: var(--bg-base); /* 크림 종이 */ --paper-surface: var(--bg-surface); --ink: var(--text-primary); /* 잉크 */ --ink-soft: var(--text-secondary); --ink-faint: var(--text-tertiary); --accent: var(--color-accent); /* 매거진레드 */ --hairline: var(--border-subtle); /* 얇은 규칙선 */ /* ─────────────────────────────────────────────────────── EDITORIAL 디스플레이 타이포 스케일 (매거진식 큰 세리프) creator-os.app 의 1.6rem~약 5rem 디스플레이 연출용. 기존 --text-* 스케일은 그대로 두고 별도 디스플레이 토큰만 추가. ─────────────────────────────────────────────────────── */ --display-xs: 1.6rem; --display-sm: 2.25rem; --display-md: 3.25rem; --display-lg: 4.5rem; --display-tracking: -0.03em; /* 좁은 자간 */ --section-gap: 5rem; /* 넉넉한 섹션 여백 (8pt 그리드) */ } /* 헤드라인 세리프 — h1~h3 (작은 .text-lg 라벨은 tailwind-dark 의 mono 규칙 유지) */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; /* 줄 길이를 고르게 나눈다 — 「…콘텐츠 / 비법이라고요?」처럼 마지막 줄에 한 낱말만 떨어지는 제목을 막는다. */ text-wrap: balance; } /* ═══════════════════════════════════════════════════════════ GLOBAL RESET + BASE ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg-base); color: var(--text-primary); min-height: 100vh; font-size: var(--text-base); line-height: var(--leading-normal); /* 한글 줄바꿈 — 어절 단위로 끊는다. 기본값은 음절 단위라 「무적의 글쓰기 공 / 식」처럼 낱말 한가운데서 갈라져 읽기 어렵다. 단 keep-all 은 최소폭을 어절만큼 키워 좁은 칸(표·그리드)을 밀 수 있으므로 anywhere 로 최소폭을 되돌려 가로 밀림을 막는다. 앞줄의 break-word 는 anywhere 미지원 브라우저용 폴백이다. */ word-break: keep-all; overflow-wrap: break-word; overflow-wrap: anywhere; /* 마지막 줄에 한 낱말만 떨어지는 것을 막는다 — 자료 열람 페이지 (lead_magnet.render_reading_page)가 쓰던 규칙을 전 화면에 맞춘 것. */ text-wrap: pretty; transition: background var(--duration-slow) var(--ease-spring), color var(--duration-slow) var(--ease-spring); } /* noise texture */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99999; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px; } /* scrollbar */ *::-webkit-scrollbar { width: 4px; height: 4px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-emphasis); border-radius: var(--radius-full); } *::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* links */ a { color: var(--color-accent); text-decoration: none; transition: opacity var(--duration-fast) ease; } a:hover { opacity: var(--hover-opacity); } /* iOS 입력 포커스 자동 줌 방지 — 폰트 16px 미만이면 사파리가 화면을 확대(웹앱처럼 못 씀). viewport maximum-scale=1.0 와 이중 방어. 모바일에서 입력류 최소 16px 강제. (전 페이지 공용) */ @media (max-width: 767px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: 16px !important; } } /* ── 전역 폼 컨트롤 — select · date/month/time/datetime-local (2026-07-13 전수 통일) specificity (0,0,2) `html select`: Tailwind preflight(0,0,1)는 이기고, 페이지 로컬 클래스(0,1,0+)에는 진다 = 전역은 기본값, 로컬 오버라이드 존중. ⚠️ 컨벤션: 폼 컨트롤 로컬 스타일은 `background:` 축약형 금지 — 축약형이 아래 화살표 background-image 를 리셋해 '무화살표 셀렉트'가 된다. `background-color:` longhand 만 사용할 것. */ html select, html input[type="date"], html input[type="month"], html input[type="time"], html input[type="datetime-local"] { background-color: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); min-height: 44px; padding: var(--space-2) var(--space-3); font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--text-primary); box-sizing: border-box; transition: border-color var(--duration-fast, .12s) ease, box-shadow var(--duration-fast, .12s) ease; } /* 드롭다운만 — 네이티브 화살표 제거 + 잉크색 SVG 화살표. multiple/size 리스트박스 제외 */ html select:where(:not([multiple], [size])) { -webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-opacity='0.55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; cursor: pointer; } html select:where([multiple], [size]) { min-height: 0; padding: var(--space-2); } html select:focus, html input[type="date"]:focus, html input[type="month"]:focus, html input[type="time"]:focus, html input[type="datetime-local"]:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--accent-bg, rgba(156, 38, 24, .12)); } html select:disabled { opacity: .5; cursor: not-allowed; } html select option { background: var(--bg-elevated); color: var(--text-primary); } html input[type="date"]::-webkit-calendar-picker-indicator, html input[type="month"]::-webkit-calendar-picker-indicator, html input[type="time"]::-webkit-calendar-picker-indicator, html input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; } /* mono label utility */ .mono-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-mono); color: var(--text-tertiary); } /* gradient line utility */ .gradient-line { height: var(--gradient-line-height); background: var(--gradient-accent); opacity: var(--gradient-line-opacity); } /* ═══════════════════════════════════════════════════════════ EDITORIAL 타이포 연출 (creator-os.app 매거진 톤 · 공통 SSOT) - 큰 세리프 디스플레이 + 좁은 자간 + 넉넉한 섹션 여백 - 얇은 헤어라인 규칙선 + 세리프 제목 카드 - opt-in 클래스 (.editorial-*) — 기존 페이지 깨뜨리지 않음 ═══════════════════════════════════════════════════════════ */ /* 디스플레이 헤드라인 — 매거진식 큰 세리프 */ .editorial-display { font-family: var(--font-serif); font-weight: 600; letter-spacing: var(--display-tracking); line-height: 1.08; color: var(--ink); } .editorial-display-lg { font-size: var(--display-lg); } .editorial-display-md { font-size: var(--display-md); } .editorial-display-sm { font-size: var(--display-sm); } .editorial-display-xs { font-size: var(--display-xs); } /* 디스플레이 아래 부제 — 세리프 이탤릭 차분한 톤 */ .editorial-subtitle { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; } /* 넉넉한 섹션 여백 */ .editorial-section { margin-bottom: var(--section-gap); } /* 얇은 헤어라인 규칙선 — 섹션 구분 */ .editorial-rule { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-xl) 0; } /* 세리프 제목 카드 — 박스 그림자 대신 헤어라인 + 세리프 제목 */ .editorial-card { background: var(--paper-surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-xl); transition: border-color var(--duration-normal) var(--ease-default); } .editorial-card:hover { border-color: var(--border-emphasis); } .editorial-card-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: var(--display-tracking); color: var(--ink); } /* 디스플레이 반응형 — 모바일에서 한 단계 축소 */ @media (max-width: 640px) { .editorial-display-lg { font-size: var(--display-md); } .editorial-display-md { font-size: var(--display-sm); } .editorial-section { margin-bottom: var(--space-2xl); } } /* ─── 데이터 테이블: 모바일 친화 (얼척없는 글자단위 개행 방지) ─────────── .data-table 를 단 표는 셀이 글자단위로 개행되지 않음(배지·상태·숫자·짧은 칼럼 보호). 긴 가변 칼럼(이메일·URL 등)은 셀 안
로 말줄임. 반응형 숨김: 좁아지면 덜 중요한 칼럼부터 — th/td 양쪽에 같은 col-hide-* 클래스. */ .data-table th, .data-table td { white-space: nowrap; } .cell-trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 640px) { .cell-trunc { max-width: 120px; } } /* 모바일: 더 좁게 말줄임 */ @media (max-width: 1024px) { .col-hide-lg { display: none !important; } } @media (max-width: 768px) { .col-hide-md { display: none !important; } } @media (max-width: 640px) { .col-hide-sm { display: none !important; } }