/* munju.club - Colors: #E05040, #40C8A0, #F0D040, #B080D0, #60A0E0, #1A1A1A, #FFFFFF, #F8F4E8 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #F8F4E8; color: #1A1A1A; font-family: 'Rubik', sans-serif; font-size: 1rem; line-height: 1.6; }

/* Bento Grid */
.bento { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* Blocks */
.block { position: relative; padding: 2rem; border: 3px solid #1A1A1A; opacity: 0; transform: translateY(30px); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; }
.block.visible { opacity: 1; transform: translateY(0); }

/* Block Colors */
.coral { background: #E05040; color: #FFFFFF; }
.mint { background: #40C8A0; color: #FFFFFF; }
.lemon { background: #F0D040; color: #1A1A1A; }
.lilac { background: #B080D0; color: #FFFFFF; }
.sky { background: #60A0E0; color: #FFFFFF; }

/* Block Sizes */
.hero-block { grid-column: span 2; grid-row: span 2; }
.wide-block { grid-column: span 2; }
.tall-block { grid-row: span 2; }
.full-block { grid-column: span 4; }

/* Badge */
.badge { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #1A1A1A; background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: #1A1A1A; animation: badgeSpin 20s linear infinite; }
@keyframes badgeSpin { to { transform: rotate(360deg); } }

/* Typography */
.hero-title { font-weight: 900; font-size: clamp(2.5rem, 5vw, 4rem); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 0.5rem; }
.hero-sub { font-weight: 700; font-size: 1.2rem; text-transform: uppercase; margin-bottom: 1rem; }
.hero-desc { font-weight: 400; font-size: 1rem; max-width: 400px; }
.block-title { font-weight: 900; font-size: clamp(1.2rem, 2.5vw, 1.6rem); text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.block-title.dark, .block-text.dark { color: #1A1A1A; }
.block-text { font-weight: 400; margin-bottom: 0.5rem; }

/* Trophy */
.trophy { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; }
.trophy-cup { width: 30px; height: 24px; background: #F0D040; border: 3px solid #1A1A1A; border-radius: 0 0 50% 50%; }
.trophy-base { width: 20px; height: 8px; background: #1A1A1A; margin-top: 2px; }

/* Zigzag */
.zigzag-row { grid-column: span 4; padding: 0.5rem 0; }
.zigzag { width: 100%; height: 32px; }

/* Responsive */
@media (max-width: 768px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .hero-block, .wide-block, .full-block, .zigzag-row { grid-column: span 2; }
    .tall-block { grid-row: span 1; }
}
@media (max-width: 500px) {
    .bento { grid-template-columns: 1fr; }
    .hero-block, .wide-block, .full-block, .zigzag-row { grid-column: span 1; }
}