@font-face {
font-family: 'Paperlogy';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Paperlogy';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'Paperlogy';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
font-weight: 800;
font-display: swap;
}
@font-face {
font-family: 'Paperlogy';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
font-weight: 900;
font-display: swap;
}
:root {
--paper: #ffffff;
--press: #e6e7ea;
--press-2: #dcdee3;
--press-3: #d0d3d9;
--rule: #c5c9d1;
--rule-soft: #dadde2;
--ink: #16181d;
--ink-2: #474d56;
--ink-3: #767d88;
--ink-4: #a2a8b1;
--cyan: #0091b5;
--cyan-dk: #00718d;
--cyan-soft: #d7eef4;
--spot: #e4ff4f;
--danger: #c0392b;
--shadow-paper: 0 1px 2px rgb(22 24 29 / 0.06), 0 12px 28px -12px rgb(22 24 29 / 0.22);
--shadow-lift: 0 2px 4px rgb(22 24 29 / 0.06), 0 24px 48px -20px rgb(22 24 29 / 0.3);
--font-display: 'Paperlogy', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
--font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
--gutter: clamp(1.25rem, 4vw, 3rem);
--measure: 62ch;
--radius: 4px;
--dur: 220ms;
--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
--scissors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cline x1='20' y1='4' x2='8.12' y2='15.88'/%3E%3Cline x1='14.47' y1='14.48' x2='20' y2='20'/%3E%3Cline x1='8.12' y1='8.12' x2='12' y2='12'/%3E%3C/svg%3E");
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--press);
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.7;
word-break: keep-all;
overflow-wrap: break-word;
font-feature-settings: 'ss01';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg {
display: block;
max-width: 100%;
}
[hidden] {
display: none !important;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
a {
color: var(--cyan-dk);
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
}
a:hover {
color: var(--ink);
}
:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 3px;
border-radius: 2px;
}
.t-display {
font-family: var(--font-display);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.035em;
margin: 0;
text-wrap: balance;
}
.t-h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.75rem, 3.4vw, 2.75rem);
line-height: 1.16;
letter-spacing: -0.03em;
margin: 0;
text-wrap: balance;
}
.t-h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.125rem, 1.7vw, 1.375rem);
line-height: 1.35;
letter-spacing: -0.02em;
margin: 0;
}
.t-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0;
}
.t-lead {
font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
line-height: 1.65;
color: var(--ink-2);
margin: 0;
max-width: var(--measure);
}
.t-body {
margin: 0;
color: var(--ink-2);
max-width: var(--measure);
}
.t-mono {
font-family: var(--font-mono);
font-variant-ligatures: none;
}
.wrap {
width: min(100% - var(--gutter) * 2, 1180px);
margin-inline: auto;
}
.wrap--narrow {
width: min(100% - var(--gutter) * 2, 820px);
margin-inline: auto;
}
.section {
padding-block: clamp(3.5rem, 8vw, 7rem);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: absolute;
left: 50%;
top: 0;
translate: -50% -120%;
z-index: 100;
background: var(--ink);
color: var(--paper);
padding: 0.6rem 1.2rem;
border-radius: 0 0 var(--radius) var(--radius);
text-decoration: none;
}
.skip-link:focus-visible {
translate: -50% 0;
color: var(--paper);
}
.cutline {
position: relative;
height: 1px;
background: repeating-linear-gradient(
to right,
var(--rule) 0 6px,
transparent 6px 12px
);
}
.cutline::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 34px;
height: 22px;
background: var(--press);
}
.cutline::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 15px;
height: 15px;
background: var(--ink-4);
-webkit-mask: var(--scissors) center / contain no-repeat;
mask: var(--scissors) center / contain no-repeat;
}
.trim {
position: relative;
}
.trim::before,
.trim::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 1px solid var(--rule);
pointer-events: none;
}
.trim::before {
top: -1px;
left: -1px;
border-right: 0;
border-bottom: 0;
}
.trim::after {
bottom: -1px;
right: -1px;
border-left: 0;
border-top: 0;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.85rem 1.5rem;
border: 1px solid transparent;
border-radius: var(--radius);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: -0.01em;
text-decoration: none;
cursor: pointer;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
border-color var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.btn--primary {
background: var(--ink);
color: var(--paper);
}
.btn--primary:hover {
background: #000;
color: var(--paper);
translate: 0 -1px;
}
.btn--ghost {
background: transparent;
border-color: var(--rule);
color: var(--ink);
}
.btn--ghost:hover {
border-color: var(--ink);
color: var(--ink);
background: rgb(255 255 255 / 0.6);
}
.btn--quiet {
background: transparent;
color: var(--ink-2);
padding-inline: 0.75rem;
}
.btn--quiet:hover {
color: var(--ink);
background: rgb(255 255 255 / 0.7);
}
.btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
translate: none;
}
.btn__arrow {
width: 1em;
height: 1em;
flex: none;
transition: translate var(--dur) var(--ease);
}
.btn:hover .btn__arrow {
translate: 3px 0;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.inapp-warn {
margin: 0 0 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--danger);
border-radius: var(--radius);
background: #faefee;
}
.inapp-warn p {
margin: 0;
font-family: var(--font-body);
font-size: 0.85rem;
line-height: 1.6;
color: var(--ink-2);
}