/* ko-ver3 메인 미리보기(2026-11-04 · index.preview.html 만 읽음) — 병원 피드백 ‘메인이 어둡고 불안한 느낌. 병원 건물만 빛나고, 전체 톤은 밝게’.
   생성 ~/tmp/renewal-src/build/ver3-1104/make_v3.py(이 틀 p-v3.tmpl.css → css/p-v3.css). 모든 규칙은 body.v3 안으로 한정.
   검은 바탕은 쓰지 않는다 — 색 있는 바탕은 그라데이션(밋밋하지 않게). 진한 면은 슬레이트 블루(FAQ 참고 이미지 browser_4svOlS93J0.png 의 색). */
body.v3 {
  --v3-ink: #24282c; --v3-sub: #5d646b; --v3-gold: #a9843e; --v3-gold-d: #8a6a2c; --v3-gold-lt: #dcc089;
  --v3-sea: #2e6a84; --v3-sea-line: #35576b;
  --v3-slate: linear-gradient(100deg, #627a8d 0%, #4d667a 34%, #435a6d 66%, #384d60 100%);
}

/* 1 · 머리 배너: 검은 덮개 전부 없앰. 사진(img/v3-hero*.jpg, hero_v3.py)을 해 질 녘처럼 밝게 보정 — 간판 · 유리문 빛이 화면에서 가장 밝다.
   글자 뒤 어둠도 덮개가 아니라 사진 노출(입구에서 먼 쪽은 빛이 덜 닿음). */
body.v3 .hero--ray { background: #4a433d; }
body.v3 .hero--ray::before, body.v3 .hero::before { background: none; }
body.v3 .hero--ray .hero__in { text-shadow: 0 1px 22px rgba(36, 28, 20, .32); }
body.v3 .hero--ray .btn { text-shadow: none; }
@media (max-width: 1023px) {
  body.v3 .hero--ray::before { background: none; }
  body.v3 .hero--ray .hero__in::before { display: none; }
}

/* 2 · Our Belief: 치아 둘레 원을 더 진하고 두껍게 */
body.v3 .belief__visual--tooth { --ring-w: 4.2; --sw: 1.45; }
body.v3 .bel-orbit__ring { stroke: rgba(146, 108, 42, .92); }
body.v3 .bel-orbit__tail1 { stroke: rgba(150, 112, 46, .85); }
body.v3 .bel-orbit__tail2 { stroke: rgba(150, 112, 46, .45); }
body.v3 .bel-orbit__spark { stroke: #c59a4c; filter: drop-shadow(0 0 6px rgba(197, 154, 76, .9)); }
@media (max-width: 1023px) { body.v3 .belief__visual--tooth { --ring-w: 7; --sw: 2.3; } }

/* 3 · 미친 치과의사: 사진 파란색을 줄인 판(img/v3-doc-band.jpg, doc_v3.py — 색만, 얼굴 모양 그대로) · 밝은 바탕 · 글자와 원장 사이를 띄움 */
body.v3 .r5-dr { color: var(--v3-ink); background: linear-gradient(90deg, #f6f2ec 0%, #efeae3 34%, #e3e1dd 62%, #d8d9d9 100%); }
body.v3 .r5-dr__bg { -webkit-text-stroke-color: rgba(169, 132, 62, .2); }
body.v3 .r5-dr__l1 { color: #3b3f44; }
body.v3 .r5-dr__l2 { background: linear-gradient(100deg, #c49a50 0%, #a9843e 45%, #7f5f26 100%); -webkit-background-clip: text; background-clip: text; }
body.v3 .r5-dr__name { color: var(--v3-sub); }
body.v3 .r5-dr__name b { color: var(--v3-ink); }
@media (min-width: 1024px) {
  body.v3 .r9-dr .r5-dr__ph::after { display: none; }
  /* 사진을 오른쪽으로 7% 옮기고(원장과 글자 사이를 띄움) 왼쪽 끝은 바탕으로 부드럽게 녹인다 */
  body.v3 .r9-dr .r5-dr__ph img { transform: translateX(7%); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 4%, rgba(0,0,0,.55) 22%, #000 42%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 4%, rgba(0,0,0,.55) 22%, #000 42%); }
}
@media (max-width: 1023px) {
  body.v3 .r5-dr { background: linear-gradient(180deg, #f6f2ec 0%, #eeeae4 52%, #e2e1de 100%); }
  body.v3 .r9-dr .r5-dr__ph { margin-top: 46px; }
  body.v3 .r9-dr .r5-dr__ph img { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 22%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 22%); }
}

/* 4 · 왜 재식술은: 사진을 빼고 글 카드(참고 chrome_T6KL0opmxR.png — 흰 카드 · 기울인 번호 · 아치 아이콘 · 가운데 제목) */
body.v3 .r5-why { background: radial-gradient(60% 70% at 15% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #faf6f0 0%, #f3ece2 100%); }
.v3w-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 26px); }
.v3w { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px clamp(20px, 1.6vw, 28px) 36px; border-radius: 24px; background: #fff; text-align: center;
  box-shadow: 0 22px 44px -30px rgba(74, 58, 34, .38), 0 2px 8px -4px rgba(74, 58, 34, .08); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.v3w:hover { transform: translateY(-6px); box-shadow: 0 30px 54px -30px rgba(74, 58, 34, .46), 0 2px 8px -4px rgba(74, 58, 34, .1); }
.v3w__no { align-self: flex-start; font: italic 400 19px/1 Georgia, 'Times New Roman', serif; letter-spacing: .02em; color: #9b7a4a; }
.v3w__ic { display: grid; place-items: center; width: 88px; height: 100px; margin: 10px 0 0; border-radius: 44px 44px 0 0; background: linear-gradient(180deg, #f4ede2, #efe5d6); }
.v3w:nth-child(even) .v3w__ic { background: linear-gradient(180deg, #e8f2f6, #dbeaf0); }
.v3w__ic svg { width: 32px; height: 32px; margin-top: 8px; fill: none; stroke: var(--v3-gold-d); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v3w:nth-child(even) .v3w__ic svg { stroke: #3f6a80; }
.v3w__t { margin-top: 26px; font-size: clamp(18px, 13px + .55vw, 21px); line-height: 1.42; font-weight: 700; letter-spacing: -0.035em; color: var(--v3-ink); word-break: keep-all; }
.v3w__d { margin-top: 12px; font-size: clamp(15px, 14px + .15vw, 16px); line-height: 1.65; color: #6a6f75; word-break: keep-all; }
.v3w__d b { color: var(--v3-gold-d); }
@media (max-width: 1199px) { .v3w-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .v3w-list { grid-template-columns: none; gap: 14px; }
  .v3w { padding: 24px 22px 28px; border-radius: 20px; }
  .v3w__ic { width: 76px; height: 86px; }
  .v3w__ic svg { width: 28px; height: 28px; }
  .v3w__t { margin-top: 18px; font-size: 19px; }
  .v3w__t .br-pc { display: none; }
}
@media (prefers-reduced-motion: reduce) { .v3w { transition: none; } .v3w:hover { transform: none; } }

/* 5 · 대표진료: 카드 바탕 회색(그림 img/v3-sig-1~4.jpg — 48차 밝은 판의 바탕만 회색으로, 이미지 생성 워커) · 그림자로 떠 있는 입체감 · 2번 ↔ 3번 자리(HTML) */
body.v3 .r21-sc a { border-radius: 16px; background: linear-gradient(165deg, #eef0f3 0%, #dfe3e8 100%);
  box-shadow: 0 40px 64px -34px rgba(38, 52, 66, .5), 0 14px 26px -16px rgba(38, 52, 66, .26), inset 0 0 0 1px rgba(255, 255, 255, .6); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
body.v3 .r21-sc a:hover { transform: translateY(-8px); box-shadow: 0 50px 74px -34px rgba(38, 52, 66, .56), 0 18px 30px -16px rgba(38, 52, 66, .3), inset 0 0 0 1px rgba(255, 255, 255, .6); }
body.v3 .r21-sc a::after { background: linear-gradient(180deg, rgba(226, 230, 235, 0) 58%, rgba(226, 230, 235, .82) 80%, rgba(220, 225, 231, .97) 100%); }
body.v3 .r21-sc__no { color: var(--v3-gold-d); }
body.v3 .r21-sc__t { color: #1f2a33; }
@media (prefers-reduced-motion: reduce) { body.v3 .r21-sc a { transition: none; } body.v3 .r21-sc a:hover { transform: none; } }

/* 6 · 치료 전후 사진: 바탕만 그라데이션 */
body.v3 .r4-ba { background: linear-gradient(180deg, #faf7f2 0%, #f1ebe2 100%); }

/* 7 · 후기: 섹션 바탕 파스텔 바다색 블루 · 카드 흰 바탕 + 진한 테두리 + 아래 그림자 · 후기 전부가 끊김 없이 흐름(js/p-r25.js 가 한 벌을 복제) */
body.v3 #reviews { color: var(--v3-ink);
  background: radial-gradient(70% 60% at 85% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #ebf6f9 0%, #d9edf3 52%, #c9e3ec 100%); }
body.v3 #reviews .r23-rv__bgt { -webkit-text-stroke-color: rgba(53, 87, 107, .16); }
body.v3 #reviews .r23-rv__lab { color: var(--v3-ink); }
body.v3 #reviews .r23-rv__lab i { color: var(--v3-sea); }
body.v3 #reviews .r23-rv__t em { color: var(--v3-gold-d); }
body.v3 #reviews .r23-rv__sub { color: #4f5b63; }
body.v3 #reviews .r23-rv__vp { padding: 10px 0 40px; }
body.v3 #reviews .r23-rc { background: #fff; border: 1.5px solid var(--v3-sea-line); border-radius: 16px; box-shadow: 0 26px 30px -22px rgba(26, 58, 78, .55), 0 6px 10px -6px rgba(26, 58, 78, .18); }
body.v3 #reviews .r23-rc:hover { background: #fff; }
body.v3 #reviews .r23-rc::after { background: var(--v3-gold); }
body.v3 #reviews .r23-rc__no { -webkit-text-stroke-color: rgba(53, 87, 107, .14); }
body.v3 #reviews .r23-rc__q { color: rgba(53, 87, 107, .06); }
body.v3 #reviews .r23-rc__badge { border-color: rgba(169, 132, 62, .6); color: var(--v3-gold-d); }
body.v3 #reviews .r23-rc__h { color: var(--v3-ink); }
body.v3 #reviews .r23-rc__h::before, body.v3 #reviews .r23-rc__h::after { color: var(--v3-gold); }
body.v3 #reviews .r23-rc__b { color: #4b545c; }
body.v3 #reviews .r23-rc__who { border-top-color: rgba(53, 87, 107, .16); }
body.v3 #reviews .r23-rc__av { color: #fff; }
body.v3 #reviews .r23-rc__nm small { color: #69747c; }
body.v3 #reviews .r23-rc__who a { color: var(--v3-sea); }
body.v3 #reviews .btn--dark { background: linear-gradient(100deg, #3c5d72, #2f4b5e); color: #fff; }
body.v3 #reviews .btn--line { background: rgba(255, 255, 255, .55); border-color: var(--v3-sea-line); color: #1f3a4a; }
body.v3 #reviews .btn--line:hover { background: var(--v3-sea-line); border-color: var(--v3-sea-line); color: #fff; }
body.v3 #reviews .r23-rv__note { color: #5d6a72; }

/* 8 · 유튜브 · 블로그: 고른 탭(검정 → 슬레이트). 자동 넘김은 js/p-v3.js */
body.v3 .r5-mt[aria-selected="true"], body.v3 .r5-media .btn--dark { background: linear-gradient(100deg, #46657a, #34505f); }

/* 9 · 자주 묻는 질문: 참고 browser_4svOlS93J0.png 처럼 — 슬레이트 블루 그라데이션 판 · 크림색 제목 · 테두리 없는 + · 왼쪽 아래 치과 거울(SVG) */
body.v3 .faq { --n-gold-lt: #e0c58c; --n-dk: #34495c; --n-dk-text: rgba(255, 255, 255, .84); --fq-line: rgba(255, 255, 255, .2); }
body.v3 .faq .faq__panel { background: radial-gradient(26% 90% at 50% 30%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 72%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 2px, rgba(255, 255, 255, 0) 2px 11px), var(--v3-slate); }
body.v3 .faq .h2 { color: #f6eedd; }
body.v3 .faq .acc { border-top-color: rgba(255, 255, 255, .32); }
body.v3 .faq .acc summary { color: rgba(255, 255, 255, .94); }
body.v3 .faq .acc summary::before, body.v3 .faq .acc details[open] summary::before { border: 0; background: none; }
body.v3 .faq .acc summary::after { --ic: #f3e6c8; background-size: 16px 1.6px, 1.6px 16px; }
body.v3 .faq .acc details[open] summary { --ic: #f3e6c8; }
body.v3 .faq .acc details[open] summary::after { background-size: 16px 1.6px, 1.6px 0; }
body.v3 .faq .acc summary:hover, body.v3 .fm .faq .acc summary:hover { color: #f3dfae; }
.v3-mirror { position: absolute; z-index: 0; left: max(-40px, calc((100% - var(--maxw, 1240px)) / 2 - 120px)); bottom: -26px; width: clamp(220px, 21vw, 330px); height: auto; pointer-events: none; }
body.v3 .faq { overflow-x: clip; }
body.v3 .faq .faq__in { position: relative; z-index: 1; }
@media (max-width: 1023px) {
  .v3-mirror { left: auto; right: 6px; top: 34px; bottom: auto; width: 132px; transform: scaleX(-1); opacity: .9; }   /* 화면 밖으로 나가면 가로 스크롤이 생긴다 */
}

/* 10 · 끝(문의 · 바닥글): 검정 → 슬레이트 블루 그라데이션 · 모바일 아래 단추 줄도 */
body.v3 .ftr--panel { color: rgba(236, 241, 245, .76); }
body.v3 .ftr--panel::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 13C42 9 33 4 22 5 10 6 4 16 4 28c0 12 6 20 8 30s1 22 4 31c2 7 6 9 10 8 5-1 7-9 9-17s5-17 15-17 13 9 15 17 4 16 9 17c4 1 8-1 10-8 3-9 2-21 4-31s8-18 8-30C96 16 90 6 78 5 67 4 58 9 50 13z' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='.45'/%3E%3C/svg%3E") no-repeat right -4% top 46% / min(760px, 64%) auto,
    radial-gradient(52% 38% at 50% 0, rgba(220, 192, 137, .2), rgba(220, 192, 137, 0) 72%), linear-gradient(160deg, #577086 0%, #445d71 46%, #364b5e 100%); }
body.v3 .ftr--panel .ftr__copy { color: rgba(236, 241, 245, .62); }
body.v3 .ftr--panel a:hover { color: #fff; }
body.v3 .cta--stage .btn--dark { background: linear-gradient(100deg, #46657a, #34505f); }
@media (max-width: 1023px) {
  body.v3 .r4-bar { background: linear-gradient(100deg, #4b6679, #36505f); }
  body.v3 .r4-bar__a--tel { border-left-color: rgba(255, 255, 255, .18); }
  body.v3 .r4-bar__i { stroke: #ecd29c; }
}
