/* ============ 검단퍼스트치과 — 2026 트렌디 리뉴얼 ============ */
html { scroll-behavior: smooth; }
::selection { background: #c9a227; color: #0a1628; }

/* 필름 그레인 */
.grain-overlay { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 글래스 네비 */
.glass-nav { background: rgba(250,247,240,.72); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(10,22,40,.08); box-shadow: 0 8px 32px rgba(10,22,40,.08); }
.glass-drop { background: rgba(250,247,240,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(10,22,40,.08); box-shadow: 0 24px 64px rgba(10,22,40,.16); }
#site-header.nav-hidden { transform: translateY(-120%); }

/* 스크롤 리빌 */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal-scale.in { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-stagger].in > * { opacity: 1; transform: none; }

/* 모바일 메뉴 링크 등장 */
#mobile-menu.open .mobile-link { animation: slideUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0s); }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* 마퀴 */
.marquee { display: flex; overflow: hidden; user-select: none; gap: 0; }
.marquee-track { display: flex; flex-shrink: 0; align-items: center; gap: 0; min-width: 100%; animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* 히어로 거대 타이포 */
.hero-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero-word > span { display: inline-block; transform: translateY(110%); animation: heroUp 1s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes heroUp { to { transform: none; } }

/* 그라데이션 텍스트 */
.text-shine { background: linear-gradient(100deg, #ecd591 10%, #c9a227 45%, #ecd591 80%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }

/* 벤토 카드 호버 */
.bento { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.bento:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -24px rgba(10,22,40,.25); }

/* ===== 3D 틸트 카드 ===== */
.tilt-3d { transform-style: preserve-3d; will-change: transform; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .45s; position: relative; }
.tilt-3d:hover { box-shadow: 0 48px 90px -30px rgba(10,22,40,.42), 0 20px 40px -20px rgba(201,162,39,.18); z-index: 10; }
.tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; z-index: 6; mix-blend-mode: overlay; }
.tilt-3d > *:not(.tilt-glare) { transform: translateZ(32px); }
.tilt-3d .idx-num, .tilt-3d .idx-num-light { transform: translateZ(56px); }

/* ===== 3D 버튼 ===== */
.btn-3d { position: relative; transform-style: preserve-3d; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; box-shadow: 0 6px 0 -2px rgba(169,135,31,.9), 0 14px 28px -10px rgba(201,162,39,.5); }
.btn-3d:hover { transform: translateY(-3px); box-shadow: 0 9px 0 -2px rgba(169,135,31,.9), 0 22px 36px -10px rgba(201,162,39,.6); }
.btn-3d:active { transform: translateY(2px); box-shadow: 0 3px 0 -2px rgba(169,135,31,.9), 0 8px 16px -8px rgba(201,162,39,.5); }
.btn-3d-dark { box-shadow: 0 6px 0 -2px rgba(0,0,0,.55), 0 14px 28px -10px rgba(10,22,40,.5); }
.btn-3d-dark:hover { box-shadow: 0 9px 0 -2px rgba(0,0,0,.55), 0 22px 36px -10px rgba(10,22,40,.6); }
.btn-3d-dark:active { box-shadow: 0 3px 0 -2px rgba(0,0,0,.55), 0 8px 16px -8px rgba(10,22,40,.5); }

/* ===== 3D 텍스트 (레이어드 섀도) ===== */
.text-3d { text-shadow: 0 1px 0 rgba(201,162,39,.45), 0 2px 0 rgba(201,162,39,.35), 0 3px 0 rgba(201,162,39,.25), 0 5px 0 rgba(201,162,39,.14), 0 12px 24px rgba(0,0,0,.45); }

/* ===== 플로팅 3D 오브젝트 ===== */
@keyframes float3d { 0%,100% { transform: translateY(0) rotateX(0) rotateY(0); } 33% { transform: translateY(-14px) rotateX(6deg) rotateY(-8deg); } 66% { transform: translateY(-5px) rotateX(-5deg) rotateY(9deg); } }
.float-3d { animation: float3d 7s ease-in-out infinite; transform-style: preserve-3d; }

/* 티켓형 카드 라인 */
.tick-line { background-image: linear-gradient(to right, rgba(10,22,40,.25) 45%, transparent 45%); background-size: 10px 1px; background-repeat: repeat-x; }

/* 큰 인덱스 넘버 */
.idx-num { font-variant-numeric: tabular-nums; -webkit-text-stroke: 1.5px rgba(10,22,40,.18); color: transparent; }
.idx-num-light { font-variant-numeric: tabular-nums; -webkit-text-stroke: 1.5px rgba(255,255,255,.25); color: transparent; }

/* 본문 프로즈 */
.prose-clinic h2 { font-size: 1.45rem; font-weight: 800; color: #0a1628; margin-top: 3rem; margin-bottom: 1rem; letter-spacing: -.03em; }
.prose-clinic h2::before { content: ''; display: block; width: 44px; height: 3px; background: #c9a227; margin-bottom: .9rem; border-radius: 2px; }
.prose-clinic p { line-height: 1.9; margin-bottom: 1.1rem; color: #3d4a5c; font-size: 15.5px; }
.prose-clinic ul { margin: 1rem 0 1.5rem; display: grid; gap: .6rem; }
.prose-clinic li { position: relative; padding: .9rem 1.1rem .9rem 2.6rem; background: #fff; border: 1px solid rgba(10,22,40,.07); border-radius: 14px; line-height: 1.65; color: #3d4a5c; font-size: 14.5px; }
.prose-clinic li::before { content: '\2713'; position: absolute; left: 1rem; top: .9rem; color: #c9a227; font-weight: 800; }

.blog-content h2 { font-size: 1.4rem; font-weight: 800; color: #0a1628; margin: 2rem 0 .8rem; letter-spacing: -.02em; }
.blog-content h3 { font-size: 1.15rem; font-weight: 700; color: #12365a; margin: 1.5rem 0 .5rem; }
.blog-content p { line-height: 1.9; margin-bottom: 1rem; color: #3d4a5c; }
.blog-content img { border-radius: 1rem; margin: 1.2rem 0; max-width: 100%; }
.blog-content ul, .blog-content ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.blog-content li { margin-bottom: .45rem; line-height: 1.75; list-style: disc; color: #3d4a5c; }

/* 비포애프터 슬라이더 */
.ba-compare { position: relative; user-select: none; }
.ba-compare .ba-after { clip-path: inset(0 0 0 50%); }
.ba-compare .ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(10,22,40,.2); pointer-events: none; }
.ba-compare .ba-divider::after { content: '\2194'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; background: #0a1628; color: #ddb85e; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ba-compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }

/* FAQ */
.faq-item { transition: background .3s; }
.faq-answer { overflow: hidden; }

/* 카운트업 숫자 */
.stat-num { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

/* ============================================================
   ===== 2026.5 SUPER 업그레이드 =====
   ============================================================ */

/* ===== View Transitions (MPA 네이티브 페이지 전환) ===== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .26s ease both; }
::view-transition-new(root) { animation: vtIn .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-14px) scale(.996); filter: blur(3px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(18px) scale(.996); filter: blur(3px); } }

/* ===== 커튼 인트로 (첫 방문) ===== */
#curtain { position: fixed; inset: 0; z-index: 999; background: #0a1628; display: flex; align-items: center; justify-content: center; transition: clip-path .9s cubic-bezier(.76,0,.24,1); clip-path: inset(0 0 0 0); }
#curtain.done { clip-path: inset(0 0 100% 0); }
#curtain .curtain-logo { color: #ddb85e; font-size: 12px; font-weight: 800; letter-spacing: .5em; text-transform: uppercase; opacity: 0; animation: curtainLogo .6s ease .1s forwards; }
@keyframes curtainLogo { to { opacity: 1; letter-spacing: .34em; } }
#curtain.off { display: none; }

/* ===== 스크롤 프로그레스 바 ===== */
#scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: linear-gradient(90deg, #c9a227, #ecd591, #c9a227); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ===== 커스텀 커서 ===== */
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
#cursor-dot { position: fixed; top: 0; left: 0; z-index: 998; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #c9a227; pointer-events: none; }
#cursor-ring { position: fixed; top: 0; left: 0; z-index: 997; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1.5px solid rgba(201,162,39,.65); pointer-events: none; transition: width .3s, height .3s, margin .3s, background .3s, border-color .3s; mix-blend-mode: exclusion; }
#cursor-ring.cursor-hover { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(221,184,94,.14); border-color: rgba(221,184,94,.9); }
@media (hover: none), (pointer: coarse) { #cursor-dot, #cursor-ring { display: none; } }

/* ===== 히어로 per-char 스플릿 ===== */
.line-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.char { display: inline-block; transform: translateY(118%) rotate(5deg); animation: charUp .85s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--cd, 0s); will-change: transform; }
@keyframes charUp { to { transform: none; } }

/* ===== 오로라 배경 (히어로) ===== */
.aurora { position: absolute; inset: -20%; pointer-events: none; filter: blur(90px) saturate(1.3); opacity: .55; }
.aurora::before, .aurora::after { content: ''; position: absolute; width: 55%; height: 55%; border-radius: 50%; }
.aurora::before { top: 5%; right: 8%; background: conic-gradient(from 90deg, #1d5486, #0d2843, #c9a22755, #1d5486); animation: auroraSpin 18s linear infinite; }
.aurora::after { bottom: 0; left: 5%; background: conic-gradient(from 240deg, #c9a22740, #12365a, #5b8ec244, #c9a22740); animation: auroraSpin 24s linear infinite reverse; }
@keyframes auroraSpin { to { transform: rotate(360deg) scale(1.12); } }

/* ===== 스포트라이트 카드 (마우스 추적 골드 글로우) ===== */
.spotlight::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(221,184,94,.13), transparent 42%); }
.spotlight::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .45s; padding: 1.5px;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(221,184,94,.7), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.spotlight:hover::before, .spotlight:hover::after { opacity: 1; }

/* ===== 스크롤 힌트 ===== */
.scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,.35); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-hint .scroll-line { width: 1px; height: 44px; background: rgba(255,255,255,.15); overflow: hidden; position: relative; }
.scroll-hint .scroll-line::after { content: ''; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: #ddb85e; animation: scrollDrop 1.8s cubic-bezier(.76,0,.24,1) infinite; }
@keyframes scrollDrop { to { top: 110%; } }

/* ===== 마그네틱 버튼 ===== */
.magnetic-el { transition: translate .35s cubic-bezier(.16,1,.3,1); will-change: translate; }

@media (prefers-reduced-motion: reduce) {
  #curtain { display: none !important; }
  .char { transform: none !important; animation: none !important; }
  .aurora::before, .aurora::after { animation: none; }
  #cursor-dot, #cursor-ring { display: none !important; }
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track { animation: none; }
  .hero-word > span { transform: none; animation: none; }
  .float-3d { animation: none; }
  .tilt-3d { transform: none !important; }
}
@media print { #site-header, #site-footer, #floating-call, .grain-overlay { display: none !important; } }