.service-panel {
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-gap);
}

/* 섹션 머리: 작은 안내 글 + 제목 + 설명. 긴 설명은 읽기 폭에서 줄바꿈한다. */
.service-heading {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  max-width: var(--layout-reading-inline-size-max);
}

.service-heading .service-hero-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-xl);
}

:is(.service-heading, .service-cta) h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-lg);
}

:is(.service-feature, .service-step, .service-point) h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-lg);
}

:is(.service-lede, .service-feature p, .service-step p) {
  color: rgb(var(--color-gray-500));
}

.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.service-heading .service-actions {
  margin-block-start: var(--space-md);
}

/* 히어로: 휴대폰은 글 아래 그림, 1024px부터 글과 그림이 반씩 나란히 선다. */
.service-hero {
  display: grid;
  align-items: center;
  gap: var(--space-2xl);
  padding-block: var(--space-2xl);
}

/* 피아노 롤 그림: 16칸 × 10음 격자. 마디선(4칸마다)과 음 줄을 1px 선으로 깔고, 음표 · 음높이 곡선 · 재생선을 같은 격자에 겹친다. */
.service-score {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  aspect-ratio: var(--media-video-aspect-ratio);
  padding: var(--space-md);
  overflow: hidden;
  border-radius: var(--radius-squircle-lg);
  background:
    linear-gradient(to right, rgb(var(--color-gray-200)) var(--line-width-default), transparent var(--line-width-default)) 0 0 / calc(100% / 4) 100% content-box,
    linear-gradient(to bottom, rgb(var(--color-gray-200)) var(--line-width-default), transparent var(--line-width-default)) 0 0 / 100% calc(100% / 10) content-box,
    rgb(var(--color-gray-100));
}

/* 음표는 음 줄 가운데의 얇은 막대이고 가사는 막대 바로 위에 쓴다. 곡선이 막대 가운데를 지나도 가사를 가리지 않는다. */
.service-note {
  position: relative;
  align-self: center;
  height: 40%;
  margin-inline: var(--line-width-default);
  border-radius: var(--radius-full);
  background: var(--gradient-primary-horizontal);
}

.service-note::before {
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: var(--space-2xs);
  padding-block-end: var(--space-2xs);
  color: rgb(var(--color-gray-900));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-sm);
  content: attr(data-lyric);
}

/* 음표 자리: 음 줄(1이 가장 높은 음) / 시작 칸 / 끝 / 길이. service.html의 곡선 좌표와 같은 격자다. */
.service-note:nth-child(1) { grid-area: 7 / 1 / auto / span 2; }
.service-note:nth-child(2) { grid-area: 6 / 3 / auto / span 1; }
.service-note:nth-child(3) { grid-area: 5 / 4 / auto / span 2; }
.service-note:nth-child(4) { grid-area: 4 / 6 / auto / span 1; }
.service-note:nth-child(5) { grid-area: 5 / 7 / auto / span 2; }
.service-note:nth-child(6) { grid-area: 6 / 9 / auto / span 1; }
.service-note:nth-child(7) { grid-area: 4 / 10 / auto / span 2; }
.service-note:nth-child(8) { grid-area: 3 / 12 / auto / span 1; }
.service-note:nth-child(9) { grid-area: 2 / 13 / auto / span 4; }

.service-curve {
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgb(var(--color-gray-900));
  stroke-width: var(--line-width-emphasis);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 재생선은 격자 폭 전체를 차지한 상자의 왼쪽 선이다. 상자를 자기 폭만큼 옮겨 선이 처음부터 끝까지 지나가게 한다. 움직임을 줄인 환경에서는 그리지 않는다. */
.service-playhead {
  grid-area: 1 / 1 / -1 / -1;
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .service-playhead {
    display: block;
    border-inline-start: var(--line-width-emphasis) solid rgb(var(--color-primary-start));
    animation: service-playhead var(--service-playhead-duration) linear infinite;
  }
}

@keyframes service-playhead {
  to {
    transform: translateX(100%);
  }
}

.service-section {
  display: grid;
  gap: var(--space-2xl);
}

/* 엔진 특징: 휴대폰 1열 → 640px↑ 2열 → 1440px↑ 4열 카드. 카드 위 짧은 막대는 히어로 음표와 같은 모양이다. */
.service-features {
  display: grid;
  gap: var(--space-md);
}

.service-feature {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-2xl);
  border-radius: var(--radius-squircle-lg);
  background: rgb(var(--color-gray-100));
}

.service-feature::before {
  width: var(--size-control-md);
  height: var(--space-xs);
  margin-block-end: var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--gradient-primary-horizontal);
  content: "";
}

/* 만드는 과정: 번호는 목록 순서를 세어 primary 원 안에 쓴다. 1024px부터 세 단계가 한 줄에 선다. */
.service-steps {
  display: grid;
  gap: var(--space-2xl);
  counter-reset: service-step;
}

.service-step {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-sm);
  counter-increment: service-step;
}

.service-step::before {
  display: grid;
  place-items: center;
  width: var(--size-control-lg);
  height: var(--size-control-lg);
  margin-block-end: var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--gradient-primary-vertical);
  color: rgb(var(--color-gray-900));
  font-weight: var(--font-weight-bold);
  content: counter(service-step);
}

/* 요금 원칙: 어두운 면 위에서 글은 gray-100, 보조 글은 gray-400을 쓴다. */
.service-pricing {
  display: grid;
  justify-items: start;
  gap: var(--space-2xl);
  padding: var(--space-2xl);
  border-radius: var(--radius-squircle-lg);
  background: rgb(var(--color-gray-900));
  color: rgb(var(--color-gray-100));
}

.service-pricing :is(.page-eyebrow, .service-lede, .service-point p) {
  color: rgb(var(--color-gray-400));
}

.service-points {
  display: grid;
  justify-self: stretch;
  gap: var(--space-2xl);
}

.service-point {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

/* 마무리 안내: primary 면 가운데에 제목·설명·버튼을 세운다. */
.service-cta {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  padding: var(--space-3xl) var(--space-2xl);
  border-radius: var(--radius-squircle-lg);
  text-align: center;
}

.service-cta .service-actions {
  justify-content: center;
  margin-block-start: var(--space-md);
}

/* 휴대폰에서는 두 버튼이 한 줄에 들어가지 않으므로 각 버튼이 줄 폭을 채워 같은 폭으로 쌓인다. */
@media (max-width: 39.99rem) {
  .service-actions .button {
    flex-grow: 1;
  }
}

@media (min-width: 40rem) {
  .service-heading .service-hero-title {
    font-size: var(--font-size-2xl);
    line-height: var(--font-line-height-2xl);
  }

  .service-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  :is(.service-heading, .service-cta) h2 {
    font-size: var(--font-size-xl);
    line-height: var(--font-line-height-xl);
  }

  .service-hero .service-lede {
    font-size: var(--font-size-lg);
    line-height: var(--font-line-height-lg);
  }
}

@media (min-width: 64rem) {
  .service-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xl);
    padding-block: var(--space-3xl);
  }

  .service-steps,
  .service-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-pricing {
    padding: var(--space-3xl);
  }

  /* 자주 묻는 질문은 머리를 왼쪽 1/3, 질문 목록을 오른쪽 2/3에 둔다. */
  .service-faq {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }
}

@media (min-width: 90rem) {
  .service-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}