/* ko-ver3 메인 미리보기 5차(2026-11-05 · index.preview.html · index.preview.palette.html 이 읽음) — 4차 시안 1(css/p-v3d-1.css)로 확정한 위에 얹는 층.
   생성 ~/tmp/renewal-src/build/ver3-1105e/make_v3e.py. 모든 규칙은 body.v3e 안.
   1 왜 재식술은: 카드 디자인 = 병원 캡처 chrome_5bqyeRaO2d.png — 흰 카드 4장(옅은 테두리 · 둥근 모서리), 제목 왼쪽 위 · 설명 · ‘바로가기 >’ 왼쪽 아래 · 색 아이콘 오른쪽 아래,
     한 장만 색으로 채움(처음 01, 마우스를 올린 카드로 옮겨 감). 문구는 그대로
   2 대표진료: 진료 목차를 빼고, 카드 뒤 바탕에 병원 이름이 오른쪽 → 왼쪽으로 계속 흐름(마키)
   3 자주 묻는 질문: 판의 세로 줄무늬 → 물결 무늬 */

/* ── 1 · 왜 재식술은 ── */
body.v3e .v3e-w { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.3vw, 24px); margin: clamp(44px, 3vw + 16px, 64px) 0 0; padding: 0; list-style: none; }
body.v3e .v3e-c a { position: relative; display: flex; flex-direction: column; height: 100%; min-height: clamp(300px, 21vw, 360px); padding: clamp(26px, 2.1vw, 38px) clamp(22px, 1.9vw, 34px) clamp(24px, 1.9vw, 32px);
  border: 1.5px solid #e6e8ea; border-radius: 26px; background: #fff; color: var(--v3b-ink); text-align: left; overflow: hidden;
  box-shadow: 0 2px 4px rgba(29, 33, 37, .03); transition: background-color .4s, border-color .4s, box-shadow .4s, transform .4s cubic-bezier(.2, .7, .2, 1); }
body.v3e .v3e-no { font: italic 400 20px/1 Georgia, 'Times New Roman', serif; letter-spacing: .02em; color: var(--v3b-gold-t); transition: color .4s; }
body.v3e .v3e-t { margin: 18px 0 0; font-size: clamp(22px, 15px + .75vw, 29px); line-height: 1.34; font-weight: 800; letter-spacing: -0.04em; word-break: keep-all; transition: color .4s; }
body.v3e .v3e-d { margin: 14px 0 0; padding-right: 4px; font-size: clamp(15px, 14px + .2vw, 17px); line-height: 1.62; color: var(--v3b-text); word-break: keep-all; transition: color .4s; }
body.v3e .v3e-d b { color: var(--v3b-gold); }
body.v3e .v3e-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 26px; font-size: 15px; font-weight: 700; color: var(--v3b-ink); transition: color .4s; }
body.v3e .v3e-go svg { width: 8px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
body.v3e .v3e-ic { position: absolute; right: clamp(18px, 1.6vw, 28px); bottom: clamp(18px, 1.5vw, 26px); width: clamp(64px, 5vw, 84px); height: auto; filter: drop-shadow(0 10px 14px rgba(40, 52, 64, .22)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
/* 색으로 채운 카드: 처음 01, 목록 위에 마우스가 있으면 그 카드 */
body.v3e .v3e-c.is-on a, body.v3e .v3e-w:hover .v3e-c a:hover { border-color: transparent; background: linear-gradient(155deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 60%), #2f4457; color: #fff;   /* 금색 번호 #ecd39f 가 4.5 : 1 이상 되는 진하기 */
  box-shadow: 0 30px 50px -26px rgba(26, 44, 60, .62); transform: translateY(-6px); }
body.v3e .v3e-w:hover .v3e-c.is-on a:not(:hover) { border-color: #e6e8ea; background: #fff; color: var(--v3b-ink); box-shadow: 0 2px 4px rgba(29, 33, 37, .03); transform: none; }
body.v3e .v3e-c.is-on .v3e-no, body.v3e .v3e-w:hover .v3e-c a:hover .v3e-no { color: #ecd39f; }
body.v3e .v3e-c.is-on .v3e-d, body.v3e .v3e-w:hover .v3e-c a:hover .v3e-d { color: #e9eef2; }
body.v3e .v3e-c.is-on .v3e-d b, body.v3e .v3e-w:hover .v3e-c a:hover .v3e-d b { color: #ecd39f; }
body.v3e .v3e-c.is-on .v3e-go, body.v3e .v3e-w:hover .v3e-c a:hover .v3e-go { color: #fff; }
body.v3e .v3e-w:hover .v3e-c.is-on a:not(:hover) .v3e-no { color: var(--v3b-gold-t); }
body.v3e .v3e-w:hover .v3e-c.is-on a:not(:hover) .v3e-d { color: var(--v3b-text); }
body.v3e .v3e-w:hover .v3e-c.is-on a:not(:hover) .v3e-d b { color: var(--v3b-gold); }
body.v3e .v3e-w:hover .v3e-c.is-on a:not(:hover) .v3e-go { color: var(--v3b-ink); }
body.v3e .v3e-c a:hover .v3e-go svg { transform: translateX(3px); }
body.v3e .v3e-c a:hover .v3e-ic { transform: translateY(-4px) rotate(-4deg); }
body.v3e .v3e-c a:focus-visible { outline: 3px solid #c49a4c; outline-offset: 3px; }
@media (max-width: 1199px) { body.v3e .v3e-w { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  body.v3e .v3e-w { grid-template-columns: none; gap: 12px; margin-top: 34px; }
  body.v3e .v3e-c a { min-height: 0; padding: 24px 22px 22px; border-radius: 20px; }
  body.v3e .v3e-t { margin-top: 12px; padding-right: 74px; font-size: 21px; }
  body.v3e .v3e-t br { display: none; }
  body.v3e .v3e-d { padding-right: 74px; font-size: 15.5px; }
  body.v3e .v3e-go { padding-top: 18px; }
  body.v3e .v3e-ic { width: 62px; }
  body.v3e .v3e-c.is-on a { transform: none; }
}
@media (prefers-reduced-motion: reduce) { body.v3e .v3e-c a, body.v3e .v3e-ic, body.v3e .v3e-go svg { transition: none; } }

/* ── 2 · 대표진료: 카드 뒤에 흐르는 병원 이름(오른쪽 → 왼쪽). 글자는 옅은 웜 그레이라 카드 · 글자를 가리지 않는다 ── */
body.v3e .v3e-mq { position: absolute; left: 0; right: 0; top: 54%; z-index: 0; overflow: hidden; pointer-events: none; transform: translateY(-50%); }
body.v3e .v3e-mq__t { display: flex; width: max-content; animation: v3eMq 70s linear infinite; }
body.v3e .v3e-mq__t span { flex: none; padding-right: .5em; font-size: clamp(110px, 12.5vw, 240px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; color: #efe9df; }
@keyframes v3eMq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.v3e .r21-sig__in { z-index: 1; }
@media (max-width: 1023px) {
  body.v3e .v3e-mq { top: auto; bottom: 40px; transform: none; }
  body.v3e .v3e-mq__t span { font-size: 92px; }
}
@media (prefers-reduced-motion: reduce) { body.v3e .v3e-mq__t { animation: none; } }

/* ── 3 · 자주 묻는 질문: 무늬 없는 단색 판(11-05 6차 ‘물결 무늬 삭제, 무늬 없이 평범한 배경색’ — 5차의 물결 · 3차의 세로 줄무늬 · 빛 번짐 모두 뺌) ── */
body.v3e .faq .faq__panel { background: #3f566a; }   /* 슬레이트 판 가운데 색 — 흰 글자 7.6 : 1 */
