/* ── 라이트/다크 테마 — theme.js가 를 관리 ── 기본: 시스템 설정 추종 / 토글 시 data-theme(light|dark)로 고정(localStorage) */ /* 다크 팔레트 (수동 선택) */ :root[data-theme="dark"] { --ds-canvas: #131417; --ds-surface: #1b1d21; --ds-surface-strong: #0c0d0f; --ds-ink: #eceef1; --ds-text: #b7bdc7; --ds-muted: #8f96a1; --ds-line: #2b2e35; --ds-brand: #e2604a; --ds-brand-soft: #35211c; --ds-signal: #7f9dff; --shadow: 0 1px 2px rgba(0,0,0,0.5); } html[data-theme="dark"] { color-scheme: dark; background: var(--ds-canvas); } /* 다크 팔레트 (시스템 추종 — 수동 light 고정이 아닐 때) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ds-canvas: #131417; --ds-surface: #1b1d21; --ds-surface-strong: #0c0d0f; --ds-ink: #eceef1; --ds-text: #b7bdc7; --ds-muted: #8f96a1; --ds-line: #2b2e35; --ds-brand: #e2604a; --ds-brand-soft: #35211c; --ds-signal: #7f9dff; --shadow: 0 1px 2px rgba(0,0,0,0.5); } html:not([data-theme="light"]) { color-scheme: dark; background: var(--ds-canvas); } } /* ── 다크에서 하드코딩 색 보정 ── */ :root[data-theme="dark"] .nav-cta { background: var(--ds-ink); color: #131417 !important; } :root[data-theme="dark"] .btn-primary { background: var(--ds-ink); color: #131417; } :root[data-theme="dark"] .btn-primary:hover { background: var(--ds-brand); color: #fff; } :root[data-theme="dark"] .hero-sub { color: var(--ds-text); } :root[data-theme="dark"] .pdf-pages img { border-color: #3a3d44; } :root[data-theme="dark"] .hero-id-avatar { box-shadow: 0 4px 14px rgba(0,0,0,0.5); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-cta { background: var(--ds-ink); color: #131417 !important; } :root:not([data-theme="light"]) .btn-primary { background: var(--ds-ink); color: #131417; } :root:not([data-theme="light"]) .btn-primary:hover { background: var(--ds-brand); color: #fff; } :root:not([data-theme="light"]) .hero-sub { color: var(--ds-text); } :root:not([data-theme="light"]) .pdf-pages img { border-color: #3a3d44; } :root:not([data-theme="light"]) .hero-id-avatar { box-shadow: 0 4px 14px rgba(0,0,0,0.5); } } /* ── 토글 버튼 ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border, #d8dde5); border-radius: 999px; background: transparent; color: var(--muted, #6c7480); cursor: pointer; padding: 0; transition: color 160ms, border-color 160ms; } .theme-toggle:hover { color: var(--ink, #111318); border-color: var(--ink, #111318); } .theme-toggle svg { width: 16px; height: 16px; display: block; } /* 아이콘 스위칭: 라이트에선 달(→다크로 전환), 다크에선 해 */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } } /* ── 다크: 흰색 호버 → 은은한 상승 톤 ── */ :root[data-theme="dark"] .project-card:hover, :root[data-theme="dark"] .proj-card:hover, :root[data-theme="dark"] .cell:hover, :root[data-theme="dark"] .case-cell:hover { background: #212329; border-color: var(--ds-brand); } /* ── 라이트: 쌩한 순백 톤 다운 (채도·온도 보정) ── */ :root[data-theme="light"] { --ds-canvas: #eef0f4; --ds-surface: #f9fafc; --ds-line: #d3d8e1; --ds-ink: #14161b; --ds-text: #404650; } :root[data-theme="light"] .project-card:hover, :root[data-theme="light"] .proj-card:hover, :root[data-theme="light"] .cell:hover, :root[data-theme="light"] .case-cell:hover { background: #f1f3f7; } /* ── 라이트: 대표(반전) 카드는 호버에도 다크 유지 ── */ /* ═══════════════════════════════════════════════════════ 타이포·태그 재조정 (Claude 소유, 2026-07-31) design-system.css 뒤에 로드되어 크기·명암을 오버라이드. 페이지 인라인