/* ============================================================
   일산퍼스트정형외과 — 서브페이지 공통
   ============================================================ */

/* ---------- 서브 히어로 (인셋 라운드 카드 · 이미지 배경 + 다크 오버레이) ---------- */
.sub-hero {
  position: relative;
  /* overflow 없음: 드롭다운이 하단으로 펼쳐질 수 있게. 배경 클리핑은 __media가 담당 */
  background-color: var(--navy-deep);
  /* 풀블리드 · 페이지별 동일 높이 · 콘텐츠 중앙 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 0 40px;
  color: #fff;
  isolation: isolate;
  z-index: 3;
}
/* 배경/오버레이/글로우만 클리핑 (드롭다운은 제외) */
.sub-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
/* 배경: 슬로우 켄번스 (느린 확대 + 팬) */
.sub-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 35%;
  animation: hero-kenburns 12s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-kenburns {
  from {
    transform: scale(1.04) translate(0.8%, -0.8%);
  }
  to {
    transform: scale(1.16) translate(-2%, 2.6%);
  }
}
/* 다크 그라데이션 오버레이 */
.sub-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* 떠다니는 스카이 글로우 */
.sub-hero__in {
  width: min(var(--inner), calc(100% - 48px));
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 콘텐츠 순차 등장
  fill-mode는 backwards 사용: both(forwards 포함)로 두면 opacity 애니메이션이
  종료 후에도 적용 상태로 남아 요소가 backdrop root가 되고,
  자손 드롭다운(.sub-nav__list)의 backdrop-filter가 무력화됨.
  종료 키프레임(to)이 자연 상태와 동일하므로 시각적 차이 없음 */
.sub-hero__in > * {
  animation: hero-rise 0.8s var(--ease-out) backwards;
}
.sub-hero__in > *:nth-child(2) {
  animation-delay: 0.14s;
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sub-hero__bg,
  .sub-hero__media::after,
  .sub-hero__in > * {
    animation: none;
  }
}
.sub-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 48px);
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 2px 24px rgba(9, 20, 44, 0.45);
}

/* ---------- 서브 내비 바 (홈 · 카테고리 · 현재▾ 드롭다운) ---------- */
.sub-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: clamp(22px, 3vw, 60px);
  padding: 6px 8px;
  max-width: calc(100% - 8px);
  border-radius: 7px;
  box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.08);
}
/* 블러는 pseudo에만 적용: .sub-nav 본체에 backdrop-filter를 걸면
   backdrop root가 생성되어 자손인 드롭다운(.sub-nav__list)의
   backdrop-filter가 실제 페이지 배경을 샘플링하지 못함 */
.sub-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
.sub-nav__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.25s;
}
.sub-nav__home:hover {
  background: rgba(255, 255, 255, 0.16);
}
.sub-nav__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 3px;
}
.sub-nav__cat {
  padding: 0 24px;
  font-size: clamp(14px, 1.5vw, 18px);
  color: #fff;
  white-space: nowrap;
}
.sub-nav__drop {
  position: relative;
}
.sub-nav__toggle {
  min-width: 200px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  color: #fff;
  transition: background 0.25s;
}
.sub-nav__toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}
.sub-nav__chev {
  flex: 0 0 auto;
  transition: transform 0.3s var(--ease-out);
}
.sub-nav__drop.is-open .sub-nav__chev {
  transform: rotate(180deg);
}
.sub-nav__list {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: max(190px, 100%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.28s var(--ease-out),
    visibility 0.28s;
  z-index: 20;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
}
.sub-nav__drop.is-open .sub-nav__list {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.sub-nav__list li a {
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--first-gray);
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s;
}
.sub-nav__list li a:hover {
  background: var(--first-gray-light);
  color: var(--ink);
}
.sub-nav__list li a.is-active {
  color: var(--accent);
  font-weight: 700;
}
/* 좁은 화면: 내비바 압축 (280까지 안전) */
@media (max-width: 600px) {
  /* 토글 고정폭(200px) 해제 → 라벨 길이에 맞춰 축소, 여백 낭비/넘침 방지 */
  .sub-nav__toggle {
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .sub-nav {
    padding: 4px 6px;
  }
  .sub-nav__home {
    width: 34px;
    height: 34px;
  }
  .sub-nav__cat {
    padding: 0 10px;
    font-size: 14px;
  }
  .sub-nav__toggle {
    padding: 8px 12px;
    gap: 6px;
  }
  .sub-nav__sep {
    margin: 0 2px;
  }
}
/* 초협소: 카테고리 라벨(+구분선) 숨김 — [홈] · [현재▾]만 노출.
   카테고리명이 길어도(예: 어디가 아프세요?) 바가 넘치지 않게 함 */
@media (max-width: 430px) {
  .sub-nav__cat,
  .sub-nav__cat + .sub-nav__sep {
    display: none;
  }
}

/* ---------- 본문 공통 ---------- */
.sub-page {
  min-height: 40vh;
}
.sub-section {
  padding: 88px 0;
}
.sub-section--tint {
  background: var(--paper);
}
.sub-section--fade {
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    rgba(243, 246, 251, 0.4) 45%,
    #fff 100%
  );
}
.sub-section--dark {
  background: var(--ink);
  color: #fff;
}
.sub-section--dark .sec-head h2 {
  color: #fff;
}

/* ---------- 병원 소개 페이지 ---------- */
.about-content {
  display: flex;
  align-items: center;
  gap: 60px;
}
.about-doctor-info {
  width: 100%;
  max-width: 520px;
  position: relative;
}
.about-doctor-info img {
  width: 100%;
}
.about-doctor-info::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100%;
  z-index: -1;
  background:
    url("/assets/img/sub/about-doctor-info-bg.png") no-repeat right bottom / 60%,
    linear-gradient(151deg, #f4feff 2.33%, #f9feff 73.3%, #fff 103.71%);
  border-radius: 0 60px 60px 0;
}
.about-doctor-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.about-doctor-content p {
  font-size: 20px;
  color: var(--first-gray-deep);
  opacity: 0.8;
}
/* about-vision (풀블리드 네이비 + 우측 블리드 사진) */
.about-vision {
  background: var(--navy-deep) url("/assets/img/sub/about-vision-bg.png")
    no-repeat center center / cover;
  padding: 100px 0;
  background-attachment: fixed;
}
.about-vision__in {
  display: flex;
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}
.about-vision__text {
  width: 100%;
}
.about-vision__text p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
  word-break: keep-all;
}
.about-vision__text p + p {
  margin-top: 26px;
}
.about-vision__media {
  max-width: 840px;
  width: 100%;
  /* inner 오른쪽 경계 → 뷰포트 오른쪽 끝까지 블리드 (.section overflow:hidden이 초과분 클리핑) */
  margin-right: calc((min(var(--inner), 100vw - 48px) - 100vw) / 2);
}
.about-vision__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 60px 0 0 60px;
}
@media (max-width: 900px) {
  .about-vision__in {
    flex-direction: column;
    align-items: stretch;
  }
  .about-vision__media {
    flex: 0 0 auto;
    align-self: flex-end;
    width: min(520px, 100%);
  }
  .about-vision__media img {
    border-radius: 32px 0 0 32px;
  }
}

/* about-mission (센터 스테이트먼트: 질문 3행 · 구분선 · 답변 · 서명) */
.about-mission {
  text-align: center;
  background: url("/assets/img/sub/about-mission-bg.png") no-repeat center
    center / cover;
  padding: 100px 0;
}
.about-mission__q p {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.6;
  color: var(--navy);
  word-break: keep-all;
}
/* 질문 ↔ 답변 사이 가는 구분선 */
.about-mission__q::after {
  content: "";
  display: block;
  width: 180px;
  height: 1px;
  margin: 32px auto;
  background: var(--first-gray-mid);
}
.about-mission__body p {
  font-size: clamp(14px, 1.15vw, 17px);
  color: var(--first-gray-deep);
}
.about-mission__body .about-mission__pledge {
  margin-top: 10px;
  font-weight: 500;
  color: var(--first-blue);
}
.about-mission__sign {
  margin-top: 20px;
  font-size: 20px;
  color: var(--first-blue);
}
.about-mission__sign b {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.2em;
  color: var(--navy);
  margin: 0 3px;
}
.about-mission__sign em {
  color: var(--first-gray-deep);
}

/* about-record (치유의 기록: 번호 + 세리프 타이틀 + 치료·재활 메타) */
.about-record {
  background: url("/assets/img/sub/about-record-bg.png") no-repeat center top /
    cover;
}
.record-list {
  width: 100%;
  list-style: none;
}
.record-list li {
  display: flex;
  align-items: baseline;
  gap: clamp(24px, 6vw, 90px);
  padding: clamp(20px, 2.4vw, 30px) 0;
}
.record-list li + li {
  border-top: 1px solid rgba(27, 57, 104, 0.08);
}
.record-list__no {
  flex: 0 0 auto;
  min-width: 150px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 900;
  color: var(--first-gray);
}
.record-list__no i {
  font-size: 14px;
  font-weight: 400;
  margin-left: 5px;
  text-transform: uppercase;
}
.record-list__body h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.5;
  color: var(--first-gray-deep);
}
.record-list__meta {
  margin-top: 10px;
  font-size: clamp(13px, 1vw, 16px);
  color: var(--first-gray-deep);
}
.record-list__meta b {
  font-weight: 700;
  color: var(--first-teal);
}
.record-list__meta span {
  white-space: nowrap;
}
.record-list__meta span::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  transform: translateY(-50%);
  line-height: 1;
  margin: 0 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--first-blue);
}
@media (max-width: 640px) {
  .record-list li {
    flex-direction: column;
    gap: 6px;
  }
  .record-list__no {
    min-width: 0;
  }
  .record-list__meta span {
    white-space: normal;
  }
}

/* ---------- 병원 소개 반응형 ---------- */
@media (max-width: 900px) {
  /* 소개(사진+글) 세로 적층 — 좌우 배치 시 사진이 짓눌리는 구간 방지 */
  .about-content {
    flex-direction: column;
    gap: 36px;
  }
  .about-doctor-info {
    max-width: 440px;
  }
  /* 좌측 블리드 패널 → 사진 뒤 라운드 카드로 고정(적층 시 화면 밖으로 안 새게) */
  .about-doctor-info::before {
    width: 100%;
    border-radius: 24px;
  }
  .about-doctor-media {
    width: 100%;
  }
  /* fixed 배경은 모바일에서 렌더링이 튀므로 스크롤로 전환 */
  .about-vision {
    background-attachment: scroll;
  }
}
@media (max-width: 768px) {
  /* 자체 padding(100px)이 전역 .section 축소를 덮으므로 여기서 함께 줄임 */
  .about-vision,
  .about-mission {
    padding: 64px 0;
  }
  .about-mission__q::after {
    margin: 26px auto;
  }
}
@media (max-width: 480px) {
  .about-doctor-content p {
    font-size: 16px;
  }
  .about-mission__sign {
    font-size: 17px;
  }
  .about-mission__q::after {
    width: 120px;
  }
}
/* doctor-section */
.doctor-section {
  background: url("/assets/img/sub/hospital-doctor-bg.png") no-repeat center
    top / cover;
}

/* hospital-tour: 메인과 동일 구조, 둘러보기 배경만 서브 전용
   hospital-tour-bg.png 없으면 doctor-bg + 웨이브 폴백 */
.sub-page .tour {
  background: #fff;
  position: relative;
}

.sub-page .tour::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 90vw;
  height: 100%;
  background: url("/assets/img/sub/hospital-tour-bg.png") no-repeat center top /
    cover;
  border-radius: clamp(40px, 8vw, 120px) 0 0 0;
}
@media (max-width: 1920px) {
  .sub-page .tour::before {
    width: 95vw;
  }
}
@media (max-width: 1520px) {
  .sub-page .tour::before {
    width: 98vw;
  }
}
@media (max-width: 1280px) {
  .sub-page .tour::before {
    width: 99vw;
  }
}

.doctor-section__lead {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--first-gray-deep);
  opacity: 0.8;
  margin-top: 30px;
}
/* 의료진 바로가기 알약 버튼 */
.doctor-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.doctor-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  min-width: 180px;
  padding: 8px 22px 8px 10px;
  border: none;
  border-radius: 999px;
  background: #e2e4e6;
  font-size: 20px;
  font-weight: 700;
  color: #777;
  box-shadow: none;
  transition:
    background 0.25s var(--ease-out),
    border-color 0.25s,
    color 0.25s;
}
.doctor-tabs__btn:hover {
  background: #e4e8ee;
}
.doctor-tabs__btn.is-primary {
  background: linear-gradient(180deg, #1355bd 0%, #1b3968 100%);
  border-color: transparent;
  color: #fff;
}
.doctor-tabs__btn.is-primary:hover {
  background: linear-gradient(
    90deg,
    var(--first-blue-deep) 0%,
    var(--first-blue) 100%
  );
}
.doctor-tabs__thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  background-size: cover;
  border: 1px solid #fff;
  background-position: center center;
}
/* 의료진 카드 (Swiper 슬라이더: 데스크톱 2장/모바일 1장, 부족하면 자동 잠금) */
.doctor-cards {
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 20px);
  /* 카드 그림자가 슬라이더 클리핑에 잘리지 않게 여백 확보 */
  padding: 10px 10px 16px;
  margin: -10px -10px -16px;
}
.doctor-cards .swiper-wrapper {
  align-items: flex-start;
}
.doctor-cards .swiper-slide {
  height: auto;
  padding: 15px;
}
.doctor-card {
  width: 100%;
  min-height: 784px;
  border-radius: 40px 0;
  /* margin 금지: width 100% + 좌우 마진이면 슬라이드를 넘쳐 오른쪽 카드가 밀려 보임. 간격은 Swiper spaceBetween */
  border: 1px solid #f0f2f5;
  background: #fff;
  box-shadow: 0 2px 8px 8px rgba(0, 15, 38, 0.08);
  overflow: hidden;
  transition: box-shadow 0.35s var(--ease-out);
}
/* 슬라이더 잠금 상태에서 알약 버튼 클릭 시 해당 카드 강조 */
.doctor-card.is-hilite {
  box-shadow:
    0 0 0 3px var(--accent),
    var(--shadow-m);
}
/* 슬라이더 페이지네이션 (컨테이너 하단 고정 대신 흐름 배치) */
.doctor-cards .swiper-pagination {
  position: static;
  margin-top: 28px;
}
.doctor-cards .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--first-gray-mid);
  opacity: 1;
  border-radius: 999px;
  transition:
    width 0.3s var(--ease-out),
    background 0.3s;
}
.doctor-cards .swiper-pagination-bullet-active {
  width: 26px;
  background: var(--accent);
}
.doctor-card__visual {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  padding: 30px 25px;
  background:
    url("/assets/img/sub/hospital-doctor-visual-bg.png") no-repeat right
      bottom / 50%,
    linear-gradient(116deg, #eef4ff 0%, #f5f9ff 53.77%);
}
.doctor-image {
  border-radius: 30px 0;
  background: #fff;
  width: 56%;
  overflow: hidden;
  aspect-ratio: 31 / 36;
  line-height: 0;
}
.doctor-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.doctor-card__id {
  width: 44%;
}
.doctor-card__no {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.doctor-card__id h3 {
  margin-top: 20px;
  font-size: clamp(21px, 1.9vw, 30px);
  font-weight: 700;
  color: var(--first-blue);
}
.doctor-card__id p {
  margin-top: 15px;
  font-size: 20px;
  font-weight: 700;
  color: var(--first-gray);
}
.doctor-card__cols {
  display: flex;
  gap: clamp(18px, 2vw, 30px);
  padding: 30px 25px;
}
.doctor-card__col--career {
  width: 56%;
}
.doctor-card__col--society {
  width: 44%;
}
.doctor-card__col h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--first-blue);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(184, 192, 201, 0.6);
  margin-bottom: 14px;
}
.doctor-card__col li {
  font-size: 15px;
  line-height: 2;
  color: var(--first-gray-deep);
  opacity: 0.8;
  letter-spacing: -0.05em;
  word-break: keep-all;
}
/* 연수 및 논문 아코디언 */
.doctor-card__more {
  border-top: 1px solid var(--line);
  padding: 0 clamp(22px, 2.4vw, 32px);
}
.doctor-card__more summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.doctor-card__more summary::-webkit-details-marker {
  display: none;
}
.doctor-card__more summary::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-faint);
  line-height: 1;
}
.doctor-card__more[open] summary::after {
  content: "−";
}
.doctor-card__more-body {
  padding-bottom: 28px;
}
.doctor-card__more-block + .doctor-card__more-block {
  margin-top: 22px;
}
.doctor-card__more-block h5 {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}
.doctor-card__more-block li {
  position: relative;
  padding: 3px 0 3px 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--first-gray-deep);
  opacity: 0.8;
  word-break: keep-all;
  display: flex;
}
.doctor-card__more-block li::before {
  content: "•";
  margin-right: 8px;
}
/* 카드 1장씩 보이는 구간(~899px): 고정 min-height 해제 → 짧은 카드 하단 여백 제거
   (2장 노출 데스크톱에서만 높이 맞춤이 의미 있음) */
@media (max-width: 899px) {
  .doctor-card {
    min-height: 0;
  }
}
@media (max-width: 560px) {
  /* 바로가기 알약: 모바일 축소 (2개가 한 줄에 들어오도록) */
  .doctor-tabs {
    gap: 10px;
  }
  .doctor-tabs__btn {
    min-width: 0;
    gap: 10px;
    padding: 6px 16px 6px 8px;
    font-size: 16px;
  }
  .doctor-tabs__thumb {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 480px) {
  /* flex 컨테이너이므로 grid 규칙은 무효 → flex-direction으로 실제 적층 */
  .doctor-card__cols {
    flex-direction: column;
    gap: 22px;
  }
  .doctor-card__col--career,
  .doctor-card__col--society {
    width: 100%;
  }
  .doctor-card__visual {
    flex-direction: column;
  }
  .doctor-image,
  .doctor-card__id {
    width: 100%;
  }
}
/* 콘텐츠 카드 그리드 */


.info-card .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-strong);
  letter-spacing: 0.1em;
}






/* 증상 체크: 풀블리드 포토 앰비언트 밴드 */



.symptom-band .inner {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.35fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.symptom-band__head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #8dcbd4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.symptom-band__head .eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #8dcbd4;
}

.symptom-band__head h2 .point {
  color: #8dcbd4;
}








@media (max-width: 900px) {
  .symptom-band .inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
}

/* 서브 FAQ 정리: 메인 faq--bare 대비 한 단계 축소 + 정렬 */
.sub-page .faq-wrap {
  grid-template-columns: minmax(240px, 330px) 1fr;
  gap: clamp(44px, 5vw, 96px);
}
.sub-page .faq--bare .faq__q {
  padding: 22px 10px;
  font-size: 20.5px;
  gap: 14px;
}
.sub-page .faq--bare .faq__q em {
  font-size: 21px;
  flex: 0 0 42px;
}
.sub-page .faq--bare .faq__a .in {
  margin: 0 10px 0 66px;
  font-size: 18px;
  line-height: 1.85;
  padding-left: 62px;
}
.sub-page .faq--bare .faq__item.is-open .faq__a .in {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.sub-page .faq--bare .faq__q .chev {
  width: 30px;
  height: 30px;
}
/* 서브 공통 타이포 볼륨 (전역 대형 스케일을 서브 위계로 정렬)
   히어로 56 > 리드 질문 42 ≥ 섹션 헤딩 44 > 슬라이드/컴포넌트 타이틀 32~34 > 본문 17~19 */
.sub-page .sec-head h2 {
  font-size: clamp(28px, 3.4vw, 48px);
}
.sub-page .sec-head .sec-desc {
  font-size: min(4.3vw, 18px);
  margin-top: 16px;
}
.sub-page .diag__tabs button {
  font-size: 19px;
}
.sub-page .diag__ghost {
  font-size: clamp(56px, 6.6vw, 96px);
}
.sub-page .diag__body h3 {
  font-size: clamp(24px, 2.4vw, 36px);
}
.sub-page .diag__slogan {
  font-size: clamp(17px, 1.5vw, 21px);
}
.sub-page .diag__num {
  font-size: 14.5px;
}
.sub-page .faq-contact {
  margin-top: 26px;
}

/* 서브 오버라이드 반응형 리셋 (특이도가 mobile.css보다 높아 직접 재정의) */
@media (max-width: 900px) {
  .sub-page .faq-wrap {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (max-width: 768px) {
  .sub-page .faq--bare .faq__q {
    font-size: 17.5px;
    padding: 18px 6px;
    gap: 10px;
  }
  .sub-page .faq--bare .faq__q em {
    font-size: 18px;
    flex: 0 0 34px;
  }
  .sub-page .faq--bare .faq__a .in {
    margin: 0 4px;
    padding-left: 56px;
    font-size: 16.5px;
  }
  .sub-page .faq--bare .faq__item.is-open .faq__a .in {
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .sub-page .diag__tabs button {
    font-size: 15px;
  }
  .sub-page .diag__ghost {
    font-size: 52px;
  }
  .sub-page .diag__body h3 {
    font-size: 22px;
  }
  .sub-page .diag__slogan {
    font-size: 16.5px;
  }
}
@media (max-width: 640px) {
  .sub-page .sec-head h2 {
    font-size: clamp(24px, 6.4vw, 28px);
  }
}

/* 장비 제품컷 카드 (소프트 블루 그라데이션 + contain) */



/* 대상 스플릿 (이미지 + 체크리스트) */




.target-split .sec-head {
  margin-bottom: 24px;
}



/* 라이트 체크 리스트 (화이트/틴트 배경용) */






/* 넘버드 리스트 (아웃라인 고스트 넘버 + 타이틀 + 설명, 2열) */








/* 이미지+텍스트 스플릿 */




/* 비율 통일(원본 비율이 다른 사진들을 같은 4:3으로 맞춰 크롭) */

.split__body .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.split__body h3 .point {
  color: var(--blue);
}





/* 절차/단계 (헤어라인 칼럼 + 고스트 넘버) */











/* ---------- FAQ (메인과 동일 문법: Q인덱스 + 네이비 A.패널 + 부드러운 펼침) ---------- */
.faq {
  max-width: 980px;
}
.faq__item {
  border-top: 1px solid rgba(16, 27, 51, 0.14);
}
.faq__item:last-child {
  border-bottom: 1px solid rgba(16, 27, 51, 0.14);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 22px 12px;
  font-size: 19px;
  font-weight: 700;
  color: rgba(44, 49, 56, 0.7);
  border-radius: 12px;
  transition:
    color 0.3s,
    background 0.3s;
}
.faq__q:hover {
  background: linear-gradient(90deg, rgba(71, 175, 223, 0.08), transparent 70%);
}
.faq__item.is-open .faq__q {
  color: rgba(44, 49, 56, 0.7);
}
.faq__q em {
  font-weight: 700;
  font-size: 24px;
  color: var(--accent);
  flex: 0 0 44px;
}
.faq__q .chev {
  margin-left: auto;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  position: relative;
  transition:
    background 0.3s,
    border-color 0.3s,
    rotate 0.3s;
}
.faq__q .chev::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  translate: -50% -70%;
  rotate: 45deg;
  transition: border-color 0.3s;
}
.faq__item.is-open .faq__q .chev {
  rotate: 180deg;
  background: #1d97a9;
  border-color: transparent;
  box-shadow: 0 5px 10px rgba(49, 49, 49, 0.2);
}
.faq__item.is-open .faq__q .chev::before {
  border-color: #fff;
}
/* 부드러운 펼침 + 네이비 답변 패널 */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a .in {
  position: relative;
  overflow: hidden;
  min-height: 0;
  margin: 0 12px;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(
      140deg,
      rgba(16, 52, 122, 0.97) 0%,
      rgba(10, 41, 97, 0.96) 60%,
      rgba(13, 55, 92, 0.95) 100%
    ),
    url("/assets/img/ext/wave-cool.svg") center / cover no-repeat;
  border-radius: 16px;
  padding: 0 26px 0 70px;
  transition:
    padding 0.45s var(--ease-out),
    margin 0.45s var(--ease-out),
    box-shadow 0.45s;
}
.faq__a .in::before {
  content: "A.";
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s 0.2s;
}
.faq__item.is-open .faq__a .in {
  padding: 30px 25px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.faq__item.is-open .faq__a .in::before {
  opacity: 1;
}

/* ---------- 게시판 ---------- */
/* 비급여 진료비 테이블 (단정한 공식 서식 · 단색 기반) */
/* 대분류 헤딩 (행위료 / 약제비 / 치료재료대 / 제증명 수수료) */
.price-group {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 64px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.price-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.price-group:first-of-type {
  margin-top: 28px;
}
.price-block {
  margin-top: 34px;
}
.price-group + .price-block {
  margin-top: 22px;
}
/* 섹션(중분류) 타이틀 — 얇은 라벨 */
.price-block__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-sub);
}
.price-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  min-width: 760px;
}
.price-table th,
.price-table td {
  padding: 13px 16px;
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
  word-break: keep-all;
}
/* 세로 구분선은 아주 옅게만 */
.price-table th + th,
.price-table td + td {
  border-left: 1px solid #eef1f6;
}
.price-table thead th {
  padding-top: 11px;
  padding-bottom: 11px;
  background: transparent;
  color: var(--text-sub);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong, #d5dbe6);
}
.price-table thead th.col-code {
  width: 120px;
}
.price-table thead th.col-cost {
  width: 132px;
}
.price-table tbody td {
  color: var(--text-sub);
}
/* 지브라 스트라이프 — 홀수 열 배경 (colgroup col에 칠해 rowspan 병합과 무관하게 열 단위 유지) */
.price-table col.col-odd {
  background: #fafbfd;
}
.price-table td.is-name {
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}
/* 병합 셀(소분류·구분) — 잉크 라벨 (배경은 행 스트라이프로 통일) */
.price-table td.is-sub {
  color: var(--ink);
  font-weight: 600;
}
/* 코드 — 본문과 같은 크기·톤, 자간만 살짝 */
.price-table td.is-code {
  letter-spacing: 0.01em;
  color: var(--text-sub);
  white-space: nowrap;
}
.price-table td.is-cost {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.price-table .dash {
  color: var(--text-faint);
}
/* 상단 고지 안내 박스 — 좌측 라인의 담백한 노트 */
.price-noti {
  margin: 0 0 10px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--ink);
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--text-sub);
  line-height: 1.8;
}
.price-noti b {
  color: var(--ink);
  font-weight: 700;
}
.price-note {
  margin-top: 28px;
  font-size: 14px;
  color: var(--text-faint);
  line-height: 1.7;
}

/* 게시판 분류 탭 */




.board-cats a.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.board-cats a.is-active em {
  color: #8dcbd4;
}

/* 게시판 상단: 건수 + 검색 */












/* 게시판 테이블 */

















/* 게시글 상세 */








/* ---------- 지도/오시는길 ---------- */

.map-embed .root_daum_roughmap .wrap_controllers {
  display: none;
}
/* 카카오 roughmap 세로 확장 */
.map-embed .root_daum_roughmap {
  width: 100% !important;
  height: 540px !important;
}
.map-embed .root_daum_roughmap .wrap_map {
  height: calc(100%) !important;
}
@media (max-width: 768px) {
  .map-embed .root_daum_roughmap {
    height: 400px !important;
  }
}
/* 맵 글래스 인포바 (주소 요약 + 전화 + 길찾기 CTA) */







/* 수치 스트립 (틴트 그라데이션 밴드) */

/* 카운트 스팬은 b 스타일 상속 (라벨 span 규칙과 분리) */
.visit-stats b .count {
  display: inline;
  color: inherit;
  font: inherit;
  margin: 0;
}
.visit-stats .inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.visit-stats .inner > div {
  text-align: center;
  border-left: 1px solid var(--line);
  padding: 4px 12px;
}
.visit-stats .inner > div:first-child {
  border-left: 0;
}


.visit-stats .inner > div > span {
  display: block;
  margin-top: 6px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-sub);
}
@media (max-width: 768px) {
  .visit-stats .inner {
    grid-template-columns: 1fr 1fr;
    gap: 26px 0;
  }
  .visit-stats .inner > div:nth-child(3) {
    border-left: 0;
  }
}

/* 오시는길/진료시간: 신문형 2칼럼 */

.visit-info .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.visit-info .eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
}












/* ---------- 약관류 ---------- */
/* 약관: 좌측 스티키 타이틀 + 우측 본문 (faq-wrap 문법) */
.policy-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(44px, 5vw, 96px);
  align-items: start;
}
.policy-side {
  position: sticky;
  top: calc(var(--header-h) + 40px);
}
.policy-side .sec-head h2 {
  font-size: clamp(28px, 2.6vw, 38px);
}
.policy-meta {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-sub);
  line-height: 1.7;
}
@media (max-width: 900px) {
  .policy-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .policy-side {
    position: static;
  }
}

.policy-body {
  padding: clamp(30px, 3.5vw, 54px) clamp(24px, 3.5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
/* 총칙 (첫 문단) */
.policy-body > p:first-child {
  margin-bottom: 8px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--paper);
  font-size: clamp(16.5px, 1.3vw, 18px);
  color: var(--text-sub);
  line-height: 1.85;
}
/* 조항 제목 (제N조) */
.policy-body h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 800;
  color: var(--navy);
  margin: 40px 0 14px;
  line-height: 1.4;
}
.policy-body h3:first-of-type {
  margin-top: 28px;
}
/* 하위 항목 (1. 2. …) */
.policy-body h4 {
  position: relative;
  padding-left: 13px;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.35vw, 18px);
  font-weight: 700;
  color: var(--ink);
  margin: 22px 0 8px;
  line-height: 1.5;
}
.policy-body h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.policy-body p {
  font-size: clamp(16px, 1.3vw, 17.5px);
  color: var(--text-sub);
  line-height: 1.9;
  margin-bottom: 5px;
}
/* 조문 (①②③ 등, 원래 본문) */
.policy-body p.clause {
  margin-top: 12px;
  color: var(--text);
}

/* ---------- 진료철학 (about) ---------- */
/* 대표 인용구 밴드: 은은한 틴트→화이트 세로 그라데이션 (윗섹션과 영역 구분) */

/* 대표 인용구: 에디토리얼 시그니처 — 아웃라인 인용부호 + 좌정렬 + 서명 */

/* 아웃라인 인용부호 */












/* 아웃라인 넘버 뒤 솔리드 스카이 마침표 */

.about-row__body .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.about-row__body .eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
}


/* 3가치 밴드 */








/* ---------- 의료진 프로필 ---------- */
/* 의료진 소개: 에디토리얼 포토 프로필 (플랫 커버 + 타이포 중심) */



/* 커버: 메인 의료진 카드 문법 (소프트 블루 카드 + 아치 실루엣) */

/* 아치 실루엣 (메인 doc-slide__arch와 동일 문법) */




/* 슬로건: 이름 아래 조용한 한 줄 인용 (장식 없음) */


/* 이름: 대형 타이포 + 잉크 룰 */



/* 약력: 라벨+리스트 신문형 테이블 */






/* 학회·자격(마지막 그룹): 와이드에서 2단 */

/* 등장: 사진 라이즈 + 텍스트 칼럼 스태거 */





@media (prefers-reduced-motion: no-preference) {
  body:not(.is-capture) .doc-mag.reveal:not(.is-visible) .doc-mag__cover img {
    transform: translateY(36px);
    opacity: 0;
  }
  body:not(.is-capture) .doc-mag.reveal:not(.is-visible) .doc-mag__slogan,
  body:not(.is-capture) .doc-mag.reveal:not(.is-visible) .doc-mag__name,
  body:not(.is-capture) .doc-mag.reveal:not(.is-visible) .doc-mag__group {
    opacity: 0;
    transform: translateY(18px);
  }
}



/* ---------- 둘러보기 캐러셀 (센터 피크 풀블리드) ---------- */


.tour-slider .swiper-slide.tour-slide {
  position: relative;
  width: min(1080px, 78vw);
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  transform: scale(0.94);
  opacity: 0.45;
  transition:
    transform 0.7s var(--ease-out),
    opacity 0.7s var(--ease-out);
}
.tour-slider .swiper-slide-active.tour-slide,
.tour-slider .swiper-slide-duplicate-active.tour-slide {
  transform: scale(1);
  opacity: 1;
}

/* 캡션: 하단 스크림 + 번호/라벨 (활성 슬라이드에서만) */

.tour-slider .swiper-slide-active figcaption,
.tour-slider .swiper-slide-duplicate-active figcaption {
  opacity: 1;
  transform: none;
}


/* 컨트롤: 좌 프랙션 / 우 화살표 */


.tour-controls .tour-controls__frac .swiper-pagination-current {
  font-size: 24px;
  color: var(--ink);
}



@media (max-width: 768px) {
  .tour-slider .swiper-slide.tour-slide {
    width: 89vw;
    border-radius: 20px;
  }
  
  
  
  
}

/* ---------- 반응형 (서브) ---------- */


@media (max-width: 768px) {
  
  
  
  
  
  
  
  
  
  
  
  
  /* 게시판: 테이블 → 카드 (작성자·번호 헤더 숨김) */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .faq__q em {
    flex: 0 0 36px;
    font-size: 18px;
  }
  .faq__a .in {
    margin-left: 4px;
    margin-right: 4px;
    padding-left: 60px;
  }
  .faq__a .in::before {
    left: 18px;
  }
  .faq__q {
    font-size: 17px;
  }
  .faq__a {
    padding-left: 8px;
  }
  
}

/* ══════════════════════════════════════════════════════════
   통증 서브페이지 공통 (pain-*) — 시안: 2-1 목
   인트로(워터마크+피규어+대표질환 밴드) · 증상 슬라이더(다크) · FAQ
   ══════════════════════════════════════════════════════════ */
/* ---------- 인트로 ---------- */
.pain-intro {
  position: relative;
  padding-bottom: 0 !important;
}
.pain-intro .inner {
  position: relative;
  z-index: 1;
}
/* 섹션 천장에 붙는 워터마크 티커 — 메인 .home-blog__ticker 와 동일, top만 다름 */
.pain-intro__ticker {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  font-size: clamp(48px, 8vw, 140px);
  line-height: 1;
}
.pain-intro__ticker .marquee-track {
  animation-duration: 120s;
}
.pain-intro__ticker .marquee-unit {
  gap: clamp(36px, 5vw, 80px);
  padding-right: clamp(36px, 5vw, 80px);
}
.pain-intro__ticker .marquee-unit span {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: inherit;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #777;
  opacity: 0.06;
}
.pain-intro .sec-head .eyebrow {
  color: var(--first-gray);
}
.pain-intro .sec-head h2,
.inj-intro .sec-head h2 {
  font-size: clamp(28px, 3.3vw, 52px);
  font-weight: 300;
  color: #555;
}
.pain-intro .sec-head h2 .point {
  font-weight: 700;
  color: var(--first-blue);
}
.pain-intro .sec-desc {
  font-weight: 400;
  color: var(--first-gray-deep);
  max-width: 1080px;
}
/* 스테이지: 하단부 풀블리드 그레이 바닥 */
.pain-intro__stage {
  position: relative;
  padding-bottom: 96px;
}
.pain-intro__stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 42%;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #e7e9ea;
}
.pain-intro__figure {
  position: relative;
  background: #fff;
  z-index: 1;
  margin: 0;
}
.pain-intro__figure img {
  display: block;
  width: 100%;
  box-shadow: -3px -3px 7px 3px rgba(0, 0, 0, 0.15);
}
/* 대표질환 글래스 밴드 (피규어 하단 오버랩) */
.pain-intro__band {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: -54px clamp(16px, 6vw, 80px) 0;
  padding: clamp(18px, 3vw, 25px) clamp(22px, 3.4vw, 56px);
  border-radius: 6px;
  /* 이미지 레이어는 부위별 파일이 있으면 pain-page.php가 --pain-band-bg로 교체 */
  background:
    var(--pain-band-bg, url(/assets/img/sub/pain-neck-band-bg.png)) no-repeat
      left center / contain,
    linear-gradient(149deg, #e8edf5 0%, #bbc9df 81.17%);

  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: -3px -3px 7px 3px rgba(0, 0, 0, 0.15);
}
.pain-intro__band-label {
  flex: 0 0 auto;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  color: var(--first-blue-deep);
}
.pain-intro__band-label span {
  font-weight: 400;
}
.pain-intro__pills {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  list-style: none;
}
.pain-intro__pills li {
  background: #fff;
  border-radius: 999px;
  text-align: center;
  padding: 10px 20px;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 500;
  color: #777;
}

/* ---------- 증상 체크 (다크 + 슬라이더) ---------- */
.pain-sym {
  background: var(--pain-sym-bg, url(/assets/img/sub/pain-neck-sym-bg.png))
    no-repeat center center / cover;
  background-attachment: fixed;
  color: #fff;
}
.pain-sym__in {
  display: flex;
  align-items: center;
  gap: 32px;
}
.pain-sym__head {
  flex: 0 420px;
}
.pain-sym__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--first-teal);
  margin-bottom: 20px;
}
.pain-sym__head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.3vw, 52px);
  font-weight: 300;
  line-height: 1.35;
  color: #fff;
}
.pain-sym__head h2 b {
  font-weight: 700;
  line-height: inherit;
}
.pain-sym__lead {
  margin-top: 25px;
  font-size: clamp(14px, 1.2vw, 18px);
  color: rgba(232, 237, 245, 0.6);
}
/* 진행바: 스와이프 진행률 --p(0~1) → 티얼 채움 + 1F 노브 (드래그/클릭 제어) */
.pain-sym__progress {
  position: relative;
  margin-top: clamp(40px, 5vw, 84px);
  height: 36px;
  cursor: pointer;
  touch-action: none; /* 노브 드래그 중 페이지 스크롤 방지 */
}
.pain-sym__progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 7px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.pain-sym__progress .bar {
  position: absolute;
  left: 0;
  top: 50%;
  height: 7px;
  transform: translateY(-50%);
  width: calc(var(--p, 0) * 100%);
  min-width: 36px;
  background: var(--first-teal);
  border-radius: 3px;
  transition: width 0.3s var(--ease-out);
}
.pain-sym__progress .knob {
  position: absolute;
  top: 50%;
  left: calc(var(--p, 0) * (100% - 36px));
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: left 0.3s var(--ease-out);
  cursor: grab;
}
.pain-sym__progress.is-dragging .knob {
  cursor: grabbing;
}
/* 드래그 중엔 트랜지션 해제 — 포인터를 1:1로 따라오게 */
.pain-sym__progress.is-dragging .knob,
.pain-sym__progress.is-dragging .bar {
  transition: none;
}
.pain-sym__progress .knob img {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.15);
}
/* 슬라이더: 우측 뷰포트 끝까지 블리드 (카드가 화면 끝에서 잘려 보임)
  .pain-sym__in 조합 셀렉터 필수(특이성↑) — swiper CDN CSS(.swiper{margin:auto})가
  사이트 CSS보다 늦게 로드되어 동률이면 auto 마진이 이기고,
  교차축 auto 마진은 컬럼 flex의 stretch를 무효화해 max-content 폭으로 폭주함 */
.pain-sym__in .pain-sym__slider {
  flex: 1;
  min-width: 0;
  margin: 0 calc((min(var(--inner), 100vw - 48px) - 100vw) / 2) 0 0;
}
.pain-sym .swiper-slide {
  height: auto;
  margin: 0; /* 카드 그림자용 여백 금지 — 간격은 Swiper spaceBetween */
}
.sym-card {
  display: block;
  height: 100%;
  margin: 0;
  border-radius: 0 25px 0 0;
  overflow: hidden;
  background: #edf2ff;
  box-shadow: none;
}
.sym-card__img {
  position: relative;
  display: block;
  aspect-ratio: 407 / 279;
}
.sym-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sym-card__badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--first-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.sym-card__body {
  display: block;
  padding: 25px 30px;
}
.sym-card__body b {
  display: block;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--first-blue);
}
.sym-card__body p {
  margin-top: 8px;
  font-size: clamp(13.5px, 1.1vw, 18px);
  color: var(--first-gray-deep);
  opacity: 0.7;
}

/* ---------- FAQ (좌 타이틀 + 우 번호형 아코디언) ---------- */
.pain-faq {
  background: var(--pain-faq-bg, url(/assets/img/sub/pain-neck-faq-bg.png))
    no-repeat center center / cover;
}
.pain-faq__grid {
  display: flex;
  gap: clamp(20px, 4vw, 40px);
}
.pain-faq__side {
  flex: 1;
}
.pain-faq__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--first-teal);
  margin-bottom: 20px;
}
.pain-faq__side h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 52px);
  font-weight: 800;
  line-height: 1.34;
  color: var(--first-blue-deep);
}
.pain-faq__side h2 .point {
  color: var(--first-teal);
}
.pain-faq__img-wrap {
  display: block;
  width: 100%;
  max-width: 305px;
  margin-top: 25px;
  border-radius: 20px;
  filter: grayscale(100%);
  overflow: hidden;
  box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0.08);
}
.pain-faq__img {
  width: 100%;
  line-height: 0;
}
.pain-faq__list {
  flex: 2;
  min-width: 0;
  max-width: none;
}
/* 번호형 FAQ 변형 — 흰 원형 셰브런 + 티얼 그라데이션 답변 패널 */
.faq--num .faq__q .chev {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(14, 35, 68, 0.16);
}
.faq--num .faq__q .chev::before {
  border-color: #9299ad;
}
.faq--num .faq__a .in {
  background: url(/assets/img/sub/faq-num-bg.png) no-repeat center center /
    cover;
}
.faq--num .faq__a .in::before {
  color: #fff;
}

/* ---------- 통증 서브 반응형 ---------- */
/* 1001~1280: 로우 유지 구간 — 헤드 고정폭 축소로 카드 영역 확보 */
@media (max-width: 1280px) {
  .pain-sym__head {
    flex-basis: 300px;
  }
}
@media (max-width: 1000px) {
  .pain-sym__in {
    flex-direction: column;
    align-items: stretch;
  }
  .pain-sym__head {
    flex: 0 0 auto;
  }
  /* fixed 배경은 모바일에서 렌더링이 튀므로 스크롤로 전환 */
  .pain-sym {
    background-attachment: scroll;
  }
  .pain-faq__grid {
    flex-direction: column;
  }
  .pain-faq__side {
    flex: 0 0 auto;
  }
  .pain-faq__img {
    max-width: 340px;
  }
}
@media (max-width: 768px) {
  .pain-intro__stage {
    padding-bottom: 64px;
  }
  .pain-intro__band {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 20px;
    margin-left: 0;
    margin-right: 0;
  }
  .pain-intro__band-label {
    text-align: center;
  }
  .pain-sym__progress {
    margin-top: 28px;
  }
}
@media (max-width: 480px) {
  .pain-intro__pills {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pain-intro__pills li {
    padding: 6px 20px;
  }
}

/* ══════════════════════════════════════════════════════════
   주사치료 클리닉 서브페이지 (inj-*) — 시안: 3-1 신경주사
   인트로(피규어+치료 장점 패널) · 치료 대상(.pain-sym--split 재사용) · FAQ(.pain-faq 재사용)
   ══════════════════════════════════════════════════════════ */
/* ---------- 인트로 ---------- */
.inj-intro {
  position: relative;
  background: url(/assets/img/sub/inj-intro-bg.png) no-repeat center center /
    cover;
  background-attachment: fixed;
}
.inj-intro .sec-head .eyebrow {
  color: var(--first-gray);
}
.inj-intro .sec-head h2 .point {
  font-weight: 700;
  color: var(--first-teal);
}
.inj-intro__stage {
  position: relative;
  padding-bottom: 96px;
}
/* 원형 회전 워터마크 (디자이너 SVG: inj-wm.svg, 티얼 #8DCBD4) */
.inj-intro__wm {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: clamp(90px, 9vw, 128px);
  height: auto;
  animation: inj-wm-spin 36s linear infinite;
  pointer-events: none;
  transform-origin: center center;
}
/* translate를 rotate보다 먼저 — 순서가 반대면 이동축까지 회전해 제자리 회전이 아니라 공전함 */
@keyframes inj-wm-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.inj-intro__figure {
  position: relative;
  z-index: 1;
  width: 91%;
  box-shadow: 0 3px 30px 5px rgba(0, 38, 102, 0.1);
  margin: 0;
}
.inj-intro__figure img {
  display: block;
  width: 100%;
  box-shadow: 0 8px 30px rgba(14, 35, 68, 0.08);
}
/* 치료 장점 글래스 패널 (피규어 우측 하단 오버랩, 우측 뷰포트 끝까지 블리드) */
.inj-intro__panel {
  position: absolute;
  z-index: 2;
  left: 54%;
  top: 42%;
  right: calc((min(var(--inner), 100vw - 48px) - 100vw) / 2);
  padding: clamp(22px, 2.6vw, 36px) clamp(22px, 3vw, 44px);
  padding-right: calc((100vw - var(--inner)) / 2);
  border-radius: 6px 0 0 6px;
  background:
    url(/assets/img/sub/inj-intro-panel-bg.png) no-repeat right bottom / 40%,
    linear-gradient(149deg, #e4f4f6 0%, #a9cdd2 81.17%);
  box-shadow: -3px -3px 7px 3px rgba(0, 0, 0, 0.15);
}
.inj-intro__panel-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 800;
  color: #008d97;
}
.inj-intro__panel-label i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #008d97;
}
.inj-intro__panel-label span {
  font-weight: 400;
}
.inj-intro__pills {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 13px;
}
.inj-intro__pills li {
  background: #fff;
  border-radius: 999px;
  text-align: center;
  padding: 10px 20px;
  font-size: clamp(13.5px, 1.15vw, 18px);
  font-weight: 500;
  color: #777;
  box-shadow: 0 2px 8px rgba(14, 35, 68, 0.06);
}

/* ---------- 치료 대상: 다크 스플릿 변형 (.pain-sym 재사용) ---------- */
.pain-sym--split {
  position: relative;
  background: linear-gradient(
    269deg,
    rgba(238, 238, 238, 0.5) 0.78%,
    rgba(255, 255, 255, 0.5) 51.13%
  );
}
/* 좌측 44% 다크 블록 — 페이지에서 $inj_imgs['tgt_bg'] 지정 시 --inj-tgt-bg로 교체 */
.pain-sym--split::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  background: url(/assets/img/sub/inj-tgt-bg.png) no-repeat center center /
    cover;
}
.pain-sym--split .pain-sym__in {
  position: relative;
  z-index: 1;
}
/* 하단 대형 고스트 텍스트 — 흐르는 티커 (marquee-track 재사용) */
.pain-sym--split .pain-sym__ghost {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(60px, 7.8vw, 150px);
  line-height: 1;
  pointer-events: none;
}
.pain-sym--split .pain-sym__ghost .marquee-track {
  animation-duration: 60s;
}
.pain-sym--split .pain-sym__ghost .marquee-unit {
  gap: clamp(40px, 5vw, 90px);
  padding-right: clamp(40px, 5vw, 90px);
}
.pain-sym--split .pain-sym__ghost .marquee-unit span {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: inherit;
  line-height: 1;
  color: rgba(27, 57, 104, 0.05);
}
.pain-sym--split .sym-card,
.pain-sym.pain-sym--ns .sym-card {
  background: #ebf7f9;
}
.pain-sym--split .sym-card__body b,
.pain-sym.pain-sym--ns .sym-card__body b {
  color: var(--first-teal-deep);
}

/* 주사치료 뱃지는 티얼 */
.pain-sym--split .sym-card__badge {
  background: var(--first-teal);
}

.pain-faq--injection {
  background: url(/assets/img/sub/inj-faq-bg.png) no-repeat center center /
    cover;
}
.pain-faq--injection .pain-faq__img-wrap,
.pain-faq--ns .pain-faq__img-wrap {
  filter: none;
}

/* ---------- 주사치료 반응형 ---------- */
@media (max-width: 1300px) {
  .inj-intro__panel {
    padding-right: clamp(22px, 3vw, 44px);
  }
}
@media (max-width: 900px) {
  .inj-intro__stage {
    padding-bottom: 0;
  }
  .inj-intro__figure {
    width: 100%;
  }
  /* 패널: 오버랩 해제 → 피규어 아래 전체폭 (상단만 살짝 겹침) */
  .inj-intro__panel {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    margin: 36px 0 0;
    border-radius: 6px;
  }
}
/* 좁은 화면: 원형 워터마크가 소개 문단을 침범 → 숨김 */
@media (max-width: 600px) {
  .inj-intro__wm {
    display: none;
  }
}
@media (max-width: 1000px) {
  /* 컬럼 전환 구간: 다크 블록 전체폭 (헤드 텍스트 가독성) */
  .pain-sym--split::before {
    width: 100%;
  }
  .pain-sym--split .pain-sym__ghost {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════
   비수술 클리닉 서브페이지 — 시안: 4-1 신경차단술
   인트로(.inj-intro 재사용 + 하단 고스트 티커) · 치료 대상(.pain-sym--ns 풀 다크)
   ══════════════════════════════════════════════════════════ */
/* 인트로 섹션 하단 고스트 티커 (marquee-track 재사용) */
.inj-intro__ghost {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  z-index: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(60px, 8vw, 150px);
  line-height: 1;
  pointer-events: none;
}
.inj-intro__ghost .marquee-track {
  animation-duration: 60s;
}
.inj-intro__ghost .marquee-unit {
  gap: clamp(40px, 5vw, 90px);
  padding-right: clamp(40px, 5vw, 90px);
}
.inj-intro__ghost .marquee-unit span {
  font-weight: 700;
  font-size: inherit;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(120, 130, 142, 0.08);
}
.inj-intro__ghost .marquee-unit i {
  color: rgba(29, 151, 169, 0.08);
}
/* 치료 대상 풀 다크 변형 — 티얼 뱃지 + 정방형에 가까운 카드 사진 비율 */
.pain-sym--ns .sym-card__badge {
  background: var(--first-teal);
}
.pain-sym--ns .sym-card__img {
  aspect-ratio: 397 / 294;
}
@media (max-width: 1000px) {
  .inj-intro__ghost {
    display: none;
  }
}

/* 비수술 FAQ 배경 변형 — 시안: 좌측 화이트 / 우측(리스트 영역) 라이트 민트 스플릿
   faq_bg 지정 시 우측 블록에 이미지가 들어감 (--pain-faq-bg) */
.pain-faq--ns {
  position: relative;
  background: #fff;
}
.pain-faq--ns::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* 분할선을 뷰포트 %가 아닌 인너 기준으로 앵커링 — 시안: 인너 좌측에서 +370px
     (어떤 화면 폭에서도 타이틀 컬럼과 리스트 사이 여백에 위치) */
  left: calc((100% - min(var(--inner), 100% - 48px)) / 2 + 370px);
  right: 0;
  opacity: 0.9;
  background: linear-gradient(81deg, #eafdff 6.98%, #e4f4f6 99.08%);
}
.pain-faq--ns .pain-faq__grid {
  position: relative;
  z-index: 1;
}
@media (max-width: 1000px) {
  /* 컬럼 적층 구간: 스플릿이 콘텐츠를 가로지르지 않게 전체 민트로 */
  .pain-faq--ns::before {
    left: 0;
  }
}

/* 비수술 인트로 배경 변형 — 시안: 흰색 → 티얼 블루 그라데이션 */
.inj-intro.inj-intro--ns {
  background: #fff;
}
/* 비수술 인트로 변형 - 고스트 티커 */
.inj-intro--ns .inj-intro__ghost .marquee-unit span {
  font-weight: 700;
  letter-spacing: -0.04em;
  font-family: var(--font-display);
  color: rgba(120, 130, 142, 0.08);
  line-height: 0.92;
}
.inj-intro--ns .inj-intro__ghost .marquee-unit span i {
  color: rgba(29, 151, 169, 0.08);
  line-height: 0.92;
}
.pain-sym.pain-sym--ns {
  background: url(/assets/img/sub/ns-pain-sym-bg.png) no-repeat center center /
    cover;
}
.pain-faq--ns .faq--num .faq__a .in {
  background: var(--first-teal, #1d97a9);
}
.inj-intro--ns .eyebrow {
  letter-spacing: -0.04em;
}

/* ══════════════════════════════════════════════════════════
   스포츠 손상 클리닉 — 시안: 5-1 스포츠 손상
   인트로 좌측 블리드 · 다크 티커 바 · SPORT × BODY MAP(공덕 clinic-sports 참고)
   ══════════════════════════════════════════════════════════ */
/* 인트로 피규어: 좌측 뷰포트 끝까지 블리드, 인너의 75% 지점에서 종료 */
.inj-intro--sports {
  background: #fff;
}
.inj-intro--sports .inj-intro__figure {
  width: auto;
  margin-left: calc((min(var(--inner), 100vw - 48px) - 100vw) / 2);
  margin-right: 25%;
}
/* 높이 고정(시안 1920 기준 460px) — 와이드 화면에서 블리드로 폭이 늘어도
   세로로 길어지지 않고 좌우 크롭 (이미지가 패널보다 위에서 끝나는 시안 유지) */
.inj-intro--sports .inj-intro__figure img {
  height: clamp(280px, 24vw, 460px);
  object-fit: cover;
  object-position: center;
}
/* 다크 티커 바 */
.sports-ticker {
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  background: linear-gradient(
    90deg,
    var(--first-blue-deep) 0%,
    var(--first-teal-deep) 100%
  );
}
.sports-ticker .marquee-track {
  /* 스팬 4→10개 확장(유닛 ≈2,970px)에 맞춘 속도 보정 — 체감 속도는 기존 50s와 동일 */
  animation-duration: 125s;
}
.sports-ticker .marquee-unit {
  gap: 34px;
  padding-right: 34px;
}
.sports-ticker .marquee-unit span {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

/* ---------- SPORT × BODY MAP ---------- */
.sports-body-map {
  position: relative;
  overflow: hidden;
  background:
    url(/assets/img/sub/sports-body-map-bg.png) no-repeat top right /
      min(60%, 1300px),
    linear-gradient(180deg, #f4ffff 0%, #fff 80%);
}
/* 하단 대형 고스트 텍스트 */
.sports-body-map::before {
  content: "SPORT × BODY MAP";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  color: rgba(120, 130, 142, 1);
  opacity: 0.07;
  font-family: var(--font-display);
  font-size: 8vw;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.sports-body-map .inner {
  position: relative;
  z-index: 1;
}
.sports-body-map__head {
  margin-bottom: 52px;
  text-align: center;
}
.sports-body-map__eyebrow {
  display: inline-block;
  font-weight: 700;
  color: #78828e;
  letter-spacing: 0.08em;
}
.sports-body-map__title {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 52px);
  font-weight: 700;
  line-height: 1.35;
  color: #78828e;
}
.sports-body-map__title b {
  color: var(--first-teal);
}
.sports-body-map__desc {
  color: var(--first-gray);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.7;
}
/* 종목 탭 */
.sports-body-map__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 70px;
}
.sports-body-map__tab {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  box-shadow: 0 2px 8px 3px rgba(14, 35, 68, 0.08);
  border-radius: 999px;
  background: #fff;
  color: var(--first-gray);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.sports-body-map__tab.is-active {
  background: linear-gradient(
    180deg,
    var(--first-teal) 0%,
    var(--first-teal-deep) 100%
  );
  color: #fff;
  box-shadow: 0 4px 14px rgba(29, 151, 169, 0.28);
}
.sports-body-map__tab-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.sports-body-map__tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 패널: 좌 인체 모형 / 우 상세 */
.sports-body-map__panel {
  display: flex;
  align-items: center;
  gap: clamp(48px, 7vw, 100px);
}
.sports-body-map__figure {
  position: relative;
  margin: 0;
  line-height: 0;
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 30px 5px rgba(29, 29, 79, 0.12);
  max-width: 520px;
  flex: 1;
}
.sports-body-map__figure img {
  width: 100%;
  margin: 0 auto;
  display: block;
}
.sports-body-map__hotspot {
  position: absolute;
  width: 64px;
  height: 64px;
  line-height: 0;
  opacity: 0;
  transform: scale(0.72);
  transform-origin: center center;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}
.sports-body-map__hotspot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sports-body-map__hotspot[data-area="neck"] {
  top: 7.5%;
  right: 44.5%;
}
.sports-body-map__hotspot[data-area="shoulder"] {
  top: 16%;
  right: 31%;
}
.sports-body-map__hotspot[data-area="back"] {
  top: 36%;
  right: 45.5%;
}
.sports-body-map__hotspot[data-area="elbow"] {
  top: 32%;
  right: 30.5%;
}
.sports-body-map__hotspot[data-area="wrist"] {
  top: 47.5%;
  right: 28.5%;
}
.sports-body-map__hotspot[data-area="knee"] {
  top: 65%;
  right: 40%;
}
.sports-body-map__hotspot[data-area="foot"] {
  top: 83.5%;
  right: 40%;
}
.sports-body-map__hotspot.is-active {
  opacity: 1;
  transform: scale(1);
  animation: sportsHotspotPulse 2.4s ease-in-out infinite;
}
@keyframes sportsHotspotPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sports-body-map__hotspot.is-active {
    animation: none;
  }
}
/* 우측 상세 */
.sports-body-map__detail {
  position: relative;
  min-height: 280px;
  flex: 1;
}
.sports-body-map__detail-panel {
  display: none;
}
.sports-body-map__detail-panel.is-active {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sports-body-map__badge {
  display: inline-flex;
  margin-bottom: 28px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--first-gray-mid);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sports-body-map__sport-title {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(29, 151, 169, 0.4);
  font-family: var(--font-display);
  color: var(--first-blue);
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.2;
}
.sports-body-map__sport-title strong {
  font-weight: 700;
}
.sports-body-map__sport-title .sports-body-map__tab-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}
.sports-body-map__sport-desc {
  margin-bottom: 38px;
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--first-gray-deep);
  opacity: 0.85;
}
.sports-body-map__areas-label {
  color: var(--first-gray);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  opacity: 0.7;
}
.sports-body-map__area-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.sports-body-map__area-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 108px;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--first-teal);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(14, 35, 68, 0.06);
  color: var(--first-gray-deep);
  font-size: 16px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.sports-body-map__area-link-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--first-teal);
}
.sports-body-map__area-link-label {
  flex: 1;
}
.sports-body-map__area-link-arrow {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  color: var(--first-gray);
}
.sports-body-map__area-link-arrow svg {
  display: block;
  width: 1.2em;
  height: 1.2em;
}
.sports-body-map__area-link:hover {
  background: var(--first-teal);
  color: #fff;
  box-shadow: 0 4px 14px rgba(29, 151, 169, 0.28);
}
.sports-body-map__area-link:hover .sports-body-map__area-link-dot,
.sports-body-map__area-link:hover .sports-body-map__area-link-arrow {
  background: transparent;
  color: #fff;
}
.sports-body-map__area-link:hover .sports-body-map__area-link-dot {
  background: #fff;
}

/* ---------- 스포츠 손상 반응형 ---------- */
@media (max-width: 1000px) {
  .sports-body-map__panel {
    flex-direction: column;
    gap: 40px;
  }
  .sports-body-map__figure {
    max-width: 440px;
    width: 100%;
  }
  .sports-body-map__detail {
    min-height: 0;
    width: 100%;
  }
}
@media (max-width: 768px) {
  /* 모바일: 인트로 피규어 블리드 해제 → 전체폭 */
  .inj-intro--sports .inj-intro__figure {
    margin-right: 0;
    margin-left: 0;
  }
  .sports-ticker {
    padding: 11px 0;
  }
  .sports-ticker .marquee-unit span {
    font-size: 13px;
  }
  .sports-body-map__tabs {
    gap: 10px 8px;
    margin-bottom: 40px;
  }
  .sports-body-map__tab {
    font-size: 15px;
    padding: 8px 14px;
    min-height: 40px;
  }
  .sports-body-map__hotspot {
    width: 44px;
    height: 44px;
  }
  .sports-body-map__sport-title {
    margin-bottom: 20px;
    padding-bottom: 18px;
  }
  .sports-body-map__sport-desc {
    margin-bottom: 26px;
  }
  .sports-body-map__area-link {
    font-size: 15px;
    min-height: 38px;
    min-width: 0;
    padding: 7px 14px;
  }
}