.main {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  width: 100%;
}

.main::before {
  content: '1';
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="%234f46e5" fill-opacity="0.05" d="M45,-78.1C58.3,-71.3,69.1,-58.7,77.8,-44.3C86.5,-29.9,93.2,-14.9,92.6,-0.3C92,14.3,84.1,28.5,74.7,41.2C65.3,53.9,54.4,65,41.3,71.7C28.2,78.4,14.1,80.7,-0.7,81.9C-15.5,83.1,-31,83.2,-44.8,77.2C-58.6,71.2,-70.7,59,-79.1,44.4C-87.5,29.8,-92.2,14.9,-91.6,0.3C-91,-14.2,-85,-28.4,-76.6,-41.1C-68.2,-53.8,-57.3,-65,-44.3,-71.8C-31.3,-78.6,-15.7,-81,0.2,-81.4C16.1,-81.8,32.2,-80.2,45,-78.1Z" transform="translate(100 100)" /></svg>')
    no-repeat center center;
  opacity: 0.1;
}

.main-content {
  max-width: 800px;
  text-align: center;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.main h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main p {
  font-size: 1.25rem;
  color: #64748b;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.button-container {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.service-button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.primary-button {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.1);
}

.secondary-button {
  background: white;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.service-button:hover {
  transform: translateY(-2px);
}

.primary-button:hover {
  box-shadow: 0 6px 12px rgba(79, 70, 229, 0.2);
}

.secondary-button:hover {
  background: var(--primary-color);
  color: white;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .main h1 {
    font-size: 2.5rem;
  }

  .main p {
    font-size: 1rem;
  }

  .button-container {
    flex-direction: column;
  }

  .service-button {
    width: 100%;
    justify-content: center;
  }
}