@charset "utf-8";
/* ==========================================================================
   시술 카드 — 병원 브로슈어(CLINIC GUIDE, 2026-10-13 전달 PDF) 한 칸을 그대로 옮긴 것.
   상세페이지 16개 공통: .pdet 오른쪽 맨 위(사진 옆)에 둔다.
   분류 → 영문 이름 + 한글 이름 → 기술 → 주황 효과 문구 → 효과 발현 · 유지 기간 · 차별점 표.
   공통 style.css 는 건드리지 않음. 고치면 페이지의 ?v= 를 올릴 것.
   ========================================================================== */
.gc{padding-top:26px;border-top:2px solid var(--ink);margin-bottom:clamp(44px,5vw,64px)}
.gc__cat{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.gc__cat span{margin-left:8px;font-weight:500;letter-spacing:-.01em}
.gc__name{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  font-size:clamp(30px,3.3vw,44px);font-weight:800;line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.gc__name small{font-size:clamp(14px,1.2vw,16px);font-weight:700;letter-spacing:-.03em}
.gc__tech{margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted);letter-spacing:-.01em}
.gc__fx{margin-top:24px;display:grid;gap:10px}
.gc__fx p{position:relative;padding-left:17px;font-size:clamp(19px,1.75vw,23px);font-weight:700;line-height:1.35;
  letter-spacing:-.04em;color:var(--orange-ink)}
.gc__fx p::before{content:'';position:absolute;left:0;top:.16em;bottom:.16em;width:3px;background:var(--orange)}
.gc__fx p small{font-size:.62em;font-weight:600;letter-spacing:0}
.gc__fx b{margin-right:10px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ink);vertical-align:.25em}
.gc__tbl{margin-top:24px;border-top:1px solid #D9D2C4}
.gc__tbl div{display:grid;grid-template-columns:auto 1fr;align-items:center;padding:16px 0;border-bottom:1px solid #D9D2C4}
.gc__tbl dt{width:calc(3.7em + 36px);white-space:nowrap;padding:2px 22px 2px 14px;border-right:1px solid #CFC8BA;font-size:14.5px;font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);text-align:justify;text-align-last:justify}   /* "차 별 점"을 "효과 발현" 폭(3.62em)에 맞춰 벌림 — PDF와 같게 */
.gc__tbl dd{margin:0;padding-left:20px;font-size:15.5px;line-height:1.55;letter-spacing:-.02em;color:var(--ink-2)}
@media (max-width:480px){
  .gc__tbl dt{width:calc(3.7em + 20px);padding-left:4px;padding-right:16px;font-size:14px}
  .gc__tbl dd{padding-left:14px;font-size:14.5px}
}
/* 한 페이지에 카드가 둘일 때(보톡스 → 스킨보톡스) 두 번째 묶음 */
.gc-more{margin-top:clamp(72px,9vw,128px)}

/* ---------- 2026-10-19 디자인 시안(05.pc_서브2 리쥬란) 반영 ----------
   위 줄 없앰 · 분류 초록 · 효과 문구 검정 · 표는 회색 이름칸 + 흰 내용칸 · 권합니다 목록은 흰 칸 + 주황 체크 */
.gc{padding-top:0;border-top:0}
.gc__cat{font-size:14px;letter-spacing:.12em;line-height:1.7;color:var(--green-800)}
.gc__cat span{margin-left:12px;font-weight:400;letter-spacing:-.025em;color:var(--ink)}
.gc__name{margin-top:8px;font-size:clamp(30px,3vw,40px);font-weight:700;line-height:1.3}
.gc__name small{font-size:16px}
.gc__tech{margin-top:4px;font-size:14px;line-height:1.7;letter-spacing:-.025em;color:var(--ink)}
.gc__fx{margin-top:40px}
.gc__fx p{padding-left:0;font-size:clamp(19px,1.6vw,22px);font-weight:500;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}
.gc__fx p::before{display:none}
.gc__tbl{margin-top:20px;border-top:0;background:#fff}
.gc__tbl div{grid-template-columns:150px 1fr;align-items:stretch;padding:0;border-bottom:1px solid var(--line)}
.gc__tbl div:last-child{border-bottom:0}
.gc__tbl dt{width:auto;display:flex;align-items:center;justify-content:center;padding:12px 10px;border-right:0;background:#EDECEA;
  font-size:14px;line-height:1.7;letter-spacing:-.025em;text-align:center;text-align-last:auto}
.gc__tbl dd{display:flex;align-items:center;padding:12px 20px 12px 30px;font-size:14px;line-height:1.7;letter-spacing:-.025em;color:var(--ink)}
@media (max-width:480px){
  .gc__tbl div{grid-template-columns:96px 1fr}
  .gc__tbl dt{width:auto;padding:12px 6px;font-size:13px}
  .gc__tbl dd{padding:12px 14px 12px 16px;font-size:13.5px}
}
.pdet__img{border:0;border-radius:5px}
.pdet .h-sub{font-size:clamp(19px,1.6vw,22px);font-weight:500;letter-spacing:-.025em}
.pdet .h-sub:not(:first-child){margin-top:60px}
.pdet .h-sub+.lead{margin-top:24px;font-size:16px;line-height:1.7;color:var(--ink)}
.pdet .pd__list{margin-top:24px;gap:8px}
.pdet .pd__list li{display:flex;align-items:center;gap:20px;min-height:60px;padding:14px 20px;border-radius:5px;background:#fff;
  font-size:14px;line-height:1.7;letter-spacing:-.025em;color:var(--ink)}
.pdet .pd__list li::before{position:static;flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6'/%3E%3C/svg%3E") center/12px no-repeat}
.pdet .pm__note{margin-top:16px;font-size:14px;line-height:1.7;color:rgba(34,34,34,.5)}
@media (max-width:600px){.pdet .pd__list li{gap:14px;padding:12px 16px;font-size:13.5px}}

/* ---------- 2026-10-20 상세 시안 섹션 — 병원이 보낸 상세 이미지(노바스템 · NAD+ · 바디 스컬트라) 디자인 그대로 ----------
   흰 바탕 · 빨강 영문 소제목 · 굵은 검정 제목 · 검정 꼬리표 · 2px 검정 테두리 상자 · 회색(#F6F6F4) 단계 카드 · 3px 검정 윗줄 표.
   시안 이미지 폭(1080, 본문 952)이 이 블록의 본문 폭(약 980)과 같아 글자 크기를 시안 그대로 옮김.
   같은 날 사용자 "테두리선을 홈페이지 색과 동일하게 · 문구도" → 테두리 · 굵은 윗줄 · 강조 문구(시안의 빨강 · 자주)를 홈페이지 진초록(--green-800)으로, 옅은 구분선은 --line */
.rf{--rf-pt:var(--green-800);--rf-bd:var(--green-800);--rf-ink:#111;--rf-txt:#383838;--rf-sub:#8B8B8B;--rf-line:var(--line);--rf-card:#F6F6F4;
  background:#fff;padding-block:clamp(64px,8vw,112px)}
.rf+.rf{padding-top:0}
.rf .wrap{max-width:1100px}
.rf__eb{display:block;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:.16em;color:var(--rf-pt)}
.rf__h{margin-top:14px;font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.36;letter-spacing:-.04em;color:var(--rf-ink)}
.rf__p{max-width:800px;margin-top:clamp(24px,3vw,34px);font-size:clamp(16px,1.9vw,21px);line-height:1.85;letter-spacing:-.025em;color:var(--rf-txt)}
.rf__p b{font-weight:700;color:var(--rf-ink)}
.rf__body{margin-top:clamp(36px,5vw,58px)}
/* 단계 카드 */
.rf-step{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:14px}
.rf-step li{position:relative;display:flex;flex-direction:column;align-items:center;padding:34px 14px 32px;border-radius:6px;background:var(--rf-card);text-align:center}
.rf-step li:not(:last-child)::after{content:'';position:absolute;z-index:1;right:-12px;top:50%;width:9px;height:9px;
  border-top:2.5px solid var(--rf-ink);border-right:2.5px solid var(--rf-ink);transform:translateY(-50%) rotate(45deg)}
.rf-step__no{font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--rf-sub)}
.rf-step svg{display:block;width:clamp(84px,11vw,132px);height:auto;margin:20px 0}
.rf-step h3{font-size:clamp(19px,2vw,23px);font-weight:800;letter-spacing:-.035em;color:var(--rf-ink)}
.rf-step p{margin-top:8px;font-size:clamp(14.5px,1.6vw,17px);line-height:1.6;letter-spacing:-.025em;color:#555}
@media (max-width:860px){.rf-step{grid-template-columns:repeat(2,1fr)}.rf-step li::after{display:none}
  .rf-step li:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}}
/* 검정 꼬리표 + 2px 검정 테두리 상자 */
.rf-tag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.rf-tag b{padding:7px 13px 6px;background:var(--rf-ink);color:#fff;font-size:clamp(14px,1.6vw,17px);font-weight:800;line-height:1.25;letter-spacing:.14em}
.rf-tag span{font-size:clamp(12.5px,1.4vw,15px);font-weight:500;letter-spacing:.16em;color:var(--rf-sub)}
.rf-box{padding:clamp(24px,4vw,42px);border:2px solid var(--rf-bd);background:#fff}
.rf-box h3{margin-top:clamp(16px,2vw,22px);font-size:clamp(23px,2.9vw,32px);font-weight:800;line-height:1.3;letter-spacing:-.04em;color:var(--rf-ink)}
/* 프로그램 */
.rf-prog{display:grid;gap:clamp(16px,2.6vw,27px)}
.rf-prog dl{margin-top:clamp(16px,2vw,22px);display:grid;gap:clamp(10px,1.4vw,16px)}
.rf-prog dl div{display:grid;grid-template-columns:clamp(96px,14vw,150px) 1fr;gap:10px}
.rf-prog dt{font-size:clamp(14.5px,1.6vw,17px);font-weight:700;line-height:1.75;color:var(--rf-pt)}
.rf-prog dd{margin:0;font-size:clamp(15px,1.75vw,19px);line-height:1.7;letter-spacing:-.025em;color:var(--rf-txt)}
.rf-prog dd li{position:relative;padding-left:.8em}
.rf-prog dd li::before{content:'•';position:absolute;left:0}
@media (max-width:600px){.rf-prog dl div{grid-template-columns:1fr;gap:0}}
/* 적용 부위 2 × 2 */
.rf-area{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,20px)}
.rf-area p{margin-top:12px;font-size:clamp(15px,1.75vw,19px);line-height:1.6;letter-spacing:-.025em;color:#555}
@media (max-width:640px){.rf-area{grid-template-columns:1fr}}
/* 설계 3칸 — WHERE · HOW · WITH */
.rf-des{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--rf-bd)}
.rf-des>div{padding:clamp(30px,6vw,64px) clamp(14px,2.6vw,30px) 0 0}
.rf-des>div+div{padding-left:clamp(14px,2.4vw,24px);border-left:1px solid var(--rf-line)}
.rf-des b{display:block;font-size:clamp(34px,5.6vw,60px);font-weight:900;line-height:1;letter-spacing:-.05em;color:var(--rf-ink)}
.rf-des h3{margin-top:clamp(18px,2.4vw,28px);font-size:clamp(18px,2vw,22px);font-weight:800;letter-spacing:-.03em;color:var(--rf-ink)}
.rf-des p{margin-top:10px;font-size:clamp(15px,1.75vw,19px);line-height:1.6;letter-spacing:-.025em;color:#555}
@media (max-width:768px){.rf-des{grid-template-columns:1fr}.rf-des>div,.rf-des>div+div{padding:28px 0;border-left:0}.rf-des>div+div{border-top:1px solid var(--rf-line)}}
/* 시술 안내 표 */
.rf-info{border-top:3px solid var(--rf-bd)}
.rf-info div{display:grid;grid-template-columns:clamp(96px,20vw,210px) 1fr;align-items:center;min-height:clamp(64px,7.6vw,82px);padding:14px 0;border-bottom:1px solid var(--rf-line)}
.rf-info dt{font-size:clamp(16px,1.95vw,21px);font-weight:800;letter-spacing:-.03em;color:var(--rf-ink)}
.rf-info dd{margin:0;font-size:clamp(15px,1.9vw,20px);line-height:1.6;letter-spacing:-.025em;color:var(--rf-txt)}
/* 개념 그래프 */
.rf-chart{padding:clamp(22px,3.8vw,40px);border:2px solid var(--rf-bd);background:#fff}
.rf-chart h3{font-size:clamp(18px,2vw,22px);font-weight:800;letter-spacing:-.035em;color:var(--rf-ink)}
.rf-chart small{display:block;margin-top:6px;font-size:clamp(13px,1.4vw,15px);color:#9A9A9A}
.rf-chart svg{display:block;width:100%;height:auto;margin-top:clamp(12px,2vw,22px);font-family:var(--ff-kr)}
/* 역할 카드 + FOR YOU */
.rf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rf-cards article{padding:clamp(24px,3vw,32px) clamp(22px,2.6vw,28px);border-radius:6px;background:var(--rf-card)}
.rf-cards b{display:block;font-size:clamp(26px,3vw,32px);font-weight:900;letter-spacing:-.045em;color:var(--rf-ink)}
.rf-cards h3{margin-top:14px;font-size:clamp(18px,2vw,21px);font-weight:800;letter-spacing:-.03em;color:var(--rf-ink)}
.rf-cards p{margin-top:8px;font-size:clamp(15px,1.7vw,18px);line-height:1.6;letter-spacing:-.025em;color:#555}
@media (max-width:860px){.rf-cards{grid-template-columns:1fr}}
.rf-for{margin-top:clamp(56px,8vw,80px);padding-top:clamp(26px,3vw,32px);border-top:3px solid var(--rf-bd)}
.rf-for ol{margin-top:clamp(10px,1.4vw,16px)}
.rf-for li{display:flex;align-items:center;gap:clamp(14px,2.6vw,30px);min-height:clamp(64px,8vw,88px);padding:12px 0;border-bottom:1px solid var(--rf-line);
  font-size:clamp(16px,2.1vw,23px);font-weight:800;line-height:1.45;letter-spacing:-.035em;color:var(--rf-ink)}
.rf-for li span{flex-shrink:0;min-width:34px;padding:3px 6px;background:var(--rf-ink);color:#fff;font-size:clamp(13px,1.5vw,16px);font-weight:700;text-align:center;letter-spacing:.02em}
.rf{word-break:keep-all}
.rf-chart__m{display:none!important}
@media (max-width:600px){.rf-chart__d{display:none!important}.rf-chart__m{display:block!important}}
/* 다국어: 좁은 단계 카드에서 긴 낱말(러시아어 등)이 칸을 밀어내지 않게 */
.rf-step li,.rf-cards article,.rf-box{min-width:0}
html:not([lang="ko"]) .rf-step :is(h3,p),html:not([lang="ko"]) .rf-box h3{overflow-wrap:anywhere;hyphens:auto}

/* 2026-10-20 바디 스컬트라 AREAS — 병원 부위 그림(팔뚝 · 복부 · 옆구리 · 힙) 3칸, 이름은 그림 아래 가운데(번역되도록 HTML 글자) */
.rf-zone{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,22px)}
.rf-zone figure{min-width:0}
.rf-zone img{display:block;width:100%;height:auto;border-radius:clamp(6px,1vw,10px)}
.rf-zone figcaption{margin-top:clamp(12px,2vw,24px);text-align:center;font-size:clamp(16px,2.4vw,28px);font-weight:800;line-height:1.3;letter-spacing:-.04em;color:var(--rf-ink)}
/* 2026-10-20 단계 · 카드 칸 문구 높이 일자 — 번역 제목이 한 칸만 두 줄이 돼도 옆 칸 설명이 같은 높이에서 시작(subgrid, style.css 같은 날 블록과 같은 방식) */
@supports (grid-template-rows:subgrid){
  .rf-step{row-gap:0}
  .rf-step li{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-items:start}
  .rf-step svg{justify-self:center}
  @media (max-width:860px){.rf-step li:nth-child(n+3){margin-top:14px}}
  @media (min-width:861px){
    .rf-cards{row-gap:0}
    .rf-cards article{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  }
}
