/* ============================================================
   layout-bento.css (Lego Block)
   Responsive Bento Grid Engine & Micro-interactions
   ============================================================ */
/* Only this section's heading centers, to match the now-centered bento
   cards below it — "Choose your path" keeps its left-aligned header since
   its card grid is still full-width. */
.section:has(.bento-grid) .section-head {
  text-align: center; margin-left: auto; margin-right: auto;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
}
@media (min-width: 768px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Bento Card Component
   Each card gets a colored left accent line (cycling through 4 hues) so the
   grid reads as a set of distinct, hand-placed pieces instead of four
   identical purple boxes. Hover glow picks up the same accent color. */
.bento-card {
  --card-accent: var(--accent-primary);
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  padding: 24px 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  cursor: default;
}
.bento-card:nth-child(4n+1) { --card-accent: #A78BFA; }
.bento-card:nth-child(4n+2) { --card-accent: #7dd3fc; }
.bento-card:nth-child(4n+3) { --card-accent: #22d3ee; }
.bento-card:nth-child(4n+4) { --card-accent: #34d399; }

.bento-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--card-accent) 35%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent) 35%, transparent), 0 16px 36px rgba(0, 0, 0, 0.3), 0 0 40px color-mix(in srgb, var(--card-accent) 10%, transparent);
}

/* ── Strip Cards (Screenshot 1 & 2 Style) ── */
.strip-card {
  border-left: 4px solid transparent;
}
.strip-card.purple { border-left-color: #8A2BE2; }
.strip-card.green { border-left-color: #00E676; }

/* min-width (not width) + nowrap so a 2-character label like "구성" widens
   the box sideways instead of wrapping to two cramped lines. */
.bento-icon {
  font-size: 22px; margin-bottom: 12px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  min-width: 52px; height: 52px; padding: 0 14px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 22%, transparent), color-mix(in srgb, var(--card-accent) 6%, transparent));
  color: var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 35%, transparent);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 0 20px color-mix(in srgb, var(--card-accent) 18%, transparent);
}

.bento-card h3 {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.bento-card p {
  font-size: 15px; color: var(--text-secondary); line-height: 1.6;
}