/* ==========================================================================
   동래성모안과 — 메인 페이지 (와이어프레임 1a 레퍼런스형)
   ========================================================================== */

/* --- 1. Hero — 배경 영상 + 좌측 그라데이션 위 카피 3장 회전 ---------------------
   쌓임 순서: 컨트롤(z 4) > 카피(z 3) > 가림막(z 2) > 영상(z 1)

   영상은 화면 전체가 아니라 왼쪽을 --hero-video-x 만큼 비우고 오른쪽에 깔립니다.
   빈 왼쪽은 히로 배경색(ink)이고, 영상 왼쪽 가장자리는 마스크로 흐려 이어 붙입니다.
   1280·1440·1920px 에서 첫 장면 집도의 얼굴이 카피(--hero-copy-w) 오른쪽에,
   상담 장면 원장님이 화면 안에 들어오도록 맞춘 값입니다.
   --hero-video-x 를 줄이면 인물이 글자 쪽으로, 키우면 오른쪽 끝으로 밀려 잘립니다.                          */
.hero {
  /* 첫 화면을 꽉 채웁니다. 화면이 낮아도 최소 620px 는 확보합니다. */
  --hero-h:          max(620px, 100svh);

  /* 인물과 겹치지 않는 왼쪽 텍스트 폭. 1440x900 기준으로 세 장 모두 확인한 값이라
     이 값을 키우면 2번 사진의 수술모가 글자 뒤로 들어옵니다. */
  --hero-copy-w:     520px;

  --hero-title-size: clamp(34px, 3.4vw, 56px);
  --hero-body-size:  clamp(17px, 1.2vw, 20px);
  --hero-video-x:    12%;    /* 영상이 시작하는 가로 위치 (왼쪽은 비워 둠) */
  --hero-video-fade: 16%;    /* 영상 왼쪽 가장자리가 흐려지는 폭 (영상 폭 기준) */
  --hero-video-pos:  30%;    /* 영상을 자르는 가로 기준 — 0% 면 왼쪽 기준, 50% 면 가운데 */
}

.hero {
  position: relative;
  min-height: var(--hero-h);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--color-ink);   /* 사진이 뜨기 전 흰 깜빡임 방지 */
  color: var(--color-text-invert);
}

/* 배경 영상 */
.hero-bg { position: absolute; inset: 0; z-index: 1; }
.hero-video {
  position: absolute; top: 0; bottom: 0; right: 0; left: var(--hero-video-x);
  width: calc(100% - var(--hero-video-x)); height: 100%;
  object-fit: cover; object-position: var(--hero-video-pos) center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hero-video-fade));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--hero-video-fade));
}

/* 가림막 — 가로: 글자가 놓이는 왼쪽만 덮고 오른쪽 인물은 살립니다.
            세로: 위는 흰 헤더 글자, 아래는 슬라이드 컨트롤 가독성용입니다. */
.hero-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(var(--hero-scrim-rgb), 0.92) 0%,
      rgba(var(--hero-scrim-rgb), 0.82) 20%,
      rgba(var(--hero-scrim-rgb), 0.52) 42%,
      rgba(var(--hero-scrim-rgb), 0.16) 64%,
      rgba(var(--hero-scrim-rgb), 0)    82%),
    linear-gradient(180deg,
      rgba(var(--hero-scrim-rgb), 0.42) 0%,
      rgba(var(--hero-scrim-rgb), 0)    26%,
      rgba(var(--hero-scrim-rgb), 0)    64%,
      rgba(var(--hero-scrim-rgb), 0.34) 100%);
}

.hero-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--container-wide);
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--ticker-h) + var(--sp-5))
           var(--gutter)
           calc(var(--sp-7) + var(--sp-5));
}
.hero-copy { max-width: var(--hero-copy-w); }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--color-on-dark-sub);
  margin-bottom: var(--sp-3);
}
.hero-eyebrow::before {
  content: ""; width: 34px; height: 1px; background: currentColor; flex: none;
}

/* 슬라이드별 카피 — 같은 그리드 칸에 겹쳐 두어 가장 긴 슬라이드 높이에 맞춥니다.
   (min-height 를 손으로 잡지 않아도 되고, 전환 중 레이아웃이 흔들리지 않습니다) */
.hero-stage { display: grid; }
.hero-slide {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }

.hero-h {
  font-size: var(--hero-title-size); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--color-text-invert);
  text-wrap: balance;
}
.hero-lead {
  margin-top: var(--sp-3);
  font-size: var(--hero-body-size); line-height: var(--lh-loose);
  color: var(--color-on-dark-sub);
}

.hero-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* 슬라이드 컨트롤 — 히로 하단 가로 전체 */
.hero-controls { position: absolute; z-index: 4; left: 0; right: 0; bottom: var(--sp-5); }
.hero-controls-inner {
  width: 100%; max-width: var(--container-wide); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.hero-nav { display: flex; align-items: center; gap: var(--sp-2); }
.hero-index { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); letter-spacing: var(--ls-wide); }
.hero-index .num {
  color: var(--color-text-invert); opacity: 0.5;
  transition: opacity var(--transition);
}
.hero-index .num.is-active { opacity: 1; font-weight: 700; }
.hero-bar { width: 64px; height: 1px; background: var(--color-on-dark-line); position: relative; overflow: hidden; }
.hero-bar::after {
  content: ""; position: absolute; inset: 0; background: var(--color-text-invert);
  transform-origin: left; transform: scaleX(0);
}
.hero-bar.is-running::after { animation: heroProgress var(--hero-bar-dur, 6s) linear forwards; }   /* 장면 길이는 main.js 가 넣습니다 */
@keyframes heroProgress { to { transform: scaleX(1); } }

.hero-btn {
  width: 48px; height: 48px; display: grid; place-items: center;   /* 중장년 터치 영역 */
  border: 1px solid var(--color-on-dark-line); border-radius: 50%;
  color: var(--color-text-invert);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.hero-btn:hover {
  background: var(--color-text-invert); border-color: var(--color-text-invert);
  color: var(--color-primary-deep);
}

@media screen and (max-width: 1280px) {
  .hero { --hero-copy-w: 480px; }
}

/* 좁은 화면에서는 사진이 인물 위주로 잘려 왼쪽 여백이 사라집니다.
   그래서 가림막을 위→아래 방향으로 바꾸고 글을 아래로 내려 붙입니다. */
@media screen and (max-width: 1024px) {
  .hero {
    --hero-h: max(560px, 92svh);
    --hero-copy-w: 100%;
    align-items: flex-end;
  }
  /* 좁은 화면은 영상을 화면 가득 깔고 가림막을 세로로 바꿉니다 */
  .hero { --hero-video-x: 0%; --hero-video-pos: 42%; }
  .hero-video { -webkit-mask-image: none; mask-image: none; }

  .hero-veil {
    background: linear-gradient(180deg,
      rgba(var(--hero-scrim-rgb), 0.60)  0%,
      rgba(var(--hero-scrim-rgb), 0.24) 26%,
      rgba(var(--hero-scrim-rgb), 0.72) 62%,
      rgba(var(--hero-scrim-rgb), 0.94) 100%);
  }
  .hero-inner {
    padding: calc(var(--header-h) + var(--ticker-h) + var(--sp-5))
             var(--gutter)
             calc(var(--sp-7) + var(--sp-4));
  }
}

/* 세로 화면은 장면마다 인물 위치로 잘라 둔 세로 영상(hero-portrait.mp4)을 씁니다 */
@media screen and (orientation: portrait) and (max-width: 1024px) {
  .hero { --hero-video-pos: 50%; }
}

@media screen and (max-width: 768px) {
  .hero { --hero-title-size: clamp(27px, 7.4vw, 38px); }
  .hero-controls { bottom: var(--sp-3); }
  .hero-controls-inner { justify-content: flex-start; gap: var(--sp-4); }
  .hero-btn { width: 48px; height: 48px; }
  .hero-bar { width: 44px; }
}

/* --- 2. Intro — 배경사진 위 좌측 카피 ---------------------------------------
   사진 오른쪽에 인물이 있어 글은 왼쪽에 놓고,
   왼쪽에서 오른쪽으로 옅어지는 흰 그라데이션으로 글자 대비를 확보합니다. */
.intro {
  position: relative;
  /* 사진(2560×1098)이 가로로 길어, 높이를 키우면 좌우가 잘리며 인물이 크게 보입니다.
     1440px 에서 900px — 원장님(사진 55~80%)이 글자 오른쪽에 온전히 들어오는 높이입니다. */
  min-height: clamp(640px, 64vw, 900px);
  display: grid; align-items: center;
  overflow: hidden;
  background: #fff;
}
.intro-bg { position: absolute; inset: 0; }
.intro-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.intro-bg::after {
  content: ""; position: absolute; inset: 0;
  /* 새 원본은 왼쪽이 이미 흰색이라 가림막을 옅게 잡았습니다 */
  background: linear-gradient(90deg,
    rgba(255,255,255,0.82) 0%,
    rgba(255,255,255,0.55) 26%,
    rgba(255,255,255,0.12) 46%,
    rgba(255,255,255,0) 60%);
}
.intro-inner { position: relative; z-index: 2; }
.intro-copy { max-width: 560px; }

.intro-title {
  font-size: var(--fs-h1); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.intro-title em { font-style: normal; color: var(--color-primary-deep); }
.intro-text { margin-top: var(--sp-4); color: var(--color-text-sub); line-height: var(--lh-loose); }
.intro-text p + p { margin-top: var(--sp-2); }

/* 좁은 화면은 사진을 배경에 깔면 얼굴이 글자 뒤로 들어갑니다.
   글을 위에 두고, 사진은 그 아래에 원장님 위주로 잘라 크게 보여 줍니다. */
@media screen and (max-width: 1024px) {
  .intro { min-height: 0; display: flex; flex-direction: column-reverse; padding-top: var(--section-pad); }
  .intro-bg { position: relative; inset: auto; height: min(112vw, 720px); margin-top: calc(var(--sp-5) * -1); }
  .intro-bg img { object-position: 66% 20%; }
  /* 사진 위쪽을 흰색으로 풀어 글 영역과 이어 붙입니다 */
  .intro-bg::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0) 22%);
  }
  .intro-copy { max-width: 100%; }
}

/* --- 3. Milestone — 65,000안 -----------------------------------------------
   섹션을 화면 2배 높이로 잡고 안쪽을 sticky 로 고정합니다.
   고정된 동안 스크롤 진행도(--p 진입 / --q 이탈)로 사진이 떠올랐다 빠져나갑니다.
     --p 0→1 : 아래에서 올라와 자리 잡음
     --q 0→1 : 위로 빠져나가며 사라짐
   사진마다 --rise 가 달라 서로 다른 속도로 움직입니다(패럴럭스).        */
.milestone {
  position: relative;
  /* 고정 구간 길이 = 340vh - 100vh = 240vh 만큼 스크롤.
     사진 6장짜리 묶음이 두 번 올라왔다 빠져나가고, 그동안 "65,000안" 은 계속 떠 있습니다.
     더 길게 끌고 싶으면 이 높이만 키우세요 (main.js 의 비율은 그대로 둬도 비례합니다). */
  height: 340vh;
  background: #fff;
  --pa: 0; --qa: 0;   /* 1파 진입 / 이탈 */
  --pb: 0; --qb: 0;   /* 2파 진입 / 이탈 */
  --q: 0;             /* 섹션 전체 이탈 (= 2파 이탈) */
}
.ms-sticky {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  display: grid; place-items: center;
  overflow: hidden;
}

.ms-photos { position: absolute; inset: 0; pointer-events: none; }

/* 두 묶음은 같은 자리를 쓰고, 진행도 변수만 다르게 받습니다.
   아래 .ms-ph 는 var(--p)/var(--q) 를 그대로 쓰므로 묶음마다 다른 타이밍이 됩니다. */
.ms-wave   { position: absolute; inset: 0; }
.ms-wave-a { --p: var(--pa); --q: var(--qa); }
.ms-wave-b { --p: var(--pb); --q: var(--qb); }

.ms-ph {
  position: absolute;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--color-primary-light);
  opacity: calc(min(var(--p) * 1.6, 1) * (1 - var(--q)));
  transform: translateY(calc(
    (1 - var(--p)) * var(--rise, 220px)          /* 진입: 아래에서 위로 */
    - var(--q) * var(--exit, 620px)              /* 이탈: 위로 빠져나감 */
  ));
  will-change: transform, opacity;
}
.ms-ph img { width: 100%; height: 100%; object-fit: cover; }
/* doctor-review.jpg — 원장님 머리가 오른쪽에 있어 좁은 아치에서 잘리지 않게 오른쪽으로 당깁니다 */
.ms-wave-a .ms-ph.p2 img { object-position: 72% center; }

/* 좌우로 흩어 배치 — 가운데 글자 영역은 비워 둡니다.
   vw/vh 만 쓰면 창이 아주 크거나 작을 때 사진이 과도해지므로 clamp 로 상하한을 둡니다. */
.ms-ph.p1 { left: 1%;   bottom: -6%;  width: clamp(110px, 12.5vw, 200px); height: clamp(220px, 40vh, 400px); --rise: 200px; --exit: 560px; }
.ms-ph.p2 { left: 12%;  bottom: 8%;   width: clamp(120px, 13.5vw, 215px); height: clamp(250px, 46vh, 450px); --rise: 320px; --exit: 760px; }
.ms-ph.p3 { left: 24%;  bottom: -12%; width: clamp(100px, 11vw,   175px); height: clamp(200px, 36vh, 355px); --rise: 140px; --exit: 480px; }
.ms-ph.p4 { right: 23%; bottom: -10%; width: clamp(105px, 11.5vw, 185px); height: clamp(210px, 38vh, 375px); --rise: 160px; --exit: 500px; }
.ms-ph.p5 { right: 11%; bottom: 7%;   width: clamp(120px, 13.5vw, 215px); height: clamp(245px, 45vh, 440px); --rise: 300px; --exit: 730px; }
.ms-ph.p6 { right: 0%;  bottom: -7%;  width: clamp(110px, 12vw,   190px); height: clamp(215px, 39vh, 385px); --rise: 220px; --exit: 590px; }

/* --- 가운데 텍스트 ---------------------------------------------------------
   두 단계를 같은 그리드 칸에 겹쳐 두어, 전환해도 높이가 튀지 않게 합니다. */
.ms-center {
  position: relative; z-index: 2; text-align: center;
  width: 100%; max-width: 900px; padding: 0 var(--gutter);
  display: grid;
  /* 사진이 다 빠져나간 뒤 글자도 함께 옅어지며 다음 섹션으로 넘어갑니다 */
  opacity: calc(1 - var(--q) * 0.85);
  transform: translateY(calc(var(--q) * -60px));
}
.ms-stage {
  grid-area: 1 / 1; align-self: center;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.ms-stage-2 { opacity: 0; transform: translateY(14px); pointer-events: none; }
.milestone.is-swapped .ms-stage-1 { opacity: 0; transform: translateY(-14px); }
.milestone.is-swapped .ms-stage-2 { opacity: 1; transform: none; pointer-events: auto; }

.ms-label {
  font-family: var(--font-display);
  font-size: var(--fs-sm); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-text-weak);
  margin-bottom: 6px;
}
.ms-num {
  font-size: clamp(56px, 7.6vw, 116px); font-weight: 800;
  white-space: nowrap;
  letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ms-num .unit { font-size: 0.32em; font-weight: 600; margin-left: 0.14em; letter-spacing: 0; }
.ms-sub { margin-top: var(--sp-3); font-size: var(--fs-lg); color: var(--color-text-sub); }

/* 세부 수치 3열 */
.ms-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.ms-stats li {
  min-width: 170px; padding: 14px 22px;
  border: 1px solid var(--color-line); border-radius: var(--radius-base);
  background: rgba(255,255,255,.75); backdrop-filter: blur(4px);
}
.ms-stats .n { display: block; font-size: var(--fs-h3); font-weight: 800; letter-spacing: var(--ls-tight); }
.ms-stats .t { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--color-text-sub); }

.ms-scroll {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);
  z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: var(--fs-xs); color: var(--color-text-weak);
  opacity: calc(1 - var(--q) * 2);          /* 이탈이 시작되면 먼저 사라집니다 */
  pointer-events: none;
}
.ms-scroll .arrow { font-size: 17px; animation: msArrow 1.8s var(--ease) infinite; }
@keyframes msArrow { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(6px); opacity: 1 } }

@media screen and (max-width: 1024px) {
  .milestone { height: 300vh; }
  .ms-ph.p3, .ms-ph.p4, .ms-ph.p6 { display: none; }
  .ms-ph.p1 { width: 20vw; height: 30vh; }
  .ms-ph.p2 { width: 22vw; height: 34vh; left: 2%; }
  .ms-ph.p5 { width: 22vw; height: 34vh; right: 2%; }
}
@media screen and (max-width: 640px) {
  .milestone { height: 270vh; }
  .ms-sticky { min-height: 520px; }
  .ms-ph.p1 { display: none; }
  .ms-ph.p2 { width: 30vw; height: 26vh; bottom: 2%; }
  .ms-ph.p5 { width: 30vw; height: 26vh; bottom: 2%; }
  .ms-stats li { min-width: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .milestone { height: auto; }
  .ms-sticky { position: static; height: auto; min-height: 0; padding: var(--section-pad-lg) 0; }
  /* 스크롤 연출이 없으면 두 묶음이 같은 자리에 겹치므로 2파는 뺍니다 */
  .ms-wave-b { display: none; }
  .ms-ph { opacity: 1; transform: none; }
  .ms-center { opacity: 1; transform: none; }
  .ms-scroll { display: none; }
  .ms-scroll .arrow { animation: none; }
}

/* --- 4. 진료과목 --> common.css 
   (의료진소개 페이지도 쓰므로 공용으로 옮겼습니다) */

/* --- 5. 의료진 소개 — 배경사진 위 우측 카피 ---------------------------------
   사진 왼쪽에 인물이 있어 글은 오른쪽에 놓습니다.                        */
.doctor-sec {
  position: relative;
  min-height: clamp(620px, 66vw, 820px);
  display: grid; align-items: center;
  overflow: hidden;
  background: #fff;
}
.doctor-bg { position: absolute; inset: 0; }
.doctor-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 38% center; }
.doctor-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(270deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.86) 26%,
    rgba(255,255,255,0.35) 46%,
    rgba(255,255,255,0) 62%);
}
.doctor-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
}
.doctor-copy { grid-column: 2; }

.doctor-name { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-tight); }
.doctor-name span { margin-left: 8px; font-size: var(--fs-lg); font-weight: 500; color: var(--color-text-sub); }
.doctor-cert {
  display: inline-block; margin-top: var(--sp-2); padding: 6px 15px;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--color-primary-deep); background: var(--color-primary-light);
  border-radius: var(--radius-pill);
}
.doctor-quote {
  margin-top: var(--sp-3);
  font-size: var(--fs-h3); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.doctor-quote strong { color: var(--color-primary-deep); }
.doctor-desc { margin-top: var(--sp-3); color: var(--color-text-sub); line-height: var(--lh-loose); }
.doctor-more { margin-top: var(--sp-5); background: rgba(255,255,255,.7); }

/* --- 흘러가는 큰 글자 (의료진 섹션 바로 아래, 독립된 띠) ----------------------
   어느 섹션에도 겹치지 않습니다. 섹션 안으로 다시 넣지 마세요.
   트랙 안에 같은 글자 4개를 두고 -50%(= 앞의 2개 폭)만큼 옮깁니다.
   항목마다 padding-right 로 간격을 주므로 항목 폭이 모두 같고, 따라서 이음매가 없습니다.
   flex 의 gap 을 쓰면 마지막 항목 뒤에 간격이 없어 반 바퀴마다 튑니다. */
.marquee {
  position: relative;
  padding: clamp(20px, 2.6vw, 46px) 0;
  background: var(--color-bg);
  overflow: hidden; pointer-events: none; user-select: none;
}
.marquee-track {
  display: flex; align-items: center;
  width: max-content;
  animation: marqueeSlide 22s linear infinite;   /* 1440px 화면 기준 약 120px/초 */
}
.marquee-item {
  display: inline-flex; align-items: center; gap: clamp(22px, 2.8vw, 52px);
  padding-right: clamp(22px, 2.8vw, 52px);
  font-family: var(--font-display);
  font-size: clamp(54px, 10.4vw, 168px);
  line-height: 1.12; white-space: nowrap;
  color: var(--color-primary);
  opacity: 0.18;
}
/* 반복 사이의 점 구분자 */
.marquee-item::after {
  content: ""; flex: none;
  width: 0.085em; height: 0.085em;
  border-radius: 50%; background: currentColor;
}
@keyframes marqueeSlide { to { transform: translateX(-50%); } }

@media screen and (max-width: 1024px) {
  .doctor-sec { min-height: 0; padding: var(--section-pad) 0; }
  .doctor-bg img { object-position: 28% center; }
  .doctor-bg::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0.88) 42%,
      rgba(255,255,255,0.96) 100%);
  }
  .doctor-inner { grid-template-columns: 1fr; }
  .doctor-copy { grid-column: 1; margin-top: clamp(180px, 34vw, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* --- 7. 보유 장비 — 끊김 없이 흘러가는 띠 ---------------------------------
   main.js 가 카드 묶음을 한 벌 복제해 두 벌로 만들고, 매 프레임 transform 으로 옮기며
   한 벌 폭을 넘으면 되감아 무한 반복합니다. 마우스·손가락으로 끌어서 넘길 수도 있습니다.
   간격은 카드의 margin-right 로 줍니다 (gap 을 쓰면 이음매에서 튑니다 — marquee 와 같은 원리).
   마우스를 올리면 흐름은 그대로 두고, 그 카드만 커지고 나머지는 흐려집니다.
   키보드로 들어오거나 일시정지 버튼을 누르면 멈춥니다.
   스크립트가 없거나 움직임 줄이기 설정이면 복제 없이 가로 스크롤로 보입니다. */
.equip-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.equip-intro { margin-top: var(--sp-1); color: var(--color-text-sub); }
.equip-actions { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }

.equip-pause {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 48px; padding: 0 var(--sp-2);
  border: 1px solid var(--color-line-mid); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-text);
  transition: border-color var(--transition);
}
.equip-pause[hidden] { display: none; }
.equip-pause:hover { border-color: var(--color-text); }
/* 정지 아이콘(두 줄) ↔ 재생 아이콘(삼각형) */
.equip-pause-icon {
  width: 10px; height: 12px;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.equip-pause[aria-pressed="true"] .equip-pause-icon {
  width: 0; height: 0; border-right: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
}

.equip-loop {
  overflow-x: auto; scrollbar-width: thin;
  padding: 0 var(--gutter) var(--sp-2);
}
.equip-track { display: flex; width: max-content; }
.equip-card {
  flex: none; width: var(--equip-card-w); margin-right: var(--sp-3);
  background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden;
}
.equip-link { display: block; height: 100%; color: inherit; cursor: pointer; }
.equip-link:focus-visible { outline: 3px solid var(--color-primary-deep); outline-offset: -3px; border-radius: var(--radius-lg); }
.equip-loop.is-dragging .equip-link { cursor: grabbing; }
.equip-img { aspect-ratio: 1 / 1; background: var(--color-bg); }
.equip-img img { width: 100%; height: 100%; object-fit: contain; }
.equip-body { padding: var(--sp-3); border-top: 1px solid var(--color-line); }
.equip-maker {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  color: var(--color-primary-deep); letter-spacing: var(--ls-base);
}
.equip-card h3 { margin-top: 4px; font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-tight); }
.equip-model { margin-top: 2px; font-size: var(--fs-xs); color: var(--color-text-sub); }
.equip-desc  { margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--color-text-sub); }

.equip-card {
  position: relative;
  transition: transform var(--transition), filter var(--transition),
              opacity var(--transition), box-shadow var(--transition);
}
.equip-img img { -webkit-user-drag: none; user-select: none; }

/* 흐르는 상태 (JS 가 .is-looping 을 붙였을 때만) */
.equip-loop.is-looping {
  overflow: hidden; padding: var(--sp-3) 0;   /* 위아래 여백 — 커진 카드가 잘리지 않게 */
  margin: calc(var(--sp-3) * -1) 0;
  cursor: grab; touch-action: pan-y; user-select: none;
}
.equip-loop.is-looping .equip-track { will-change: transform; }
.equip-loop.is-dragging { cursor: grabbing; }

/* 올린 카드만 앞으로 — 마우스가 있는 기기에서만, 끄는 중에는 끕니다 */
@media (hover: hover) {
  .equip-loop:not(.is-dragging) .equip-card:hover {
    z-index: 1;
    transform: scale(var(--equip-hover-scale));
    box-shadow: var(--shadow-card);
  }
  .equip-loop:not(.is-dragging) .equip-track:has(.equip-card:hover) .equip-card:not(:hover) {
    filter: blur(var(--equip-dim-blur));
    opacity: 0.55;
  }
}

@media screen and (max-width: 768px) {
  .equip-head { flex-direction: column; align-items: flex-start; }
}

/* --- 8. 소식과 후기 ------------------------------------------------------- */
.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.news-card .cat {
  display: inline-block; margin-bottom: 10px; font-size: var(--fs-xs); font-weight: 700;
  color: var(--color-primary-deep);
}
.news-card h3 { font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-tight); }
.news-card time { display: block; margin-top: 12px; font-size: var(--fs-xs); color: var(--color-text-sub); }
.news-card h3 { word-break: keep-all; }
.news-empty { grid-column: 1 / -1; padding: var(--sp-6) 0; text-align: center; color: var(--color-text-sub); }
.news-empty .btn-text { margin-left: var(--sp-1); }

@media screen and (max-width: 768px) { .news-grid { grid-template-columns: 1fr; } }

/* 블로그 썸네일을 못 받았을 때 (의학칼럼의 빈 썸네일과 같은 모양) */
.news-card .column-thumb-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-eq-stage);
  font-size: var(--fs-h3); font-weight: 700; color: var(--color-primary-deep);
}