/* ================================================================ 미지기지 (未知基地) · 먹빛 & 단청 한지 크림 · 먹빛 · 단청 주홍 · 치자 금황 · 오방색 감성 ================================================================ */ /* ── Fonts ── Pretendard: 한글 본문 가독성 (동적 서브셋 → 빠름) Gowun Batang: 한국 전통 느낌의 본문 세리프 (소제목·블록쿼트) Noto Serif KR: 제목용 모던 세리프 IBM Plex Mono: 날짜·라벨·코드 */ /* Pretendard: 동적 서브셋 CDN (빠름) */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css'); /* Noto Serif KR + IBM Plex Mono: skin.html 에서 비차단 방식으로 로드 */ /* ── Tokens ── */ :root { /* Surfaces — 화이트 베이스 (콘텐츠 이미지와 어울리는 깨끗한 배경) */ --cream: #ffffff; /* 페이지 배경 = 순백 */ --white: #ffffff; --warm-bg: #faf6ee; /* 살짝 따뜻한 한지톤 (포인트 배경용) */ --border: #e4dcc9; --border-l: #f0e8d6; /* ── 오방색 팔레트 (五方色) ── 청(靑·동)·적(赤·남)·황(黃·중)·백(白·서)·흑(黑·북) */ --dancheong: #c9473a; /* 단청 주홍 (적) — 메인 악센트 */ --dancheong-d: #9c3329; --dancheong-l: #d96050; --dancheong-dim:rgba(201, 71, 58, 0.08); --dancheong-mid:rgba(201, 71, 58, 0.18); --chiza: #d4a534; /* 치자 금황 (황) — 포인트·골드 */ --chiza-dim: rgba(212, 165, 52, 0.12); --cheong: #2e5ea7; /* 청 (동) — 포커스·링크 hover */ --cheong-dim: rgba(46, 94, 167, 0.08); --meok: #1c1a26; /* 먹 (흑) — 푸터·본문 제목 */ --meok-d: #0d0c14; /* ── 호환 별칭 (기존 --green* 참조 전부 단청 주홍으로 재매핑) ── */ --green: var(--dancheong); --green-d: var(--dancheong-d); --green-l: var(--dancheong-l); --green-dim: var(--dancheong-dim); --green-mid: var(--dancheong-mid); /* Sienna 계열 (보조) */ --sienna: #8b5e3c; --sienna-dim:rgba(139, 94, 60, 0.08); /* Text — 먹빛 계조 */ --ink: #1c1a26; /* 먹 */ --txt: #3a2e26; /* 농묵 */ --txt-2: #6b5e50; /* 중묵 */ --txt-3: #9c8e7e; /* 담묵 */ /* Header — 화이트 고정 */ --hdr: #ffffff; --hdr-txt: #1c1a26; --hdr-sub: #6b5e50; --hdr-hover: rgba(201, 71, 58, 0.08); /* Typography 제목: Pretendard Black/ExtraBold (또렷·크리스프·편집디자인) 본문: Pretendard (한글 가독성 최강) UI: IBM Plex Mono (날짜·라벨·코드) 인용구: Nanum Myeongjo (한국적 포인트) */ --f-display: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; --f-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; --f-mono: 'IBM Plex Mono', 'Courier New', monospace; --f-quote: 'Nanum Myeongjo', 'Noto Serif KR', Georgia, serif; /* Shadows */ --sh-sm: 0 1px 3px rgba(28,25,20,.06), 0 2px 8px rgba(28,25,20,.04); --sh-md: 0 2px 12px rgba(28,25,20,.08), 0 4px 20px rgba(28,25,20,.05); --sh-hover: 0 6px 28px rgba(28,25,20,.12), 0 2px 8px rgba(28,25,20,.06); /* Layout */ --sidebar: 252px; --max-w: 1160px; --t: 0.2s ease; --t-out: 0.32s cubic-bezier(0.16, 1, 0.3, 1); --r: 8px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--f-sans); font-size: 17px; /* 16 → 17px: 한글 가독성 향상 */ line-height: 1.85; background: var(--cream); color: var(--txt); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-break: keep-all; /* 한글 단어 중간 줄바꿈 방지 */ } /* ── 링크 보라색 완전 제거 ────────────────────────────────── 브라우저 기본값과 Tistory CSS 모두 덮어씀 */ a, a:link, a:visited, a:active { color: var(--green) !important; text-decoration: none; } a:hover { color: var(--green-l) !important; } /* 사이트 헤더 링크는 별도 */ #site-header a, #site-header a:link, #site-header a:visited, #site-header a:active { color: var(--hdr-txt) !important; } #site-header a:hover { color: #ffffff !important; } /* 푸터 링크 */ #site-footer a, #site-footer a:link, #site-footer a:visited { color: var(--hdr-sub) !important; } #site-footer a:hover { color: var(--hdr-txt) !important; } img { max-width: 100%; height: auto; display: block; } button { cursor: pointer; font-family: inherit; } h1, h2, h3, h4 { color: var(--ink); line-height: 1.3; } /* ── 접근성 ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Container ── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } /* ================================================================ HEADER ================================================================ */ #site-header { background: var(--hdr); position: sticky; top: 0; z-index: 200; border-bottom: 1px solid var(--border-l); box-shadow: 0 1px 8px rgba(28, 25, 20, 0.04); } /* 상단 세선 — 단청 삼색 그라데이션 (먹·주홍·금황) */ #site-header::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--meok) 0%, var(--dancheong) 35%, var(--chiza) 65%, var(--dancheong) 100%); } .hdr-inner { display: flex; align-items: center; gap: 28px; padding: 14px 24px; max-width: var(--max-w); margin: 0 auto; } /* 브랜드 */ .hdr-brand { flex: 1; min-width: 0; } .brand-title { font-family: var(--f-display); font-size: 23px; font-weight: 900; /* Pretendard Black — 또렷 */ letter-spacing: -0.035em; /* 한글은 타이트하게 */ display: inline-block; color: var(--meok) !important; transition: color var(--t); line-height: 1.2; } .brand-title:hover { color: var(--dancheong) !important; } .brand-desc { display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--hdr-sub); letter-spacing: 0.14em; /* 영문 라벨은 와이드 트래킹 */ text-transform: uppercase; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; font-weight: 500; } /* 내비게이션 */ .site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; } /* Tistory [##_blog_menu_##] 는 또는