/* 로고 재질 — 어두운 랜딩 바탕 위에 재질 이름 하나만.
 * 랜딩에 끼워 넣을 때(html[data-embedded] · js/embed.js)는 바탕을 비우고 캔버스만 틀을 채운다 — 페이지 구획의 바탕이 그대로 비친다. */
:root { color-scheme: dark; --bg: #05070C; --h: #F4F6FA; --p: #C4CBD7; --dim: #8D97A8; --line: #1A2130; --gut: clamp(16px, 4vw, 56px); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--p); font: 15px/1.5 "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; user-select: none; }
.stage canvas:active { cursor: grabbing; }
.label { position: absolute; left: var(--gut); top: 24px; margin: 0; z-index: 2; color: var(--h); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; pointer-events: none; }
.next { display: flex; justify-content: space-between; gap: 16px; padding: 28px var(--gut) 40vh; border-top: 1px solid var(--line); font-size: 14px; }
.next a { color: var(--p); padding: 10px 0; }
.next a:hover { color: var(--h); }
html[data-error] .stage::after { content: attr(data-msg); }

html[data-embedded], html[data-embedded] body { height: 100%; overflow: hidden; background: transparent; }
html[data-embedded] main, html[data-embedded] .stage { height: 100%; }
html[data-embedded] .label, html[data-embedded] .next { display: none; }