/* ==========================================================================
   assets/page/42.css — [42] 이벤트 전용 컴포넌트
   · .fs-events-hero    정사각 이벤트 카드가 옆으로 자동으로 흐르는 히어로 (흰 밴드, 메인 FS EVENT 와 같은 줄)
   · .fs-events-card    정사각 사진(히어로와 같은 event-sq-NN.jpg, 10-08) + 아래 가운데 이름·기간 카드 + 상태 배지
   · .fs-events-lineup  회복 관리 타일 (사진 + 라벨바 + 설명)
   2026-10-02 승인자 PPT 「리뷰티 수정(이벤트)」 — 재료·장비 라인업과 아카이브 섹션을 지워 그 규칙도 걷었다
   같은 날 승인자 「이벤트 시술 Q & A 섹션 삭제」 — Q&A·나드주사 추천대상(#qna) 섹션과 그 규칙(옛 4절·7-B·9절 일부)도 걷었다(백업 _src/build/backup-42-1002-noqna).
   (백업 _src/build/backup-42-1002-ppt).
   색은 기존 --fs-* 토큰만 쓴다 — 예외 하나: 진행 주황 --ev-live #FC6614(10-02 승인자 지정색 · 「진행」 배지와 진행 카드 밑줄, 1절).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 히어로 — 정사각 카드 자동 줄 (2026-10-02 PPT 1 「배경색 밝은색으로 변경 / 옆으로 자동 반응형 추가 · 정사각형으로 수정」)
      옛 «다크 밴드 + 가운데 큰 가로 배너 1.34장 peek + 화살표·도트» → 메인 FS EVENT(main.css 2·11절)와 같은 풀블리드 자동 줄.
      값도 메인과 같다 — 카드 1920 360 · 1440 285 · 1024 220 · 360 200, 간격 12→36, 넘김 1.5s ease, 화살표·도트 없음.
      밴드는 흰색(.fs-section 기본) — 다음 «진행 중인 이벤트» 가 크림이라 흰·크림·흰·크림으로 번갈아 간다.
   -------------------------------------------------------------------------- */
.fs-p-42 .fs-events-hero {
  padding-block: clamp(36px, 30.2px + 1.6vw, 60px) clamp(48px, 38.3px + 2.692vw, 90px);
}
.fs-p-42 .fs-events-hero__head {
  display: grid;
  gap: var(--fs-sp-2);
  justify-items: center;
  text-align: center;
  margin-block-end: clamp(24px, 20.1px + 1.08vw, 40px);
}
.fs-p-42 .fs-events-hero__kicker { color: var(--fs-teal-text); }
.fs-p-42 .fs-events-hero__sub { color: var(--fs-ink-soft); }

.fs-p-42 .fs-events-hero__car { position: relative; }
/* JS 전에는 가운데로 모아 두고 캐러셀이 붙으면 flex-start — 메인 .ev-row 와 같은 이유(fs.js 가 루트에 .fs-carousel 을 붙인다) */
.fs-p-42 .fs-events-hero__track {
  justify-content: center;
  gap: clamp(12px, 6px + 1.563vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fs-p-42 .fs-carousel .fs-events-hero__track { justify-content: flex-start; }
.fs-p-42 .fs-events-hero__slide { flex: 0 0 clamp(200px, 60px + 15.625vw, 360px); max-width: none; padding-inline: 0; }
.fs-p-42 .fs-events-hero__link { display: block; overflow: hidden; }
.fs-p-42 .fs-events-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.fs-p-42 .fs-events-hero__link:hover .fs-events-hero__img,
.fs-p-42 .fs-events-hero__link:focus-visible .fs-events-hero__img { transform: scale(1.06); }
/* 넘김 — 처음엔 메인 main.css 11절(designps)과 같은 1.5s · 5.3초였다. 2026-10-02 승인자 「넘어가는 속도 조금 빠르게」 →
   넘김 1.5 → 1.0s · 주기 5300 → 4300(index.html autoplay) — 머묾은 3.8 → 3.3초. 메인 이벤트 줄은 그대로라 이제 값이 다르다.
   fs.js 는 넘김 끝을 트랙 computed transition-duration 으로 잰다(CSS 만 바꿔도 settle·루프 점프가 맞는다). */
.fs-p-42 .fs-events-hero__car .fs-carousel__track { transition-duration: 1s; transition-timing-function: ease; }
/* 끌어 놓은 뒤(fs.js .is-released ~ 정착)는 0.6s ease-out — 2026-10-02 「끌었다 놓으면 느려지는 거 다 수정」(메인 main.css 14절과 같은 값).
   1.0s ease 는 놓는 순간 손 속도의 1/10 로 떨어진다. 자동 넘김(1.0s)·커서 올리면 잠깐 멈추는 hover-move 는 그대로. */
.fs-p-42 .fs-events-hero__car.is-released .fs-carousel__track { transition-duration: .6s; transition-timing-function: cubic-bezier(.22, .61, .36, 1); }

/* --------------------------------------------------------------------------
   2. 진행 중인 이벤트 — 배너 카드 (10-02 PPT 3 「이벤트이름 / 이벤트기간 추가 · 이런식으로 배치」)
      옛 A18 겹침 패널(사진 오른쪽 아래에 78% 흰 패널 + 플러스 버튼) → 참고 캡처처럼 사진 아래 흰 칸 가운데에 이름·기간. 카드 전체가 링크라 플러스 버튼은 뺐다.
   -------------------------------------------------------------------------- */
.fs-p-42 .fs-events-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--fs-sp-1);
  width: min(320px, 100%);
}
.fs-p-42 .fs-events-search .fs-btn { white-space: nowrap; }

.fs-p-42 .fs-events-cards {
  margin-block-start: var(--fs-gap-title);
  list-style: none;
  padding: 0;
}
/* 줄마다 카드 바닥을 맞춘다 — li(격자 늘림) → article → a 로 높이를 넘긴다. li 안 <a> 카드는 그냥 두면 안 늘어난다. */
.fs-p-42 .fs-events-cards > li { display: grid; }
.fs-p-42 .fs-events-cards > li[hidden] { display: none; }   /* 검색 — 저자 display 가 [hidden] 을 이긴다 */
/* 진행 주황 — 「진행」 배지와 진행 카드 밑줄이 같이 쓴다(색을 바꾸면 여기 한 곳) */
/* 같은 날 승인자 「색상 fc6614 이걸로」 — #C75000(흰 글자 4.59:1) → #FC6614. 흰 「진행」 글자는 2.98:1 로 AA 미달(승인자 지정색, 알렸다 · 검정 #111 이면 6.34:1) */
.fs-p-42 { --ev-live: #FC6614; }
.fs-p-42 .fs-events-card { display: grid; }
/* 2026-10-02 승인자 「오렌지로 이벤트 박스 하이라이트」 → 시안 3종(전체 테두리 · 사진 아래 선 · 카드 밑줄) 중 「c」 = 진행 카드 맨 아래 4px 주황 밑줄.
   카드에 원래 그림자가 없어 inset 그림자로 그린다(본문 배경이 투명이라 보인다). 종료 카드는 없음 */
.fs-p-42 .fs-events-card:not(.fs-events-card--ended) { box-shadow: inset 0 -4px 0 var(--ev-live); }
.fs-p-42 .fs-events-card__link { display: grid; grid-template-rows: auto 1fr; color: inherit; }
.fs-p-42 .fs-events-card__media { position: relative; display: block; overflow: hidden; }
.fs-p-42 .fs-events-card__frame { display: block; }
.fs-p-42 .fs-events-card__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;   /* 10-08 승인자 「이벤트 이미지도 정사각으로 · 키 컬러로 배경」 — 히어로 정사각 11장 + 리프UP 보라 #6F54B1(_src/gen/event-card-sq-1008) */
  object-fit: cover;
}
.fs-p-42 .fs-events-card__state {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  /* 2026-10-02 승인자 「이벤트 진행 박스 색도 조금 튀게 · 주황색 계열로」 — 토프(#97796E · 흰 글자 3.98:1) → 주황 #C75000(흰 글자 4.59:1, AA).
     밝은 주황(#EA580C 3.56 · #F97316 2.80)은 흰 글자 AA 미달. 기존 --fs-orange(-aa) 는 붉은 코랄이라 옆 NEW 빨강과 갈리지 않아 안 씀. 종료 배지는 아래 2절 회색이 이긴다 */
  background: var(--ev-live);
}
/* NEW 배지 — 2026-10-02 승인자 「N 을 NEW 로 변경하고 빨간색으로」 → 같은 날 「new 딱지를 이벤트 이름 옆으로」.
   사진 왼쪽 위 → 제목 끝. 제목 줄(20~27px × 1.25) 안에 들어가게 필을 제목의 반 크기로 줄여 카드끼리 기간 줄 높이가 안 어긋난다.
   마지막 낱말과 붙여(.fs-events-card__name-end) 배지만 다음 줄로 떨어지지 않게. 빨강 = 글자용 --fs-red-aa #CE2B2B(흰 글자 5.24:1, #F24747 은 3.64:1 이라 안 씀) */
.fs-p-42 .fs-events-card__name-end { white-space: nowrap; }
.fs-p-42 .fs-events-card__new {
  min-height: 0;
  margin-inline-start: .4em;
  padding: .32em .6em .28em;
  font-size: clamp(11px, .52em, 14px);
  line-height: 1;
  letter-spacing: .04em;
  vertical-align: .22em;
  background: var(--fs-red-aa);
}
.fs-p-42 .fs-events-card__body {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--fs-sp-2);
  padding: clamp(18px, 16.3px + 0.481vw, 26px) clamp(16px, 13.7px + 0.641vw, 26px) clamp(20px, 17.7px + 0.641vw, 30px);
  text-align: center;
}
.fs-p-42 .fs-events-card__title { text-wrap: balance; transition: color var(--fs-dur) var(--fs-ease); }
.fs-p-42 .fs-events-card__date {
  font-size: var(--fs-t-sm);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
  font-variant-numeric: tabular-nums;
}
.fs-p-42 .fs-events-card__link:hover .fs-events-card__title,
.fs-p-42 .fs-events-card__link:focus-visible .fs-events-card__title { color: var(--fs-teal-dk); }
/* 종료 이벤트 — 2026-10-02 승인자 「완료된 이벤트는 translucent 추가. 종료로 바꿔줘 텍스트도」.
   사진은 흰 카드 위 반투명(.45 → 같은 날 「translucent 조금 더 쎄게」 로 .30 — 흐릿하게 물러나 보인다), 배지는 회색(--fs-pill-gray 흰 글자 5.17:1), 제목은 회색(#6E6E6E 흰 바탕 5.10:1 — AA 유지).
   카드는 그대로 눌린다(지난 이벤트 안내 페이지로). */
.fs-p-42 .fs-events-card--ended .fs-events-card__frame img { opacity: .3; }
.fs-p-42 .fs-events-card--ended .fs-events-card__state { background: var(--fs-pill-gray); }
.fs-p-42 .fs-events-card--ended .fs-events-card__title { color: var(--fs-muted); }
/* 검색 결과 건수 — 검색할 때만 글이 들어온다 */
.fs-p-42 .fs-events-search__status:empty { display: none; }

/* --------------------------------------------------------------------------
   3. 회복 관리 타일 (옛 재료·장비 라인업과 같은 부품 — 라인업 섹션은 10-02 삭제)
   -------------------------------------------------------------------------- */
.fs-p-42 .fs-events-lineup {
  margin-block-start: var(--fs-gap-title);
  list-style: none;
  padding: 0;
}
.fs-p-42 .fs-events-lineup__item { display: grid; align-content: start; gap: var(--fs-sp-3); }
.fs-p-42 .fs-events-lineup__fig { display: grid; margin: 0; }
.fs-p-42 .fs-events-lineup__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--fs-white);
}
.fs-p-42 .fs-events-lineup__desc {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}
.fs-p-42 .fs-events-lineup__from {
  font-size: var(--fs-t-xs);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
}
.fs-p-42 .fs-events-lineup__from a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fs-p-42 .fs-events-lineup__from a:hover { color: var(--fs-teal-dk); }

/* --------------------------------------------------------------------------
   6. 동작 줄이기 — 새로 넣은 전환을 전부 끄고 최종 정적 상태로 고정
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-42 .fs-events-card__title,
  .fs-p-42 .fs-events-hero__img,
  .fs-p-42 .fs-events-lineup__from a { transition: none !important; }
}

/* ==========================================================================
   7. 진단·수정 패스 (2026-08-28)
   렌더를 눈으로 보고 잡은 것만 담는다. 색은 기존 --fs-* 토큰뿐.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7-C. 섹션 제목 뒤 70px 틸 선  (48 에서 검증된 구현)
   ★ «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다 —
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉을 건다.
   -------------------------------------------------------------------------- */
.fs-p-42 .fs-nose-head h2,
.fs-p-42 .fs-sec-head__title { position: relative; }

.fs-p-42 .fs-nose-head h2::after,
.fs-p-42 .fs-sec-head__title::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-42 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-42 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   7-D. 호버 — 프레임 고정 + 사진만 scale(1.045). 그림자는 쓰지 않는다.
   배너 카드는 .fs-events-card__media 가 이미 overflow:hidden 이라 프레임이 선다.
   회복관리 4종은 figure 에 클립을 걸어 준다.
   ★ 라벨바에 z-index 를 안 주면 확대된 사진이 바를 덮는다
     (블록 배경이 인라인 콘텐츠보다 먼저 칠해진다).
   -------------------------------------------------------------------------- */
.fs-p-42 #care .fs-events-lineup__fig { overflow: hidden; }
.fs-p-42 .fs-events-lineup__fig .fs-labelbar { position: relative; z-index: 1; }

.fs-p-42 .fs-events-card__frame img,
.fs-p-42 #care .fs-events-lineup__img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-42 .fs-events-cards > li:hover .fs-events-card__frame img,
  .fs-p-42 #care .fs-events-lineup__item:hover .fs-events-lineup__img {
    transform: scale(1.045);
  }
  /* 바는 사진과 함께 커지면 안 된다 — 글자가 흔들린다. 색만 한 단계 */
  .fs-p-42 #care .fs-events-lineup__item:hover .fs-labelbar {
    background: var(--fs-ink);
    transition: background-color var(--fs-dur) var(--fs-ease);
  }
}

/* --------------------------------------------------------------------------
   7-E. 동작 줄이기 — 7-C·7-D 로 늘어난 전환을 최종 정지 상태로 고정
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-42 .fs-nose-head h2::after,
  .fs-p-42 .fs-sec-head__title::after { transform: scaleX(1) !important; transition: none !important; }

  .fs-p-42 .fs-events-card__frame img,
  .fs-p-42 #care .fs-events-lineup__img { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   8. 회복 관리 — 2026-10-02 PPT 5
      · 제목 「크기를 조금만 더 키워주세요」 — 섹션 제목 28→40 을 이 섹션만 32→46(+15%).
      · 사진 「원본사진 같이 첨부해놓겠습니다 흰 여백없이」 — 옛 에셋(640×415)은 원본 안내판에서 떠낸 것이라
        흰 테두리·둥근 모서리가 구워져 있었고, 그걸 4:3 상자에 contain 으로 넣어 위아래 흰 띠가 더 붙었다.
        승인자 원본에서 4:3(960×720)으로 다시 잘라 상자를 꽉 채운다. 오메가라이트만 어두워(밝기 90) 감마 0.75 로 노출을 올렸다.
      · 밴드: 재료·아카이브가 빠져 크림(진행)·크림2(회복)가 맞붙어 → 회복은 흰, Q&A 는 크림(index.html).
   -------------------------------------------------------------------------- */
.fs-p-42 #care-title { font-size: clamp(32px, 28.78px + 0.897vw, 46px); }
.fs-p-42 #care .fs-events-lineup__img { object-fit: cover; background: none; }
/* 2026-10-02 승인자 스크린샷 「중앙 정렬」 — 설명을 라벨바처럼 가운데로(전 폭). 9절 balance 로 두 줄 길이가 고르다. */
.fs-p-42 #care .fs-events-lineup__desc { text-align: center; }

/* --------------------------------------------------------------------------
   9. 줄바꿈 — 2026-10-02 승인자 「문장 줄 바꿈 자연스럽게. 외톨이줄 없이」(회복 관리 설명 스크린샷: 「개선」「완화에 도움」 외톨이)
      MOBILE_RULES §1-1 예외(승인자가 짚은 PC 외톨이) + §1-5·1-6 — balance 는 전 폭, 구가 갈리는 곳은 index.html 에서 &nbsp; ·
      괄호처럼 크롬이 «·» 앞에서도 끊어(「재생 / ·상처」) 회복 관리 설명의 가운뎃점 앞에 WJ(&#8288;). 문구는 0자 변경.
      같은 페이지의 Q&A 답·리드·주의문·추천대상·카드 제목·주소 외톨이도 함께(실측 320~2200 22폭, 고아 판정 §4-1).
      · 회복 관리 제목: .fs-mark 가 inline-block 이라 「지향 / 합니다」 로 갈렸다(540·600) — 「빠른 회복을 지향합니다」 를 한 덩어리로.
        480 미만은 풀어 둔다 — 360~430 은 묶지 않아도 「포시즌성형외과는 / 빠른 회복을 지향합니다」 로 갈리고, 묶으면 웹폰트 없는 렌더(qa)에서 360 이 넘친다.
        320(280px 칸)은 어느 쪽이든 「합니다」 가 혼자 내려간다.
      · 1024 에서만 고압산소 설명이 2 → 3줄(「…상처 / 회복…」 을 안 가르면 227px 칸에 두 줄로 안 들어간다).
   -------------------------------------------------------------------------- */
.fs-p-42 #care .fs-events-lineup__desc { text-wrap: balance; }
@media (min-width: 480px) {
  .fs-p-42 .fs-events-keep { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   10. 이벤트 상세 — 42-<idx>/index.html 12장 (2026-10-22 승인자 「이벤트를 누르면 원본 사이트로 가지 말고 리뷰티 안의 이벤트 설명 페이지로」)
       원본 글 본문(라이브 4seasonsps.com/42 bmode=view)은 배너 1장 + 긴 안내판 1~2장뿐이고 글자는 전부 그림에 구워져 있다.
       머리(상태·제목·기간)만 글로 쓰고 본문은 원본 그림을 그대로 세로로 잇는다 — 1280 폭 재압축 assets/events/detail/<idx>-<n>.jpg.
       생성기 _src/build/ev-1022-detail.py(셸은 42 에서 복사) — 이 파일과 ?v= 를 42 + 상세 12장이 공유한다.
       그림 폭 860 = 원본 게시판 본문 폭 근처(안내판 글자가 읽히는 크기). 600 미만은 거터를 걷어 화면 폭 그대로(그림 속 글자가 작아지지 않게).
   -------------------------------------------------------------------------- */
.fs-p-42 .fs-evd-head {
  padding-block: clamp(36px, 30.2px + 1.6vw, 60px) clamp(24px, 20.1px + 1.08vw, 40px);
}
.fs-p-42 .fs-evd-head__inner {
  display: grid;
  gap: var(--fs-sp-3);
  justify-items: center;
  text-align: center;
}
.fs-p-42 .fs-evd-title { text-wrap: balance; }
.fs-p-42 .fs-evd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fs-sp-2) var(--fs-sp-4);
  margin-block-start: var(--fs-sp-2);
  font-size: var(--fs-t-sm);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
  font-variant-numeric: tabular-nums;
}
/* 목록 카드 배지와 같은 색 — 진행 주황(1절 --ev-live) · 종료 회색 */
.fs-p-42 .fs-evd-state { background: var(--ev-live); }
.fs-p-42 .fs-evd-state--ended { background: var(--fs-pill-gray); }

.fs-p-42 .fs-evd-body { padding-block: 0 clamp(60px, 48.5px + 3.2vw, 110px); }
.fs-p-42 .fs-evd-doc { max-width: 860px; margin-inline: auto; }
.fs-p-42 .fs-evd-doc img { display: block; width: 100%; height: auto; }
@media (max-width: 599px) {
  .fs-p-42 .fs-evd-doc { margin-inline: calc(var(--fs-gutter) * -1); }
}

/* 이전 · 목록 · 다음 — 순서는 목록 카드 순서(진행 → 종료) */
.fs-p-42 .fs-evd-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--fs-sp-5);
  max-width: 860px;
  margin: clamp(40px, 33.1px + 1.92vw, 70px) auto 0;
  padding-block: var(--fs-sp-6);
  border-block: 1px solid var(--fs-line);
}
.fs-p-42 .fs-evd-nav__link { display: grid; gap: var(--fs-sp-1); min-width: 0; color: inherit; }
.fs-p-42 .fs-evd-nav__link--next { justify-items: end; text-align: end; }
.fs-p-42 .fs-evd-nav__dir { font-size: var(--fs-t-sm); color: var(--fs-ink-soft); }
.fs-p-42 .fs-evd-nav__name { font-weight: 600; text-wrap: balance; transition: color var(--fs-dur) var(--fs-ease); }
.fs-p-42 .fs-evd-nav__link:hover .fs-evd-nav__name,
.fs-p-42 .fs-evd-nav__link:focus-visible .fs-evd-nav__name { color: var(--fs-teal-dk); }
@media (max-width: 599px) {
  .fs-p-42 .fs-evd-nav { grid-template-columns: 1fr 1fr; }
  .fs-p-42 .fs-evd-nav__list { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「이벤트도 최적화」 — 상세 12장을 만든 직후) — 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-42-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 진행 중인 이벤트 카드 12장: fs.css .fs-grid--3 이 600 미만 1열이라 360 에서 장당 ≈440px(섹션 5,311px), 540 에서는 495px 정사각이 12번(섹션 ≈7,900px).
     → 2열(MOBILE_RULES §2 A — 100 리얼후기 후기 카드와 같은 «컨택트시트»). 155px 칸에 맞게 제목·기간·배지를 한 단 작게.
     600~1023 은 원래 2열이라 그대로.
   · 회복 관리 4칸은 세로 유지 — 설명 두 줄이 원본 안내판과 같은 줄(10-02 승인자 「외톨이줄 없이」 9절)이라 좁은 칸으로 옮기면 4~5줄로 깨진다.
   · 상세(42-<idx>)는 10절 그대로 — 600 미만 그림 화면 폭 · 이전/다음 두 칸 + 목록 아래. 「수면마취&피부시술」 은 & 뒤 WJ(카드와 같다, 생성기 EV). */
@media (max-width: 599px) {
  .fs-p-42 .fs-events-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--fs-sp-4);
    row-gap: var(--fs-sp-4);
  }
  .fs-p-42 .fs-events-card__body {
    gap: var(--fs-sp-1);
    padding: var(--fs-sp-4) var(--fs-sp-2) var(--fs-sp-5);
  }
  .fs-p-42 .fs-events-card__title {
    font-size: var(--fs-t-sm);
    word-break: keep-all;
  }
  .fs-p-42 .fs-events-card__date {
    font-size: var(--fs-t-xs);
    text-wrap: balance;
  }
  .fs-p-42 .fs-events-card__state {
    min-height: 24px;
    padding-inline: var(--fs-sp-3);
    font-size: var(--fs-t-xs);
  }
}