/* ==========================================================================
   43 · 온라인상담 (consult-online) — 페이지 전용 컴포넌트
   전 셀렉터 .fs-p-43 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).

   1) .fs-cs-hero    사진 히어로 (10-12 1층 데스크 · 틸 띠는 뺐다)
   2) .fs-cs-tool    검색 · 글쓰기 툴바 (10-12 「문의 목록」 머리로 옮겼다)
   3) (분류 알약 필터 — 10-12 병원 요청으로 뺐다)
   4) .fs-cs-board   문의 목록 표
   5) .fs-cs-page    페이지네이션
   6) (게시판 이용 안내 카드 — 10-12 병원 요청으로 뺐다)
   7) .fs-cs-write   글쓰기 2단 (좌 사진 / 우 폼)
   8) .fs-cs-cta     다크 상담 채널 밴드
   ========================================================================== */

/* --- 1) 사진 히어로 ------------------------------------------------------- */
/* 2026-10-12 병원 PPT 슬 6 — 「ONLINE CONSULT」 띠 · 자물쇠 안내 삭제, 배경 = 동봉
   1.jpg(1층 데스크, 1912x1276 → hero-reception.jpg). 밝은 대리석이라 예전 베일
   (.72→.88)을 그대로 쓰면 회색으로 죽는다 — 단색 .45 로 낮추고 세로 55% 로 잘라
   제목이 네온 간판 아래 검은 유리 위에 앉게 했다(시안 _review/community-1012-43.jpg).
   아래 09-01 메모 중 띠·band-ghost 이야기는 옛 판 기록이다. */
/* 2026-09-01 승인자 지시 — 「헤더의 적절한 이미지 하나를 배경으로」.
   흰 여백이던 히어로 본문에 상담 라운지의 대리석·골드 파티션 배너를 깔았다.
   · band-ghost.jpg 는 1440x570 이라 이 밴드 비율에 맞고 구워진 글자가 없다.
     이 페이지 #write 가 이미 라운지 사진을 쓰고 있어 같은 장면을 또 쓰지 않았다.
   · 4층 — 사진 0 / 스크림 1 / 틸 라벨바·카피 2. 라벨바는 자기 배경이 불투명해
     사진 위에 그대로 얹힌다.
   · 글자는 흰 계열로 뒤집는다. --fs-muted(#6E6E6E)·--fs-teal-dk(#00646B)는
     밝은 배경 전용이라 #111 위에서 각각 3.70:1 · 2.73:1 로 AA 미달이다. */
.fs-p-43 .fs-cs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: stretch;
  grid-template-rows: minmax(0, 1fr);   /* 띠 행이 빠졌다 — auto 를 남기면 제목이 맨 위로 붙는다 */
  background: var(--fs-ink-band);
  color: var(--fs-on-dark);
}
.fs-p-43 .fs-cs-hero__bg { position: absolute; inset: 0; z-index: 0; }
.fs-p-43 .fs-cs-hero__bg img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
}
.fs-p-43 .fs-cs-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(17, 17, 17, .45);
}
.fs-p-43 .fs-cs-hero .fs-hero__inner { position: relative; z-index: 2; }
.fs-p-43 .fs-cs-hero .fs-hero__inner {
  align-self: center;
  padding-block: var(--fs-sp-9) var(--fs-sp-8);
}
.fs-p-43 .fs-cs-hero .fs-hero__copy { gap: var(--fs-sp-4); }
.fs-p-43 .fs-cs-hero .fs-hero__title { color: var(--fs-on-dark); }
.fs-p-43 .fs-cs-hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fs-sp-2) var(--fs-sp-9);
  margin-block-start: var(--fs-sp-3);
  list-style: none;
  font-size: var(--fs-t-sm); color: var(--fs-white);
}
.fs-p-43 .fs-cs-hero__meta li { display: block; }
.fs-p-43 .fs-cs-hero__meta strong { color: var(--fs-teal); font-weight: 700; }

/* --- 2) 검색 · 글쓰기 툴바 ------------------------------------------------- */
.fs-p-43 .fs-cs-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-sp-3);
}
.fs-p-43 .fs-cs-tool { display: flex; align-items: center; gap: var(--fs-sp-2); }
.fs-p-43 .fs-cs-tool__input { min-width: 0; width: clamp(150px, 40vw, 240px); }
.fs-p-43 .fs-cs-tool__btn { flex: 0 0 auto; }
/* 10-12 — 분류 밴드(#cats)를 접으면서 「문의 목록」 제목 오른쪽으로 옮겼다 */
.fs-p-43 .fs-cs-listhead { row-gap: var(--fs-sp-5); }
@media (min-width: 768px) {
  .fs-p-43 .fs-cs-listhead {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--fs-gap-col);
  }
}

/* --- 3) (분류 알약 필터는 2026-10-12 병원 요청 「분류없이 전체로」로 뺐다) ---- */
/* ★ JS 페이지 나누기용. tr 에 저자 display 규칙이 생기면 [hidden] 이 지므로 못 박아 둔다. */
.fs-p-43 #list tbody tr[hidden] { display: none; }

.fs-p-43 .fs-cs-cat__note {
  margin-block-start: var(--fs-sp-6);
  font-size: var(--fs-t-xs); color: var(--fs-muted-2);
}

/* --- 4) 문의 목록 표 (10-12 분류 칩 · 조회수 막대를 뺐다) -------------------- */
@media (min-width: 600px) {
  .fs-p-43 .fs-cs-board { min-width: 1040px; table-layout: fixed; }
  .fs-p-43 .fs-cs-board th:nth-child(1), .fs-p-43 .fs-cs-board td:nth-child(1) { width: 74px; }
  .fs-p-43 .fs-cs-board th:nth-child(3), .fs-p-43 .fs-cs-board td:nth-child(3) { width: 124px; }
  .fs-p-43 .fs-cs-board th:nth-child(4), .fs-p-43 .fs-cs-board td:nth-child(4) { width: 128px; }
  .fs-p-43 .fs-cs-board th:nth-child(5), .fs-p-43 .fs-cs-board td:nth-child(5) { width: 148px; }
  .fs-p-43 .fs-cs-board th:nth-child(6), .fs-p-43 .fs-cs-board td:nth-child(6) { width: 92px; }
}
.fs-p-43 .fs-cs-board thead th { text-align: center; white-space: nowrap; }
.fs-p-43 .fs-cs-board thead th:nth-child(2) { text-align: start; }
.fs-p-43 .fs-cs-board tbody th,
.fs-p-43 .fs-cs-board tbody td { font-weight: 400; text-align: center; color: var(--fs-ink-soft); }
.fs-p-43 .fs-cs-board tbody th { text-align: start; }
.fs-p-43 .fs-cs-board__no { font-variant-numeric: tabular-nums; color: var(--fs-muted); }
.fs-p-43 .fs-cs-board__cell {
  display: flex; align-items: center; gap: var(--fs-sp-3);
}
.fs-p-43 .fs-cs-board__link {
  flex: 0 1 auto; min-width: 0;
  color: var(--fs-ink); text-decoration: none;
}
.fs-p-43 .fs-cs-board__link:hover { color: var(--fs-teal-dk); text-decoration: underline; }
.fs-p-43 .fs-cs-lock { flex: 0 0 auto; display: inline-flex; color: var(--fs-muted-2); }
.fs-p-43 .fs-cs-lock svg { width: 13px; height: 13px; }
.fs-p-43 .fs-cs-board__cmt {
  flex: 0 0 auto; min-height: 21px; padding-inline: 8px;
  font-size: var(--fs-t-xs); letter-spacing: 0;
}
.fs-p-43 .fs-cs-board__num { display: block; font-variant-numeric: tabular-nums; }
.fs-p-43 .fs-cs-board__like { color: var(--fs-muted-2); font-variant-numeric: tabular-nums; }
.fs-p-43 .fs-cs-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-sp-2) var(--fs-sp-5);
  margin-block-start: var(--fs-sp-5);
  font-size: var(--fs-t-xs); color: var(--fs-muted-2);
}

/* <600px — 표를 스택 카드로 바꾼다(가로 스크롤 없이 제목이 다 보이게).
   thead 는 스크린리더용으로 남겨 두어 셀 ↔ 머리글 연결이 살아 있다. */
@media (max-width: 599px) {
  .fs-p-43 .fs-cs-board,
  .fs-p-43 .fs-cs-board tbody { display: block; min-width: 0; }
  .fs-p-43 .fs-cs-board thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .fs-p-43 .fs-cs-board tbody tr {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--fs-sp-2) var(--fs-sp-4);
    padding-block: var(--fs-sp-5);
  }
  .fs-p-43 .fs-cs-board tbody tr > * {
    display: block; width: auto; padding: 0; text-align: start;
    font-size: var(--fs-t-xs); color: var(--fs-muted);
  }
  .fs-p-43 .fs-cs-board tbody tr > th { order: 4; flex: 1 1 100%; }
  .fs-p-43 .fs-cs-board__no { order: 1; }
  .fs-p-43 .fs-cs-board tbody tr > td:nth-child(3) { order: 2; }
  .fs-p-43 .fs-cs-board tbody tr > td:nth-child(4) { order: 3; }
  .fs-p-43 .fs-cs-board tbody tr > td.fs-cs-board__like { display: none; }
  .fs-p-43 .fs-cs-board__read {
    order: 5; flex: 1 1 100%;
    display: flex; align-items: center; gap: var(--fs-sp-3);
  }
  .fs-p-43 .fs-cs-board__read::before { content: "조회수"; flex: 0 0 auto; }
  .fs-p-43 .fs-cs-board__num { display: inline; flex: 0 0 auto; color: var(--fs-ink-soft); font-weight: 700; }
  .fs-p-43 .fs-cs-board__cell {
    flex-wrap: wrap; gap: var(--fs-sp-2) var(--fs-sp-3);
    font-size: var(--fs-t-body); color: var(--fs-ink);
  }
  .fs-p-43 .fs-cs-board__link { flex: 0 1 auto; font-size: var(--fs-t-body); }
}

/* --- 5) 페이지네이션 ------------------------------------------------------- */
.fs-p-43 .fs-cs-page {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fs-sp-1);
  margin-block-start: var(--fs-sp-9);
  list-style: none;
}
.fs-p-43 .fs-cs-page__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding-inline: 10px;
  border: 1px solid var(--fs-line);
  font-size: var(--fs-t-sm); color: var(--fs-ink-soft); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.fs-p-43 .fs-cs-page__link:hover { border-color: var(--fs-teal-dk); color: var(--fs-teal-dk); }
.fs-p-43 .fs-cs-page__link[aria-current="page"] {
  background: var(--fs-teal-text); border-color: var(--fs-teal-text);
  color: var(--fs-white); font-weight: 700;
}
.fs-p-43 .fs-cs-page__link--off { color: var(--fs-step-idle); border-color: var(--fs-line); }
.fs-p-43 .fs-cs-page__link svg { width: 14px; height: 14px; }

/* --- 7) 글쓰기 2단 --------------------------------------------------------- */
.fs-p-43 .fs-cs-write {
  --fs-split: minmax(0, 620fr) minmax(0, 820fr);
  --fs-split-align: stretch;
  gap: 0;
}
.fs-p-43 .fs-cs-write__fig {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: var(--fs-cream);
}
.fs-p-43 .fs-cs-write__fig img {
  width: 100%; height: 100%; min-height: 300px; object-fit: cover;
}
.fs-p-43 .fs-cs-write__body {
  padding: var(--fs-sec-pt) var(--fs-gutter) var(--fs-sec-pb);
  background: var(--fs-white);
}
.fs-p-43 .fs-cs-write__inner { max-width: 760px; }
@media (min-width: 1024px) {
  .fs-p-43 .fs-cs-write__body { padding-inline: clamp(40px, 12px + 2.9vw, 80px); }
}
.fs-p-43 .fs-cs-write__lead { margin-block-start: var(--fs-sp-4); color: var(--fs-muted); }
.fs-p-43 .fs-cs-write__form { margin-block-start: var(--fs-sp-8); }

/* --- 8) 다크 상담 채널 밴드 ------------------------------------------------ */
.fs-p-43 .fs-cs-cta .fs-container { position: relative; z-index: 1; }
.fs-p-43 .fs-cs-cta__sub { margin-block-start: var(--fs-sp-3); color: var(--fs-on-dark); }
.fs-p-43 .fs-cs-cta__bar { margin-block-start: var(--fs-gap-title); }
.fs-p-43 .fs-cs-cta__tel {
  display: block; margin-block-start: var(--fs-sp-5);
  text-align: center; font-size: var(--fs-t-sm); color: var(--fs-on-dark);
}
.fs-p-43 .fs-cs-cta__tel a { color: var(--fs-teal-neon); text-decoration: none; }
.fs-p-43 .fs-cs-cta__tel a:hover { text-decoration: underline; }

/* --- 모션 --------------------------------------------------------------- */
/* 이 파일은 새 애니메이션을 만들지 않는다(막대·칩 전부 정적 상태).
   hover 전환만 있으므로 reduced-motion 에서 그것도 끈다. 레이아웃은 동일하다. */
@media (prefers-reduced-motion: reduce) {
  .fs-p-43 .fs-cs-board__link,
  .fs-p-43 .fs-cs-page__link { transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   위 원본 블록은 건드리지 않고 뒤에 이어 붙인다. 근거는 _design/QA/43.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. [호버·틸트] 분야별 타일 — 2026-09-01 삭제.
   타일 자체가 알약 필터로 바뀌어 틸트 대상(.fs-cs-cat__item / __in)이 없어졌다.
   당시 처방 근거는 _design/QA/43.md 에 남아 있다.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   B. [접근성] 명도 대비 AA — 이 페이지가 소유한 3곳 (6건)
   `--fs-muted-2 #7D7D7D` 는 fs.css:2716 의 AA 보정 밴드가 손대지 않는 토큰이라
   흰 배경 4.12:1 · 크림 밴드 3.67:1 로 기준(4.5)에 못 미친다.
   `--fs-muted` 는 같은 밴드에서 #6E6E6E 로 보정돼 있다(흰 5.10 · 크림 4.54).
     · .fs-cs-cat__note   크림 3.67:1  (43.css:98)
     · .fs-cs-legend      흰   4.12:1  (43.css:155) — 막대 범례 항목은 자식이 있어
                                        qa.py 가 건너뛰지만 같은 색이라 함께 올린다
     · .fs-policy p       흰   4.12:1  (fs.css:1061 · 73.css:451 과 같은 처방)
   공용 셸(드로어 제목 11px · 푸터 카피 9~11.8px)의 미달은 손대지 않는다 — 공유 파일이다.
   -------------------------------------------------------------------------- */
.fs-p-43 .fs-cs-cat__note,
.fs-p-43 .fs-cs-legend,
.fs-p-43 .fs-policy { color: var(--fs-muted); }

/* --------------------------------------------------------------------------
   C. [구조] 작성시간 열이 20행 중 3행만 두 줄로 접힌다
   숫자가 비례폭이라(DESIGN_SYSTEM 2.7 — 이 사이트의 숫자는 전부 비례폭)
   같은 10글자라도 «2026-07-04» 87.9px / «2026-08-05» 는 88px 짜리 콘텐츠
   상자를 넘겨 1920 에서만 198·193·192 세 행이 접혔다(행 높이 69 vs 75px).
   태블릿 이하는 글자가 작아 접히지 않으므로 이 폭 전용 결함이다.
   → 표 숫자 열 전체를 tabular-nums 로 고정하고(No·조회수·좋아요는 이미 그렇다)
     열 폭을 가장 넓은 조판폭 위로 올려 20행을 한 줄로 정렬한다.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .fs-p-43 .fs-cs-board th:nth-child(4),
  .fs-p-43 .fs-cs-board td:nth-child(4) { width: 148px; }
  .fs-p-43 .fs-cs-board tbody td:nth-child(4) { font-variant-numeric: tabular-nums; }
}

/* --------------------------------------------------------------------------
   D. [마이크로 인터랙션] 섹션 제목 뒤 70px 틸 선 — 48.css 승격분 B 와 같은 처방
   ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다
     (fs.js 는 첫 화면 대상에 .fs-reveal 을 아예 안 붙인다).
     기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉을 건다.
   ★ 선택자에 #id 를 쓰면 (1,2,1) 이 되어 은닉 규칙 (0,5,2) 를 이겨 선이 굳는다.
     클래스로만 지목한다.
   다크 밴드의 가운데정렬 CTA 제목은 대상에서 뺀다(왼쪽 기점 선이 어긋난다).
   -------------------------------------------------------------------------- */
.fs-p-43 .fs-sec-head__title,
.fs-p-43 .fs-nose-head h2,
.fs-p-43 .fs-cs-write__inner h2 { position: relative; }

.fs-p-43 .fs-sec-head__title::after,
.fs-p-43 .fs-nose-head h2::after,
.fs-p-43 .fs-cs-write__inner h2::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-43 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-43 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   E. [마이크로 인터랙션] 호버 — 프레임은 고정, 사진만 scale(1.045)
   그림자는 쓰지 않는다(2차 규칙). 이 페이지의 프레임 있는 사진은 상담 라운지 1장뿐.
   ★ overflow:hidden 을 figure 에 걸면 확대된 사진이 라벨바 위로 올라탄다.
     figure 는 [사진 행 / 라벨바 행] 2행 그리드이므로 «사진 행» 인 picture 에만 건다.
   -------------------------------------------------------------------------- */
.fs-p-43 .fs-cs-write__fig picture { display: block; overflow: hidden; }
.fs-p-43 .fs-cs-write__fig img { transition: transform var(--fs-dur-slow) var(--fs-ease-out); }

@media (hover: hover) and (pointer: fine) {
  .fs-p-43 .fs-cs-write__fig:hover img { transform: scale(1.045); }
}

/* --------------------------------------------------------------------------
   F. reduced-motion — 위에서 새로 만든 전환을 전부 정지 상태로 확정
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-43 .fs-sec-head__title::after,
  .fs-p-43 .fs-nose-head h2::after,
  .fs-p-43 .fs-cs-write__inner h2::after { transform: scaleX(1) !important; transition: none !important; }

  .fs-p-43 .fs-cs-write__fig img { transition: none !important; transform: none !important; }
}


/* ==========================================================================
   ▼▼▼ 2026-10-12 · 모바일 최적화(승인자 「오늘 수정한 페이지들 다 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측). 실측 _design/momeasure.py 360/390/540.
   백업 _src/build/backup-43-1012-mo/ (재현은 apply.py --from-backup).
   고아 줄(360/390, 전): 글쓰기 리드 「… 게시판에 / 등록됩니다.」 · 긴 문의 제목 「… 여기서도 / 될까요?」 ·
   주소 「… 본관 / 8층」 → balance. 개인정보 처리방침 스크롤 상자 안 법문은 손대지 않는다.
   배치는 그대로(표는 <600 카드형 · 검색 · 글쓰기 한 줄 · 글쓰기 폼 1열이 이미 맞다).
   ========================================================================== */
.fs-p-43 .fs-cs-write__lead,
.fs-p-43 .fs-cs-board__link,
.fs-p-43 .fs-address { text-wrap: balance; }