@charset "UTF-8";
/* ==========================================================================
   블리비의원 안양점 — 시술 상세 페이지 showcase2 스타일 (시안 3 v2 본문 전용)
   - 본문 감싸개 .s2 아래로 모든 선택자와 토큰을 격리해 site/styles.css 와 충돌하지 않는다.
   - 헤더·GNB·드로어·플로팅 바·푸터 및 꺼 둔 칸(전후·이벤트·인증패·막대 차트)은 포함하지 않는다.
   - 외부 폰트·CDN 없이 사이트 기본 글꼴(var(--sans))을 사용한다.
   ========================================================================== */

/* 01. 디자인 토큰 (.s2 범위) */
.s2 {
  --primary: #6760C8;
  --primary-dark: #2A2470;
  --accent-blue: #2E9BD6;
  --logo-brown: #947D6B;

  --bg-white: #FFFFFF;
  --bg-lavender: #F6F5FF;
  --bg-lavender-2: #F3F1FF;
  --bg-gray: #F2F2F2;
  --bg-light: #FAFAFA;
  --bg-black: #000000;

  --text-main: #404040;
  --text-dark: #212121;
  --text-sub: #767676;

  --line: #EAEAEA;
  --line-dotted: #B8B3E8;

  --radius-card: 16px;
  --container: 1200px;

  --font-ko: var(--sans);
  --font-en: var(--sans);
  --font-contact: var(--sans);

  --gutter: 24px;
  --section-py: 120px;
  --fs-eyebrow: 18px;
  --fs-title: 36px;
  --fs-body: 16px;

  --ease-out: cubic-bezier(.22, .61, .36, 1);

  font-family: var(--font-ko);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-main);
  background: var(--bg-white);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 1024px) {
  .s2 {
    --fs-eyebrow: 16px;
    --fs-title: 32px;
    --fs-body: 15px;
    --section-py: 96px;
  }
}

@media (max-width: 768px) {
  .s2 {
    --gutter: 16px;
    --section-py: 64px;
    --fs-eyebrow: 14px;
    --fs-title: 25px;
    --fs-body: 15px;
  }
}

/* 02. 기본 리셋 (.s2 내부) */
.s2 *,
.s2 *::before,
.s2 *::after {
  box-sizing: border-box;
}

.s2 h1,
.s2 h2,
.s2 h3,
.s2 h4,
.s2 p,
.s2 ul,
.s2 ol,
.s2 dl,
.s2 dd,
.s2 figure {
  margin: 0;
}

.s2 ul,
.s2 ol {
  padding: 0;
  list-style: none;
}

.s2 img,
.s2 svg {
  display: block;
  max-width: 100%;
}

.s2 a {
  color: inherit;
  text-decoration: none;
}

.s2 .guide-refs a,
.s2 .ref-list a,
.s2 .guide-item__body a {
  text-decoration: underline;
  text-decoration-color: #c4b8bb;
  text-decoration-thickness: 1px;
}
.s2 .guide-refs a:hover,
.s2 .guide-refs a:focus-visible,
.s2 .ref-list a:hover,
.s2 .ref-list a:focus-visible,
.s2 .guide-item__body a:hover,
.s2 .guide-item__body a:focus-visible {
  text-decoration-color: var(--text-dark);
}

.s2 .contact__tel {
  text-decoration: none;
}
.s2 .contact__tel::after {
  content: "↗";
  margin-left: 0.15em;
  font-size: 0.55em;
  font-weight: 500;
}
.s2 .contact__tel:hover,
.s2 .contact__tel:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}

.s2 :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 03. 유틸리티 */
.s2 .container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.s2 .section,
.s2 #info {
  padding-block: var(--section-py);
}

.s2 .bg-lavender   { background: var(--bg-lavender); }
.s2 .bg-lavender-2 { background: var(--bg-lavender-2); }
.s2 .bg-light      { background: var(--bg-light); }

@media (max-width: 768px) {
  .s2 .s2-br-pc { display: none; }
}

/* 04. 공통 타이포 */
.s2 .sec-head {
  text-align: center;
  margin-bottom: 56px;
}

.s2 .sec-head--brown {
  --title-color: var(--logo-brown);
}

.s2 .sec-eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.4;
  color: var(--eyebrow-color, var(--text-main));
}

.s2 .sec-title {
  margin-top: 6px;
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.3;
  color: var(--title-color, var(--primary));
}

.s2 .title-2line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 40px;
  text-align: center;
  font-size: var(--fs-title);
  letter-spacing: -1px;
  line-height: 1.35;
}
.s2 .title-2line .t-light {
  font-weight: 400;
  color: var(--text-main);
}
.s2 .title-2line .t-strong {
  font-weight: 700;
  color: var(--primary);
}

.s2 .text-body {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-main);
}
.s2 .text-body + .text-body { margin-top: 16px; }

.s2 .s2-em {
  color: var(--primary);
  font-weight: 600;
}

/* 05. 공통 컴포넌트 */
.s2 .section-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto 48px;
}
.s2 .section-divider::before,
.s2 .section-divider::after {
  content: "";
  flex: 1;
  border-top: 1px dotted var(--line-dotted);
}
.s2 .section-divider__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.s2 .label-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(380px, 100%);
  min-height: 52px;
  margin: 0 auto 40px;
  padding: 10px 24px;
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.4;
  text-align: center;
}

.s2 .highlight-box {
  max-width: 1000px;
  margin: 56px auto 0;
  padding: 32px;
  background: var(--bg-white);
  border-radius: 12px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-main);
}

@media (max-width: 768px) {
  .s2 .section-divider { margin-bottom: 32px; }
  .s2 .label-box { font-size: 16px; min-height: 46px; margin-bottom: 28px; }
  .s2 .highlight-box { margin-top: 40px; padding: 24px 20px; font-size: 15px; }
}

/* 06. 스크롤 등장 애니메이션 (.s2-anim 은 JS 활성 시에만 부착) */
.s2.s2-anim .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .8s var(--ease-out),
    transform .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.s2.s2-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .s2.s2-anim .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 07. 버튼 / 이미지 출처 표기 */
.s2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.3px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.s2 .btn--light { background: #fff; color: var(--primary-dark); }
.s2 .btn--light:hover { background: var(--bg-lavender); }
.s2 .btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.s2 .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.s2 .img-credit {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.4;
  opacity: .65;
}

/* 08. 히어로 (#hero — 사이트 헤더가 위에서 분리되므로 헤더 높이 오프셋은 0) */
.s2 .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 600px;
  padding: 0 0 48px;
  background:
    radial-gradient(90% 80% at 85% 15%, #3d34a8 0%, transparent 60%),
    radial-gradient(70% 70% at 10% 90%, #1c1752 0%, transparent 70%),
    var(--primary-dark);
  color: #fff;
}

.s2 .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.s2 .hero__bg::before,
.s2 .hero__bg::after {
  content: "";
  position: absolute;
  inset: -30%;
  mix-blend-mode: screen;
  filter: blur(3px);
}
.s2 .hero__bg::before {
  background: repeating-radial-gradient(
    circle at 30% 40%,
    transparent 0 26px,
    rgba(170, 160, 255, .16) 32px,
    transparent 40px
  );
  animation: s2-caustic-a 22s ease-in-out infinite alternate;
}
.s2 .hero__bg::after {
  background: repeating-radial-gradient(
    circle at 70% 65%,
    transparent 0 34px,
    rgba(140, 210, 255, .12) 40px,
    transparent 50px
  );
  animation: s2-caustic-b 28s ease-in-out infinite alternate;
}
@keyframes s2-caustic-a {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(4%, 3%) rotate(8deg) scale(1.08); }
}
@keyframes s2-caustic-b {
  from { transform: translate(0, 0) rotate(0deg) scale(1.05); }
  to   { transform: translate(-5%, -2%) rotate(-6deg) scale(1); }
}

.s2 .hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 48px;
}
.s2 .hero__inner--solo {
  grid-template-columns: 1fr;
}

.s2 .hero__eyebrow {
  font-family: var(--font-en);
  font-size: 18px;
  letter-spacing: -.5px;
  opacity: .8;
}
.s2 .hero__title {
  max-width: none;
  margin: 8px 0 20px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.3;
  color: #fff;
}
.s2 .hero__desc {
  font-size: 18px;
  line-height: 1.7;
  opacity: .88;
}
.s2 .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.s2 .hero__visual {
  perspective: 1400px;
  text-align: right;
}
.s2 .hero__float {
  animation: s2-hero-float 7s ease-in-out infinite;
}
.s2 .hero__card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 40px 80px rgba(8, 5, 40, .55);
  transform: rotateY(-16deg) rotateX(6deg) rotate(-8deg);
}
.s2 .hero__card img { width: 100%; height: auto; }
.s2 .hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, transparent 35%, transparent 70%, rgba(255, 255, 255, .08) 100%);
  pointer-events: none;
}
.s2 .hero__visual .img-credit { margin-top: 28px; }

@keyframes s2-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@media (max-width: 1024px) {
  .s2 .hero__inner { gap: 32px; }
  .s2 .hero__title { font-size: 32px; }
  .s2 .hero__desc { font-size: 16px; }
}

@media (max-width: 768px) {
  .s2 .hero {
    min-height: 0;
    padding: 32px 0 56px;
  }
  .s2 .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .s2 .hero__visual { order: -1; text-align: center; padding: 8px 12px 0; }
  .s2 .hero__card { transform: rotateY(-10deg) rotate(-4deg); }
  .s2 .hero__visual .img-credit { margin-top: 16px; }
  .s2 .hero__eyebrow { font-size: 14px; }
  .s2 .hero__title { font-size: 28px; margin: 4px 0 12px; }
  .s2 .hero__desc { font-size: 15px; }
  .s2 .hero__actions { margin-top: 24px; }
  .s2 .hero__actions .btn { flex: 1; min-height: 48px; padding: 0 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .s2 .hero__bg::before,
  .s2 .hero__bg::after,
  .s2 .hero__float { animation: none; }
}

/* 09. 시술 요약 (#info) */
.s2 .summary-grid {
  display: grid;
  grid-template-columns: repeat(var(--summary-columns, 4), 200px);
  justify-content: center;
  gap: 16px;
  margin-top: 56px;
}
.s2 .summary-grid:has(> :first-child:last-child) { --summary-columns: 1; }
.s2 .summary-grid:has(> :nth-child(2):last-child) { --summary-columns: 2; }
.s2 .summary-grid:has(> :nth-child(3):last-child) { --summary-columns: 3; }
.s2 .summary-grid:has(> :nth-child(5):last-child) { --summary-columns: 5; }
.s2 .summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 18px 12px;
  background: var(--bg-light);
  border-radius: var(--radius-card);
  text-align: center;
}
.s2 .summary-card__icon {
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
  color: var(--primary);
}
.s2 .summary-card dt {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}
.s2 .summary-card dd {
  margin-top: 2px;
  font-size: 15px;
  color: var(--text-main);
}

@media (max-width: 1024px) {
  .s2 .summary-grid { grid-template-columns: repeat(var(--summary-columns, 4), minmax(0, 180px)); }
}
@media (max-width: 768px) {
  .s2 .summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 36px;
  }
  .s2 .summary-card { min-height: 108px; }
  .s2 .summary-grid > .summary-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 10px) / 2);
  }
  .s2 .summary-card dd { font-size: 14px; }
}

/* 10. 원장 배너 (#doctor) */
.s2 .doctor {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background:
    radial-gradient(45% 75% at 76% 50%, rgba(103, 96, 200, .55) 0%, rgba(103, 96, 200, .12) 55%, transparent 75%),
    var(--bg-black);
  color: #fff;
}

.s2 .doctor__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 48px;
}

.s2 .doctor__kicker {
  font-size: 15px;
  opacity: .75;
}
.s2 .doctor__title {
  display: flex;
  flex-direction: column;
  margin: 14px 0 12px;
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.2;
}
.s2 .doctor__title span:last-child {
  background: linear-gradient(90deg, #b6b0ff, #e6e3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s2 .doctor__sub {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.5px;
}
.s2 .doctor__desc {
  margin: 24px 0 36px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .72);
}

.s2 .doctor__visual {
  position: relative;
  justify-self: center;
  width: min(380px, 100%);
}
.s2 .doctor__photo {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(103, 96, 200, .35);
}
.s2 .doctor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}

.s2 .laurel {
  position: absolute;
  top: -28px;
  right: -36px;
  width: 120px;
  height: 120px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  color: #d9c9a3;
}
.s2 .laurel text { fill: currentColor; font-family: var(--font-en); }
.s2 .laurel__small { font-size: 9px; letter-spacing: 1.5px; }
.s2 .laurel__big { font-size: 12.5px; font-weight: 700; letter-spacing: .5px; }

@media (max-width: 1024px) {
  .s2 .doctor__title { font-size: 34px; }
  .s2 .laurel { right: -12px; }
}

@media (max-width: 768px) {
  .s2 .doctor {
    padding-block: var(--section-py);
    background:
      radial-gradient(90% 40% at 50% 22%, rgba(103, 96, 200, .55) 0%, transparent 70%),
      var(--bg-black);
  }
  .s2 .doctor__inner { grid-template-columns: 1fr; gap: 36px; }
  .s2 .doctor__visual { order: -1; width: min(280px, 78%); }
  .s2 .laurel { width: 92px; height: 92px; top: -18px; right: -24px; }
  .s2 .doctor__title { font-size: 28px; }
  .s2 .doctor__sub { font-size: 17px; }
  .s2 .doctor__desc { font-size: 14px; margin: 18px 0 28px; }
}

/* 11. 공통: 유리구슬(.orb) / 태그(.tag) / 가운데 작은 안내문 */
.s2 .orb {
  display: block;
  width: var(--s, 80px);
  height: var(--s, 80px);
  border-radius: 50%;
  background: url("assets/showcase2/orb.webp") center / contain no-repeat;
  filter: drop-shadow(0 14px 22px rgba(103, 96, 200, .28));
}

@keyframes s2-orb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

.s2 .tag {
  display: inline-block;
  padding: 6px 20px;
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.s2 .tag small { font-size: .6em; font-weight: 500; }
.s2 .tag--purple { background: var(--primary); }
.s2 .tag--blue   { background: var(--accent-blue); }
.s2 .tag--green  { background: #1F8A5B; }
.s2 .tag--sm {
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 14px;
}
.s2 .tag--sm.tag--blue { background: #1F7FB5; }

.s2 .note-center {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--text-sub);
}

/* 12. 기술 설명 (.tech / #tech-N) */
.s2 .tech__block + .tech__block { padding-top: 0; }
.s2 .tech__intro { margin-bottom: 72px; }

.s2 .tech-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto 80px;
}
.s2 .tech-intro--solo {
  grid-template-columns: 1fr;
}
.s2 .tech-visual { position: relative; }
.s2 .tech-visual img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(103, 96, 200, .18);
}
.s2 .tech-visual .orb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  animation: s2-orb-float 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.s2 .tech-intro__text {
  font-size: 17px;
  line-height: 1.9;
  color: var(--text-main);
}
.s2 .tech-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-sub);
}

.s2 .particle-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.s2 .particle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400px;
  padding: 36px 24px 40px;
  background: var(--bg-white);
  border-radius: var(--radius-card);
  text-align: center;
}
.s2 .particle-card__art {
  display: grid;
  place-items: center;
  height: 170px;
  margin-bottom: 24px;
}
.s2 .particle-card__en {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--text-sub);
}
.s2 .particle-card__title {
  margin: 4px 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}
.s2 .particle-card__lead {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}
.s2 .particle-card__desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-sub);
}

.s2 .combo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 64px;
  max-width: 1000px;
  margin: 0 auto;
}
.s2 .combo--solo {
  grid-template-columns: 1fr;
}
.s2 .venn {
  --d: 240px;
  position: relative;
  width: calc(var(--d) * 1.83);
  height: calc(var(--d) * 1.72);
}
.s2 .venn__circle {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) padding-box,
    conic-gradient(from 0deg, #b9a8ff, #ffb3e1, #a8f0e0, #9fc4ff, #b9a8ff) border-box;
  text-align: center;
}
.s2 .venn__circle strong {
  font-family: var(--font-en);
  font-size: calc(var(--d) * .183);
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary);
}
.s2 .venn__circle span { font-size: 14px; color: var(--text-main); }
.s2 .venn__circle--1 { left: 0; top: 0; padding: 0 40px 50px 0; }
.s2 .venn__circle--2 { left: calc(var(--d) * .83); top: 0; padding: 0 0 50px 40px; }
.s2 .venn__circle--3 { left: calc(var(--d) * .415); top: calc(var(--d) * .7); padding-top: 50px; }

.s2 .combo-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.s2 .combo-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.s2 .combo-item__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
}
.s2 .combo-item__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
}
.s2 .combo-item__name span { color: var(--primary); }
.s2 .combo-item__desc { font-size: 15px; color: var(--text-sub); }

.s2 .ha-note {
  margin: 24px auto;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

.s2 .barb-visual {
  max-width: 760px;
  margin: 32px auto;
  text-align: center;
}
.s2 .barb-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(40, 25, 70, .1);
}
.s2 .barb-visual figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .s2 .tech-visual .orb { animation: none; }
}

@media (max-width: 1024px) {
  .s2 .particle-cards { grid-template-columns: repeat(2, 1fr); }
  .s2 .combo { gap: 40px; }
  .s2 .venn { --d: 200px; }
}

@media (max-width: 768px) {
  .s2 .tech__intro { margin-bottom: 48px; }

  .s2 .tech-intro {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 56px;
  }
  .s2 .tech-visual .orb { width: calc(var(--s) * .65); height: calc(var(--s) * .65); }
  .s2 .tech-intro__text { font-size: 15px; text-align: center; }

  .s2 .particle-cards {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .s2 .particle-cards::-webkit-scrollbar { display: none; }
  .s2 .particle-card {
    flex: 0 0 78%;
    min-height: 0;
    padding: 28px 20px 32px;
    scroll-snap-align: center;
  }
  .s2 .particle-card__art { height: 140px; margin-bottom: 16px; }

  .s2 .combo { grid-template-columns: 1fr; justify-items: center; gap: 36px; }
  .s2 .venn { --d: 160px; }
  .s2 .venn__circle span { font-size: 12px; }
  .s2 .venn__circle--1 { padding: 0 24px 34px 0; }
  .s2 .venn__circle--2 { padding: 0 0 34px 24px; }
  .s2 .venn__circle--3 { padding-top: 34px; }
  .s2 .combo-list { width: 100%; gap: 20px; }
}

/* 13. 실 종류 (#products) */
.s2 .threads {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--section-py);
  background:
    radial-gradient(70% 60% at 15% 0%, #5b52c9 0%, transparent 70%),
    radial-gradient(60% 60% at 95% 100%, #3c2f9a 0%, transparent 70%),
    linear-gradient(160deg, #3a3192, #1f1a5c);
  color: #fff;
  --eyebrow-color: rgba(255, 255, 255, .75);
  --title-color: #fff;
}
.s2 .threads .sec-title { font-size: calc(var(--fs-title) - 4px); }

.s2 .threads__bokeh { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.s2 .threads__bokeh span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .5) 0%, rgba(200, 190, 255, .15) 45%, transparent 70%);
  animation: s2-twinkle 5s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes s2-twinkle {
  0%, 100% { opacity: .25; transform: scale(.9); }
  50%      { opacity: .9;  transform: scale(1.05); }
}

.s2 .thread-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.s2 .thread-card {
  overflow: hidden;
  padding-bottom: 32px;
  border-radius: var(--radius-card);
  background: var(--bg-white);
  color: var(--text-main);
  text-align: center;
}
.s2 .thread-card__img {
  display: grid;
  place-items: center;
  height: 220px;
  min-height: 0;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #f6f5ff, #ecebf7);
}
.s2 .thread-card__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
.s2 .thread-card .tag { margin: 24px 0 14px; }
.s2 .thread-card__material {
  display: table;
  margin: -4px auto 12px;
  padding: 5px 12px;
  border: 1px solid #efedfb;
  border-radius: 999px;
  background: #efedfb;
  color: #4b44a8;
  font-size: 13px;
}
.s2 .thread-card__area {
  padding: 0 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}
.s2 .thread-card__desc {
  margin-top: 4px;
  padding: 0 20px;
  font-size: 15px;
  color: var(--text-sub);
}
.s2 .threads__credit { margin-top: 24px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .s2 .threads__bokeh span { animation: none; opacity: .5; }
}
@media (max-width: 1024px) {
  .s2 .thread-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .s2 .thread-cards { grid-template-columns: 1fr; gap: 16px; }
  .s2 .thread-card__img { height: 180px; }
  .s2 .tag { font-size: 18px; }
}

/* 제품이 1개면 가운데 (DK 11-02) — 2개 이상은 위 규칙 그대로 */
.s2 .thread-card:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 48px) / 3);
}
@media (max-width: 1024px) {
  .s2 .thread-card:only-child { width: calc((100% - 24px) / 2); }
}
@media (max-width: 768px) {
  .s2 .thread-card:only-child { width: auto; justify-self: stretch; }
}

/* 14. 부위별 맞춤 설계 (#design) */
.s2 .area-cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}
.s2 .area-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: center;
  gap: 56px;
  padding: 40px 56px;
  background: var(--bg-gray);
  border-radius: var(--radius-card);
}
.s2 .area-card__face svg {
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
}
.s2 .area-card .area {
  fill: var(--area);
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.s2 .area-card__title {
  margin: 14px 0 10px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--text-dark);
}
.s2 .area-card__desc { font-size: 15px; line-height: 1.8; }

.s2 .checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  margin-top: 22px;
}
.s2 .checklist li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--text-dark);
}
.s2 .checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

@media (max-width: 768px) {
  .s2 .area-cards { gap: 16px; }
  .s2 .area-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 20px;
  }
  .s2 .area-card__face svg { max-width: 220px; }
  .s2 .area-card__title { font-size: 21px; }
  .s2 .checklist { grid-template-columns: 1fr; gap: 8px; }
}

/* 15. 추천 대상 (#ideal) */
.s2 .ideal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.s2 .ideal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 16px;
  background: var(--bg-white);
  border-radius: 12px;
  text-align: center;
  font-size: 16px;
  color: var(--text-dark);
}
.s2 .ideal-card__num {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--primary);
}
@media (max-width: 768px) {
  .s2 .ideal-grid { grid-template-columns: 1fr; gap: 10px; }
  .s2 .ideal-card { min-height: 80px; font-size: 15px; }
}

/* 16. 인증 기관 배너 (#certified — 글 중심) */
.s2 .certified {
  padding-block: 110px;
  background:
    radial-gradient(40% 35% at 18% 25%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(35% 30% at 78% 18%, rgba(255, 255, 255, .7), transparent 70%),
    linear-gradient(180deg, #d8e5f0 0%, #e9eef4 60%, #f5f6f8 100%);
}
.s2 .certified__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
.s2 .certified--text-only .certified__inner {
  grid-template-columns: 1fr;
  text-align: center;
}
.s2 .certified--text-only .certified__copy {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}
.s2 .certified__en {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1px;
  color: #2f5577;
}
.s2 .certified__title {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.4;
  color: var(--text-dark);
}
.s2 .certified__desc {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .s2 .certified { padding-block: var(--section-py); }
  .s2 .certified__inner { gap: 32px; }
  .s2 .certified__en { font-size: 22px; }
  .s2 .certified__title { font-size: 24px; }
  .s2 .certified__desc { font-size: 15px; }
}

/* 17. 시술 포인트 (#points) */
.s2 .points { overflow: hidden; }

.s2 .point {
  display: grid;
  grid-template-columns: 480px 1fr;
  align-items: center;
  gap: 64px;
  max-width: 1080px;
  margin: 0 auto 96px;
}
.s2 .point:last-child { margin-bottom: 0; }
.s2 .point--reverse { grid-template-columns: 1fr 480px; }
.s2 .point--reverse .point__img { order: 2; }
.s2 .point--no-img { grid-template-columns: 1fr; }

.s2 .point__img {
  overflow: hidden;
  aspect-ratio: 480 / 330;
  border-radius: 20px;
}
.s2 .point__img img { width: 100%; height: 100%; object-fit: cover; }

.s2 .point__badge {
  display: inline-block;
  padding: 3px 16px;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text-sub);
}
.s2 .point__title {
  display: flex;
  flex-direction: column;
  margin: 16px 0 20px;
  font-size: 26px;
  letter-spacing: -.8px;
  line-height: 1.4;
}
.s2 .point__title span   { font-weight: 400; color: var(--text-main); }
.s2 .point__title strong { font-weight: 700; color: var(--text-dark); }
.s2 .point__text p { font-size: 15px; line-height: 1.9; }

.s2.s2-anim .slide-in-left,
.s2.s2-anim .slide-in-right {
  opacity: 0;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.s2.s2-anim .slide-in-left  { transform: translateX(-60px); }
.s2.s2-anim .slide-in-right { transform: translateX(60px); }
.s2.s2-anim .slide-in-left.is-visible,
.s2.s2-anim .slide-in-right.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .s2.s2-anim .slide-in-left,
  .s2.s2-anim .slide-in-right { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1024px) {
  .s2 .point, .s2 .point--reverse { grid-template-columns: 1fr 1fr; gap: 40px; }
  .s2 .point--no-img { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .s2 .point, .s2 .point--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 56px;
  }
  .s2 .point--reverse .point__img { order: 0; }
  .s2 .point__title { font-size: 21px; margin: 12px 0 14px; }
  .s2.s2-anim .slide-in-left  { transform: translateX(-30px); }
  .s2.s2-anim .slide-in-right { transform: translateX(30px); }
}

/* 18. 시술 후 관리 4장 + 안내·주의사항 (#details) */
.s2 .guide__inner { max-width: 900px; }

.s2 .care-strip { margin-bottom: 40px; text-align: center; }
.s2 .care-strip__title { margin-bottom: 20px; font-size: 22px; }
.s2 .care-strip__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
}
.s2 .care-strip__list li {
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(40, 25, 70, .06);
}
.s2 .care-strip__list img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.s2 .care-strip__list p { padding: 14px 8px 18px; font-size: 14px; line-height: 1.7; }
.s2 .care-strip__list strong { display: block; font-weight: 700; }
.s2 .care-strip__note { margin-top: 18px; font-size: 13px; line-height: 1.8; }

.s2 .guide-list { border-top: 1px solid var(--line); }
.s2 .guide-item { border-bottom: 1px solid var(--line); }
.s2 .guide-item summary {
  position: relative;
  padding: 22px 48px 22px 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  list-style: none;
}
.s2 .guide-item summary::-webkit-details-marker { display: none; }
.s2 .guide-item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  color: var(--logo-brown);
}
.s2 .guide-item[open] summary::after { content: "−"; }
.s2 .guide-item__body { padding: 0 4px 26px; }
.s2 .guide-item__body p,
.s2 .guide-item__body li { font-size: 15px; line-height: 1.8; }

/* site/styles.css 의 .bullet-list 규칙 덮어쓰기 */
.s2 .bullet-list {
  margin-top: 0;
  list-style: disc;
  padding-left: 1.3em;
}
.s2 .bullet-list li {
  position: static;
  padding: 0;
}
.s2 .bullet-list li::before {
  content: none;
}
.s2 .bullet-list .bullet-list {
  list-style: circle;
  margin-top: 4px;
}
.s2 .guide-item__body p + p,
.s2 .guide-item__body p + ul,
.s2 .guide-item__body ul + p { margin-top: 10px; }

.s2 .cite { font-size: 11px; line-height: 0; }
.s2 .cite a { color: var(--primary); padding: 0 1px; }

.s2 .guide-alert {
  margin-top: 40px;
  padding: 24px 28px;
  border: 1px solid #f0cfcf;
  border-radius: 12px;
  background: #fff;
}
.s2 .guide-alert h3 { font-size: 17px; font-weight: 700; color: #b23b3b; }
.s2 .guide-alert p { margin-top: 6px; font-size: 15px; }
.s2 .guide-alert__tel { margin-left: 6px; font-weight: 700; color: var(--primary); white-space: nowrap; }

.s2 .guide-refs,
.s2 .guide-permit { margin-top: 40px; }
.s2 .guide-refs h3,
.s2 .guide-permit h3 { font-size: 15px; font-weight: 700; color: var(--text-dark); }

/* site/styles.css 의 .ref-list 규칙 덮어쓰기 */
.s2 .ref-list {
  margin-top: 0;
  padding: 0;
  list-style: none;
}
.s2 .ref-list > li,
.s2 .ref-list li,
.s2 .guide-permit p {
  margin-top: 6px;
  padding: 0;
  text-indent: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
}
.s2 .ref-list a { color: var(--primary); word-break: break-all; }
.s2 .ref-list .ref-num,
.s2 .ref-num { font-weight: 600; color: inherit; }

.s2 .ad-notice {
  margin-top: 32px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
}
.s2 .s2-notice-solo {
  padding-block: 24px;
}
.s2 .s2-notice-solo .ad-notice {
  margin-top: 0;
}

@media (max-width: 768px) {
  .s2 .care-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .s2 .care-strip__title { font-size: 20px; }
  .s2 .guide-item summary { font-size: 16px; padding-block: 18px; }
  .s2 .guide-alert { padding: 20px; }
}

/* 19. 오시는 길 (#location / Contact us) */
.s2 .contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}
.s2 .contact__map {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e5e5e5;
  font-size: 16px;
  color: #555;
}
.s2 .contact__map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s2 .contact__map-link {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 1;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  transform: translateX(-50%);
  white-space: nowrap;
}
.s2 .contact__info {
  padding: 72px clamp(24px, 5vw, 72px);
  background: var(--bg-black);
  color: #fff;
}
.s2 .contact__title {
  font-family: var(--font-contact);
  font-size: 30px;
  font-weight: 600;
}
.s2 .contact__list { margin-top: 28px; }
.s2 .contact__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.s2 .contact__row dt { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .62); }
.s2 .contact__row dd { font-size: 15px; line-height: 1.7; }
.s2 .hours { border-collapse: collapse; }
.s2 .hours th {
  padding: 0 24px 2px 0;
  font-weight: 400;
  text-align: left;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}
.s2 .hours th,
.s2 .hours td { font-size: 14px; }
.s2 .contact__warn { margin-top: 6px; font-size: 13px; color: #F5D547; }
.s2 .contact__tel {
  font-family: var(--font-contact);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .5px;
}

@media (max-width: 768px) {
  .s2 .contact { grid-template-columns: 1fr; min-height: 0; }
  .s2 .contact__map { height: 260px; }
  .s2 .contact__info { padding: 48px var(--gutter); }
  .s2 .contact__title { font-size: 24px; }
  .s2 .contact__row { grid-template-columns: 1fr; gap: 2px; }
  .s2 .contact__row dt { font-size: 13px; }
}

/* 20. 시술별 색·무늬(theme) */
.s2[data-palette="cream-gold"] {
  --primary: #7A5200;
  --primary-dark: #FFF8E1;
  --bg-lavender: #FFFCF2;
  --bg-lavender-2: #FFF4D2;
  --bg-light: #FFFCF2;
  --line-dotted: #E8B800;
  --text-main: #404040;
  --text-sub: #625A45;
  --text-dark: #2B2000;
  --logo-brown: #7A5200;
  --silk-shine: rgba(255, 255, 255, .85);
  --silk-gold: rgba(184, 134, 11, .26);
}
.s2[data-palette="cream-gold"] .sec-eyebrow {
  color: #7A5200;
}
.s2[data-palette="cream-gold"] .section-divider__num,
.s2[data-palette="cream-gold"] .tag--purple,
.s2[data-palette="cream-gold"] .point__badge {
  background: #3B2A00;
  border-color: #3B2A00;
  color: #FFF6D6;
}
.s2[data-palette="cream-gold"] .tech-visual img {
  box-shadow: 0 24px 60px rgba(150, 110, 0, .10);
}

/* 첫 화면과 제품 칸: 장식은 글 뒤로 제한. */
.s2[data-palette="cream-gold"] .hero,
.s2[data-palette="cream-gold"] .threads {
  background:
    radial-gradient(45% 65% at 100% 0%, rgba(246, 214, 94, .18), transparent 75%),
    linear-gradient(135deg, #FFF8E1, #FBE7A6);
  color: #2B2000;
  --title-color: #2B2000;
}
.s2[data-palette="cream-gold"] .hero__title {
  color: #2B2000;
}
.s2[data-palette="cream-gold"] .hero__eyebrow,
.s2[data-palette="cream-gold"] .threads .sec-eyebrow {
  color: #7A5200;
  opacity: 1;
}
.s2[data-palette="cream-gold"] .hero__desc {
  color: #4A3A10;
  opacity: 1;
}
.s2[data-palette="cream-gold"] .img-credit {
  opacity: 1;
}
.s2[data-palette="cream-gold"] .btn--light,
.s2[data-palette="cream-gold"] .btn--light:hover {
  background: #3B2A00;
  color: #FFF6D6;
}
.s2[data-palette="cream-gold"] .btn--ghost,
.s2[data-palette="cream-gold"] .btn--ghost:hover {
  border-color: #3B2A00;
  color: #3B2A00;
  background: transparent;
}
.s2[data-palette="cream-gold"] .threads__bokeh span {
  background: radial-gradient(circle, rgba(232, 184, 0, .08), transparent 70%);
}
.s2[data-palette="cream-gold"] .threads__bokeh {
  inset: 0 0 0 75%;
}
.s2[data-palette="cream-gold"] .thread-card__material {
  background: #FFFCF2;
  border-color: #FFFCF2;
  color: #7A5200;
}

/* 원장 배너: 사진과 기존 문구 유지. */
.s2[data-palette="cream-gold"] .doctor {
  background: #FFF8E1;
  color: #2B2000;
}
.s2[data-palette="cream-gold"] .doctor__title span:last-child {
  background: none;
  color: #7A5200;
}
.s2[data-palette="cream-gold"] .doctor__kicker,
.s2[data-palette="cream-gold"] .doctor__desc {
  color: #4A3A10;
  opacity: 1;
}
.s2[data-palette="cream-gold"] .doctor__photo {
  box-shadow: 0 30px 80px rgba(150, 110, 0, .10);
}

body:has(.s2[data-palette="cream-gold"]) .hd2 {
  --pink-deep: #7A5200;
  --pink-tint: #FFFCF2;
  --pink-soft: #E8B800;
  --ink: #2B2000;
}
body:has(.s2[data-palette="cream-gold"]) .hd2 {
  color: #2B2000;
}
body:has(.s2[data-palette="cream-gold"]) .hd2.is-scrolled {
  background: var(--hd-color);
}
body:has(.s2[data-palette="cream-gold"]) .hd2 .lang-switch a {
  opacity: 1;
}
body:has(.s2[data-palette="cream-gold"]) .hd2 .site-nav .sub-list {
  color: #2B2000;
}
body:has(.s2[data-palette="cream-gold"]) .hd2 .site-nav .sub-list a {
  color: #2B2000;
}
body:has(.s2[data-palette="cream-gold"]) .hd2 .site-nav .sub-list a:is(:hover, :focus-visible) {
  background: #FFFCF2;
  color: #7A5200;
}

body:has(.s2[data-palette="cream-gold"]) .float-cta-btn,
body:has(.s2[data-palette="cream-gold"]) .float-cta-btn:hover {
  background: #3B2A00;
  color: #FFF6D6;
  border-color: #E8B800;
  box-shadow: 0 2px 8px rgba(150, 110, 0, .10);
}
body:has(.s2[data-palette="cream-gold"]) .float-cta-close {
  background: #FFFCF2;
  color: #2B2000;
  border-color: #E8B800;
}

/* B 제품 칸과 헤더·상담 버튼. */
.s2[data-palette="cream-gold"] .thread-card__img {
  background: #FFFFFF;
}
body:has(.s2[data-palette="cream-gold"]) .hd2 .lang-switch [aria-current] {
  opacity: 1;
}
body:has(.s2[data-palette="cream-gold"]) .float-cta :focus-visible {
  outline: 2px solid #7A5200;
  outline-offset: 2px;
}

/* 비단결: 두 겹이 반대 방향으로 천천히 흐른다. */
.s2[data-pattern="silk-lines"] .hero__bg::before,
.s2[data-pattern="silk-lines"] .hero__bg::after {
  display: none;
}
.s2 .hero__silk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
}
.s2 .hero__silk-shine {
  stroke: var(--silk-shine, rgba(255, 255, 255, .85));
  stroke-width: 1.6;
  animation: s2-silk-flow 24s ease-in-out infinite;
}
.s2 .hero__silk-gold {
  stroke: var(--silk-gold, rgba(184, 134, 11, .26));
  stroke-width: 1.2;
  animation: s2-silk-flow 28s ease-in-out infinite reverse;
}
@keyframes s2-silk-flow {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(12px);
  }
}
@media (min-width: 769px) {
  .s2 .hero__silk-gold {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .45) 46%, #000 62%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .s2 .hero__silk-shine,
  .s2 .hero__silk-gold {
    animation: none;
  }
}

/* 세로 사진 카드: 기존 기울기·떠오름·광택을 유지한다. */
.s2 .hero__card--portrait {
  --portrait-bg: #FFFFFF;
  --portrait-border: rgba(232, 184, 0, .45);
  --portrait-shadow: 0 30px 70px rgba(120, 85, 0, .22);
  display: grid;
  place-items: center;
  width: 320px;
  max-width: 100%;
  height: 460px;
  margin-left: auto;
  padding: 20px;
  background: var(--portrait-bg);
  border-color: var(--portrait-border);
  box-shadow: var(--portrait-shadow);
  transform: rotateY(-16deg) rotateX(6deg) rotate(-8deg);
}
.s2 .hero__card.hero__card--portrait img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
}
.s2 .thread-card__img--portrait {
  height: 440px;
  background: #FFFFFF;
}
.s2 .thread-card__img.thread-card__img--portrait img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

/* 효과 그림. */
.s2 .s2-figure {
  max-width: 880px;
  margin: 32px auto 40px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.s2 .s2-figure img {
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .s2[data-palette="cream-gold"] {
    --silk-gold: rgba(184, 134, 11, .14);
  }
  .s2 .hero__silk-gold {
    mask-image: none;
  }
  body:has(.s2[data-palette="cream-gold"]) .hd2 .menu-panel {
    color: #2B2000;
  }
  .s2 .hero__card--portrait {
    width: 230px;
    height: 320px;
    padding: 15px;
    margin-inline: auto;
    transform: rotateY(-10deg) rotate(-4deg);
  }
  .s2 .hero__card.hero__card--portrait img {
    max-height: 290px;
  }
  .s2 .thread-card__img--portrait {
    height: 340px;
  }
  .s2 .s2-figure {
    max-width: 100%;
  }
}

/* 아이스 청록: 리플렛의 밝은 바탕과 어두운 청록 글씨. */
.s2[data-palette="ice-teal"] {
  --primary: #19454B;
  --primary-dark: #EFF4F3;
  --bg-lavender: #EFF4F3;
  --bg-lavender-2: #C7E2EB;
  --bg-light: #EFF4F3;
  --line-dotted: #97C0C3;
  --text-main: #263F43;
  --text-sub: #25474C;
  --text-dark: #173C41;
  --logo-brown: #19454B;
  --accent-blue: #19454B;
}
.s2[data-palette="ice-teal"] .sec-eyebrow {
  color: #19454B;
}
.s2[data-palette="ice-teal"] .section-divider__num,
.s2[data-palette="ice-teal"] .tag--purple,
.s2[data-palette="ice-teal"] .tag--blue,
.s2[data-palette="ice-teal"] .tag--sm.tag--blue,
.s2[data-palette="ice-teal"] .point__badge {
  background: #19454B;
  border-color: #19454B;
  color: #EFF4F3;
}
.s2[data-palette="ice-teal"] .tech-visual img {
  box-shadow: 0 24px 60px rgba(31, 79, 85, .10);
}

/* 첫 화면과 제품 칸: 장식은 글 뒤로 제한. */
.s2[data-palette="ice-teal"] .hero,
.s2[data-palette="ice-teal"] .threads {
  background:
    radial-gradient(45% 65% at 100% 0%, rgba(199, 226, 235, .18), transparent 75%),
    linear-gradient(135deg, #EFF4F3, #9BC3C5);
  color: #173C41;
  --title-color: #173C41;
}
.s2[data-palette="ice-teal"] .hero__title {
  color: #173C41;
}
.s2[data-palette="ice-teal"] .hero__eyebrow,
.s2[data-palette="ice-teal"] .threads .sec-eyebrow {
  color: #19454B;
  opacity: 1;
}
.s2[data-palette="ice-teal"] .hero__desc {
  color: #25474C;
  opacity: 1;
}
.s2[data-palette="ice-teal"] .img-credit {
  opacity: 1;
}
.s2[data-palette="ice-teal"] .btn--light,
.s2[data-palette="ice-teal"] .btn--light:hover {
  background: #19454B;
  color: #EFF4F3;
}
.s2[data-palette="ice-teal"] .btn--ghost,
.s2[data-palette="ice-teal"] .btn--ghost:hover {
  border-color: #19454B;
  color: #19454B;
  background: transparent;
}
.s2[data-palette="ice-teal"] .threads__bokeh span {
  background: radial-gradient(circle, rgba(151, 192, 195, .08), transparent 70%);
}
.s2[data-palette="ice-teal"] .threads__bokeh {
  inset: 0 0 0 75%;
}
.s2[data-palette="ice-teal"] .thread-card__material {
  background: #EFF4F3;
  border-color: #EFF4F3;
  color: #19454B;
}

/* 원장 배너: 사진과 기존 문구 유지. */
.s2[data-palette="ice-teal"] .doctor {
  background: #EFF4F3;
  color: #173C41;
}
.s2[data-palette="ice-teal"] .doctor__title span:last-child {
  background: none;
  color: #19454B;
}
.s2[data-palette="ice-teal"] .doctor__kicker,
.s2[data-palette="ice-teal"] .doctor__desc {
  color: #25474C;
  opacity: 1;
}
.s2[data-palette="ice-teal"] .doctor__photo {
  box-shadow: 0 30px 80px rgba(31, 79, 85, .10);
}

body:has(.s2[data-palette="ice-teal"]) .hd2 {
  --pink-deep: #19454B;
  --pink-tint: #EFF4F3;
  --pink-soft: #97C0C3;
  --ink: #173C41;
}
body:has(.s2[data-palette="ice-teal"]) .hd2 {
  color: #173C41;
}
body:has(.s2[data-palette="ice-teal"]) .hd2.is-scrolled {
  background: var(--hd-color);
}
body:has(.s2[data-palette="ice-teal"]) .hd2 .lang-switch a {
  opacity: 1;
}
body:has(.s2[data-palette="ice-teal"]) .hd2 .site-nav .sub-list {
  color: #173C41;
}
body:has(.s2[data-palette="ice-teal"]) .hd2 .site-nav .sub-list a {
  color: #173C41;
}
body:has(.s2[data-palette="ice-teal"]) .hd2 .site-nav .sub-list a:is(:hover, :focus-visible) {
  background: #EFF4F3;
  color: #19454B;
}

body:has(.s2[data-palette="ice-teal"]) .float-cta-btn,
body:has(.s2[data-palette="ice-teal"]) .float-cta-btn:hover {
  background: #19454B;
  color: #EFF4F3;
  border-color: #97C0C3;
  box-shadow: 0 2px 8px rgba(31, 79, 85, .10);
}
body:has(.s2[data-palette="ice-teal"]) .float-cta-close {
  background: #EFF4F3;
  color: #173C41;
  border-color: #97C0C3;
}

/* B 제품 칸과 헤더·상담 버튼. */
.s2[data-palette="ice-teal"] .thread-card__img {
  background: #FFFFFF;
}
body:has(.s2[data-palette="ice-teal"]) .hd2 .lang-switch [aria-current] {
  opacity: 1;
}
body:has(.s2[data-palette="ice-teal"]) .float-cta :focus-visible {
  outline: 2px solid #19454B;
  outline-offset: 2px;
}

/* 냉각 파형: 서리빛과 청록 선이 반대 방향으로 천천히 흐른다. */
.s2[data-pattern="cool-waves"] .hero__bg::before,
.s2[data-pattern="cool-waves"] .hero__bg::after {
  display: none;
}
.s2 .hero__waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
}
.s2 .hero__waves-frost {
  stroke: rgba(255, 255, 255, .8);
  stroke-width: 1.2;
  animation: s2-waves-flow 24s ease-in-out infinite;
}
.s2 .hero__waves-tint {
  stroke: rgba(31, 79, 85, .12);
  stroke-width: 1;
  animation: s2-waves-flow 28s ease-in-out infinite reverse;
}
@keyframes s2-waves-flow {
  0%, 100% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(6px);
  }
}
/* 데스크톱 글 칸 뒤에서는 두 겹 모두 옅게 한다. */
@media (min-width: 769px) {
  .s2 .hero__waves {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .25) 46%, #000 62%);
  }
}
/* 휴대폰 메뉴와 파형은 작은 화면 안에서만 조정한다. */
@media (max-width: 768px) {
  body:has(.s2[data-palette="ice-teal"]) .hd2 .menu-panel {
    color: #173C41;
  }
  .s2 .hero__waves {
    opacity: .45;
  }
}
/* 동작 줄이기 설정에서는 두 파형을 모두 정지한다. */
@media (prefers-reduced-motion: reduce) {
  .s2 .hero__waves-frost,
  .s2 .hero__waves-tint {
    animation: none;
  }
}

/* 차콜 로즈: 검정 상자와 은은한 분홍 장식, 밝은 칸의 와인 글씨. */
.s2[data-palette="charcoal-rose"] {
  --primary: #7A2944;
  --primary-dark: #1E1D21;
  --bg-white: #FBF4F6;
  --bg-gray: #F6E3EA;
  --bg-lavender: #FBF4F6;
  --bg-lavender-2: #F6E3EA;
  --bg-light: #FBF4F6;
  --line-dotted: #E8B9C8;
  --text-main: #2B2A2E;
  --text-sub: #51444A;
  --text-dark: #1E1D21;
  --logo-brown: #7A2944;
  --accent-blue: #7A2944;
}
.s2[data-palette="charcoal-rose"] .sec-eyebrow {
  color: #7A2944;
}
.s2[data-palette="charcoal-rose"] .section-divider__num,
.s2[data-palette="charcoal-rose"] .tag--purple,
.s2[data-palette="charcoal-rose"] .tag--blue,
.s2[data-palette="charcoal-rose"] .tag--sm.tag--blue,
.s2[data-palette="charcoal-rose"] .point__badge {
  background: #7A2944;
  border-color: #7A2944;
  color: #FBF4F6;
}
.s2[data-palette="charcoal-rose"] .tech-visual img {
  box-shadow: 0 24px 60px rgba(122, 41, 68, .10);
}

/* 첫 화면과 제품 칸: 장식은 글 뒤로 제한. */
.s2[data-palette="charcoal-rose"] .hero,
.s2[data-palette="charcoal-rose"] .threads {
  background:
    radial-gradient(45% 65% at 100% 0%, rgba(232, 185, 200, .08), transparent 75%),
    linear-gradient(135deg, #1E1D21, #2B2A2E);
  color: #FBF4F6;
  --title-color: #FBF4F6;
}
/* 두 분홍 광원은 가로 범위가 겹치지 않아 최대 한 겹만 합성된다. */
.s2[data-palette="charcoal-rose"] .hero {
  background:
    radial-gradient(45% 65% at 100% 0%, rgba(232, 185, 200, .12), transparent 75%),
    radial-gradient(45% 65% at 0% 100%, rgba(232, 185, 200, .12), transparent 75%),
    linear-gradient(135deg, #1E1D21, #242327);
}
.s2[data-palette="charcoal-rose"] .hero__title {
  color: #FBF4F6;
}
.s2[data-palette="charcoal-rose"] .hero__eyebrow,
.s2[data-palette="charcoal-rose"] .threads .sec-eyebrow {
  color: #F6E3EA;
  opacity: 1;
}
.s2[data-palette="charcoal-rose"] .hero__desc {
  color: #F6E3EA;
  opacity: 1;
}
.s2[data-palette="charcoal-rose"] .img-credit {
  opacity: 1;
}
.s2[data-palette="charcoal-rose"] .btn--light,
.s2[data-palette="charcoal-rose"] .btn--light:hover {
  background: #7A2944;
  color: #FBF4F6;
}
.s2[data-palette="charcoal-rose"] .btn--ghost,
.s2[data-palette="charcoal-rose"] .btn--ghost:hover {
  border-color: #E8B9C8;
  color: #FBF4F6;
  background: transparent;
}
.s2[data-palette="charcoal-rose"] .threads__bokeh span {
  background: radial-gradient(circle, rgba(232, 185, 200, .08), transparent 70%);
}
.s2[data-palette="charcoal-rose"] .threads__bokeh {
  inset: 0 0 0 75%;
}
.s2[data-palette="charcoal-rose"] .thread-card__material {
  background: #FBF4F6;
  border-color: #FBF4F6;
  color: #7A2944;
}

/* 원장 배너: 사진과 기존 문구 유지. */
.s2[data-palette="charcoal-rose"] .doctor {
  background: #FBF4F6;
  color: #1E1D21;
}
.s2[data-palette="charcoal-rose"] .doctor__title span:last-child {
  background: none;
  color: #7A2944;
}
.s2[data-palette="charcoal-rose"] .doctor__kicker,
.s2[data-palette="charcoal-rose"] .doctor__desc {
  color: #51444A;
  opacity: 1;
}
.s2[data-palette="charcoal-rose"] .doctor__photo {
  box-shadow: 0 30px 80px rgba(122, 41, 68, .10);
}

body:has(.s2[data-palette="charcoal-rose"]) .hd2 {
  --pink-deep: #7A2944;
  --pink-tint: #FBF4F6;
  --pink-soft: #E8B9C8;
  --ink: #1E1D21;
}
body:has(.s2[data-palette="charcoal-rose"]) .hd2 {
  color: #FBF4F6;
}
body:has(.s2[data-palette="charcoal-rose"]) .hd2.is-scrolled {
  background: var(--hd-color);
}
body:has(.s2[data-palette="charcoal-rose"]) .hd2 .lang-switch a {
  opacity: 1;
}
body:has(.s2[data-palette="charcoal-rose"]) .hd2 .site-nav .sub-list {
  color: #1E1D21;
}
body:has(.s2[data-palette="charcoal-rose"]) .hd2 .site-nav .sub-list a {
  color: #1E1D21;
}
body:has(.s2[data-palette="charcoal-rose"]) .hd2 .site-nav .sub-list a:is(:hover, :focus-visible) {
  background: #FBF4F6;
  color: #7A2944;
}

body:has(.s2[data-palette="charcoal-rose"]) .float-cta-btn,
body:has(.s2[data-palette="charcoal-rose"]) .float-cta-btn:hover {
  background: #7A2944;
  color: #FBF4F6;
  border-color: #E8B9C8;
  box-shadow: 0 2px 8px rgba(122, 41, 68, .10);
}
body:has(.s2[data-palette="charcoal-rose"]) .float-cta-close {
  background: #FBF4F6;
  color: #1E1D21;
  border-color: #E8B9C8;
}

/* B 제품 칸과 헤더·상담 버튼. */
.s2[data-palette="charcoal-rose"] .thread-card__img {
  background: #FFFFFF;
}
body:has(.s2[data-palette="charcoal-rose"]) .hd2 .lang-switch [aria-current] {
  opacity: 1;
}
body:has(.s2[data-palette="charcoal-rose"]) .float-cta :focus-visible {
  outline: 2px solid #7A2944;
  outline-offset: 2px;
}

/* 제품별 상자 색과 흰 JPEG 바탕을 카드 안에서 유지한다. */
.s2[data-palette="charcoal-rose"] .tag--blue,
.s2[data-palette="charcoal-rose"] .tag--sm.tag--blue {
  background: #2B2A2E;
  border-color: #2B2A2E;
  color: #FBF4F6;
}
.s2[data-palette="charcoal-rose"] .tag--purple {
  background: #7A1F3A;
  border-color: #7A1F3A;
  color: #FBF4F6;
}
.s2[data-palette="charcoal-rose"] .tag--green {
  background: #E9EAEA;
  border-color: #E9EAEA;
  color: #2B2A2E;
}
.s2[data-palette="charcoal-rose"] .thread-card {
  background: #FBF4F6;
}
/* 피부결 두 겹은 얇은 사선으로 피부 표면의 잔결을 표현한다. */
.s2[data-pattern="skin-grain"] .hero__bg::before,
.s2[data-pattern="skin-grain"] .hero__bg::after {
  display: none;
}
.s2 .hero__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
}
.s2 .hero__grain-rose {
  stroke: rgba(232, 185, 200, .22);
  stroke-width: 1;
  animation: s2-grain-flow 28s ease-in-out infinite;
}
.s2 .hero__grain-pearl {
  stroke: rgba(255, 255, 255, .10);
  stroke-width: .8;
  animation: s2-grain-flow 32s ease-in-out infinite reverse;
}
/* 두 겹이 반대 방향으로 전체 10px만 왕복한다. */
@keyframes s2-grain-flow {
  0%, 100% {
    transform: translate(-5px, 2px);
  }
  50% {
    transform: translate(5px, -2px);
  }
}
/* 데스크톱 글 칸 뒤의 피부결은 마스크로 약하게 한다. */
@media (min-width: 769px) {
  .s2 .hero__grain {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .2) 46%, #000 62%);
  }
}
/* 휴대폰 메뉴는 밝은 판의 차콜 글씨, 피부결은 낮은 불투명도로 표시한다. */
@media (max-width: 768px) {
  body:has(.s2[data-palette="charcoal-rose"]) .hd2 .menu-panel {
    color: #1E1D21;
  }
  .s2 .hero__grain {
    opacity: .4;
  }
}
/* 동작 줄이기에서는 피부결 두 겹을 모두 정지한다. */
@media (prefers-reduced-motion: reduce) {
  .s2 .hero__grain-rose,
  .s2 .hero__grain-pearl {
    animation: none;
  }
}

/* 더 알아보기 (#more-links) */
.s2 .guide-more {
  margin-top: 40px;
}
.s2 .guide-more h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}
.s2 .more-list {
  margin-top: 12px;
  padding: 0;
  list-style: none;
}
.s2 .more-list li {
  margin-top: 8px;
}
.s2 .more-list li:first-child {
  margin-top: 0;
}
.s2 .more-link,
.s2 .more-list a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.6;
}
.s2 .more-link::after,
.s2 .more-list a::after {
  content: "→";
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
.s2 .more-link:is(:hover, :focus-visible),
.s2 .more-list a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

/* CaHA 입자와 콜라겐 그물은 기존 동심원을 대체한다. */
.s2[data-pattern="caha-mesh"] .hero__bg::before,
.s2[data-pattern="caha-mesh"] .hero__bg::after {
  display: none;
}
.s2 .hero__mesh {
  opacity: .6;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.s2 .hero__mesh-net {
  animation: s2-mesh-float 28s ease-in-out infinite;
}
.s2 .hero__mesh-net path {
  fill: none;
  stroke: rgba(255, 255, 255, .5);
  stroke-width: .8;
}
.s2 .hero__mesh circle {
  fill: rgba(255, 255, 255, .65);
}
.s2 .hero__mesh .hero__mesh-glow {
  fill: url(#caha-particle-glow);
}
.s2 .hero__mesh-dots {
  animation: s2-mesh-float 32s ease-in-out infinite reverse;
}
.s2 .hero__mesh .hero__mesh-ring {
  stroke: rgba(25, 69, 75, .18);
  stroke-width: 1;
}
/* 두 겹은 반대 방향으로 8px만 천천히 왕복한다. */
@keyframes s2-mesh-float {
  0%, 100% {
    transform: translate(-4px, 2px);
  }
  50% {
    transform: translate(4px, -2px);
  }
}
/* 데스크톱 글 뒤에서는 입자와 그물을 함께 약하게 한다. */
@media (min-width: 769px) {
  .s2 .hero__mesh {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .2) 46%, #000 62%);
  }
}
/* 휴대폰에서는 전체 장식의 불투명도를 낮춘다. */
@media (max-width: 768px) {
  .s2 .hero__mesh {
    opacity: .4;
  }
}
/* 동작 줄이기에서는 입자와 그물을 모두 정지한다. */
@media (prefers-reduced-motion: reduce) {
  .s2 .hero__mesh-net,
  .s2 .hero__mesh-dots {
    animation: none;
  }
}