:root {
--font-family-primary: "Pretendard Variable", "Pretendard", Inter, -apple-system, system-ui, "Malgun Gothic", sans-serif;
--font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 15px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 48px; --font-size-hero: clamp(32px, 4.5vw, 56px);
--font-weight-base: 400; --font-line-height-base: 22.75px;
--space-1: 1px; --space-2: 4px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px;
--radius-xs: 12px; --radius-sm: 16px; --radius-md: 20px; --radius-lg: 24px; --radius-xl: 32px; --radius-2xl: 36px; --radius-step7: 40px; --radius-step8: 48px;
--shadow-1: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0;
--shadow-2: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.05) 0 5px 10px 0, rgba(0, 0, 0, 0.12) 0 15px 25px 0;
--shadow-3: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.12) 0 15px 25px 0, rgba(0, 0, 0, 0.05) 0 5px 10px 0;
--motion-duration-instant: 150ms; --motion-duration-fast: 300ms;
--color-text-primary: #1c2024; --color-text-secondary: #60646c; --color-text-tertiary: #1c2024; --color-text-inverse: #0d74ce; --color-surface-base: #ffffff; --color-surface-muted: #ffffff; --color-surface-raised: #f9f9fb; --color-surface-strong: #f0f0f3;
--color-border: color-mix(in srgb, var(--color-text-primary) 10%, transparent); --color-header: color-mix(in srgb, var(--color-surface-base) 80%, transparent); --container: min(1120px, calc(100% - 40px));
}
@media (prefers-color-scheme: dark) { :root { --shadow-2: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(255, 255, 255, 0.05) 0 5px 10px 0, rgba(255, 255, 255, 0.12) 0 15px 25px 0; --shadow-3: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.5) 0 15px 25px 0, rgba(0, 0, 0, 0.25) 0 5px 10px 0; --color-text-primary: #edeef0; --color-text-secondary: #b0b4ba; --color-text-tertiary: #ffffff; --color-text-inverse: #70b8ff; --color-surface-base: #000000; --color-surface-muted: #111113; --color-surface-raised: #111113; --color-surface-strong: #18191b; } }
html[data-theme="light"] { --shadow-2: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.05) 0 5px 10px 0, rgba(0, 0, 0, 0.12) 0 15px 25px 0; --shadow-3: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.12) 0 15px 25px 0, rgba(0, 0, 0, 0.05) 0 5px 10px 0; --color-text-primary: #1c2024; --color-text-secondary: #60646c; --color-text-tertiary: #1c2024; --color-text-inverse: #0d74ce; --color-surface-base: #ffffff; --color-surface-muted: #ffffff; --color-surface-raised: #f9f9fb; --color-surface-strong: #f0f0f3; }
html[data-theme="dark"] { --shadow-2: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(255, 255, 255, 0.05) 0 5px 10px 0, rgba(255, 255, 255, 0.12) 0 15px 25px 0; --shadow-3: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.5) 0 15px 25px 0, rgba(0, 0, 0, 0.25) 0 5px 10px 0; --color-text-primary: #edeef0; --color-text-secondary: #b0b4ba; --color-text-tertiary: #ffffff; --color-text-inverse: #70b8ff; --color-surface-base: #000000; --color-surface-muted: #111113; --color-surface-raised: #111113; --color-surface-strong: #18191b; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-surface-base); color: var(--color-text-primary); font-family: var(--font-family-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-base); line-height: var(--font-line-height-base); text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: var(--space-2); }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: var(--space-1) solid var(--color-border); background: var(--color-header); backdrop-filter: blur(20px); } .nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-8); width: var(--container); min-height: 68px; margin: 0 auto; } .logo { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; } .logo-mark { display: block; width: 28px; height: 28px; color: currentColor; flex: 0 0 auto; } .footer .logo-mark { width: 32px; height: 32px; } .nav-links { display: flex; align-items: center; gap: var(--space-7); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 650; } .nav-links a:hover { color: var(--color-text-primary); } .nav-actions { display: flex; align-items: center; gap: var(--space-4); }
.theme-toggle, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: var(--space-1) solid var(--color-border); border-radius: var(--radius-step7); font: inherit; font-size: var(--font-size-sm); font-weight: 750; cursor: pointer; transition: transform var(--motion-duration-instant), border-color var(--motion-duration-instant), background var(--motion-duration-instant); } .theme-toggle { width: 40px; background: var(--color-surface-raised); color: var(--color-text-primary); } .button { min-width: 136px; padding: 0 var(--space-7); background: var(--color-surface-base); color: var(--color-text-primary); } .button.primary { border-color: var(--color-text-primary); background: var(--color-text-primary); color: var(--color-surface-base); } .button:hover, .theme-toggle:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--color-text-inverse) 48%, var(--color-border)); }
main { overflow: hidden; } .section { width: var(--container); margin: 0 auto; padding: 140px 0; } .hero { display: grid; min-height: 720px; place-items: center; padding-top: 74px; padding-bottom: 70px; text-align: center; } .hero-inner { display: grid; justify-items: center; gap: var(--space-8); } .eyebrow, .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 var(--space-6); border: var(--space-1) solid var(--color-border); border-radius: var(--radius-step7); background: var(--color-surface-base); color: var(--color-text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } h1, h2, h3, p { margin: 0; word-break: keep-all; overflow-wrap: break-word; }
h1, h2 { text-wrap: balance; } h1 { max-width: 980px; font-size: var(--font-size-hero); font-weight: 760; line-height: 1.05; letter-spacing: -0.03em; } .accent { color: var(--color-text-inverse); } .hero-copy { display: grid; gap: var(--space-2); max-width: 720px; color: var(--color-text-secondary); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.section-heading { display: grid; justify-items: center; gap: var(--space-5); margin-bottom: 48px; text-align: center; } .section-heading h2 { max-width: 820px; font-size: clamp(24px, 3vw, 40px); font-weight: 760; line-height: 1.06; letter-spacing: -0.03em; } .section-heading p { max-width: 660px; color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: 1.6; }
.bento { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: var(--space-6); } .card { display: grid; align-content: space-between; gap: var(--space-7); min-height: 264px; padding: var(--space-8); border: var(--space-1) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-1); transition: background var(--motion-duration-fast), transform var(--motion-duration-fast), border-color var(--motion-duration-fast); } .card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-text-inverse) 34%, var(--color-border)); background: color-mix(in srgb, var(--color-text-inverse) 4%, var(--color-surface-raised)); } .card.tall { grid-row: span 2; min-height: 552px; } .visual { position: relative; min-height: 154px; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--color-text-inverse) 38%, transparent), transparent 32%), linear-gradient(180deg, var(--color-surface-muted), var(--color-surface-strong)); } .tall .visual { min-height: 340px; } .visual::before, .visual::after { position: absolute; content: ""; border: var(--space-1) solid color-mix(in srgb, var(--color-text-inverse) 24%, var(--color-border)); background: color-mix(in srgb, var(--color-surface-base) 78%, transparent); } .visual::before { inset: 16% auto auto 14%; width: 56%; height: 36%; border-radius: var(--radius-md); box-shadow: var(--shadow-2); } .visual::after { right: 14%; bottom: 16%; width: 32%; height: 34%; border-radius: var(--radius-step7); } .card h3 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 760; line-height: 1.16; letter-spacing: -0.02em; } .card p, .feature-copy p, .about-copy p { color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: 1.65; }
.process { display: grid; gap: 44px; justify-items: center; text-align: center; } .tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); padding: var(--space-3); border: var(--space-1) solid var(--color-border); border-radius: var(--radius-step8); background: var(--color-surface-raised); } .tab { min-width: 104px; padding: var(--space-4) var(--space-7); border-radius: var(--radius-step7); background: var(--color-surface-base); color: var(--color-text-secondary); font-weight: 760; } .tab.is-active { background: var(--color-text-primary); color: var(--color-surface-base); } .demo-panel { position: relative; width: 100%; min-height: 500px; overflow: hidden; border: var(--space-1) solid var(--color-border); border-radius: var(--radius-2xl); background: radial-gradient(circle at 22% 24%, color-mix(in srgb, var(--color-text-inverse) 36%, transparent), transparent 24%), radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--color-text-inverse) 24%, transparent), transparent 28%), linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-strong)); box-shadow: var(--shadow-2); } .demo-window, .demo-phone, .demo-chip { position: absolute; border: var(--space-1) solid var(--color-border); background: color-mix(in srgb, var(--color-surface-base) 84%, transparent); box-shadow: var(--shadow-2); } .demo-window { left: 9%; top: 18%; width: min(560px, 58%); height: 240px; border-radius: var(--radius-lg); } .demo-window::before { display: block; height: 48px; border-bottom: var(--space-1) solid var(--color-border); content: ""; background: linear-gradient(90deg, var(--color-text-inverse) 0 18%, transparent 18% 100%); opacity: 0.55; } .demo-phone { right: 10%; top: 14%; width: 170px; height: 320px; border-radius: var(--radius-xl); } .demo-chip { left: 17%; bottom: 16%; width: 320px; max-width: 58%; height: 88px; border-radius: var(--radius-lg); } .process-note { color: var(--color-text-secondary); font-size: var(--font-size-md); }
.feature-row { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 72px; padding: 82px 0; } .feature-row.reverse { grid-template-columns: 1.1fr 0.9fr; } .feature-row.reverse .feature-copy { order: 2; } .feature-copy { display: grid; gap: var(--space-6); } .feature-copy h2 { font-size: clamp(24px, 3vw, 40px); font-weight: 760; line-height: 1.07; letter-spacing: -0.03em; } .feature-card { min-height: 390px; border: var(--space-1) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-1); padding: var(--space-8); } .feature-screen { height: 100%; min-height: 326px; border-radius: var(--radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--color-text-inverse) 12%, transparent), transparent), repeating-linear-gradient(0deg, var(--color-surface-strong) 0 42px, color-mix(in srgb, var(--color-text-primary) 4%, var(--color-surface-strong)) 42px 43px); border: var(--space-1) solid var(--color-border); } .product-list { display: grid; gap: var(--space-4); margin-top: var(--space-6); } .product-list span { display: flex; align-items: center; min-height: 52px; padding: 0 var(--space-6); border: var(--space-1) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-base); font-weight: 750; }
.about { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; padding: 72px; border: var(--space-1) solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface-raised); } .about-copy { display: grid; gap: var(--space-6); max-width: 720px; } .about-copy h2 { font-size: clamp(24px, 3vw, 40px); font-weight: 760; line-height: 1.08; letter-spacing: -0.03em; } .inline-link { color: var(--color-text-inverse); font-weight: 800; }
.cta-wrap { width: 100%; padding: 0 20px 140px; } .cta-band { display: grid; justify-items: center; gap: var(--space-8); width: min(1280px, 100%); margin: 0 auto; padding: 120px 32px; border-radius: var(--radius-2xl); background: radial-gradient(circle at 50% 20%, rgba(112, 184, 255, 0.26), transparent 34%), linear-gradient(180deg, #18191b, #000000); color: #ffffff; text-align: center; } .cta-band h2 { max-width: 780px; font-size: clamp(28px, 4vw, 48px); font-weight: 760; line-height: 1.05; letter-spacing: -0.03em; } .cta-band .button { border-color: #ffffff; background: #ffffff; color: #000000; }
.footer { background: #000000; color: #edeef0; border-top: var(--space-1) solid rgba(255, 255, 255, 0.12); } .footer-inner { width: var(--container); margin: 0 auto; padding: 72px 0; } .footer-grid { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: var(--space-8); } .footer p, .footer a { color: #b0b4ba; font-size: var(--font-size-sm); } .footer h3 { margin: 0 0 var(--space-5); font-size: var(--font-size-sm); color: #ffffff; } .footer-col { display: grid; align-content: start; gap: var(--space-4); } .copyright { margin-top: 56px; color: #b0b4ba; font-size: var(--font-size-xs); }
@media (max-width: 900px) { .nav { grid-template-columns: auto 1fr auto; gap: var(--space-4); } .nav-links { justify-self: end; gap: var(--space-4); font-size: var(--font-size-xs); } .nav-actions { justify-self: end; } .section { padding: 104px 0; } .hero { min-height: 660px; } .bento, .feature-row, .feature-row.reverse, .about, .footer-grid { grid-template-columns: 1fr; } .feature-row.reverse .feature-copy { order: 0; } .card.tall { min-height: 420px; } .tall .visual { min-height: 220px; } .demo-window { width: 72%; left: 8%; } .demo-phone { right: 7%; width: 130px; height: 250px; } .about { padding: var(--space-8); } }
@media (max-width: 560px) { .nav-actions .button { display: none; } :root { --container: min(100% - 28px, 1120px); } .button { width: 100%; } .hero-actions { width: 100%; } .demo-panel { min-height: 420px; } .demo-phone { display: none; } .demo-window, .demo-chip { max-width: none; width: 84%; left: 8%; } .cta-wrap { padding-inline: 14px; } .cta-band { padding: 84px 22px; } }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: var(--space-1) solid var(--color-border); background: var(--color-header); backdrop-filter: blur(20px); } .nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-8); width: var(--container); min-height: 68px; margin: 0 auto; } .logo { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; } .logo-mark { display: block; width: 28px; height: 28px; color: currentColor; flex: 0 0 auto; } .footer .logo-mark { width: 32px; height: 32px; } .nav-links { display: flex; align-items: center; gap: var(--space-7); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 650; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-text-primary); } .nav-actions { display: flex; align-items: center; gap: var(--space-4); }
main { overflow: hidden; } .section { width: var(--container); margin: 0 auto; padding: 140px 0; } .page-hero { display: grid; align-content: center; gap: var(--space-8); min-height: 560px; padding-top: 90px; } .breadcrumb { color: var(--color-text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } h1, h2, h3, p { margin: 0; word-break: keep-all; overflow-wrap: break-word; }
h1, h2 { text-wrap: balance; } h1 { max-width: 920px; font-size: var(--font-size-hero); font-weight: 760; line-height: 1.05; letter-spacing: -0.03em; } .page-hero p { max-width: 660px; color: var(--color-text-secondary); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; }
.service-section { display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: center; gap: 72px; padding: 120px 0; border-top: var(--space-1) solid var(--color-border); } .service-section:nth-child(even) .service-copy { order: 2; } .service-copy { display: grid; gap: var(--space-6); } .service-kicker { color: var(--color-text-inverse); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .service-copy h2 { font-size: clamp(24px, 3vw, 40px); font-weight: 760; line-height: 1.07; letter-spacing: -0.03em; } .service-copy p { color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: 1.65; } .service-card { min-height: 420px; padding: var(--space-8); border: var(--space-1) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-1); transition: background var(--motion-duration-fast), transform var(--motion-duration-fast), border-color var(--motion-duration-fast); } .service-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-text-inverse) 34%, var(--color-border)); background: color-mix(in srgb, var(--color-text-inverse) 4%, var(--color-surface-raised)); } .service-visual { position: relative; height: 100%; min-height: 356px; overflow: hidden; border-radius: var(--radius-lg); border: var(--space-1) solid var(--color-border); background: radial-gradient(circle at 45% 18%, color-mix(in srgb, var(--color-text-inverse) 34%, transparent), transparent 30%), linear-gradient(180deg, var(--color-surface-muted), var(--color-surface-strong)); } .service-visual::before, .service-visual::after { position: absolute; content: ""; border: var(--space-1) solid color-mix(in srgb, var(--color-text-inverse) 24%, var(--color-border)); background: color-mix(in srgb, var(--color-surface-base) 80%, transparent); box-shadow: var(--shadow-2); } .service-visual::before { left: 12%; top: 16%; width: 68%; height: 34%; border-radius: var(--radius-lg); } .service-visual::after { right: 12%; bottom: 14%; width: 42%; height: 34%; border-radius: var(--radius-xl); }
@media (max-width: 900px) { .nav { grid-template-columns: auto 1fr auto; gap: var(--space-4); } .nav-links { justify-self: end; gap: var(--space-4); font-size: var(--font-size-xs); } .nav-actions { justify-self: end; } .section { padding: 104px 0; } .page-hero { min-height: 500px; } .service-section, .footer-grid { grid-template-columns: 1fr; } .service-section:nth-child(even) .service-copy { order: 0; } }
@media (max-width: 560px) { .nav-actions .button { display: none; } :root { --container: min(100% - 28px, 1120px); } .button { width: 100%; } .service-card { min-height: 340px; } .service-visual { min-height: 280px; } .cta-wrap { padding-inline: 14px; } .cta-band { padding: 84px 22px; } }