/* ==========================================================================
   100 수술후기(게시판) — 페이지 전용 CSS
   · 색은 전부 --fs-* 토큰. 새 hex 0개.
   · 모든 셀렉터를 .fs-p-100 스코프 안에 둔다.
   · 레이아웃은 운영 사이트의 게시판과 같은 한 판이다 — 탭 → 4열 카드 그리드 → 페이저.
     같은 12건을 표와 갤러리로 두 번 보여 주던 구성(2026-08-28 판)은 걷어냈다.
   · 시그니처: 탭의 필(.fs-pill)과 카드의 분류 이름표가 같은 틸이라
     「고른 카테고리」와 「카드의 카테고리」가 한 색으로 이어진다.
   전용 컴포넌트 5종
     .fs-review-board-hero   크림2 가운데 히어로 (98 전후사진과 같은 꼴, 10-12)
     .fs-review-board-tabs   카테고리 필 바 (라디오 9개로 목록을 거른다)
     .fs-review-board-card   카드 (정사각 썸네일 + 라벨바 + 제목)
     .fs-review-board-pager  페이지네이션
     .fs-review-board-caution 의료광고 주의 한 줄 (10-12 다크 밴드를 접었다)
   ========================================================================== */


/* ==========================================================================
   §1 · 히어로 (.fs-review-board-hero) + 검색 · 글쓰기 줄
   2026-10-12 승인자 「100 · 98 히어로 형식 맞춰줘」 — 98 전후사진 §1 과 같은 값.
   (전에는 흰 바탕 왼쪽 정렬 «기능 바» 에 검색 · 글쓰기가 붙어 있었다.)
   검색 · 글쓰기는 게시판 분류 탭 줄 오른쪽(.fs-review-board-tools)으로 옮겼다.
   ========================================================================== */
.fs-p-100 .fs-review-board-hero {
  background: var(--fs-cream-2);
  color: var(--fs-ink);
  perspective: none;
}
.fs-p-100 .fs-review-board-hero .fs-hero__copy {
  gap: clamp(10px, 8.4px + 0.449vw, 18px);
}
.fs-p-100 .fs-review-board-hero__en {
  font-family: var(--fs-font-en);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fs-teal-dk);
}
.fs-p-100 .fs-review-board-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-100 .fs-review-board-hero__rule {
  width: clamp(48px, 41.2px + 1.897vw, 76px);
  height: 2px;
  background: var(--fs-teal);
}
.fs-p-100 .fs-review-board-hero__sub { color: var(--fs-muted); }

.fs-p-100 .fs-review-board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-sp-5) var(--fs-gap-col);
}
.fs-p-100 .fs-review-board-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-sp-4);
}
.fs-p-100 .fs-review-board-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--fs-sp-4);
  align-items: center;
}
@media (min-width: 600px) {
  .fs-p-100 .fs-review-board-search__input { min-inline-size: 220px; }
}
@media (max-width: 599px) {
  .fs-p-100 .fs-review-board-tools { inline-size: 100%; }
  .fs-p-100 .fs-review-board-search { flex: 1 1 auto; }
}


/* ==========================================================================
   §2 · 카테고리 필 바 + 분류 필터 (.fs-review-board-tabs)
   원본 게시판의 9개 탭. 고른 분류만 남기고 나머지 카드를 접는다.
   ★ 배선은 <main> 직계 라디오 9개 + 형제 결합자(~) — JS 0줄, 55·132 와 같은 처방.
     라디오가 #board «밖»(형)에 있어야 ~ 가 닿는다. 안으로 옮기면 조용히 죽는다.
   ========================================================================== */
.fs-p-100 .fs-review-board-cat {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.fs-p-100 .fs-review-board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-sp-3);
}
.fs-p-100 .fs-review-board-tabs__pill {
  cursor: pointer;
  transition: background-color var(--fs-dur) var(--fs-ease),
              color var(--fs-dur) var(--fs-ease);
}
.fs-p-100 .fs-review-board-tabs__note {
  margin-block-start: var(--fs-sp-6);
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
}
.fs-p-100 .fs-review-board-count {
  margin-block: var(--fs-sp-9) var(--fs-sp-7);
  font-size: var(--fs-t-sub);
  font-weight: 700;
  letter-spacing: var(--fs-ls-tight);
  color: var(--fs-ink);
}
/* <b>·<strong> 의 기본값 bolder 는 700 부모 안에서 900 으로 풀린다 — LOCK 7 상한 위반.
   두 곳 다 굵기를 명시해 막는다(vibecheck L7 이 computed 로 잡아낸다). */
.fs-p-100 .fs-review-board-count b { color: var(--fs-teal-dk); font-weight: inherit; }
.fs-p-100 .fs-review-board-tabs__note strong { font-weight: 700; }
.fs-p-100 .fs-review-board-count > span { display: none; }
.fs-p-100 .fs-review-board-empty {
  display: none;
  padding: var(--fs-sp-10) var(--fs-sp-6);
  border: 1px solid var(--fs-line-control);
  text-align: center;
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
}

.fs-p-100 .fs-review-board-scope > span { display: none; }

/* --- 배선 ⑦ 제목의 틸 낱말도 고른 분류를 따라간다 ----------------------- */
.fs-p-100 #cat-all:checked ~ #board .fs-review-board-scope > .is-all,
.fs-p-100 #cat-eye:checked ~ #board .fs-review-board-scope > .is-eye,
.fs-p-100 #cat-nose:checked ~ #board .fs-review-board-scope > .is-nose,
.fs-p-100 #cat-lift:checked ~ #board .fs-review-board-scope > .is-lift,
.fs-p-100 #cat-gyne:checked ~ #board .fs-review-board-scope > .is-gyne,
.fs-p-100 #cat-petit:checked ~ #board .fs-review-board-scope > .is-petit,
.fs-p-100 #cat-skin:checked ~ #board .fs-review-board-scope > .is-skin,
.fs-p-100 #cat-etc:checked ~ #board .fs-review-board-scope > .is-etc { display: inline; }

/* --- 배선 ① 고른 분류만 남긴다 (「전체」는 규칙이 없어 12장 그대로) -------- */
.fs-p-100 #cat-eye:checked ~ #board .fs-review-board-card:not(.is-eye),
.fs-p-100 #cat-nose:checked ~ #board .fs-review-board-card:not(.is-nose),
.fs-p-100 #cat-lift:checked ~ #board .fs-review-board-card:not(.is-lift),
.fs-p-100 #cat-gyne:checked ~ #board .fs-review-board-card:not(.is-gyne),
.fs-p-100 #cat-petit:checked ~ #board .fs-review-board-card:not(.is-petit),
.fs-p-100 #cat-skin:checked ~ #board .fs-review-board-card:not(.is-skin),
.fs-p-100 #cat-etc:checked ~ #board .fs-review-board-card:not(.is-etc) { display: none; }

/* --- 배선 ② 빈 안내 (JS 가 없을 때의 폴백) --------------------------------
   2026-09-01: 목록을 12건 → 131건 전량으로 늘리면서 실제로 0건인 분류는
   «안면윤곽·피부» 둘만 남았다(리프팅 3 · 가슴성형 1 · 기타 2 는 글이 생겼다).
   2026-10-12: 탭이 가슴성형·안면윤곽 → 여유증으로 바뀌었다(PPT 슬 2). 여유증도 0건이다.
   JS 가 켜져 있으면 아래 규칙 대신 [hidden] 로 정확히 제어한다. */
.fs-p-100 #cat-gyne:checked ~ #board .fs-review-board-empty,
.fs-p-100 #cat-skin:checked ~ #board .fs-review-board-empty { display: block; }
.fs-p-100 .fs-review-board-empty[hidden] { display: none; }

/* --- 배선 ③ 페이저 -------------------------------------------------------
   2026-09-01 이전에는 페이저가 「전체」일 때만 보였다. 목록이 12건뿐이라
   걸러진 목록에 1~9 를 그리는 게 거짓말이었기 때문이다.
   이제 JS 가 «고른 분류 + 검색어» 기준으로 페이저를 다시 그리므로 숨기지 않는다.
   JS 가 없으면 페이저 자리는 비어 있고(리스트가 통째로 보인다) 아무 것도 깨지지 않는다. */
.fs-p-100 .fs-review-board-pagernav:empty,
.fs-p-100 .fs-review-board-pagernav[hidden] { display: none; }

/* --- 배선 ④ 건수 표시 --------------------------------------------------- */
.fs-p-100 #cat-all:checked ~ #board .fs-review-board-count > .is-all,
.fs-p-100 #cat-eye:checked ~ #board .fs-review-board-count > .is-eye,
.fs-p-100 #cat-nose:checked ~ #board .fs-review-board-count > .is-nose,
.fs-p-100 #cat-lift:checked ~ #board .fs-review-board-count > .is-lift,
.fs-p-100 #cat-gyne:checked ~ #board .fs-review-board-count > .is-gyne,
.fs-p-100 #cat-petit:checked ~ #board .fs-review-board-count > .is-petit,
.fs-p-100 #cat-skin:checked ~ #board .fs-review-board-count > .is-skin,
.fs-p-100 #cat-etc:checked ~ #board .fs-review-board-count > .is-etc { display: inline; }

/* --- 배선 ⑤ 활성 필 ----------------------------------------------------- */
.fs-p-100 #cat-all:checked ~ #board .fs-review-board-tabs__pill[for="cat-all"],
.fs-p-100 #cat-eye:checked ~ #board .fs-review-board-tabs__pill[for="cat-eye"],
.fs-p-100 #cat-nose:checked ~ #board .fs-review-board-tabs__pill[for="cat-nose"],
.fs-p-100 #cat-lift:checked ~ #board .fs-review-board-tabs__pill[for="cat-lift"],
.fs-p-100 #cat-gyne:checked ~ #board .fs-review-board-tabs__pill[for="cat-gyne"],
.fs-p-100 #cat-petit:checked ~ #board .fs-review-board-tabs__pill[for="cat-petit"],
.fs-p-100 #cat-skin:checked ~ #board .fs-review-board-tabs__pill[for="cat-skin"],
.fs-p-100 #cat-etc:checked ~ #board .fs-review-board-tabs__pill[for="cat-etc"] {
  background: var(--fs-teal-text);
  color: var(--fs-white);
}

/* --- 배선 ⑥ 화면 밖 라디오라 포커스 링이 안 보인다 — 짝 라벨에 그린다 ---- */
.fs-p-100 #cat-all:focus-visible ~ #board .fs-review-board-tabs__pill[for="cat-all"],
.fs-p-100 #cat-eye:focus-visible ~ #board .fs-review-board-tabs__pill[for="cat-eye"],
.fs-p-100 #cat-nose:focus-visible ~ #board .fs-review-board-tabs__pill[for="cat-nose"],
.fs-p-100 #cat-lift:focus-visible ~ #board .fs-review-board-tabs__pill[for="cat-lift"],
.fs-p-100 #cat-gyne:focus-visible ~ #board .fs-review-board-tabs__pill[for="cat-gyne"],
.fs-p-100 #cat-petit:focus-visible ~ #board .fs-review-board-tabs__pill[for="cat-petit"],
.fs-p-100 #cat-skin:focus-visible ~ #board .fs-review-board-tabs__pill[for="cat-skin"],
.fs-p-100 #cat-etc:focus-visible ~ #board .fs-review-board-tabs__pill[for="cat-etc"] {
  outline: 2px solid var(--fs-teal-dk);
  outline-offset: 2px;
}

/* 비활성 필 호버 — 활성 필(위 ⑤, id 를 가져 더 강하다)에는 안 걸린다 */
@media (hover: hover) and (pointer: fine) {
  .fs-p-100 .fs-review-board-tabs__pill:hover { background: var(--fs-teal-dk); }
}


/* ==========================================================================
   §3 · 의료광고 주의 한 줄 (.fs-review-board-caution)
   2026-10-12 병원 PPT 슬 3 — 다크 밴드는 지우고 「※ 수술 후 효과는…」 한 줄만
   페이저 아래 «연한 글씨로 조그맣게». --fs-muted 는 흰 위 5.1:1(AA).
   ========================================================================== */
.fs-p-100 .fs-review-board-caution {
  margin-block-start: var(--fs-sp-7);
  font-size: var(--fs-t-xs);
  line-height: var(--fs-lh-body);
  text-align: center;
  color: var(--fs-muted);
}


/* ==========================================================================
   §5 · 갤러리 카드 (.fs-review-board-card)
   표와 같은 12건을 사진 중심으로 다시 조판한다. 카테고리는 사진 왼쪽 위 이름표
   (10-12 PPT 슬 2 — 사진 아래 라벨바를 지우고 «사진 왼쪽에»).
   ========================================================================== */
.fs-p-100 .fs-review-board-card { display: block; }
/* ★ 저자 규칙의 display 가 [hidden] 의 UA display:none 을 이긴다.
   이 한 줄이 없으면 JS 가 hidden 을 걸어도 카드가 그대로 자리를 차지해
   페이지 나누기가 «안 먹는 것처럼» 보인다(문서 높이 17,296px 로 실측). */
.fs-p-100 .fs-review-board-card[hidden] { display: none; }
.fs-p-100 .fs-review-board-card__link { display: block; color: inherit; }
.fs-p-100 .fs-review-board-card__fig {
  position: relative;
  margin: 0;
  display: block;
  overflow: hidden;
  background: var(--fs-cream);
}
.fs-p-100 .fs-review-board-card__title {
  margin-block-start: var(--fs-sp-5);
  min-block-size: 3em;
  font-size: var(--fs-t-body);
  font-weight: 600;
  line-height: var(--fs-lh-body);
  color: var(--fs-ink);
}
.fs-p-100 .fs-review-board-card__link:hover .fs-review-board-card__title,
.fs-p-100 .fs-review-board-card__link:focus-visible .fs-review-board-card__title {
  color: var(--fs-teal-dk);
}


/* ==========================================================================
   §6 · 페이지네이션 (.fs-review-board-pager)
   직각 40px 정사각. 현재 페이지만 틸 채움.
   ========================================================================== */
.fs-p-100 .fs-review-board-pager {
  list-style: none;
  margin: clamp(30px, 25.4px + 1.282vw, 50px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fs-sp-1);
}
.fs-p-100 .fs-review-board-pager__link {
  display: grid;
  place-items: center;
  min-inline-size: 40px;
  min-block-size: 40px;
  padding-inline: var(--fs-sp-2);
  border: 1px solid var(--fs-line-input);
  border-radius: var(--fs-radius-0);
  font-size: var(--fs-t-sm);
  font-weight: 600;
  color: var(--fs-ink);
  transition: background-color var(--fs-dur) var(--fs-ease),
              border-color var(--fs-dur) var(--fs-ease),
              color var(--fs-dur) var(--fs-ease);
}
.fs-p-100 a.fs-review-board-pager__link:hover,
.fs-p-100 a.fs-review-board-pager__link:focus-visible {
  background: var(--fs-teal-dk);
  border-color: var(--fs-teal-dk);
  color: var(--fs-white);
}
.fs-p-100 .fs-review-board-pager__link--current {
  background: var(--fs-teal-text);
  border-color: var(--fs-teal-text);
  color: var(--fs-white);
}
.fs-p-100 .fs-review-board-pager__link--off { color: var(--fs-muted-2); }
.fs-p-100 .fs-review-board-pager__arrow {
  display: block;
  inline-size: 9px; block-size: 9px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
}
.fs-p-100 .fs-review-board-pager__arrow--prev { transform: rotate(45deg) translate(1px, -1px); }
.fs-p-100 .fs-review-board-pager__arrow--next { transform: rotate(-135deg) translate(1px, -1px); }


/* ==========================================================================
   §7 · reduced-motion — 이 파일이 새로 넣은 전환을 전부 끈다.
   (레이아웃에 관여하는 transform 은 없으므로 최종 상태가 기본 상태와 같다)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fs-p-100 .fs-review-board-pager__link,
  .fs-p-100 .fs-review-board-tabs__pill { transition: none !important; }
}



/* ==========================================================================
   §8 · 진단·수정 패스 (2026-08-28)
   아래 블록은 렌더를 눈으로 보고 잡은 결함과, 48 에서 검증된 마이크로
   인터랙션 2종이다. 새 색 0개 — 전부 기존 --fs-* 토큰.
   ========================================================================== */

/* --- 8-3 · [마이크로] 섹션 제목 뒤 70px 틸 선 (delay .5s) — 48 검증분 ------
   ★ 48 함정 — 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 붙이지 않는다.
     → 기본을 «그어진 상태» 로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
   다크 밴드 대제목(#notice-title)에는 걸지 않는다 — .fs-mark 틸 하이라이트가
   이미 강조다(122 선례). .fs-display 라 아래 선택자에 애초에 안 걸린다. */
.fs-p-100 .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;
}
/* 가운데정렬 헤드(A24)에서는 선도 가운데에서 자란다 */
.fs-p-100 .fs-sec-head--center .fs-sec-head__title::after {
  margin-inline: auto;
  transform-origin: center;
}
/* 초기 은닉 — 은닉 쪽 트랜지션은 끊는다(1→0 역재생 방지, 53 에서 확인).
   대상 제목에 ID 선택자 규칙이 없어 (0,5,2) 가 위 (0,2,2) 를 확실히 이긴다. */
:root.fs-js .fs-p-100 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-100 .fs-reveal:not(.is-in) h2::after {
  transform: scaleX(0);
  transition: none;
}

/* --- 8-5 · reduced-motion — 제목 선을 «그어진 상태» 로 고정 --- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-100 .fs-sec-head__title::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}


/* ==========================================================================
   §9 · 병원 PPT 「리뷰티 수정(커뮤니티)」 (2026-10-12) — PLAN-community-1012-pptx.md
   ========================================================================== */

/* --- 9-0 · 킥커가 길어졌다(REVIEW BOARD → FOUR SEASONS REAL REVIEW, 슬 1) ------
   360 에서 「REVIEW」 한 낱말만 둘째 줄로 떨어진다 — 두 줄을 고르게. */
.fs-p-100 .fs-review-board-hero .fs-hero__kicker { text-wrap: balance; }

/* --- 9-1 · 히어로 버튼 둘 (슬 4 — 「후기 · 상담 바로가기」를 위로) ----------
   같은 날 3차: 히어로가 가운데 정렬이 되면서 98 과 같은 값으로 맞췄다. */
.fs-p-100 .fs-review-board-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fs-sp-3);
  margin-block-start: clamp(4px, 1.7px + 0.641vw, 14px);
}
.fs-p-100 .fs-review-board-hero__cta .fs-btn {
  min-inline-size: 150px;
  justify-content: center;
}
/* 카카오 = 43 상담 밴드의 .fs-btnbar__btn--kakao 와 같은 #FEE500 · #191919 (13.6:1) */
.fs-p-100 .fs-review-board-hero__kakao {
  gap: var(--fs-sp-2);
  border-color: #FEE500;
  background: #FEE500;
  color: #191919;
}
.fs-p-100 .fs-review-board-hero__kakao img { inline-size: 18px; block-size: auto; }
@media (max-width: 599px) {
  .fs-p-100 .fs-review-board-hero__cta { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; }
  .fs-p-100 .fs-review-board-hero__cta .fs-btn { min-inline-size: 0; }
}

/* --- 9-2 · 탭 아래 여백 (슬 2 「여백 넣어주세요」 — 전엔 탭과 사진이 붙어 있었다) ---
   같은 날 3차: 탭 줄 오른쪽에 검색 · 글쓰기가 붙으면서 여백은 줄 래퍼(.fs-review-board-bar)가 진다. */
.fs-p-100 .fs-review-board-bar { margin-block-end: var(--fs-sp-10); }
@media (max-width: 599px) {
  .fs-p-100 .fs-review-board-bar { margin-block-end: var(--fs-sp-7); }
}

/* --- 9-3 · 사진 왼쪽 위 분류 이름표 (슬 2) ---------------------------------
   figure(틸트 inner) 안이라 사진과 같이 기운다. 호버 확대가 덮지 않게 위 층에 둔다.
   색(10-12 같은 날 승인자 캡처 「조금 더 잘 보이는 색으로」): 처음 --fs-teal-text(토프)는
   피부·베이지 사진에 묻혔다 — 131장 이름표 자리 배경과 3:1 미만이 102장. 바탕을 98 「After」
   띠와 같은 진갈색 #3D302B(흰 글자 12.7:1)로, 머리카락처럼 어두운 자리에서는 흰 테두리가
   떼어 준다(바탕이 3:1 못 되는 어두운 배경 L<.19 와 흰 테두리가 3:1 못 되는 밝은 배경
   L>.30 이 겹치지 않는다 — 어느 사진이든 둘 중 하나는 3:1 이상).
   크기(같은 날 승인자 캡처 「조금 더 눈에 잘 띄게」): 13px(--fs-t-xs) · 높이 28px 는 카드 폭
   328px 에 비해 작았다 → 글자 --fs-t-sm(15→16px) · 여백 키움 · 가장자리에서 조금 더 안쪽 ·
   그림자 한 겹(사진에서 떠 보이게). 높이 약 36px. */
.fs-p-100 .fs-review-board-card__tag {
  position: absolute;
  inset-block-start: var(--fs-sp-4);
  inset-inline-start: var(--fs-sp-4);
  z-index: 2;
  padding: var(--fs-sp-1) var(--fs-sp-4);
  background: #3D302B;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85), 0 2px 8px rgba(0, 0, 0, .28);
  color: var(--fs-white);
  font-size: var(--fs-t-sm);
  font-weight: 700;
  line-height: 1.75;
}

/* ==========================================================================
   §10 · ▼▼▼ 2026-10-12 · 모바일 최적화(승인자 「오늘 수정한 페이지들 다 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측). 실측 _design/momeasure.py 360/390/540.
   백업 _src/build/backup-100-1012-mo/ (재현은 이 apply.py --from-backup).
   고아 줄(360/390, 전): 히어로 설명 「… 직접 남긴 / 리얼후기 게시판입니다.」 · 카드 제목 3 · 주의 한 줄
   「… 부작용이 / 발생할 수 있습니다.」 · 주소 「… 본관 / 8층」 → 전부 balance.
   배치: 후기 카드 12장이 <600 에서 1열(장당 ≈400px, 360 본문 6,846px)이었다 → 2열(98 전후사진과 같은
   «컨택트시트» 판단). 이름표 · 제목은 155px 칸에 맞게 한 단 작게. 검색 · 글쓰기는 한 줄(43 과 같은 꼴).
   ========================================================================== */
.fs-p-100 .fs-review-board-hero__sub,
.fs-p-100 .fs-review-board-card__title,
.fs-p-100 .fs-review-board-caution,
.fs-p-100 .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-100 .fs-review-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--fs-sp-4);
    row-gap: var(--fs-sp-7);
  }
  .fs-p-100 .fs-review-board-card__title {
    margin-block-start: var(--fs-sp-3);
    min-block-size: 0;
    font-size: var(--fs-t-sm);
    word-break: keep-all;
  }
  .fs-p-100 .fs-review-board-card__tag {
    inset-block-start: var(--fs-sp-2);
    inset-inline-start: var(--fs-sp-2);
    padding: 2px var(--fs-sp-3);
    font-size: var(--fs-t-xs);
    line-height: 1.6;
  }
  .fs-p-100 .fs-review-board-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .fs-p-100 .fs-review-board-search__input { min-inline-size: 0; }
}