/* 단독 시술 — 로드맵과 별도로 받는 시술 목록.
   내용 분량이 적어 카드 대신 항목별 정의 목록으로 둔다. */

.sc-section {
  --sc-ink: var(--ink-900, #241b1b);
  --sc-muted: var(--ink-600, #67595a);
  --sc-accent: var(--key-700, #7b2d44);
  --sc-line: rgba(36, 27, 27, 0.14);
}

.sc-list {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-14));
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}

.sc-item {
  border-top: 1px solid var(--sc-line);
  padding-top: clamp(var(--space-5), 2.5vw, var(--space-8));
}

.sc-section h3 {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 var(--space-3);
}

.sc-section p.sc-lead {
  color: var(--sc-muted);
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 clamp(var(--space-5), 2.5vw, var(--space-7));
  max-width: 34rem;
}

.sc-rows {
  margin: 0;
  padding: 0;
}

.sc-rows > div {
  border-top: 1px solid var(--sc-line);
  display: grid;
  gap: 2px clamp(var(--space-4), 2.5vw, var(--space-8));
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-4) 0;
}

.sc-rows > div:last-child {
  border-bottom: 1px solid var(--sc-line);
}

.sc-rows dt {
  color: var(--sc-accent);
  font-size: 0.9375rem;
}

.sc-rows dd {
  color: var(--sc-muted);
  font-size: 0.9375rem;
  line-height: 1.75;
  margin: 0;
}

/* 남녀 부위를 한 줄에 이어 붙이면 어디까지가 어느 쪽인지 흐려진다 */
.sc-part {
  display: block;
}

.sc-part + .sc-part {
  margin-top: 0.35rem;
}

.sc-part b {
  color: var(--sc-ink);
  font-weight: 500;
  margin-right: 0.5em;
}

/* 진료가 필요하다는 안내 — 본문과 같은 무게로 두면 지나친다 */
.sc-section p.sc-caution {
  border-left: 2px solid var(--sc-accent);
  color: var(--sc-ink);
  font-size: 0.9375rem;
  line-height: 1.8;
  margin: clamp(var(--space-5), 2.5vw, var(--space-7)) 0 0;
  max-width: 34rem;
  padding-left: var(--space-4);
}

.sc-section p.sc-disclaimer {
  color: var(--sc-muted);
  font-size: 0.875rem;
  line-height: 1.8;
  margin: clamp(var(--space-8), 4vw, var(--space-12)) 0 0;
  max-width: 40rem;
}

@media (min-width: 48rem) {
  .sc-rows > div {
    grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .sc-list {
    column-gap: clamp(var(--space-10), 5vw, var(--space-16));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 시술 전후 주의사항 — 접어 두되 있다는 건 보이게 한다.
   펼쳐 두면 제모 항목만 두 배로 길어져 나머지 셋이 빈칸을 끌고 다닌다. */

.sc-notes {
  border-top: 1px solid var(--sc-line);
  margin-top: clamp(var(--space-5), 2.5vw, var(--space-7));
}

.sc-notes > summary {
  align-items: center;
  color: var(--sc-accent);
  cursor: pointer;
  display: flex;
  font-size: 0.9375rem;
  gap: 0.5rem;
  list-style: none;
  min-height: 2.75rem;
  padding: var(--space-3) 0;
}

.sc-notes > summary::-webkit-details-marker { display: none; }

.sc-notes > summary::after {
  content: "＋";
  font-size: 0.9375rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.sc-notes[open] > summary::after {
  content: "－";
}

.sc-notes > summary:hover,
.sc-notes > summary:focus-visible {
  color: var(--sc-ink);
}

.sc-notes__body {
  padding-bottom: var(--space-5);
}

.sc-section .sc-notes__body h4 {
  color: var(--sc-ink);
  font-family: var(--font-body, inherit);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 var(--space-2);
}

.sc-section .sc-notes__body h4:first-child { margin-top: 0; }

.sc-notes__body ul {
  color: var(--sc-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-notes__body li {
  padding-left: var(--space-4);
  position: relative;
}

.sc-notes__body li + li { margin-top: 0.4rem; }

.sc-notes__body li::before {
  color: var(--sc-accent);
  content: "·";
  left: 0.35rem;
  position: absolute;
}

@media (prefers-reduced-motion: reduce) {
  .sc-notes > summary::after { transition: none; }
}

/* ----------------------------------------------------------------
   사용 장비 — 목적별 케어에서 쓰는 장비를 사진과 함께 보여준다.
   가로 레일은 화살표 스크립트가 이 페이지에 없으므로 쓰지 않고,
   좁은 화면 2열 · 넓은 화면 4열 그리드로 둔다.
   ---------------------------------------------------------------- */

.sc-devices__grid {
  display: grid;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: clamp(var(--space-8), 4vw, var(--space-12)) 0 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .sc-devices__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .sc-devices__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 글칸에 max-content 를 최소로 박아 사진칸이 커져도 글이 눌리지 않게 한다.
   시술 상세의 장비 카드에서 글자가 잘렸던 것과 같은 함정이다. */
.sc-device {
  background: var(--sage-50, #f2f3ed);
  border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
  display: grid;
  grid-template-rows: minmax(0, auto) minmax(max-content, 1fr);
  overflow: hidden;
}

.sc-device__image {
  /* 장비 사진 배경이 순백이라 칸도 흰색이어야 사진 테두리가 도드라지지 않는다.
     원본이 정사각이고 세로로 긴 장비가 많아 칸도 정사각으로 둔다. 낮은 칸에
     넣으면 사진이 칸 높이에 맞춰 작아지고 좌우 여백만 넓어진다. */
  aspect-ratio: 1;
  background: #fff;
  min-height: 0;
  padding: var(--space-3);
}

.sc-device__image img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.sc-device__copy {
  padding: var(--space-4);
}

.sc-section .sc-device__copy h3 {
  font-size: clamp(1rem, 2.6vw, 1.125rem);
  margin: 0 0 var(--space-2);
}

.sc-device__copy p {
  color: var(--sc-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

.sc-device__uses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-device__uses li {
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  color: var(--sc-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  padding: 0.25rem 0.625rem;
}