/* ============================================================
   LUCENT ANIMAL MEDICAL CENTER — Design Tokens (v2, prod-aligned)
   24시 루센트 동물의료센터
   ------------------------------------------------------------
   Aligned with the production stylesheet (uploads/lucent-website/
   css/style.css) and elevated with a small luxe layer.

   Brand surfaces:
   • default              → charcoal + gold (main hospital)
   • [data-brand="imaging"] → deep navy + champagne (영상진단센터)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=Noto+Serif+KR:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Italiana&display=swap");
/* Pretendard — 한글 본문/제목용 프리미엄 산세리프.
   가변·동적 서브셋 CDN: 페이지에서 실제 쓰는 글리프만 로드해 매우 가벼움. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  /* =========================================================
     PRODUCTION TOKENS (1:1 with the real CSS)
     ========================================================= */
  --color-primary:   #2C2C2A;
  --color-secondary: #585858;
  --color-accent:    #C9A84C;
  --color-imaging-primary:   #0B1F3A;
  --color-imaging-secondary: #5B8DB8;
  --color-imaging-accent:    #C9A84C;
  --color-text-dark: #2C2C2A;
  --color-text-gray: #585858;
  --color-bg-light:  #F8F8F8;
  --color-white:     #FFFFFF;
  --font-main:       'Pretendard Variable', 'Pretendard', 'Noto Sans KR', sans-serif;
  --transition:      0.3s ease;
  --shadow:          0 4px 20px rgba(0,0,0,0.1);

  /* Premium upgrade layer (from the real upgrade pass) */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 28px rgba(0,0,0,0.11), 0 24px 64px rgba(0,0,0,0.09);
  --shadow-gold: 0 6px 28px rgba(201,168,76,0.22);
  --shadow-dark: 0 8px 32px rgba(0,0,0,0.28);
  /* High-gloss (하이그로시) dark gradients — top sheen + diagonal light
     streak + deep base. Reads like polished piano-lacquer. */
  --gradient-dark:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 9%, transparent 24%),
    linear-gradient(118deg, transparent 34%, rgba(255,255,255,0.07) 47%, rgba(255,255,255,0) 60%),
    linear-gradient(145deg, #343432 0%, #2C2C2A 34%, #161614 78%, #232321 100%);
  --gradient-cream:   linear-gradient(160deg, #fcfcfa 0%, #ededeb 100%);
  --gradient-accent:
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #E2CD95 0%, #C9A84C 40%, #9A7E34 100%);
  --gradient-light:   linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
  --gradient-imaging:
    linear-gradient(180deg, rgba(125,170,215,0.18) 0%, rgba(255,255,255,0.02) 9%, transparent 24%),
    linear-gradient(118deg, transparent 34%, rgba(150,190,230,0.10) 47%, rgba(255,255,255,0) 60%),
    linear-gradient(145deg, #1b3b67 0%, #0b1f3a 38%, #03101f 80%, #0a1d36 100%);

  /* =========================================================
     LUXE LAYER — pushed further, used by ui_kits/main-website/*
     ========================================================= */

  /* Accent display serifs.
     --font-display     : LATIN ONLY (LUCENT wordmark, EN labels, numerals).
                          Cormorant has NO Korean glyphs — never wrap 한글 in it.
     --font-display-ko  : Korean ceremonial serif for emphasis words (빛으로 …).
                          Pairs Noto Serif KR with Cormorant so mixed runs align. */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-display-ko: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --font-display-alt: 'Italiana', 'Cormorant Garamond', serif;

  /* Korean text gets slightly looser tracking */
  --tracking-korean: 0.005em;
  --tracking-eyebrow: 0.20em;   /* matches .section-title .en */
  --tracking-display: 0.18em;
  --tracking-tight:  -0.015em;

  /* Spacing (production uses ad-hoc; this is a 4px scale) */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* Containers (production uses 1200/1400 mix) */
  --container-content: 1200px;  /* body content */
  --container-header:  1400px;  /* nav-bar inner */
  --gutter: clamp(16px, 4vw, 30px);

  /* Radii — production is sharp (2–4px). Keep it that way. */
  --r-square: 0;
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-pill: 999px;

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 180ms;
  --dur-med:  280ms;
  --dur-slow: 520ms;

  /* Status (kept for the design system; not used in marketing site) */
  --lc-success: #3f7d4f;
  --lc-info:    #5b8db8;
  --lc-warning: #c08a2b;
  --lc-danger:  #b3392e;
  --lc-emergency: #d4423a;
}

/* Imaging-center brand swap */
[data-brand="imaging"] {
  --color-primary:   var(--color-imaging-primary);
  --color-secondary: var(--color-imaging-secondary);
  --color-accent:    var(--color-imaging-accent);
  --gradient-dark:   var(--gradient-imaging);
  --gradient-accent: linear-gradient(135deg, #d6bb71 0%, #c9a84c 50%, #9a7e34 100%);
  --shadow-gold:     0 6px 28px rgba(201,168,76,0.22);
}

/* ============================================================
   Base elements
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  color: var(--color-text-dark);
  background: #fff;
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
  letter-spacing: var(--tracking-korean);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
a   { text-decoration: none; color: inherit; transition: color var(--transition); }
ul,ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: 0; background: none; font-family: var(--font-main); }

/* ============================================================
   Section Title — production pattern, used everywhere
   <div class="section-title">
     <span class="en">…</span>
     <span class="ko">…</span>
     <span class="divider"></span>
   </div>
   ============================================================ */
.section-title {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  padding: 14px 28px;
}
.section-title .en {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-title .ko {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.4;
}
.section-title .divider {
  display: inline-block;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  margin-top: 16px;
}
.section-title::before,
.section-title::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--color-accent);
  border-style: solid;
  opacity: 0.58;
  pointer-events: none;
}
.section-title::before { top: 0;    left: 0;  border-width: 2px 0 0 2px; }
.section-title::after  { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* ============================================================
   Buttons — production tokens, slightly refined
   ============================================================ */
.btn {
  display: inline-block;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-xs);
  transition: all var(--transition);
  cursor: pointer;
  font-family: var(--font-main);
  letter-spacing: 0.04em;
}
.btn-primary {
  background: linear-gradient(135deg, #d6bb71 0%, #C9A84C 45%, #9a7e34 100%);
  color: #fff;
  border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 3px 14px rgba(201,168,76,0.35);
}
.btn-primary:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: none;
}
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-outline-white:hover {
  background: #fff;
  color: var(--color-primary);
}

/* ============================================================
   Watermark — large faint English word, sits behind a section
   ============================================================ */
.lc-watermark {
  position: absolute;
  right: -18px;
  bottom: 0;
  font-weight: 900;
  font-size: 120px !important;   /* 모든 워터마크 크기 통일 (인라인 override 무시) */
  letter-spacing: -5px !important;
  line-height: 1;
  white-space: nowrap;
  color: rgba(44, 44, 42, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: lc-watermark-drift 5.5s ease-in-out infinite alternate;
  will-change: transform;
}
.lc-watermark--light  { color: rgba(255, 255, 255, 0.085); }
.lc-watermark--gold   { color: rgba(201, 168, 76, 0.10); }
/* 인라인 스타일 워터마크 — 동일 드리프트 + 동일 크기로 통일 */
.lc-watermark-flow {
  font-size: 120px !important;
  letter-spacing: -5px !important;
  white-space: nowrap;
  animation: lc-watermark-drift 5.5s ease-in-out infinite alternate;
  will-change: transform;
}
/* 오른쪽(우측 bleed) → 왼쪽으로 흐르다가 '첫 글자가 좌측 끝에 닿는 지점'에서 되돌아옴.
   to 값 = 요소 좌측 끝을 뷰포트 좌측(0)에 맞추는 이동량 (100%=글자폭, 100vw=뷰포트폭).
   min(-30px, …): 글자가 뷰포트보다 넓은 모바일에선 최소 30px 드리프트로 안전 처리. */
@keyframes lc-watermark-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(min(-30px, 100% - 100vw - 10px)); }
}
/* 모바일 — 120px는 화면보다 커서 글자가 잘림 → 단계적으로 축소 (작아진 만큼 풀스윕도 정상 작동) */
@media (max-width: 768px) {
  .lc-watermark, .lc-watermark-flow { font-size: 64px !important; letter-spacing: -3px !important; }
}
@media (max-width: 480px) {
  .lc-watermark, .lc-watermark-flow { font-size: 48px !important; letter-spacing: -2px !important; }
}

/* ============================================================
   HIGH-GLOSS (하이그로시) — coded glossy / piano-lacquer finish
   Applied globally to every background placeholder ([data-photo])
   and offered as a reusable .lc-glossy utility. CSS-only; no JS.
   ============================================================ */

/* Image-area gloss/shine effects DISABLED per request — flat panels only. */
[data-photo] { isolation: isolate; }
[data-photo] > * { position: relative; z-index: 4; }
.lc-glossy > * { position: relative; z-index: 4; }

/* ============================================================
   Responsive — mobile GNB (hamburger drawer)
   ============================================================ */
.lc-gnb-burger { display: none; }
/* Slider/carousel side arrows removed per request (PC + mobile) */
.lc-slider-arrow { display: none !important; }
/* Section titles: keep Korean words intact, step down size on mobile */
@media (max-width: 768px) {
  body { word-break: keep-all; }
  .section-title .ko { font-size: 22px !important; }
}
.section-title .ko, .section-title .en { word-break: keep-all; }
@media (max-width: 1080px) {
  .lc-gnb-desktop { display: none !important; }
  .lc-gnb-burger  { display: flex !important; }
}
/* Mobile: turn the right-edge quick-buttons into a fixed BOTTOM bar */
@media (max-width: 768px) {
  .lc-floating {
    top: auto !important; bottom: 0 !important; right: 0 !important; left: 0 !important;
    transform: none !important;
    flex-direction: row !important;
    box-shadow: 0 -3px 14px rgba(0,0,0,0.28) !important;
    z-index: 1000 !important;
  }
  .lc-floating > a {
    width: auto !important; flex: 1 1 0 !important;
    padding: 9px 4px !important; font-size: 10px !important;
    gap: 4px !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
  }
  .lc-floating > a:last-child { border-right: none !important; }
  body { padding-bottom: 58px; }
}

/* ============================================================
   Universal mobile collapse — any grid tagged .lc-collapse drops
   to a single column on phones (kills horizontal overflow from
   fixed-px / multi-fr section grids + footers).
   ============================================================ */
@media (max-width: 768px) {
  .lc-collapse { grid-template-columns: 1fr !important; }
  .lc-collapse-2 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .lc-collapse-2 { grid-template-columns: 1fr !important; }
}

/* ============================================================
   feature-centers — Equipment / Treatments / Booking 섹션
   인라인 padding(44px)을 모바일에서 20px으로 덮어쓰기
   EquipCard: 모바일에서 세로 스택 (이미지 위 / 텍스트 아래)
   ============================================================ */
@media (max-width: 768px) {
  .lc-fc-section-pad { padding: 28px 20px !important; }
  .lc-equip-card      { flex-direction: column !important; }
  .lc-equip-card-img  { width: 100% !important; min-height: 160px !important; height: 160px !important; border-right: none !important; border-bottom: 1px solid #ececec !important; }
}

/* Collab radial hub — center + shrink nodes on phones so the orbit
   stays symmetric and bottom departments are not clipped. */
@media (max-width: 768px) {
  .collab-split { justify-content: center !important; }
  .collab-hub { flex-basis: 100% !important; }
  .collab-hub-box { width: min(380px, 86vw) !important; margin: 0 auto; }
  .collab-node { min-width: 60px !important; padding: 6px 8px !important; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  /* shimmer는 의도된 시각 효과 — prefers-reduced-motion 예외 */
  .hero-shimmer::after {
    animation-duration: 6s !important;
    animation-timing-function: linear !important;
  }
  /* 사용자 결정(항상 표시): 의도된 장식 효과는 모션감소여도 동작하도록 예외 처리.
     (이 전역 *{0.001ms} 차단이 PC에서 협진/scan/리빌을 죽이고 있었음) */
  .lc-collab-flow { animation-duration: 2.4s !important; }
  .lc-collab-ring { animation-duration: 14s !important; }
  .lc-equip-card:hover .lc-equip-card-img::after,
  .lc-scan-host:hover::after { animation-duration: 2.5s !important; }
  /* 스크롤 리빌: 이동 없는 페이드가 보이도록 transition 시간 복구(.lc-reveal-soft와 함께) */
  html.lc-reveal-on [data-reveal] { transition-duration: 0.85s !important; }
  /* 워터마크 드리프트: 모션감소여도 아주 느린 흐름 유지(사용자 결정=항상 표시) */
  .lc-watermark, .lc-watermark-flow { animation-duration: 5.5s !important; }
  /* 페이지 로더: 호흡/헤일로는 모션감소여도 보여야 함(PC 윈도 애니OFF에서 멈춰 에러처럼 보이는 것 방지) */
  .lc-page-loader__ring { animation-duration: 2.2s !important; }
  .lc-page-loader__spark { animation-duration: 1.9s !important; }
}

/* ============================================================
   모바일 텍스트 줄바꿈 / 폰트 크기 개선 (375~768px)
   ============================================================ */
@media (max-width: 768px) {
  /* 줄바꿈 자연스럽게 (body keep-all 보완) */
  h2, h3, h4 { word-break: keep-all; overflow-wrap: break-word; }
  p { word-break: keep-all; overflow-wrap: break-word; }

  /* 섹션 제목 서브텍스트 크기 조정 */
  .section-title .desc { font-size: 13px !important; line-height: 1.7 !important; }

  /* 히어로 설명 텍스트 너비·크기 제한 */
  .hero-desc { max-width: 100% !important; font-size: 14px !important; }

  /* 배너 페이지 제목 축소 */
  .page-banner-title { font-size: 28px !important; }

  /* 특화센터 카드 설명 텍스트 */
  .spec-card-title { font-size: 15px !important; }
}

@media (max-width: 480px) {
  /* 섹션 제목 추가 축소 */
  .section-title .ko { font-size: 19px !important; }
  .section-title .en { font-size: 10px !important; letter-spacing: 0.18em !important; }

  /* 배너 제목 더 축소 */
  .page-banner-title { font-size: 22px !important; }

  /* Specialties 카드 제목 */
  .spec-card-title { font-size: 14px !important; }

  /* 히어로 타이틀 — 일반 모바일 (481→480px) */
  .lc-hero-title {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.28 !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* 소형 모바일 — iPhone mini 등 375px 이하 */
@media (max-width: 375px) {
  .section-title .ko { font-size: 17px !important; }
  .page-banner-title { font-size: 20px !important; }

  /* 히어로 내부 패딩 축소 → 가용 너비 확보 (343px) */
  .lc-hero-inner { padding: 0 16px !important; }

  /* 히어로 타이틀 — 5.5vw → 375px에서 ≈20.6px, 14글자×20.6≈289px < 343px */
  .lc-hero-title {
    font-size: clamp(16px, 5.5vw, 22px) !important;
    line-height: 1.35 !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* ============================================================
   구글맵 iframe — 반응형 (모바일에서 꽉 차게)
   ============================================================ */
iframe[title*="루센트"] {
  width: 100%;
  display: block;
}
@media (max-width: 768px) {
  /* about·main Location 지도 컨테이너 */
  .ab-2col { grid-template-columns: 1fr !important; }
  iframe[title*="루센트"] { height: 260px !important; }
}

/* ============================================================
   텍스트 줄바꿈 — 강조 보호 · PC/모바일 분기 br
   ============================================================ */

/* 강조 덩어리는 중간에서 절대 끊기지 않도록 */
.highlight, .lc-highlight, .lc-badge,
.lc-nowrap, [class*="badge"] {
  white-space: nowrap;
}

/* PC/모바일 분기 <br> 클래스 */
@media (min-width: 768px) { .mo-only { display: none; } }
@media (max-width: 767px) { .pc-only { display: none; } }

/* ============================================================
   .hero-shimmer — 히어로/배너 이미지 공통 shimmer 오버레이
   모든 페이지 히어로/배너 영역에 position:relative 부모에 클래스 추가만 하면 적용
   ============================================================ */
@keyframes lc-shimmer {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(220%) skewX(-18deg); }
}
.hero-shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* 단일 shimmer — 넓고 은은한 사선 빔, 6s linear */
.hero-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 100%;
  z-index: 20;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.05) 20%,
    rgba(255,255,255,0.20) 45%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.20) 55%,
    rgba(255,255,255,0.05) 80%,
    transparent 100%
  );
  animation-name: lc-shimmer;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ============================================================
   .lc-page-loader — 페이지 진입 로딩 스피너
   각 페이지 #root에 미리 삽입 → Babel 컴파일/React 렌더 전까지 표시,
   ReactDOM.render 시 #root 내용이 교체되며 자동 제거됨.
   GNB 클릭 시 흰 화면 깜빡임 방지.
   ============================================================ */
.lc-page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 46% 38% at 50% 50%, rgba(201,168,76,0.10), transparent 72%),
    linear-gradient(180deg, #2a2a28 0%, #1c1c1a 55%, #131311 100%);
}
/* 도는 스피너 대신 — 골드 브랜드 마크가 은은히 ‘호흡’ + 소프트 헤일로(고급감, 회전 없음) */
.lc-page-loader__spark {
  position: relative; z-index: 1; width: 48px; height: 48px;
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.45));
  animation: lc-loader-breathe 1.9s ease-in-out infinite;
}
.lc-page-loader__ring {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  border: 1.5px solid rgba(201,168,76,0.5); border-radius: 50%;
  animation: lc-loader-halo 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes lc-loader-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
@keyframes lc-loader-halo {
  0%        { transform: scale(0.7); opacity: 0.55; }
  80%, 100% { transform: scale(2.3); opacity: 0; }
}

/* ============================================================
   .lc-page-fade — 페이지/섹션 진입 페이드인
   단독 페이지: 첫 렌더 시 1회. #앵커 페이지: key={id}로 전환마다 재생.
   GNB 모든 메뉴 전환에 통일된 시각 피드백 제공.
   ============================================================ */
.lc-page-fade { animation: lc-page-fade-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lc-page-fade-in {
  from { opacity: 1; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Quiet-luxury 디테일 (2026-06-11)
   ① 협진 다이어그램 — 중앙(환자)에서 각 분과로 흐르는 골드 라이트
   ② 장비 카드 — hover 시 골드 스캔 라인(영상진단 모티프)
   둘 다 순수 CSS·prefers-reduced-motion 존중(접근성).
   ============================================================ */
@keyframes lc-collab-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -12; } }
.lc-collab-flow {
  animation: lc-collab-flow 2.4s linear infinite;
  filter: drop-shadow(0 0 0.6px rgba(232, 201, 160, 0.85));
}

/* 점선 궤도 링 — 천천히 시계방향 회전 (협진 네트워크가 환자 중심으로 끊임없이 도는 은유) */
@keyframes lc-collab-spin { to { transform: rotate(360deg); } }
.lc-collab-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: lc-collab-spin 14s linear infinite;
}

@keyframes lc-scan {
  0%   { opacity: 0; top: -10%; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; top: 100%; }
}
.lc-equip-card-img, .lc-scan-host { position: relative; overflow: hidden; }
.lc-equip-card-img::after, .lc-scan-host::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -10%; height: 32px;
  background: linear-gradient(180deg, transparent, rgba(201, 168, 76, 0.55), transparent);
  opacity: 0; pointer-events: none; z-index: 8;
}
.lc-equip-card:hover .lc-equip-card-img::after,
.lc-scan-host:hover::after { animation: lc-scan 2.5s ease-in-out; }

/* 협진 플로우/링·scan은 은은한 장식이라 '모션 줄이기' 환경에서도 항상 동작시킨다
   (사용자 결정). 스크롤 리빌만 모션감소 시 이동 없이 페이드 처리(.lc-reveal-soft). */

/* ============================================================
   스크롤 리빌 (reveal.js + IntersectionObserver)
   뷰포트 진입 시 [data-reveal] 요소가 묵직하게(절제) 떠오름.
   ⚠️ 초기 숨김은 reveal.js가 <html>에 .lc-reveal-on을 붙였을 때만 적용 →
      JS 미실행/미지원/모션감소 시 콘텐츠는 항상 정상 노출(SEO·접근성 안전).
   ============================================================ */
html.lc-reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
html.lc-reveal-on [data-reveal].lc-revealed {
  opacity: 1;
  transform: none;
}
/* 모션 줄이기: 이동(translateY) 없이 페이드만 — 어지럼 방지하면서 리빌은 유지 */
html.lc-reveal-on.lc-reveal-soft [data-reveal] { transform: none; }

/* 가로 스크롤 슬라이더(의료진 등) — 스크롤바 숨김, 터치/트랙패드 스와이프는 유지 */
.lc-hscroll { scrollbar-width: none; -ms-overflow-style: none; }
.lc-hscroll::-webkit-scrollbar { display: none; height: 0; }
.lc-hscroll > * { scroll-snap-align: start; }