/* about.preview.html — CLINIC ‘오래 걸리는 치료를 편안하게 받는 공간’을 doctor.html 약속 카드(.v7-prom) 구성으로 (2026-10-19)
   웜 그레이 바탕 · 왼쪽 eyebrow + 제목(굵은 부분 strong) · 직각 흰 카드 6장(사진 · 이름 · 번호) · 04(독립 진료실)가 떠 있고 마우스를 올린 카드로 옮겨 감.
   아래 CTA 는 메인과 같은 .cta--stage(같은 웜 그레이 무대)라, 이 섹션 아래에 곧은 괘선 한 줄로 구분한다. */
.bp-clinic { --e: cubic-bezier(.2, .7, .2, 1); background: #f1f0ed; padding: 150px 0 130px; border-bottom: 1px solid #dcd6ca; }
.bp-clinic .s-h2 { color: #1a1a1a; }
.bp-clinic .s-h2 strong { font-weight: 600; }
.bp-clinic__sub { margin-top: 18px; font-size: 18px; line-height: 1.7; color: #4a4642; }
.bp-cgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 72px 0 0; padding: 0; list-style: none; }
.bp-cc { display: flex; }
.bp-cc__in { flex: 1; display: flex; flex-direction: column; margin: 0; background: #fff; transition: transform .45s var(--e), box-shadow .45s; }
.bp-cc__ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e7e3db; }
.bp-cc__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e); }
.bp-cc__t { padding: 22px 22px 0; font-size: clamp(16px, 8px + .7vw, 18px); line-height: 1.55; font-weight: 600; letter-spacing: -0.03em; color: #1a1a1a; }
.bp-cc__n { margin-top: auto; padding: 18px 22px 20px; font-size: 40px; line-height: 1; font-weight: 200; letter-spacing: -0.02em; color: #d8ccb4; font-variant-numeric: tabular-nums; transition: color .45s; }
.bp-cc.is-def .bp-cc__in { transform: translateY(-20px); box-shadow: 4px 22px 44px -16px rgba(90,68,28,.26); }
.bp-cc.is-def .bp-cc__n { color: #a9843e; }
@media (hover: hover) and (pointer: fine) {
  .bp-cgrid:hover .bp-cc.is-def:not(:hover) .bp-cc__in { transform: none; box-shadow: none; }
  .bp-cgrid:hover .bp-cc.is-def:not(:hover) .bp-cc__n { color: #d8ccb4; }
  .bp-cc:hover .bp-cc__in { transform: translateY(-20px); box-shadow: 4px 22px 44px -16px rgba(90,68,28,.26); }
  .bp-cc:hover .bp-cc__n { color: #a9843e; }
  .bp-cc:hover .bp-cc__ph img { transform: scale(1.05); }
}
.bp-clinic__note { margin-top: 64px; padding-top: 28px; border-top: 1px solid #dcd6ca; font-size: 16px; line-height: 1.85; color: #4a4642; }
.bp-clinic__note strong { display: inline-block; margin-bottom: 4px; font-size: 17px; color: #1a1a1a; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .bp-cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
}
@media (max-width: 1023px) {
  .bp-clinic { padding: 96px 0 88px; }
  .bp-clinic .s-h2 { font-size: 26px; }
  .bp-clinic__sub { font-size: 16px; }
  .bp-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
  .bp-cc.is-def .bp-cc__in { transform: none; box-shadow: 0 0 0 1px #e6d6b3; }
  .bp-cc__ph { aspect-ratio: 1; }
  .bp-cc__t { padding: 16px 16px 0; font-size: 16px; }
  .bp-cc__n { padding: 12px 16px 14px; font-size: 28px; }
  .bp-clinic__note { margin-top: 44px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-cc__in, .bp-cc__ph img { transition: none; }
}