/* 청량리 시그니처 메인: 배너 2장 / 입지 / Life Story 6장 */
html{scroll-behavior:auto;scroll-padding-top:0}

/* ---------- 헤더: 배너 위 투명, 내려가면 흰색 ---------- */
body.ref-on .header{position:fixed;left:0;right:0;top:0;height:76px;background:transparent;border-bottom-color:transparent;transition:background .45s,border-color .45s,box-shadow .45s}
body.ref-on .header .nav a{font-size:16px;font-weight:700;transition:color .45s}
body.ref-on .brand img{transition:filter .45s}
body.ref-on:not(.ref-solid) .header .brand img{filter:brightness(0) invert(1)}
body.ref-on:not(.ref-solid) .header .nav a,body.ref-on:not(.ref-solid) .header .header-call{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
body.ref-on.ref-solid .header{background:#fff;border-bottom-color:#e9ecef;box-shadow:0 4px 18px rgba(10,30,50,.06)}

.ref-screen{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden}
.ref-cg{position:absolute;right:92px;bottom:12px;margin:0;z-index:5;font-size:11px;color:rgba(255,255,255,.8);text-shadow:0 1px 4px rgba(0,0,0,.55)}

/* ---------- 1. 배너: 오른쪽에서 밀려 들어오는 2장 ---------- */
.ref-main{background:#0b2b43}
.ref-slide{position:absolute;inset:0;overflow:hidden;transform:translate3d(100%,0,0);transition:transform 1.2s cubic-bezier(.65,0,.35,1);z-index:1}
.ref-slide.on{transform:none;z-index:2}
.ref-slide.off{transform:translate3d(-30%,0,0);z-index:1}
.ref-slide.no-anim{transition:none}
.ref-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scale(1.1)}
.ref-slide.on .ref-bg{transform:scale(1);transition:transform 7s cubic-bezier(.2,.6,.3,1)}
.ref-cloud{position:absolute;bottom:-4%;width:56vw;height:78vh;background:center/100% 100% no-repeat;pointer-events:none;will-change:transform}
.ref-cl{left:-16vw;background-image:url('cloud-l.webp');transform:translate3d(14%,0,0)}
.ref-cr{right:-16vw;background-image:url('cloud-r.webp');transform:translate3d(-14%,0,0)}
/* 가운데에 모여 있던 구름이 양옆으로 갈라지며 건물이 드러남 */
.ref-slide.on .ref-cl{animation:refPartL 7s cubic-bezier(.2,.6,.3,1) forwards}
.ref-slide.on .ref-cr{animation:refPartR 7s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes refPartL{from{transform:translate3d(14%,0,0)}to{transform:translate3d(-12%,3%,0)}}
@keyframes refPartR{from{transform:translate3d(-14%,0,0)}to{transform:translate3d(12%,3%,0)}}
.ref-copy{position:absolute;z-index:3;color:#fff;text-shadow:0 2px 18px rgba(4,22,44,.55);opacity:0;transform:translateY(22px)}
.ref-slide.on .ref-copy{opacity:1;transform:none;transition:opacity 1s .7s ease,transform 1.1s .7s cubic-bezier(.2,.75,.2,1)}
.ref-copy p{margin:0 0 10px;font-size:clamp(17px,1.45vw,25px);font-weight:500;letter-spacing:-.03em}
.ref-copy h1{margin:0;font-size:clamp(28px,2.7vw,48px);line-height:1.3;font-weight:500;letter-spacing:-.05em}
.ref-copy h1 b{font-weight:800}
.ref-copy1{left:9vw;top:20vh}
.ref-copy2{left:7vw;top:22vh}
.ref-sign{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:flex-start;color:#fff;text-shadow:0 2px 14px rgba(4,22,44,.55);opacity:0}
.ref-slide.on .ref-sign{opacity:1;transition:opacity 1.2s 1.2s ease}
.ref-sign small{font:600 11px/1 "Montserrat",sans-serif;letter-spacing:.3em}
.ref-sign strong{font:italic 400 clamp(30px,2.7vw,46px)/1.25 Georgia,"Times New Roman",serif}
.ref-sign span{font-size:12px;letter-spacing:.2em;font-weight:600}
.ref-sign1{left:75vw;top:24vh}
.ref-sign2{left:75vw;top:20vh}

/* ---------- 2. 입지: 지도가 오른쪽에서 밀려 들어옴 ---------- */
.ref-loc{background:#f6f7f4;color:#14233a}
.ref-map{position:absolute;top:76px;right:0;bottom:0;width:72vw;transform:translate3d(100%,0,0)}
.ref-map img{width:100%;height:100%;object-fit:cover;object-position:right center}
.ref-map:after{content:"";position:absolute;inset:0 auto 0 0;width:12%;background:linear-gradient(90deg,#f6f7f4 5%,rgba(246,247,244,0))}
.ref-active .ref-map,.ref-loc.ref-active .ref-map{transform:none;transition:transform 1.2s cubic-bezier(.2,.75,.2,1)}
.ref-loc-copy{position:absolute;left:5vw;top:50%;width:27vw;margin-top:-130px;z-index:2}
.ref-loc-copy>*{opacity:0;transform:translateY(20px)}
.ref-loc.ref-active .ref-loc-copy>*{opacity:1;transform:none;transition:opacity .9s ease,transform 1s cubic-bezier(.2,.75,.2,1)}
.ref-loc.ref-active .ref-loc-tag{transition-delay:.7s}
.ref-loc.ref-active h2{transition-delay:.85s}
.ref-loc.ref-active .ref-loc-text{transition-delay:1s}
.ref-loc.ref-active .ref-more{transition-delay:1.15s}
.ref-loc-tag{margin:0 0 14px;font:700 14px/1 "Montserrat",sans-serif;color:#8a7650}
.ref-loc h2{margin:0;font-size:clamp(24px,2.3vw,40px);line-height:1.35;font-weight:500;letter-spacing:-.05em}
.ref-loc h2 b{font-weight:800;color:#0b2b43}
.ref-loc-text{margin:22px 0 26px;font-size:clamp(13px,.95vw,16px);line-height:1.85;color:#4c5a68;letter-spacing:-.02em}
.ref-more{height:34px;padding:0 16px;border:1px solid #9aa4ad;border-radius:18px;background:none;font:600 11px/1 "Montserrat",sans-serif;letter-spacing:.08em;color:#14233a;cursor:zoom-in}
.ref-more i{font-style:normal;margin-left:6px}
.ref-more:hover{background:#0b2b43;color:#fff;border-color:#0b2b43}

/* ---------- 3. Life Story: 휠·점으로 넘김 ---------- */
.ref-life{background:#05090f;color:#fff}
.ref-life-slide{position:absolute;inset:76px 0 0 0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .9s ease;transform:scale(1.04)}
.ref-life-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,18,.76) 0%,rgba(5,10,18,.42) 42%,rgba(5,10,18,.16) 100%),linear-gradient(0deg,rgba(5,10,18,.72) 0%,rgba(5,10,18,0) 42%)}
.ref-life-slide.on{opacity:1;transform:scale(1);transition:opacity .9s ease,transform 6s cubic-bezier(.2,.6,.3,1)}
.ref-life-head{position:absolute;left:7vw;top:22vh;z-index:3}
.ref-life-head small{font-size:14px;font-weight:600;opacity:.9}
.ref-life-head h2{margin:6px 0 12px;font:600 clamp(34px,3.5vw,62px)/1.15 "Montserrat",sans-serif;letter-spacing:-.01em;white-space:nowrap;clip-path:inset(0 100% 0 0)}
.ref-life-head h2.run{animation:refWipe 1s .15s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes refWipe{to{clip-path:inset(0 -10% 0 0)}}
.ref-life-head h2 b{margin-left:.12em;font-size:1.35em;font-weight:500;color:#c9a57a;font-style:italic}
.ref-life-head p{margin:0 0 20px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.82);letter-spacing:-.02em}
.ref-life-dots{display:flex;gap:12px}
.ref-life-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.3s}
.ref-life-dots button.on{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.28)}
.ref-cap{position:absolute;z-index:2;left:var(--x);bottom:9vh;opacity:0;transform:translateY(24px)}
.ref-life-slide.on .ref-cap{opacity:1;transform:none;transition:opacity .8s .5s ease,transform .9s .5s cubic-bezier(.2,.75,.2,1)}
.ref-cap em{display:inline-block;padding:4px 11px;border-radius:12px;background:#b48a5a;font:600 11px/1.2 "Montserrat",sans-serif;font-style:normal}
.ref-cap h3{margin:12px 0 6px;font-size:clamp(20px,1.9vw,32px);font-weight:700;letter-spacing:-.04em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ref-cap p{margin:0;font-size:14px;color:rgba(255,255,255,.85);letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ---------- 오른쪽 아래 고정 버튼 ---------- */
.ref-top{position:fixed;right:30px;bottom:124px;z-index:60;width:46px;height:46px;border-radius:50%;background:#14224f;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 9px/1 "Montserrat",sans-serif;text-decoration:none}
.ref-top i{font-style:normal;font-size:12px;margin-bottom:2px}
.ref-badge{position:fixed;right:14px;bottom:18px;z-index:60;width:96px;height:96px;border-radius:50%;background:#fff;color:#fff;display:grid;place-items:center;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.ref-badge svg{position:absolute;inset:0;animation:refSpin 16s linear infinite}
.ref-badge text{font:700 9.5px "Montserrat",sans-serif;letter-spacing:.14em;fill:#8a6a44}
@keyframes refSpin{to{transform:rotate(360deg)}}
.ref-badge b{width:60px;height:60px;border-radius:50%;background:#a97f50;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.3}

body.ref-on .stats{position:relative;z-index:2}
.ref-burger,.ref-phone,.ref-drawer,.ref-dim,.ref-arrow{display:none}
body.ref-on .nav a.on{color:var(--gold)}

/* ---------- 하위 페이지 상단: 조감도가 움직이며 문구가 나타남 ---------- */
.ref-visual{position:relative;height:400px;margin-top:76px;overflow:hidden;background:#0b2b43;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.ref-visual-bg{position:absolute;inset:0;background:url('banner1.jpg') center 30%/cover no-repeat;animation:refParallax 3s .2s cubic-bezier(.2,.6,.3,1) both}
.ref-visual-bg:after{content:"";position:absolute;inset:0;background:rgba(6,16,30,.42)}
@keyframes refParallax{from{transform:scale(1.14) translate3d(0,3%,0)}to{transform:none}}
.ref-vl,.ref-vr{bottom:-16%;width:44vw;height:360px;opacity:.82}
.ref-vl{left:-10vw;background-image:url('cloud-l.webp');animation:refVisL 3s .2s ease both}
.ref-vr{right:-10vw;background-image:url('cloud-r.webp');animation:refVisR 3s .2s ease both}
@keyframes refVisL{from{transform:translate3d(14%,0,0)}to{transform:none}}
@keyframes refVisR{from{transform:translate3d(-14%,0,0)}to{transform:none}}
.ref-visual-copy{position:relative;z-index:2;animation:refSubText 1.5s .4s ease both;text-shadow:0 2px 14px rgba(0,0,0,.45)}
@keyframes refSubText{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.ref-visual-copy p{margin:0 0 6px;font-size:clamp(17px,1.6vw,26px);font-weight:500;letter-spacing:-.03em;color:#fff}
.ref-visual-copy h2{margin:0 0 14px;font-size:clamp(21px,2.1vw,36px);font-weight:500;letter-spacing:-.04em;color:#fff}
.ref-visual-copy h2 b{font-weight:800}
.ref-visual-copy span{display:inline-block;padding:5px 16px;background:#14224f;font-size:14px;font-weight:600;letter-spacing:-.02em;text-shadow:none}
.ref-page-title{padding:64px 20px 8px;text-align:center}
.ref-page-title h1{margin:0;font-size:32px;font-weight:600;letter-spacing:-.04em;color:#14233a}
.ref-page-title i{display:block;width:26px;height:1px;margin:22px auto 0;background:#aab1b8}
body.ref-sub .section{padding-top:56px}

/* ---------- 관심고객 등록 ---------- */
.ref-reg{max-width:1120px;margin:0 auto;padding:90px 24px 100px;color:#2b3440}
.ref-reg-head{text-align:center;margin-bottom:56px}
.ref-reg-head h2{margin:0;font:600 clamp(30px,3.6vw,56px)/1.1 "Montserrat",sans-serif;letter-spacing:.04em;color:#14233a}
.ref-reg-head p{margin:12px 0 0;font-size:16px;color:#5b6570}
.ref-form{display:grid;grid-template-columns:1fr 1fr;gap:30px 30px}
.ref-form label>span{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:#3a434e}
.ref-form b{color:#c0392b;font-weight:600}
.ref-form input:not([type=checkbox]),.ref-form select,.ref-form textarea{display:block;width:100%;height:44px;padding:0 13px;border:1px solid #c9ccd0;border-radius:2px;background:#eff0f1;font:inherit;font-size:14px;color:#222;outline:none;transition:border-color .2s,background .2s}
.ref-form textarea{height:auto;padding:12px 13px;resize:vertical}
.ref-form input:focus,.ref-form select:focus,.ref-form textarea:focus{border-color:#0274be;background:#fff}
.ref-form small{display:block;margin-top:6px;font-size:12px;color:#7a828a}
.ref-count{text-align:right}
.ref-wide{grid-column:1/-1}
.ref-agree-t{margin:0 0 12px;font-size:13px;font-weight:600;color:#3a434e}
.ref-agree{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;cursor:pointer}
.ref-agree input{width:18px;height:18px;margin:0}
.ref-form button{height:42px;padding:0 28px;border:0;border-radius:2px;background:#0274be;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
.ref-form button:hover{background:#14224f}
.ref-form button:disabled{opacity:.6;cursor:wait}
.ref-status{min-height:20px;margin:12px 0 0;font-size:14px;font-weight:600;color:#0b5c8e}
.ref-privacy{margin:64px auto 0;padding:0 30px;font-size:13px;line-height:1.75;color:#4a535d}
.ref-privacy h3{margin:0 0 6px;font-size:18px;font-weight:700;color:#222}
.ref-privacy h4{margin:20px 0 4px;font-size:14px;font-weight:700;color:#222}
.ref-privacy p{margin:0}
/* ---------- 여수 해링턴 스타일 공통: 글꼴·색 ---------- */
:root{--navy:#1f2a6b;--gold:#96775a;--ink:#1c2233}
body.ref-on,body.ref-on button,body.ref-on input{font-family:"Noto Sans KR","Apple SD Gothic Neo",sans-serif}
body.ref-sub .section.dark{background:#f7f6f2}
body.ref-sub .section.dark .section-head h2{color:var(--ink)}
body.ref-sub .section-head h2 em{color:var(--navy);font-style:normal}

/* 관심고객 폼: 큼직하고 깔끔하게 */
.ref-reg{max-width:900px}
.ref-reg-head p{font-size:19px;font-weight:500;color:#3a4250}
.ref-form{gap:34px 28px}
.ref-form label>span{margin-bottom:11px;font-size:18px;font-weight:500;color:#1c2233}
.ref-form input:not([type=checkbox]){height:60px;padding:0 18px;border-color:#d4d7dc;background:#f6f7f8;font-size:18px}
.ref-form input::placeholder{color:#9aa1aa}
.ref-form input:focus{border-color:var(--navy)}
.ref-form .ref-agree{gap:11px;font-size:17px;font-weight:400;color:#2b3440}
.ref-agree input{width:22px;height:22px}
.ref-submit{text-align:center}
.ref-form button{width:280px;max-width:100%;height:62px;border-radius:0;background:var(--navy);font-size:20px;font-weight:500}
.ref-form button:hover{background:var(--gold)}
.ref-status{font-size:16px}

/* 입지환경: 지도 + 2×2 표 */
.ref-pos{max-width:1200px;margin:0 auto;padding:30px 24px 110px}
.ref-pos-head{text-align:center;margin-bottom:44px}
.ref-pos-head p{margin:0 0 8px;font:700 22px/1.2 "Montserrat",sans-serif;color:var(--gold)}
.ref-pos-head h2{margin:0;font-size:clamp(26px,3vw,42px);font-weight:500;letter-spacing:-.04em;color:var(--navy)}
.ref-pos-head h2 b{font-weight:800}
.ref-pos-map{display:block;width:100%;padding:0;border:1px solid var(--navy);background:none;cursor:zoom-in}
.ref-pos-map img{width:100%;height:auto}
.ref-pos-table{display:grid;grid-template-columns:1fr 1fr;gap:56px 40px;margin-top:64px}
.ref-pos-table article{display:flex;gap:26px;align-items:flex-start;--c:var(--navy)}
.ref-pos-table article.alt{--c:var(--gold)}
.ref-pos-ic{flex:0 0 140px;height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--c);color:#fff}
.ref-pos-ic svg{width:46px;height:46px;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ref-pos-ic span{font:500 13px/1 "Montserrat",sans-serif;letter-spacing:.06em}
.ref-pos-table h3{margin:0 0 12px;font-size:28px;line-height:1.3;font-weight:400;letter-spacing:-.04em;color:var(--c)}
.ref-pos-table h3 b{font-weight:700}
.ref-pos-table p{margin:0;font-size:16px;line-height:1.7;color:#2b3440;letter-spacing:-.02em}

/* 프리미엄: 이어지는 곡선 표 */
.ref-prem-list{max-width:1200px;margin:0 auto;padding:30px 24px 90px}
.ref-prem-title{text-align:center;margin-bottom:36px}
.ref-prem-title p{margin:0;font-size:24px;font-weight:500;color:#111}
.ref-prem-title h2{margin:0;font:700 clamp(46px,6vw,84px)/1.05 "Montserrat",sans-serif;color:var(--navy)}
.ref-prem-title h2 b{position:relative;top:-.16em;font-size:1.42em;line-height:.8;font-weight:700;color:#c9b296}
.ref-snake{position:relative;max-width:1000px;margin:0 auto}
.ref-snake svg{display:block;width:100%;height:auto}
.ref-snake ol{position:absolute;inset:1.1%;margin:0;padding:0;list-style:none;display:grid;grid-template-rows:repeat(6,1fr)}
.ref-snake li{position:relative;display:flex;align-items:center;justify-content:center;padding:0 12%}
.ref-snake li>i{position:absolute;left:5%;top:50%;width:66px;height:66px;margin-top:-33px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font:500 25px/1 "Montserrat",sans-serif;font-style:normal}
.ref-snake li:nth-child(even)>i{left:auto;right:5%}
.ref-snake li p{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(14px,2.2vw,27px);font-weight:400;letter-spacing:-.04em;color:var(--navy);white-space:nowrap}
.ref-snake li p b{font-size:1.25em;font-weight:800}
.ref-snake li p small{margin-left:-6px;font-size:.62em}
.ref-snake li svg{flex:0 0 auto;width:1.75em;height:1.75em;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 왼쪽·오른쪽·아래에서 나타남 */
.fi{opacity:0;transition:opacity 1.25s ease,transform 1.25s cubic-bezier(.2,.75,.2,1)}
.fi-l{transform:translate3d(-50px,0,0)}
.fi-r{transform:translate3d(50px,0,0)}
.fi-u{transform:translate3d(0,40px,0)}
.fi.in{opacity:1;transform:none}

@media(max-width:1000px){
  /* 모바일 헤더: 햄버거 / 가운데 이름 / 전화 */
  body.ref-on .header{height:52px;padding:0;justify-content:center;border-bottom:1px solid rgba(255,255,255,.25)}
  body.ref-on.ref-solid .header{border-bottom-color:#e9ecef}
  body.ref-on .header .header-call{display:none}
  body.ref-on .logo-brand{min-width:0}
  body.ref-on .logo-brand img{width:128px;max-height:30px;object-position:center}
  .ref-burger{display:flex;position:absolute;left:12px;top:10px;width:32px;height:32px;padding:6px 4px;flex-direction:column;justify-content:space-between;background:none;border:0;cursor:pointer}
  .ref-burger i{display:block;height:2px;background:#fff;transition:background .45s}
  .ref-phone{display:flex;position:absolute;right:12px;top:12px;width:28px;height:28px;align-items:center;justify-content:center}
  .ref-phone svg{width:24px;height:24px;fill:#fff;transition:fill .45s}
  body.ref-solid .ref-burger i{background:#14224f}
  body.ref-solid .ref-phone svg{fill:#14224f}
  .ref-drawer{display:block;position:fixed;left:0;top:0;bottom:0;width:62vw;max-width:280px;z-index:120;background:#e6effa;transform:translate3d(-100%,0,0);transition:transform .4s cubic-bezier(.2,.75,.2,1)}
  .ref-drawer.open{transform:none}
  .ref-drawer-close{width:52px;height:52px;background:none;border:0;font-size:30px;line-height:1;color:#14224f;cursor:pointer}
  .ref-drawer nav{display:flex;flex-direction:column;padding:4px 22px}
  .ref-drawer a{padding:14px 0;color:#14224f;font-size:16px;font-weight:700;text-decoration:none}
  .ref-dim{display:block;position:fixed;inset:0;z-index:110;background:rgba(5,12,24,.45);opacity:0;pointer-events:none;transition:opacity .4s}
  .ref-dim.open{opacity:1;pointer-events:auto}
  /* 아래 고정 버튼 색 */
  body.ref-on .mobile-bottom a:first-child{background:#14224f}
  body.ref-on .mobile-bottom a:last-child{background:#96775a}
  .ref-screen{min-height:0}
  body.ref-sub .ref-burger i{background:#14224f}
  body.ref-sub .ref-phone svg{fill:#14224f}
  .ref-visual{height:230px;margin-top:52px}
  .ref-visual-copy p{font-size:15px}
  .ref-visual-copy h2{font-size:18px;margin-bottom:10px}
  .ref-visual-copy span{font-size:12px}
  .ref-vl,.ref-vr{width:60vw;height:150px}
  .ref-page-title{padding:38px 20px 0}
  .ref-page-title h1{font-size:24px}
  .ref-page-title i{margin-top:14px}
  body.ref-sub .section{padding-top:32px}
  body.ref-on .footer{padding-bottom:64px}
  .ref-reg{padding:56px 18px 70px}
  .ref-reg-head{margin-bottom:34px}
  .ref-reg-head p{font-size:14px}
  .ref-form{grid-template-columns:1fr;gap:24px}
  .ref-reg-head p{font-size:16px}
  .ref-form label>span{font-size:16px}
  .ref-form input:not([type=checkbox]){height:54px;font-size:16px}
  .ref-form .ref-agree{align-items:flex-start;font-size:15px}
  .ref-form button{width:100%;height:56px;font-size:18px}
  .ref-pos{padding:18px 16px 70px}
  .ref-pos-head{margin-bottom:22px}
  .ref-pos-head p{font-size:15px}
  .ref-pos-head h2{font-size:21px}
  .ref-pos-head h2 b{display:block}
  .ref-pos-table{grid-template-columns:1fr;gap:26px;margin-top:32px}
  .ref-pos-table article{gap:14px}
  .ref-pos-ic{flex-basis:84px;height:84px;gap:5px}
  .ref-pos-ic svg{width:28px;height:28px}
  .ref-pos-ic span{font-size:9px}
  .ref-pos-table h3{margin-bottom:6px;font-size:19px}
  .ref-pos-table p{font-size:13.5px;line-height:1.6}
  .ref-prem-list{padding:14px 12px 50px}
  .ref-prem-title{margin-bottom:18px}
  .ref-prem-title p{font-size:16px}
  .ref-snake li{padding:0 11% 0 15%}
  .ref-snake li:nth-child(even){padding:0 15% 0 11%}
  .ref-snake li>i{width:30px;height:30px;margin-top:-15px;font-size:12px}
  .ref-snake li p{gap:5px;font-size:3.1vw}
  .ref-snake li svg{display:none}
  .fi-l,.fi-r{transform:translate3d(0,30px,0)}
  /* 모바일 배너: 세로 전용 이미지 + 가운데 문구가 차분하게 올라옴 */
  .ref-slide{transition-duration:1.4s}
  .ref-s1 .ref-bg{background-image:url('banner1-m.jpg')!important}
  .ref-s2 .ref-bg{background-image:url('banner2-m.jpg')!important}
  .ref-bg{bottom:46px;background-position:center bottom;transform:none} /* 아래 고정 버튼에 땅이 가리지 않게 */
  .ref-slide.on .ref-bg{animation:refFadeIn 3s .2s ease both;transition:none}
  @keyframes refFadeIn{from{opacity:.75}to{opacity:1}}
  .ref-cloud{display:none}
  .ref-copy1,.ref-copy2{left:5vw;right:5vw;top:calc(52px + 5vh);text-align:center;transform:translateY(34px)}
  .ref-slide.on .ref-copy{transition:opacity 1.6s 1s ease,transform 1.6s 1s ease}
  .ref-copy p{font-size:4.8vw;margin-bottom:6px}
  .ref-copy h1{font-size:6.6vw;line-height:1.3}
  .ref-sign,.ref-sign1,.ref-sign2{left:0;right:0;top:calc(52px + 5vh + 27vw + 18px);align-items:center;text-align:center;transform:translateY(24px)}
  .ref-slide.on .ref-sign{transform:none;transition:opacity 1.6s 1.3s ease,transform 1.6s 1.3s ease}
  .ref-sign small{font-size:9px}
  .ref-sign strong{font-size:6.6vw}
  .ref-sign span{font-size:10px}
  /* 입지: 위에 지도, 아래에 문구 */
  .ref-map{top:52px;bottom:auto;left:0;right:0;width:100vw;height:66.7vw}
  .ref-map:after{display:none}
  .ref-map img{object-fit:cover;object-position:center}
  .ref-loc-copy{left:6vw;top:calc(52px + 66.7vw + 22px);width:74vw;margin:0}
  .ref-loc-tag{font-size:11px;margin-bottom:8px}
  .ref-loc h2{font-size:21px}
  .ref-loc-text{margin:10px 0 12px;font-size:12.5px;line-height:1.7}
  .ref-more{height:28px;font-size:10px}
  /* Life Story: 머리글·장면 문구·좌우 화살표 */
  .ref-life-slide{inset:52px 0 46px 0;background-position:60% center}
  .ref-life-slide:first-of-type{background-position:60% top!important}
  .ref-life-head{left:6vw;right:6vw;top:calc(52px + 8vh)}
  .ref-life-head small{font-size:11px}
  .ref-life-head h2{white-space:normal;font-size:9vw;margin:4px 0 8px}
  .ref-life-head p{font-size:11px;margin-bottom:12px;max-width:70vw}
  .ref-cap{left:6vw!important;right:18vw;bottom:5vh}
  .ref-cap h3{font-size:18px;margin:8px 0 4px}
  .ref-cap p{font-size:11.5px;line-height:1.45}
  .ref-arrow{display:block;position:absolute;top:50%;z-index:4;width:36px;height:52px;margin-top:-26px;background:none;border:0;color:#fff;font-size:34px;line-height:1;text-shadow:0 1px 6px rgba(0,0,0,.5);cursor:pointer}
  .ref-prev{left:2px}
  .ref-next{right:2px}
  /* 오른쪽 아래 고정 버튼 */
  .ref-top{right:10px;bottom:128px;width:36px;height:36px;font-size:7px}
  .ref-top i{font-size:10px;margin-bottom:0}
  .ref-badge{right:6px;bottom:54px;width:66px;height:66px;background:rgba(255,255,255,.92)}
  .ref-badge b{width:42px;height:42px;font-size:8.5px}
}
@media(prefers-reduced-motion:reduce){
  .ref-slide,.ref-bg,.ref-life-slide,.ref-map{transition:none!important}
  .ref-cloud,.ref-badge svg{animation:none!important}
}