*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{font-family:Pretendard,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.7;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;width:100%;object-fit:cover}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.25}
:focus-visible{outline:3px solid var(--c);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.wrap,section{padding-left:max(20px,calc((100% - 1160px)/2));padding-right:max(20px,calc((100% - 1160px)/2))}

/* 상단 메뉴 */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;height:64px;padding:0 max(20px,calc((100% - 1160px)/2));background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.07)}
.logo{font-family:var(--disp);font-weight:700;font-size:20px;text-decoration:none;margin-right:auto}
.nav nav{display:flex;gap:26px;font-size:15px}
.nav nav a{text-decoration:none;opacity:.75}
.nav nav a:hover{opacity:1}
.navcta{font-size:14px;font-weight:700;text-decoration:none;background:var(--c);color:#fff;padding:9px 16px;border-radius:3px}
@media(max-width:820px){.nav nav{display:none}}

.btn{display:inline-block;background:var(--c);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:3px}
.btn.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.kind{display:block;font-size:14px;font-weight:600;letter-spacing:.04em;opacity:.8;margin-bottom:14px}
.hero h1{font-size:clamp(38px,6.4vw,76px)}
.hero p{font-size:clamp(16px,1.6vw,19px);margin:18px 0 28px;max-width:34em}

/* 첫 화면 ① full: 사진 꽉 + 어둡게 + 왼쪽 아래 큰 문장 */
.h-full .hero{position:relative;padding:0;height:calc(100svh - 64px);min-height:520px;color:#fff}
.h-full .hero img{position:absolute;inset:0;height:100%}
.h-full .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.66))}
.h-full .hc{position:absolute;z-index:1;left:max(20px,calc((100% - 1160px)/2));right:20px;bottom:9vh}
/* ② split: 왼쪽 글, 오른쪽 세로 사진 */
.h-split .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px;background:var(--bg);padding-top:64px;padding-bottom:64px}
.h-split .hero img{order:2;aspect-ratio:4/5;border-radius:200px 200px 3px 3px}
.h-split .hero h1{font-weight:400}
/* ③ type: 큰 글씨 먼저, 넓은 사진 띠 */
.h-type .hero{background:var(--bg);padding-top:9vh;display:flex;flex-direction:column}
.h-type .hero img{order:2;aspect-ratio:21/8;margin-top:48px;border-radius:3px}
.h-type .hero h1{font-size:clamp(42px,7.6vw,96px);color:var(--c)}
/* ④ editorial: 넓은 사진 위에 흰 글상자 걸침 */
.h-editorial .hero{position:relative;padding-top:0;padding-bottom:0}
.h-editorial .hero img{aspect-ratio:16/8;border-radius:0 0 3px 3px}
.h-editorial .hc{position:relative;background:#fff;width:min(620px,100%);margin:-160px 0 0 0;padding:44px 48px 48px 0}
.h-editorial .hero h1{font-weight:400}

/* 이야기 */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:center;padding-top:120px;padding-bottom:120px}
.story img{aspect-ratio:3/4;border-radius:3px}
.story h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:28px}
.story p{font-size:17px;color:#444;max-width:32em}
.story p+p{margin-top:16px}

/* 대표 메뉴·시술 */
.sig{background:var(--bg);padding-top:100px;padding-bottom:110px}
.sig>h2,.flow>h2,.faq>h2{font-size:clamp(26px,3vw,36px);margin-bottom:40px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cards article{background:#fff;border-radius:3px;overflow:hidden}
.cards img{aspect-ratio:4/3}
.cards div{padding:22px 24px 26px}
.cards h3{font-size:21px;margin-bottom:8px}
.cards p{font-size:15.5px;color:#555}
.h-split .cards article:nth-child(2),.h-full .cards article:nth-child(2){transform:translateY(36px)}

/* 진행 과정: 순서가 있는 단계라 번호 사용 */
.flow{padding-top:110px;padding-bottom:110px}
.flow ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.flow li{padding:24px 24px 0 0}
.flow li+li{padding-left:24px;border-left:1px solid rgba(0,0,0,.1)}
.flow b{display:block;font-family:var(--disp);font-size:30px;color:var(--c);line-height:1;margin-bottom:14px}
.flow h3{font-size:19px;margin-bottom:6px}
.flow p{font-size:15px;color:#555}

.gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:10px;padding-bottom:110px}
.gal img{height:100%;border-radius:3px}
.gal img:first-child{grid-row:1/3}
.gal img:last-child{grid-column:2/4}

.faq{background:var(--bg);padding-top:100px;padding-bottom:100px}
.faq details{background:#fff;border-radius:3px;margin-bottom:10px;max-width:820px}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--c);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 24px 22px;color:#555}

.visit{background:var(--ink);color:#fff;padding-top:100px;padding-bottom:100px;text-align:center}
.visit h2{font-size:clamp(30px,4vw,48px);margin-bottom:12px}
.visit .small{font-size:14px;opacity:.65;margin-top:6px}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.visit .btn{background:#fff;color:var(--ink)}
.visit .btn.line{background:transparent;color:#fff}
footer{padding:28px max(20px,calc((100% - 1160px)/2)) 36px;background:#111;color:#999;font-size:13px}
footer a{display:inline-block;margin-top:10px}
.sample{margin-top:6px;font-weight:600;color:#bbb}

@media(max-width:820px){
  .h-split .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px}
  .h-split .hero img{order:0;aspect-ratio:1;border-radius:140px 140px 3px 3px}
  .h-type .hero img{aspect-ratio:4/3}
  .h-editorial .hero img{aspect-ratio:4/3.4}
  .h-editorial .hc{margin-top:-60px;padding:28px 20px 40px 0}
  .story{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:72px;padding-bottom:72px}
  .story img{aspect-ratio:4/3}
  .sig,.flow,.faq,.visit{padding-top:72px;padding-bottom:72px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .cards article:nth-child(2){transform:none!important}
  .flow ol{grid-template-columns:minmax(0,1fr)}
  .flow li,.flow li+li{padding:20px 0;border-left:0;border-bottom:1px solid rgba(0,0,0,.1);display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:8px}
  .flow b{grid-row:1/3;font-size:24px}
  .gal{grid-template-columns:1fr 1fr;grid-template-rows:180px 140px 140px;padding-bottom:72px}
  .gal img:first-child{grid-row:auto;grid-column:1/3}
  .gal img:last-child{grid-column:1/3}
}

/* 모음 페이지 */
.idx{max-width:960px;margin:0 auto;padding:40px 20px 60px}
.idx h1{font-size:30px}
.idx>p{color:#555;margin:8px 0 24px}
.tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tpl{text-decoration:none;border:1px solid rgba(0,0,0,.1);border-radius:3px;overflow:hidden}
.tpl img{aspect-ratio:16/10}
.tpl b{display:block;padding:12px 14px 2px;font-size:14px;color:#666;font-weight:600}
.tpl span{display:block;padding:0 14px 14px;font-weight:700;font-size:17px;line-height:1.4}
.prices{width:100%;border-collapse:collapse;margin-top:28px;font-size:15px}
.prices th,.prices td{text-align:left;padding:12px 6px;border-top:1px solid rgba(0,0,0,.08);vertical-align:top}
.prices td:nth-child(2){font-weight:800;white-space:nowrap}
.idx .btn{display:block;text-align:center;margin-top:20px}
.idx .sample{color:#777}
@media(max-width:600px){.tpls{grid-template-columns:minmax(0,1fr)}}
/* 템플릿 하단 제작 신청 띠(샘플 사이트 전용) */
body:has(.order){padding-bottom:72px}
.order{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#1d2a4d;color:#fff;font-size:15px;box-shadow:0 -4px 18px rgba(0,0,0,.18)}
.order p{margin:0}.order b{color:#ffd23f}
.order a{flex:none;background:#ffd23f;color:#1d2a4d;font-weight:800;text-decoration:none;padding:10px 18px;border-radius:999px}
@media (max-width:480px){.order{font-size:13px;gap:10px}.order a{padding:9px 14px}}