/* motion-scan 전역 스타일 — microlab 디자인 시스템(website 레포) 이식. FOUC 방지를 위해 index.html 에서 로 로드한다. JS 에서 import 금지. */ @import url('/fonts/pretendard/pretendard-variable.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'); } /* 한글 픽셀 폰트 — 픽셀 컨텍스트의 한글 폴백 */ @font-face { font-family: 'Galmuri11'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/galmuri/Galmuri11.woff2') format('woff2'); unicode-range: 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; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* 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; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { word-spacing: 0.02em; letter-spacing: 0.02em; } 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; } ::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; } .angled-cut::before, .angled-cut::after, .angled-cut-sm::before, .angled-cut-sm::after, .angled-cut-xs::before, .angled-cut-xs::after, .angled-cut-lg::before, .angled-cut-lg::after, .angled-cut-interactive::before, .angled-cut-interactive::after { content: ''; position: absolute; pointer-events: none; transition: background 0.25s ease, inset 0.25s ease; } .angled-cut::before, .angled-cut-sm::before, .angled-cut-xs::before, .angled-cut-lg::before, .angled-cut-interactive::before { inset: 0; background: var(--ac-border-color); clip-path: polygon( 0 0, calc(100% - var(--ac-cut)) 0, 100% var(--ac-cut), 100% 100%, var(--ac-cut) 100%, 0 calc(100% - var(--ac-cut)) ); z-index: -2; } .angled-cut::after, .angled-cut-sm::after, .angled-cut-xs::after, .angled-cut-lg::after, .angled-cut-interactive::after { top: var(--ac-border); left: var(--ac-border); right: var(--ac-border); bottom: var(--ac-border); background: var(--ac-bg); clip-path: polygon( 0 0, calc(100% - var(--ac-cut) - var(--ac-border) * var(--ac-diagonal-adjust)) 0, 100% calc(var(--ac-cut) + var(--ac-border) * var(--ac-diagonal-adjust)), 100% 100%, calc(var(--ac-cut) + var(--ac-border) * var(--ac-diagonal-adjust)) 100%, 0 calc(100% - var(--ac-cut) - var(--ac-border) * var(--ac-diagonal-adjust)) ); z-index: -1; } .angled-cut-interactive { cursor: pointer; transition: transform 0.15s ease; } .angled-cut-interactive:hover { --ac-border: 2px; --ac-border-color: var(--color-primary); } .angled-cut-interactive:active { transform: translateY(1px); } /* ── buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.4rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px; color: var(--color-text-dim); cursor: pointer; transition: transform var(--t-transform), color var(--t-color); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { --ac-bg: var(--color-primary); --ac-border-color: var(--color-primary); color: var(--color-bg); } .btn-primary:hover { --ac-bg: var(--color-primary-dim); --ac-border-color: var(--color-primary-dim); } .btn-ghost:hover { --ac-border-color: var(--color-primary); color: var(--color-primary); }