/* ==========================================================================
   subpage.css
   서브페이지(제모/필러 등) 공통 컴포넌트 스타일.
   색상/폰트 토큰은 main.css :root(--bg, --ink, --sub, --accent, --header-h)를 그대로 사용.
   ========================================================================== */


/* ---- 히어로가 없는 서브페이지: 헤더가 항상 솔리드 상태로 고정 ---- */
body.subpage:not(.has-hero) .site-header {
  background-color: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(43, 33, 24, 0.06);
}
body.subpage:not(.has-hero) .site-header::before {
  content: none;
}

body.subpage:not(.has-hero) .logo-img--white {
  opacity: 0;
}
body.subpage:not(.has-hero) .logo-img--basic {
  opacity: 1;
}
/* 히어로 없는 페이지에서는 헤더가 항상 밝은 배경이므로, .is-solid 상태에서만
   어둡게 바뀌던 언어선택 버튼/햄버거 아이콘도 처음부터 어두운 색으로 고정해야
   흰 배경 위에 흰 글씨(안 보임)가 되는 걸 막을 수 있다 */
body.subpage:not(.has-hero) .lang-select {
  color: var(--ink);
  border-color: var(--ink);
}
body.subpage:not(.has-hero) .menu-toggle-bar {
  background: var(--ink);
}



/* ---- 히어로가 있는 서브페이지 */
.site-header::before{
    display: none;
   }
body.subpage.has-hero .site-header.is-solid {
  background-color: var(--bg);
  box-shadow: 0 1px 0 rgba(43, 33, 24, 0.06);
}


body.subpage .main-nav a.is-current {
  color: var(--accent);
  font-weight: 700;
}

.root_daum_roughmap .cont{
  display: none !important;
}
.root_daum_roughmap .wrap_controllers{
  display: none !important;
}


/* ---------------- 히어로 배너  ---------------- */
.sp-hero {
  position: relative;
  overflow: hidden;
}
/* 서브페이지 히어로 배경: 로드 직후 살짝 확대된 상태에서 원래 크기로 줄어들며 자리를 잡는다.
   .sp-hero의 overflow:hidden이 확대된 만큼 밖으로 넘치는 부분을 잘라내 준다.
   상단 문구(eyebrow/title/sub)의 등장 속도(약 1.1~1.2s 안에 완료)와 맞춘 길이. */
@keyframes sp-hero-media-in {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.sp-hero-media {
  position: relative;
  height: 80vh;
  min-height: 420px;
  max-height: 760px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  animation: sp-hero-media-in 1.2s ease both;
}

.sp-hero-caption {
  text-align: center;
  position: absolute;
  left: 0; right: 0; bottom: 40%;
  z-index: 2;
  color: #fff;
}
/* 서브페이지 히어로 문구: 페이지가 로드되자마자(스크롤과 무관하게) 아래에서 위로
   순서대로(eyebrow → 제목 → 부제) 살짝 시간차를 두고 페이드인 되도록 한다. */
@keyframes sp-hero-caption-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: var(--sp-hero-op, 1); transform: translateY(0); }
}
.sp-hero-eyebrow,
.sp-hero-title_e,
.sp-hero-title,
.sp-hero-sub {
  opacity: 0;
  animation: sp-hero-caption-in .8s ease both;
}
.sp-hero-eyebrow {
  --sp-hero-op: 0.85;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  animation-delay: .05s;
}
.sp-hero-title_e{
  font-weight: 300;
      font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 70px;
  animation-delay: .2s;
}
.sp-hero-title {
  font-weight: 600;
  font-size: 52px;
  line-height: 1.15;
  animation-delay: .2s;
}
.sp-hero-sub {
  --sp-hero-op: 0.92;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 400;
  animation-delay: .35s;
}
@media (prefers-reduced-motion: reduce) {
  .sp-hero-media {
    animation: none;
    transform: scale(1);
  }
  .sp-hero-eyebrow,
  .sp-hero-title_e,
  .sp-hero-title,
  .sp-hero-sub {
    animation: none;
    opacity: var(--sp-hero-op, 1);
  }
}






/* 실제 사진 준비 전까지 보여주는 자리표시자 */
.sp-hero-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(75, 66, 52, 0.55);
  font-size: 14px;
  z-index: 0;
}
.sp-hero-placeholder-icon {
  width: 48px;
  height: 48px;
  border: 1.5px dashed rgba(75, 66, 52, 0.35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ---------------- 시술(고민)부위 설명 ---------------- */
.sp-problem {
  display: flex;
  align-items: stretch;
  gap: 100px;
}
.sp-problem-text {
  flex: 1;
  min-width: 0;
}
.sp-problem-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 16px;
}
.sp-problem-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.sp-problem-desc {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--sub);
}
.sp-problem-list {
  list-style: none;
  margin: 80px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sp-problem-list li {
     display: flex;
    align-items: center;
    gap: 14px;
    background: #e8e0d5;
    padding: 20px;
    transition: background-color .5s ease, box-shadow .5s ease;
    border-radius: 10px;
}
/* data-no-cycle이 붙은 목록(자동 순환/클릭 전환이 없는 정적 목록)에는 손모양 커서를 주지 않는다 */
.sp-problem-list:not([data-no-cycle]) li {
  cursor: pointer;
}
.sp-problem-list:not([data-no-cycle]) li:hover:not(.is-on) {
  background: #ddd3c4;
}

/* js/subpage.js가 2초 간격으로 항목을 하나씩 순환하며 붙이는 하이라이트 상태 */
.sp-problem-list li.is-on {
  background: rgba(184, 128, 31, 0.2);
}
.sp-problem-list li.is-on .sp-problem-check {
  background: #b8811f;
  border-color: #b8811f;
  color: #fff;
}
.sp-problem-item-body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.sp-problem-check {
     flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid;
    color: #b8811f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}
.sp-problem-list strong {
    flex: 0 0 100px;
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
}
.sp-problem-list p {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sub);
}
.sp-problem-media {
  position: relative;
  /* .sp-section-inner의 좌측 여백(중앙정렬 마진 + 20px padding)만큼 flex-basis를 늘리고
     margin-left에서 똑같이 빼서, outer size(basis+margin)는 원래 42%와 동일하게 유지된다.
     즉 오른쪽 텍스트의 위치/너비는 전혀 영향받지 않으면서, 사진만 화면 왼쪽 끝까지 뚫고 나간다 */
  flex: 0 0 calc(42% + max(20px, (100vw - 1520px) / 2 + 20px));
  /* 고정 높이 대신 부모 flex 행의 높이(= 오른쪽 텍스트/체크리스트 높이)에 맞춰 늘어나서
     항목 개수가 많은 페이지에서도 사진 아래 여백이 남지 않게 한다 */
  min-height: 680px;
  /* 위/아래: .sp-section-inner의 상하 padding(120px)만큼 튀어나와 section.alt 배경 끝에 맞닿음
     (align-items:stretch가 음수 margin만큼 콘텐츠 높이를 자동으로 늘려줌)
     왼쪽: 위 flex-basis에서 늘린 만큼 그대로 당겨서 뷰포트 왼쪽 끝까지 풀블리드
     오른쪽: 0 유지 → 텍스트와의 기존 간격은 그대로 */
  margin: -120px 0 -120px calc(-1 * max(20px, (100vw - 1520px) / 2 + 20px));
}
/* 제모 페이지처럼 체크리스트가 3개뿐이라 사진 높이가 다른 시술부위 섹션보다
   낮아 보이는 경우에만 최소 높이를 살짝 더 준다 */
.sp-problem-media--tall {
  min-height: 760px;
}
.sp-problem-media-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sp-problem-media-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 왼쪽 사진 위 부위 마커: js/subpage.js가 원본 이미지 좌표(data-x/data-y, 980x800 기준)를
   object-fit:cover로 실제 노출되는 영역에 맞게 매 리사이즈마다 top/left(px)로 환산해서 배치하고,
   오른쪽 체크리스트가 순환 하이라이트되는 항목과 같은 data-point를 가진 마커에 .is-on을 동기화한다. */
.sp-area-points {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.sp-area-point {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: -17px 0 0 -17px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(75, 52, 35, 0.1);
  box-shadow: 0 1px 4px rgba(43, 33, 24, 0.1);
  transition: transform .5s ease, background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.sp-area-point.is-on {
  background: #b8811f;
  border-color: #b8811f;
  animation: sp-area-point-pulse 2s ease-out infinite;
}
@keyframes sp-area-point-pulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 129, 31, 0.45); }
  70% { box-shadow: 0 0 0 14px rgba(184, 129, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 129, 31, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-area-point { transition: none !important; animation: none !important; }
}
/* 점 대신 상/중/하 같은 큰 구간(박스)으로 나누는 변형: 사진 자체는 항상 흑백이고,
   활성 구간(.sp-area-zone.is-on)만 같은 사진을 컬러로 잘라 그 위에 겹쳐 보여준다.
   위치/크기/배경 좌표는 js/subpage.js의 layoutAreaPoints가 object-fit:cover로 실제
   노출되는 영역에 맞춰 계산한다. */
.sp-problem-media-visual--zones img {
  filter: grayscale(0.7);
}
.sp-area-zone {
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .6s ease;
}
.sp-area-zone.is-on {
  opacity: 1;
  box-shadow: inset 0 0 0 1px #b8811f;
}
@media (prefers-reduced-motion: reduce) {
  .sp-area-zone { transition: none !important; }
}
/* 사각 구간 대신 부위별로 완전히 다른 사진을 통째로 교체하는 변형(제모 시술 부위 등):
   4장의 사진을 같은 자리에 겹쳐두고, 체크리스트와 같은 data-point를 가진 사진만
   .sp-area-photo.is-on으로 보여준다. 좌표 계산 없이 단순 opacity 전환만 사용한다. */
.sp-problem-media-visual--photobox {
  position: relative;
}
.sp-area-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.sp-area-photo.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .sp-area-photo { transition: none !important; }
}
/* 오른쪽 텍스트: 제목/체크리스트 각 항목이 각자 "자기 위치"가 스크롤로 화면에 들어올 때마다
   개별적으로 아래에서 위로 올라오며 나타난다 (부모 하나가 아니라 각 요소에 .sp-reveal을 걸어
   subpage.js의 공용 IntersectionObserver가 각각 따로 관찰하게 함 → 스크롤 범위에 맞춰 하나씩 등장) */
.sp-area-heading-eyebrow.sp-reveal,
.sp-area-heading-title.sp-reveal,
.sp-problem-list li.sp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.sp-area-heading-eyebrow.sp-reveal.is-visible,
.sp-area-heading-title.sp-reveal.is-visible,
.sp-problem-list li.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-area-heading-eyebrow.sp-reveal,
  .sp-area-heading-title.sp-reveal,
  .sp-problem-list li.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 왼쪽 사진: 오른쪽 텍스트와 별개로 화면 왼쪽에서 슬라이드되며 등장 (transform은 풀블리드용
   margin과 별개 속성이라 서로 간섭하지 않음) */
.sp-problem-media.sp-reveal {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s ease, transform .7s ease;
}
.sp-problem-media.sp-reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-problem-media.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}






/* ---------------- 섹션 공통 ---------------- */
.sp-section {
  position: relative;
  max-width: 1520px;
  margin: 0 auto;
  padding: 120px 20px;
}
.sp-section.alt {
  max-width: none;
  padding: 0;
  background: #f0ebe3;
  z-index: 2;
}
.sp-section.alt .sp-section-inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: 120px 20px;
}

/* 시술 목적별 분류 섹션: 바로 아래 시술 부위 섹션과 배경 톤을 살짝 구분 */
.sp-section.sp-section--purpose-bg {
  background: url('../img/botox_mid_bg.jpg') center / cover no-repeat;
}

/* 하이린소개 : 핵심가치 섹션 배경 이미지 */
.sp-section--value-bg {
  background: url('../img/value_bg.jpg') center / cover no-repeat;
}

/* 가격 섹션 전용: 배경 이미지를 화면 끝까지 꽉 채우고, 안쪽 콘텐츠만 다시 1520px로 가운데 정렬 */
.sp-section--price-bg {
  max-width: none;
  padding: 0 !important;
  background: url('../img/price_bg.jpg') center / cover no-repeat;
      background-attachment: fixed;
}
.sp-section--price-bg .sp-section-inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: 120px 20px;
}
/* 배경 이미지 위에 바로 얹히는 제목/부제만 중앙 정렬 + 흰색으로 (다른 섹션의 .sp-label에는 영향 없음) */
.sp-section--price-bg .sp-label {
  text-align: center;
}
.sp-section--price-bg .sp-label-text,
.sp-section--price-bg .sp-label-sub {
  color: #fff;
  font-weight: 300;
}
.sp-section--price-bg .sp-label-sub b{
  font-weight: 600;
}
.sp-label{
  margin-bottom: 65px;
}
.sp-reveal .sp-label-text{
  font-size: 50px;
}
.sp-label-text {
  font-size: 70px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    line-height: 1;
    font-weight: 500;
    display: block;
}
.sp-label-sub{
  display: block;
   margin-top: 30px;
    font-size: 18px;
    color: var(--ink);
    opacity: .9;
}
.sp-label.sp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.sp-label.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-label.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}






.sp-area-heading {
  margin-bottom: 65px;
}
/* 이 제목 아래에 풀블리드 이미지가 바로 이어지는 섹션 전용: section-inner의 공용 하단 패딩(120px)을
   여기서만 없애서 다른 alt 섹션(예: FAQ)의 여백에는 영향을 주지 않는다 */
.sp-section.alt .sp-section-inner.sp-area-heading-inner {
  padding-bottom: 0;
}
.sp-area-heading-eyebrow {
     font-size: 24px;
    color: var(--sub);
    margin-bottom: 20px;
        font-family: 'Cormorant Garamond', Georgia, serif;
}
.sp-area-heading-title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------------- 시술 기기 : 헤드라인 + 아이콘 그리드 ---------------- */
/* 가로선/세로선이 섹션 패딩에 밀리지 않고 테두리까지 꽉 차게: 섹션 자체 패딩은 없애고,
   콘텐츠(.sp-device-hero)에 그 패딩을 그대로 옮겨서 시각적으로는 동일한 여백을 유지한다. */
.sp-section--device-frame {
  padding: 0;
}
.sp-section--device-frame .sp-device-hero {
  padding: 120px 20px 120px 60px;
}


.sp-device-hero-left::before {
     content: '';
    position: absolute;
    top: 90%;
    width: 200vw;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    height: 1px;
   background-color: rgba(0, 0, 0, 0.06);
}
.sp-device-hero-left::after {
  content: '';
  position: absolute;
  top: -120px;
  left: -40px;
  width: 1px;
  height: 100vh;
background-color: rgba(0, 0, 0, 0.06);
}
.sp-device-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 56px;
}
.sp-device-hero-left {
  width: 30%;
  position: sticky;
  top: calc(var(--header-h) + 40px);
  padding: 64px 0;
}
.sp-device-hero-eyebrow {
  font-size: 24px;
  color: var(--sub);
  margin-bottom: 22px;
      font-family: 'Cormorant Garamond', Georgia, serif;
}
.sp-device-hero-title {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.sp-device-hero-left .sp-badges {
  margin-top: 28px;
}
.sp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sp-badge {
  font-size: 16px;
  font-weight: 600;
  padding: 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
}
.sp-device-hero-right {
  display: flex;
  width: 66%;
  padding: 64px 0;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 100px 40px;
}
.sp-device-spec-item {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 45%;
  position: relative;
  padding: 36px 32px;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
/* 시술 종류 카드 공통 수정자: 아이콘은 카드 오른쪽 상단, 텍스트는 아이콘 아래 왼쪽 정렬.
   보톡스 분류 카드와 톤을 맞추려고 흰 배경 + 폴드 컷 + 폰트 스타일만 가져오고,
   아이콘/지그재그 배치는 원래대로 유지한다 (다른 서브페이지의 .sp-device-spec-item에는 영향 없음). */
.sp-device-hero-right--type .sp-device-spec-item {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 26px 26px 36px 36px;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
/* 카드가 같은 선에서 시작하지 않고 짝수 번째 열만 아래로 내려 교차되게 배치 */

.sp-device-hero-right--type .sp-device-spec-avatar {
  order: -1;
  align-self: flex-end;
}

.sp-device-hero-right--type .sp-device-spec-title {
  font-size: 28px;
  font-weight: 500;
}


/* 스킨케어처럼 아이콘 없이 여러 항목을 3열로 나열하는 종류 카드 전용 (다른 서브페이지의 기본 스타일에는 영향 없음) */
.sp-device-hero-right--list {
  gap: 56px 32px;
  width: 64%;
}
.sp-device-hero-right--list .sp-device-spec-item {
  width: 30%;
  gap: 16px;
}

/* 보톡스/필러/바디/컨투어링: 왼쪽 소개는 고정(sticky)된 채, 오른쪽에는 지그재그 대신
   .sp-device-card(진한 배경 카드 + 우측 상단 장식 아이콘)를 2열 그리드로 배치한다. */
.sp-device-hero-right.sp-device-hero-right--cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 170px 40px;
  align-content: start;
  padding-bottom: 140px;
}
/* 오른쪽 열 카드를 아래로 내려 두 열이 교차되는 느낌을 준다. transform은 그리드
   트랙 크기에 영향을 주지 않으므로, 아래로 밀린 만큼 부모에 padding-bottom을 더해둔다.
   이 오프셋은 --stagger-y 변수로 넘겨서 아래 스크롤 reveal의 transform과 함께 합성한다
   (둘 다 transform을 직접 쓰면 나중 규칙이 앞 규칙을 통째로 덮어써 버리기 때문). */
.sp-device-hero-right--cards .sp-device-card:nth-child(even) {
  --stagger-y: 170px;
}
.sp-device-spec-desc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.7;
  color: var(--sub);
}
.sp-device-spec-desc-list li {
  position: relative;
  padding-left: 14px;
}
.sp-device-spec-desc-list li::before {
  content: '-';
  position: absolute;
  left: 0;
}

.sp-device-spec-avatar {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-device-spec-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 아직 실제 장비 아이콘이 없는 서브페이지용 자리표시자 */
.sp-device-spec-avatar--placeholder {
  border-radius: 50%;
  border: 1.5px dashed rgba(43, 33, 24, 0.35);
}
.sp-device-spec-eng {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #b8811f;
    margin-bottom: 5px;
}
.sp-device-spec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 15px;
}
.sp-device-spec-num {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-device-spec-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--sub);
}

/* 좌측(sticky) 이름/설명은 아래에서 위로, 우측 카드들은 각자 화면에 들어올 때마다
   하나씩 아래에서 위로 올라오며 등장한다 */
.sp-device-hero-eyebrow.sp-reveal,
.sp-device-hero-title.sp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.sp-device-hero-eyebrow.sp-reveal.is-visible,
.sp-device-hero-title.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sp-device-spec-item.sp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.sp-device-spec-item.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-device-hero-eyebrow.sp-reveal,
  .sp-device-hero-title.sp-reveal,
  .sp-device-spec-item.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------- 시술 기기 : 탭 전환형(장비별 상세 패널) ----------------
   위 .sp-device-hero(아이콘 그리드)와는 별도의 마크업/클래스를 쓰는 전용 컴포넌트라
   다른 서브페이지가 쓰는 .sp-device-hero 계열 스타일에는 영향이 없다.
   .sp-section의 기본 1520px 폭 제한은 이 섹션(탭/테크놀로지/시술부위)만 풀어서
   화면 전체 너비를 쓰게 한다 (다른 .sp-section 사용처에는 영향 없음). */
.sp-section.sp-device-showcase {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.sp-device-showcase-tabs-sentinel {
  height: 0;
}
.sp-device-showcase-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 70px;
  padding-top: 60px;
  background: var(--bg);
  border-bottom: 1px solid rgba(43, 33, 24, 0.12);
  transition: padding-top .2s ease;
}
/* 헤더 아래 붙어서 따라다니는 상태(js/subpage.js가 IntersectionObserver로 판단)에서는
   공간을 너무 많이 차지하지 않도록 위쪽 padding을 없앤다. 처음 등장할 때(sticky가
   아직 안 붙었을 때)는 기존 padding-top: 60px 그대로 유지된다. */
.sp-device-showcase-tabs.is-stuck {
  padding-top: 0;
}
.sp-device-tab {
  position: relative;
  padding: 20px;
  font-size: 17px;
  font-weight: 500;
  color: var(--sub);
  transition: color .2s ease;
}
.sp-device-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #b8811f;
  transform: scaleX(0);
  transition: transform .25s ease;
}
.sp-device-tab:hover {
  color: #b8811f;
}
.sp-device-tab.is-active {
  color: #b8811f;
  font-weight: 700;
}
.sp-device-tab.is-active::after {
  transform: scaleX(1);
}

.sp-device-panel {
  display: none;
  flex-direction: column;
}
.sp-device-panel.is-active {
  display: flex;
}

.sp-device-panel-top {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  /* 장비마다 설명 글자 수가 달라 텍스트 열 높이가 들쭉날쭉해지는 것을 막기 위해,
     사진 열(.sp-device-panel-media, 4:3 고정 비율)이 실제로 차지하는 높이만큼
     최소 높이를 맞춰준다. 탭을 바꿔도 이 섹션 전체 높이가 같아서 아래 섹션들의
     시작 위치가 흔들리지 않는다. */
  min-height: 560px;
}
.sp-device-panel-text {
  position: relative;
  width: 50%;
}
.sp-device-panel-logo {
  position: relative;
  display: block;
  width: 240px;
  margin-bottom: 30px;
}
.sp-device-panel-title {
  position: relative;
  font-size: 50px;
  font-weight: 700;
  color: var(--ink);
}
.sp-device-panel-desc {
  font-size: 18px;
  line-height: 1.8;
  color: var(--ink);
  margin: 30px 0 50px;
}
.sp-device-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sp-device-panel-tag {
       padding: 10px;
    border-radius: 999px;
    width: 150px;
    height: 150px;
    background: #efe7dc;
    color: #624120;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.sp-device-panel-media {
    width: 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: url(../img/laser_bg.jpg) center / cover no-repeat;
    overflow: hidden;
    height: 680px;
    --fold: 50px;
    clip-path: polygon(var(--fold) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fold));
    position: relative;
}
.sp-device-panel-media img {
      width: auto;
    height: 100%;
    filter: drop-shadow(5px 5px 5px rgba(75, 52, 35, 0.2));
}

/* 장비 사진 위 정품인증 뱃지 */
.sp-device-cert-badge {
  position: absolute;
    right: 40px;
    bottom: 40px;
    width: 200px !important;
    height: auto !important;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.05)) !important;
}

.sdpt-bg{
      background: url(../img/value_bg.jpg) center / cover no-repeat;
}
/* 시술 부위(.sp-device-area) 섹션 배경: 같은 페이지의 장비 사진 배경(.sp-device-panel-media)과
   동일한 톤의 은은한 그라데이션을 깔아 톤을 맞춘다. */
.sda-bg {
  background: linear-gradient(135deg, #fdf1e4 0%, #f7f4ef 55%, #f3ece3 100%);
}
.sp-device-panel-tech-heading {
 text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 42px;
    color: var(--ink);
    margin-bottom: 50px;
}
.sp-device-panel-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.sp-device-panel-tech-media {
  width: 100%;
  aspect-ratio: 4 / 2.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-device-panel-tech-media img {
  max-width: 55%;
  max-height: 60%;
  object-fit: contain;
  opacity: .55;
}
/* 울쎄라피 프라임 Technology처럼 흐린 와이어프레임 아이콘 대신 실제 장비 사진/일러스트를
   쓰는 경우: 작게 줄이고 흐리게 처리하던 기본값을 풀어 박스를 꽉 채워 보여준다. */
.sp-device-panel-tech-media--photo img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  border-radius: 10px;
}
/* 젠틀맥스처럼 항목이 4개라 한 줄에 다 들어와야 하는 경우 */
.sp-device-panel-tech-grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
/* 흰 박스 없이 아이콘만 왼쪽 정렬로 보여주는 변형 */
.sp-device-panel-tech-media--bare {
  width: auto;
  aspect-ratio: auto;
  background: none;
  justify-content: flex-start;
  margin-bottom: 24px;
}
.sp-device-panel-tech-media--bare img {
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
  opacity: 1;
}
/* 폴드컷 화이트 카드형 변형(예: 젠틀맥스): 항목마다 카드 배경을 깔고, 아이콘을 맨 위
   왼쪽에 크게 보여준 다음 제목/설명이 그 아래로 이어진다. */
.sp-device-panel-tech-grid--cards {
  gap: 24px;
}
.sp-device-panel-tech-grid--cards .sp-device-panel-tech-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 36px 32px;
  --fold: 28px;
  clip-path: polygon(var(--fold) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fold));
}
.sp-device-panel-tech-grid--cards .sp-device-panel-tech-media {
  order: 0;
  position: static;
  align-self: flex-start;
  width: 68px;
  aspect-ratio: auto;
  background: none;
  margin-bottom: 24px;
}
.sp-device-panel-tech-grid--cards .sp-device-panel-tech-media img {
  width: 60px;
  height: 60px;
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
  opacity: 1;
}
.sp-device-panel-tech-grid--cards .sp-device-panel-tech-title {
    order: 1;
    font-size: 22px;
    margin: 0 0 16px;
    border-bottom: 1px solid rgba(43, 33, 24, 0.1);
    padding-bottom: 16px;
}
.sp-device-panel-tech-grid--cards .sp-device-panel-tech-desc {
  order: 2;
  flex: 1;
  font-size: 16px;
  margin: 0;
}
.sp-device-panel-tech-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
 margin: 35px 0;
 position: relative;
}
.sp-tech-step-num {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent);
    position: absolute;
    right: 0;
    top: 8px;
}
.sp-tech-step-name {
  display: block;
}
.sp-device-panel-tech-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--sub);
}

/* 시술 기기 탭 내부: 장비별 시술 부위 캐러셀 (이전/다음, 자동재생) */
.sp-device-area {
  display: grid;
  grid-template-columns: 24% 46% 30%;
  gap: 25px;
  align-items: center;
  padding: 120px 20px 0;
  height: 96vh;
}
/* 그리드 아이템의 기본 min-width는 auto라서, 내용(체크리스트 문구 등)의 최소 크기가
   트랙 비율(예: 오른쪽 30%)보다 크면 트랙이 그만큼 밀려나 튀어나온다. min-width:0으로
   내용이 grid-template-columns가 정한 폭 안에서 줄바꿈되도록 한다. */
.sp-device-area-head,
.sp-device-area-media,
.sp-device-area-info {
  min-width: 0;
}
.sp-device-area-eyebrow {
  font-size: 26px;
  color: var(--accent);
  margin-bottom: 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.sp-device-area-heading {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 80px;
}
.sp-device-area-media {
  align-self: end;
}
.sp-device-area-head {
  transform: translateY(-20px);
}
.sp-device-area-info {
  transform: translateY(-48px);
}
.sp-device-area-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 울쎄라피 프라임 전용: 깊이(mm) 탭에 맞춰 가운데 사진도 함께 바뀐다.
   다른 장비 탭은 사진이 하나뿐이라 이 클래스 자체가 없어 영향이 없다. */
.sp-device-area-media-panel {
  display: none;
}
.sp-device-area-media-panel.is-active {
  display: block;
  animation: sp-depth-fade .35s ease;
}

.sp-device-depth-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.sp-device-depth-tab {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease;
}
.sp-device-depth-tab.is-active {
  background: var(--ink);
  color: #fff;
}
.sp-device-depth-panel {
  display: none;
}
.sp-device-depth-panel.is-active {
  display: block;
  animation: sp-depth-fade .35s ease;
}
.sp-device-depth-heading {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.sp-device-depth-specs {
  margin: 0;
  border-top: 2px solid var(--ink);
}
.sp-device-depth-spec {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 4px;
  border-bottom: 1px solid rgba(43, 33, 24, 0.12);
}
.sp-device-depth-spec dt {
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.sp-device-depth-plus {
  font-size: 18px;
  color: var(--sub);
}
.sp-device-depth-spec dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sub);
  word-break: keep-all;
}

/* 사진 오른쪽의 깊이별 추천부위 카드: 부위명을 제목으로 올리고 그 아래 효과만
   나란히 정렬한다. 탭에서 고른 깊이(data-depth-target)에 맞는 카드만 보이며,
   나머지 장비 탭에는 이 마크업 자체가 없어 영향이 없다. */

.sp-device-area-info-panel {
  display: none;
}
.sp-device-area-info-panel.is-active {
  display: block;
  animation: sp-depth-fade .35s ease;
}

@keyframes sp-depth-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-device-area-media-panel.is-active,
  .sp-device-depth-panel.is-active,
  .sp-device-area-info-panel.is-active {
    animation: none;
  }
}
.sp-device-area-info-title {
     font-size: 34px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 30px;
    word-break: keep-all;
}
.sp-device-area-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-device-area-info-item {
  display: flex;
  align-items: center;
  gap: 14px;
      background: #e8e0d5;
    padding: 20px;
    border-radius: 10px;
}
.sp-device-area-info-check {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid;
  color: #b8811f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.sp-device-area-info-item p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sub);
  white-space: nowrap;
  word-break: keep-all;
}





/* ---------------- 시술 기기 : 카테고리별 카드 그리드 (스킨케어/스킨부스터처럼
   장비·시술 종류가 많은 페이지 전용). 탭 없이 카테고리를 위아래로 쭉 나열하고,
   각 카테고리 맨 앞에는 어두운 소개 타일을 둔다. ---------------- */
.sp-skin-categories {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}
.sp-skin-cat-grid {
  display: grid;
  grid-template-columns: 0.75fr repeat(3, 1fr);
  gap: 24px;
}
.sp-skin-cat-intro {
     grid-row: span 2;
    background: var(--ink);
    color: #fff;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    --fold: 30px;
    clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, var(--fold) 1000%, 0 calc(100% - var(--fold)));
}
.sp-skin-cat-grid--compact .sp-skin-cat-intro {
  grid-row: span 1;
}
.sp-skin-cat-intro-eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 5px;
}
.sp-skin-cat-intro-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}
.sp-skin-item {
  background: #eceae4;
  padding: 50px 40px;
}
.sp-skin-item-eyebrow {
  font-size: 16px;
  font-weight: 600;
  color: #b8811f;
  display: none;
}
.sp-skin-item-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 15px;
    word-break: keep-all;

}
.sp-skin-item-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--sub);
  word-break: keep-all;
}
/* 카테고리 소개 타일과 항목 카드가 화면에 들어올 때 아래에서 위로 페이드인.
   .sp-reveal은 클래스만 붙여선 아무 효과가 없고, 대상마다 이렇게 opacity/transform을
   짝지어 정의해야 js/subpage.js가 붙이는 .is-visible에서 실제로 애니메이션된다. */
.sp-skin-cat-intro.sp-reveal,
.sp-skin-item.sp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.sp-skin-cat-intro.sp-reveal.is-visible,
.sp-skin-item.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-skin-cat-intro.sp-reveal,
  .sp-skin-item.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}




/* ---------------- 시술 기기 : 항목이 적은 페이지(보톡스/필러/바디/컨투어링) 전용 카드 그리드.
   카테고리 타일 없이 카드만 나열하고, 기존 지그재그 배치에 쓰던 장식용 와이어프레임 아이콘은
   카드 우측 상단에 작게 유지한다. .sp-skin-* 와는 별개 클래스라 스킨케어/스킨부스터에는 영향 없다. */
.sp-device-cards {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.sp-device-card {
      background: #f0eee8;
    padding: 40px 30px;
    position: relative;
        --fold: 28px;
    clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, var(--fold) 1000%, 0 calc(100% - var(--fold)));
}
.sp-device-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sp-device-card-eng {
  font-size: 16px;
  font-weight: 600;
  color: #274c79;
}
.sp-device-card-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  word-break: keep-all;
  margin: 5px 0 36px;
}
.sp-device-card-icon {
  flex: 0 0 55px;
  width: 55px;
  height: 55px;
  position: relative;
}
.sp-device-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .25s ease;
  animation: sp-device-card-icon-float 3.5s ease-in-out infinite;
}
@keyframes sp-device-card-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* 마우스 오버하면 와이어프레임 아이콘은 사라지고 대각선 화살표가 대신 나타난다.
   실제 화살표 엘리먼트를 마크업에 추가하는 대신, 아이콘 자리에 SVG 배경을 얹은
   ::after로 처리해서 기존 카드 마크업을 건드리지 않고 모든 카드에 일괄 적용한다.
   background-position을 top right로 줘서 카드 패딩만 남기고 화살표가 영문 라벨과
   같은 줄, 카드 우측 끝에 최대한 붙도록 한다. */
.sp-device-card-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23274c79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H8M17 7V16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 36px 36px;
  transition: opacity .25s ease;
  top: -2px;
}
.sp-device-card-desc {
  font-size: 17px;
  line-height: 1.8;
  color: var(--sub);
  word-break: keep-all;
}
/* 카드 마우스 오버: 배경을 accent 색으로 채우고, 텍스트는 전부 흰색으로, 아이콘은
   와이어프레임 대신 대각선 화살표로 바뀐다. */
.sp-device-card:hover .sp-device-card-icon img {
  opacity: 0;
}
.sp-device-card:hover .sp-device-card-icon::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .sp-device-card-icon img {
    animation: none !important;
  }
}
/* 카드가 화면에 들어올 때 아래에서 위로 페이드인. 마크업에는 이미 sp-reveal이 붙어있지만
   이 규칙이 없으면 js/subpage.js가 붙이는 .is-visible이 아무 효과도 내지 못한다. */
.sp-device-card.sp-reveal {
  --stagger-y: 0px;
  opacity: 0;
  transform: translateY(calc(var(--stagger-y) + 28px));
  transition: opacity .6s ease, transform .6s ease;
}
.sp-device-card.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(var(--stagger-y));
}
@media (prefers-reduced-motion: reduce) {
  .sp-device-card.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}




/* 클릭하면 자세히 보기 팝업이 뜨는 카드(.sp-device-card-detail template이 있는 카드)에
   손모양 커서 + hover 시 그림자를 준다. js/subpage.js가 이 클래스를 자동으로 붙여준다.
   주의: 이 카드는 스크롤 reveal(.sp-reveal)과 교차 배치용 오프셋(--stagger-y)이 이미
   transform을 쓰고 있어서, hover에서 transform으로 "뜨는" 효과를 더하면 서로 덮어써
   버린다. 그래서 여기서는 transform 대신 box-shadow만으로 hover를 표현한다. */
.sp-device-card--clickable {
  cursor: pointer;
  transition: box-shadow .2s ease;
}


/* ---------------- 장비 카드 "자세히 보기" 팝업 ---------------- */
.sp-device-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sp-device-modal.is-open {
  display: flex;
}
.sp-device-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 20, 14, 0.55);
}
.sp-device-modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  overflow-y: auto;
  background: #fff;
  --fold: 28px;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, var(--fold) 1000%, 0 calc(100% - var(--fold)));
  padding: 48px 40px;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
.sp-device-modal.is-open .sp-device-modal-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sp-device-modal-close {
  position: absolute;
  top: 36px;
  right: 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(43, 33, 24, 0.06);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  transition: background-color .2s ease, color .2s ease;
}
.sp-device-modal-close::before {
  content: "";
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transform: rotate(45deg);
}
.sp-device-modal-close:hover {
  background: rgba(43, 33, 24, 0.12);
  color: var(--ink);
}
.sp-device-modal-eng {
    font-size: 16px;
    font-weight: 600;
    color: #274c79;
  margin-bottom: 5px;
}
.sp-device-modal-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(43, 33, 24, 0.1);
}
.sp-device-modal-desc {
  font-size: 17px;
  line-height: 1.8;
  color: var(--sub);
  word-break: keep-all;
}



/* ---------------- 사진 확대 보기 팝업(라이트박스) ----------------
   .sp-lightbox-item(썸네일)을 클릭하면 같은 그룹의 사진들을 모아 크게 보여주고,
   좌우 화살표/키보드로 그룹 내 다른 사진으로 넘길 수 있다. */
.sp-lightbox-item {
  cursor: pointer;
}
.sp-lightbox-item img {
  transition: transform .35s ease;
}
.sp-lightbox-item:hover img {
  transform: scale(1.04);
}

.sp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
}
.sp-lightbox.is-open {
  display: flex;
}
.sp-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 10, 0.92);
}
.sp-lightbox-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 64px;
}
/* 이미지 크기에 맞춰 그대로 감싸는 프레임. 닫기/화살표/카운터를 화면 가장자리가
   아니라 이 프레임(=실제 이미지 크기) 기준으로 붙여서, 사진이 작든 크든 항상
   사진 바로 옆에서 눌리도록 한다. */
.sp-lightbox-frame {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}
.sp-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .25s ease, transform .25s ease;
}
.sp-lightbox.is-open .sp-lightbox-img {
  opacity: 1;
  transform: scale(1);
      --fold: 24px;
    clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, var(--fold) 1000%, 0 calc(100% - var(--fold)));
}
.sp-lightbox-close,
.sp-lightbox-nav {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: rgba(20, 14, 10, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.sp-lightbox-nav{ background: none}
.sp-lightbox-close:hover{
  background: rgba(20, 14, 10, 0.78);
}
.sp-lightbox-close {
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  font-size: 0;
}
.sp-lightbox-close::before {
  content: "";
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transform: rotate(45deg);
}
.sp-lightbox-nav {
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  font-size: 0;
  opacity: .7;
  transition: all .3s;
}
.sp-lightbox-nav:hover{opacity: 1;}
.sp-lightbox-nav::before {
  content: "";
  width: 18px;
  height: 18px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.sp-lightbox-prev {
  left:  -50px;
}
.sp-lightbox-prev::before {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.sp-lightbox-next {
  right: -50px;
}
.sp-lightbox-next::before {
  transform: rotate(45deg) translate(-2px, -2px);
}
.sp-lightbox-count {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(20, 14, 10, 0.55);
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  letter-spacing: 0.02em;
  font-weight: 300;
}
.sp-lightbox-count-current{font-weight: 500;}



/* ---------------- 시술 부위 ---------------- */
.sp-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.sp-area-card {
      transition: transform .3s ease, box-shadow .3s ease;
    --fold: 28px;
    padding: 40px;
    clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, var(--fold) 100%, 0 calc(100% - var(--fold)));
}
.sp-area-card:hover {
  transform: translateY(-6px);
}
.sp-area-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 14px;
}
.sp-area-name {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
      border-bottom: 1px solid rgba(43, 33, 24, 0.1);
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.sp-area-sub {
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sub);
}

/* 핵심가치 카드 : 상단에 이미지가 들어가는 변형(하이린소개 페이지) */
.sp-area-card--photo {
  padding: 0 !important;
}
.sp-area-card-media {
  position: relative;
  height: 340px;
  background: rgba(43, 33, 24, 0.05);
}
.sp-area-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sp-area-card-body {
  position: relative;
  background: #fff;
  padding: 36px 36px 56px;
}
.sp-area-card--photo .sp-area-name {
  font-size: 22px;
     padding-bottom: 24px;
    margin-bottom: 24px;
    
}
.sp-area-card--photo .sp-area-sub {
  margin-top: 0;
  font-size: 18px;
}
.sp-area-card-num {
     position: absolute;
    right: 36px;
    bottom: 36px;
    font-size: 16px;
    font-weight: 500;
    color:#b8811f;
}

/* 카드가 각자 화면에 들어올 때마다 하나씩 아래에서 위로 등장.
   opacity/transform 트랜지션을 하나로 합쳐서 위 .sp-area-card의 hover 트랜지션과 겹치지 않게 하고,
   is-visible 상태에서도 hover 시 기존 살짝 떠오르는 효과가 유지되도록 :hover 조합을 별도로 명시한다 */
.sp-area-card.sp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .3s ease, box-shadow .3s ease;
}
.sp-area-card.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sp-area-card.sp-reveal.is-visible:hover {
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .sp-area-card.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}





/* ---------------- 시술 목적별 분류 (넘버드 패널) ---------------- */
.sp-purpose-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 60px;
}
.sp-purpose-head-title {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.sp-purpose-head-right {
  max-width: 420px;
  flex-shrink: 0;
}
.sp-purpose-head-eyebrow {
    font-size: 22px;
    font-weight: 600;
    color: var(--sub);
    font-family: 'Cormorant Garamond', Georgia, serif;
    margin-bottom: 10px;
}
.sp-purpose-head-desc {
     font-size: 16px;
    line-height: 1.75;
    color: var(--sub);
}
.sp-purpose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.sp-purpose-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}
.sp-purpose-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.sp-purpose-grid--cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sp-purpose-grid--3 .sp-purpose-item:nth-child(3n+1) {
  padding-left: 0;
  border-left: none;
}
.sp-purpose-grid--3 .sp-purpose-item:nth-child(n+4) {
  padding-top: 40px;
  border-top: 1px solid rgba(43, 33, 24, 0.1);
}
.sp-purpose-item {
  padding: 48px 36px 0 36px;
  border-left: 1px solid rgba(43, 33, 24, 0.1);
}
.sp-purpose-item:first-child {
  padding-left: 0;
  border-left: none;
}
.sp-purpose-index {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 22px;
}
.sp-purpose-name {
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 16px;
        border-bottom: 1px solid rgba(43, 33, 24, 0.1);
    padding-bottom: 16px;
}
.sp-purpose-desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--sub);
}

/* 시술 목적 섹션이 화면에 들어오면: 왼쪽 제목은 왼→오, 오른쪽 설명은 오→왼으로 서로 마주보며 등장하고
   (부모 .sp-purpose-head 하나만 .sp-reveal로 관찰하되 자식별로 반대 방향 transform을 줌),
   아래 카드 4개는 각자 화면에 들어올 때마다 아래→위로 하나씩 올라오며 등장한다 */
.sp-purpose-head.sp-reveal .sp-purpose-head-title {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s ease, transform .7s ease;
}
.sp-purpose-head.sp-reveal.is-visible .sp-purpose-head-title {
  opacity: 1;
  transform: translateX(0);
}
.sp-purpose-head.sp-reveal .sp-purpose-head-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.sp-purpose-head.sp-reveal.is-visible .sp-purpose-head-right {
  opacity: 1;
  transform: translateX(0);
}
.sp-purpose-item.sp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.sp-purpose-item.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-purpose-head.sp-reveal .sp-purpose-head-title,
  .sp-purpose-head.sp-reveal .sp-purpose-head-right,
  .sp-purpose-item.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}






/* ---------------- 하이린소개 : 좌측 이미지 + 우측 텍스트 인사말 (스크롤 연동 교체) ----------------
   섹션 자체를 스크롤 길이만큼 늘려두고(예: 340vh) 그 안의 콘텐츠(이미지+텍스트)만 position:sticky로
   고정한 뒤, subpage.js가 스크롤 진행률을 계산해 .sp-story-hero-media-layer / .sp-story-hero-line 중
   같은 순번의 것에만 .is-active를 붙였다 뗐다 하며 왼쪽 사진과 오른쪽 문장이 함께 바뀌는 것처럼 보이게 한다. */
.sp-story-hero {
  position: relative;
  height: 220vh;
}
.sp-story-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: stretch;
}
.sp-story-hero-media {
  position: relative;
  flex: 0 0 50%;
  overflow: hidden;
}
.sp-story-hero-media-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.sp-story-hero-media-layer.is-active {
  opacity: 1;
}
.sp-story-hero-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px;
}
.sp-story-hero-content .sp-label {
  margin-bottom: 20px;
}
.sp-story-hero-content .sp-label-text {
  font-size: 26px;
  color: var(--sub);
}
.sp-story-hero-title-stage {
  position: relative;
  display: grid;
  max-width: 560px;
}
.sp-story-hero-content .sp-story-title {
  grid-area: 1 / 1;
  margin: 0;
  text-align: left;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.sp-story-hero-content .sp-story-title.is-active {
  opacity: 1;
  transform: translateY(0);
}
.sp-story-hero-stage {
  position: relative;
  display: grid;
  margin-top: 40px;
  max-width: 480px;
}
.sp-story-hero-line {
  grid-area: 1 / 1;
  font-size: 18px;
  line-height: 1.7;
  color: var(--sub);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.sp-story-hero-line.is-active {
  opacity: 1;
  transform: translateY(0);
}





@media (prefers-reduced-motion: reduce) {
  .sp-story-hero-line,
  .sp-story-hero-content .sp-story-title,
  .sp-story-hero-media-layer {
    transition: none !important;
  }
}

/* ---------------- 하이린소개 : 스토리 섹션 우측 하단에 계속 떠있는 회전 뱃지 ----------------
   .sp-story-hero-sticky가 스크롤하는 동안 화면에 고정되어 있으므로, 그 안에 절대 위치로
   넣어두면 스토리 섹션을 보는 내내(사진/문구가 바뀌는 동안 포함) 계속 노출된다.
   오른쪽 플로팅 버튼(카톡상담 등, right:30px)과 겹치지 않도록 그보다 안쪽에 배치한다. */
.sp-rotating-badge {
  position: absolute;
  right: 220px;
  top: 170px;
  z-index: 5;
  width: 150px;
  height: 150px;
}
.sp-rotating-badge-ring {
  width: 100%;
  height: 100%;
  animation: sp-rotating-badge-spin 14s linear infinite;
}
.sp-rotating-badge-text {
 font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1em;
    fill: var(--sub);
    opacity: .4;
}
@keyframes sp-rotating-badge-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-rotating-badge-ring { animation: none; }
}



/* ---------------- 하이린소개 : 둘러보기 사진 그리드 ---------------- */
.sp-tour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sp-tour-item {
  position: relative;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}



/* ---------------- 하이린소개 : 의료진 소개(원장 프로필) ---------------- */
.sp-director {
  display: flex;
  align-items: stretch;
  margin: 0 80px;
}
.sp-director + .sp-director {
  margin-top: 200px;
}
.sp-director-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sp-director-top{
  padding-left: 45px;
}
.sp-director-eyebrow {
  font-size: 24px;
  color: var(--sub);
  margin-bottom: 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.sp-director-name {
  font-size: 48px;
  font-weight: 600;
  color: var(--ink);
}
.sp-director-role {
    font-size: 22px;
    margin-left: 5px;
    font-weight: 500;
    color: var(--sub);
    display: inline-block;
}
.sp-director-divider {
  width: 1px;
  height: 26px;
  background: var(--accent);
  margin: 32px 0;
}
.sp-director-intro p {
      font-size: 18px;
    margin-top: 20px;
    line-height: 1.8;
    color: var(--ink);
}
.sp-director-intro p b {
  display: inline-block;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
}
.sp-director-intro p + p {
  margin-top: 20px;
}
.sp-director-creds {
  margin-top: 60px;
  padding: 40px 45px;
  background: rgba(43, 33, 24, 0.1);
}
.sp-director-creds ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-director-creds li {
  font-size: 16.6px;
  color: var(--ink);
}
.sp-director-creds li::before {
    content: '· ';
    margin-right: 3px;
    font-weight: 600;
}
.sp-director-photo {
  position: relative;
  flex: 0 0 55%;
  overflow: hidden;
  --fold: 30px;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}
.sp-director-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 원장 사진이 1장이 아니라 3장(위 2장 가로 + 아래 1장 세로)일 때: 하이린소개 원장소개 섹션 전용 */
.sp-director-photo--trio {
}
.sp-director-photo--trio img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sp-director-photo--trio img:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.sp-director-photo--trio img:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.sp-director-photo--trio img:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* 원장 소개: 왼쪽 텍스트는 왼쪽에서, 오른쪽 사진은 오른쪽에서 서로 마주보듯 등장 */
.sp-director.sp-reveal .sp-director-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s ease, transform .7s ease;
}
.sp-director.sp-reveal.is-visible .sp-director-left {
  opacity: 1;
  transform: translateX(0);
}
.sp-director.sp-reveal .sp-director-photo {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.sp-director.sp-reveal.is-visible .sp-director-photo {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-director.sp-reveal .sp-director-left,
  .sp-director.sp-reveal .sp-director-photo {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}






/* ---------------- 하이린소개 : 둘러보기(공간 소개) ----------------
   섹션을 스크롤 길이만큼 늘려두고(예: 220vh) 안쪽 콘텐츠(제목+갤러리)는 position:sticky로
   화면에 고정한 뒤, subpage.js가 스크롤 진행률(0~1)을 구해 .sp-space-grid를
   transform:translateX(-progress * 넘치는 만큼)로 왼쪽으로 밀어서 마치 슬라이드되는 것처럼
   보이게 한다. 시작 위치(translateX:0)는 지금과 동일하고, 손가락/마우스로 직접 끄는 스크롤이
   아니라 페이지를 세로로 스크롤하는 동작 자체가 가로 이동을 트리거한다. */
.sp-space-pin {
  position: relative;
  height: 220vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.sp-space-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.sp-space-heading-wrap {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}
.sp-space-grid {
  display: flex;
  gap: 20px;
  margin-top: 0px;
  padding-left: max(20px, calc(50vw - 740px));
  will-change: transform;
}
.sp-space-item {
  flex: 0 0 420px;
}
.sp-space-item:nth-child(2) {
  flex-basis: 340px;
}
.sp-space-item--narrow {
  flex-basis: 230px;
  margin-top: 40px;
}
.sp-space-media {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: rgba(43, 33, 24, 0.05);
}
.sp-space-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-space-name {
  margin-top: 20px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--sub);
}
.sp-space-desc {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}




@media (prefers-reduced-motion: reduce) {
  .sp-space-grid { transition: none !important; }
}

.sp-pin-block-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-bottom: 28px;
}
.sp-pin-duo {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.sp-pin-duo-media {
  flex: 1;
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.sp-pin-duo-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 스크롤 진입 시 왼쪽은 여성 사진이 좌→우로, 오른쪽은 남성 사진이 우→좌로 열리는 연출 */
.sp-reveal .sp-pin-duo-media:first-child .sp-pin-duo-visual {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(.65, 0, .35, 1);
}
.sp-reveal.is-visible .sp-pin-duo-media:first-child .sp-pin-duo-visual {
  clip-path: inset(0 0 0 0);
}
.sp-reveal .sp-pin-duo-media:last-child .sp-pin-duo-visual {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.9s cubic-bezier(.65, 0, .35, 1);
}
.sp-reveal.is-visible .sp-pin-duo-media:last-child .sp-pin-duo-visual {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .sp-reveal .sp-pin-duo-visual {
    transition: none !important;
    clip-path: inset(0 0 0 0) !important;
  }
}

/* ---------------- 가격표: 상단오른쪽·하단왼쪽이 접힌 듯한 각진 배경 ---------------- */
.sp-price-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.sp-price-card {
  --fold: 28px;
  background: #fff;
  padding: 50px;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, var(--fold) 100%, 0 calc(100% - var(--fold)));
}
.sp-price-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ink);
}
.sp-price-card-symbol {
  width: auto;
  height: 20px;
}
.sp-price-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}
.sp-price-table thead tr {
  background: var(--ink);
}
.sp-price-table th {
  padding: 18px 24px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}
.sp-price-table td {
  padding: 20px 0;
  font-size: 18px;
  color: var(--sub);
  border-bottom: 1px solid rgba(43, 33, 24, 0.08);
}
.sp-price-table tr:last-child td {
  border-bottom: none;
}
.sp-price-table .td-name {
  font-weight: 500;
  color: var(--ink);
}
.sp-price-table .td-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.sp-price-table .td-unit {
    flex: 0 0 auto;
    width: 44px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}
.sp-price-table .td-amount {
      font-weight: 600;
    width: 110px;
    letter-spacing: -0.3px;
    text-align: right;
    color: var(--ink);
    font-size: 20px;
    white-space: nowrap;
}
/* 관리자에서 가격 정보를 아직 등록하지 않은 페이지: 흰 카드/표 없이
   이벤트 페이지로 유도하는 버튼만 보여준다. */
.sp-price-empty {
  text-align: center;
}
.sp-price-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s
}
.sp-price-empty-btn:hover {
  background: #fff;
  color: var(--accent);
}

.sp-price-note {
  margin-top: 50px;
  font-size: 16px;
  line-height: 1.8;
  color: #fff;
  text-align: center;
  opacity: .8;
}

/* 가격 카드: 기본은 아래에서 위로. .sp-price-duo(2개 나란히)에서는 서로 마주보듯
   왼쪽 카드는 왼쪽에서, 오른쪽 카드는 오른쪽에서 슬라이드되며 등장한다 */
.sp-price-card.sp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.sp-price-card.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sp-price-duo .sp-price-card.sp-reveal:nth-child(1) {
  transform: translateX(-40px);
}
.sp-price-duo .sp-price-card.sp-reveal:nth-child(2) {
  transform: translateX(40px);
}
.sp-price-duo .sp-price-card.sp-reveal.is-visible {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-price-card.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------- FAQ (왼쪽 제목 + 오른쪽 질문 목록) ---------------- */
.sp-faq {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  justify-content: space-between;
}
.sp-faq > .sp-label {
  flex: 0 0 320px;
  margin-bottom: 0;
}
.sp-faq > .sp-label .sp-label-text {
  color: #4B4234;
}
.sp-faq-list {
width: 65%;
  border-top: 1px solid var(--ink);
}
.sp-faq-item {
    border-bottom: 1px solid rgba(43, 33, 24, 0.16);
}
.sp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px 4px;
  text-align: left;
}
.sp-faq-q-icon {
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
}
.sp-faq-q-icon::after {
  content: '.';
}
.sp-faq-q-text {
  flex: 1;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.sp-faq-chevron {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.sp-faq-chevron::before,
.sp-faq-chevron::after {
  content: '';
  position: absolute;
  background: var(--ink);
  transition: transform .25s ease;
}
.sp-faq-chevron::before {
  left: 0; top: 50%;
  width: 100%; height: 2px;
  transform: translateY(-50%);
}
.sp-faq-chevron::after {
  top: 0; left: 50%;
  width: 2px; height: 100%;
  transform: translateX(-50%);
}
.sp-faq-item.is-open .sp-faq-chevron::after {
  transform: translateX(-50%) scaleY(0);
}

.sp-faq-a {
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  transition: max-height .3s ease, padding-bottom .3s ease;
}
.sp-faq-item.is-open .sp-faq-a {
  margin-bottom: 30px;
  
}
.sp-faq-a-inner {
  margin: 0 4px;
  padding: 40px;
  background: rgba(43, 33, 24, 0.06);
  font-size: 18px;
  line-height: 2;
}

/* 질문 항목이 각자 화면에 들어올 때마다 하나씩 아래에서 위로 올라오며 등장 */
.sp-faq-item.sp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.sp-faq-item.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-faq-item.sp-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------- 하단 상담 CTA ---------------- */
.sp-cta {
  max-width: 1520px;
  margin: 0 auto 100px;
  padding: 0 20px;
}
.sp-cta-inner {
  background: var(--accent);
  border-radius: 24px;
  padding: 56px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
}
.sp-cta-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 32px;
}
.sp-cta-sub {
  margin-top: 8px;
  font-size: 15px;
  opacity: 0.9;
}
.sp-cta-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.sp-cta-btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sp-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.sp-cta-btn--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

/* ---------------- 이벤트 게시판 ---------------- */
.sp-event-panel {
  transition: opacity 0.15s ease;
}
.sp-event-panel.is-loading {
  opacity: 0.45;
  pointer-events: none;
}
.sp-event-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  margin-bottom: 56px;
}
.sp-event-tabs {
  display: flex;
  gap: 10px;
}
.sp-event-tab {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(43, 33, 24, 0.16);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sp-event-tab:hover {
  border-color: var(--ink);
}
.sp-event-tab.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.sp-event-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.sp-event-count {
  font-size: 16px;
  color: var(--sub);
}
.sp-event-count b {
  color: var(--accent);
  font-weight: 700;
}
.sp-event-sort-form {
  display: inline-flex;
}
.sp-event-sort {
  border: none;
  background: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  padding-right: 4px;
}

.sp-event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 30px;
}
.sp-event-card {
  display: block;
}
.sp-event-thumb {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  transition: opacity .25s ease;
}
.sp-event-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sp-event-card:hover .sp-event-thumb {
  opacity: 0.85;
}
.sp-event-badge {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: #fff;
}
.sp-event-thumb .sp-event-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
}
.sp-event-badge--ongoing {
  background: var(--ink);
}
.sp-event-badge--ended {
  background: rgba(43, 33, 24, 0.5);
}
/* 하이린 웹진 전용 뱃지(관리자가 글마다 직접 지정) */
.sp-event-badge--new {
  background: var(--accent);
}
.sp-event-badge--best {
  background: #B9713F;
}
.sp-event-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 30px;
}
.sp-event-card-text {
  min-width: 0;
}
.sp-event-card-date {
  font-size: 16px;
  color: var(--sub);
}
.sp-event-card-title {
  min-width: 0;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.sp-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 70px;
}
.sp-pagination a,
.sp-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 600;
  color: var(--sub);
}
.sp-pagination a.is-current,
.sp-pagination span.is-current {
  background: var(--accent);
  color: #fff;
}
.sp-pagination.is-disabled span.is-current {
  background: rgba(43, 33, 24, 0.18);
  color: var(--sub);
  cursor: not-allowed;
}

.sp-event-detail-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sp-event-detail-divider {
  width: 120px;
  height: 1px;
  margin: 26px auto;
  background: rgba(43, 33, 24, 0.15);
}
.sp-event-detail-meta {
  font-size: 18px;
  color: var(--sub);
  padding-bottom: 28px;
}
.sp-event-detail-image {
  width: 100%;
  border-radius: 16px;
  margin-top: 32px;
}
.sp-event-detail-content {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
}
.sp-event-detail-content img {
  max-width: 100%;
  height: auto;
  display: block;
}
.sp-event-detail-content p {
  margin: 40px 0 ;
}
.sp-event-detail-content a {
  color: var(--accent);
  text-decoration: underline;
}
.sp-event-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  margin-top: 44px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

/* 이벤트 상세 페이지 좌측 고정 이전글/다음글 내비게이션 */
.sp-event-side-nav {
  position: fixed;
  left: 30px;
  bottom: 50px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 168px;
  opacity: 1;
  transition: opacity .3s ease;
}
.sp-event-side-nav.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.sp-event-side-nav-item {
  display: block;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sp-event-side-nav-item:hover {
  transform: translateY(-3px);
}
.sp-event-side-nav-thumb {
  display: block;
  height: 90px;
  background: var(--accent) center / cover no-repeat;
}
.sp-event-side-nav-body {
  display: block;
  padding: 12px;
}
.sp-event-side-nav-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.sp-event-side-nav-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}










/* ---------------- 넘버드 패널의 카드형 변형 (예: 스킨케어 여드름 관리) ----------------
   구분선으로 나열하는 기본형 대신, 항목마다 둥근 카드 배경을 깔고 번호를 우측 하단으로 옮긴다. */
/* 항목이 4개인 경우(예: 피부레이저 고민 분야) 3열 대신 4열로 배치하는 변형.
   .sp-purpose-grid--cards의 카드 스타일은 그대로 물려받는다. */
.sp-purpose-grid--cards.sp-purpose-grid--cards-4 {
  grid-template-columns: repeat(4, 1fr);
}
.sp-purpose-grid--cards .sp-purpose-item {
  position: relative;
  padding: 40px 32px;
  background: #fff;
  border: none;
  --fold: 28px;
   clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, var(--fold) 1000%, 0 calc(100% - var(--fold)));
}



.sp-purpose-grid--cards .sp-purpose-index {
  position: absolute;
  right: 32px;
  top: 45px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}




/* ---------------- 넘버드 패널의 카드형 변형 2 (예: 보톡스 분류) ----------------
   구분선 나열형 대신, sp-area-card와 같은 폴드 컷 카드 배경을 쓰고 번호를 우측 하단에
   accent 색으로 크게 표시한다. 그리드 컬럼 수는 base .sp-purpose-grid를 그대로 따른다. */
.sp-purpose-grid--cards-accent {
  gap: 24px;
}
.sp-purpose-grid--cards-accent .sp-purpose-item {
  position: relative;
  --fold: 24px;
  padding: 32px 32px 56px;
  background: #fff;
  border-left: none;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, var(--fold) 100%, 0 calc(100% - var(--fold)));
}
.sp-purpose-grid--cards-accent .sp-purpose-item:first-child {
  padding-left: 32px;
}
.sp-purpose-grid--cards-accent .sp-purpose-name {
font-size: 22px;
    font-weight: 500;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(43, 33, 24, 0.1);
}

.sp-purpose-grid--cards-accent .sp-purpose-index {
  position: absolute;
  right: 32px;
  bottom: 32px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
     color: #b8811f;
}




/* ---------------- 약관/방침류 텍스트 페이지 (개인정보처리방침, 이용약관 등) ---------------- */
.legal-wrap {
  max-width: 1000px;
  margin: 80px auto 0;
}
.legal-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(43, 33, 24, 0.16);
}
.legal-intro {
    font-size: 15px;
    line-height: 1.9;
    color: var(--sub);
    padding: 20px 24px;
    background: rgba(43, 33, 24, 0.06);
}
.legal-clauses dt {
  margin-top: 50px;
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.legal-clauses dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--sub);
}
.legal-clauses ul {
  list-style: none;
  margin: 10px 0 0;
}
.legal-clauses ul ul {
  margin-top: 6px;
  font-size: 14px;
  opacity: .8;
}
.legal-clauses li {
  list-style: none;
  margin-bottom: 4px;
}
.legal-clauses li::marker {
  content: '';
}
.legal-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.legal-table th,
.legal-table td {
  padding: 12px 14px;
  border: 1px solid rgba(43, 33, 24, 0.12);
  text-align: center;
}
.legal-table th {
  background: #F3ECE1;
  color: var(--ink);
  font-weight: 600;
}





/* ---------------- 진단서발급비용안내 ---------------- */
.legal-wrap--wide {
  max-width: 1200px;
}
.cost-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
}
.cost-heading .legal-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.cost-heading-note {
  font-size: 16px;
  color: var(--sub);
  white-space: nowrap;
}
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.cost-table th,
.cost-table td {
  padding: 18px 16px;
  text-align: center;
  border: 1px solid rgba(43, 33, 24, 0.12);
}
.cost-table thead th:first-child,
.cost-table tbody td[rowspan] {
  border-left: none;
}
.cost-table thead th:last-child,
.cost-table tbody td:last-child {
  border-right: none;
}
.cost-table thead th {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgba(43, 33, 24, 0.2);
  font-weight: 700;
  color: var(--ink);
  background: #eee2d0;
}
.cost-table tbody td {
  color: var(--sub);
  font-weight: 400;
}
.cost-table tbody td.cost-name {
  background:#f4efe8;
}
.cost-table tbody td.cost-price {
  font-weight: 500;
  color: var(--ink);
}


/* ---------------- 비급여진료비용 안내 ---------------- */
.unpaid-title {
  font-size: 34px;
  font-weight: 800;
  color: #1E4B39;
  margin: 0;
}






/* ---------------- 진료안내/오시는길 : 상담예약 + 진료시간 ---------------- */
.consult-section {
  padding-top: 120px;
  padding-bottom: 0;
}
/* 히어로 배너를 뺀 페이지: 고정 헤더에 가려지지 않도록 상단 여백 확보 */
.loc-top-section {
  padding-top: var(--header-h);
}
.sp-section--top-flush {
  padding-top: var(--header-h);
}

.loc-combo {
      display: grid;
    grid-template-columns: 1fr 1fr;
}
.loc-combo-cell--info,
.loc-combo-cell--address {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.loc-combo-cell--map {
  position: relative;
  min-width: 0;
  min-height: 460px;
  grid-row: 1 / span 2;
  overflow: hidden;
  background: rgba(43, 33, 24, 0.05);
}
.loc-combo-cell--map .loc-map {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* 지도는 왼쪽에서, 진료안내 정보는 오른쪽에서 스크롤에 맞춰 등장 */
.loc-combo.sp-reveal .loc-combo-cell--map {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .8s ease, transform .8s ease;
}
.loc-combo.sp-reveal.is-visible .loc-combo-cell--map {
  opacity: 1;
  transform: translateX(0);
}
.loc-combo.sp-reveal .loc-combo-cell--info {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .8s ease .12s, transform .8s ease .12s;
}
.loc-combo.sp-reveal.is-visible .loc-combo-cell--info {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .loc-combo.sp-reveal .loc-combo-cell--map,
  .loc-combo.sp-reveal .loc-combo-cell--info {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.loc-title {
     font-size: 26px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* 주차/진료시간/전화 라벨 아이콘: 라벨 텍스트 없이 png 아이콘만 보여준다 */
.loc-title-icon-img {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.consult-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.consult-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
  padding: 0 24px;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}
.consult-btn:hover {
  transform: translateY(-2px);
}
.consult-btn--light {
  background: #f2df34;
  color: #3C1E1E;
}
.consult-btn--dark {
  background: #03c458;
}
.consult-arrow {
  font-size: 22px;
  font-weight: 500;
}
.consult-contact {
  margin-top: 0;
  padding-top: 80px;
  padding-right: max(60px, calc((100vw - 1520px) / 2 + 20px));
  padding-bottom: 70px;
  padding-left: 70px;
}
.consult-symbol {
  display: block;
  height: 25px;
  width: auto;
  margin-bottom: 24px;
}
.consult-phone {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}
.consult-hours {
  display: flex;
  gap: 110px;
    padding: 70px 70px 80px;
        background:#f0ebe3;
}
.consult-hours-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.consult-hours-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.consult-hours-list p {
  display: flex;
  align-items: baseline;
  gap: 40px;
}
.consult-hours-label {
  display: flex;
  justify-content: space-between;
  flex: 0 0 80px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.consult-hours-list p > span:last-child {
  font-size: 19px;
  font-weight: 500;
  color: var(--sub);
}
.consult-hours-note {
     margin: 0;
    font-size: 16px;
    color: var(--sub);
    opacity: .8;
    margin-top: 5px;
    border-bottom: 1px solid;
    width: fit-content;
}

.loc-map {
  position: relative;
  height: 420px;
  overflow: hidden;
}
.loc-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 카카오맵 지도 퍼가기(roughmap) - 상단 타이틀바 / 하단 주소·전화 정보창 숨기기.
   가로만 반응형으로 채우고, 세로는 CSS로 강제로 늘리지 않는다
   (강제로 늘리면 위젯 내부 확대/축소 버튼 등 절대좌표 배치가 깨짐 — index.php location-map과 동일한 이유) */
.loc-map .root_daum_roughmap .cont,
.loc-map .root_daum_roughmap .wrap_controllers {
  display: none !important;
}
.loc-map .root_daum_roughmap {
  width: 100% !important;
  height: 100% !important;
}
.loc-map .root_daum_roughmap iframe {
  width: 100% !important;
}
.root_daum_roughmap .wrap_map{height: 100%;}
.loc-map .root_daum_roughmap * {
  max-width: none;
}
.loc-panel-address {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.loc-address-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
/* 주소 복사 버튼: 아이콘만 깔끔하게 두고, 클릭 시 아이콘이 체크로 바뀌면서
   위에 "복사되었습니다" 말풍선이 잠깐 떴다가 사라진다 (js/subpage.js가 .is-copied 토글) */
.loc-copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  color: var(--sub);
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.loc-copy-btn:hover {
  color: var(--ink);
}
.loc-copy-btn-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .2s ease, transform .2s ease;
}
.loc-copy-btn-icon--check {
  opacity: 0;
  color: #b8811f;
  transform: translate(-50%, -50%) scale(.6);
}
.loc-copy-btn.is-copied {
  color: #b8811f;
  transform: scale(1.08);
}
.loc-copy-btn.is-copied .loc-copy-btn-icon--copy {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
}
.loc-copy-btn.is-copied .loc-copy-btn-icon--check {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.loc-copy-btn-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 6px);
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.loc-copy-btn.is-copied .loc-copy-btn-toast {
  opacity: 1;
  transform: translate(-50%, 0);
}


.loc-panel-btn {
  margin-top: 28px;
  align-self: flex-start;
  padding: 0 32px;
  border-radius: 999px;
}
/* 지도 바로가기 : var(--ink) 테두리로 통일한 알약형 버튼 */
.loc-map-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
.loc-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 22px 0 20px;
  border-radius: 999px;
  border: 1px solid #2b21183b;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.loc-map-btn:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: #fff;
}
.loc-map-btn img {
  width: 24px;
  height: 24px;
}
.loc-map-btn--naver img{
    width: 20px;
    height: auto;
}
/* 주차안내 강조 카드 : 오시는길 페이지에서 가장 먼저 눈에 띄어야 하는 정보라 주소보다 위에 배치.
   카드 하나를 반으로 나눠 왼쪽은 흰 배경의 텍스트 영역, 오른쪽은 주차장 사진 자리로 쓴다. */
.loc-parking-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  margin-top: 60px;
  --fold: 28px;
  clip-path: polygon(var(--fold) 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%, 0 var(--fold));
}
.loc-parking-card-info {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 30px;
}

.loc-parking-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.loc-parking-place {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.loc-parking-place span{
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: var(--sub);
    margin-top: 12px;
}

.loc-parking-place span b{
  font-weight: 600;
}


.loc-parking-free {
    width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--sub);
    line-height: 1.5;
    background: rgba(43, 33, 24, 0.06);
    padding: 12px 18px;
    border-radius: 10px;
}

/* 카드 오른쪽 절반에 주차장 사진을 채워 넣는 자리. 사진 파일이 없으면
   은은한 배경색만 보이고, img/parking_photo.jpg를 넣으면 바로 채워진다.
   차종 제한 안내 문구는 사진 위 하단 중앙에 캡션처럼 띄운다. */
.loc-parking-photo {
  flex: 1 1 50%;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 30px;
  background-color: rgba(43, 33, 24, 0.1);
  background-size: cover;
  background-position: center;
}
.loc-parking-free--photo {
  color: var(--ink);
  background: rgba(255, 255, 255);
}

.loc-btn {
     display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
}
.loc-btn--kakao {
  background: #f2df34;
  color: #3C1E1E;
}
.loc-btn--map {
    background: var(--ink);
    color: #fff;
}
.loc-parking {
  margin-top: 40px;
}
.loc-parking h3 {
  font-size: 28px;
  margin-bottom: 16px;
}
.loc-parking-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.loc-parking-desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sub);
}
.loc-parking-desc small {
  display: block;
  font-size: 14px;
  opacity: 0.85;
}






/* ---------------- 하이린소개 : 둘러보기(시설 소개) ----------------
   상단: 좌측 사진 + 우측 헤드라인/설명이 나란히 배치되는 인트로.
   하단: 배경톤을 구분한 alt 섹션에 로비/상담실/VIP 대기실/수액실/파우더룸 탭 갤러리. */
.sp-tour-intro {
  display: flex;
  align-items: center;
  gap: 90px;
}
.sp-tour-intro-media {
  flex: 0 0 50%;
  aspect-ratio: 1.6 / 1;
  overflow: hidden;
}
.sp-tour-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sp-tour-intro-text {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 40px;
}
.sp-tour-intro-title {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.sp-tour-intro-desc {
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.85;
  color: var(--sub);
}
/* 하이린 스토리 페이지의 영문 라벨(.sp-label)과 동일한 축소 스타일 재사용 */
.sp-tour-intro-text .sp-label {
  margin-bottom: 20px;
}
.sp-tour-intro-text .sp-label-text {
  font-size: 26px;
  color: var(--sub);
}
/* 하이린 스토리 페이지의 회전 뱃지(.sp-rotating-badge)를 그대로 가져오되,
   이 섹션 크기에 맞춰 위치/크기만 재조정 (애니메이션·구조는 원본 규칙을 그대로 상속) */
.sp-tour-intro-text .sp-rotating-badge {
  right: 0px;
  top: -30px;
  width: 150px;
  height: 150px;
}


/* 둘러보기 : 공간별 탭 갤러리 (로비/상담실/VIP 대기실/수액실/파우더룸).
   탭을 클릭하면 같은 값(data-tour)의 id를 가진 .sp-tour-panel만 보여준다. */
.sp-tour-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 50px;
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  padding: 0 max(20px, calc((100vw - 1520px) / 2 + 20px));
  margin-bottom: 50px;
  border-bottom: 1px solid rgba(43, 33, 24, 0.12);
}


.sp-tour-tab {
  position: relative;
  padding: 20px;
  font-size: 17px;
  font-weight: 500;
  color: var(--sub);
  transition: color .2s ease;
}
.sp-tour-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #b8811f;
  transform: scaleX(0);
  transition: transform .25s ease;
}
.sp-tour-tab:hover {
  color: #b8811f;
}
.sp-tour-tab.is-active {
  color: #b8811f;
  font-weight: 700;
}
.sp-tour-tab.is-active::after {
  transform: scaleX(1);
}

/* 둘러보기 페이지2 전용 변형: 밑줄 탭 대신 이벤트 목록(.sp-event-tab)과 동일한 알약형 탭.
   기존 .sp-tour-tabs/.sp-tour-tab에 이 클래스를 함께 붙여서(JS 연결은 그대로 유지) 스타일만 덮어쓴다. */
.sp-tour-tabs--pill {
  width: auto;
  box-sizing: content-box;
  margin-left: 0;
  padding: 0;
  border-bottom: none;
  gap: 10px;
}
.sp-tour-tab--pill {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(43, 33, 24, 0.16);
  font-size: 16px;
  font-weight: 600;
  color: var(--sub);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sp-tour-tab--pill::after {
  content: none;
}
.sp-tour-tab--pill:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.sp-tour-tab--pill.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
}
/* 활성 탭일 때만 글씨 오른쪽 끝에 흰색 화살표 아이콘을 붙인다 */
.sp-tour-tab--pill.is-active::after {
     content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    flex-shrink: 0;
    width: 14px;
    height: 11px;
    margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h16M11 1l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}



/* 둘러보기 페이지2: 탭을 사진 위가 아니라 왼쪽에 세로로 배치하는 변형.
   .sp-tour-side-layout이 탭 목록(왼쪽, 고정폭)과 .sp-tour-panel-wrap(오른쪽, 나머지 폭)을 가로로 나눈다. */
.sp-tour-side-layout {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}
.sp-tour-tabs--vertical {
  flex: 0 0 160px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 0;
}
.sp-tour-tabs--vertical .sp-tour-tab--pill {
  justify-content: flex-start;
}
.sp-tour-side-layout .sp-tour-panel-wrap {
  flex: 1;
  min-width: 0;
}


/* 탭 목록은 왼쪽에서, 갤러리는 아래에서 위로 서로 마주보듯 등장 */
.sp-tour-side-layout.sp-reveal .sp-tour-tabs--vertical {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .7s ease, transform .7s ease;
}
.sp-tour-side-layout.sp-reveal.is-visible .sp-tour-tabs--vertical {
  opacity: 1;
  transform: translateX(0);
}
.sp-tour-side-layout.sp-reveal .sp-tour-panel-wrap {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease .1s, transform .7s ease .1s;
}
.sp-tour-side-layout.sp-reveal.is-visible .sp-tour-panel-wrap {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-tour-side-layout.sp-reveal .sp-tour-tabs--vertical,
  .sp-tour-side-layout.sp-reveal .sp-tour-panel-wrap {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.sp-tour-panel {
  display: none;
}
.sp-tour-panel.is-active {
  display: block;
}
/* 가로 사진 2장(왼쪽 열에 위/아래로 쌓임) + 세로 사진 2장(가운데·오른쪽 열에서 풀 높이)을 섞어 배치.
   세로 사진이 스크롤 없이 한 화면에 들어오도록 전체 높이는 고정하고, 왼쪽 가로 사진 열은
   세로 사진 열보다 조금 더 넓게(1.4fr) 잡아 가로 사진다운 비율을 살렸다. */
.sp-tour-panel-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  height: 620px;
  --fold: 28px;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, var(--fold) 1000%, 0 calc(100% - var(--fold)));
}
.sp-tour-panel-media {
  overflow: hidden;
  background: rgba(43, 33, 24, 0.05);
}
.sp-tour-panel-media--h1 {
  grid-column: 1;
  grid-row: 1;
}
.sp-tour-panel-media--h2 {
  grid-column: 1;
  grid-row: 2;
}
.sp-tour-panel-media--v1 {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.sp-tour-panel-media--v2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.sp-tour-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 세로 사진 4장 구성(파우더룸): 4열, 각 사진이 풀 높이 */
.sp-tour-panel-grid--v4 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
}
.sp-tour-panel-grid--v4 .sp-tour-panel-media {
  grid-column: auto;
  grid-row: 1;
}

/* 인트로: 왼쪽 사진은 왼쪽에서, 오른쪽 텍스트는 아래에서 위로 등장 */
.sp-tour-intro.sp-reveal .sp-tour-intro-media {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .7s ease, transform .7s ease;
}
.sp-tour-intro.sp-reveal.is-visible .sp-tour-intro-media {
  opacity: 1;
  transform: scale(1);
}
.sp-tour-intro.sp-reveal .sp-tour-intro-text {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease .1s, transform .7s ease .1s;
}
.sp-tour-intro.sp-reveal.is-visible .sp-tour-intro-text {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-tour-intro.sp-reveal .sp-tour-intro-media,
  .sp-tour-intro.sp-reveal .sp-tour-intro-text {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   반응형(Responsive) — header.css / main.css와 동일한 1400 / 1024 / 768 / 425
   기준을 그대로 따른다. 모든 max-width 미디어쿼리를 이 파일 맨 아래, 이 섹션에
   breakpoint별로 모아두어(각 규칙의 원래 소스 순서는 유지) 항상 위쪽의 기본(데스크톱)
   스타일보다 나중에 캐스케이드되도록 한다 — 동일 우선순위(specificity)일 때는
   "나중에 나온 규칙이 이긴다"는 CSS 규칙 때문에, 미디어쿼리가 기본 스타일보다
   앞에 있으면 media 조건이 맞아도 아래에 있는 기본 스타일에 덮여써져 버린다.
   ========================================================================== */

/* ---------------------------------------------------------------------
   1400px
   --------------------------------------------------------------------- */
@media (max-width: 1400px) {

  /* ---------------- 히어로 반응형 — header.css와 동일한 1400 / 1024 / 768 / 425 기준 ---------------- */
  .sp-hero-title_e { font-size: 60px; }
  .sp-hero-title { font-size: 46px; }

  .sp-problem { gap: 60px; }

  /* ---------------- 섹션 공통 반응형 — header.css와 동일한 1400 / 1024 / 768 / 425 기준.
     좌우 패딩은 header-inner/메인 컨테이너와 동일하게 20px → 16px(768) → 14px(425)로 통일해
     서브페이지 간 본문 시작 위치가 항상 같도록 맞춘다. ---------------- */
  .sp-label-text { font-size: 58px; }
  .sp-reveal .sp-label-text { font-size: 42px; }

  .sp-device-hero-title { font-size: 30px; }
  .sp-device-panel-title { font-size: 42px; }
  .sp-device-area-heading { font-size: 34px; }

  /* ---------------- 시술 목적별 분류 반응형 — header.css와 동일한 1400 / 1024 / 768 / 425 기준 ---------------- */
  .sp-purpose-head-title { font-size: 28px; }

  .sp-story-hero-content { padding: 100px 60px; }
  .sp-story-hero-content .sp-story-title { font-size: 32px; }

  /* ---------------- 원장소개 반응형 — header.css와 동일한 1400 / 1024 / 768 / 425 기준.
     .sp-director의 좌우 margin도 본문 컨테이너와 같은 20px → 16px(768) → 14px(425) 스케일로 맞춰
     .sp-section의 패딩과 합쳐졌을 때 다른 서브페이지와 시작 위치가 어긋나지 않게 한다. ---------------- */
  .sp-director { margin: 0 40px; }
  .sp-director + .sp-director { margin-top: 160px; }
  .sp-director-name { font-size: 40px; }

  /* 뷰포트가 좁아지면 본문과 겹치므로 고정 내비게이션은 숨긴다(목록으로 버튼으로 대체 이동) */
  .sp-event-side-nav { display: none; }

  .sp-cta-title { font-size: 28px; }
  .sp-faq-q-text { font-size: 20px; }

  .consult-contact { padding-left: 50px; }
  .consult-hours { gap: 70px; padding: 60px 50px 70px; }

  .sp-tour-intro-title { font-size: 30px; }
}

/* ---------------------------------------------------------------------
   1024px (태블릿)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .sp-hero-media { min-height: 380px; }
  .sp-hero-eyebrow { font-size: 14px; }
  .sp-hero-title_e { font-size: 50px; }
  .sp-hero-title { font-size: 40px; }
  .sp-hero-sub { font-size: 16px; }

  .sp-problem { flex-direction: column-reverse; gap: 40px; }
  .sp-problem-media,
  .sp-problem-media--tall { flex-basis: auto; width: 100%; height: 320px; min-height: 0; margin: 0; }
  .sp-problem-media.sp-reveal { transform: translateY(20px); }
  .sp-problem-media.sp-reveal.is-visible { transform: translateY(0); }
  .sp-area-point { width: 22px; height: 22px; margin: -14px 0 0 -14px; }
  .sp-problem-title { font-size: 26px; }
  .sp-problem-item-body { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sp-problem-list strong { flex-basis: auto; }

  .sp-section,
  .sp-section.alt .sp-section-inner,
  .sp-section--price-bg .sp-section-inner {
    padding: 100px 20px;
  }
  .sp-label { margin-bottom: 50px; }
  .sp-label-text { font-size: 48px; }
  .sp-reveal .sp-label-text { font-size: 36px; }
  .sp-label-sub { font-size: 17px; margin-top: 22px; }
  .sp-area-heading { margin-bottom: 50px; }
  .sp-area-heading-eyebrow { font-size: 20px; margin-bottom: 16px; }
  .sp-area-heading-title { font-size: 30px; }

  .sp-device-area-info-item p {
    white-space: normal;
  }
  .sp-device-hero-eyebrow { font-size: 20px; }
  .sp-device-hero-title { font-size: 26px; }
  .sp-device-spec-eng { font-size: 16px; }
  .sp-device-spec-title { font-size: 18px; }
  .sp-device-spec-desc { font-size: 16px; }
  .sp-device-showcase-tabs { justify-content: flex-start; gap: 10px 24px; margin-bottom: 40px; }
  .sp-device-tab { font-size: 15px; }
  .sp-device-panel-top { flex-direction: column-reverse;  min-height: 0; }
  .sp-device-panel-text { width: auto; }
  .sp-device-panel-media { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .sp-device-cert-badge { width: 140px !important; right: 24px; bottom: 24px; }
  .sp-device-panel-title { font-size: 36px; }
  .sp-device-panel-desc { font-size: 17px; margin: 24px 0 40px; }
  .sp-device-panel-tech-heading { font-size: 34px; }
  .sp-device-panel-tech-grid { grid-template-columns: 1fr; gap: 64px; }
  .sp-device-area { grid-template-columns: 1fr; gap: 24px; height: auto; padding: 100px 20px 0;}
  .sp-device-area-head,
  .sp-device-area-info { transform: none; }
  .sp-device-area-head { order: 1; }
  .sp-device-area-info { order: 2; }
  .sp-device-area-media { order: 3; }
  .sp-device-area-eyebrow { font-size: 22px; }
  .sp-device-area-heading { font-size: 28px; margin-bottom: 50px; }
  .sp-device-area-media { aspect-ratio: 16 / 10; align-self: center;         width: 70%;
        margin-left: 15%; }
  .sp-device-area-info-title { font-size: 28px; text-align: center; margin-bottom: 0; margin-top: 20px; }
  .sp-device-area-info-list{display: none;}
  .sp-device-depth-heading { font-size: 24px; }

  .sp-skin-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-skin-cat-intro { grid-row: span 1; }
  .sp-skin-cat-intro-eyebrow { font-size: 18px; }
  .sp-skin-cat-intro-title { font-size: 22px; }
  .sp-skin-item { padding: 40px 32px; }
  .sp-skin-item-title { font-size: 20px; }

  .sp-device-cards { grid-template-columns: repeat(2, 1fr); }
  .sp-device-card { padding: 32px 24px; }
  .sp-device-card-title { font-size: 21px; margin: 5px 0 28px; }

  .sp-area-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .sp-area-card { padding: 32px; }
  .sp-area-card-media { height: 300px; }
  .sp-area-name { font-size: 20px; padding-bottom: 24px; margin-bottom: 24px; }
  .sp-area-card--photo .sp-area-name { font-size: 20px; padding-bottom: 24px; margin-bottom: 24px; }
  .sp-area-card--photo .sp-area-sub { font-size: 17px; }
  .sp-area-card-body { padding: 30px 30px 48px; }

  .sp-purpose-head { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 50px; }
  .sp-purpose-head-title { font-size: 24px; }
  .sp-purpose-head-eyebrow { font-size: 19px; }
  .sp-purpose-head-desc { font-size: 15px; }
  .sp-purpose-item { padding: 40px 28px 0 28px; }
  .sp-purpose-name { font-size: 20px; }
  .sp-purpose-desc { font-size: 15px; }

  .sp-story-hero { height: 200vh; }
  .sp-story-hero-sticky { flex-direction: column; }
  .sp-story-hero-media { flex-basis: auto; height: 300px; }
  .sp-story-hero-content { padding: 48px 20px; flex: 1; }
  .sp-story-hero-content .sp-label-text { font-size: 22px; }
  .sp-story-hero-content .sp-story-title { font-size: 28px; max-width: none; }
  .sp-story-hero-stage { max-width: none; margin-top: 24px; }
  .sp-story-hero-line { font-size: 17px; }

  .sp-rotating-badge { width: 130px; height: 130px; top: auto; right: 24px; bottom: 24px; }

  .sp-tour-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sp-tour-item { height: 240px; }

  .sp-director { flex-direction: column; margin: 0; }
  .sp-director + .sp-director { margin-top: 120px; }
  .sp-director-photo { order: -1; }
  .sp-director-top { padding: 56px 20px 32px; }
  .sp-director-eyebrow { font-size: 20px; margin-bottom: 18px; }
  .sp-director-name { font-size: 34px; }
  .sp-director-role { font-size: 19px; }
  .sp-director-intro p { font-size: 17px; }
  .sp-director-creds { margin: 0 20px 56px; padding: 32px 24px; --fold: 40px; }
  .sp-director-creds li { font-size: 15.5px; }
  .sp-director-photo { flex-basis: auto; height: 420px; --fold: 40px; }

  .sp-space-pin { height: 200vh; }
  .sp-space-heading-wrap { padding: 0 20px; }
  .sp-space-item { flex-basis: 280px; }
  .sp-space-item:nth-child(2) { flex-basis: 240px; }
  .sp-space-item--narrow { flex-basis: 170px; margin-top: 0; }
  .sp-space-media { height: 320px; }
  .sp-space-name { font-size: 18px; }

  .sp-event-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-event-tabs { flex-wrap: wrap; justify-content: center; }
  .sp-event-card-title { font-size: 20px; }
  .sp-device-hero-frame { display: none; }
  .sp-device-hero { flex-direction: column; gap: 0; }
  .sp-section--device-frame .sp-device-hero{padding: 0;}
  .sp-device-hero-left {
    position: static;
    width: auto;
    flex-basis: auto;
    padding: 0 0 40px;
  }
  .sp-device-hero-left::before,
  .sp-device-hero-left::after {
    display: none;
  }
  .sp-device-hero-right {
    width: auto;
    max-width: none;
    padding: 40px 0 0;
  }
  .sp-device-hero-right.sp-device-hero-right--cards { gap: 60px 32px; padding-bottom: 60px; }
  .sp-device-hero-right--list { width: auto; }
  .sp-device-spec-item,
  .sp-device-hero-right--list .sp-device-spec-item { width: 100%; }
  .sp-purpose-head-right { max-width: none; }
  .sp-purpose-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-purpose-item:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .sp-purpose-item:nth-child(n+3) { padding-top: 40px; border-top: 1px solid rgba(43, 33, 24, 0.1); }
  .sp-cta-inner { flex-direction: column; align-items: flex-start; padding: 44px 36px; }
  .sp-cta-title { font-size: 24px; }
  .sp-faq { flex-direction: column; gap: 24px; }
  .sp-faq > .sp-label { flex-basis: auto; }
  .sp-faq-list { width: 100%; }
  .sp-faq-q-text { font-size: 19px; }
  .sp-price-duo { grid-template-columns: 1fr; gap: 32px; }
  .sp-price-card { padding: 36px; }
  .sp-price-table td { font-size: 16px; }
  .sp-price-table .td-amount { font-size: 18px; }

  /* 남녀 사진 좌우 배치 대신, 사진 두 장을 위아래로 쌓는 구조로 전환 */
  .sp-pin-duo {
    flex-direction: column;
  }
  .sp-pin-duo-media {
    height: 320px;
    border-radius: 20px !important;
  }

  .sp-purpose-grid--cards.sp-purpose-grid--cards-4 { grid-template-columns: repeat(2, 1fr); }
  .sp-purpose-grid--cards .sp-purpose-item:nth-child(2n+1),
  .sp-purpose-grid--cards .sp-purpose-item:nth-child(n+3) {
    padding: 40px 32px 60px;
    border: none;
  }
  .sp-purpose-grid--cards .sp-purpose-name { font-size: 20px; }

  .sp-purpose-grid--cards-accent .sp-purpose-item,
  .sp-purpose-grid--cards-accent .sp-purpose-item:first-child {
    padding: 40px 32px 56px;
    border: none;
  }
  .sp-purpose-grid--cards-accent .sp-purpose-name { font-size: 20px; }

  .legal-wrap { margin-top: 60px; }

  .unpaid-title { font-size: 28px; }
  .cost-table { font-size: 14.5px; }

  .loc-map { height: 320px; }
  .loc-combo { grid-template-columns: 1fr; }
  .loc-combo-cell--map { grid-row: auto; min-height: 320px; }
  .loc-title { font-size: 22px; }
  .consult-btn { height: 58px; font-size: 16px; }
  .consult-contact { padding: 60px 20px 50px; }
  .consult-phone { font-size: 26px; }
  .consult-hours { flex-wrap: wrap; gap: 32px; padding: 50px 20px; }
  .consult-hours-label,
  .consult-hours-list p > span:last-child { font-size: 17px; }
  .consult-hours-label{    flex: 0 0 71px;}
  .loc-panel-address { font-size: 22px; }
  .loc-panel-btn { align-self: stretch; text-align: center; }
  .loc-parking-card { flex-direction: column; margin-top: 44px; }
  .loc-parking-photo { min-height: 220px; }
  .loc-parking-place { font-size: 21px; }
  .loc-parking h3 { font-size: 24px; }

  .sp-tour-intro-text .sp-rotating-badge {
    display: none;
  }

  .sp-tour-tab--pill { height: 40px; padding: 0 18px; font-size: 14px; }

  .sp-tour-side-layout { flex-direction: column; gap: 24px; }
  .sp-tour-tabs--vertical { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; width: 100%; }

  .sp-tour-intro { flex-direction: column; gap: 40px;  align-items: baseline; }
  .sp-tour-intro-media { flex-basis: auto; width: 100%; aspect-ratio: 3 / 2; }
  .sp-tour-intro-text { padding: 0; }
  .sp-tour-intro-text .sp-label-text { font-size: 22px; }
  .sp-tour-intro-title { font-size: 26px; }
  .sp-tour-intro-desc { font-size: 17px; margin-top: 20px; }
  .sp-tour-tabs { gap: 8px 24px; margin-bottom: 32px; }
  .sp-tour-tab { font-size: 15px; padding: 16px; }
  .sp-tour-tab--pill.is-active::after{display: none;}
  .sp-tour-panel-grid { height: 480px; gap: 18px; }
}

/* ---------------------------------------------------------------------
   768px (모바일)
   --------------------------------------------------------------------- */
@media (max-width: 768px) {

  .sp-hero-media { min-height: 340px; }
  .sp-hero-caption { padding: 0 16px; }
  .sp-hero-title_e { font-size: 40px; }
  .sp-hero-title { font-size: 32px; }
  .sp-hero-sub { font-size: 15px; margin-top: 14px; }

  .sp-problem-media { height: 300px; }
  .sp-area-point { width: 18px; height: 18px; margin: -12px 0 0 -12px; }
  .sp-problem-title { font-size: 24px; }
  .sp-problem-desc { font-size: 15px; }
  .sp-problem-list { margin-top: 56px; gap: 14px; }
  .sp-problem-list strong { font-size: 17px; }
  .sp-problem-list p { font-size: 16px; }

  .sp-section,
  .sp-section.alt .sp-section-inner,
  .sp-section--price-bg .sp-section-inner {
    padding: 80px 16px;
  }
  .sp-label { margin-bottom: 36px; }
  .sp-label-text { font-size: 36px; }
  .sp-reveal .sp-label-text { font-size: 28px; }
  .sp-label-sub { font-size: 16px; margin-top: 16px; }
  .sp-area-heading { margin-bottom: 36px; }
  .sp-area-heading-eyebrow {margin-bottom: 12px; }
  .sp-area-heading-title { font-size: 24px; }


  .sp-device-area{padding: 80px 16px 0;}
  .sp-device-hero-title { font-size: 24px; }
  .sp-badge { font-size: 14px; padding: 12px 14px; }
  .sp-device-spec-item { padding: 28px 24px; }
  .sp-device-showcase-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 0;}
  .sp-device-tab {        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 14px;
        padding: 16px 8px; 
              border-top: 1px solid rgba(43, 33, 24, 0.12);
        border-right: 1px solid rgba(43, 33, 24, 0.12);
      }
  .sp-device-tab::after { display: none; }
  .sp-device-tab:nth-child(3n) { border-right: none; }
  .sp-device-tab:nth-last-child(3) { box-shadow: 0 1px 0 0 rgba(43, 33, 24, 0.12); }
  .sp-device-tab.is-active { background: rgba(184, 129, 31, 0.12); }
  .sp-device-panel-logo { width: 200px; margin-bottom: 22px; }
  .sp-device-panel-title { font-size: 28px; }
  .sp-device-panel-desc { font-size: 16px; margin: 20px 0 32px; }
  .sp-device-panel-tag { width: 120px; height: 120px; font-size: 15px; }
  .sp-device-panel-media { aspect-ratio: 4 / 3; }
  .sp-device-cert-badge { width: 110px !important; right: 18px; bottom: 18px; }
  .sp-device-panel-tech-heading { font-size: 28px; margin-bottom: 36px; }
  .sp-device-panel-tech-grid { gap: 56px; }
  .sp-device-panel-tech-title { font-size: 20px; margin: 30px 0 20px; }
  .sp-device-panel-tech-desc { font-size: 16px; }
  .sp-device-panel-tech-grid--cards { gap: 22px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-item { padding: 28px 24px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-media { width: 56px; margin-bottom: 18px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-media img { width: 48px; height: 48px; max-width: 48px; max-height: 48px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-title { font-size: 20px; margin: 0 0 14px; padding-bottom: 14px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-desc { font-size: 15.5px; }
  .sp-device-area-eyebrow { font-size: 20px; }
  .sp-device-area-heading { font-size: 24px; }
  .sp-device-area-info-title { font-size: 24px; margin-bottom: 22px; }
  .sp-device-depth-heading { font-size: 21px; }
  .sp-device-depth-spec dt { font-size: 16px; }
  .sp-device-depth-spec dd { font-size: 15px; }

  .sp-skin-categories { margin-top: 40px; gap: 24px; }
  .sp-skin-cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .sp-skin-item { padding: 32px 24px; }
  .sp-skin-item-title { font-size: 19px; }
  .sp-skin-item-desc { font-size: 15px; }

  .sp-device-cards { margin-top: 40px; grid-template-columns: 1fr; gap: 16px; }
  .sp-device-card-eng { font-size: 15px; }
  .sp-device-card-title { font-size: 20px; margin: 5px 0 24px; }
  .sp-device-card-desc { font-size: 16px; }

  .sp-device-modal-box { padding: 40px 24px; }
  .sp-device-modal-title { font-size: 22px; }

  .sp-lightbox-stage { padding: 56px 18px; }
  .sp-lightbox-nav { width: 40px; height: 40px; }
  .sp-lightbox-prev { left: 4px; }
  .sp-lightbox-next { right: 4px; }
  .sp-lightbox-close { top: 8px; right: 8px; width: 34px; height: 34px; }
  .sp-lightbox-count { bottom: 8px; }

  .sp-area-grid { gap: 20px; }
  .sp-area-card { padding: 28px; }
  .sp-area-card-media { height: 260px; }
  .sp-area-name { font-size: 19px; padding-bottom: 20px; margin-bottom: 20px; }
  .sp-area-sub { font-size: 16px; }
  .sp-area-card--photo .sp-area-name { font-size: 19px; padding-bottom: 20px; margin-bottom: 20px; }
  .sp-area-card--photo .sp-area-sub { font-size: 16px; }

  .sp-purpose-head { padding-bottom: 40px; }
  .sp-purpose-head-title { font-size: 22px; }
  .sp-purpose-head-eyebrow { font-size: 18px; }
  .sp-purpose-item { padding: 32px 20px 0 20px; }
  .sp-purpose-index { font-size: 15px; margin-bottom: 16px; }
  .sp-purpose-name { font-size: 19px; margin-bottom: 12px; padding-bottom: 12px; }
  .sp-purpose-desc { font-size: 14.5px; }

  .sp-story-hero-media { height: 260px; }
  .sp-story-hero-content { padding: 40px 16px; }
  .sp-story-hero-content .sp-label-text { font-size: 20px; }
  .sp-story-hero-content .sp-story-title { font-size: 24px; }
  .sp-story-hero-line { font-size: 16px; }

  .sp-director + .sp-director { margin-top: 90px; }
  .sp-director-top { padding: 48px 16px 28px; }
  .sp-director-eyebrow { font-size: 18px; margin-top: 40px;}
  .sp-director-name { font-size: 28px; }
  .sp-director-role { font-size: 17px; }
  .sp-director-intro p { font-size: 16px; line-height: 1.85; }
  .sp-director-creds { margin: 0 16px 48px; padding: 28px 20px; }
  .sp-director-creds li { font-size: 15px; }
  .sp-director-photo { height: 340px; }

  .sp-space-heading-wrap { padding: 0 16px; }
  .sp-space-grid { padding-left: max(16px, calc(50vw - 740px)); gap: 16px; }
  .sp-space-item { flex-basis: 240px; }
  .sp-space-item:nth-child(2) { flex-basis: 200px; }
  .sp-space-item--narrow { flex-basis: 150px; }
  .sp-space-media { height: 280px; }

  .sp-device-hero-right.sp-device-hero-right--cards { grid-template-columns: 1fr; gap: 24px; padding-bottom: 0; width: 100%; }
  .sp-device-hero-right--cards .sp-device-card:nth-child(even) { --stagger-y: 0px; }
  .sp-event-toolbar {margin-bottom: 32px; }
  .sp-event-tab { height: 40px; padding: 0 16px; font-size: 14px; }
  .sp-event-card-date { font-size: 14px; }
  .sp-event-grid { gap: 40px 20px; }
  .sp-event-card-title { font-size: 19px; }
  .sp-purpose-grid { grid-template-columns: 1fr; }
  .sp-purpose-item,
  .sp-purpose-item:nth-child(2n+1),
  .sp-purpose-item:nth-child(n+3) {
    padding: 32px 0 0;
    border-left: none;
    border-top: 1px solid rgba(43, 33, 24, 0.1);
  }
  .sp-purpose-item:first-child { border-top: none; padding-top: 0; }
  .sp-cta-inner { padding: 36px 28px; border-radius: 18px; }
  .sp-cta-title { font-size: 22px; }
  .sp-cta-sub { font-size: 14px; }
  .sp-cta-actions { flex-wrap: wrap; }
  .sp-faq-q-text { font-size: 18px; }
  .sp-faq-a-inner { padding: 28px; font-size: 16px; }
  .sp-price-card { padding: 28px; }
  .sp-price-card-title { font-size: 18px; }
  .sp-price-table th { padding: 14px 16px; font-size: 12px; }
  .sp-price-table .td-amount { font-size: 17px; }
  .sp-price-table th:nth-child(2),
  .sp-price-table td:nth-child(2) { display: none; }

  .sp-purpose-grid--cards.sp-purpose-grid--cards-4 { grid-template-columns: 1fr; }
  .sp-purpose-grid--cards .sp-purpose-item,
  .sp-purpose-grid--cards .sp-purpose-item:nth-child(2n+1),
  .sp-purpose-grid--cards .sp-purpose-item:nth-child(n+3),
  .sp-purpose-grid--cards .sp-purpose-item:first-child {
    padding: 32px 24px 52px;
    border: none;
  }
  .sp-purpose-grid--cards .sp-purpose-name { font-size: 19px; }

  .sp-purpose-grid--cards-accent .sp-purpose-item,
  .sp-purpose-grid--cards-accent .sp-purpose-item:first-child {
    padding: 32px 24px 48px;
    border: none;
  }
  .sp-purpose-grid--cards-accent .sp-purpose-name { font-size: 19px; }

  .legal-wrap { margin-top: 44px; }
  .legal-title { font-size: 24px; margin-bottom: 24px; padding-bottom: 16px; }
  .legal-intro { padding: 16px 18px; font-size: 14px; }
  .legal-clauses dt { margin-top: 40px; font-size: 16px; }
  .legal-clauses dd { font-size: 14px; }
  .legal-table { font-size: 12.5px; }
  .legal-table th, .legal-table td { padding: 10px 8px; }

  .unpaid-title { font-size: 24px; }
  .cost-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cost-heading-note { font-size: 14px; white-space: normal; }
  .cost-table { font-size: 13px; }
  .cost-table th, .cost-table td { padding: 12px 8px; }

  .loc-map { height: 260px; }
  .loc-combo-cell--map { min-height: 260px; }
  .loc-title { font-size: 20px; }
  .loc-title-icon-img { width: 24px; height: 24px; }
  .consult-buttons { gap: 12px; }
  .consult-btn { height: 54px; padding: 0 20px; font-size: 15px; }
  .consult-contact { padding: 60px 16px 60px; }
  .consult-phone { font-size: 23px; }
  .consult-hours { gap: 50px; padding: 60px 16px; flex-direction: column;}
  .consult-hours-head { gap: 18px; }
  .consult-hours-label,
  .consult-hours-list p > span:last-child { font-size: 16px; }
    .consult-hours-label{    flex: 0 0 67px;}
  .consult-hours-list p { gap: 24px; }
  .consult-hours-note { font-size: 14px; }
  .loc-panel-address { font-size: 19px; }
  .loc-map-btn { height: 46px; font-size: 14px; padding: 0 18px 0 16px; }
  .loc-parking-card-info { padding: 24px; gap: 18px; }
  .loc-parking-place { font-size: 19px; }
  .loc-parking-place span { font-size: 16px; }
  .loc-parking-free { font-size: 15px; }
  .loc-btn { height: 44px; font-size: 15px; }
  .loc-parking h3 { font-size: 21px; }
  .loc-parking-desc { font-size: 15px; }
  .sp-tour-intro-text .sp-label-text { font-size: 20px; }
  .sp-tour-intro-title { font-size: 22px; }
  .sp-tour-intro-desc { font-size: 16px; margin-top: 16px; }
  .sp-tour-tabs {gap: 6px 18px; margin-bottom: 28px;         justify-content: flex-start;}
  .sp-tour-tab { font-size: 14px; padding: 14px; }
  .sp-tour-panel-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; gap: 16px;  justify-content: flex-start;}
  .sp-tour-panel-media--h1,
  .sp-tour-panel-media--h2 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .sp-tour-panel-media--v1,
  .sp-tour-panel-media--v2 { grid-column: span 1; grid-row: auto; aspect-ratio: 3 / 4; }
  .sp-tour-panel-grid--v4 { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .sp-tour-panel-grid--v4 .sp-tour-panel-media { grid-column: span 1; grid-row: auto; aspect-ratio: 3 / 4; }
}

/* ---------------------------------------------------------------------
   425px (소형 모바일)
   --------------------------------------------------------------------- */
@media (max-width: 425px) {

  .sp-hero-media { min-height: 300px; height: 50vh;}
  .sp-hero-caption { padding: 0 14px; }
  .sp-hero-eyebrow { font-size: 13px; }
  .sp-hero-title_e { font-size: 32px; }
  .sp-hero-title { font-size: 26px; }
  .sp-hero-sub { font-size: 14px; margin-top: 10px; }

  .sp-area-point { width: 15px; height: 15px; margin: -10px 0 0 -10px; }
  .sp-problem-title { font-size: 22px; }
  .sp-problem-desc { font-size: 14.5px; }
  .sp-problem-list { margin-top: 40px; gap: 12px; }
  .sp-problem-list li { padding: 16px; }
  .sp-problem-list strong { font-size: 16px; }
  .sp-problem-list p { font-size: 15px;  display: none;}
  .sp-problem-check { flex-basis: 20px; width: 20px; height: 20px; font-size: 14px; }

  .sp-price-empty-btn{height: 42px; font-size: 15px;}

  .sp-label { margin-bottom: 28px; }
  .sp-label-text { font-size: 28px; }
  .sp-area-heading { margin-bottom: 28px; }
  .sp-area-heading-title { font-size: 21px; }
  .sp-faq-q-icon{font-size: 20px;}
  .sp-faq-chevron{flex: 0 0 16px; width: 16px; height: 16px;}

  .sp-device-hero-title { font-size: 21px; }
  .sp-device-spec-item { padding: 24px 20px; }
  .sp-device-spec-eng { font-size: 14px; }
  .sp-device-spec-title { font-size: 16px; }
  .sp-device-spec-desc { font-size: 15px; }
  .sp-device-showcase-tabs {  margin-bottom: 32px; }
  .sp-device-tab { padding: 14px 6px;  }
  .sp-device-panel-logo { width: 170px; margin-bottom: 18px; }
  .sp-device-panel-title { font-size: 22px; }
  .sp-device-panel-desc { font-size: 15px; line-height: 1.7; margin: 16px 0 28px; }
  .sp-device-panel-tag { width: 100px; height: 100px; font-size: 14px; }
  .sp-device-panel-media { aspect-ratio: 1 / 1; }
  .sp-device-cert-badge { width: 88px !important; right: 14px; bottom: 14px; }
  .sp-device-panel-tech-heading { font-size: 24px; margin-bottom: 28px; }
  .sp-device-panel-tech-grid { gap: 48px; }
  .sp-device-panel-tech-title { font-size: 18px; }
  .sp-device-panel-tech-desc { font-size: 15px; }
  .sp-device-panel-tech-grid--cards { gap: 18px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-item { padding: 24px 20px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-media { width: 48px; margin-bottom: 16px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-media img { width: 40px; height: 40px; max-width: 40px; max-height: 40px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-title { font-size: 18px; margin: 0 0 12px; padding-bottom: 12px; }
  .sp-device-panel-tech-grid--cards .sp-device-panel-tech-desc { font-size: 14.5px; }
  .sp-device-area-heading { font-size: 21px; margin-bottom: 28px; }
  .sp-device-area-info-title { font-size: 20px; }
  .sp-device-depth-heading { font-size: 19px; }
  .sp-device-depth-tab { font-size: 14px; padding: 8px 16px; }
  .sp-device-depth-spec{gap: 14px;}
  .sp-device-depth-tabs{margin-bottom: 15px;}
  .sp-device-depth-spec dt{font-size: 15px; gap: 6px;     flex: 0 0 60px;}
  .sp-device-depth-plus{font-size: 15px;}
  .sp-skin-categories { margin-top: 32px; gap: 18px; }
  .sp-skin-cat-intro {         padding: 28px 20px;
        --fold: 12px;}
  .sp-skin-cat-intro-eyebrow { font-size: 16px; }
  .sp-skin-cat-intro-title { font-size: 19px; }
  .sp-skin-item { padding: 28px 20px; }
  .sp-skin-item-title { font-size: 18px; margin-bottom: 10px; }
  .sp-skin-item-desc { font-size: 14.5px; }

  .sp-device-card { padding: 28px 20px; }
  .sp-device-card-icon { flex-basis: 46px; width: 46px; height: 46px; }
  .sp-device-card-eng { font-size: 14px; }
  .sp-device-card-title { font-size: 18px; margin: 4px 0 20px; }
  .sp-device-card-desc { font-size: 15px; }

  .sp-device-modal-box { padding: 32px 20px; }
  .sp-device-modal-eng { font-size: 14px; }
  .sp-device-modal-title { font-size: 20px; margin-bottom: 16px; padding-bottom: 16px; }
  .sp-device-modal-desc { font-size: 15px; }

  .sp-lightbox-stage { padding: 48px 12px; }
  .sp-lightbox-count { font-size: 13px; }

  .sp-area-grid { grid-template-columns: 1fr; gap: 16px; }
  .sp-area-card { padding: 24px; }
  .sp-lightbox.is-open .sp-lightbox-img{ --fold: 14px;}
  .sp-area-card-media { height: 200px; }
  .sp-area-name { font-size: 18px; padding-bottom: 16px; margin-bottom: 16px; }
  .sp-area-sub { font-size: 15px; }
  .sp-area-card-body { padding: 20px 20px 40px; }
  .sp-area-card--photo .sp-area-name { font-size: 18px;  padding-bottom: 16px; margin-bottom: 16px;  }
  .sp-area-card--photo .sp-area-sub { font-size: 15px; }
  .sp-area-card-num { right: 24px; bottom: 24px; font-size: 14px; }

  .sp-purpose-head { padding-bottom: 32px; }
  .sp-purpose-head-title { font-size: 20px; }
  .sp-purpose-head-eyebrow { font-size: 16px; }
  .sp-purpose-head-desc { font-size: 14px; }
  .sp-purpose-item { padding: 28px 0 0; }
  .sp-purpose-name { font-size: 18px; }

  .sp-story-hero-media { height: 220px; }
  .sp-story-hero-content .sp-story-title { font-size: 21px; }
  .sp-story-hero-stage { margin-top: 18px; }
  .sp-story-hero-line { font-size: 15px; }

  .sp-rotating-badge {        width: 100px;      height: 100px;       top: 170px;}
  .sp-rotating-badge-text { font-size: 14px; }

  .sp-tour-grid { grid-template-columns: 1fr; gap: 12px; }
  .sp-tour-item { height: 220px; }

  .sp-director + .sp-director { margin-top: 64px; }
  .sp-director-top { padding: 0 0 50px;  text-align: center;}
  .sp-director-eyebrow { font-size: 16px; margin-bottom: 14px; }
  .sp-director-name { font-size: 24px; }
  .sp-director-role { font-size: 15px; }
  .sp-director-intro p { font-size: 15px; line-height: 1.75; }
  .sp-director-intro p b { font-size: 16px; }
  .sp-director-creds { margin: 0 0 40px; padding: 24px 18px;  }
  .sp-director-creds li { font-size: 14px; }
  .sp-director-photo { height: 280px; --fold: 24px; }

  .sp-space-heading-wrap { padding: 0 14px; }
  .sp-space-grid { padding-left: max(14px, calc(50vw - 740px)); gap: 14px; }
  .sp-space-item { flex-basis: 200px; }
  .sp-space-item:nth-child(2) { flex-basis: 170px; }
  .sp-space-item--narrow { flex-basis: 130px; }
  .sp-space-media { height: 240px; }
  .sp-space-name { font-size: 16px; }
  .sp-space-desc { font-size: 14px; }

  .sp-device-hero-right.sp-device-hero-right--cards { gap: 18px; }
  .sp-event-toolbar { margin-bottom: 24px; }
  .sp-event-card-body{padding-top: 20px;}
  .sp-event-tabs { gap: 8px; }
  .sp-event-tab { height: 38px; padding: 0 14px; font-size: 13px; }
  .sp-event-count { font-size: 14px; }
  .sp-event-card-date { font-size: 13px; }
  .sp-event-grid { grid-template-columns: 1fr; gap: 44px; }
  .sp-event-card-title { font-size: 18px; }
  .sp-cta-inner { padding: 32px 24px; }
  .sp-cta-title { font-size: 20px; }
  .sp-faq-q { gap: 12px; padding: 24px 4px; }
  .sp-faq-q-text { font-size: 16px; }
  .sp-faq-a-inner { padding: 24px 20px; font-size: 15px; line-height: 1.85; }
  .sp-price-card { padding: 24px; }
  .sp-price-card-title { font-size: 17px; }
  .sp-price-table td { padding: 16px 0; font-size: 15px; }
  .sp-price-table .td-amount { font-size: 16px; width: auto; }
  .sp-pin-block-title { font-size: 16px; }
  .sp-pin-duo-media { height: 260px; }
  .sp-pagination a, .sp-pagination span{width: 33px; height: 33px; font-size: 15px;}
  .sp-event-badge{width: 50px; height: 50px;}

  .sp-purpose-grid--cards .sp-purpose-item,
  .sp-purpose-grid--cards .sp-purpose-item:nth-child(2n+1),
  .sp-purpose-grid--cards .sp-purpose-item:nth-child(n+3),
  .sp-purpose-grid--cards .sp-purpose-item:first-child {
    padding: 28px 20px;
  }
  .sp-purpose-grid--cards .sp-purpose-name { font-size: 18px; }
  .sp-purpose-grid--cards .sp-purpose-index { right: 20px; top: 32px; }

  .sp-purpose-grid--cards-accent .sp-purpose-item,
  .sp-purpose-grid--cards-accent .sp-purpose-item:first-child {
    padding: 28px 20px 40px;
    border: none;
  }
  .sp-purpose-grid--cards-accent .sp-purpose-name { font-size: 18px; }
  .sp-purpose-grid--cards-accent .sp-purpose-index { right: 20px; bottom: 20px; }

  .legal-wrap { margin-top: 32px; }
  .legal-title { font-size: 20px; margin-bottom: 20px; }
  .legal-intro { padding: 14px 16px; font-size: 13.5px; }
  .legal-clauses dt { margin-top: 32px; font-size: 15px; }
  .legal-clauses dd { font-size: 13.5px; }
  .legal-table { font-size: 11.5px; }
  .legal-table th, .legal-table td { padding: 8px 6px; }

  .unpaid-title { font-size: 20px; }
  .cost-table { font-size: 11.5px; }
  .cost-table th, .cost-table td { padding: 8px 5px; }

  .loc-map { height: 220px; }
  .loc-combo-cell--map { min-height: 220px; }
  .loc-title { font-size: 18px; }
  .consult-btn { height: 50px; padding: 0 16px; font-size: 14px; }
  .consult-symbol { height: 20px; }
  .consult-phone { font-size: 20px; }
  .consult-hours-label,
  .consult-hours-list p > span:last-child { font-size: 14.5px; }
  .consult-hours-list p { gap: 16px; }
  .loc-panel-address { font-size: 17px; }
  .loc-address-row { gap: 10px; }
  .loc-map-buttons { gap: 12px; }
  .loc-map-btn { height: 42px; font-size: 13px; padding: 0 14px; }
  .loc-parking-card { margin-top: 32px; }
  .loc-parking-card-info { padding: 20px; gap: 14px; }
  .loc-parking-photo { min-height: 180px; padding: 20px; }
  .loc-parking-place { font-size: 17px; }
  .loc-parking-place span { font-size: 14.5px; margin-top: 8px; }
  .loc-btn { height: 42px; font-size: 14px; }
  .loc-parking { margin-top: 28px; }
  .loc-parking h3 { font-size: 19px; }
  .loc-parking-name { font-size: 16px; }
  .loc-parking-desc { font-size: 14px; }

  .sp-tour-tab--pill { height: 36px; padding: 0 14px; font-size: 13px; }

  .sp-tour-intro-title { font-size: 19px; }
  .sp-tour-intro-desc { font-size: 15px; }
  .sp-tour-tabs { gap: 12px; margin-bottom: 24px; }
  .sp-tour-tab { font-size: 13px; padding: 12px; }
  .sp-tour-panel-grid { gap: 12px; }
}