/* 홈(메인) 개편 2026-10-20 — index.html 전용. 미리보기에서 확정한 규칙을 순서대로 모음 */
/* 첫 화면: 높이 줄이고 필기체 대신 띄어 쓴 대문자, 영상 버튼 뺌 */
.hero{min-height:68svh}
.hero__content{padding-top:120px;padding-bottom:64px}
.hero__eyebrow{margin-bottom:22px}
.hero__title{font-size:clamp(40px,6vw,76px)}
.hero__title .script{font-family:var(--display);font-size:13px;letter-spacing:.6em;text-transform:uppercase;margin-top:22px;color:var(--gold-light)}
.hero__sub{margin:30px auto 12px}
.hero__desc{margin-bottom:34px}
.hero__film,.hero__scroll{display:none!important}
/* 첫 화면 아래가 다음 칸 바탕색으로 서서히 번지게 */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:200px;background:linear-gradient(to bottom,rgba(250,246,242,0) 0%,rgba(250,246,242,.6) 60%,var(--cream) 100%);pointer-events:none;z-index:0}
/* 라운지 소개: 왼쪽 사진 자리에 영상 */
.split--film{grid-template-columns:1.25fr 1fr}
.split__media.film{padding:0}
.split--film .film__caption{color:var(--muted)}
@media (max-width:900px){.split--film{grid-template-columns:1fr}}

.split--film{display:block}
.split--film .split__media{margin-bottom:64px}
.split--film .split__media::before{display:none}
.split--film .split__body{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,96px);align-items:start}
.split--film .split__body>*{grid-column:1}
.split--film .split__body .feature-list{grid-column:2;grid-row:1 / span 5;margin-top:0}
@media (max-width:900px){.split--film .split__body{display:block}}

.feature-list li{grid-template-columns:1fr}
.feature-list li::before{display:none}
.welcome{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,88px);align-items:center}
.welcome__img{aspect-ratio:4/5;background-size:cover;background-position:center top}
.welcome__item{border-top:1px solid var(--line);padding:18px 0}
.welcome__item small{display:block;color:var(--muted);font-size:13px;letter-spacing:.05em}
.welcome__item strong{display:block;font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink);margin:4px 0}
.welcome__item span{font-size:14px;color:var(--muted)}
.welcome__item s{opacity:.7;margin-right:6px}
.welcome__note{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin:0 0 26px}
@media (max-width:900px){.welcome{grid-template-columns:1fr}}

.feature-list .promise-head{margin-bottom:-6px}

.split--film .split__body{grid-template-rows:auto auto auto 1fr auto}
.split--film .split__body>.eyebrow{grid-row:1}
.split--film .split__body>.section-title{grid-row:2}
.split--film .split__body>.lead{grid-row:3}
.split--film .split__body>.link-more{grid-row:5;align-self:end;justify-self:start;margin-bottom:0}
.split--film .split__body .feature-list{grid-row:1 / span 5;margin-bottom:0}
.split--film .split__body .feature-list li:last-child span{margin-bottom:0}

.promo2-sec{padding-block:clamp(56px,7vw,96px)}
.promo2{display:grid;grid-template-columns:1fr 1fr;background:var(--cream-2);min-height:340px}
.promo2__img{background-size:cover;background-position:center}
.promo2__body{padding:clamp(28px,4vw,52px)}
.promo2__title{font-family:var(--serif);font-weight:500;font-size:26px;margin:8px 0 22px;color:var(--ink)}
.promo2__offers{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.promo2__offers small{display:block;font-size:12.5px;color:var(--muted)}
.promo2__offers strong{display:block;font-family:var(--display);font-weight:400;font-size:40px;line-height:1.2;color:var(--ink)}
.promo2__offers strong em{font-style:normal;font-size:.5em;letter-spacing:.1em;color:var(--gold)}
.promo2__offers span{font-size:13px;color:var(--muted)}
.promo2__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
@media (max-width:900px){.promo2{grid-template-columns:1fr}.promo2__img{height:220px}}

/* 브랜드: 제목은 왼쪽, 소개 글은 오른쪽 */
#brands .section-head{display:grid;grid-template-columns:1fr 1fr;gap:24px 80px;align-items:end;text-align:left;margin-bottom:48px}
#brands .section-head .eyebrow{grid-column:1/-1;justify-content:flex-start}
#brands .section-head .eyebrow::before,#brands .section-head .eyebrow::after{display:none}
#brands .section-head .section-title{margin:0}
#brands .section-head .lead{margin:0;max-width:none;font-size:15px}
/* 카드: 사진은 깨끗하게, 글은 사진 아래 */
.brand-grid{gap:28px;counter-reset:b}
.brand-card{aspect-ratio:auto;overflow:visible;background:none;color:var(--ink)}
.brand-card::before,.brand-card::after{display:none}
.brand-card__img{position:relative;inset:auto;display:block;aspect-ratio:4/5;transition:filter .6s var(--ease)}
.brand-card:hover .brand-card__img{transform:none;filter:brightness(1.06)}
.brand-card__body{position:static;padding:20px 0 0}
.brand-card__en{color:var(--gold);font-size:11px;letter-spacing:.28em;margin-bottom:10px}
.brand-card__en::before{counter-increment:b;content:"0" counter(b);margin-right:14px;color:var(--muted)}
.brand-card__ko{color:var(--ink);font-size:21px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:12px}
.brand-card__ko::after{content:"→";font-family:var(--display);color:var(--gold);transition:transform .4s var(--ease)}
.brand-card:hover .brand-card__ko::after{transform:translateX(6px)}
.brand-card__short{color:var(--muted);opacity:1;margin-top:10px;font-size:13.5px}
@media (max-width:900px){#brands .section-head{grid-template-columns:1fr}.brand-grid{grid-template-columns:1fr 1fr;gap:20px}}

/* 한 장의 종이: 밝은 칸은 모두 같은 크림색, 칸 사이 간격은 조금 줄임 */
main .section:not(.section--brown), .section--cream2, .section--white { background: var(--cream) !important; }
main .section:not(.section--brown) { padding-block: clamp(64px, 8vw, 112px); }
.promo2 { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 브랜드 카드 엇갈려 배치 (2·4번째를 아래로) */
@media (min-width: 901px) {
  .brand-grid { align-items: start; padding-bottom: 56px; }
  .brand-grid .brand-card:nth-child(even) { margin-top: 56px; }
}
/* 마지막 예약 칸은 크림색에서 진한 갈색으로 번지며 시작 → 푸터까지 하나로 */
.reserve { position: relative; padding-top: clamp(140px, 14vw, 200px) !important; }
.reserve::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px;
  background: linear-gradient(to bottom, var(--cream) 0%, rgba(61,39,21,0) 100%); pointer-events: none; }
.footer { background: var(--brown-deep); }

/* 영상: 스크롤하면 작은 창에서 화면 가득 커짐 */
.film2{position:relative;height:200vh;background:var(--cream)}
.film2__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.film2__box{position:absolute;inset:0;clip-path:inset(16% 20% 16% 20%);will-change:clip-path}
.film2__box video{width:100%;height:100%;object-fit:cover;display:block}
.film2__sound{position:absolute;z-index:2;right:max(24px,calc((100vw - 1200px)/2));bottom:8vh;background:rgba(40,25,14,.35);border:1px solid rgba(255,255,255,.7);color:#fff;padding:10px 18px;font-family:var(--display);letter-spacing:.2em;font-size:12px;cursor:pointer}
@media (max-width:900px){.film2{height:auto}.film2__sticky{position:static;height:62vh}.film2__box{clip-path:none}}
/* 팝업: 이미지만, 오른쪽에 초록 책갈피 */
.pop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(20,15,12,.6);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.pop.on{opacity:1;visibility:visible}
.pop__box{position:relative;width:min(460px,86vw);transform:translateY(28px);transition:transform .6s var(--ease)}
.pop.on .pop__box{transform:none}
.pop__box img{width:100%;height:auto;display:block;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.pop__tab{position:absolute;top:84px;right:-46px;width:46px;padding:26px 0 22px;background:#03c75a;color:#fff;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:4px 6px 18px rgba(0,0,0,.3);transition:transform .3s var(--ease)}
.pop__tab::after{content:"";position:absolute;left:0;right:0;bottom:-14px;border-left:23px solid #03c75a;border-right:23px solid #03c75a;border-bottom:14px solid transparent}
.pop__tab::before{content:"N";font-family:Georgia,serif;font-weight:700;font-size:18px}
.pop__tab span{writing-mode:vertical-rl;font-size:13px;letter-spacing:.2em;font-weight:500}
.pop__tab:hover{transform:translateX(4px)}
.pop__x{position:absolute;top:-40px;right:0;background:none;border:0;color:#fff;font-size:18px;cursor:pointer;padding:6px}
.pop__today{position:absolute;left:0;bottom:-36px;color:rgba(255,255,255,.85);font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer}
.pop-badge{position:fixed;left:24px;bottom:28px;z-index:90;background:#03c75a;color:#fff;border:0;padding:12px 18px;font-size:13px;letter-spacing:.04em;cursor:pointer;display:none;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.pop-badge.on{display:block}
@media (max-width:900px){.pop__box{width:min(360px,78vw)}.pop__tab{right:-40px;width:40px}.pop__tab::after{border-left-width:20px;border-right-width:20px}.pop-badge{left:16px;bottom:90px}}

/* 머리글: 로고는 왼쪽, 메뉴·언어·예약 문의는 모두 오른쪽 */
.header__inner{justify-content:flex-start;gap:40px}
.logo{margin-right:auto}
.nav{gap:30px}
.header__cta{margin-left:4px}
@media (max-width:1180px){.nav{gap:20px}.nav__link{letter-spacing:.16em;font-size:13px}}

/* 머리글만 1200px 상자에서 꺼내 창 양 끝에 붙임 */
.header .container{max-width:none;width:100%;padding-inline:clamp(20px,2.6vw,44px)}
.header--transparent:not(.is-scrolled):not(.is-open) .header__inner::after{left:0;right:0}

/* 본문도 1200px 상자를 풀고 창 폭 전체 사용 (양 끝 여백만 둠) */
:root{--pad:clamp(20px,4vw,72px)}
.container{max-width:none;padding-inline:var(--pad)}
.header .container{padding-inline:clamp(20px,2.6vw,44px)}
.container--narrow{max-width:none}
.film2__sound{right:auto;left:var(--pad)}
/* 넓어진 만큼 글 줄이 너무 길어지지 않게 */
.lead{max-width:62ch}
#brands .section-head{gap:24px 10vw}
.split--film .split__body{column-gap:8vw}
.loc-grid{gap:6vw}
.brand-grid{gap:2vw}
.footer .container{padding-inline:var(--pad)}

/* 상담 신청 폼: 처음엔 이름·연락처만, 이름 칸을 누르면 나머지가 열림 */
.lead-form.is-folded > *:not(.form__title):not(.form__sub):not(.form__fold-hint):not(.form__row--keep){display:none}
.form__fold-hint{font-size:12.5px;color:var(--gold-light);margin:-6px 0 14px}
.lead-form:not(.is-folded) .form__fold-hint{display:none}
.lead-form .form__row, .lead-form .field, .lead-form .check, .lead-form .form__submit{animation:up .6s var(--ease) both}

.hero::after{display:none}.hero__film,.hero__scroll{display:none!important}@keyframes up{to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.reveal-up{animation:none;opacity:1;transform:none}}
.hero--b{min-height:100svh;display:grid;grid-template-columns:42% 1fr;background:var(--brown-deep)}
.hero-b__panel{padding:clamp(120px,16vh,170px) clamp(28px,4vw,72px) clamp(56px,8vh,90px);display:flex;flex-direction:column;justify-content:center;text-align:left;color:#fff}
.hero--b .hero__eyebrow{color:var(--gold-light);opacity:1;margin-bottom:26px}
.hero-b__title{font-family:var(--display);font-weight:400;font-size:clamp(44px,5.2vw,78px);letter-spacing:.18em;line-height:1;margin:0}
.hero-b__title small{display:block;font-size:12px;letter-spacing:.6em;text-transform:uppercase;color:var(--gold-light);margin-top:22px}
.hero-b__sub{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.5;margin:40px 0 14px}
.hero-b__desc{font-size:14.5px;opacity:.8;margin:0 0 36px}
.hero--b .hero__actions{justify-content:flex-start}
.hero--b .btn--outline{border-color:rgba(255,255,255,.6);color:#fff}
.hero-b__img{position:relative;overflow:hidden}
.hero-b__img .hero__bg::after{background:linear-gradient(90deg,rgba(61,39,21,.35),rgba(61,39,21,0) 30%)}
.header--transparent:not(.is-scrolled):not(.is-open) .header__inner::after{display:none}
.reveal-up{opacity:0;transform:translateY(26px);animation:up 1.1s var(--ease) forwards}
@media (max-width:900px){.hero--b{grid-template-columns:1fr}.hero-b__img{min-height:46vh;order:-1}.hero-b__panel{padding-top:40px}}

/* 글자색 바로잡기 */
.hero-b__title,.hero-b__sub,.hero-b__panel .hero__eyebrow{color:#fff}
.hero-b__title small{color:var(--gold-light)}
/* 얼굴이 안 보이게: 사진을 오른쪽으로 밀고, 왼쪽 가장자리를 패널 색으로 녹임 */
.hero-b__img .hero__bg{background-position:78% center;transform:none;animation:none}
.hero-b__img .hero__bg::after{background:linear-gradient(90deg,var(--brown-deep) 0%,rgba(61,39,21,.75) 22%,rgba(61,39,21,.2) 48%,rgba(61,39,21,0) 70%),linear-gradient(0deg,rgba(61,39,21,.35) 0%,rgba(61,39,21,0) 35%)}
/* 소요한남식: 첫 화면은 제자리에 붙어 있고, 다음 내용이 그 위로 올라오며 덮음 */
.hero--b{position:sticky;top:0;z-index:0;overflow:hidden}
.hero-b__veil{position:absolute;inset:0;background:var(--brown-deep);opacity:0;pointer-events:none;z-index:3}
main > *:not(.hero){position:relative;z-index:1}
main > .section:not(.section--brown){background:var(--cream)}
.hero-b__scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;color:#fff;font-family:var(--display);letter-spacing:.3em;font-size:11px;opacity:.8}
.hero-b__scroll::after{content:"";display:block;width:1px;height:44px;background:#fff;margin:10px auto 0;animation:scrollLine 2s infinite;transform-origin:top}
@media (max-width:900px){.hero--b{position:relative}}

.pop-badge{display:none!important}

/* 2026-10-20 보정: SOUND 단추를 왼쪽 아래로 (오른쪽 아래 상담 버튼과 겹치지 않게) */
.film2__sound{right:auto;left:var(--pad);bottom:7vh}

/* 2026-10-20 보정: 휴대폰에서도 첫 화면 커튼 효과 유지 (사진·글이 흐르는 움직임만 끔) */
@media (max-width:900px){.hero--b{position:sticky;top:0}.hero-b__scroll{display:none}}

/* 2026-10-20 보정: 휴대폰에서도 첫 화면 사진에 얼굴이 안 보이게 (오른쪽 끝 부분만, 아래는 패널 색으로 녹임) */
@media (max-width:900px){
  .hero-b__img{min-height:52vh}
  .hero-b__img .hero__bg{background-position:100% 45%}
  .hero-b__img .hero__bg::after{background:linear-gradient(0deg,var(--brown-deep) 0%,rgba(61,39,21,.55) 28%,rgba(61,39,21,0) 60%),linear-gradient(90deg,rgba(61,39,21,.7) 0%,rgba(61,39,21,0) 45%)}
}
@media (max-width:900px){.hero-b__img .hero__bg{background-size:auto 150%;background-position:100% 30%}}

/* ===== 2026-10-20 저녁 보정 (수지 님 폰 확인 후) ===== */
/* 첫 화면: PC에서 확정한 대로 사진 없이 진갈색 패널만 — 휴대폰도 같게 */
.hero-b__img{display:none!important}
.hero--b{grid-template-columns:1fr}
.hero-b__panel{max-width:1100px}
@media (max-width:900px){
  .hero--b{min-height:100svh}
  .hero-b__panel{min-height:100svh;padding:110px 20px 80px;justify-content:center}
  .hero-b__scroll{display:block}
  /* 영상: 휴대폰에서도 스크롤하면 커지는 효과 */
  .film2{height:170vh}
  .film2__sticky{position:sticky;top:0;height:100svh}
  .film2__box{clip-path:inset(12% 10% 12% 10%)}
  /* 푸터: 링크 묶음을 세 칸으로 나란히 (한 줄로 길게 늘어지지 않게) */
  .footer__grid{grid-template-columns:repeat(3,1fr);gap:26px 14px;margin-bottom:36px}
  .footer__grid > :first-child{grid-column:1/-1}
  .footer h4{font-size:11px;letter-spacing:.22em;margin-bottom:10px}
  .footer__grid li{font-size:12.5px;line-height:1.5;margin-bottom:7px;overflow-wrap:anywhere}
}
/* 자동 재생이 막혔을 때 보이는 재생 단추 */
.film2__play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(40,25,14,.55);border:1px solid rgba(255,255,255,.8);color:#fff;padding:14px 26px;font-family:var(--display);letter-spacing:.2em;font-size:13px;cursor:pointer;backdrop-filter:blur(4px)}

/* 2026-10-20 보정 2: 휴대폰 첫 화면 — 로고 바로 아래 영문(BEAUTY·REST·BALANCE / MINISH / LOUNGE·CHEONGDAM)은 빼고 한글 문구부터, SCROLL 표시 제거 */
@media (max-width:900px){
  .hero--b .hero__eyebrow,.hero-b__title{display:none}
  .hero-b__panel{min-height:92svh;padding:120px 20px 64px;justify-content:center}
  .hero-b__sub{margin:0 0 16px;font-size:clamp(26px,7.6vw,32px);line-height:1.45}
  .hero-b__desc{margin-bottom:30px}
  .hero-b__scroll{display:none}
}

/* 2026-10-20 보정 3: 고객과의 약속 — 제목과 내용 구분, 항목 사이 선 */
.feature-list{gap:0}
.feature-list li:not(.promise-head){padding:18px 0;border-top:1px solid var(--line)}
.feature-list li:last-child{border-bottom:1px solid var(--line)}
.feature-list .promise-head{margin-bottom:6px}
.feature-list b{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.feature-list span{color:var(--muted);font-size:14px;line-height:1.75}
@media (max-width:900px){
  /* 브랜드 카드 2×2: 이름이 두 줄로 꺾여 줄이 안 맞던 것 → 한 줄로 */
  .brand-grid{align-items:start;gap:28px 14px}
  .brand-card__en{font-size:9.5px;letter-spacing:.18em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-card__en::before{margin-right:8px}
  .brand-card__ko{font-size:17px;white-space:nowrap;padding-bottom:10px}
  .brand-card__short{font-size:12.5px}
  /* 약속 목록과 VIEW MORE 사이 간격 */
  .split--film .split__body .feature-list{margin:26px 0 0}
  .split--film .link-more{display:inline-block;margin-top:36px}
}

/* 2026-10-20 보정 4: 휴대폰 머리글에도 언어 전환(국기) 표시 — 로고를 조금 줄여 자리를 냄 */
@media (max-width:900px){
  .header__cta .lang{display:flex;gap:0;margin-right:2px}
  .header__cta .lang__flag{padding:3px}
  .header__cta .lang__flag .flag{width:18px;height:12px}
  .header__cta .lang__flag{opacity:.7}
  .header__cta .lang__flag.is-active{opacity:1}
  .burger{width:38px;padding:7px 4px}
  .logo__main{font-size:19px;letter-spacing:.26em}
  .logo__script{font-size:15px}
  .logo__place{font-size:8px;letter-spacing:.26em}
  .header__inner{gap:10px}
}

/* 2026-10-22 휴대폰 보정 (수지 님 요청) */
@media (max-width:900px){
  /* 프로모션 팝업: 화면을 덜 가리게 줄임 (세로가 짧은 화면도 고려) */
  .pop__box{width:min(280px,68vw);width:min(280px,68vw,43svh)}
  .pop__tab{top:60px;right:-36px;width:36px;padding:20px 0 18px;gap:8px}
  .pop__tab::after{border-left-width:18px;border-right-width:18px}
  .pop__tab::before{font-size:16px}
  .pop__tab span{font-size:12px;letter-spacing:.14em}
  .pop__x{top:-36px}
  .pop__today{bottom:-32px;font-size:12px}
  /* 영상: 세로 화면을 꽉 채우느라 좌우가 잘리던 것 → 가로 16:9 그대로 가운데에 (스크롤하면 커지는 효과는 유지) */
  .film2{height:140vh}
  .film2__box{inset:auto 0;top:50%;height:auto;aspect-ratio:16/9;transform:translateY(-50%)}
  .film2__sound{bottom:auto;top:calc(50% + 28.125vw + 16px)}
}
@media (max-width:900px) and (orientation:landscape){
  /* 휴대폰을 가로로 돌리면 화면을 채움 */
  .film2__box{inset:0;top:0;height:100%;aspect-ratio:auto;transform:none}
  .film2__sound{top:auto;bottom:7vh}
}