/* ══════════════════════════════════════════════════════════════════════════
   p-skin-regeneration.css — 시그니처 진피 재생술 페이지 전용 (접두사 sr-)
   site.css 뒤에 링크한다. site.css 는 손대지 않는다(전 페이지 공유).
   여기서 새 색·새 radius·새 타이포 스케일을 만들지 않는다 — 토큰만 쓴다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 02 스펙 스트립 — 이 페이지는 4칸이다(site.css 기본은 3칸) ──────────────
   시술 시간 · 마취 · 일상생활 · 권장 회차. 3칸 그리드에 4개를 넣으면
   마지막 한 칸이 혼자 다음 줄로 떨어진다. 560 에서 2×2, 1000 에서 4×1 로 간다.
   테두리는 site.css 가 3칸 기준으로 깔아 둔 것을 칸 수에 맞게 다시 잡는다. */
@media (min-width:560px){
  .sr-spec .spec__list{grid-template-columns:1fr 1fr}
  .sr-spec .spec__list li{
    border-right:1px solid var(--line-s);
    border-bottom:1px solid var(--line-s);
  }
  .sr-spec .spec__list li:nth-child(2n){border-right:0}
  .sr-spec .spec__list li:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:1000px){
  .sr-spec .spec__list{grid-template-columns:repeat(4,1fr)}
  .sr-spec .spec__list li{border-bottom:0; border-right:1px solid var(--line-s)}
  .sr-spec .spec__list li:last-child{border-right:0}
}

/* ── 04 진피 단면 개념도 ──────────────────────────────────────────────────
   도해가 글에 없는 것을 하나 나른다: 층의 순서(위 표피 → 진피 → 피하지방층)와
   주입 지점이 진피층 '안'이라는 깊이. 층 사각형·라벨·핀은 site.css 의
   .ly1~5 / .lyt / .pin / .pint 를 그대로 쓴다(SVG 라벨 두 벌 크기까지 상속).
   여기서는 폭 상한만 잡는다 — 상한이 없으면 1440 에서 라벨이 30px 로 커진다. */
.sr-cross{
  max-width:560px; margin:clamp(1.9rem, 1.2rem + 2.6vw, 3rem) auto 0;
  /* 이 섹션은 .sec--soft(#F8F5F1) 바탕이다 — 표피층 색(#FBF7F3)이 바탕과 거의 같아
     맨 위 층이 사라져 보였다. 도해 전체를 흰 판 위에 올려 층 세 개가 다 읽히게 한다. */
  background:#fff; padding-bottom:.5rem;
}

/* 이 페이지에서 유일하게 움직이는 것 — 콜라겐이 진피층에 자리 잡는 흐름.
   재료가 빠지면 SVG 안 .sr-col 그룹만 지우면 도해는 그대로 남는다. */
.sr-c{fill:var(--accent); opacity:0; animation:sr-settle 11s ease-in-out infinite}
.sr-c2{animation-delay:.5s}
.sr-c3{animation-delay:1s}
.sr-c4{animation-delay:1.5s}
.sr-c5{animation-delay:2s}
.sr-net{
  fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:280; stroke-dashoffset:280;
  animation:sr-weave 11s ease-in-out infinite;
}
@keyframes sr-settle{
  0%, 6%{opacity:0}
  20%{opacity:.95}
  76%{opacity:.95}
  92%, 100%{opacity:0}
}
@keyframes sr-weave{
  0%, 22%{stroke-dashoffset:280}
  56%, 76%{stroke-dashoffset:0}
  94%, 100%{stroke-dashoffset:280}
}
@media (prefers-reduced-motion:reduce){
  .sr-c{animation:none; opacity:.95}
  .sr-net{animation:none; stroke-dashoffset:0}
}

/* 원리 3항목 — 도해 아래에 붙는 번호 행. 모바일에서도 번호가 남는다. */
.sr-prin{display:grid; gap:1rem; margin-top:clamp(1.9rem, 1.2rem + 2.6vw, 3rem)}
@media (min-width:820px){.sr-prin{grid-template-columns:repeat(3,1fr); gap:1.5rem}}
.sr-prin li{
  padding:1.25rem 1.3rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-card);
}
.sr-prin__n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:26px; margin-bottom:.75rem;
  font-family:var(--serif); font-size:var(--f-sub); font-weight:700;
  color:var(--accent); letter-spacing:.08em;
  border:1px solid var(--line); border-radius:var(--r-pill);
}
.sr-prin b{display:block; color:var(--ink); font-size:var(--f-h3); line-height:1.45}
.sr-prin__d{display:block; margin-top:.4rem; font-size:var(--f-sub); color:var(--muted); line-height:1.7}

/* ── 05 권장 주기 타임라인 ────────────────────────────────────────────────
   이산적인 3회차 + 그 사이의 간격이라 타임라인. 간격 배지의 값(1개월)은
   수확 사실이다 — 없는 간격을 만들지 않는다. */
/* 회차 사이의 「간격」이라 점선이 맞다. 구간을 끊어 그려 원·알약을 관통하지 않는다. */

/* SVG 안 글자는 viewBox 스케일을 탄다 — 화면 px 로 환산해 폭마다 두 벌로 잡는다.
   viewBox 480 · 375 에서 렌더 폭 339 → 스케일 .706 (아래 값 × .706 이 실제 px). */
@media (min-width:760px){
  /* 폭 상한 640 · 스케일 1.333 */
}

/* ── 06 스킨부스터 — 병렬 항목 6개라 아이콘 카드 ───────────────────────── */
.sr-boost{display:grid; gap:1rem; margin-top:clamp(1.9rem, 1.2rem + 2.6vw, 3rem)}
@media (min-width:600px){.sr-boost{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.sr-boost{grid-template-columns:repeat(3,1fr); gap:1.25rem}}
.sr-boost li{
  position:relative; padding:1.35rem 1.3rem;
  background:var(--soft); border:1px solid var(--line); border-radius:var(--r-card);
}
.sr-boost__n{
  position:absolute; top:1.35rem; right:1.3rem;
  font-family:var(--serif); font-size:var(--f-sub); font-weight:700;
  color:var(--accent); letter-spacing:.08em;
}
.sr-boost b{display:block; margin-top:.75rem; color:var(--ink); font-size:var(--f-h3); line-height:1.4}
.sr-boost__c{
  display:block; margin-top:.4rem; padding-bottom:.7rem;
  font-size:var(--f-cap); color:var(--brand); font-weight:600; line-height:1.55;
  border-bottom:1px solid var(--line);
}
.sr-boost__d{display:block; margin-top:.7rem; font-size:var(--f-sub); color:var(--muted); line-height:1.7}

/* ── 07 기대 변화 — 대표 이미지 하나만 크게, 나머지 넷은 아이콘 카드 ───── */
.sr-eff{display:grid; gap:clamp(1.5rem, 1rem + 2vw, 2.5rem); margin-top:clamp(1.9rem, 1.2rem + 2.6vw, 3rem)}
@media (min-width:900px){.sr-eff{grid-template-columns:.9fr 1.1fr; align-items:start}}
.sr-eff__lead{margin:0}
.sr-eff__lead img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 32%;
  border-radius:var(--r-card);
}
.sr-eff__grid{display:grid; gap:.75rem}
@media (min-width:520px){.sr-eff__grid{grid-template-columns:1fr 1fr}}
.sr-eff__grid li{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.15rem 1.05rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-card);
}
.sr-eff__grid b{margin-top:.2rem; color:var(--ink); font-size:var(--f-body); line-height:1.45}
.sr-eff__grid span{font-size:var(--f-cap); color:var(--muted); line-height:1.65}

/* ── 10 나가는 길 — .lock / .links / .chips 는 site.css 를 쓴다. 두 가지만 잡는다 ── */
/* site.css 의 .lock 은 760 이상에서 아이콘·글·버튼 3열이 된다. 이 페이지에서는 2단 그리드의
   좁은 칸(1280 에서 505px) 안에 들어가 가운데 글 칸이 179px 까지 줄어 제목이 세 줄로 꺾였다.
   이 자리에서는 폭에 상관없이 세로로 쌓는다. */
.sr-lock{grid-template-columns:1fr}
.sr-out{margin-top:1rem}

/* ── 검수 배지 자리 ────────────────────────────────────────────────────────
   히어로 이미지 요청 배지를 흐름 안에 두기 위한 빈 자리다(.hero__bg 는 absolute 라
   거기에 달면 배지가 스펙 스트립 위에 겹친다). 배지가 꺼지면 높이 0 이라 흔적이 없다. */
.sr-req{margin:0}
body.no-review .sr-req{display:none}

/* 원리 섹션의 설명 영상 — 도해(정확한 층)와 함께 「무엇이 어떻게 변하나」를 보여준다. */
.sr-vid{margin:clamp(1.6rem,1rem + 2vw,2.4rem) 0 0}
.sr-vid__box{position:relative; aspect-ratio:16/9; border-radius:var(--r-card); overflow:hidden;
  background:var(--sand) url("../img/../video/dermis-absorb-motion.jpg") center/cover no-repeat}
.sr-vid__v{width:100%; height:100%; object-fit:cover; display:block}
.sr-vid .cap{margin-top:.8rem}
@media (prefers-reduced-motion:reduce){
  .sr-vid__v{display:none}
  .sr-vid__box{background:var(--sand) center/cover no-repeat}
}

/* 원리 섹션의 설명 영상 — 정확한 층은 도해가, 「무엇이 어떻게 변하나」는 영상이 맡는다. */
.sr-vid{margin:clamp(1.6rem,1rem + 2vw,2.4rem) 0 0}
.sr-vid__box{position:relative; aspect-ratio:16/9; border-radius:var(--r-card); overflow:hidden;
  background:var(--sand) url("../img/../video/dermis-absorb-motion.jpg") center/cover no-repeat}
.sr-vid__v{width:100%; height:100%; object-fit:cover; display:block}
.sr-vid .cap{margin-top:.8rem}
@media (prefers-reduced-motion:reduce){ .sr-vid__v{display:none} }


/* ── 05 권장 주기 — 회차를 「카드」로 세운다 ──
   예전에는 원 세 개짜리 SVG 였는데, 회차마다 무엇을 하는지가 없어 자리만 차지했다(지적).
   각 회차가 한 줄씩 내용을 들고 있어야 그림이 글을 대신한다. */
.sr-cyc{
  display:grid; gap:.75rem; margin-top:clamp(1.9rem,1.2rem + 2.6vw,3rem);
  list-style:none; padding:0;
}
@media (min-width:820px){
  .sr-cyc{grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:0}
}
.sr-cyc__i{
  position:relative; display:flex; flex-direction:column;
  padding:1.25rem 1.3rem 1.4rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
}
.sr-cyc__i--last{background:var(--soft); border-color:var(--accent)}
.sr-cyc__n{
  font-family:var(--serif); font-size:var(--f-h2); font-weight:700; line-height:1;
  color:var(--accent); letter-spacing:.02em;
}
.sr-cyc__i--last .sr-cyc__n{color:var(--brand)}
.sr-cyc__t{margin-top:.55rem; color:var(--ink); font-size:var(--f-body); font-weight:700; line-height:1.4}
.sr-cyc__d{margin-top:.4rem; font-size:var(--f-cap); color:var(--muted); line-height:1.7}

/* 사이의 「+1개월」 — 데스크톱은 카드 사이 기둥, 모바일은 가운데 한 줄 */
.sr-cyc__gap{display:flex; align-items:center; justify-content:center; padding:.15rem 0}
.sr-cyc__gap span{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.28em .85em; border-radius:var(--r-pill);
  background:var(--accent-w); color:var(--brand-d);
  font-size:var(--f-cap); font-weight:700; white-space:nowrap;
}
@media (min-width:820px){
  .sr-cyc__gap{position:relative; padding-inline:.9rem}
  /* 카드와 카드를 잇는 점선 — 알약 뒤를 지나가지 않게 좌우로 나눠 그린다 */
  .sr-cyc__gap::before, .sr-cyc__gap::after{
    content:""; position:absolute; top:50%; width:.9rem; height:0;
    border-top:1.5px dotted var(--line);
  }
  .sr-cyc__gap::before{left:0} .sr-cyc__gap::after{right:0}
}