/* ceramic.preview.html — Case Guide → doctor.html 약속(Promise) 카드 디자인 (2026-10-20)
   아래 .v7-* 규칙은 css/p-doc-v7.css ‘4 약속’ 부분을 그대로 복사(모서리만 직각 — doctor 미리보기의 p-doc-v7-prev.css 와 같게).
   다른 점: 카드 6장이라 PC 는 3장 × 2줄, 떠 있는 카드는 02(치아 삭제 최소화). 머리 아래 설명 · 카드 아래 안내 문장(원래 ceramic 문구). */
.bp-prom { --dv-ease: cubic-bezier(.2, .7, .2, 1); }
.bp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v7-prom { background: #f1f0ed; padding: 150px 0 160px; }
.v7-prom .s-h2 { color: #1a1a1a; }
.v7-prom .s-h2 strong { font-weight: 600; }
.v7-pgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 72px 0 0; padding: 0; list-style: none; }
.v7-pc { display: flex; }
.v7-pc__in { flex: 1; display: flex; flex-direction: column; min-height: 400px; padding: 34px 30px 30px; background: #fff; transition: transform .45s var(--dv-ease), box-shadow .45s; }
.v7-pc__ic { width: 64px; height: 64px; overflow: visible; }
.v7-pc__ic .f { fill: #efe4cc; transition: fill .45s; }
.v7-pc__ic .ln { fill: none; stroke: #2a2724; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.v7-pc__ic .dt { fill: #2a2724; }
.v7-pc__t { margin-top: 28px; font-size: clamp(19px, 9px + .9vw, 22px); line-height: 1.55; font-weight: 600; letter-spacing: -0.035em; color: #1a1a1a; text-wrap: pretty; }
.v7-pc__n { margin-top: auto; padding-top: 28px; font-size: 52px; line-height: 1; font-weight: 200; letter-spacing: -0.02em; color: #d8ccb4; font-variant-numeric: tabular-nums; transition: color .45s; }
.v7-pc.is-def .v7-pc__in { transform: translateY(-20px); box-shadow: 4px 22px 44px -16px rgba(90,68,28,.26); }
.v7-pc.is-def .v7-pc__n { color: #a9843e; }
.v7-pc.is-def .v7-pc__ic .f { fill: #e8d3a4; }
@media (hover: hover) and (pointer: fine) {   /* 마우스를 올린 카드가 떠오르고, 가운데(03)는 내려앉는다 */
  .v7-pgrid:hover .v7-pc.is-def:not(:hover) .v7-pc__in { transform: none; box-shadow: none; }
  .v7-pgrid:hover .v7-pc.is-def:not(:hover) .v7-pc__n { color: #d8ccb4; }
  .v7-pgrid:hover .v7-pc.is-def:not(:hover) .v7-pc__ic .f { fill: #efe4cc; }
  .v7-pc:hover .v7-pc__in { transform: translateY(-20px); box-shadow: 4px 22px 44px -16px rgba(90,68,28,.26); }
  .v7-pc:hover .v7-pc__n { color: #a9843e; }
  .v7-pc:hover .v7-pc__ic .f { fill: #e8d3a4; }
}
@media (min-width: 1024px) and (max-width: 1279px) {   /* 3장 + 2장 */
  .v7-pgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 40px; }
  .v7-pc { grid-column: span 2; }
  .v7-pc:nth-child(n+4) { grid-column: span 3; }
  .v7-pc__in { min-height: 330px; }
}
@media (max-width: 1023px) {
  .v7-prom { padding: 96px 0 104px; }
  .v7-prom .s-h2 { font-size: 26px; }
  .v7-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
  .v7-pc:last-child { grid-column: 1 / -1; }
  .v7-pc__in { min-height: 0; padding: 28px 26px 24px; }
  .v7-pc.is-def .v7-pc__in { transform: none; box-shadow: 0 0 0 1px #e6d6b3; }
  .v7-pc__ic { width: 52px; height: 52px; }
  .v7-pc__t { margin-top: 20px; font-size: 19px; }
  .v7-pc__n { padding-top: 22px; font-size: 40px; }
}
@media (max-width: 599px) {
  .v7-pgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .v7-pc__in { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "ic n" "t t"; align-items: start; padding: 24px 22px 26px; }
  .v7-pc__ic { grid-area: ic; }
  .v7-pc__n { grid-area: n; justify-self: end; margin: 0; padding: 4px 0 0; font-size: 36px; }
  .v7-pc__t { grid-area: t; margin-top: 16px; font-size: 18.5px; }
}

/* ceramic 6장 */
.bp-prom .v7-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
.bp-prom .v7-pc__in { min-height: 330px; }
.bp-prom__sub { margin-top: 18px; font-size: 18px; line-height: 1.7; color: #4a4642; }
.bp-prom__note { margin-top: 64px; padding-top: 28px; border-top: 1px solid #dcd6ca; font-size: 16px; line-height: 1.85; color: #4a4642; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .bp-prom .v7-pc, .bp-prom .v7-pc:nth-child(n+4) { grid-column: auto; }
}
@media (max-width: 1023px) {
  .bp-prom .v7-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .bp-prom .v7-pc:last-child { grid-column: auto; }
  .bp-prom .v7-pc__in { min-height: 0; }
  .bp-prom__sub { font-size: 16px; }
  .bp-prom__note { margin-top: 44px; font-size: 15.5px; }
}
@media (max-width: 599px) { .bp-prom .v7-pgrid { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .bp-prom .v7-pc__in, .bp-prom .v7-pc__ic .f, .bp-prom .v7-pc__n { transition: none; } }