@charset "euc-kr";
/* =====================================================================
   사진 갤러리 (병원 둘러보기 menu=9 / 센터소개 menu=10)
   - 카드 목록 .nh-gal  /  사진 뷰어(라이트박스) .nh-lb
   - 이미지 : /img/gallery/<세트>/{s|m|l}/01.jpg  (360 / 800 / 1600px)
   ===================================================================== */

/* ---------- 카드 목록 ---------- */
.nh-gal{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.nh-gal--2{grid-template-columns:repeat(2,1fr);}
.nh-gal__item{margin:0; min-width:0;}
.nh-gal__link{display:flex; flex-direction:column; height:100%; border-radius:20px; overflow:hidden; background:#fff; border:1px solid var(--nh-line); color:inherit; text-decoration:none; transition:box-shadow .25s, transform .25s, border-color .25s;}
.nh-gal__link:hover,.nh-gal__link:focus-visible{border-color:transparent; box-shadow:var(--nh-shadow-h); transform:translateY(-4px);}
.nh-gal__link:focus-visible{outline:3px solid var(--nh-sub); outline-offset:3px;}
.nh-gal__thumb{position:relative; display:block; aspect-ratio:3/2; overflow:hidden; background:var(--nh-bg);}
.nh-main .common .nh-gal__thumb img{display:block; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.nh-gal__link:hover .nh-gal__thumb img{transform:scale(1.05);}
.nh-gal__thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.35),rgba(0,0,0,0) 45%); pointer-events:none;}
.nh-gal__count{position:absolute; z-index:1; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:30px; background:rgba(20,24,26,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:13px; font-weight:700; line-height:1;}
.nh-gal__count::before{content:""; width:15px; height:15px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-9 8'/%3E%3C/svg%3E") no-repeat center/contain;}
.nh-gal__body{display:flex; flex-direction:column; flex:1; gap:6px; padding:20px 22px 22px;}
.nh-gal__chip{align-self:flex-start; display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:8px; background:var(--nh-main-l); color:var(--nh-main); font-size:13px; font-weight:800; letter-spacing:.3px;}
.nh-gal__title{font-size:19px; font-weight:800; line-height:1.4; letter-spacing:-.4px; color:var(--nh-text);}
.nh-gal__desc{font-size:15px; line-height:1.6; color:var(--nh-text3);}
.nh-gal__more{display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:12px; font-size:14px; font-weight:700; color:var(--nh-main);}
.nh-gal__more::after{content:""; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230099b0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain; transition:transform .25s;}
.nh-gal__link:hover .nh-gal__more::after{transform:translateX(4px);}

@media (max-width:1100px){
	.nh-gal{grid-template-columns:repeat(2,1fr); gap:20px;}
}
@media (max-width:640px){
	.nh-gal,.nh-gal--2{grid-template-columns:1fr; gap:16px;}
	.nh-gal__body{padding:16px 18px 18px;}
	.nh-gal__title{font-size:17px;}
}

/* ---------- 사진 뷰어 ---------- */
html.nh-lb-lock,html.nh-lb-lock body{overflow:hidden;}
.nh-lb{position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; background:#0e1214; color:#fff; font-family:var(--nh-font); visibility:hidden; opacity:0; transition:opacity .25s, visibility 0s .25s; -webkit-tap-highlight-color:transparent;}
.nh-lb.is-open{visibility:visible; opacity:1; transition:opacity .25s;}
.nh-lb *{box-sizing:border-box;}
.nh-lb button{margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer;}
.nh-lb button:focus-visible{outline:2px solid rgba(255,255,255,.55); outline-offset:2px;}

.nh-lb__top{flex:0 0 auto; display:flex; align-items:center; gap:16px; height:68px; padding:0 12px 0 28px;}
.nh-lb__title{flex:1; min-width:0; margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:17px; font-weight:700;}
.nh-lb__count{margin:0; font-size:14px; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums;}
.nh-lb__count b{color:#fff; font-weight:700;}
.nh-lb__close{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; transition:background .2s;}
.nh-lb__close:hover{background:rgba(255,255,255,.12);}
.nh-lb svg{display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

.nh-lb__stage{position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:8px 88px; touch-action:pan-y;}
.nh-lb__figure{position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; margin:0;}
.nh-lb__img{display:block; max-width:100%; max-height:100%; border-radius:6px; opacity:0; transform:scale(.985); transition:opacity .3s, transform .3s; user-select:none; -webkit-user-drag:none;}
.nh-lb__img.is-ready{opacity:1; transform:none;}
.nh-lb__spin{position:absolute; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; opacity:0; transition:opacity .2s; animation:nh-lb-spin .8s linear infinite;}
.nh-lb.is-loading .nh-lb__spin{opacity:1; transition-delay:.15s;}
@keyframes nh-lb-spin{to{transform:rotate(360deg);}}

.nh-lb__nav{position:absolute; top:50%; z-index:1; display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-top:-28px; border-radius:50%; background:rgba(255,255,255,.1); transition:background .2s;}
.nh-lb__nav:hover{background:rgba(255,255,255,.22);}
.nh-lb__nav--prev{left:20px;}
.nh-lb__nav--next{right:20px;}

.nh-lb__caption{flex:0 0 auto; min-height:46px; margin:0; padding:12px 24px 0; text-align:center; font-size:15px; color:rgba(255,255,255,.8);}

.nh-lb__thumbs{flex:0 0 auto; padding:14px 0 20px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;}
.nh-lb__thumbs::-webkit-scrollbar{display:none;}
.nh-lb__thumbs ul{display:flex; gap:8px; width:max-content; margin:0 auto; padding:0 24px; list-style:none;}
.nh-lb__thumbs li{margin:0;}
.nh-lb__thumbs button{display:block; width:84px; height:56px; border-radius:8px; overflow:hidden; opacity:.45; outline:2px solid transparent; outline-offset:2px; transition:opacity .2s, outline-color .2s;}
.nh-lb__thumbs button:hover{opacity:.8;}
.nh-lb__thumbs button.is-active{opacity:1; outline-color:#fff;}
.nh-lb__thumbs img{display:block; width:100%; height:100%; object-fit:cover;}

.nh-lb.is-single .nh-lb__nav,.nh-lb.is-single .nh-lb__thumbs,.nh-lb.is-single .nh-lb__count{display:none;}

@media (max-width:767px){
	.nh-lb__top{height:56px; padding-left:18px;}
	.nh-lb__title{font-size:15px;}
	.nh-lb__stage{padding:0;}
	.nh-lb__img{border-radius:0;}
	.nh-lb__nav{display:none;}
	.nh-lb__caption{font-size:14px;}
	.nh-lb__thumbs button{width:64px; height:44px;}
}
@media (prefers-reduced-motion:reduce){
	.nh-gal__link,.nh-gal__thumb img,.nh-lb,.nh-lb__img{transition:none;}
}
