/*
 * Persly 보충분 — Lovable 원본 CSS 7종 뒤에 마지막으로 로드된다.
 *
 * ⚠️ 여기에는 **원본에 없어서 우리가 채워야 하는 것만** 둔다. 원본 CSS를 덮어쓰는
 * 규칙을 늘리면 "그대로 이식"이 깨지므로, 새 규칙이 필요하면 먼저 원본에 같은 일을
 * 하는 클래스가 있는지 찾을 것.
 *
 * 지금 들어 있는 것은 세 가지뿐이다:
 *   ① 로고 마퀴 — 원본은 JS가 매 프레임 translateX를 계산해서 굴린다. 우리는 원본
 *      스크립트를 들여오지 않으므로 같은 궤적(0 → -50%)을 CSS 애니메이션으로 돈다.
 *      스트립을 두 벌 이어 붙였기 때문에 -50%가 정확히 한 바퀴다.
 *   ② 마퀴 안 목록의 기본 여백 제거 — 원본 스트립은 <div>였는데 우리는 병원 목록의
 *      의미를 살려 <ul>로 바꿨고, 그래서 브라우저 기본 list 스타일이 따라온다.
 *   ③ 한국어 어절 단위 줄바꿈 — 아래 주석 참조.
 */

@keyframes persly-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.marquee-track {
  animation: persly-marquee 60s linear infinite;
}

.marquee-track ul {
  margin: 0;
}

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

/*
 * 한국어 줄바꿈을 어절 단위로.
 *
 * CSS 기본값 `word-break: normal`은 한글을 중국어·일본어와 같은 부류로 보고 글자
 * 아무 데서나 줄을 끊는다. 그래서 "몇 명인지부터"가 "몇 명인지부│터"로, "반출하지"가
 * "반│출하지"로 갈라진다. 원본이 영어 사이트라 번들에 이 대비가 없어서 우리가 채운다.
 * `keep-all`은 공백에서만 끊게 하고, 공백 없는 긴 토큰(URL 등)은 `overflow-wrap:
 * anywhere`가 받아 가로 넘침을 막는다.
 *
 * 좁은 화면에서 특히 크게 티가 나지만 원인은 폭과 무관하므로 미디어쿼리를 두지 않는다.
 * :lang(ko)로 한정해 /en 페이지의 영어 줄바꿈에는 손대지 않는다.
 */
:lang(ko) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}