*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--canvas:#FFFFFF;--ink:#1A1A2E;--coral:#FF6B6B;--lemon:#FFD93D;--mint:#6BCB77;--sky:#4D96FF;--lilac:#9B72CF;--cloud:#F2F2F2}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:'Inter',sans-serif;font-weight:400;font-size:1rem;line-height:1.75;overflow-x:hidden}

.hero{padding:clamp(3rem,8vw,6rem) clamp(1.5rem,4vw,3rem);text-align:center}
.hero h1{font-weight:700;font-size:clamp(2.5rem,6vw,5rem);letter-spacing:-0.02em;margin-bottom:1rem}
.color-dots{display:flex;justify-content:center;gap:16px;margin-bottom:1.5rem}
.dot{width:12px;height:12px;border-radius:50%}
.dot.coral{background:var(--coral)}.dot.lemon{background:var(--lemon)}.dot.mint{background:var(--mint)}.dot.sky{background:var(--sky)}.dot.lilac{background:var(--lilac)}
.tagline{color:var(--ink);opacity:0.6;margin-bottom:2rem}
.penrose{width:120px;height:auto;margin:0 auto}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:2rem clamp(1.5rem,4vw,3rem)}
.card{border-radius:12px;padding:28px;transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1)}
.card:hover{transform:scale(1.03)}
.card h2{font-weight:700;font-size:1.15rem;margin-bottom:0.75rem}
.card p{font-size:0.9rem;line-height:1.65}
.card-illus{width:80px;height:80px;margin-top:1rem}
.coral-bg{background:var(--coral);color:var(--ink)}.lemon-bg{background:var(--lemon);color:var(--ink)}
.mint-bg{background:var(--mint);color:var(--ink)}.sky-bg{background:var(--sky);color:#fff}
.lilac-bg{background:var(--lilac);color:#fff}.cloud-bg{background:var(--cloud);color:var(--ink)}

.showcase{padding:clamp(3rem,8vw,6rem) clamp(1.5rem,4vw,3rem);text-align:center}
.hero-illus{width:min(300px,60vw);height:auto;margin:0 auto 2rem}
.thesis{font-size:clamp(1rem,2vw,1.25rem);max-width:600px;margin:0 auto 2rem;line-height:1.8}
.accent-lines{display:flex;flex-direction:column;gap:0.75rem;align-items:center}
.accent-line{height:4px;width:60px;border-radius:2px}
.coral-line{background:var(--coral)}.lemon-line{background:var(--lemon)}.mint-line{background:var(--mint)}

.footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:2rem clamp(1.5rem,4vw,3rem)}
.card.small{padding:20px;text-align:center}
.card.small svg{width:40px;height:40px;margin:0 auto 0.5rem;display:block}
.card.small p{font-size:0.8125rem}
.mujun-final{font-weight:700;font-size:2rem}

@media(prefers-reduced-motion:reduce){
.card:hover{transform:none}
}