/* microlab 디자인 시스템 전역 스타일 — website 레포에서 이식.
FOUC 방지를 위해 index.html 에서 로 로드한다. JS 에서 import 금지. */
@import url('/fonts/pretendard/pretendard-variable.css');
@import url('/fonts/d2coding/d2coding.css');
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
font-display: block;
src: url('/fonts/press-start-2p/press-start-2p-latin-400-normal.woff2') format('woff2');
/* U+0020 만 빼고 전부. 이 한 줄이 픽셀 폰트 한글 제목의 낱말 사이가 한 글자만큼
벌어지던 원인을 없앤다 — 한글 글리프는 Galmuri11 로 떨어지는데 공백은 목록
첫 폰트인 여기서 그려졌고, 그 공백이 1em 이라 한글 한 글자와 폭이 거의 같았다.
unicode-range 는 "이 폰트를 쓸 수 있는 코드포인트" 지 "이 폰트가 가진 글리프"가
아니라서, 범위를 넓게 두어도 없는 글리프는 다음 폰트로 넘어간다. */
unicode-range: U+0-1F, U+21-10FFFF;
}
/* 한글 픽셀 폰트 — 픽셀 컨텍스트의 한글 폴백 */
@font-face {
font-family: 'Galmuri11';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/galmuri/Galmuri11.woff2') format('woff2');
/* U+0020 포함 — 위 Press Start 2P 가 공백을 내려놓았으므로 여기서 받는다. */
unicode-range: U+0020, U+1100-11FF, U+3000-303F, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}
:root {
color-scheme: dark;
/* surface */
--color-bg: #0a0e17;
--color-bg-alt: #111827;
--color-bg-card: #1a1f2e;
--color-border: #2a3142;
/* brand */
--color-primary: #7dffb3;
--color-primary-dim: #5ce396;
--color-accent: #7dd3fc;
/* text */
--color-text: #e2e8f0;
--color-text-dim: #94a3b8;
--color-text-muted: #64748b;
/* status */
--color-danger: #f87171;
/* type */
--font-pixel: 'Press Start 2P', 'Galmuri11', monospace;
--font-body: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
/* 한글 폴백(Pretendard)이 마지막에 있어야 한다 — 앞의 세 폰트는 전부 한글
글리프가 없어서, 한국어 시스템 폰트가 없는 환경(리눅스 서버, 일부
외국 사용자 기기)에서 mono 컨텍스트의 한글이 통째로 사라진다. 폭 0 도
tofu 도 아니고 그냥 안 보여서, 색만 남고 글자가 없는 화면이 된다.
자체호스팅이라 시스템에 무엇이 깔려 있든 항상 그려진다.
generic monospace **뒤에** 둔다. 앞에 두면 ui-monospace·SFMono·Menlo 가
하나도 없는 환경(리눅스·윈도우)에서 숫자까지 Pretendard 비례폭으로
떨어져 자릿수 정렬이 깨진다. CSS 폰트 매칭은 글자 단위라, generic
monospace 가 못 그리는 한글만 뒤의 Pretendard 로 넘어간다. */
/* D2Coding 이 맨 앞이어야 한다 — 한글 advance 가 라틴의 정확히 2배로 설계된
폰트라, 라틴만 다른 고정폭에서 오면 그 2배 관계가 깨져 정렬이 안 맞는다.
뒤의 Pretendard 는 D2Coding 에 없는 글자(이모지 등)를 위한 폴백으로 남긴다. */
--font-mono: 'D2Coding', ui-monospace, SFMono-Regular, Menlo, monospace, 'Pretendard Variable', Pretendard;
/* effects */
--grid-line: color-mix(in srgb, var(--color-primary) 4%, transparent);
--t-color: 0.2s;
--t-transform: 0.15s ease;
/* angled-cut */
--ac-cut: 20px;
--ac-border: 1px;
--ac-border-color: var(--color-border);
--ac-bg: var(--color-bg-card);
--ac-diagonal-adjust: -0.7;
}
/* ── 라이트 테마 ──
헤더 토글로 옵트인한다(html[data-theme="light"]). 다크가 기본이다.
단순 반전이 아니라 브랜드 색을 어둡게 옮긴다 — 민트 #7dffb3 는 흰 배경에서
대비가 안 나온다. 값은 website 레포의 라이트 팔레트와 동일하다. */
:root[data-theme='light'] {
color-scheme: light;
/* surface */
--color-bg: #f6f9f7;
--color-bg-alt: #eaf0ec;
--color-bg-card: #ffffff;
--color-border: #d3ddd5;
/* brand */
--color-primary: #087a4b;
--color-primary-dim: #06603b;
--color-accent: #0270a8;
/* text */
--color-text: #1d2733;
--color-text-dim: #4a5a6e;
--color-text-muted: #6d7b8c;
/* status — website 에 없는 토큰이라 여기서 정한다.
다크의 #f87171 은 밝은 배경에서 AA 대비를 못 맞춘다. */
--color-danger: #b91c1c;
/* effects */
--grid-line: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
word-spacing: 0.02em;
letter-spacing: 0.02em;
/* 스크롤바 자리를 항상 비워둔다. 내용이 길어져 스크롤바가 생기는 순간
뷰포트가 좁아지면서 화면 전체가 좌우로 밀리는 레이아웃 시프트(CLS)가
발생하는데, 이걸로 막는다. website 레포와 동일한 처리. */
scrollbar-gutter: stable;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg);
/* signature: 아주 옅은 민트 그래프 배경 */
background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--color-text);
line-height: 1.6;
min-height: 100svh;
display: flex;
flex-direction: column;
}
/* scrollbar-gutter 미지원 브라우저(구형 Safari) 폴백.
overflow-y: scroll 은 스크롤바 자리를 항상 차지하게 만든다. 단점처럼 보이지만
이 블록이 켜지는 환경과 단점이 나타나는 환경이 겹치지 않는다 — 클래식 스크롤바를
쓰는 Chrome·Firefox·Edge 는 scrollbar-gutter 를 지원하므로 여기 들어오지 않고,
여기 들어오는 구형 Safari 는 macOS·iOS 기본이 오버레이 스크롤바라 자리를 안 먹는다.
즉 CLS 가 실제로 일어나는 환경(스크롤바 항상 표시 설정)에서만 효과가 있다. */
@supports not (scrollbar-gutter: stable) {
html {
overflow-y: scroll;
}
}
::selection { background: var(--color-primary); color: var(--color-bg); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--t-color); }
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; }
footer { padding: 2.5rem 0; margin-top: auto; }
/* ── label: 픽셀 대문자 캡션 ── */
.label {
font-family: var(--font-pixel);
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-dim);
display: inline-block;
}
/* ── angled-cut 시스템 (website 이식) ──
.angled-cut / -sm / -xs / -lg 를 요소에 추가. --ac-bg 로 채움색,
--ac-border-color 로 테두리색 조정. .angled-cut-interactive 는 hover 강조. */
.angled-cut,
.angled-cut-sm,
.angled-cut-xs,
.angled-cut-lg,
.angled-cut-interactive {
--ac-cut: 20px;
--ac-border: 1px;
--ac-border-color: var(--color-border);
--ac-bg: var(--color-bg-card);
position: relative;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
isolation: isolate;
}
.angled-cut-sm { --ac-cut: 10px; }
.angled-cut-xs { --ac-cut: 5px; }
.angled-cut-lg { --ac-cut: 32px; }
/* 폼 컨트롤(input·select·textarea)은 대체요소라 브라우저가 ::before/::after 를
**생성하지 않는다.** 위 규칙이 background 와 border 를 !important 로 지우는데
상자를 그릴 의사요소가 없으니, angled-cut 을 붙인 입력칸은 배경도 테두리도 없이
글자만 떠 있게 된다 — 실제로 그렇게 배포돼 있었다(격리 확인: input·select·
textarea 의 ::before width 가 auto, button 만 67.78px).
그래서 이들에게는 진짜 background·border 를 돌려주고 모서리는 clip-path 로
직접 자른다. 잘린 대각선에는 테두리선이 없지만 --ac-cut 이 5~10px 이라
눈에 띄지 않는다.