/*
[레이어] L4 설정
[역할]   홈(첫 페이지) 배치 — 풀블리드 첫판·가이드 라인·소개·가로 갤러리·영상·과정·오너·시술 종목 표·투어 띠
[입력]   기본.css 의 변수
[출력]   0_조립.html 이 <link> 로 읽는다. 휴대폰 최적화는 다음 단계(맨 아래 한 줄만 임시)
*/
/* ── 한 구역 = 화면 한 장. 붙는 스크롤(스냅)은 버벅여서 뺐다 (2026-09-10) ── */
.screen{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;padding-top:72px;padding-bottom:28px}
.screen.wrap{padding-top:72px;padding-bottom:28px}
.screen>.wrap{width:100%;min-width:0}
.hero.screen,.owner.screen,.about-s.screen,.tour.screen{padding-top:0;padding-bottom:0}
.hero.screen{height:100dvh}

/* 첫판: 화면 전체를 사진(영상) 자리가 채우고, 글은 위에 얹힌다 */
.hero{position:relative;color:#fff;display:block}
.hero .bg{position:absolute;inset:0}
.hero .bg .slot{position:absolute;inset:0;font-size:12px;color:#8C8378;align-items:flex-start;padding-top:30vh}
.hero .bg img,.hero .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(59,18,25,.4) 0%,rgba(59,18,25,.08) 35%,rgba(59,18,25,.8) 100%),linear-gradient(90deg,rgba(59,18,25,.4),transparent 60%)}
.hero .rails{position:absolute;inset:0;pointer-events:none}
.hero .rails i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.14)}
.hero .rails i:nth-child(1){left:48px}.hero .rails i:nth-child(2){left:50%}.hero .rails i:nth-child(3){right:48px}
.hero .in{position:absolute;inset:0;padding:0 48px 56px;display:flex;flex-direction:column;justify-content:flex-end}
.hero .eyebrow{color:#D9D1C6}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(96px,15vw,220px);line-height:.86;letter-spacing:.02em;margin:0 0 22px -6px}
.hero h1 i{display:block;font-style:italic;font-size:.42em;letter-spacing:0;margin:10px 0 0 6px;color:#D9A3AD}
.hero .bottom{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end;border-top:1px solid rgba(255,255,255,.18);padding-top:26px}
.hero .bottom p{font-size:17px;line-height:1.7;color:#E6D8D6;max-width:560px}
.hero .next{justify-self:end;display:flex;align-items:center;gap:22px;background:rgba(59,18,25,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);padding:10px 10px 10px 22px;border-radius:999px}
.hero .next small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#C9B3B6;margin-bottom:2px}
.hero .next b{font-size:15px;font-weight:600}
.hero .corner{position:absolute;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#C9B3B6}
.hero .corner.tl{left:48px;top:96px}.hero .corner.tr{right:48px;top:96px}

/* 소개: 왼쪽 큰 문장, 오른쪽 문단 + 숫자 3개 */
.about-s{justify-content:flex-start}
.about-s .marquee{flex:none;margin-top:0}
.about{flex:1;display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center;padding-top:20px;padding-bottom:40px}
.about .big{font-family:var(--serif);font-weight:500;font-size:clamp(40px,4.4vw,62px);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.about .nums{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:34px;padding-top:24px;gap:20px}
.about .nums b{display:block;font-family:var(--serif);font-size:clamp(32px,3vw,46px);white-space:nowrap;line-height:1;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.about .nums small{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);display:block;margin-top:8px}

/* 믿을 수 있는 이유: 숫자 4칸 + 자격·행사 사진 띠 */
.trust{padding:0 48px}
.trust .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:26px 0 28px}
.trust .facts div{border:1px solid var(--line);border-radius:22px;padding:22px 24px;background:rgba(255,255,255,.4)}
.trust .facts b{display:block;font-family:var(--serif);font-size:clamp(26px,2.6vw,38px);color:var(--ink);line-height:1.1;margin-bottom:8px;font-weight:500;white-space:nowrap}
.trust .facts span{font-size:13.5px;color:var(--sub);line-height:1.5;display:block}
.trust .strips{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.trust .strip-h{min-width:0}
.trust .strip-h small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.trust .row{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.trust .rtrack{display:flex;gap:12px;width:max-content;animation:belt 90s linear infinite;will-change:transform;padding-bottom:6px}
.trust .row:hover .rtrack{animation-play-state:paused}
.trust .strip-h:last-child .rtrack{animation-duration:140s}
.trust figure{flex:none;width:150px;margin:0}
.trust figure img{width:150px;height:106px;object-fit:cover;border-radius:12px;display:block;background:#fff;box-shadow:0 0 0 1px var(--line)}
.trust figure.ev img{height:150px}
.trust figcaption{font-size:11px;color:var(--sub);line-height:1.4;margin-top:6px}

/* 시술 이력: 사진 띠가 계속 돈다. 마우스를 올리면 멈춤 */
.works{padding:0}
.works .head{display:flex;justify-content:space-between;align-items:end;gap:32px;padding:0 48px;margin-bottom:30px}
.works .belt{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.works .track{display:flex;gap:18px;width:max-content;animation:belt 220s linear infinite;will-change:transform}
.works .belt:hover .track{animation-play-state:paused}
@keyframes belt{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.works .track{animation-duration:300s}}
.works .card{flex:none;width:calc(min(43dvh,420px)*.8)}
.works .card .slot{border-radius:20px;height:min(43dvh,420px)}
.works .card .cap{font-size:12.5px;color:var(--sub);margin-top:8px;padding-left:4px}
.works .tag{position:absolute;left:14px;top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:rgba(243,240,234,.9);color:var(--ink);padding:5px 10px;border-radius:999px;z-index:2}

/* 영상: 어두운 구역, 큰 화면 + 작은 2개 */
.video{padding:0 48px}
.video .grid{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:14px;margin-top:30px;height:min(56dvh,620px)}
.video .grid .slot{border-radius:22px}

/* 과정: 4단 가로, 큰 세리프 번호 */
.process{padding:0 48px} /* 그레이 구역 */
.process .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px;border-top:1px solid var(--line)}
.process .step{padding:36px 28px 36px 0;border-right:1px solid var(--line)}
.process .step:last-child{border-right:0}
.process .step .n{font-family:var(--serif);font-size:64px;line-height:1;color:var(--copper);margin-bottom:26px;font-weight:500}
.process .steps{border-top-color:rgba(58,52,50,.18)}.process .step{border-right-color:rgba(58,52,50,.18)}
.process .step b{display:block;font-size:18px;margin-bottom:8px}
.process .step p{font-size:14.5px;color:var(--sub);line-height:1.7}

/* 오너: 왼쪽 작은 액자 사진(화면 높이의 62%까지), 오른쪽 인용 — 2026-09-11 「사진 너무 크다」 반영 */
.owner{padding:0 48px;display:grid;grid-template-columns:minmax(260px,34%) 1fr;gap:72px;align-items:center}
.owner .pic{justify-self:end;width:100%;max-width:400px}
.owner .slot{width:100%;height:auto;aspect-ratio:3/4;max-height:62dvh;border-radius:24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.owner .txt{padding:40px 0;display:flex;flex-direction:column;justify-content:center;max-width:640px}
.owner .txt p.q{font-family:var(--serif);font-size:clamp(28px,2.8vw,40px);line-height:1.3;font-weight:500;margin-bottom:30px}
.owner .who{font-size:13.5px;color:#C9B3B6}
.owner .who .sign{display:block;height:64px;width:auto;max-width:280px;margin:0 0 10px -6px;opacity:.95}.owner .who b{display:block;color:#fff;font-size:18px;font-family:var(--serif);letter-spacing:.06em;margin-bottom:2px}

/* 시술 종목: 분류 3열, 이름만. 자세한 건 시술 페이지 */
.menu{padding:0 48px}
.menu .head{display:flex;justify-content:space-between;align-items:end;gap:32px}
.menu .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.menu .cat{border:1px solid var(--line);border-radius:24px;padding:22px 24px 6px;background:rgba(255,255,255,.4)}
.menu .cat .ch{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu .cat .ch b{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--ink);line-height:1}
.menu .cat .ch small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.menu .it{display:grid;grid-template-columns:1fr 32px;grid-template-areas:'nm go' 'en go';align-items:center;column-gap:14px;row-gap:2px;padding:min(1.4dvh,12px) 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
.menu .it:last-child{border-bottom:0}
.menu .it:hover{padding-left:8px}
.menu .it .nm{grid-area:nm;font-size:16px;font-weight:600;color:var(--text)}
.menu .it .nm .rec{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin-left:8px;vertical-align:middle}
.menu .it .en{grid-area:en;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.menu .it .go{grid-area:go;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--sub);transition:background .5s var(--ease),color .5s var(--ease)}
.menu .it:hover .go{background:var(--copper);color:#fff;border-color:var(--copper)}
.menu .edu{margin-top:16px;border:1px solid var(--line);border-radius:22px;padding:16px 24px;background:var(--copper-soft)}
.menu .edu a{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.menu .edu b{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink)}
.menu .edu .en{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}

/* 투어 띠: 도시 칩 + 큰 단추 → 예약 페이지 */
.tour{padding:0;justify-content:space-between}
.tour .tour-in{text-align:center;padding:90px 48px 30px;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
.tour footer{padding:26px 48px 22px}
.tour footer .big{font-size:clamp(40px,5vw,72px)}
.tour footer .fine{margin-top:16px}
.tour .chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:28px 0 34px}
.tour .chip{padding:14px 20px;border-radius:18px;border:1px solid var(--line-d);font-size:14px;line-height:1.4;text-align:left;transition:border-color .5s var(--ease)}
.tour .chip:hover{border-color:#fff}
.tour .chip b{display:block;font-size:17px}.tour .chip .left{color:#D9A3AD}
.tour .ctas{display:flex;flex-wrap:wrap}

@media(max-width:900px){.about,.hero .bottom,.owner,.video .grid,.menu .cats,.trust .strips{grid-template-columns:1fr}.trust .facts{grid-template-columns:1fr 1fr}.process .steps{grid-template-columns:1fr 1fr}.hero .next{justify-self:start}.nav .links a:not(.pill){display:none}}

/* 접수 기간 밖 도시 — 흐리게, 누르면 투어 일정으로 */
.tour .chip.off{opacity:.55}

/* 다음 투어 단추 — 첫판을 지나면 오른쪽 아래에 고정 */
.next.float{position:fixed;display:flex;align-items:center;gap:22px;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:12px 12px 12px 22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);right:22px;bottom:22px;z-index:40;justify-self:auto;box-shadow:0 18px 50px rgba(30,10,14,.35);background:rgba(59,18,25,.82);transition:transform .5s var(--ease),opacity .5s var(--ease)}.next.float b{transition:opacity .7s var(--ease),transform .7s var(--ease)}.next.float b.sw{opacity:0;transform:translateY(6px)}
.next.float small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#C9B3B6;margin-bottom:2px}.next.float b{font-size:15px;font-weight:600}
.next.float.from{transform:translateY(24px);opacity:0}
.next.float b{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.next.float{left:14px;right:14px;bottom:14px;justify-content:space-between}.next.float b{max-width:none;white-space:normal}}