@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:wght@300;400;500&family=Noto+Sans+KR:wght@300;400;500&display=swap');
:root{--ink:#f4efe9;--mute:#c9c1b8;--bg:#0c0b0a;--gold:#d8c3a5}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Noto Sans KR',sans-serif;font-weight:300;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* 상단 메뉴 */
.nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:flex-end;gap:28px;padding:22px 5vw 46px;background:linear-gradient(180deg,rgba(8,7,6,.78),rgba(8,7,6,0));font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.2em;font-size:16px}
.nav a{text-shadow:0 1px 10px rgba(0,0,0,.9);opacity:.92;transition:.3s}.nav a:hover,.nav a.on{opacity:1;border-bottom:1px solid var(--gold)}

/* 히어로: 화장품 화보 느낌 - 모델 클로즈업 + 좌측 그라데이션 */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.18) contrast(1.03)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,7,6,.78) 0%,rgba(8,7,6,.5) 26%,rgba(8,7,6,.1) 52%,rgba(8,7,6,0) 70%),linear-gradient(0deg,#0c0b0a 0%,rgba(12,11,10,.75) 8%,rgba(12,11,10,0) 26%)}
.hero .copy{position:absolute;z-index:2;left:7vw;top:50%;transform:translateY(-50%);max-width:420px}
.logo{font-family:'Allura',cursive;font-size:clamp(64px,9vw,120px);line-height:1;font-weight:400;white-space:nowrap}
.logo b{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:.62em;margin-left:.08em;letter-spacing:.02em}
.hero .copy .rule{width:48px;height:1px;background:var(--gold);margin:26px 0 22px}
.hero .copy h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:17px;letter-spacing:.32em;color:var(--gold);margin-bottom:14px}
.hero .copy p{font-size:17px;color:var(--mute);word-break:keep-all}
.scroll{position:absolute;z-index:2;left:7vw;bottom:34px;font-family:'Cormorant Garamond',serif;letter-spacing:.3em;font-size:12px;color:var(--mute)}

/* 본문 섹션 */
section.block{padding:120px 7vw;max-width:1200px;margin:0 auto}
.eyebrow{font-family:'Cormorant Garamond',serif;letter-spacing:.34em;font-size:18px;color:var(--gold);margin-bottom:18px}
.block h3{font-family:'Cormorant Garamond','Noto Sans KR',serif;font-weight:400;font-size:clamp(28px,4vw,44px);line-height:1.3;margin-bottom:22px;word-break:keep-all}
.block p.lead{color:var(--mute);max-width:560px;word-break:keep-all}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.grid3 figure{overflow:hidden;aspect-ratio:3/4;background:#1a1816}
.grid3 img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:.6s}
.grid3 figure:hover img{transform:scale(1.05);filter:grayscale(.4)}
.menu{margin-top:48px;border-top:1px solid #2b2723}
.menu div{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid #2b2723;font-size:15px}
.menu span:last-child{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:18px}
.info{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.info>div{padding-left:clamp(0px,5vw,80px)}
.info img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:78% 50%}
.next{display:block;text-align:center;padding:90px 0 110px;font-family:'Cormorant Garamond',serif;letter-spacing:.3em;font-size:15px;color:var(--gold);border-top:1px solid #1d1a17}
footer{text-align:center;padding:40px 5vw 60px;font-size:13px;color:#7d756c;letter-spacing:.1em}
@media(max-width:760px){
 .hero .copy{left:6vw;right:6vw;max-width:none;top:auto;bottom:90px;transform:none}
 .hero::after{background:linear-gradient(0deg,rgba(8,7,6,.95) 0%,rgba(8,7,6,.6) 45%,rgba(8,7,6,0) 75%)}
 .grid3{grid-template-columns:1fr;} .info{grid-template-columns:1fr;gap:32px}
 section.block{padding:80px 6vw}.nav{gap:16px;font-size:13px}.info>div{padding-left:0}
}

/* 네이버 스마트플레이스 예약 */
.btn-reserve{display:inline-block;margin-top:28px;padding:14px 30px;border:1px solid var(--gold);color:var(--ink);font-family:'Cormorant Garamond','Noto Sans KR',serif;letter-spacing:.24em;font-size:15px;background:rgba(8,7,6,.35);backdrop-filter:blur(4px);transition:.3s}
.btn-reserve:hover{background:var(--gold);color:#0c0b0a}
.fab-reserve{position:fixed;right:22px;bottom:22px;z-index:20;padding:15px 24px;background:var(--gold);color:#0c0b0a;font-family:'Noto Sans KR',sans-serif;font-weight:500;font-size:14px;letter-spacing:.08em;border-radius:40px;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.fab-reserve:hover{filter:brightness(1.08)}

footer .biz{line-height:2;color:#8f877d;font-size:13px;letter-spacing:.04em}
footer .biz strong{display:block;font-family:'Cormorant Garamond',serif;letter-spacing:.3em;color:var(--gold);font-size:15px;font-weight:500;margin-bottom:6px}
footer .biz span{display:inline-block;margin:0 10px}
footer .copy{margin-top:14px;font-size:12px;color:#5f5850}
@media(max-width:760px){footer .biz span{display:block;margin:0}}

.hero .copy h2 .area{display:inline-block;margin-top:8px;font-family:'Noto Sans KR',sans-serif;font-weight:400;letter-spacing:.12em;font-size:16px}

/* 정사각형 사진용: 오른쪽에 두고 왼쪽은 그라데이션으로 자연스럽게 */
.hero img.bg-right{inset:0 0 0 auto;width:auto;height:100%;max-width:none;object-fit:cover;object-position:50% 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
@media(max-width:760px){.hero img.bg-right{inset:0;width:100%;height:100%;-webkit-mask-image:none;mask-image:none}}

/* 후기 */
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.rev-grid article{display:flex;flex-direction:column}
.rev-grid figure{aspect-ratio:3/4;overflow:hidden;background:#1a1816}
.rev-grid img{width:100%;height:100%;object-fit:cover;transition:.6s}
.rev-grid article:hover img{transform:scale(1.04)}
.rev-grid .tag{margin-top:16px;font-family:'Cormorant Garamond','Noto Sans KR',serif;letter-spacing:.14em;color:var(--gold);font-size:15px}
.rev-grid p{margin-top:8px;font-size:14.5px;color:var(--mute);word-break:keep-all;line-height:1.75}
@media(max-width:1000px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rev-grid{grid-template-columns:1fr}}

/* 1페이지: 컬러 모자이크 */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,19vw,260px);gap:14px;margin-top:56px}
.mosaic figure{overflow:hidden;background:#1a1816}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.mosaic figure:hover img{transform:scale(1.05)}
.m-a{grid-column:1/3;grid-row:1/3}.m-b{grid-column:3;grid-row:1/3}.m-c{grid-column:4;grid-row:1}.m-d{grid-column:4;grid-row:2}
.m-e{grid-column:1/3;grid-row:3}.m-f{grid-column:3/5;grid-row:3}
.m-b img{object-position:50% 40%}
@media(max-width:760px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:44vw;gap:10px}
 .m-a{grid-column:1/3;grid-row:auto}.m-b,.m-c,.m-d{grid-column:auto;grid-row:auto}.m-e,.m-f{grid-column:auto;grid-row:auto}}

/* 2페이지: 옆으로 넘기는 갤러리 */
.slider-wrap{position:relative;margin-top:48px}
.slider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
.slider::-webkit-scrollbar{display:none}
.slider figure{flex:0 0 clamp(210px,24vw,290px);aspect-ratio:3/4;position:relative;overflow:hidden;scroll-snap-align:start;background:#1a1816}
.slider img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.slider figure:hover img{transform:scale(1.05)}
.slider figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;font-size:13.5px;letter-spacing:.06em;color:#f4efe9;background:linear-gradient(0deg,rgba(8,7,6,.78),rgba(8,7,6,0))}
.sl-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:rgba(12,11,10,.7);color:var(--gold);font-size:18px;cursor:pointer;backdrop-filter:blur(4px)}
.sl-btn:hover{background:var(--gold);color:#0c0b0a}
.sl-btn.prev{left:-10px}.sl-btn.next-b{right:-10px}
@media(max-width:760px){.sl-btn{display:none}}

/* 시술 사진 로고 */
.mosaic figure,.slider figure{position:relative}
.mosaic figure::after,.slider figure::after{content:"";position:absolute;top:12px;right:12px;width:clamp(72px,8vw,112px);aspect-ratio:520/204;background:url(images/logo-white.png) no-repeat center/contain;filter:drop-shadow(0 0 3px rgba(0,0,0,.6)) drop-shadow(0 1px 6px rgba(0,0,0,.65));pointer-events:none;z-index:2}
@media(max-width:760px){.mosaic figure::after,.slider figure::after{width:72px;top:8px;right:8px}}

/* 폰 화면 보정 */
@media(max-width:760px){
 .m-f{grid-column:1/3}
 .grid3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:36px}
 .grid3::-webkit-scrollbar{display:none}
 .grid3 figure{flex:0 0 68vw;scroll-snap-align:start}
}
@media(max-width:560px){
 .rev-grid{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:36px}
 .rev-grid p{font-size:12.5px;line-height:1.65}
 .rev-grid .tag{font-size:13px;margin-top:10px}
}