/* ══════════════════════════════════════════════
   메인 페이지 전용 (front-main.css)
   - title-area: 그라디언트 + blob + 도트패턴 + 연산기호 deco
   - cards-section: 6개 서비스 카드 그리드 (ver4)
   ※ 색 토큰은 front.css의 ver4 6색 팔레트를 그대로 사용한다.
      (여기서 :root를 다시 정의하면 ver3 색이 ver4 색을 덮어써서 제거함)
   ══════════════════════════════════════════════ */

/* ══════════ TITLE AREA ══════════ */
.title-area {
  width: 100%;
  background: var(--white);
  text-align: center;
  padding: 56px 24px 0;
  position: relative;
  /* blob 장식이 화면 밖으로 삐져나가 가로 스크롤이 생기던 문제 (ver4에서 수정) */
  overflow: hidden;
  z-index: 1;
}

.title-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--gray-line) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.3;
  pointer-events: none;
}

.title-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 56px;
}

.title-decos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.deco {
  position: absolute;
  font-weight: 900;
  opacity: 0.1;
  color: var(--navy);
  user-select: none;
  line-height: 1;
}

.title-area h1 {
  font-size: 38px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.8px;
  margin-bottom: 14px;
}

.title-area h1 .em {
  color: #1DBFB0;
}

.title-area p {
  font-size: 16px;
  color: var(--gray-text);
  line-height: 1.6;
}

/* ══════════ SERVICE CARD GRID ══════════ */
.cards-section {
  background: var(--gray-bg);
  padding: 40px 24px 48px;
  position: relative;
  overflow: hidden;
}

.blob {
  position: absolute;
  pointer-events: none;
}

.cards-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* ── 카드: 파스텔 헤더 + 흰 바디 ── */
.service-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  background: var(--white);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* 카드 헤더 (파스텔 배경) */
.card-header {
  padding: 26px 28px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.card-pink   .card-header { background: var(--pink-pastel); }
.card-orange .card-header { background: var(--orange-pastel); }
.card-yellow .card-header { background: var(--yellow-pastel); }
.card-green  .card-header { background: var(--green-pastel); }
.card-blue   .card-header { background: var(--blue-pastel); }
.card-purple .card-header { background: var(--purple-pastel); }

.card-icon-wrap {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  word-break: keep-all;
}

.card-pink   .card-title { color: var(--pink-dark); }
.card-orange .card-title { color: var(--orange-dark); }
.card-yellow .card-title { color: var(--yellow-dark); }
.card-green  .card-title { color: var(--green-dark); }
.card-blue   .card-title { color: var(--blue-dark); }
.card-purple .card-title { color: var(--purple-dark); }

/* 카드 바디 (흰색, hover 시 라이트) */
.card-body {
  flex: 1;
  padding: 20px 28px 28px;
  background: var(--white);
  transition: background 0.2s;
}

.card-pink:hover   .card-body { background: var(--pink-light); }
.card-orange:hover .card-body { background: var(--orange-light); }
.card-yellow:hover .card-body { background: var(--yellow-light); }
.card-green:hover  .card-body { background: var(--green-light); }
.card-blue:hover   .card-body { background: var(--blue-light); }
.card-purple:hover .card-body { background: var(--purple-light); }

.card-desc {
  font-size: 14px;
  color: var(--gray-text);
  line-height: 1.75;
  word-break: keep-all;
}

/* 카드 버튼 */
.card-btn {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: 20px;
  color: white;
}

.btn-pink   { background: var(--pink);   color: var(--navy); }
.btn-orange { background: var(--orange); color: var(--navy); }
.btn-yellow { background: var(--yellow); color: var(--navy); }
.btn-green  { background: var(--green);  color: var(--navy); }
.btn-blue   { background: var(--blue); }
.btn-purple { background: var(--purple); }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 640px) {
  /* 타이틀 압축 */
  .title-area       { padding: 32px 16px 0; }
  .title-inner      { padding-bottom: 32px; }
  .title-area h1    { font-size: 26px; }
  .title-area p     { font-size: 14px; }

  /* 그라디언트 전환 */
  .gradient-divider { height: 28px !important; }

  /* 카드 섹션 */
  .cards-section    { padding: 20px 12px 24px; }
  .cards-grid       { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* 카드 전체를 파스텔색 한 장으로 칠하고 헤더/바디는 투명 처리.
     두 영역을 각각 칠하면 플렉스 높이의 서브픽셀 반올림 때문에 경계에 흰 줄이 비친다 */
  .card-pink   { background: var(--pink-pastel); }
  .card-orange { background: var(--orange-pastel); }
  .card-yellow { background: var(--yellow-pastel); }
  .card-green  { background: var(--green-pastel); }
  .card-blue   { background: var(--blue-pastel); }
  .card-purple { background: var(--purple-pastel); }

  .card-pink   .card-header,
  .card-orange .card-header,
  .card-yellow .card-header,
  .card-green  .card-header,
  .card-blue   .card-header,
  .card-purple .card-header { background: transparent; }

  /* 카드 헤더 */
  .card-header      { padding: 16px 14px 14px; gap: 10px; }
  .card-icon-wrap   { width: 56px; height: 56px; }
  .card-title       { font-size: 14px; }

  /* 카드 바디 */
  .card-body        { padding: 14px 14px; background: transparent; }
  .card-desc        { display: none; }
  .card-btn {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 13px 8px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    border-radius: 20px;
  }
}