@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
/* 웰치랩 공통 스타일 */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { word-break: keep-all; letter-spacing: -0.01em; }
.tnum { font-variant-numeric: tabular-nums; }
.tr { transition: all .3s ease; }
.no-bar { scrollbar-width: none; } .no-bar::-webkit-scrollbar { display: none; }

/* 상단 펼침 메뉴 */
.gnb:hover .mega, .gnb:focus-within .mega { opacity: 1; visibility: visible; }
.mega { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.gnb-link { position: relative; }
.gnb-link::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px; background: #D7282F; opacity: 0; transition: all .3s ease; }
.gnb-item:hover .gnb-link, .gnb-item.on .gnb-link { color: #D7282F; }
.gnb-item:hover .gnb-link::after, .gnb-item.on .gnb-link::after { left: 0; right: 0; opacity: 1; }

/* 사진 확대 효과 */
.zoom { overflow: hidden; } .zoom img { transition: transform .6s ease; } .zoom:hover img { transform: scale(1.05); }

/* 오른쪽 빠른 메뉴 접기 */
#quick.closed { transform: translateX(100%); }

/* 상세페이지 (관리자/직접 입력 내용) */
.detail-body img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.detail-body > img { width: auto; }   /* 상세 이미지는 원본보다 크게 늘리지 않음 (작은 이미지가 흐릿하게 커지는 문제) */
.detail-body p { margin: 0 0 1em; line-height: 1.8; }

@media (prefers-reduced-motion: reduce) { .zoom img, .tr { transition: none; } }

/* 로고 글자 */
.wl-word { font-family: 'Nunito', 'Pretendard Variable', 'Pretendard', sans-serif; font-weight: 900; letter-spacing: -0.035em; }

/* ===================== 움직임 (assets/motion.js) ===================== */
/* 부드러운 스크롤 (Lenis) */
html.lenis, html.lenis body { height: auto; scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* 스크롤 등장: 아래에서 천천히 떠오름 */
.rv { opacity: 0; transform: translate3d(0, 48px, 0);
  transition: opacity 1s cubic-bezier(.16,1,.3,1) var(--rv-d, 0ms), transform 1.25s cubic-bezier(.16,1,.3,1) var(--rv-d, 0ms); }
.rv.rv-in { opacity: 1; transform: none; }

/* 배너 사진 깊이감 */
[data-parallax] { will-change: transform; transform: scale(1.12); }

/* 클릭 반응: 눌림 */
a, button, [role="button"], summary, select { -webkit-tap-highlight-color: transparent; }
.press { transition: scale .22s cubic-bezier(.2,.8,.2,1); }
.is-press { scale: var(--press, .95); transition-duration: .08s; }

/* 클릭 반응: 물결 */
.ripple { position: absolute; border-radius: 9999px; pointer-events: none; background: currentColor; opacity: .22;
  transform: scale(0); animation: ripple .65s cubic-bezier(.2,.8,.2,1) forwards; z-index: 0; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* 클릭 반응: 아이콘 톡 */
@keyframes icon-pop { 0% { scale: 1; } 30% { scale: 1.32; } 55% { scale: .9; } 78% { scale: 1.06; } 100% { scale: 1; } }
.icon-pop { animation: icon-pop .5s cubic-bezier(.2,.8,.2,1); transform-box: fill-box; transform-origin: center; }
@keyframes pin-pop { 0% { r: 14; } 40% { r: 18; } 100% { r: 14; } }
.pin-pop { animation: pin-pop .45s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .is-press { scale: 1; } }

/* 로고 크기: 휴대폰에서는 조금 작게 */
@media (max-width: 767px) { header .ki-logo { width: 170px; } }

/* 로고 (시안 3: 영문 + 한글 병기) */
.ki-logo { display: inline-flex; align-items: center; gap: 13px; line-height: 1; }
.ki-logo svg { width: 42px; height: 42px; flex: none; }
.ki-logo .ki-txt b { display: block; font-family: 'Montserrat', 'Pretendard Variable', 'Pretendard', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .06em; }
.ki-logo .ki-txt small { display: block; margin-top: 6px; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: .42em; opacity: .75; }
.ki-logo.ki-lg svg { width: 52px; height: 52px; }
.ki-logo.ki-lg .ki-txt b { font-size: 22px; } .ki-logo.ki-lg .ki-txt small { font-size: 14px; margin-top: 8px; }
@media (max-width: 767px) {
  .ki-logo { gap: 10px; } .ki-logo svg { width: 34px; height: 34px; }
  .ki-logo .ki-txt b { font-size: 14px; letter-spacing: .04em; white-space: nowrap; } .ki-logo .ki-txt small { font-size: 10.5px; margin-top: 5px; letter-spacing: .36em; }
}