62 lines
1.3 KiB
CSS
62 lines
1.3 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--paper: #f4f1e9;
|
|
--paper-bright: #fffdf8;
|
|
--ink: #211f1c;
|
|
--ink-soft: #56514a;
|
|
--ink-faint: #625d56;
|
|
--line: #c9c2b7;
|
|
--line-strong: #8a8379;
|
|
--blue: #2147e7;
|
|
--blue-dark: #1533ac;
|
|
--blue-soft: #8ea5ff;
|
|
--blue-pale: #dce4ff;
|
|
--steel: #d9dcda;
|
|
--cheese: #ffc642;
|
|
--danger: #b33124;
|
|
--success: #17683b;
|
|
--focus: #2147e7;
|
|
--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
|
|
--wrap: 1180px;
|
|
/* 초광폭에서도 히어로와 후속 정보 표면은 같은 폭을 쓰지 않는다. */
|
|
--hero-wide: 2160px;
|
|
--stage-wide: 1680px;
|
|
--workbench-wide: 1480px;
|
|
--copy-wide: 900px;
|
|
--media-wide: 1120px;
|
|
--gutter: clamp(18px, 4vw, 52px);
|
|
--section: clamp(76px, 10vw, 144px);
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 24px;
|
|
--space-6: 32px;
|
|
--space-7: 48px;
|
|
--space-8: 72px;
|
|
--radius-sm: 4px;
|
|
--radius: 10px;
|
|
--radius-lg: 18px;
|
|
--shadow: 0 18px 50px rgb(33 31 28 / 10%);
|
|
--header-height: 78px;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
:root {
|
|
--header-height: 64px;
|
|
--section: 72px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 120rem) {
|
|
:root {
|
|
--wrap: 1320px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 150rem) {
|
|
:root {
|
|
--wrap: 1400px;
|
|
}
|
|
}
|