/* Theme Name: GeneratePress Nocturne Theme URI: https://generatepress.com/ Description: GeneratePress 자식 테마. 밝은 지면과 어두운 지면 위에 은은한 광원과 유리질 내비게이션, 큼직한 디스플레이 제목을 얹은 2026년형 스타일입니다. 글 목록은 첫 글을 크게 두는 벤토 배치, 낱글은 읽기 진행 표시와 넓은 행간으로 구성했습니다. 지면은 라이트(기본) · 다크 · 자동(기기 설정) 셋 중에 고르고, 강조색은 오로라 · 엠버 · 플럭스 · 모스 네 가지를 사용자정의하기에서 전환합니다. Author: gwang Author URI: https://example.com Template: generatepress Version: 1.0.20 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: generatepress-nocturne Tags: blog, one-column, two-columns, custom-menu, custom-colors, editor-style, translation-ready, full-width-template, featured-images */ /* ========================================================= 읽는 순서 01 토큰 → 02 지면 모드 → 03 지면 → 04 헤더 · 내비 → 05 글 목록 → 06 낱글 → 07 본문 → 08 사이드바 → 09 푸터 → 10 댓글 · 폼 → 11 페이지네이션 · 404 → 12 나머지 색은 전부 01~02 에서 변수로 정합니다. 아래 규칙은 변수만 쓰므로 팔레트를 하나 더 만들려면 01 에 블록 하나만 추가하면 됩니다. ========================================================= */ /* ========================================================= 01. 토큰 ========================================================= */ :root { --n-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; --n-display: "Instrument Sans", "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif; --n-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, "D2Coding", monospace; /* 지면 폭. 사용자정의하기 > 레이아웃 > 컨테이너 너비와 맞춰 두세요. */ --n-wrap: 1200px; /* 모서리 — 카드는 크게, 작은 요소는 절반 */ --n-r: 18px; --n-r-sm: 10px; --n-r-pill: 999px; --n-gap: clamp(1.25rem, 2.4vw, 2rem); /* 본문 세로 리듬. 되돌리려면 아래 두 줄만 고치면 됩니다 — 규칙은 건드릴 필요 없이 여기 값만 바꾸면 전체에 반영됩니다. --n-para 문단과 문단 사이 1.5em(원래) → 1.18em --n-lead 소제목 바로 아래 첫 문단 1.5em(원래) → 0.9em em 이라 문단 글자 크기(17px)에 비례합니다. 1.18em = 20px, 0.9em = 15.3px. px 로 적지 않고 em 으로 두는 이유는, 나중에 본문 글자 크기를 키웠을 때 여백도 같이 따라오게 하기 위해서입니다. --n-lead 를 --n-para 보다 좁게 두는 이유는, 소제목과 첫 문단이 한 덩어리로 읽혀야 하기 때문입니다. */ --n-para: 1.18em; --n-lead: .9em; /* 자주 묻는 질문의 Q · A. 위 두 값과 같은 방식으로 여기서만 고칩니다. --n-qa-in 질문과 답 사이 0.6em = 10.2px --n-qa-out 답과 다음 질문 사이 2em = 34px (2.6em 에서 줄임) Q&A 는 두 조각이 한 묶음이라, 한 조각짜리인 일반 문단(--n-para)보다 묶음 사이가 넓어야 짝이 읽힙니다. --n-qa-out 을 --n-para 까지 낮추면 묶음 사이가 안쪽의 1.4배밖에 안 되어 짝이 흐려집니다. */ --n-qa-in: .6em; --n-qa-out: 2em; /* 모바일 좌우 여백. 카드 좌우 선이 화면 끝에 붙어 안 보이지 않도록 테마가 직접 잡습니다. 여백을 바꾸려면 이 한 줄만 고치세요. */ --n-edge: clamp(12px, 3.5vw, 16px); --n-block: clamp(2.75rem, 6vw, 5rem); --n-hair: 1px; --n-ease: cubic-bezier(.22, .61, .36, 1); } /* 강조색. --a1 · --a2 는 그라디언트 양 끝, --a-lt 는 밝은 지면에서 글자색으로 쓸 어두운 변형입니다. 흰 배경에 민트를 그대로 쓰면 대비가 3:1 도 안 나와서 글자용은 따로 둡니다. */ body, body.pal-aurora { --a1: #5ee1c4; --a2: #6aa6ff; --a-lt: #0d7a8c; } body.pal-ember { --a1: #ffb457; --a2: #ff6b57; --a-lt: #b4451f; } body.pal-flux { --a1: #a78bfa; --a2: #f472b6; --a-lt: #6d28d9; } body.pal-moss { --a1: #a3e635; --a2: #34d399; --a-lt: #3f6212; } /* ========================================================= 02. 지면 모드 기본은 라이트. 다크는 body.n-dark, 자동은 body.n-auto 가 붙습니다. 자동은 라이트 값을 물려받고 있다가 기기가 다크일 때만 어두워집니다. ========================================================= */ body, body.n-light, body.n-auto { color-scheme: light; --bg: #fbfbfc; --surface: #ffffff; --surface-2: #f4f5f8; --text: #14171d; --muted: #58606e; --faint: #8b93a1; --line: rgba(10, 13, 20, .10); --line-strong: rgba(10, 13, 20, .18); --accent: var(--a-lt); --on-accent: #ffffff; --glow: .13; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 24px -12px rgba(16, 24, 40, .16); --shadow-lift: 0 2px 4px rgba(16, 24, 40, .06), 0 22px 44px -16px rgba(16, 24, 40, .22); } body.n-dark { color-scheme: dark; --bg: #0a0b0f; --surface: #111319; --surface-2: #171a21; --text: #e8eaef; --muted: #9aa2af; --faint: #6b7280; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .17); --accent: var(--a1); --on-accent: #07090d; --glow: .34; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -12px rgba(0, 0, 0, .7); --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 48px -16px rgba(0, 0, 0, .85); } @media (prefers-color-scheme: dark) { body.n-auto { color-scheme: dark; --bg: #0a0b0f; --surface: #111319; --surface-2: #171a21; --text: #e8eaef; --muted: #9aa2af; --faint: #6b7280; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .17); --accent: var(--a1); --on-accent: #07090d; --glow: .34; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -12px rgba(0, 0, 0, .7); --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 48px -16px rgba(0, 0, 0, .85); } } /* ========================================================= 03. 지면 ========================================================= */ body { background-color: var(--bg); color: var(--text); font-family: var(--n-sans); font-size: 1.0625rem; /* 17px. 한글은 16px 이 조금 답답합니다. */ line-height: 1.75; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 위쪽 광원. 스크롤을 따라오지 않게 fixed 로 깔고, 맨 뒤로 보낸 뒤 pointer-events 를 꺼서 클릭을 가로채지 않게 합니다. */ body::before { content: ""; position: fixed; inset: -18vh 0 auto 0; height: 88vh; z-index: -1; pointer-events: none; opacity: var(--glow); background: radial-gradient(52vw 42vh at 16% 0%, var(--a1), transparent 68%), radial-gradient(46vw 38vh at 86% 8%, var(--a2), transparent 66%); filter: blur(24px); } body.n-noglow::before { content: none; } .grid-container { max-width: var(--n-wrap); } a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: color .18s var(--n-ease), opacity .18s var(--n-ease); } a:hover, a:focus { color: var(--accent); opacity: .75; } ::selection { background: color-mix(in srgb, var(--a1) 32%, transparent); color: var(--text); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } hr, .wp-block-separator { border: 0; border-top: var(--n-hair) solid var(--line); margin: var(--n-block) 0; } /* GP 는 컨테이너 배경을 사용자정의하기 값으로 인라인 출력합니다. 자식 테마 쪽 지면색이 이기도록 여기서 한 번 눌러 둡니다. */ .separate-containers .site-main > *, .separate-containers .paging-navigation, .one-container .site-content { background-color: transparent; } /* ========================================================= 04. 헤더 · 내비게이션 ========================================================= */ /* 로고 위아래 여백은 테마가 직접 정합니다. 처음에는 GP 의 '레이아웃 > 헤더 > 헤더 패딩' 에 맡겼는데, 그 값이 사이트마다 달라서 어떤 곳은 로고 위가 80px, 어떤 곳은 붙어 버렸습니다. 여백 주인이 둘이면 예측이 안 되므로 여기서 한 번에 정하고, 아래위 좌우 중 위아래만 덮어씁니다(넓은 화면의 좌우는 GP 값 그대로 — 컨테이너 정렬에 쓰입니다. 768px 아래 좌우는 위 --n-edge 규칙이 카드와 같은 선으로 맞춥니다). 값을 바꾸고 싶으면 이 두 줄을 고치세요. GP 설정으로는 바뀌지 않습니다. */ .site-header .inside-header { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); } /* 헤더 자체는 여백을 갖지 않습니다. 아래 여백은 내비게이션이 margin-top 으로 가집니다. 헤더에 붙여 두면 메뉴가 없는 사이트에서 내비만 사라지고 여백은 남아 로고 밑이 텅 비어 보입니다. */ .site-header { background: transparent; padding-top: 0; padding-bottom: 0; } .site-header .inside-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } /* GeneratePress 는 사이트 제목을 .site-title 이 아니라 .main-title 로 내보냅니다. 첫 화면은

, 나머지 페이지는

. .main-title 을 같이 잡지 않으면 제목이 사용자정의하기 색을 그대로 써서 어두운 지면에서 안 보입니다. */ .site-title, .main-title { font-family: var(--n-display); font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 640; letter-spacing: -.03em; line-height: 1.2; margin: 0; } .site-title a, .site-title a:hover, .main-title a, .main-title a:hover { color: var(--text); text-decoration: none; opacity: 1; } .site-description { margin: .3rem 0 0; color: var(--muted); font-size: .8125rem; letter-spacing: 0; } /* 메뉴를 배정하지 않으면 GP 는 링크 없는