@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root { --bg:#f6f0df; --paper:#fffdf7; --ink:#1e2b3d; --muted:#68717b; --line:#d8d0bd; --blue:#2857c5; --blue-soft:#e6edff; --coral:#ef6e5c; --dark:#243047; --serif:Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background-color:var(--bg); background-image:linear-gradient(rgba(94,112,137,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(94,112,137,.11) 1px,transparent 1px); background-size:24px 24px; font-family:'Manrope','Noto Sans KR',sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.container { width:min(1160px, calc(100% - 48px)); margin:0 auto; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:20; padding:10px 14px; color:#fff; background:var(--blue); }
.skip-link:focus { top:16px; }
.site-header { position:sticky; top:0; z-index:10; border-bottom:1px dashed rgba(115,107,86,.55); background:rgba(255,253,247,.84); backdrop-filter:blur(16px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:76px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { display:grid; width:31px; height:31px; place-items:center; color:#fff; border-radius:3px 8px 3px 8px; background:var(--blue); box-shadow:3px 3px 0 #f6c957; font-size:11px; letter-spacing:-.08em; }
.brand-dot { color:var(--coral); }
.site-nav { display:flex; gap:32px; color:var(--muted); font-family:'DM Mono',monospace; font-size:12px; }
.site-nav a:hover,.text-link:hover { color:var(--blue); }
.menu-toggle { display:none; border:0; background:transparent; font-family:'DM Mono',monospace; font-size:12px; }
.section-shell { padding:128px 0; }
.hero { min-height:650px; display:grid; align-items:center; padding-top:100px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:70px; align-items:end; }
.eyebrow,.section-kicker,.visual-label { color:var(--blue); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.12em; }
.eyebrow { margin:0 0 28px; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:760px; margin-bottom:28px; font-size:clamp(48px,7vw,88px); line-height:1.08; letter-spacing:-.075em; }
h1 em,h2 em { color:var(--coral); font-family:var(--serif); font-weight:400; letter-spacing:-.06em; }
.hero-summary { max-width:590px; margin-bottom:36px; color:var(--muted); font-size:17px; letter-spacing:-.03em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; gap:22px; min-height:48px; padding:0 19px; border:1px solid var(--line); border-radius:2px 8px 2px 8px; font-size:13px; font-weight:700; transition:transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform:translate(-2px,-2px) rotate(-.4deg); box-shadow:5px 5px 0 rgba(40,87,197,.18); }
.button-primary { color:#fff; border-color:var(--blue); background:var(--blue); box-shadow:3px 3px 0 #f3c850; }
.button-quiet { background:rgba(255,253,247,.58); }
.hero-note { padding:22px 24px 22px 28px; border:1px solid var(--line); border-radius:3px 14px 3px 14px; background:rgba(255,253,247,.78); box-shadow:6px 6px 0 rgba(237,110,92,.14); color:var(--muted); transform:rotate(1deg); }
.hero-note-line { width:35px; height:2px; margin-bottom:25px; background:var(--coral); }
.hero-note p { font-size:22px; line-height:1.55; letter-spacing:-.06em; }
.hero-note strong { color:var(--ink); }
.hero-note span { font-family:'DM Mono',monospace; font-size:10px; }
.proof-strip { border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); background:rgba(255,253,247,.64); }
.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.proof-grid div { display:flex; min-height:118px; flex-direction:column; justify-content:center; gap:2px; padding:20px 28px; border-right:1px solid var(--line); }
.proof-grid div:first-child { padding-left:0; }.proof-grid div:last-child { border-right:0; }
.proof-grid strong { font-size:24px; letter-spacing:-.06em; }.proof-grid span { color:var(--muted); font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.section-kicker { margin-bottom:22px; }.section-shell h2 { margin-bottom:24px; font-size:clamp(34px,4.2vw,56px); line-height:1.15; letter-spacing:-.075em; }
.lead { margin-bottom:40px; font-size:20px; line-height:1.6; letter-spacing:-.05em; }
.capability-list { display:grid; gap:26px; }.capability-list article { display:grid; grid-template-columns:34px 1fr; gap:16px; padding-top:22px; border-top:1px solid var(--line); }.capability-list span { color:var(--blue); font-family:'DM Mono',monospace; font-size:11px; }.capability-list h3 { margin-bottom:5px; font-size:16px; letter-spacing:-.04em; }.capability-list p { margin:0; color:var(--muted); font-size:14px; letter-spacing:-.03em; }
.section-muted { background:rgba(255,253,247,.7); }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:50px; }.section-heading > p { margin:0 0 8px; color:var(--muted); font-size:14px; text-align:right; }.section-heading h2 { margin-bottom:0; }
.project-filters { display:flex; gap:8px; margin-bottom:25px; }.filter-button { padding:7px 13px; border:1px dashed var(--line); border-radius:3px; background:rgba(255,253,247,.5); color:var(--muted); cursor:pointer; font-family:'DM Mono',monospace; font-size:11px; }.filter-button.is-active,.filter-button:hover { color:#fff; border-color:var(--blue); background:var(--blue); }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }.project-card { overflow:hidden; border:1px solid var(--line); border-radius:3px 13px 3px 13px; background:var(--paper); box-shadow:5px 5px 0 rgba(94,112,137,.11); transition:transform .2s ease,box-shadow .2s ease; }.project-card:nth-child(even) { transform:rotate(.35deg); }.project-card:hover { transform:translate(-3px,-4px) rotate(-.35deg); box-shadow:10px 11px 0 rgba(40,87,197,.15); }.project-card.is-hidden { display:none; }.project-visual { position:relative; height:245px; overflow:hidden; display:flex; align-items:center; justify-content:center; border-bottom:1px dashed rgba(255,255,255,.55); }.visual-label { position:absolute; top:20px; left:22px; color:rgba(255,255,255,.8); font-size:9px; }.visual-samsung { background:linear-gradient(135deg,#30456c,#5277db); }.visual-assessment { background:#c8d7fa; }.visual-assessment .visual-label { color:#35558c; }.visual-cgv { background:linear-gradient(135deg,#f27d6b,#c94d59); }.visual-goodduck { overflow:hidden; color:#fff; background:linear-gradient(145deg,#8466bf,#435b95); }.phone-shape { width:110px; height:180px; padding:75px 0 0 18px; border:2px solid rgba(255,255,255,.8); border-radius:18px 18px 25px 18px; transform:rotate(9deg); color:#fff; font-family:'DM Mono',monospace; font-size:9px; }.phone-shape b { font-size:19px; }.dashboard-lines { display:grid; width:60%; gap:12px; transform:rotate(-5deg); }.dashboard-lines i { display:block; height:18px; border-radius:1px; background:#fffdf7; box-shadow:36px 0 0 #7996d6; }.dashboard-lines i:nth-child(2) { width:80%; background:#8da7de; box-shadow:20px 0 0 #fffdf7; }.ticket-shape { width:180px; padding:24px; border:1px solid rgba(255,255,255,.8); border-radius:3px 12px 3px 12px; color:#fff; font-family:'DM Mono',monospace; font-size:22px; line-height:1.25; transform:rotate(-6deg); }.ticket-shape b { font-size:34px; }.visual-goodduck > b { position:relative; z-index:1; font-size:30px; line-height:.85; letter-spacing:-.11em; }.orbit { position:absolute; width:300px; height:100px; border:1px dashed rgba(255,255,255,.55); border-radius:50%; transform:rotate(35deg); }.orbit-two { transform:rotate(-28deg); border-color:rgba(255,233,178,.5); }
.project-content { padding:25px 26px 28px; }.project-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-family:'DM Mono',monospace; font-size:10px; }.project-content h3 { margin:15px 0 8px; font-size:22px; letter-spacing:-.06em; }.project-content p { min-height:71px; margin-bottom:18px; color:var(--muted); font-size:14px; letter-spacing:-.04em; }.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }.tag-row span { padding:4px 8px; border-radius:3px; color:#4d5d7d; background:var(--blue-soft); font-family:'DM Mono',monospace; font-size:9px; }.text-link { color:var(--blue); font-family:'DM Mono',monospace; font-size:11px; }
.section-description { max-width:340px; color:var(--muted); font-size:14px; }.timeline { display:grid; gap:0; }.timeline article { display:grid; grid-template-columns:120px 1fr; gap:24px; padding:0 0 32px; margin-bottom:32px; border-bottom:1px solid var(--line); }.timeline article:last-child { margin-bottom:0; }.timeline-year { color:var(--blue); font-family:'DM Mono',monospace; font-size:11px; }.timeline h3 { margin-bottom:6px; font-size:17px; letter-spacing:-.04em; }.timeline p { margin-bottom:8px; color:var(--muted); font-size:14px; }.timeline div span { color:var(--muted); font-family:'DM Mono',monospace; font-size:10px; }
.dev-stack { overflow:hidden; background:#fffdf7; }.stack-heading { display:flex; align-items:end; justify-content:space-between; gap:48px; padding-bottom:44px; border-bottom:1px dashed #bfc8d8; }.stack-heading h2 { margin-bottom:0; }.stack-heading h2 em { color:#fb5a61; }.stack-heading-note { display:flex; align-items:flex-start; max-width:315px; gap:13px; padding:15px 17px; border:1px solid #dde3ed; border-radius:4px 12px 4px 12px; background:#f3f6fc; transform:rotate(-1deg); }.stack-heading-note p { margin:0; color:#63708a; font-size:12px; line-height:1.7; letter-spacing:-.03em; }.pixel-cursor { display:block; width:13px; height:13px; flex:0 0 auto; margin-top:4px; background:#2d5df5; box-shadow:4px 4px 0 #f4c64c; }.stack-legend { display:flex; justify-content:space-between; margin:22px 3px 55px; color:#9ba6b9; font-family:'DM Mono',monospace; font-size:9px; }.stack-group { margin-bottom:58px; }.stack-group-heading { display:flex; align-items:baseline; gap:11px; margin-bottom:17px; }.group-pixel { display:inline-block; width:15px; height:15px; box-shadow:4px 4px 0 rgba(23,32,46,.12); }.pixel-blue { background:#2d5df5; }.pixel-coral { background:#fb6d68; }.pixel-lime { background:#9bcf57; }.stack-group-heading h3 { margin:0; font-family:'DM Mono',monospace; font-size:14px; letter-spacing:.08em; }.stack-group-heading p { margin:0; color:#8b96a9; font-size:12px; }.stack-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:15px; }.stack-grid-system { grid-template-columns:repeat(4,1fr); }.stack-card { position:relative; min-height:204px; padding:19px 20px 17px; overflow:hidden; border:1px solid var(--stack-border,#dbe2ef); border-radius:5px 13px 5px 13px; background:var(--stack-bg,#f9fbff); box-shadow:4px 4px 0 var(--stack-shadow,#e7edf7); transition:transform .2s ease,box-shadow .2s ease; }.stack-card:hover { transform:translate(-2px,-3px) rotate(-.3deg); box-shadow:8px 9px 0 var(--stack-shadow,#e7edf7); }.stack-card::after { position:absolute; right:-17px; bottom:-18px; width:72px; height:72px; border:1px dashed var(--stack-border,#dbe2ef); border-radius:50%; content:''; }.stack-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }.stack-icon { display:grid; width:34px; height:34px; place-items:center; color:#152035; background:var(--icon-bg,#b7cdfd); box-shadow:3px 3px 0 rgba(23,32,46,.16); font-family:'DM Mono',monospace; font-size:11px; font-weight:500; }.stack-state { color:#6e7b91; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.08em; }.stack-card h4 { position:relative; z-index:1; margin:17px 0 2px; font-size:23px; letter-spacing:-.06em; line-height:1.15; }.stack-card p { position:relative; z-index:1; min-height:20px; margin:0; color:#657187; font-size:12px; letter-spacing:-.03em; }.stack-timeline { position:relative; height:13px; margin-top:27px; border-radius:0; background:repeating-linear-gradient(90deg,#d8e0ee 0 8px,transparent 8px 12px); }.timeline-fill { position:absolute; top:2px; bottom:2px; left:var(--start,0); width:var(--width,50%); background:linear-gradient(90deg,var(--fill,#2d5df5),#fff 78%); box-shadow:0 0 0 1px rgba(23,32,46,.1); }.timeline-pin { position:absolute; top:-4px; bottom:-4px; width:1px; background:#222f45; }.stack-card-bottom { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; gap:7px; margin-top:5px; color:#5e6b81; font-family:'DM Mono',monospace; font-size:9px; }.stack-card-bottom b { color:#28354b; font-size:9px; }.tone-blue { --stack-bg:#eef4ff; --stack-border:#b6caf7; --stack-shadow:#d7e5ff; --icon-bg:#6e9af9; --fill:#2d5df5; }.tone-mint { --stack-bg:#effbf7; --stack-border:#bce6d8; --stack-shadow:#d6f2e9; --icon-bg:#68d0bb; --fill:#18aa91; }.tone-violet { --stack-bg:#f7f1ff; --stack-border:#d8c3f3; --stack-shadow:#eadcff; --icon-bg:#ad80e6; --fill:#7e55c9; }.tone-coral { --stack-bg:#fff2ec; --stack-border:#f3c7b8; --stack-shadow:#ffe0d4; --icon-bg:#ff9670; --fill:#f3654e; }.tone-yellow { --stack-bg:#fffae7; --stack-border:#f0dc91; --stack-shadow:#fff0b7; --icon-bg:#ffd85c; --fill:#edb90f; }.tone-pink { --stack-bg:#fff0f5; --stack-border:#f2bfd2; --stack-shadow:#ffdbe7; --icon-bg:#fa82ac; --fill:#e64882; }.tone-lime { --stack-bg:#f5fbe9; --stack-border:#d2e8a8; --stack-shadow:#e7f3cb; --icon-bg:#acd668; --fill:#76a934; }.tone-sky { --stack-bg:#edf9ff; --stack-border:#b9dfef; --stack-shadow:#d5eff9; --icon-bg:#74c7e4; --fill:#2495c2; }.tone-orange { --stack-bg:#fff4e9; --stack-border:#f0d2af; --stack-shadow:#ffe5c8; --icon-bg:#f5b55f; --fill:#da8221; }.tone-sand { --stack-bg:#f8f3ea; --stack-border:#ded0b8; --stack-shadow:#ece0cc; --icon-bg:#dcb87b; --fill:#ae8545; }.fill-2019-now { --start:47%; --width:53%; }.fill-2020-now { --start:53%; --width:47%; }.fill-2021-now { --start:60%; --width:40%; }.fill-2026-now { --start:93%; --width:7%; }.fill-2014-2020 { --start:13%; --width:40%; }.fill-2015-2019 { --start:20%; --width:27%; }.fill-2012-2014 { --start:0%; --width:13%; }.pin-2012 { left:0%; }.pin-2014 { left:13%; }.pin-2015 { left:20%; }.pin-2019 { left:47%; }.pin-2020 { left:53%; }.pin-2021 { left:60%; }.pin-2026 { left:93%; }.stack-footnote { display:flex; gap:9px; max-width:730px; margin-top:-12px; color:#8894a7; font-size:11px; }.stack-footnote p { margin:0; }.footnote-mark { color:#fb5a61; font-family:var(--serif); font-size:19px; line-height:1; }
.section-dark { color:var(--ink); background:rgba(255,253,247,.68); }.dark-heading p { color:var(--muted); }.dark-heading .section-kicker { color:var(--coral); }.work-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:24px; align-items:stretch; }.work-flow article { padding:20px 15px 18px; border:1px dashed var(--line); border-radius:3px 10px 3px 10px; background:rgba(255,253,247,.76); }.work-flow article:nth-of-type(even) { transform:rotate(.7deg); }.work-flow article b { color:var(--blue); font-family:'DM Mono',monospace; font-size:11px; }.work-flow h3 { margin:25px 0 8px; font-size:18px; }.work-flow p { margin:0; color:var(--muted); font-size:13px; letter-spacing:-.03em; }.work-flow > span { padding-top:18px; color:var(--coral); font-size:22px; }
.contact { text-align:center; background:rgba(255,253,247,.86); }.contact-inner { display:flex; align-items:center; flex-direction:column; }.contact h2 { margin-bottom:18px; }.contact p:not(.section-kicker) { margin-bottom:30px; color:var(--muted); font-size:15px; }.site-footer { color:#7c8798; background:rgba(255,253,247,.86); }.footer-inner { display:flex; min-height:80px; align-items:center; justify-content:space-between; border-top:1px dashed var(--line); font-family:'DM Mono',monospace; font-size:10px; }.footer-inner a { color:var(--blue); }
.docs-layout { display:flex; align-items:stretch; }.docs-sidebar { position:sticky; top:77px; width:245px; height:calc(100vh - 77px); flex:0 0 245px; padding:46px 28px; border-right:1px dashed var(--line); background:rgba(255,253,247,.46); }.docs-content { min-width:0; flex:1; }.docs-sidebar-title { margin:0 0 29px; color:var(--ink); font-family:'DM Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.1em; }.docs-nav { display:grid; gap:5px; }.docs-nav-group { margin:21px 0 4px; color:#a59c89; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.13em; }.docs-nav-item { display:flex; align-items:center; gap:10px; padding:7px 8px; border-left:2px solid transparent; color:#657080; font-size:13px; letter-spacing:-.03em; transition:color .15s,background .15s,border-color .15s; }.docs-nav-item span { color:#9ea7b5; font-family:'DM Mono',monospace; font-size:9px; }.docs-nav-item:hover,.docs-nav-item.is-current { border-left-color:var(--coral); background:rgba(255,253,247,.74); color:var(--ink); }.docs-nav-item.is-current span { color:var(--coral); }.docs-sidebar-note { position:absolute; bottom:31px; display:flex; align-items:center; gap:8px; margin:0; color:#8c96a4; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.08em; }.docs-sidebar-note span { width:8px; height:8px; background:var(--blue); box-shadow:3px 3px 0 #f5c856; }.docs-content .hero { min-height:640px; }.doc-pagination { display:grid; grid-template-columns:1fr 1fr; gap:17px; padding-top:38px; padding-bottom:78px; }.doc-pagination-link { display:flex; flex-direction:column; gap:5px; padding:18px 21px; border:1px dashed var(--line); border-radius:3px 12px 3px 12px; background:rgba(255,253,247,.72); transition:transform .18s,box-shadow .18s; }.doc-pagination-link:hover { transform:translateY(-3px); box-shadow:5px 6px 0 rgba(40,87,197,.14); }.doc-pagination-link span { color:#8490a0; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.1em; }.doc-pagination-link strong { color:var(--ink); font-size:15px; letter-spacing:-.04em; }.doc-pagination-next { align-items:flex-end; text-align:right; }.doc-pagination-next span { color:var(--coral); }
@media (max-width: 800px) { .container { width:min(100% - 36px, 600px); }.section-shell { padding:88px 0; }.header-inner { min-height:68px; }.menu-toggle { display:block; }.site-nav { position:absolute; top:68px; right:18px; left:18px; display:none; flex-direction:column; gap:0; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--paper); box-shadow:0 15px 40px rgba(23,32,46,.12); }.site-nav.is-open { display:flex; }.site-nav a { padding:12px 14px; }.docs-layout { display:block; }.docs-sidebar { position:relative; top:auto; width:100%; height:auto; padding:17px 18px 15px; border-right:0; border-bottom:1px dashed var(--line); overflow-x:auto; }.docs-sidebar-title,.docs-nav-group,.docs-sidebar-note { display:none; }.docs-nav { display:flex; width:max-content; gap:4px; }.docs-nav-item { gap:6px; padding:7px 8px; border-bottom:2px solid transparent; border-left:0; font-family:'DM Mono',monospace; font-size:10px; }.docs-nav-item:hover,.docs-nav-item.is-current { border-bottom-color:var(--coral); border-left-color:transparent; }.docs-nav-item span { display:none; }.hero { min-height:auto; padding-top:80px; }.hero-grid,.two-column { grid-template-columns:1fr; gap:55px; }.hero-note { padding-left:25px; }.proof-grid { grid-template-columns:repeat(2,1fr); }.proof-grid div,.proof-grid div:first-child { padding:20px 16px; border-bottom:1px solid var(--line); }.proof-grid div:nth-child(2) { border-right:0; }.proof-grid div:nth-child(3),.proof-grid div:nth-child(4) { border-bottom:0; }.section-heading,.stack-heading { align-items:start; flex-direction:column; gap:16px; }.section-heading > p { margin:0; text-align:left; }.project-grid,.stack-grid,.stack-grid-system { grid-template-columns:1fr; }.stack-group-heading { align-items:flex-start; flex-wrap:wrap; }.stack-group-heading p { width:100%; margin-left:26px; }.stack-card { min-height:187px; }.work-flow { grid-template-columns:1fr; gap:18px; }.work-flow > span { display:none; }.doc-pagination { gap:10px; padding-top:22px; padding-bottom:55px; }.doc-pagination-link { padding:15px; }.doc-pagination-link strong { font-size:13px; }.footer-inner { align-items:flex-start; flex-direction:column; justify-content:center; gap:5px; padding:18px 0; } }
@media (max-width: 460px) { h1 { font-size:45px; }.hero-summary { font-size:15px; }.hero-actions { align-items:stretch; flex-direction:column; }.button { justify-content:space-between; }.project-meta { flex-direction:column; gap:3px; }.project-content p { min-height:0; }.timeline article { grid-template-columns:1fr; gap:8px; } }