/* 이벤트 상세 — medical-item-detail.css + story-detail.css 를 깔고 그 위에 얹는다.
   이벤트 본문의 디자인 규칙도 앞으로 이 파일에 모은다. */

/* 헤더 여백은 바깥 .story-page 가 맡는다(story-detail.css) — 위치 띠 아래로 조금만 띄운다 */
.story-page .event-detail.medical-item-detail { padding-top: 32px; }
/* 종료 안내 — 위치 띠 바로 아래 같은 폭의 얇은 띠. 글자 시작은 띠의 집 아이콘 줄에 맞춘다 */
.event-closed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0;
  padding: 10px calc(max(0px, (100% - 1400px) / 2) + clamp(20px, 5vw, 96px)) 10px
    var(--dept-menu-x, calc(max(0px, (100% - 1400px) / 2) + clamp(20px, 5vw, 96px)));
  background: #f4f4f6; border-bottom: 1px solid #ececef; color: #44444c; font-size: 14px; line-height: 1.5;
}
.event-closed a { color: #6d28d9; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 디자인 본문은 시술 상세의 히어로처럼 위치 띠 바로 아래에 붙는다 */
.story-page .event-detail.medical-item-detail.is-designed { padding-top: 0; }

/* 지금 이벤트 본문은 포스터 사진 한 장이다. 화면 폭에 맞춰 키우되
   원본(1080px)보다 늘리면 흐려지므로 거기서 멈춘다. */
.event-detail .section-body img {
  max-width: min(100%, 1080px);
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 한중일 페이지는 모든 글자를 reset.css 의 그 나라 고딕 하나로 그린다. 꾸러미 CSS 를 덮으려 !important 를 쓴다 */
:is(:lang(zh), :lang(ja)) :is(.event-detail, .event-detail *) {
  font-family: var(--font-cjk), sans-serif !important;
}
/* 일본어는 띄어쓰기가 없어 꾸러미의 keep-all 이면 줄을 못 바꾸고 넘친다 */
:lang(ja) :is(.event-detail, .event-detail *) {
  word-break: normal !important;
  text-wrap: pretty !important;
}