/* ===== 더힐 v2.1 메인 : 사진과 영문 타이포로 분위기를 전하는 구성 ===== */
body.is-front{background:var(--sand);color:#4b4640}

/* 왼쪽 세로 챕터 내비 */
.chap-nav{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:90;width:84px;display:flex;flex-direction:column;align-items:center;gap:26px;color:var(--ink2);transition:color .4s}
.chap-nav.light{color:#fff}
.chap-nav-t{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--avant);font-size:10.5px;letter-spacing:.2em;font-weight:500;white-space:nowrap}
.chap-nav ul{list-style:none;display:flex;flex-direction:column;align-items:center;gap:16px}
.chap-nav a{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.4;transition:all .4s}
.chap-nav a.on{opacity:1;height:30px;width:1.5px;border-radius:2px}
.chap-nav.light{text-shadow:0 0 8px rgba(0,0,0,.25)}

/* 히어로 : 사진만, 어둡게 덮지 않음 */
.w-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#cfdbe6}
.w-hero-slide{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 2.2s ease}
.w-hero-slide.on{opacity:1}
.w-hero-dots{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);display:flex;gap:10px;z-index:2}
.w-hero-dots i{width:34px;height:2px;background:rgba(255,255,255,.55);transition:background .5s,width .5s}
.w-hero-dots i.on{background:#fff;width:60px}
.w-book{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:3;width:min(1080px,calc(100% - 200px));display:flex;background:#fff;color:var(--ink2);box-shadow:0 18px 40px rgba(0,0,0,.1)}
.w-book-c{flex:1;padding:20px 26px;border-right:1px solid #ece6df;display:flex;flex-direction:column;justify-content:center}
.w-book-c span{font-family:var(--ogg);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#958a80}
.w-book-c b{font-family:var(--avant);font-weight:400;font-size:17px;margin-top:3px;color:var(--ink2)}
.w-book-lead{flex:1.4}
.w-book-lead span{font-family:var(--avant);font-weight:300;font-size:22px;letter-spacing:0;text-transform:none;color:var(--ink2)}
.w-book-lead b{font-family:'Pretendard Variable',sans-serif;font-size:13px;font-weight:500;color:#8a8178}
.w-book-go{flex:none;width:200px;margin:12px;display:flex;align-items:center;justify-content:center;background:var(--deep);color:#fff;font-family:var(--avant);font-size:13px;letter-spacing:.16em;transition:background .3s}
.w-book-go:hover{background:#0b1b33}

/* 공통 타이포 */
.chap{position:relative}
.w-chap{font-family:var(--ogg);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#8b8178}
.w-mega{font-family:var(--avant);font-weight:200;font-size:clamp(70px,10.5vw,190px);line-height:.95;letter-spacing:-.03em;color:var(--ink2);margin-top:26px}
.w-mega span{display:block;padding-left:12vw}
.w-big{font-family:var(--avant);font-weight:200;font-size:clamp(56px,7vw,120px);line-height:1;letter-spacing:-.025em;color:var(--ink2);margin-top:20px}
.w-big i,.w-mini-h i{font-family:var(--ogg);font-style:italic;font-weight:400;letter-spacing:-.01em}
.w-en-lead{font-family:var(--ogg);font-size:26px;line-height:1.5;color:var(--ink2)}
.w-en{font-family:var(--ogg);font-size:21px;line-height:1.55;color:#4b4640;margin-top:28px;max-width:420px}
.w-ko{font-size:13.5px;line-height:1.9;color:#8a8178;margin-top:22px;letter-spacing:.01em}
.w-line-btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 34px;border:1px solid var(--ink2);font-family:var(--avant);font-size:12px;letter-spacing:.18em;color:var(--ink2);transition:all .35s}
.w-line-btn:hover{background:var(--ink2);color:#fff}
.w-solid{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 40px;background:var(--deep);color:#fff;font-family:var(--avant);font-size:12px;letter-spacing:.18em;transition:background .3s}
.w-solid:hover{background:#0b1b33}
figure{margin:0}
.wipe{overflow:hidden}
.wipe img{width:100%;height:100%;object-fit:cover;display:block}

/* I. the hill */
.w-open{padding:160px 7vw 160px 9vw}
.w-open-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px;margin-top:90px;align-items:start}
.w-open-txt{grid-column:1/5;padding-top:40px}
.w-open-a{grid-column:5/12;aspect-ratio:3/2}
.w-open-b{grid-column:2/6;grid-row:2;margin-top:-140px;aspect-ratio:1/1;border-radius:50%;position:relative;z-index:2}
.w-open-cap{grid-column:7/12;grid-row:2;align-self:end;font-family:var(--ogg);font-style:italic;font-size:20px;color:#8b8178;text-align:right;padding-bottom:40px}

/* II. sea view : 흐르는 사진 */
.w-window{background:#fff;padding:160px 0 150px}
.w-window-head{padding:0 7vw 0 9vw;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.w-window-head .w-big{text-align:right;margin-left:auto}
.w-window-head .w-chap{align-self:flex-start}
.w-flow{margin-top:90px;display:flex;flex-direction:column;gap:22px;overflow:hidden}
.w-flow-row{overflow:hidden}
.w-flow-track{display:flex;gap:22px;width:max-content;animation:wflow 70s linear infinite}
.w-flow-row.rev .w-flow-track{animation-direction:reverse;animation-duration:80s}
.w-flow:hover .w-flow-track{animation-play-state:paused}
.w-flow-item{flex:none;height:320px;border-radius:18px;overflow:hidden}
.w-flow-item img{height:100%;width:auto;display:block}
.w-flow-row.rev .w-flow-item{height:260px}
@keyframes wflow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.w-rooms-mini{padding:120px 7vw 0 9vw}
.w-mini-h{font-family:var(--avant);font-weight:200;font-size:44px;color:var(--ink2);letter-spacing:-.02em}
.w-mini-list{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.w-mini{display:block;color:var(--ink2)}
.w-mini-img{display:block;aspect-ratio:4/5;border-radius:999px 999px 18px 18px;overflow:hidden}
.w-mini-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.w-mini:hover .w-mini-img img{transform:scale(1.04)}
.w-mini-en{display:block;font-family:var(--ogg);font-size:24px;margin-top:20px}
.w-mini-ko{display:block;font-size:12.5px;color:#8a8178;margin-top:4px}

/* 파노라마 */
.w-pano{position:relative;padding:0;background:#fff}
.w-pano-img{max-width:2000px;margin:0 auto}
.w-pano-img img{width:100%;height:auto;aspect-ratio:2000/769}
.w-pano-cap{position:absolute;left:9vw;bottom:-40px;font-family:var(--avant);font-weight:200;font-size:clamp(48px,6vw,104px);line-height:1;color:var(--ink2);background:var(--sand);padding:22px 40px 0 0}

/* III. slow mornings : 왼쪽 고정, 오른쪽 흐름 */
.w-morning{padding:200px 7vw 160px 9vw}
.w-morning-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px}
.w-sticky{position:sticky;top:160px}
.w-morning-imgs{display:flex;flex-direction:column;gap:90px}
.w-morning-imgs .m1{width:100%;aspect-ratio:3/2}
.w-morning-imgs .m2{width:62%;margin-left:auto;aspect-ratio:4/5;border-radius:999px 999px 0 0}
.w-morning-imgs .m3{width:78%;aspect-ratio:3/2;border-radius:18px}

/* IV. lounge */
.w-lounge2{background:#fff;padding:160px 7vw 170px 9vw}
.w-lounge2 .w-big{text-align:right}
.w-lounge2 .w-chap{text-align:right}
.w-lounge2-grid{display:grid;grid-template-columns:1.3fr .8fr .9fr;gap:60px;margin-top:80px;align-items:end}
.w-lounge2-grid .l1{aspect-ratio:3/4}
.w-lounge2-grid .l-txt{padding-bottom:30px}
.w-lounge2-grid .l2{align-self:start;margin-top:-180px}
.w-arch{aspect-ratio:3/4;border-radius:999px 999px 0 0;overflow:hidden}
.w-arch img{width:100%;height:100%;object-fit:cover}

/* V. ulleungdo */
.w-island{padding:170px 0 160px}
.w-island .w-chap,.w-island .w-big{padding:0 7vw 0 9vw}
.w-island-track{display:flex;gap:44px;overflow-x:auto;scrollbar-width:none;padding:80px 7vw 10px 9vw;scroll-snap-type:x proximity;scroll-padding-left:9vw}
.w-island-track::-webkit-scrollbar{display:none}
.w-island-track:after{content:'';flex:none;width:4vw}
.w-spot{flex:none;width:230px;color:var(--ink2);scroll-snap-align:start}
.w-spot:nth-child(even){margin-top:80px}
.w-spot-img{display:block;width:230px;height:230px;border-radius:50%;overflow:hidden}
.w-spot-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.w-spot:hover .w-spot-img img{transform:scale(1.06)}
.w-spot-en{display:block;font-family:var(--ogg);font-size:20px;margin-top:20px;line-height:1.25}
.w-spot-ko{display:block;font-size:12.5px;color:#8a8178;margin-top:4px}

/* VI. book */
.w-final{background:#fff;padding:170px 7vw 170px 9vw;display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}
.w-final-img{aspect-ratio:4/5;border-radius:999px 999px 0 0}
.w-final-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}

/* 움직임 : 글자는 떠오르고, 사진은 커튼처럼 열림 (확대 없음) */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1)}
.wipe.in{clip-path:inset(0 0 0 0)}
.w-open-b.wipe,.w-mini-img{clip-path:none}
.w-open-b.wipe{opacity:0;transform:translateY(60px);transition:opacity 1.4s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.w-open-b.wipe.in{opacity:1;transform:none}

@media (max-width:1024px){
	.chap-nav{display:none}
	.w-hero{height:100svh;min-height:540px}
	.w-hero-dots{bottom:80px}
	.w-book{display:none}
	.w-chap{font-size:10.5px}
	.w-mega{font-size:58px;margin-top:16px}
	.w-mega span{padding-left:40px}
	.w-big{font-size:46px;margin-top:12px}
	.w-en-lead{font-size:18px}
	.w-en{font-size:16px;margin-top:18px}
	.w-ko{font-size:12px;margin-top:14px}
	.w-line-btn,.w-solid{height:46px;padding:0 22px;font-size:11px}
	.w-open{padding:90px 20px}
	.w-open-grid{grid-template-columns:repeat(6,1fr);column-gap:12px;margin-top:40px}
	.w-open-txt{grid-column:1/7;padding:0 0 30px}
	.w-open-a{grid-column:1/7}
	.w-open-b{grid-column:4/7;margin-top:-60px}
	.w-open-cap{grid-column:1/4;text-align:left;font-size:14px;padding:0 0 10px}
	.w-window{padding:90px 0}
	.w-window-head{padding:0 20px}
	.w-window-head .w-big{text-align:left;margin-left:0}
	.w-flow{margin-top:40px;gap:10px}
	.w-flow-track{gap:10px}
	.w-flow-item{height:180px;border-radius:12px}
	.w-flow-row.rev .w-flow-item{height:150px}
	.w-rooms-mini{padding:70px 20px 0}
	.w-mini-h{font-size:28px}
	.w-mini-list{grid-template-columns:1fr 1fr;gap:24px 12px;margin-top:24px}
	.w-mini-en{font-size:17px;margin-top:10px}
	.w-mini-ko{font-size:11px}
	.w-pano-cap{position:static;font-size:40px;padding:20px 20px 0;background:none}
	.w-morning{padding:90px 20px}
	.w-morning-grid{grid-template-columns:1fr;gap:40px}
	.w-sticky{position:static}
	.w-morning-imgs{gap:24px}
	.w-lounge2{padding:90px 20px}
	.w-lounge2-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
	.w-lounge2-grid .l1{grid-column:1/2}
	.w-lounge2-grid .l2{grid-column:2/3;grid-row:1;margin-top:60px}
	.w-lounge2-grid .l-txt{grid-column:1/3;padding:10px 0 0}
	.w-island{padding:90px 0}
	.w-island .w-chap,.w-island .w-big{padding:0 20px}
	.w-island-track{gap:18px;padding:40px 20px 10px;scroll-padding-left:20px}
	.w-spot{width:140px}
	.w-spot:nth-child(even){margin-top:40px}
	.w-spot-img{width:140px;height:140px}
	.w-spot-en{font-size:15px;margin-top:10px}
	.w-spot-ko{font-size:11px}
	.w-final{grid-template-columns:1fr;gap:34px;padding:90px 20px 100px}
	.w-final-img{width:78%;margin:0 auto}
	.w-final-txt{text-align:center}
	.w-final-btns{justify-content:center}
}
.w-flow-track{will-change:transform;backface-visibility:hidden}.w-flow-item img{backface-visibility:hidden}

/* v2.2 : 모서리 전부 직선 + 사진 채도 낮춤(원본 파일은 그대로) */
.is-front .w-flow-item,.is-front .w-mini-img,.is-front .w-arch,.is-front .w-final-img,.is-front .w-morning-imgs .m2,.is-front .w-morning-imgs .m3,.is-front .w-open-b,.is-front .w-spot-img,.ovl-img{border-radius:0!important}
.w-open-b{border:0}
.w-mini-en{font-family:'Pretendard Variable',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.03em}
.w-mini-img{aspect-ratio:4/5}
.is-front img,.w-hero-slide,.ovl-img img{filter:saturate(.78) contrast(.97) brightness(1.03)}
@media (max-width:1024px){.w-mini-en{font-size:15px}}
/* v2.2.1 : 사진 열림 효과를 사진 안쪽에만 적용 (영역 자체는 보이게 해서 등장 감지가 되도록) */
.wipe,.wipe.in{clip-path:none!important}
.wipe img{clip-path:inset(0 0 100% 0);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1)}
.wipe.in img{clip-path:inset(0 0 0 0)}
.w-arch img{clip-path:inherit}
.wipe .w-arch{overflow:hidden}
.wipe .w-arch img{clip-path:inset(0 0 100% 0);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1)}
.wipe.in .w-arch img{clip-path:inset(0 0 0 0)}
/* v2.3 */
/* 작은 사진이 스크롤에 따라 오른쪽으로 넓어지며 숨은 부분이 드러남 */
.w-open-b{grid-column:2/11;grid-row:2;margin-top:-120px;aspect-ratio:auto;border-radius:0;position:relative;z-index:2;overflow:visible}
.w-open-b .grow{width:calc(38% + 62% * var(--g,0));height:var(--gh,380px);overflow:hidden;will-change:width}
.w-open-b .grow img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.w-open-cap{grid-row:3;grid-column:2/11;text-align:right;padding:24px 0 0}
/* 흐르는 사진 : 한 줄, 크게 */
.w-flow{margin-top:100px}
.w-flow-item{height:540px;border-radius:0}
.w-flow-track{gap:30px;animation-duration:90s}
/* 객실 사진 보정 : 더 밝게, 붉은 기운 줄임 */
.is-front .tone-room img{filter:saturate(.7) brightness(1.09) contrast(.94) hue-rotate(5deg)}
@media (max-width:1024px){
	.w-open-b{grid-column:1/7;margin-top:-40px}
	.w-open-b .grow{width:calc(45% + 55% * var(--g,0));height:var(--gh,200px)}
	.w-open-cap{grid-column:1/7;grid-row:3}
	.w-flow-item{height:260px}
	.w-flow-track{gap:12px}
}
/* v2.4 */
/* 더힐 사인 : 정원 안에서 원이 커지며 드러남 (사진 확대 없음) */
.w-open-b.circ{grid-column:2/6;grid-row:2;margin-top:-150px;width:auto;aspect-ratio:1/1;overflow:hidden;position:relative;z-index:2;clip-path:circle(22% at 50% 50%);transition:clip-path 1.8s cubic-bezier(.65,0,.25,1) .2s;border-radius:0!important}
.w-open-b.circ.in{clip-path:circle(50% at 50% 50%)}
.w-open-b.circ img{width:100%;height:100%;object-fit:cover;display:block}
.w-open-cap{grid-row:2;grid-column:7/12;align-self:end;text-align:right;padding:0 0 40px}
/* 객실 4개 : 오른쪽으로 붙이고, 하나씩 오른쪽에서 왼쪽으로 밀려 들어옴 */
.w-rooms-mini{padding:110px 7vw 0 22vw}
.w-mini.slide{opacity:0;transform:translateX(120px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.w-mini.slide.in{opacity:1;transform:none}
.w-mini.slide:nth-child(2){transition-delay:.15s}
.w-mini.slide:nth-child(3){transition-delay:.3s}
.w-mini.slide:nth-child(4){transition-delay:.45s}
.w-window{padding-bottom:170px}
/* 파노라마 : 오른쪽 위 하늘 쪽도 잘라 계단처럼 */
.w-pano{position:relative}
.w-pano:before{content:'';position:absolute;right:0;top:0;width:34%;height:110px;background:#fff;z-index:2}
@media (max-width:1024px){
	.w-open-b.circ{grid-column:3/7;margin-top:-60px}
	.w-open-cap{grid-column:1/3;padding:0 0 10px}
	.w-rooms-mini{padding:60px 20px 0}
	.w-mini.slide{transform:translateX(60px)}
	.w-pano:before{height:44px;width:40%}
}
/* v2.5 */
/* 큰 제목 : 왼쪽에서 오른쪽으로 스르르 */
.w-mega .ln{display:block;clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(-30px);transition:clip-path 1.6s cubic-bezier(.6,0,.2,1),opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.w-mega .ln2{padding-left:12vw;transition-delay:.35s}
.w-mega.in .ln{clip-path:inset(0 -5% 0 0);opacity:1;transform:none}
.w-mega span.ln{padding-left:0}
.w-mega span.ln2{padding-left:12vw}
/* 펜션 전경 사진 : 오른쪽 화면 끝까지 */
.w-open-a{grid-column:5/13;margin-right:-7vw}
/* 원 : 더 빨리, 더 빠르게 열림 */
.w-open-b.circ{transition:clip-path 1.3s cubic-bezier(.6,0,.25,1)}
/* 바깥 풍경 사진 : 밝고 화사하게 (색바랜 느낌 제거) */
.is-front img,.w-hero-slide{filter:brightness(1.05) saturate(1.1) contrast(1.04)}
.is-front .w-open-a img{filter:brightness(1.08) saturate(1.15) contrast(1.05)}
.is-front .w-open-b.circ img{filter:brightness(1.1) saturate(1.05) contrast(1.02)}
@media (max-width:1024px){
	.w-open-a{grid-column:1/7;margin-right:-20px}
	.w-mega .ln2,.w-mega span.ln2{padding-left:40px}
}
