이번주 함께 나눌 채소를 골라보세요

1인가구끼리 필요한 만큼만 구매해 음식물 쓰레기를 줄여보세요.

이번주 투표

배추

3 / 4명

상추

2 / 4명

양파

1 / 4명

감자

2 / 4명

*{ margin:0; padding:0; box-sizing:border-box; font-family:'Pretendard',sans-serif; } body{ background:#f5f7f9; color:#333; } /* Header */ header{ width:100%; height:70px; background:#fff; display:flex; justify-content:space-between; align-items:center; padding:0 20px; position:sticky; top:0; z-index:100; box-shadow:0 2px 10px rgba(0,0,0,.08); } .logo{ font-size:25px; font-weight:700; color:#2E7D32; } .notification{ position:relative; cursor:pointer; } .notification .material-icons{ font-size:32px; color:#555; } .badge{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:red; color:#fff; font-size:11px; display:flex; justify-content:center; align-items:center; } /* Hero */ .hero{ width:95%; margin:30px auto; background:#DFF7D8; border-radius:25px; display:flex; justify-content:space-between; align-items:center; padding:40px; box-shadow:0 8px 25px rgba(0,0,0,.08); } .hero-left{ width:55%; } .green-tag{ background:#2E7D32; color:#fff; padding:8px 18px; border-radius:30px; display:inline-block; margin-bottom:20px; } .hero h1{ font-size:42px; margin-bottom:20px; line-height:1.3; } .hero p{ color:#666; margin-bottom:25px; font-size:18px; } .hero button{ padding:15px 35px; border:none; background:#2E7D32; color:white; border-radius:15px; cursor:pointer; font-size:17px; transition:.3s; } .hero button:hover{ background:#1B5E20; } .hero-right img{ width:280px; } /* Vote */ .vote{ width:95%; margin:auto; } .vote h2{ margin-bottom:20px; font-size:30px; } .card-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:25px; } .card{ background:white; border-radius:20px; padding:25px; box-shadow:0 10px 25px rgba(0,0,0,.07); transition:.3s; } .card:hover{ transform:translateY(-8px); } .card img{ width:100%; height:170px; object-fit:contain; } .card h3{ margin:15px 0; } .progress{ width:100%; height:12px; background:#eee; border-radius:30px; overflow:hidden; } .bar{ height:100%; background:#4CAF50; } .card p{ margin:15px 0; } .card button{ width:100%; height:45px; border:none; border-radius:12px; background:#43A047; color:white; cursor:pointer; transition:.3s; } .card button:hover{ background:#2E7D32; } /* Bottom Navigation */ nav{ position:fixed; bottom:0; left:0; width:100%; height:75px; background:white; display:flex; justify-content:space-around; align-items:center; box-shadow:0 -2px 15px rgba(0,0,0,.08); } nav div{ text-align:center; cursor:pointer; } nav p{ font-size:12px; } .plus{ width:65px; height:65px; border-radius:50%; background:#4CAF50; display:flex; justify-content:center; align-items:center; margin-top:-35px; box-shadow:0 10px 20px rgba(0,0,0,.2); } .plus .material-icons{ color:white; font-size:35px; } /* Mobile */ @media(max-width:900px){ .hero{ flex-direction:column; text-align:center; } .hero-left{ width:100%; } .hero-right img{ width:220px; margin-top:30px; } .hero h1{ font-size:30px; } }