/* 인포그래픽 면 셋째 묶음 (시안 v02, 2026-10-12). 틀은 src/scenes.mjs. info.css 뒤에 읽는다(면 뼈대 · 머리 글 · 딱지 · 자리표는 info.css 것을 그대로 쓴다).
   때마다의 모습을 그린 그림이 주인공이고, 때 · 이름 · 풀이는 글로 얹는다. 점과 선으로 된 눈금은 쓰지 않는다.
   - 가 벌(sc-card): 손그림 삽화를 미색 네모 칸에. 때는 칸 왼쪽 위의 쪽 색 딱지
   - 나 벌(sc-orb): 부드러운 입체 그림을 동그란 창에. 때는 큰 굵은 글
   모든 규칙은 .pz .ig-sc 안에만 걸린다. */
.pz .ig-sc .sc-lead { margin-top: 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pz .ig-sc .sc-lead b { font-size: 34px; font-weight: 800; line-height: 1.2; color: var(--c-main); }
.pz .ig-sc .sc-lead span { font-size: 16px; color: var(--ig-dim); }
.pz .ig-sc .sc-row + .sc-row { margin-top: 44px; }
.pz .ig-sc .ig-lane-h { margin-bottom: 16px; }
.pz .ig-sc .ig-lane-h b { font-size: 22px; }
.pz .ig-sc .sc-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pz .ig-sc .sc-when { display: inline-block; font-size: 17px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.pz .ig-sc .sc-name { display: block; font-size: 22px; font-weight: 800; line-height: 1.3; }
.pz .ig-sc .sc-txt p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--ig-dim); }
.pz .ig-sc .ig-tag { display: block; margin-top: 4px; font-size: 17px; }
.pz .ig-sc .sc-note { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--ig-dim); padding-left: 10px; border-left: 3px solid var(--c-main); }
.pz .ig-sc .sc-notes { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.pz .ig-sc .sc-notes li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--ig-dim); }
.pz .ig-sc .sc-notes b { color: var(--ig-text); font-weight: 800; margin-right: 4px; }
.pz .ig-sc .sc-loop { flex: none; width: 26px; height: 26px; color: var(--c-main); }
.pz .ig-sc .sc-thumbs { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pz .ig-sc .sc-thumbs figure { width: 64px; }
.pz .ig-sc .sc-thumbs img { display: block; width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 8px; padding: 5px; }
.pz .ig-sc .sc-thumbs figcaption { margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; }

/* ---------- 가 벌: 네모 칸 ---------- */
.pz .ig-sc .sc-card .sc-cells { display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: 20px; }
.pz .ig-sc .sc-card .sc-cell { position: relative; background: var(--ig-card); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.pz .ig-sc .sc-card .sc-pic { aspect-ratio: 4 / 3; padding: 30px 24px 6px; }
.pz .ig-sc .sc-card .sc-txt { padding: 12px 24px 26px; }
.pz .ig-sc .sc-card .sc-when { position: absolute; left: 0; top: 0; padding: 7px 16px 8px; background: var(--c-main); color: #fff; border-radius: 8px 0 8px 0; }
.pz .ig-sc .sc-card .sc-cell.maybe .sc-when { background: var(--ig-card); color: var(--c-dark); box-shadow: inset 0 0 0 2px var(--c-main); }
.pz .ig-sc .sc-card .sc-cell.last { background: var(--c-main); color: #fff; }
.pz .ig-sc .sc-card .sc-cell.last .sc-txt p { color: rgba(255, 255, 255, 0.86); }
.pz .ig-sc .sc-card .sc-cell.last .sc-pic { background: var(--ig-card); margin: 10px 10px 0; border-radius: 6px; padding: 20px 14px 6px; }
.pz .ig-sc .sc-card .sc-cell.last .sc-when { background: var(--c-dark); }
.pz .ig-sc .sc-card .ig-num { display: block; margin-bottom: 4px; }
/* 한 줄에 칸이 둘이면 그림을 옆으로 눕힌다 */
.pz .ig-sc .sc-card .sc-cells[style*="--k:2"] .sc-cell { flex-direction: row; align-items: center; }
.pz .ig-sc .sc-card .sc-cells[style*="--k:2"] .sc-pic { flex: 0 0 46%; aspect-ratio: 1; padding: 34px 8px 18px 24px; }
.pz .ig-sc .sc-card .sc-cells[style*="--k:2"] .sc-name { font-size: 26px; }
/* 작은 그림을 화살표로 이은 줄(세 고리) */
.pz .ig-sc .sc-band ol { display: inline-flex; align-items: center; gap: 4px 14px; background: var(--ig-card); border-radius: 8px; padding: 14px 26px 14px 14px; max-width: 100%; }
.pz .ig-sc .sc-band li { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.3; }
.pz .ig-sc .sc .sc-band .sc-pic { flex: none; width: 92px; height: 92px; aspect-ratio: 1; padding: 0; margin: 0; }
.pz .ig-sc .sc-band .sc-arrow { font-size: 22px; font-weight: 300; color: var(--c-main); }
.pz .ig-sc .sc-band + .sc-row { margin-top: 28px; }

/* ---------- 나 벌: 동그란 창 ---------- */
.pz .ig-sc .sc-orb .sc-pic { flex: none; border-radius: 50%; overflow: hidden; background: #eef2f5; box-shadow: 0 0 0 6px var(--ig-card), 0 0 0 8px var(--c-main); }
.pz .ig-sc .sc-orb .sc-pic img { object-fit: cover; }
.pz .ig-sc .sc-orb .sc-when { font-size: 30px; line-height: 1.2; color: var(--c-main); display: block; margin-bottom: 4px; }
.pz .ig-sc .sc-orb .sc-cell.maybe .sc-pic { box-shadow: 0 0 0 6px var(--ig-card), 0 0 0 8px color-mix(in srgb, var(--c-main) 40%, transparent); }
/* 세로로 내려가는 판(ig-b): 창과 글이 한 줄, 줄마다 계단처럼 조금씩 물러선다 */
.pz .ig-b .sc-orb .sc-cells { display: flex; flex-direction: column; gap: 30px; padding: 8px; }
.pz .ig-b .sc-orb .sc-cell { display: flex; align-items: center; gap: 30px; }
.pz .ig-b .sc-orb .sc-cell:nth-child(2n) { margin-left: 64px; }
.pz .ig-b .sc-orb .sc-pic { width: 164px; height: 164px; }
/* 갈래가 둘이면 넓은 화면에서 나란히 세운다 */
.pz .ig-b .sc-orb.sc-multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.pz .ig-b .sc-orb.sc-multi .sc-row + .sc-row { margin-top: 0; }
.pz .ig-b .sc-orb.sc-multi .sc-cell:nth-child(2n) { margin-left: 28px; }
.pz .ig-b .sc-orb.sc-multi .sc-cell { gap: 22px; }
.pz .ig-b .sc-orb.sc-multi .sc-pic { width: 140px; height: 140px; }
/* 가로로 늘어놓는 판(ig-a): 창 아래에 글 */
.pz .ig-a .sc-orb .sc-cells { display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: 28px; padding: 8px; }
.pz .ig-a .sc-orb .sc-pic { width: min(100%, 230px); aspect-ratio: 1; margin-bottom: 22px; }
.pz .ig-sc .sc-orb .sc-band ol { background: none; padding: 8px; gap: 6px 18px; }
.pz .ig-sc .sc.sc-orb .sc-band .sc-pic { width: 84px; height: 84px; box-shadow: 0 0 0 4px var(--ig-card), 0 0 0 5px var(--c-main); }

/* ---------- 짙은 바탕(안중 미백 클리닉의 짙은 벌): 쪽 색 바탕에 흰 칸 ---------- */
.pz .ig.ig-dark { background: linear-gradient(160deg, var(--c-main), var(--c-dark)); --ig-card: #fff; --ig-text: #fff; --ig-dim: rgba(255, 255, 255, 0.84); color: #fff; }
.pz .ig.ig-dark .ig-eyebrow { color: var(--c-soft); }
.pz .ig.ig-dark .ig-big { color: #fff; }
.pz .ig.ig-dark .ig-line { background: #fff; }
.pz .ig.ig-dark .ig-num, .pz .ig.ig-dark .sc-orb .sc-when { color: var(--c-soft); }
.pz .ig.ig-dark .sc-orb .sc-pic { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18), 0 0 0 8px #fff; }
.pz .ig.ig-dark .sc-thumbs figcaption { color: #fff; }

@media (max-width: 1023px) {
  .pz .ig-sc .sc-card .sc-cells[style*="--k:4"], .pz .ig-sc .sc-card .sc-cells[style*="--k:5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz .ig-b .sc-orb .sc-cell:nth-child(2n) { margin-left: 32px; }
  .pz .ig-b .sc-orb.sc-multi { display: block; }
  .pz .ig-b .sc-orb.sc-multi .sc-row + .sc-row { margin-top: 36px; }
}
@media (max-width: 767px) {
  .pz .ig-sc .sc-lead b { font-size: 28px; }
  .pz .ig-sc .sc-row + .sc-row { margin-top: 36px; }
  .pz .ig-sc .sc-name { font-size: 19px; }
  .pz .ig-sc .sc-txt p { font-size: 15px; }
  /* 가 벌: 칸마다 그림은 왼쪽, 글은 오른쪽 */
  .pz .ig-sc .sc-card .sc-cells, .pz .ig-sc .sc-card .sc-cells[style*="--k:4"], .pz .ig-sc .sc-card .sc-cells[style*="--k:5"] { grid-template-columns: 1fr; gap: 12px; }
  .pz .ig-sc .sc-card .sc-cell, .pz .ig-sc .sc-card .sc-cells[style*="--k:2"] .sc-cell { flex-direction: row; align-items: center; }
  .pz .ig-sc .sc-card .sc-pic, .pz .ig-sc .sc-card .sc-cells[style*="--k:2"] .sc-pic { flex: 0 0 128px; aspect-ratio: 1; padding: 34px 0 10px 14px; }
  .pz .ig-sc .sc-card .sc-cell.last .sc-pic { flex: 0 0 112px; margin: 36px 0 10px 10px; padding: 6px; }
  .pz .ig-sc .sc-card .sc-txt { padding: 40px 16px 16px 14px; }
  .pz .ig-sc .sc-card .sc-when { font-size: 15px; padding: 6px 14px 7px; }
  .pz .ig-sc .sc-card .sc-cells[style*="--k:2"] .sc-name { font-size: 21px; }
  .pz .ig-sc .sc-band ol { display: flex; flex-wrap: wrap; padding: 10px 14px 10px 10px; }
  .pz .ig-sc .sc-band li { font-size: 16px; }
  .pz .ig-sc .sc .sc-band .sc-pic { flex: none; width: 64px; height: 64px; padding: 0; }
  .pz .ig-sc .sc-band li { gap: 6px; }
  .pz .ig-sc .sc-band .sc-arrow { font-size: 18px; }
  /* 나 벌: 창은 왼쪽, 글은 오른쪽. 계단 물림은 걷는다 */
  .pz .ig-b .sc-orb .sc-cells, .pz .ig-a .sc-orb .sc-cells { display: flex; flex-direction: column; gap: 22px; padding: 8px; }
  .pz .ig-b .sc-orb .sc-cell, .pz .ig-a .sc-orb .sc-cell { display: flex; align-items: center; gap: 20px; margin-left: 0 !important; }
  .pz .ig-b .sc-orb .sc-pic, .pz .ig-a .sc-orb .sc-pic { width: 108px; height: 108px; margin-bottom: 0; }
  .pz .ig-sc .sc-orb .sc-when { font-size: 23px; }
  .pz .ig-sc .sc.sc-orb .sc-band .sc-pic { width: 58px; height: 58px; }
  /* 휴대폰: 작은 사진 넷을 두 장씩 두 줄로(넷째만 혼자 떨어지지 않게. 고침 37) */
  .pz .ig-sc .sc-thumbs { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 20px; }
  .pz .ig-sc .sc-thumbs figure { width: auto; min-width: 54px; display: flex; flex-direction: column; align-items: center; }
  .pz .ig-sc .sc-thumbs img { width: 54px; height: 54px; }
}

/* ---- 세 고리 줄 손봄(고침 37. 2026-10-13 원장 「위쪽 그림 3개는 겹치는 거 같아서 조정해줘」) ----
   작은 그림 셋이 어느 폭에서나 한 줄에 서고, 이름은 동그라미 곁이 아니라 아래에 선다. 화살표는 그림 사이 가운데 높이에 둔다(줄 끝에 혼자 남지 않는다). */
.pz .ig-sc .sc-band ol { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 0 clamp(6px, 1.6vw, 22px); width: 100%; max-width: 520px; padding: 6px 0 0; flex-wrap: nowrap; }
.pz .ig-sc .sc-band li { flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 17px; }
.pz .ig-sc .sc-band li b { word-break: keep-all; line-height: 1.35; }
.pz .ig-sc .sc.sc-orb .sc-band .sc-pic, .pz .ig-sc .sc .sc-band .sc-pic { width: clamp(64px, 20vw, 96px); height: clamp(64px, 20vw, 96px); }
.pz .ig-sc .sc-band .sc-arrow { align-self: start; height: clamp(64px, 20vw, 96px); justify-content: center; }
.pz .ig-sc .sc-orb .sc-band ol { padding: 8px 4px 0; gap: 0 clamp(6px, 1.6vw, 22px); }
@media (max-width: 767px) {
  .pz .ig-sc .sc-band ol { display: grid; padding: 8px 4px 0; }
  .pz .ig-sc .sc-band li { font-size: 15px; gap: 12px; }
}

/* ---- 칸이 여섯인 면(스팟 레이저의 생김새 여섯. 고침 37 검토 1바퀴): 한 줄에 여섯이 서면 좁은 화면에서 이름과 풀이가 잘린다. 넓은 화면은 석 칸 두 줄, 1023px 까지는 두 칸, 휴대폰은 한 칸 ---- */
.pz .ig-sc .sc-card .sc-cells[style*="--k:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pz .ig-sc .sc-card .sc-cells[style*="--k:6"] .sc-pic { aspect-ratio: 16 / 9; padding: 26px 24px 4px; }
@media (max-width: 1023px) { .pz .ig-sc .sc-card .sc-cells[style*="--k:6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .pz .ig-sc .sc-card .sc-cells[style*="--k:6"] { grid-template-columns: 1fr; }
  .pz .ig-sc .sc-card .sc-cells[style*="--k:6"] .sc-pic { aspect-ratio: 1; padding: 34px 0 10px 14px; }
}
/* 슈링크 유니버스 「시술 전에」의 그림 여섯(info.css 의 .ig-tiles 를 덮는다): 768 ~ 1279px 에서 석 칸. 띄어쓰기 없는 긴 이름(「필러·보톡스·실리프팅을」)이 여섯 칸에서는 옆 칸으로 넘친다 */
@media (min-width: 768px) and (max-width: 1279px) { .pz .ig-ask.ig-groups .ig-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }