/* lumierejeanne.com 실측 클론 — 스테이지 1265px, 좌표는 모두 원본 실측값입니다. */
:root{
  --vwpx:calc(var(--vw,1265) * 1px);
  --green:#0a3c19;
  --navy:#22336f;
  --cream:#fdf9f6;
  --sand:#f0ece6;        /* Thalac·예약·푸터 배경 */
  --mint:#f4f7f5;        /* Mary Cohr 배경 = 흰색 위 rgba(10,60,25,.08) */
  --grey:#67645d;
  --grey2:#666460;
  --brown:#826f64;
  --deep:#214334;
  --ink:#313130;
  --serif:'Cormorant Garamond',Georgia,serif;      /* Adobe Caslon 대체 */
  --display:'Fraunces',Georgia,serif;
  --sans:'Questrial',sans-serif;
  --mono:'Azeret Mono',monospace;
  --kr:'Noto Sans KR',sans-serif;
  --helv:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:170px}
body{font-family:var(--kr);color:#000;background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}


.sec,.band,.spacer,footer{
  --kk:min(var(--k,1),var(--kmax,99));
  position:relative;width:1265px;margin-left:calc((var(--vwpx) - 1265px) / 2);overflow:hidden;
  transform:scale(var(--kk));transform-origin:top center;
  margin-bottom:calc(var(--h,0px) * (var(--kk) - 1));
}
.abs{position:absolute}


.wide{--pad:calc((var(--vwpx) / var(--kk) - 1265px) / 2);
  box-sizing:border-box;overflow:visible;
  margin-left:calc((var(--vwpx) - var(--vwpx) / var(--kk)) / 2);
  width:calc(var(--vwpx) / var(--kk));
  border-left:var(--pad) solid transparent;border-right:var(--pad) solid transparent}
.wide>.bleed{left:calc(-1 * var(--pad));width:calc(var(--vwpx) / var(--kk));max-width:none}

.hero{--h:875px}
.intro{--h:717px}
.cards{--h:553px}
.duo{--h:1300px}
.thalac{--h:1148px}
.feats{--h:909px;--kmax:1.194}
.band-1{--h:675px;--kmax:1.253}
.mc{--h:1899px;--kmax:1.228}
.mcj{--h:741px;--kmax:1}
.rest{--h:1254px}
.space-sec{--h:885px;--kmax:1.252}
.price-sec{--h:1595px;--kmax:1.253}
.bookrow{--h:840px}
.spacer{--h:466px;--kmax:1.253}
.band-2{--h:417px}
/* 콜라주만 최소높이 830px + 이후 폭의 62.28% 규칙이라 배율을 따로 씁니다. */
/* 콜라주 높이만 화면 폭에 따라 다릅니다(원본 실측 2점에 맞춘 식). */
.collage{--h:calc(746.5px + 79445px / var(--vw,1265))}
.review-sec{--h:862px;--kmax:1.253}
.band-3{--h:376px}
footer{--h:884px}

/* ================= 헤더 (168px) ================= */
/* 헤더는 sticky 라서 바깥은 두고 안쪽만 확대합니다. */
/* 맨 위에서는 흰색 80%, 스크롤하면 50%로 0.3s ease 전환됩니다. */
/* 원본처럼 맨 위에서는 완전히 투명해 히어로 사진이 헤더 뒤로 그대로 비칩니다.
   스크롤하면 흰색 50% + 블러로 0.3s ease 전환됩니다. */
header{--kk:min(var(--k,1),1.256);position:sticky;top:0;z-index:100;
  height:calc(168px * var(--kk));background-color:transparent;
  transition:background-color .3s ease,backdrop-filter .3s ease}
header.scrolled{background-color:rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.hd{position:relative;width:1265px;height:168px;margin-left:calc((var(--vwpx) - 1265px) / 2);
  transform:scale(var(--kk));transform-origin:top center}
/* 원본 로고 서체는 Caslon 세미볼드입니다. 대체 서체는 600 으로 맞춥니다. */
.hd .logo{position:absolute;left:646px;top:32px;translate:-50% 0;white-space:nowrap;
  font-family:var(--serif);font-weight:700;-webkit-text-stroke:.42px currentColor;
  font-size:24px;line-height:41px;letter-spacing:9.05px;text-align:center;color:var(--green)}
/* 메뉴는 실측한 중심선에 맞춰 가운데 정렬합니다(줄바꿈 금지). */
.hd a.nv{position:absolute;translate:-50% 0;white-space:nowrap;text-align:center;
  font-size:11.5px;line-height:17px;color:var(--green)}
.hd a.nv:hover{opacity:.55}
.hd .n1{left:362px;top:94px}
.hd .n2{left:642px;top:94px}
.hd .n3{left:924px;top:94px}
.hd a.n4{left:364px;top:130px;font-family:Georgia,serif;color:var(--navy);line-height:14px}
.hd a.n5{left:642px;top:130px;font-family:var(--serif);line-height:14px}
.hd a.n6{left:923px;top:128px;font-weight:700}

/* ================= 히어로 (875px) ================= */
/* 사진은 헤더(168px) 뒤까지 올라가 페이지 맨 위부터 채웁니다 — 원본 실측 y=-59. */
.hero{height:875px;--bg:#fff;overflow:visible}
.hero .bg{position:absolute;left:0;top:-168px;width:1265px;height:1043px;overflow:hidden;
  animation:breathe 16s cubic-bezier(.39,.575,.565,1) infinite}
/* 이미지에 원본 크롭(fp_0.42_0.32, 1904×1659)이 이미 반영돼 있어 그대로 채웁니다. */
.hero .shot{position:absolute;left:0;top:-64px;width:1265px;height:1102px;
  object-fit:cover;opacity:.63;--comp-opacity:.63}
.hero .mark{position:absolute;left:356px;top:62px;width:579px;height:579px;object-fit:contain}
@keyframes breathe{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(0,10px,0)}
  75%{transform:translate3d(0,-10px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ================= 인트로 (741px) ================= */
/* 원본은 좁은 화면에서 본문이 741px 를 넘겨 다음 섹션과 겹칩니다.
   본문이 끝나는 852px 아래로 여유를 두어 940px 로 잡았습니다. */
/* 원본 실측: 섹션 717px, 본문 행간 24px. 세 요소 모두 한 줄로 흘러 상자 밖으로 넘칩니다. */
.intro{height:717px;--bg:#fff}
.intro .eyebrow{left:364px;top:134px;width:538px;text-align:center;white-space:nowrap;
  font-size:19.2px;line-height:23.1px;letter-spacing:1.92px;color:var(--grey)}
.intro h2{left:243px;top:181px;width:780px;text-align:center;white-space:nowrap;
  font-family:var(--serif);font-size:43.2px;line-height:38.9px;font-weight:400;
  letter-spacing:3.9px;color:var(--green)}
.intro .body{left:224px;top:292px;width:826px;text-align:center;white-space:nowrap;
  font-size:12px;line-height:14px;letter-spacing:1.6px;color:var(--grey)}
.intro .body p+p{margin-top:24px; }

/* ================= 3분할 카드 (553px) ================= */
.cards{height:553px;display:flex;--bg:#fff}
.cards .cell{position:relative;width:422px;height:553px;overflow:hidden;background:var(--green)}
.cards .cell:last-child{width:421px}
.cards .cell>img{width:100%;height:100%;object-fit:cover;transition:opacity .5s ease}
/* 마우스를 올리면 초록(#728F7C)이 덮이고 설명이 나타납니다. */
.cards .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0 78px 35px;text-align:center;color:#fff;background:rgba(114,143,124,0);transition:background .4s ease-in-out}
.cards .cell:hover .ov{background:#728f7c}
.cards .ov .mk{position:absolute;left:120px;top:169px;width:181px;height:121px;object-fit:cover}
.cards .ov p{font-size:16px;font-weight:400;line-height:26.1px;opacity:0;transition:opacity .4s ease-in-out}
.cards .cell:hover .ov p{opacity:1}
.cards .ov h3{font-family:var(--display);font-weight:700;font-size:30px;line-height:36px;margin-top:130px;
  transition:transform .3s ease-in-out}
.cards .cell:hover .ov h3{transform:translateY(-10px)}

/* ================= 듀오 갤러리 (1300px) ================= */
.duo{height:1300px;--bg:#fff}
.duo .g1{left:63px;top:342px;width:538px;height:603px;object-fit:cover}
.duo .g2{left:665px;top:342px;width:537px;height:603px;object-fit:cover}

/* ================= Thalac (1148px) ================= */
.thalac{height:1148px;--bg:var(--sand)}
.thalac .l1{left:516px;top:102px;width:232px;text-align:center;
  font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink)}
.thalac .l2{left:537px;top:138px;width:192px;
  font-family:var(--serif);font-size:65px;line-height:65px;color:var(--navy)}
.thalac .l3{left:304px;top:209px;width:656px;text-align:center;font-size:18px;line-height:27px}
.thalac .l3 .c1{font-family:var(--serif);color:var(--ink)}
.thalac .l3 .c2{font-family:var(--serif);color:var(--green)}
.thalac .l3 .c3{font-family:var(--display);font-weight:700;color:var(--ink)}
.thalac .shot{left:40px;top:294px;width:593px;height:854px;object-fit:cover;opacity:.75}
.thalac .clip{left:632px;top:294px;width:593px;height:855px;object-fit:cover}
.thalac .s1{left:162px;top:639px;width:337px;font-family:var(--sans);font-size:20px;line-height:20px;color:#fff}
.thalac .r1,.thalac .r2{--motion-clip-start:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}
.thalac .r1{left:151px;top:670px;width:350px;height:2px;--bg:#fff}
.thalac .r2{left:149px;top:811px;width:350px;height:2px;--bg:#fff}
.thalac .s2{left:147px;top:668px;width:358px;
  font-family:var(--serif);font-size:125.2px;line-height:125.2px;color:#fff}
.thalac .s3{left:147px;top:831px;width:358px;text-align:center;font-size:14px;line-height:22.4px;color:#fff}
.thalac .s3 p+p{margin-top:23px}

/* ================= 맞춤형 솔루션 3열 (909px) ================= */
.feats{height:909px;--bg:var(--sand)}
/* 섹션 transform 은 레이아웃 배율용이라, 등장 모션은 안쪽 래퍼가 받습니다. */
.feats .motion-wrap{position:absolute;inset:0}
.feats .cell{position:absolute;top:110px;width:297px}
.feats .cell img{width:297px;height:388px;object-fit:cover; border-radius: 15px;}
.feats .cell h3{margin-top:23px;font-family:var(--helv);font-size:13px;font-weight:700;color:var(--navy)}
.feats .cell p{margin-top:18px;font-family:var(--helv);font-size:12.5px;line-height:20px;color:var(--grey2)}
.feats .c1{left:147px}
.feats .c2{left:484px}
.feats .c3{left:821px}

/* ================= 영상 밴드 ================= */
.band{position:relative}
.band video,.band>img{position:absolute;top:0;left:0;width:1265px;height:100%;object-fit:cover}
.band-1{height:675px}
.band-2{height:417px;--bg:#fff}
.band-3{height:376px;--bg:var(--cream)}
/* 워터마크가 초록이라 영상은 옅게 깔립니다. */
.band-3 video{opacity:.45}
.band .mk{position:absolute;width:290px;height:194px;object-fit:contain}
.band-2 .mk{left:487px;top:103px}
.band-3 .mk{left:477px;top:94px}

/* ================= Mary Cohr (1899px) ================= */
.mc{height:1899px;--bg:var(--mint)}
.mc .lead-wrap{position:absolute;left:40px;top:-35px;width:1186px;height:431px}
.mc .logo{position:absolute;left:447px;top:8px;width:290px;height:194px;object-fit:contain}
.mc .lead{position:absolute;left:287px;top:219px;width:611px;text-align:center;font-size:15.4px;line-height:24.6px;color:#000}
.mc .lead p+p{margin-top:26px}
.mc figure{position:absolute}
.mc figure img{width:100%;object-fit:cover}
.mc figure figcaption{margin-top:22px;font-size:12.5px;line-height:17.5px;color:#000}
.mc .f1{left:40px;top:630px;width:329px}
.mc .f1 img{height:388px}
.mc .f2{left:506px;top:810px;width:293px}
.mc .f2 img{height:345px}
.mc .f3{left:894px;top:630px;width:332px}
.mc .f3 img{height:461px}
.mc .f4{left:40px;top:1312px;width:759px}
.mc .f4 img{height:453px}
.mc .f5{left:894px;top:1233px;width:330px}
.mc .f5 img{height:413px}

/* ================= Mary Cohr × LJ (741px) ================= */
/* 원본에서 이 섹션만 높이가 741px 고정이고 좌우는 화면 폭에 비례합니다. */
.mcj{height:741px;--bg:var(--mint)}
.mcj .clip{left:calc(var(--vwpx) * .5 / var(--kk) - var(--pad));top:0;
  width:calc(var(--vwpx) * .5 / var(--kk));height:741px;object-fit:cover;max-width:none}
.mcj .in{left:calc(var(--vwpx) * .0901 / var(--kk) - var(--pad));width:calc(var(--vwpx) * .3202 / var(--kk));
  top:50%;transform:translateY(-50%)}
.mcj .in img{width:36.5%;aspect-ratio:149/198;height:auto;margin:0 auto;object-fit:cover; border-radius: 15px;}
.mcj .in h2{margin-top:30px;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:calc(18px * var(--k,1));line-height:1.7;color:var(--green); letter-spacing: -2px;}
.mcj .in p{margin-top:22px;text-align:center;font-size:13px;line-height:20.8px;color:#000}
.mcj .in span {letter-spacing: -1px;}

/* ================= 쉼의 시간 (1254px) ================= */
.rest{height:1254px;--bg:#fff}
/* 원본은 두 줄이 한 덩어리(647px)입니다. 따로 두면 첫 줄이 접혀 겹칩니다. */
.rest .hgroup{left:309px;top:226px;width:647px;text-align:center;
  font-family:var(--sans);font-size:20px;color:var(--deep); }
.rest .hgroup p {font-weight: 200;}
.rest .hgroup .cas{font-family:var(--serif); letter-spacing: -1px; font-weight:700;}
.rest .i1{left:127px;top:350px;width:481px;height:559px;object-fit:cover}
.rest .i2{left:657px;top:350px;width:481px;height:559px;object-fit:cover}
.rest .caps{left:127px;top:923px;width:1011px;height:46px}
.rest .caps .cap{position:absolute;color:var(--grey)}
.rest .caps .ln{position:absolute;top:0;height:1px;background:rgba(103,100,93,.45)}
.rest .caps .vl{position:absolute;top:0;width:1px;height:46px;background:rgba(103,100,93,.45)}
.rest .caps .a{left:12px;top:16px;width:253px;font-size:12.5px;line-height:13.7px;letter-spacing:.65px}
.rest .caps .b{left:275px;top:11px;width:183px;font-size:10px;line-height:12px;letter-spacing:1px}
.rest .caps .c{left:542px;top:10px;width:210px;font-size:12.5px;line-height:13.7px;letter-spacing:.65px}
.rest .caps .d{left:769px;top:11px;width:232px;font-size:10px;line-height:12px;letter-spacing:1px}
.rest .caps .ln{--motion-clip-start:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}   /* 좌 → 우 */
.rest .caps .l2,.rest .caps .l4{--motion-clip-start:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)} /* 우 → 좌 */
.rest .caps .l1{left:0;width:254px}
.rest .caps .l2{left:252px;width:229px}
.rest .caps .l3{left:530px;width:229px}
.rest .caps .l4{left:758px;width:254px}
.rest .caps .v1{left:252px}
.rest .caps .v2{left:758px}

/* ================= 슬라이더 공용 ================= */
.slider{height:auto}
.big-serif{font-family:var(--serif);font-weight:400;font-size:65.3px;line-height:78.4px;color:var(--green);text-align:center}
.sw{position:absolute;overflow:hidden}
.sw .track{display:flex;gap:46px;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.sw .track img{flex:0 0 auto;object-fit:cover}
.snav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;
  border:0;background:rgba(255,255,255,.75);color:var(--green);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.snav:hover{background:#fff}
.snav.prev{left:8px}
.snav.next{right:8px}
.dots{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;justify-content:center}
.dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(10,60,25,.28);cursor:pointer}
.dots button[aria-current="true"]{background:var(--green)}

.space-sec{height:885px;--bg:#fff}
.space-sec h2{position:absolute;left:238px;top:8px;width:789px}
/* 원본 실측(1905px 화면): 큰 이미지 1483x598 raw. 이 섹션 배율은 1.252 로 묶여 있어
   CSS 값 = raw / 1.252 → 1184x478. 썸네일은 120x120 raw → 96px. */
.space-sec .sw{left:40px;top:115px;width:1184px;height:478px}
.space-sec .sw .track img{width:1184px;height:478px}
/* 원본은 점이 아니라 썸네일 9칸입니다 (115x115, 간격 9.6, 스트립 y=575). */
.space-sec .thumbs{position:absolute;left:3px;top:488px;width:927px;height:96px;
  display:flex;gap:7.9px}
.space-sec .thumbs button{width:96px;height:96px;padding:0;border:0;background:none;
  cursor:pointer;opacity:.45;transition:opacity .3s ease-in-out}
.space-sec .thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.space-sec .thumbs button[aria-current="true"],
.space-sec .thumbs button:hover{opacity:1}

.price-sec{height:1595px;--bg:#fff}
.price-sec h2{position:absolute;left:238px;top:46px;width:789px}
.price-sec .sw{left:40px;top:161px;width:1186px;height:1139px}
.price-sec .sw .track img{width:1186px;height:1139px;object-fit:contain}
.price-sec .dots{bottom:8px}

/* ================= 예약 안내 (840px) ================= */
.bookrow{height:840px;--bg:var(--sand)}
.bookrow .bride{left:0;top:0;width:633px;height:840px;object-fit:cover}
.bookrow .quote{left:684px;top:93px;width:458px;text-align:center;
  font-family:var(--serif);font-size:25px;line-height:45px;color:var(--grey)}
.bookrow .t1{left:684px;top:161px;width:458px;text-align:center;font-size:14px;line-height:22.4px;color:var(--grey)}
.bookrow .t2{left:684px;top:205px;width:458px;text-align:center;font-size:14px;line-height:22.4px;color:var(--grey)}
.bookrow .btn{left:797px;top:284px;width:234px;height:84px;text-align:center;display:flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff;border-radius:4.94px;font-size:18px;line-height:21.6px}
.bookrow .notice{left:808px;top:384px;width:212px;text-align:center;
  font-family:var(--sans);font-size:15px;line-height:15px;color:var(--green)}
.bookrow .ic{width:61px;height:61px;top:482px}
.bookrow .ic svg{width:100%;height:100%;display:block;fill:var(--green)}
.bookrow .lb{top:555px;font-size:13px;line-height:13px;color:var(--green);white-space:nowrap}
.bookrow .mk{left:171px;top:575px;width:290px;height:194px;object-fit:contain}

/* ================= 여백 / 콜라주 ================= */
.spacer{height:466px;--bg:#fff}
.collage{height:calc(746.5px + 79445px / var(--vw,1265));--bg:#fff}
.collage img{object-fit:cover}
.collage .c1{left:219px;top:52px;width:402px;height:246px}
.collage .c2{left:700px;top:88px;width:261px;height:175px}
.collage .c3{left:621px;top:323px;width:397px;height:247px}
.collage .c4{left:289px;top:359px;width:262px;height:175px}

/* ================= 리뷰 (862px) ================= */
.review-sec{height:862px;--bg:#fff}
.review-sec h2{position:absolute;left:238px;top:36px;width:789px}
.review-sec .sub{position:absolute;left:419px;top:149px;width:426px;text-align:center;
  font-family:var(--sans);font-size:13.4px;color:var(--green)}
/* 리뷰는 끊김 없이 왼쪽으로 흐릅니다(무한 롤링). */
.roll{position:absolute;left:0;top:248px;width:1265px;height:346px;overflow:hidden}
.roll .lane{display:flex;gap:25px;width:max-content;animation:roll 60s linear infinite}
.roll:hover .lane{animation-play-state:paused}
.roll img{height:346px;width:auto;flex:0 0 auto}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ================= 푸터 (884px) ================= */
footer{height:884px;--bg:var(--sand)}
footer .ft{left:50px;top:76px;width:709px;
  font-family:var(--serif);font-size:27.7px;line-height:47px;letter-spacing:8.3px;color:var(--green)}
footer .tel{left:50px;top:200px;font-family:var(--helv);font-size:30px;font-weight:400;
  -webkit-text-stroke:.5px currentColor;line-height:48px;color:var(--brown)}
footer .ad1{left:50px;top:254px;width:406px;font-size:14px;font-weight:700;line-height:22.4px;color:var(--green)}
footer .ad2{left:51px;top:298px;width:543px;font-size:14px;line-height:22.4px;color:var(--green)}
footer .btn{left:51px;top:425px;width:188px;height:40px;text-align:center;display:flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff;border-radius:4.94px;font-size:18px;line-height:21.6px}
footer .rule{--motion-clip-start:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);left:51px;top:545px;width:1164px;height:1px;background:rgba(10,60,25,.25)}
footer .copy{left:51px;top:845px;font-family:var(--mono);font-size:11.5px;color:var(--green)}
footer .map{left:633px;top:120px;width:582px;height:380px;background:#e9e6e0;position:absolute;overflow:hidden}
footer .map-open{left:633px;top:516px;font-size:13px;color:var(--green);text-decoration:underline}

/* 지도(스크립트가 못 뜰 때 쓰는 타일 지도) */
.map__tiles{position:absolute;inset:0}
.map__tiles img{position:absolute;width:256px;height:256px}
.map__pin{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px rgba(10,60,25,.22)}
.map__label{position:absolute;transform:translate(-50%,-28px);white-space:nowrap;
  background:#fff;padding:3px 8px;font-size:12px;color:var(--green);border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.map__zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:1px}
.map__zoom button{width:28px;height:28px;border:0;background:#fff;cursor:pointer;font-size:15px;color:var(--green)}
.map__attr{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.8);font-size:10px;padding:1px 5px;color:#555}
.map.is-dragging{cursor:grabbing}


/* ================= 호버 (원본 Wix variant 값 그대로) =================
   원본은 마우스가 올라가면 요소에 variant 클래스를 붙여 transform 을 줍니다.
   전환은 모두 0.3s ease-in-out (3분할 카드 배경만 0.4s). */
.duo .g1,.duo .g2,
.collage .c1,.collage .c2,.collage .c3,.collage .c4,
.mc .logo,.mc .f1,.mc .f2,.mc .f3,.mc .f4,.mc .f5,
.feats .cell,.bookrow .ic,.bookrow .btn,footer .btn{
  transition:transform .3s ease-in-out}

/* 확대 1.05 — 갤러리·콜라주 사진, Mary Cohr 로고, Thalac 3열, 예약 아이콘·버튼 */
.duo .g1:hover,.duo .g2:hover,
.collage .c1:hover,.collage .c2:hover,.collage .c3:hover,.collage .c4:hover,
.mc .logo:hover,.bookrow .ic:hover,.bookrow .btn:hover,footer .btn:hover{
  transform:scale(1.05)}
.feats .cell:hover{transform:scale(1.05);z-index:1}

/* Mary Cohr 카드 5장은 각각 다릅니다 */
.mc .f1:hover{transform:rotate(-3deg)}
.mc .f2:hover{transform:rotate(2deg)}
.mc .f3:hover{transform:scale(1.03)}
.mc .f4:hover{transform:scale(1.03)}
.mc .f5:hover{transform:rotate(-3deg)}

/* ================= 모션 (원본 Wix keyframe 그대로) ================= */
@keyframes motion-fadeIn{0%{opacity:0}100%{opacity:var(--comp-opacity,1)}}
@keyframes motion-floatIn{
  0%{opacity:0;animation-timing-function:step-end}
  0.0001%{opacity:0;transform:translate(var(--motion-translate-x,0),var(--motion-translate-y,60px))}
  100%{opacity:var(--comp-opacity,1);transform:translate(0,0)}
}
@keyframes motion-revealIn{
  0%{opacity:0;animation-timing-function:step-end}
  0.0001%{opacity:var(--comp-opacity,1);clip-path:var(--motion-clip-start,polygon(0% 0%,100% 0%,100% 0%,0% 0%))}
  100%{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
}
@keyframes motion-growIn{
  0.0001%{transform:translate(var(--motion-translate-x,0%),var(--motion-translate-y,20%)) scale(var(--motion-scale,.8))}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes motion-glideIn{
  0.0001%{transform:translate(var(--motion-translate-x,-100%),var(--motion-translate-y,0))}
  100%{transform:translate(0,0)}
}
@keyframes motion-expandIn{
  0.0001%{transform:scale(var(--motion-scale,.8))}
  100%{transform:scale(1)}
}
@keyframes motion-dropIn{0.0001%{scale:var(--motion-scale,1.2)}100%{scale:1}}
@keyframes motion-spinIn{
  0.0001%{scale:var(--motion-scale,.6);rotate:var(--motion-rotate,-360deg)}
  100%{scale:1;rotate:0deg}
}
@keyframes motion-turnIn{
  0.0001%{transform:translate(-50%,50%) rotate(var(--motion-rotate-z,-50deg)) translate(50%,-50%)}
  100%{transform:translate(-50%,50%) rotate(0deg) translate(50%,-50%)}
}
@keyframes motion-foldIn{
  0.0001%{transform:translate(0,-50%) perspective(800px) rotateX(var(--motion-rotate-x,-90deg)) translate(0,50%)}
  100%{transform:translate(0,-50%) perspective(800px) rotateX(0deg) translate(0,50%)}
}
@keyframes motion-flipIn{
  0.0001%{transform:perspective(800px) rotateX(var(--motion-rotate-x,-90deg))}
  100%{transform:perspective(800px) rotateX(0deg)}
}
@keyframes motion-shapeIn{
  0.0001%{clip-path:var(--motion-shape-start,circle(0%))}
  100%{clip-path:var(--motion-shape-end,circle(75%))}
}
@keyframes motion-winkInClip{
  0.0001%{clip-path:polygon(0% 50%,100% 50%,100% 50%,0% 50%)}
  100%{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
}
@keyframes motion-winkInRotate{
  0.0001%{transform:scale(var(--motion-scale-x,1),var(--motion-scale-y,0))}
  100%{transform:scale(1,1)}
}

/* 모션 구동 — 이름/시간은 요소의 data-motion, data-dur, data-delay 에서 옵니다(js/main.js). */
.js [data-motion]{opacity:0}
/* 길이·이징은 효과마다 다릅니다(js/main.js 의 FX 표). 여기서 일괄 지정하지 않습니다. */
[data-motion].on{opacity:var(--comp-opacity,1)}

@media(prefers-reduced-motion:reduce){
  .js [data-motion]{opacity:1}
  [data-motion].on{animation:none}
  .hero .bg,.roll .lane{animation:none}
}

html{scroll-padding-top:calc(170px * min(var(--k,1),1.256))}

/* ================= 자간 보정 =================
   원본 서체(Adobe Caslon / Helvetica W01 / Wix 한글)를 못 쓰기 때문에
   대체 서체의 글자 폭 차이를 자간으로 흡수해 원본과 같은 폭이 되게 맞춥니다.
   값은 원본 실측 폭과의 차이를 글자수로 나눠 산출했습니다. */
footer .ft{letter-spacing:10.59px}
.thalac .s2{letter-spacing:3.84px}
.thalac .l2{letter-spacing:2px}
.rest .hgroup .cas{letter-spacing:2.36px}
.bookrow .quote{letter-spacing:1.94px}
.thalac .l3 .c1{letter-spacing:1.86px}
.mcj .in h2{letter-spacing:1.71px}
.mcj .in h2 .sans{letter-spacing:.27px}
.thalac .l3 .c2{letter-spacing:1.56px}
.big-serif{letter-spacing:6.45px}
.review-sec .sub{letter-spacing:.06px}
.cards .ov p{letter-spacing:.15px}
.feats .cell p{letter-spacing:.13px}
.thalac .l1{letter-spacing:-.8px}
.thalac .l3 .c3{letter-spacing:-.82px}
.cards .ov h3{letter-spacing:-1.36px}
.rest .hgroup p{letter-spacing:-.28px}
.hd .logo{letter-spacing:9.34px}

/* ================= 슬라이더 화살표 (원본 실측) =================
   Our Space : 흰 원 48×48, 불투명도 .9, 검정 셰브론
   Our Price : 배경 없이 짙은 초록(#214334) 셰브론 26×40 + drop-shadow */
.space-sec .snav{width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.9);color:#000;font-size:26px;font-weight:400}
.space-sec .snav:hover{background:#fff}
.space-sec .snav.prev{left:22px}
.space-sec .snav.next{right:22px}

.price-sec .snav{top:45%;width:48px;height:74px;border-radius:0;background:none;
  color:#214334;font-size:52px;font-weight:700;opacity:.9;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.price-sec .snav:hover{background:none;opacity:1}
.price-sec .snav.prev{left:8px}
.price-sec .snav.next{right:8px}

/* 첫/마지막 장에서는 해당 방향 화살표를 숨깁니다(원본 동작). */
.snav[hidden]{display:none}

/* ================= 타이틀 굵기 (요청: 최대로) ================= */
.big-serif,
.intro h2,
.mcj .in h2,
.rest .hgroup p,
.thalac .l2,
.thalac .s2,
footer .ft{font-weight:700}

/* ================= 타이틀 (요청: 굵기 900, 자간 -3) =================
   Cormorant Garamond 는 700 까지만 있어 900 은 브라우저가 합성합니다.
   실제로 더 두껍게 보이도록 획을 얹었습니다. */
/* 굵기만 700 으로 올립니다. 자간은 앞의 '자간 보정' 블록이 원본 폭에 맞춰둔 값을 씁니다
   (-3px 은 폭이 원본의 절반까지 줄어 되돌렸습니다). */
.big-serif,
.intro h2,
.mcj .in h2,
.rest .hgroup p,
.thalac .l2,
.thalac .s2,
footer .ft{font-weight:700}

/* 밴드2 축소는 가운데를 기준으로 */
.band-2{transform-origin:center center}

/* ================= 배경 풀블리드 =================
   섹션 박스는 1265px 설계폭이라 넓은 화면에서 배경이 가운데만 칠해지고
   좌우에 흰 여백이 생겼습니다. 레이아웃은 그대로 두고 배경만 화면 끝까지 늘립니다.
   clip-path 로 위아래를 잘라 옆 섹션을 덮지 않게 합니다. */
.sec,.band,.spacer,footer{
  background-color:var(--bg,transparent);
  box-shadow:0 0 0 100vw var(--bg,transparent);
  clip-path:inset(0 -100vw)}
/* 영상이 깔린 밴드는 배경색이 없습니다(투명 그림자는 그리지 않음). */
.band-1{--bg:transparent;box-shadow:none}

/* ================= 260922 수정 요청 =================
   px 로 지정한 크기(3·7·9번)는 섹션 확대 배율(--kk)로 나눠 화면에서 실제 그 크기로 보이게 합니다. */
:root{--pre:'Pretendard','Noto Sans KR',sans-serif}

/* 1. 헤더 배경 — 맨 위 흰색 70%, 스크롤 시 60% */
header{background-color:rgba(255,255,255,.7)}
header.scrolled{background-color:rgba(255,255,255,.6)}

/* 2. 카드 제목 프리텐다드 */
.cards .ov h3{font-family:var(--pre);letter-spacing:0}

/* 3. 카드 설명 16px */
.cards .ov p{font-size:calc(16px / var(--kk))}

/* 4. Thalac 헤드라인 — 한글 프리텐다드, 영문 자간 -3% 볼드 */
.thalac .l1,.thalac .l3 .c3{font-family:var(--pre);letter-spacing:0}
.thalac .l2,.thalac .l3 .c1,.thalac .l3 .c2{letter-spacing:-.03em;font-weight:700}

/* 5. 3열 본문 한 사이즈 축소 */
.feats .cell p{font-size:11.5px;line-height:19px}

/* 6. 쉼의 시간 영문 — 자간 -3%, 한 사이즈 확대 */
.rest .hgroup .cas{letter-spacing:-.03em;font-size:22px}

/* 7. 캡션 4개 14px */
.rest .caps .cap{font-size:calc(14px / var(--kk));line-height:1.3;letter-spacing:0}

/* 8·11. Our Space / Our Price / Reviews 자간 -3% */
.big-serif{letter-spacing:-.03em}

/* 9. Our Price 화살표 80×80 */
.price-sec .snav{width:calc(80px / var(--kk));height:calc(80px / var(--kk));
  font-size:calc(80px / var(--kk));line-height:1;display:flex;align-items:center;justify-content:center;padding:0}

/* 12. 천 영상 위 로고 20% 축소 (가운데 유지) */
.band-3 .mk{width:232px;height:155px;left:506px;top:114px}

/* 13. 지도 — 예약하기 버튼 아래, 안쪽 폭 가득 */
footer .rule{top:485px}
footer .map{left:51px;top:500px;width:1164px;height:320px}
footer .map-open{left:auto;right:50px;top:840px}

/* ================= 모바일 (767px 이하) =================
   원본 모바일 화면(375px) 실측 좌표를 그대로 옮겼습니다. 데스크톱과 같은 방식으로
   375px 스테이지를 화면 폭에 맞춰 확대합니다(--k = 화면폭 / 375, js/main.js). */
@media (max-width:767px){
  html{scroll-padding-top:calc(131px * var(--k,1))}

  .sec,.band,.spacer,footer{--kmax:99;width:375px;margin-left:calc((var(--vwpx) - 375px) / 2)}
  .wide{--pad:0px;border:0;width:375px;margin-left:calc((var(--vwpx) - 375px) / 2);overflow:hidden}
  .wide>.bleed{left:0;width:375px}

  /* 헤더 131px — 로고 + 메뉴 3칸 2줄 */
  header{--kk:var(--k,1);height:calc(131px * var(--kk))}
  .hd{width:375px;height:131px;margin-left:calc((var(--vwpx) - 375px) / 2)}
  .hd .logo{left:187.5px;top:35px;font-size:15.8px;line-height:31px;letter-spacing:4.75px;-webkit-text-stroke:.3px currentColor}
  .hd a.nv{font-size:10px;line-height:17px}
  .hd .n1{left:108px;top:72px}.hd .n2{left:191px;top:72px}.hd .n3{left:275px;top:72px}
  .hd a.n4{left:110px;top:103px;line-height:17px}.hd a.n5{left:191px;top:103px;line-height:17px}.hd a.n6{left:274px;top:103px}

  /* 히어로 433px */
  .hero{--h:433px;height:433px}
  .hero .bg{top:-144px;width:375px;height:577px}
  .hero .shot{top:0;width:375px;height:577px}
  .hero .mark{left:37px;top:36px;width:301px;height:301px}

  /* 인트로 576px */
  .intro{--h:576px;height:576px}
  .intro .eyebrow{left:0;top:85px;width:375px;font-size:16px;line-height:19px;letter-spacing:1.2px}
  .intro h2{left:0;top:123px;width:375px;font-size:23px;line-height:21px;letter-spacing:2px}
  .intro .body{left:38px;top:181px;width:300px;white-space:normal;font-size:13px;line-height:18.2px;letter-spacing:0}
  .intro .body br{display:none}
  .intro .body p+p{margin-top:18px}

  /* 3분할 카드 → 세로 3장 (315×528) */
  .cards{--h:1584px;height:1584px;display:block}
  .cards .cell,.cards .cell:last-child{width:315px;height:528px;margin-left:30px}
  .cards .ov{padding:0 37px 115px}
  .cards .ov .mk{left:73px;top:89px;width:168px;height:112px}
  .cards .ov p{font-size:17px;line-height:27px}
  .cards .ov h3{margin-top:50px}

  /* 듀오 1054px */
  .duo{--h:1054px;height:1054px}
  .duo .g1{left:38px;top:145px;width:300px;height:523px}
  .duo .g2{left:38px;top:706px;width:300px;height:197px}

  /* Thalac 1061px */
  .thalac{--h:1061px;height:1061px}
  .thalac .l1{left:0;top:90px;width:375px;font-size:14px;line-height:21px}
  .thalac .l2{left:0;top:118px;width:375px;text-align:center;font-size:55px;line-height:55px}
  .thalac .l3{left:30px;top:177px;width:315px;font-size:15px;line-height:24px}
  .thalac .shot{left:30px;top:272px;width:316px;height:505px}
  .thalac .clip{left:30px;top:777px;width:316px;height:254px}
  .thalac .s1{left:92px;top:464px;width:191px;text-align:center;font-size:11px;line-height:11px}
  .thalac .r1{left:92px;top:482px;width:191px;height:1px}
  .thalac .s2{left:92px;top:489px;width:191px;text-align:center;font-size:65px;line-height:65px;letter-spacing:1px}
  .thalac .r2{left:92px;top:558px;width:191px;height:1px}
  .thalac .s3{left:92px;top:568px;width:191px;font-size:10px;line-height:16px}
  .thalac .s3 br{display:none}
  .thalac .s3 p+p{margin-top:10px}

  /* 맞춤형 솔루션 → 세로 3장 */
  .feats{--h:2438px;height:2438px}
  .feats .cell{left:29px;width:317px}
  .feats .c1{top:183px}.feats .c2{top:885px}.feats .c3{top:1587px}
  .feats .cell img{width:317px;height:414px}
  .feats .cell h3{margin-top:21px;font-size:13px}
  .feats .cell p{margin:0 0 0 5px;width:307px;font-size:13px;line-height:20.8px}
  .feats .cell h3+p{margin-top:21px}

  /* 영상 밴드 */
  .band video,.band>img{width:375px}
  .band-1{--h:236px;height:236px}

  /* Mary Cohr 2766px */
  .mc{--h:2766px;height:2766px}
  .mc .lead-wrap{left:0;top:0;width:375px;height:500px;transform:none!important}
  .mc .logo{left:130px;top:143px;width:115px;height:111px}
  .mc .lead{left:31px;top:275px;width:314px;font-size:12px;line-height:19px}
  .mc .lead br{display:none}
  .mc .lead p+p{margin-top:12px}
  .mc figure figcaption{margin-top:20px;font-size:12px;line-height:17px}
  .mc .f1{left:29px;top:528px;width:315px}.mc .f1 img{height:374px}
  .mc .f2{left:66px;top:1019px;width:281px}.mc .f2 img{height:333px}
  .mc .f3{left:28px;top:1450px;width:318px}.mc .f3 img{height:445px}
  .mc .f4{left:29px;top:1995px;width:317px}.mc .f4 img{height:190px}
  .mc .f5{left:28px;top:2302px;width:316px}.mc .f5 img{height:399px}

  /* Mary Cohr × LJ 794px */
  .mcj{--h:794px;height:794px}
  .mcj .clip{left:0;top:434px;width:375px;height:360px}
  .mcj .in{left:30px;top:39px;width:316px;transform:none}
  .mcj .in img{width:156px;aspect-ratio:156/151}
  .mcj .in h2{margin-top:33px;font-size:20px;line-height:1.7;letter-spacing:0}
  .mcj .in p{margin-top:8px;font-size:12px;line-height:19px}
  .mcj .in p br{display:none}

  /* 쉼의 시간 1271px — 사진·캡션을 번갈아 세로로 */
  .rest{--h:1271px;height:1271px}
  .rest .hgroup{left:30px;top:166px;width:315px;font-size:20px;line-height:28px}
  .rest .hgroup .cas{font-size:21px}
  .rest .i1{left:45px;top:263px;width:285px;height:288px}
  .rest .i2{left:45px;top:661px;width:285px;height:288px}
  .rest .caps{left:0;top:0;width:375px;height:1271px}
  .rest .caps .ln,.rest .caps .vl{display:none}
  .rest .caps .cap{left:45px;width:285px;font-size:13px;line-height:1.35;letter-spacing:0}
  .rest .caps .b,.rest .caps .d{font-size:10px}
  .rest .caps .a{top:576px}.rest .caps .b{top:623px}
  .rest .caps .c{top:964px}.rest .caps .d{top:1013px}

  /* Our Space 971px — 슬라이더 대신 모자이크 그리드(원본 모바일) */
  .big-serif{font-size:25px;line-height:30px}
  .space-sec{--h:971px;height:971px}
  .space-sec h2,.price-sec h2,.review-sec h2{left:0;width:375px}
  .space-sec h2{top:22px}
  .space-sec .sw{left:24px;top:128px;width:322px;height:auto;overflow:visible}
  .space-sec .sw .track{display:grid;grid-template-columns:104px 94px 104px;gap:10px;transform:none!important;transition:none}
  .space-sec .sw .track img{width:100%;height:147px}
  .space-sec .sw .track img:nth-child(4n+1){grid-column:1/2}
  .space-sec .sw .track img:nth-child(4n+2){grid-column:2/4}
  .space-sec .sw .track img:nth-child(4n+3){grid-column:1/3}
  .space-sec .sw .track img:nth-child(4n){grid-column:3/4}
  .space-sec .sw .track img:nth-child(9){grid-column:1/3;width:156px;height:221px}
  .space-sec .snav,.space-sec .thumbs{display:none}

  /* Our Price 804px */
  .price-sec{--h:804px;height:804px}
  .price-sec h2{top:79px}
  .price-sec .sw{left:29px;top:177px;width:317px;height:480px}
  .price-sec .sw .track img{width:317px;height:448px}
  .price-sec .dots{bottom:4px;gap:6px}
  .price-sec .snav{top:224px;width:40px;height:40px;font-size:40px}
  .price-sec .snav.prev{left:0}.price-sec .snav.next{right:0}

  /* 예약 안내 364px + 편의시설 아이콘 줄 212px */
  .bookrow{--h:576px;height:576px}
  .bookrow .bride{width:188px;height:364px}
  .bookrow .quote{left:191px;top:52px;width:177px;font-size:14px;line-height:25px;letter-spacing:.5px}
  .bookrow .t1,.bookrow .t2{left:189px;width:185px;font-size:8px;line-height:12.75px}
  .bookrow .t1{top:77px}.bookrow .t2{top:103px}
  .bookrow .btn{left:214px;top:157px;width:136px;height:49px;font-size:14px}
  .bookrow .notice{left:220px;top:212px;width:123px;font-size:10px;line-height:10px}
  .bookrow .mk{left:32px;top:264px;width:123px;height:82px}
  .bookrow .ic{top:410px;width:40px;height:40px}
  .bookrow .lb{top:460px;font-size:10px;translate:-50% 0}
  .bookrow div.ic:nth-of-type(1){left:25px!important}  .bookrow span.lb:nth-of-type(1){left:45px!important}
  .bookrow div.ic:nth-of-type(2){left:96px!important}  .bookrow span.lb:nth-of-type(2){left:116px!important}
  .bookrow div.ic:nth-of-type(3){left:167px!important} .bookrow span.lb:nth-of-type(3){left:187px!important}
  .bookrow div.ic:nth-of-type(4){left:238px!important} .bookrow span.lb:nth-of-type(4){left:258px!important}
  .bookrow div.ic:nth-of-type(5){left:310px!important} .bookrow span.lb:nth-of-type(5){left:330px!important}

  .spacer{display:none}

  /* 밴드2 579px */
  .band-2{--h:579px;height:579px}
  .band-2 .mk{left:111px;top:425px;width:170px;height:113px}

  /* 콜라주 1048px → 세로 4장 */
  .collage{--h:1048px;height:1048px}
  .collage .c1{left:60px;top:82px;width:257px;height:158px}
  .collage .c2{left:59px;top:258px;width:257px;height:158px}
  .collage .c3{left:60px;top:435px;width:257px;height:173px}
  .collage .c4{left:61px;top:625px;width:256px;height:161px}

  /* 리뷰 648px */
  .review-sec{--h:648px;height:648px}
  .review-sec h2{top:16px}
  .review-sec .sub{left:0;top:50px;width:375px;font-size:10px}
  .roll{top:110px;width:375px;height:300px}
  .roll .lane{gap:15px}
  .roll img{height:300px}

  /* 천 영상 밴드 235px (로고는 20% 축소 유지) */
  .band-3{--h:235px;height:235px}
  .band-3 .mk{left:106px;top:63px;width:163px;height:109px}

  /* 푸터 */
  footer{--h:940px;height:940px}
  footer .ft{left:38px;top:37px;width:300px;font-size:25.6px;line-height:44px;letter-spacing:5px}
  footer .tel{left:38px;top:203px;font-size:30px;line-height:48px}
  footer .ad1{left:39px;top:264px;width:300px;font-size:13.8px;line-height:22px}
  footer .ad2{left:40px;top:329px;width:300px;font-size:11.4px;line-height:19px}
  footer .btn{left:38px;top:455px;width:205px;height:49px;font-size:14px}
  footer .rule{display:none}
  footer .map{left:38px;top:540px;width:300px;height:310px}
  footer .map-open{left:auto;right:37px;top:862px;font-size:11px}
  footer .copy{left:39px;top:900px;font-size:11px}
}

/* ================= 줄바꿈 =================
   한글이 단어 중간에서 끊기지 않게(keep-all), 마지막 줄에 한두 글자만 남지 않게(pretty) 합니다. */
body{word-break:keep-all;overflow-wrap:break-word}
p,h1,h2,h3,figcaption,a,span{text-wrap:pretty}
.rest .hgroup p{white-space:nowrap}

/* ================= 리뷰 롤링 버튼 =================
   롤링은 js/main.js 에서 돌립니다(CSS 애니메이션 끔). */
.roll .lane,.roll:hover .lane{animation:none;will-change:transform}
.review-sec .rnav{top:421px;z-index:3}
.review-sec .rnav.prev{left:20px}
.review-sec .rnav.next{right:20px}
@media (max-width:767px){
  .review-sec .rnav{top:260px;width:36px;height:36px;font-size:22px}
  .review-sec .rnav.prev{left:8px}
  .review-sec .rnav.next{right:8px}
}
.thalac .l2,.thalac .s2{white-space:nowrap}