/* 업종별 도입 시나리오 장 (#cases) — 애플식 «갤러리» 타일.
 *
 * ★세 시나리오가 같은 크기의 타일 셋으로 나란히 선다. 사진이 위, 글이 아래 —
 *   한 칸이 곧 한 현장이다. 넓은 화면에서는 3단 격자, 좁은 화면에서는 옆으로 넘기는
 *   레일이다(한 칸씩 걸린다). 마우스를 얹어도 움직이지 않는다.
 * ★연출 이미지임을 두 곳에서 말한다 — 머리말 아래 한 줄, 그리고 사진마다 알약 표기.
 *   작지만 지우지 않는다. 무엇이 실제이고 무엇이 예시인지 구분되지 않으면
 *   실제인 부분(화면·기능)의 신뢰까지 같이 잃는다.
 * (blocks.css 가 갖고 있던 옛 규칙과 이름이 겹치지 않도록 격자·사진·본문 이름을 새로 지었다.
 *  같은 이름을 쓰면 뒤에 읽히는 blocks.css 가 이 파일을 덮는다.)
 */

.cases__title-keep { white-space: nowrap; }

/* 머리말 아래 예시 고지 — 가운데 정렬된 작은 한 줄. «i» 는 장식이므로 읽어 주지 않는다. */
.cases-note {
  display: inline-flex; align-items: flex-start; gap: 9px; max-width: 40em;
  margin-top: var(--s-4); text-align: left; font-size: 13px; line-height: 1.55; color: var(--text-faint);
}
.cases-note span {
  display: grid; place-items: center; flex: 0 0 16px; height: 16px; margin-top: 2px;
  border: 1px solid currentColor; border-radius: 50%; font: 700 10px/1 var(--font-num);
}

/* ── 격자 ── */
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.case-grid > .case {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background: var(--bg-tile); border: 1px solid var(--line-soft);
}

/* 사진 — 3:2 로 잘라 타일 위를 다 쓴다. 살짝 눌러 두면 어느 장의 바탕에도 앉는다. */
.case__media { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-panel); }
.case__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.94); }
/* «AI 생성 연출 이미지» 알약. 사진 위라 테마와 무관하게 검은 반투명 위 흰 글자다. */
.case__media figcaption {
  position: absolute; left: var(--s-3); bottom: var(--s-3); padding: 4px 10px;
  border-radius: var(--r-pill); background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .9);
  font-size: 11px; font-weight: 500; letter-spacing: .01em; backdrop-filter: blur(6px);
}

/* ── 본문 ── */
.case__text { display: flex; flex-direction: column; flex: 1; padding: var(--s-5) var(--s-5) var(--s-6); }
.case__label { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.case__text h3 { margin-top: var(--s-2); font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; }

/* 도입 전 / 도입 후 — 두 목록을 위아래로. «전» 은 흐리게, «후» 는 강조색 제목에 본문색 글. */
.case__lists { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.case__list h4 { margin-bottom: var(--s-2); font-size: 13px; font-weight: 600; }
.case__list--before h4 { color: var(--text-faint); }
.case__list--after h4 { color: var(--accent); }
.case__list ul { display: grid; gap: 6px; }
.case__list li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.case__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 1px; background: currentColor; }
.case__list--after li { color: var(--text); }

/* 예시 고지 — 타일 바닥에 붙는다(margin-top: auto). 세 칸의 바닥 줄이 맞는다. */
.case__foot { margin-top: auto; padding-top: var(--s-5); font-size: 12px; line-height: 1.5; color: var(--text-faint); }

/* ── 좁은 화면: 옆으로 넘기는 레일 ──
 * ★한 칸이 82vw 라 다음 칸의 귀퉁이가 보인다 — 그것이 «더 있다» 는 신호다.
 *   오른쪽은 .wrap 의 여백(20px, base.css)을 되돌려 화면 끝까지 흘려 보낸다. */
@media (max-width: 900px) {
  .case-grid {
    display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-right: -20px; padding-right: 20px; padding-bottom: var(--s-2);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .case-grid::-webkit-scrollbar { display: none; }
  .case-grid > .case { flex: 0 0 82vw; max-width: 440px; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .case__text { padding: var(--s-4) var(--s-4) var(--s-5); }
  .case__text h3 { font-size: 22px; }
}