/* ===== 더힐 v3.1 모바일·태블릿 : 웹진식 비대칭 배치 =====
   사진은 화면 한쪽 끝까지 붙이고(좌·우 번갈아), 글은 들여쓰기를 달리해
   가운데에 똑같이 모아 놓은 느낌이 나지 않도록 한다. */
html,body{overflow-x:clip}
.w-mini-img,.rd-other .w-mini-img,.w-arch,.w-final-img{border-radius:0!important}

@media (max-width:1024px){
	:root{--g:22px;--o:56px}

	/* ---------- 메인 ---------- */
	.w-open{padding:80px 0 70px}
	.w-open>.w-chap{padding:0 var(--g)}
	.w-mega{font-size:min(56px,14.4vw);margin-top:14px}
	.w-mega .ln,.w-mega span.ln{padding-left:var(--g)}
	.w-mega .ln2,.w-mega span.ln2{padding-left:calc(var(--g) + 50px)}
	.w-open-grid{grid-template-columns:repeat(6,1fr);column-gap:0;margin-top:34px}
	.w-open-txt{grid-column:2/7;grid-row:1;padding:0 var(--g) 34px 0}
	.w-open-a{grid-column:1/7;grid-row:2;margin-right:0;aspect-ratio:3/2}
	.w-open-b.circ{grid-column:1/4;grid-row:3;margin:-56px 0 0 var(--g);width:auto}
	.w-open-cap{grid-column:4/7;grid-row:3;align-self:end;text-align:right;padding:0 var(--g) 6px 0;font-size:14px}

	.w-window{padding:84px 0 90px}
	.w-window-head{padding:0 var(--g);display:block}
	.w-window-head .w-big{text-align:right;margin-left:0;margin-top:18px}
	.w-rooms-mini{padding:54px 0 0}
	.w-mini-h{padding:0 var(--g);font-size:26px}

	/* 짧은 카드 2열 : 왼쪽 줄은 왼쪽 끝, 오른쪽 줄은 오른쪽 끝에 붙이고 엇갈리게 */
	.w-mini-list,.rd-other-list{grid-template-columns:1fr 1fr;gap:28px 8px;margin-top:26px}
	.w-mini-list>.w-mini:nth-child(even),.rd-other-list>.w-mini:nth-child(even){margin-top:56px}
	.w-mini-list>.w-mini:nth-child(odd) .w-mini-en,.w-mini-list>.w-mini:nth-child(odd) .w-mini-ko,
	.rd-other-list>.w-mini:nth-child(odd) .w-mini-en,.rd-other-list>.w-mini:nth-child(odd) .w-mini-ko{padding-left:var(--g)}
	.w-mini-list>.w-mini:nth-child(even) .w-mini-en,.w-mini-list>.w-mini:nth-child(even) .w-mini-ko,
	.rd-other-list>.w-mini:nth-child(even) .w-mini-en,.rd-other-list>.w-mini:nth-child(even) .w-mini-ko{padding-right:var(--g)}
	.w-mini-img{aspect-ratio:4/5}
	.w-mini-en{font-size:15px;margin-top:12px}
	.w-mini-ko{font-size:11px}

	.w-pano-cap{position:static;text-align:right;font-size:38px;padding:18px var(--g) 0;background:none}
	.w-pano:before{height:40px;width:42%}

	.w-morning{padding:80px 0 90px}
	.w-morning-grid{grid-template-columns:1fr;gap:38px}
	.w-morning-txt{padding:0 var(--g)}
	.w-morning-txt .w-en{padding-left:50px}
	.w-sticky{position:static}
	.w-morning-imgs{gap:14px}
	.w-morning-imgs .m1{width:88%;margin:0}
	.w-morning-imgs .m2{width:60%;margin:0 0 0 auto}
	.w-morning-imgs .m3{width:76%;margin:0 0 0 var(--o)}

	.w-lounge2{padding:84px 0 90px}
	.w-lounge2>.w-chap,.w-lounge2>.w-big{padding:0 var(--g);text-align:right}
	.w-lounge2-grid{grid-template-columns:1.15fr .85fr;gap:10px;margin-top:38px}
	.w-lounge2-grid .l1{grid-column:1/2;grid-row:1}
	.w-lounge2-grid .l2{grid-column:2/3;grid-row:1;margin-top:70px}
	.w-lounge2-grid .l-txt{grid-column:1/3;grid-row:2;padding:18px var(--g) 0 calc(var(--g) + 50px)}

	.w-island{padding:84px 0 80px}
	.w-island .w-chap,.w-island .w-big{padding:0 var(--g)}
	.w-island .w-big{padding-left:calc(var(--g) + 50px)}
	.w-island-track{gap:16px;padding:40px var(--g) 10px;scroll-padding-left:var(--g)}
	.w-spot{width:150px}
	.w-spot-img{width:150px;height:150px}

	.w-final{grid-template-columns:1fr;gap:30px;padding:84px 0 96px}
	.w-final-img{width:80%;margin:0 0 0 auto}
	.w-final-txt{text-align:left;padding:0 var(--g)}
	.w-final-btns{justify-content:flex-start}
	.s-final{text-align:left}
	.s-final .w-final-txt{padding:0 var(--g)}
	.s-final .w-final-btns{justify-content:flex-start}

	/* ---------- 서브 공통 ---------- */
	.s-head{padding:96px var(--g) 30px}
	.s-head .s-mega{font-size:46px}
	.s-head .s-mega .ln2,.s-head .s-mega span.ln2{padding-left:50px}
	.s-bleed{padding-left:var(--o)}
	.nt:after{height:34px}

	/* 소개 */
	.s-greet{grid-template-columns:1fr;gap:28px;padding:74px var(--g) 80px}
	.s-greet-ko{padding-left:50px}
	.s-mag{grid-template-columns:repeat(6,1fr);column-gap:0;padding:74px 0 84px}
	.s-mag-a{grid-column:1/5;grid-row:1}
	.s-mag-b{grid-column:4/7;grid-row:1;align-self:end;margin:0 var(--g) -46px 0;position:relative;z-index:2}
	.s-mag-txt{grid-column:2/7;grid-row:2;padding:64px var(--g) 0 0}
	.s-mag-c{grid-column:2/7;grid-row:3;margin-top:46px}
	.s-mag-txt2{grid-column:1/7;grid-row:4;padding:24px var(--g) 0}

	/* 객실 목록 */
	.r-list{padding:20px 0 30px}
	.r-row,.r-row.rev{grid-template-columns:1fr;gap:24px;margin-bottom:76px}
	.r-row .r-img{margin:0 var(--o) 0 0}
	.r-row.rev .r-img{order:0;margin:0 0 0 var(--o)}
	.r-row .r-txt{padding:0 var(--g)}
	.r-row.rev .r-txt{padding:0 var(--g) 0 var(--o)}
	.r-info{padding:76px var(--g)}

	/* 객실 상세 : 사진을 화면 끝에 번갈아 붙인 웹진 배치 */
	.rd-about{grid-template-columns:1fr;gap:28px;padding:64px var(--g) 56px}
	.rd-gal{grid-template-columns:repeat(6,1fr);column-gap:10px;row-gap:10px;padding:0 0 84px;grid-auto-flow:row dense}
	.rd-g.g0{grid-column:1/7;margin:0;aspect-ratio:3/2}
	.rd-g.g1{grid-column:1/4;margin:0;aspect-ratio:4/5}
	.rd-g.g2{grid-column:4/7;margin:56px 0 0;aspect-ratio:4/5}
	.rd-g.g3{grid-column:2/7;margin:0;aspect-ratio:3/2}
	.rd-g.g4{grid-column:1/6;margin:0;aspect-ratio:16/10}
	.rd-other{padding:76px 0 20px}
	.rd-other>.w-chap{padding:0 var(--g)}

	/* 라운지 */
	.f-top{grid-template-columns:1fr;gap:28px;padding:10px 0 76px}
	.f-top-img{margin-right:var(--o)}
	.f-top-txt{padding:0 var(--g)}
	.f-mag{grid-template-columns:repeat(6,1fr);column-gap:10px;row-gap:0;padding:76px 0 84px;grid-auto-flow:row dense}
	.f-a{grid-column:1/5;margin:0}
	.f-b{grid-column:3/7;margin:-60px var(--g) 0 0;position:relative;z-index:2}
	.f-txt{grid-column:2/7;margin-top:26px;padding-right:var(--g)}
	.f-c{grid-column:1/7;margin-top:44px}
	.f-d{grid-column:4/7;margin-top:10px}
	.f-e{grid-column:1/4;margin-top:56px}
	.f-f{grid-column:2/7;margin-top:10px}

	/* 울릉도 */
	.u-loc{grid-template-columns:1fr;gap:28px;padding:10px 0 76px}
	.u-map{height:320px;margin-right:var(--o)}
	.u-loc-txt{padding:0 var(--g)}
	.u-spots{padding:76px 0 84px}
	.u-spots-head{padding:0 var(--g)}
	.u-grid{grid-template-columns:1fr 1fr;gap:34px 8px;margin-top:38px}
	.u-spot{grid-template-columns:1fr;gap:12px}
	.u-spot:nth-child(even){margin-top:56px}
	.u-spot:nth-child(odd) .u-spot-txt{padding-left:var(--g)}
	.u-spot:nth-child(even) .u-spot-txt{padding-right:var(--g)}
	.u-spot-img{max-width:none}

	/* 예약 */
	.v-top{grid-template-columns:1fr;gap:28px;padding:10px 0 76px}
	.v-top-img{margin-left:var(--o)}
	.v-top-txt{padding:0 var(--g)}
	.v-info{padding:76px var(--g) 84px}
	.v-cols{grid-template-columns:1fr;gap:48px;margin-top:56px;padding-left:0}
	.v-cols>*:nth-child(2){padding-left:50px}

	/* 여행 이야기 */
	.j-list{padding:10px 0 84px}
	.j-grid{grid-template-columns:1fr 1fr;gap:30px 8px}
	.j-card:nth-child(3n+2){margin-top:0}
	.j-card:nth-child(even){margin-top:56px}
	.j-card:nth-child(odd) .j-date,.j-card:nth-child(odd) .j-t{padding-left:var(--g)}
	.j-card:nth-child(even) .j-date,.j-card:nth-child(even) .j-t{padding-right:var(--g)}
	.j-empty{padding:30px var(--g) 70px}
	.j-body{padding:56px var(--g) 76px}
}

/* ---------- 태블릿 (768~1024) : 화면이 넓은 만큼 PC 배치에 가깝게 ---------- */
@media (min-width:768px) and (max-width:1024px){
	:root{--g:44px;--o:120px}
	.w-mega{font-size:96px}
	.w-mega .ln2,.w-mega span.ln2{padding-left:calc(var(--g) + 110px)}
	.w-big{font-size:68px}
	.w-mini-h{font-size:34px}
	.w-en-lead{font-size:21px}
	.w-en{font-size:18px}
	.w-ko{font-size:13px}
	.w-open-txt{grid-column:3/7}
	.w-open-a{grid-column:2/7}
	.w-open-b.circ{grid-column:1/3;margin:-90px 0 0 var(--g)}
	.w-rooms-mini{padding:64px 0 0 var(--o)}
	.w-mini-h{padding-left:0}
	.w-mini-list{grid-template-columns:repeat(4,1fr);gap:10px}
	.w-mini-list>.w-mini:nth-child(even){margin-top:60px}
	.w-mini-list>.w-mini .w-mini-en,.w-mini-list>.w-mini .w-mini-ko{padding:0!important}
	.w-mini-list>.w-mini:nth-child(4) .w-mini-en,.w-mini-list>.w-mini:nth-child(4) .w-mini-ko{padding-right:var(--g)!important}
	.w-pano-cap{font-size:64px}
	.w-morning-grid{grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start}
	.w-morning-txt{padding:0 0 0 var(--g)}
	.w-morning-txt .w-en{padding-left:0}
	.w-sticky{position:sticky;top:110px}
	.w-morning-imgs .m1{width:100%}
	.w-morning-imgs .m3{width:80%;margin-left:0}
	.w-lounge2-grid{grid-template-columns:1.2fr .8fr;gap:16px}
	.w-lounge2-grid .l-txt{padding-left:var(--o)}
	.w-spot{width:200px}
	.w-spot-img{width:200px;height:200px}
	.w-final{grid-template-columns:1fr 1fr;gap:44px;align-items:center}
	.w-final-img{width:100%;order:2}
	.w-final-txt{padding:0 0 0 var(--g)}
	.s-final{grid-template-columns:1fr}
	.s-head{padding-top:120px}
	.s-head .s-mega{font-size:78px}
	.s-head .s-mega .ln2,.s-head .s-mega span.ln2{padding-left:110px}
	.s-greet{grid-template-columns:1.1fr 1fr;gap:50px}
	.s-greet-ko{padding-left:0}
	.r-name{font-size:32px}
	.r-row .r-img{margin-right:var(--o)}
	.r-row .r-txt{padding:0 var(--o) 0 var(--g)}
	.r-row.rev .r-txt{padding:0 var(--g) 0 var(--o)}
	.r-info{grid-template-columns:1fr 2fr;gap:40px}
	.rd-about{grid-template-columns:1fr 1fr;gap:50px}
	.rd-gal{column-gap:16px;row-gap:16px}
	.rd-g.g2{margin-top:90px}
	.rd-other{padding-left:var(--o)}
	.rd-other>.w-chap{padding-left:0}
	.rd-other-list{grid-template-columns:repeat(3,1fr);gap:10px}
	.rd-other-list>.w-mini .w-mini-en,.rd-other-list>.w-mini .w-mini-ko{padding:0!important}
	.rd-other-list>.w-mini:nth-child(2){margin-top:60px}
	.rd-other-list>.w-mini:nth-child(3){margin-top:0}
	.f-top-txt,.u-loc-txt,.v-top-txt{padding:0 var(--o) 0 var(--g)}
	.u-map{height:420px}
	.u-grid{gap:50px 16px}
	.u-spot{grid-template-columns:1fr;gap:14px}
	.u-en{font-size:22px}
	.v-cols{grid-template-columns:1fr 1fr;gap:40px}
	.v-cols>*:nth-child(2){padding-left:0;margin-top:80px}
	.j-grid{grid-template-columns:repeat(3,1fr);gap:40px 10px}
	.j-card:nth-child(even){margin-top:0}
	.j-card:nth-child(3n+2){margin-top:70px}
	.j-card .j-date,.j-card .j-t{padding:0 10px!important}
}

/* v3.1.1 : 버튼 글자 한글 (연세 있는 손님도 바로 알아보도록) */
.top-book,.mbar a,.w-book-go,.w-solid,.w-line-btn{font-family:'Pretendard Variable','Pretendard',sans-serif;letter-spacing:.02em;font-weight:600}
.top-book{font-size:14px}
.w-solid,.w-line-btn{font-size:14px}
.w-book-go{font-size:15px}
.mbar a{font-size:15px}
@media (max-width:1024px){.top-book{font-size:12.5px;letter-spacing:0}.w-solid,.w-line-btn{font-size:13px}}

/* v3.1.2 : 메뉴 버튼을 누구나 찾기 쉽게 (흰 사각 버튼 + 줄 3개 + '메뉴' 글자), 모바일에도 언어 선택 */
.top-menu{flex-direction:column;justify-content:center;gap:7px;width:96px;padding:0;background:#fff;color:var(--ink2);font-family:'Pretendard Variable','Pretendard',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;box-shadow:inset -1px 0 0 rgba(0,0,0,.05)}
.top-menu .bars{width:26px;height:14px}
.top-menu .bars i{height:2px}
.top-menu .bars i:nth-child(1){top:0}
.top-menu .bars i:nth-child(2){top:6px;transition:opacity .3s}
.top-menu .bars i:nth-child(3){top:12px}
body.menu-open .top-menu .bars i:nth-child(1){top:6px;transform:rotate(45deg)}
body.menu-open .top-menu .bars i:nth-child(2){opacity:0}
body.menu-open .top-menu .bars i:nth-child(3){top:6px;transform:rotate(-45deg)}
.top-menu .top-menu-t{display:block!important}
body.menu-open .top-menu{background:var(--deep);color:#fff}
/* 전체 메뉴 글자 더 또렷하게 */
.ovl-nav em{font-weight:400;color:var(--ink2)}
.ovl-nav span{font-size:15px;font-weight:600;color:#4b4640}
@media (max-width:1024px){
	.top-menu{width:62px;gap:5px;font-size:11px}
	.top-menu .bars{width:22px;height:12px}
	.top-menu .bars i:nth-child(2){top:5px}
	.top-menu .bars i:nth-child(3){top:10px}
	body.menu-open .top-menu .bars i:nth-child(1),body.menu-open .top-menu .bars i:nth-child(3){top:5px}
	.top-lang{display:block}
	.top-lang-btn{width:50px;gap:4px;font-size:11.5px;letter-spacing:.04em;font-weight:600}
	.top-lang-btn svg{width:8px}
	.top-lang-list{min-width:140px}
	.top-logo-en{font-size:18px;letter-spacing:.22em;padding-left:.22em}
	.top-logo-sub{font-size:6.5px;letter-spacing:.16em}
	.top-logo{left:calc(50% - 25px)}
	.ovl-nav em{font-size:36px}
	.ovl-nav span{font-size:14px}
	.ovl-nav a{padding:8px 0}
}

.ovl-nav span{white-space:nowrap}
@media (max-width:600px){
	.top-logo-sub{display:none}
	.top-logo-en{font-size:17px;letter-spacing:.2em;padding-left:.2em}
	.top-logo{left:calc(50% - 28px)}
}