/* 빌런창고 — 토큰. 글꼴(Pretendard, 필요한 글자 조각만 받는 dynamic subset)은 template.html 의 로 받는다 */
:root {
color-scheme: light dark;
--ink: #33305A;
--ink-2: #66627F;
--bg: #FFFFFF;
--mist: #F4F1FB;
--lav: #C9B8F5;
--sky: #A9CDFF;
--lemon: #FFE28A;
--mint: #B9E6C9;
--peach: #FFC9B5;
--tint-mix: 100%;
--shadow: 0 24px 60px rgb(51 48 90 / .12);
--display: 'Pretendard Variable', Pretendard, 'Malgun Gothic', sans-serif;
--body: 'Pretendard Variable', Pretendard, 'Malgun Gothic', sans-serif;
--gutter: max(clamp(20px, 5vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
--kind-store: #EDE7FB; /* 묶음 색: 스토어 앱 = 라벤더 */
--kind-toss: #DDEBFF; /* 토스 미니앱 = 스카이 */
--kind-play: #DFF3E6; /* 묶음 머리의 Google Play 그림 = 민트 */
--max: 1120px;
}
@media (prefers-color-scheme: dark) {
:root {
--ink: #F4F1FB;
--ink-2: #DAD6EC;
--bg: #1B1930;
--mist: #26233D;
--tint-fallback: #26233D; /* color-mix 미지원 브라우저: 다크에선 틴트 원색 위 흰 글자가 안 보이므로 미스트로 */
--tint-mix: 34%;
--shadow: 0 24px 60px rgb(0 0 0 / .35);
--kind-store: #3A3560;
--kind-toss: #2C3F63;
--kind-play: #2A4A3D;
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(78px + env(safe-area-inset-top)); }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--body);
font-size: 1.0625rem;
line-height: 1.65;
font-feature-settings: 'ss05';
word-break: keep-all;
overflow-wrap: break-word;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* 작은 선 그림(템플릿의 ) 공통 */
.platform-icon svg, .chapter-kind svg, .store svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; margin: 0; }
/* 내비는 하나(