/* ========================================================== geonho.kim — Tidepool palette Light / dark tokens + base styles - 기본: 시스템 설정(prefers-color-scheme)을 따름 - 강제: 또는 data-theme="dark" ========================================================== */ /* ---------- Light (default) ---------- */ :root { color-scheme: light; /* Surfaces */ --tp-bg: #EEF1EE; /* 페이지 배경 */ --tp-surface: #F9FAF8; /* 카드, 섹션 */ --tp-surface-raised:#FFFFFF; /* 모달, 드롭다운 */ --tp-border: #D6DDD9; --tp-code-bg: #E3E9E6; /* Text */ --tp-text: #14201E; /* 본문 (대비 15:1) */ --tp-muted: #52605C; /* 보조 텍스트 (5.7:1) */ /* Accent */ --tp-accent: #2F6F68; /* 버튼, 강조 */ --tp-accent-hover: #245A54; --tp-on-accent: #FFFFFF; /* 버튼 위 글자 */ --tp-accent-soft: #CFE2DC; /* 배지, 하이라이트 배경 */ --tp-link: #2F6F68; --tp-link-hover: #1C4A45; --tp-focus: #2F6F68; --tp-selection: #CFE2DC; /* Status */ --tp-success: #3B7250; --tp-warning: #8A6412; --tp-danger: #A8413A; /* Shape & rhythm */ --tp-radius-sm: 6px; --tp-radius: 10px; --tp-radius-lg: 16px; --tp-space-1: 4px; --tp-space-2: 8px; --tp-space-3: 12px; --tp-space-4: 16px; --tp-space-5: 24px; --tp-space-6: 32px; --tp-space-7: 48px; --tp-space-8: 64px; /* Type */ --tp-font-sans: system-ui, -apple-system, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --tp-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; --tp-measure: 68ch; } /* ---------- Dark: 시스템 설정 ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --tp-bg: #101817; --tp-surface: #18221F; --tp-surface-raised:#1F2B28; --tp-border: #2A3834; --tp-code-bg: #16201D; --tp-text: #E6ECE9; --tp-muted: #97A6A1; --tp-accent: #86C7B8; --tp-accent-hover: #A3D6CA; --tp-on-accent: #101817; --tp-accent-soft: #1E3A35; --tp-link: #CFE2DC; --tp-link-hover: #FFFFFF; --tp-focus: #86C7B8; --tp-selection: #2F6F68; --tp-success: #9ED1A4; --tp-warning: #E3C26B; --tp-danger: #F09A8F; } } /* ---------- Dark: 수동 전환 ---------- */ :root[data-theme="dark"] { color-scheme: dark; --tp-bg: #101817; --tp-surface: #18221F; --tp-surface-raised:#1F2B28; --tp-border: #2A3834; --tp-code-bg: #16201D; --tp-text: #E6ECE9; --tp-muted: #97A6A1; --tp-accent: #86C7B8; --tp-accent-hover: #A3D6CA; --tp-on-accent: #101817; --tp-accent-soft: #1E3A35; --tp-link: #CFE2DC; --tp-link-hover: #FFFFFF; --tp-focus: #86C7B8; --tp-selection: #2F6F68; --tp-success: #9ED1A4; --tp-warning: #E3C26B; --tp-danger: #F09A8F; } /* ========================================================== Base styles (필요 없으면 이 아래는 지워도 됩니다) ========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--tp-bg); color: var(--tp-text); font-family: var(--tp-font-sans); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } main, article { max-width: var(--tp-measure); } h1, h2, h3, h4 { line-height: 1.25; margin: 1.6em 0 0.5em; } h1 { font-size: 2.25rem; letter-spacing: -0.01em; } h2 { font-size: 1.625rem; } h3 { font-size: 1.25rem; } p { margin: 0 0 1em; } small, .tp-muted { color: var(--tp-muted); } a { color: var(--tp-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--tp-link-hover); text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; border-radius: var(--tp-radius-sm); } ::selection { background: var(--tp-selection); color: var(--tp-text); } hr { border: 0; border-top: 1px solid var(--tp-border); margin: var(--tp-space-6) 0; } blockquote { margin: var(--tp-space-5) 0; padding: var(--tp-space-3) var(--tp-space-4); background: var(--tp-surface); border-radius: var(--tp-radius); color: var(--tp-muted); } code, kbd, pre { font-family: var(--tp-font-mono); font-size: 0.9em; } :not(pre) > code { background: var(--tp-code-bg); padding: 0.1em 0.35em; border-radius: var(--tp-radius-sm); } pre { background: var(--tp-code-bg); padding: var(--tp-space-4); border-radius: var(--tp-radius); overflow-x: auto; line-height: 1.55; } /* ---------- Components ---------- */ .tp-surface { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); padding: var(--tp-space-5); } .tp-btn { display: inline-flex; align-items: center; gap: var(--tp-space-2); min-height: 44px; padding: 0 var(--tp-space-4); border: 1px solid transparent; border-radius: var(--tp-radius); background: var(--tp-accent); color: var(--tp-on-accent); font: 500 0.9375rem/1 var(--tp-font-sans); text-decoration: none; cursor: pointer; } .tp-btn:hover { background: var(--tp-accent-hover); color: var(--tp-on-accent); } .tp-btn--ghost { background: transparent; color: var(--tp-text); border-color: var(--tp-border); } .tp-btn--ghost:hover { background: var(--tp-surface); color: var(--tp-text); } .tp-badge { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; background: var(--tp-accent-soft); color: var(--tp-text); font-size: 0.8125rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }