@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
:root{--bg:#e9e9e6;--paper:#f8f8f5;--ink:#292a28;--muted:#777974;--line:#c9cac5;--accent:#a8aaa2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans','Noto Sans KR',sans-serif}button,a{font:inherit;color:inherit}a{text-decoration:none}.site-header{height:76px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-weight:700;letter-spacing:.08em;font-size:15px}.wordmark span{font-size:9px;vertical-align:top;margin-left:3px}.site-header nav{display:flex;gap:30px;font:11px 'DM Mono',monospace;letter-spacing:.08em}.site-header nav a:hover,.text-link:hover,.back-link:hover{opacity:.55}main{max-width:1440px;margin:auto;padding:0 6vw}.view{display:none}.view.active{display:block}.hero{padding:105px 0 70px;position:relative}.eyebrow{font:11px 'DM Mono',monospace;letter-spacing:.12em;color:var(--muted)}h1{font-size:clamp(56px,8.4vw,118px);line-height:.94;letter-spacing:-.075em;font-weight:500;margin:28px 0 25px}h1 em,h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.06em}.hero-copy{font-size:15px;color:#62645f}.hero-note{position:absolute;right:0;bottom:76px;font:10px 'DM Mono',monospace;letter-spacing:.1em;color:var(--muted)}.hero-note span{font-size:16px;margin-left:12px}.category-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:54px 24px;padding-bottom:125px}.category-card{border:0;padding:0;background:none;text-align:left;cursor:pointer;min-width:0}.category-card:hover .art{filter:brightness(.96)}.art{height:clamp(230px,32vw,430px);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:filter .25s}.card-large .art{height:clamp(300px,39vw,510px)}.art-label{position:absolute;top:20px;left:22px;font:10px 'DM Mono',monospace;letter-spacing:.12em;color:rgba(40,40,38,.65)}.art-symbol{font-size:clamp(90px,17vw,210px);font-weight:300;color:rgba(50,52,48,.45)}.art-environment{background:linear-gradient(135deg,#c4c7bf,#92988e 55%,#d8d8d1)}.art-environment:before{content:"";position:absolute;width:54%;height:60%;border:1px solid #6e756d;transform:perspective(500px) rotateY(-22deg) rotateX(8deg);box-shadow:28px 25px 0 -1px #a6aaa1,56px 50px 0 -1px #7f867d}.art-character{background:linear-gradient(145deg,#d6cfc5,#aaa49b)}.art-character:before{content:"";position:absolute;width:35%;height:65%;border-radius:48% 48% 12% 12%;background:linear-gradient(90deg,#77746e,#b5afa5,#77746e);opacity:.42;transform:rotate(7deg)}.art-game{background:linear-gradient(135deg,#c5c9c5,#aeb6b2)}.art-game:before{content:"";position:absolute;width:65%;height:42%;border:1px solid #747d78;transform:rotate(-8deg);box-shadow:14px 14px 0 -1px #b7beb8,28px 28px 0 -1px #8d9890}.art-2d{background:linear-gradient(135deg,#d7d0c8,#c1b6aa)}.art-2d:before{content:"✳";font-size:180px;color:#8d8176;opacity:.45;transform:rotate(18deg)}.card-meta{display:flex;justify-content:space-between;align-items:center;padding-top:17px}.card-meta h2{font-size:21px;font-weight:500;margin:0 0 6px;letter-spacing:-.04em}.card-meta p{font:10px 'DM Mono',monospace;color:var(--muted);margin:0;letter-spacing:.03em}.arrow{font-size:24px}.about-strip{border-top:1px solid var(--line);padding:65px 0 90px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px}.about-strip h2{font-size:clamp(42px,6vw,72px);line-height:.95;font-weight:500;letter-spacing:-.07em;margin:0 0 22px}.about-strip p{font-size:13px;line-height:1.9;color:#666}.text-link,.back-link{border:0;background:none;padding:0;cursor:pointer;font:10px 'DM Mono',monospace;letter-spacing:.1em}.about-strip .text-link{justify-self:end;align-self:end}.back-link{margin:45px 0 55px;color:var(--muted)}.category-heading{padding-bottom:42px;border-bottom:1px solid var(--line)}.category-heading h1{font-size:clamp(48px,7vw,88px);margin:22px 0}.category-heading p{max-width:650px;line-height:1.8;color:#62645f;font-size:14px}.filter-row{display:flex;gap:9px;flex-wrap:wrap;padding:25px 0}.filter-chip{border:1px solid var(--line);border-radius:30px;padding:9px 15px;background:transparent;font:10px 'DM Mono',monospace;cursor:pointer}.filter-chip.active,.filter-chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 22px;padding-bottom:100px}.project-card{border:0;background:none;text-align:left;padding:0;cursor:pointer}.project-image{height:clamp(220px,30vw,390px);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#d2d3cd,#aeb2aa)}.project-image span{font:10px 'DM Mono',monospace;letter-spacing:.12em;color:#6e716a}.project-card h3{font-size:19px;font-weight:500;margin:15px 0 6px}.project-card p{font-size:11px;color:var(--muted);margin:0}.project-card:hover .project-image{filter:brightness(.95)}.detail-top{padding-bottom:35px}.detail-top h1{font-size:clamp(48px,7vw,88px);margin:20px 0}.detail-top p{max-width:700px;line-height:1.8;color:#666}.detail-hero{height:min(58vw,650px);margin-bottom:55px}.art-placeholder{background:linear-gradient(135deg,#d0d2cb,#a9afa7);display:flex;align-items:center;justify-content:center;color:#73776f;font:11px 'DM Mono',monospace;letter-spacing:.14em}.detail-columns{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding-bottom:55px;border-bottom:1px solid var(--line)}dl{margin:22px 0}dt{font:10px 'DM Mono',monospace;color:var(--muted);margin-top:18px}dd{margin:5px 0 0;font-size:13px}#detail-overview{font-size:14px;line-height:2;color:#555;margin-top:22px;white-space:pre-line}.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:55px 0}.gallery-placeholder{height:300px;background:linear-gradient(135deg,#d6d7d1,#b5b9b1);display:flex;align-items:center;justify-content:center;font:10px 'DM Mono',monospace;color:#777}.detail-footer{border-top:1px solid var(--line);padding:22px 0 80px;display:flex;justify-content:space-between;font:10px 'DM Mono',monospace;color:var(--muted)}footer{border-top:1px solid var(--line);padding:22px 6vw;display:flex;justify-content:space-between;font:9px 'DM Mono',monospace;letter-spacing:.1em;color:var(--muted)}
@media(max-width:700px){.site-header{height:64px;padding:0 5vw}.site-header nav{gap:13px;font-size:9px}main{padding:0 5vw}.hero{padding:75px 0 65px}.hero-note{position:static;margin-top:35px}.category-grid{grid-template-columns:1fr;gap:38px;padding-bottom:80px}.card-large .art,.art{height:68vw;max-height:390px}.about-strip{grid-template-columns:1fr;gap:25px;padding:45px 0 60px}.about-strip .text-link{justify-self:start}.project-grid{grid-template-columns:1fr;gap:32px}.project-image{height:68vw}.detail-columns{grid-template-columns:1fr;gap:15px}.detail-gallery{grid-template-columns:1fr}.gallery-placeholder{height:230px}footer{padding:18px 5vw;font-size:8px}}

/* Project process sections */
.detail-process{padding:10px 0 70px}
.process-section{padding:58px 0;border-bottom:1px solid var(--line)}
.process-heading{display:flex;align-items:flex-start;gap:22px;margin-bottom:22px}
.process-number{font:12px 'DM Mono',monospace;color:var(--muted);padding-top:8px}
.process-heading .eyebrow{margin-bottom:10px}
.process-heading h2{font-size:clamp(25px,3.4vw,42px);font-weight:500;letter-spacing:-.055em;margin:0}
.process-description{max-width:780px;font-size:14px;line-height:2;color:#555;margin:0 0 28px 34px;white-space:pre-line}
.process-image-placeholder{min-height:300px;background:linear-gradient(135deg,#d6d7d1,#b5b9b1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font:11px 'DM Mono',monospace;letter-spacing:.12em;color:#777;margin-left:34px;text-align:center;padding:25px}
.process-image-placeholder small{font:11px 'Noto Sans KR',sans-serif;letter-spacing:0;color:#858780}
.process-image{display:block;width:calc(100% - 34px);max-height:680px;object-fit:contain;background:#e1e1dc;margin-left:34px}
.process-caption{margin:12px 0 0 34px;font-size:11px;line-height:1.8;color:var(--muted)}
.project-image img{width:100%;height:100%;object-fit:cover}
.detail-cover-image{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.process-section{padding:40px 0}.process-heading{gap:14px}.process-description,.process-image-placeholder,.process-image,.process-caption{margin-left:0}.process-image{width:100%}.process-image-placeholder{min-height:220px}}