:root { --ink:#25211e; --paper:#f4f1eb; --muted:#827a72; --line:#d9d2c8; --dark:#25211d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.75 "Noto Sans KR",sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; } .demo-notice { background:#171513; color:#e7e1d8; padding:9px 5vw; text-align:center; font-size:11px; letter-spacing:-.02em; } .demo-notice a { margin-left:18px; text-decoration:underline; text-underline-offset:3px; }
.site-header { height:88px; padding:0 5vw; display:flex; align-items:center; gap:clamp(25px,5vw,85px); position:absolute; z-index:4; inset:37px 0 auto; color:#fff; border-bottom:1px solid #ffffff35; transition:.25s; } .site-header.is-stuck { position:fixed; inset:0; background:#25211ef2; backdrop-filter:blur(10px); } .brand { font:600 18px/1 "DM Mono",monospace; letter-spacing:-.08em; white-space:nowrap; } .brand span { display:block; margin-top:5px; font-size:9px; letter-spacing:.22em; } nav { display:flex; justify-content:center; gap:clamp(20px,3.2vw,54px); flex:1; font-size:12px; } nav a:hover,.header-link:hover { opacity:.65; } .header-link { font-size:11px; white-space:nowrap; } .header-link span { margin-left:7px; } .menu-button { display:none; border:0; color:inherit; background:transparent; font:11px "DM Mono"; }
.hero { min-height:min(770px,calc(100vh - 37px)); position:relative; color:#fff; display:flex; align-items:center; overflow:hidden; } .hero-image,.hero-shade { position:absolute; inset:0; width:100%; height:100%; } .hero-image { object-fit:cover; } .hero-shade { background:linear-gradient(90deg,#171310b8 0%,#17131070 39%,#17131005 72%),linear-gradient(0deg,#17131070,#17131008 42%); } .hero-content { position:relative; z-index:1; width:min(1200px,90vw); margin:70px auto 0; } .kicker { margin:0 0 19px; color:inherit; font:10px/1.3 "DM Mono"; letter-spacing:.15em; } h1,h2 { font-family:"Nanum Myeongjo",serif; font-weight:400; letter-spacing:-.09em; } .hero h1 { margin:0; font-size:clamp(44px,5vw,78px); line-height:1.28; } .hero-description { margin:25px 0 30px; font-size:15px; color:#f5f1eb; } .actions { display:flex; gap:10px; } .button { min-width:174px; padding:14px 20px; display:inline-block; text-align:center; border:1px solid transparent; font-size:12px; transition:.25s; } .button:hover { transform:translateY(-3px); } .button-light { background:#f8f6f1; color:var(--ink); } .button-line { border-color:#ffffff9b; color:#fff; } .hero-index { position:absolute; z-index:1; bottom:28px; left:5vw; margin:0; font:10px "DM Mono"; } .hero-index span { display:inline-block; width:90px; height:1px; margin:0 9px 3px; background:#ffffffa1; } .hero-caption { position:absolute; z-index:1; right:5vw; bottom:28px; margin:0; font:10px/1.4 "DM Mono"; text-align:right; letter-spacing:.07em; }
.principles { padding:50px 5vw; display:grid; grid-template-columns:repeat(3,1fr); background:#faf8f4; } .principles article { padding:5px clamp(20px,4vw,65px); border-left:1px solid var(--line); } .principles article:first-child { border:0; } .principles span,.service-list span { color:var(--muted); font:10px "DM Mono"; } .principles h2 { margin:8px 0 5px; font:700 17px "Noto Sans KR"; letter-spacing:-.07em; } .principles p { margin:0; color:#756e67; font-size:12px; line-height:1.6; }
.section { width:min(1200px,90vw); margin:auto; padding:125px 0; position:relative; } .section-heading h2 { margin:0; font-size:clamp(37px,4vw,57px); line-height:1.35; } .section-heading > p:last-child { margin:17px 0 0; color:#706962; font-size:13px; }.projects .text-link { position:absolute; right:0; top:155px; }.text-link { font-size:12px; border-bottom:1px solid currentColor; padding-bottom:4px; }.text-link span { margin-left:12px; }
.project-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; }.project-card { margin:0; overflow:hidden; }.project-card img { display:block; width:100%; aspect-ratio:.85; object-fit:cover; filter:saturate(.65); transition:.6s cubic-bezier(.2,.7,.2,1); }.project-card:hover img { transform:scale(1.06); filter:saturate(1); }.project-card h3 { margin:12px 0 0; font-weight:500; font-size:14px; letter-spacing:-.05em; }.project-card p { color:#807870; margin:2px 0; font:9px "DM Mono"; letter-spacing:.08em; }
.services { display:grid; grid-template-columns:1fr 1.35fr; gap:11vw; border-top:1px solid var(--line); }.service-list { border-top:1px solid var(--ink); }.service-list article { min-height:95px; display:grid; grid-template-columns:44px 1fr 1.4fr; align-items:center; gap:10px; border-bottom:1px solid var(--line); }.service-list h3 { margin:0; font-size:15px; font-weight:600; }.service-list p { margin:0; color:#756e67; font-size:12px; }
.process { background:var(--dark); color:#f4f1eb; }.process-inner { padding-bottom:80px; }.process-intro { position:absolute; top:143px; right:0; margin:0; font-size:13px; color:#d0cbc3; }.process ol { margin:70px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); list-style:none; }.process li { position:relative; padding-top:20px; border-top:1px solid #a6a098; }.process li:not(:last-child)::after { content:""; position:absolute; top:-1px; right:-1px; width:7px; height:1px; background:#f4f1eb; }.process b { display:block; font:12px "DM Mono"; }.process span { display:block; margin-top:8px; font-size:12px; }
.trust { display:grid; grid-template-columns:1fr 1fr; gap:11vw; }.trust-copy { align-self:end; }.trust-copy p { margin:0 0 28px; color:#625b54; font-size:16px; line-height:1.9; }.trust-copy .text-link { font-size:12px; }
footer { padding:80px 5vw; display:flex; justify-content:space-between; align-items:end; gap:35px; background:#e9e4dc; } footer h2 { margin:0; font-size:clamp(35px,4vw,56px); line-height:1.35; } footer div > p:last-child { margin:17px 0 0; color:#746c63; font-size:13px; }.footer-actions { display:flex; gap:10px; }.button-dark { background:var(--ink); color:#fff; }.button-outline { border-color:#5e5750; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s,transform .7s; }.reveal.visible { opacity:1; transform:none; }
@media (max-width:800px) { .demo-notice { padding:8px 5vw; font-size:10px; }.demo-notice a { margin-left:8px; }.site-header { height:66px; top:34px; padding:0 5vw; }.site-header.is-stuck { top:0; }.header-link { display:none; }.menu-button { display:block; margin-left:auto; position:relative; z-index:2; }.site-header nav { display:none; }.site-header nav.is-open { display:flex; position:absolute; top:65px; left:0; right:0; padding:28px 5vw; flex-direction:column; align-items:flex-start; background:#25211ef7; gap:17px; }.hero { min-height:680px; }.hero-image { object-position:62% center; }.hero-shade { background:linear-gradient(90deg,#171310cc,#1713103b),linear-gradient(0deg,#17131080,#17131011); }.hero-content { margin-top:90px; }.hero h1 { font-size:49px; }.hero-description { font-size:13px; }.actions { flex-direction:column; align-items:flex-start; }.button { min-width:190px; }.hero-caption { display:none; }.principles { grid-template-columns:1fr; padding:26px 5vw; }.principles article { padding:21px 0; border:0; border-bottom:1px solid var(--line); }.principles article:last-child { border:0; }.section { padding:80px 0; }.projects .text-link { position:static; display:inline-block; margin-top:23px; }.project-grid { grid-template-columns:1fr 1fr; gap:25px 12px; margin-top:30px; }.project-card img { aspect-ratio:.9; }.services,.trust { grid-template-columns:1fr; gap:40px; }.service-list article { grid-template-columns:32px 1fr; padding:15px 0; }.service-list p { grid-column:2; }.process-inner { padding-bottom:60px; }.process-intro { position:static; margin:22px 0 0; }.process ol { grid-template-columns:1fr; gap:0; margin-top:40px; }.process li { display:grid; grid-template-columns:60px 1fr; padding:14px 0; }.process span { margin:0; }.trust-copy { margin-top:-10px; } footer { padding:65px 5vw; flex-direction:column; align-items:flex-start; }.footer-actions { width:100%; flex-direction:column; }.footer-actions .button { width:100%; } }
@media (max-width:420px) { .project-grid { grid-template-columns:1fr; }.hero h1 { font-size:43px; }.hero-index { bottom:20px; }.hero-index span { width:50px; } }