/* ═══════════════════════════════════════════════════
   펜타힐즈 더블유 스퀘어 v5 FINAL
   
   핵심 구조:
   body { background:#fff; }          ← 흰색, margin 없음
   .page-wrap { margin-right:--pw }   ← 콘텐츠만 밀기
   .side-panel { position:fixed; right:0 } ← 독립 고정
   ═══════════════════════════════════════════════════ */

:root {
  --pk  : #e060b8;
  --pk2 : #c040a0;
  --gd  : #c8a030;
  --nv  : #1a2240;
  --gr  : #6b7280;
  --bg2 : #f7f8fb;
  --bd  : #e5e7eb;
  --pw  : 96px;
  --nh  : 68px;
  --bbh : 58px;
  --dw  : 288px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

/* body: 순수 흰색, margin 없음 */
body {
  font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  background: #fff;
  color: var(--nv);
  overflow-x: hidden;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { display:block; max-width:100%; }

/* ── page-wrap: 콘텐츠 전체 감싸기, 오른쪽 패널 공간 확보 ── */
.page-wrap {
  margin-right: var(--pw);
  background: #fff;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════
   우측 고정 패널 (body 직접 자식, page-wrap 바깥)
═══════════════════════════════════════════════════ */
.side-panel {
  position: fixed;
  top: 0; right: 0;
  width: var(--pw);
  height: 100vh;
  z-index: 1000;
  background: rgba(26,34,64,.72);
  border-left: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(12px);
}

/* 로고 */
.sp-logo-wrap {
  width: 100%;
  padding: 20px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  justify-content: center;
}
.sp-logo {
  position: relative;
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  perspective: 500px;
  cursor: pointer;
}
.sp-logo-img {
  width: 58px; height: 58px;
  object-fit: contain;
  mix-blend-mode: screen;
  position: relative; z-index: 2;
}

/* Y축 좌측 플립 (세로 중심 회전) */
.sp-logo.flipping .sp-logo-img {
  animation: flipY .9s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes flipY {
  0%  { transform: rotateY(0deg); }
  30% { transform: rotateY(-120deg) scale(1.15); }
  65% { transform: rotateY(-270deg) scale(1.05); }
  100%{ transform: rotateY(-360deg); }
}

/* 파티클 */
.pk { position:absolute; border-radius:50%; width:5px; height:5px; background:#fff; opacity:0; pointer-events:none; }
.pk1{top:-3px;left:50%;}  .pk2{top:7px;right:-4px;} .pk3{bottom:-3px;left:50%;}
.pk4{top:7px;left:-4px;}  .pk5{top:50%;right:-6px;} .pk6{top:50%;left:-6px;}
.pk7{bottom:5px;right:-3px;} .pk8{bottom:5px;left:-3px;}

.sp-logo.flipping .pk { animation: pkBurst .85s ease forwards; }
.sp-logo.flipping .pk1{animation-delay:.06s;--tx:0px;--ty:-20px;}
.sp-logo.flipping .pk2{animation-delay:.12s;--tx:18px;--ty:-10px;}
.sp-logo.flipping .pk3{animation-delay:.18s;--tx:0px;--ty:20px;}
.sp-logo.flipping .pk4{animation-delay:.10s;--tx:-18px;--ty:-10px;}
.sp-logo.flipping .pk5{animation-delay:.22s;--tx:22px;--ty:0px;}
.sp-logo.flipping .pk6{animation-delay:.16s;--tx:-22px;--ty:0px;}
.sp-logo.flipping .pk7{animation-delay:.20s;--tx:15px;--ty:15px;}
.sp-logo.flipping .pk8{animation-delay:.14s;--tx:-15px;--ty:15px;}
@keyframes pkBurst {
  0%  { opacity:0; transform:scale(0) translate(0,0); }
  28% { opacity:1; transform:scale(2) translate(var(--tx),var(--ty)); }
  65% { opacity:.6; }
  100%{ opacity:0; transform:scale(.3) translate(calc(var(--tx)*2),calc(var(--ty)*2)); }
}
/* glow 링 */
.sp-logo.flipping::before {
  content:''; position:absolute; inset:-9px; border-radius:50%; z-index:1;
  border:2px solid rgba(224,96,184,.8);
  animation:glowRing .9s ease forwards;
  pointer-events:none;
}
@keyframes glowRing {
  0%  { opacity:0; transform:scale(.6); }
  40% { opacity:1; transform:scale(1.2); box-shadow:0 0 16px rgba(224,96,184,.9); }
  100%{ opacity:0; transform:scale(1.6); }
}

/* Wonderful City · Life 세로 문구 */
.sp-words {
  flex: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 0;
  /*
   * Gloock Regular (구글폰트) — functions.php enqueue에서 로드
   * 세로 1줄: 글자들이 세로로 한 줄에 나열
   */
  font-family: 'Gloock', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .38em;     /* 세로 자간 넓게 */
  color: rgba(255,255,255,.82);
  line-height: 1;
  user-select: none;
}

/* Wonderful — W 노란색 강조 */
.spw-wonderful {
  font-family: 'Gloock', Georgia, serif;
  font-size: 15px;
  letter-spacing: .38em;
  color: rgba(255,255,255,.82);
}
.spw-W {
  color: #ffcc49;    /* 시안의 노란색 */
  font-style: italic;
}

/* City */
.spw-city {
  font-family: 'Gloock', Georgia, serif;
  font-size: 15px;
  letter-spacing: .38em;
  color: rgba(255,255,255,.82);
  margin-top: 1px;
}
.spw-C {
  color: #ffcc49;    /* 동일 노란색 */
}

/* · 구분점 */
.spw-sep {
  font-size: 9px;
  color: rgba(255,255,255,.35);
  letter-spacing: 0;
  margin: 3px 0;
}

/* Life */
.spw-life {
  font-family: 'Gloock', Georgia, serif;
  font-size: 15px;
  letter-spacing: .38em;
  color: rgba(255,255,255,.82);
}
.spw-L {
  color: #ffcc49;    /* 동일 노란색 */
}

/* 화살표 버튼 */
.sp-arrow {
  width: 100%;
  padding: 14px 0;
  background: none; border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  cursor: pointer; display:flex; align-items:center; justify-content:center;
  transition: background .22s;
}
.sp-arrow:hover { background: rgba(255,255,255,.07); }
.sp-arrow-img {
  width: 34px; height: 34px;
  object-fit: contain;
  transition: transform .35s;
}
/* 드로어 열렸을 때 화살표 좌우 반전 */
body.dopen .sp-arrow-img { transform: scaleX(-1); }

/* ═══════════════════════════════════════════════════
   드로어
═══════════════════════════════════════════════════ */
.drawer {
  position: fixed;
  top: 0; right: var(--pw);
  width: var(--dw);
  height: 100vh;
  z-index: 990;
  background: rgba(26,34,64,.85);
  border-left: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }

.drawer-dim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 980;
  opacity: 0; pointer-events: none;
  transition: opacity .38s;
}
.drawer-dim.open { opacity:1; pointer-events:auto; }

.drawer-body {
  padding: 22px 22px 40px;
  min-height: 100%;
  display: flex; flex-direction: column;
}
.drawer-x {
  align-self: flex-end;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.55); padding: 4px;
  transition: color .2s; margin-bottom: 16px;
}
.drawer-x:hover { color: #fff; }
.drawer-x svg { display:block; }

.drawer-logo {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 18px;
}
.drawer-logo img { width:40px; height:40px; object-fit:contain; mix-blend-mode:screen; }
.drawer-logo span { font-size:13px; font-weight:600; color:#fff; letter-spacing:.04em; line-height:1.4; }

.drawer-menu { display:flex; flex-direction:column; }
.drawer-menu li a {
  display:block; padding:13px 0;
  font-size:15px; font-weight:500; letter-spacing:.06em;
  color:rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: color .2s, padding-left .2s;
}
.drawer-menu li a:hover { color:#fff; padding-left:6px; }
.drawer-menu li.current-menu-item a { color:var(--pk); }

.drawer-line { height:1px; background:rgba(255,255,255,.1); margin:20px 0; }

.drawer-cta {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; margin-bottom: 12px;
  background: linear-gradient(135deg,var(--pk),var(--pk2));
  color: #fff; font-size: 14px; font-weight: 700;
  border-radius: 10px; letter-spacing: .05em;
  transition: filter .22s, transform .22s;
}
.drawer-cta:hover { filter:brightness(1.1); transform:translateY(-1px); }

.d-ic { width:20px; height:20px; object-fit:contain; flex-shrink:0; }

.drawer-contact {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; color: #fff;
  transition: background .22s;
}
.drawer-contact:hover { background:rgba(255,255,255,.13); }
.drawer-contact svg { color:var(--gd); flex-shrink:0; }
.drawer-contact small { display:block; font-size:11px; color:rgba(255,255,255,.42); margin-bottom:2px; }
.drawer-contact strong { display:block; font-family:'Montserrat',sans-serif; font-size:14px; font-weight:700; color:#fff; }

.drawer-hours {
  margin-top: auto; padding-top: 24px;
  font-size:11.5px; color:rgba(255,255,255,.27); text-align:center; line-height:1.6;
}

/* ═══════════════════════════════════════════════════
   GNB (page-wrap 위에 fixed)
═══════════════════════════════════════════════════ */
.gnb-wrap {
  position: fixed;
  top: 0; left: 0; right: var(--pw);
  height: var(--nh);
  z-index: 800;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, box-shadow .3s;
}
.gnb-wrap.on {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--bd);
}
.gnb { width:100%; }
.gnb-list { display:flex; align-items:center; justify-content:center; }
.gnb-list li a {
  display:block; padding:10px 24px;
  font-size:14px; font-weight:400; letter-spacing:.06em;
  color: rgba(255,255,255,.92);
  position:relative; transition:color .22s;
}
.gnb-wrap.on .gnb-list li a { color:var(--nv); }
.gnb-list li a::after {
  content:''; position:absolute; bottom:4px; left:24px; right:24px;
  height:2px; background:var(--pk); border-radius:2px;
  transform:scaleX(0); transform-origin:center; transition:transform .28s;
}
.gnb-list li a:hover::after,
.gnb-list li.current-menu-item a::after { transform:scaleX(1); }

.gnb-toggle {
  display:none; position:fixed;
  top:14px; right:calc(var(--pw) + 12px);
  flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; z-index:810; padding:6px;
}
.gnb-toggle span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
.gnb-toggle.dk span { background:var(--nv); }

/* 모바일 메뉴 열릴 때 */
.gnb.mobile-open {
  display: block !important;
  position: fixed; top:var(--nh); left:0; right:var(--pw);
  background: rgba(255,255,255,.99);
  border-bottom:1px solid var(--bd);
  padding:14px; z-index:790;
}
.gnb.mobile-open .gnb-list { flex-direction:column; align-items:flex-start; gap:2px; }
.gnb.mobile-open .gnb-list li a { color:var(--nv); }

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%; height: 100vh; min-height: 640px;
  overflow: hidden; background: var(--nv);
}
.hero-slider { position:absolute; inset:0; }
.slide       { position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.slide.active{ opacity:1; }

.slide-bg {
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
  transform:scale(1.12);
}
.slide.active .slide-bg { animation:zoomOut 7.5s ease-out forwards; }
@keyframes zoomOut { from{transform:scale(1.12);}to{transform:scale(1.0);} }

.slide-dim {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(26,34,64,.2) 0%,rgba(26,34,64,.06) 45%,rgba(26,34,64,.42) 100%);
}

.hero-text {
  position:absolute; top:clamp(88px,13vh,130px); left:0; right:0;
  text-align:center; z-index:10; padding:0 40px;
}
.hero-sub { font-size:15px; color:rgba(255,255,255,.9); letter-spacing:.04em; margin-bottom:16px; line-height:1.6; }
.hero-sub strong { font-weight:700; color:#fff; }
.hero-title {
  font-size:clamp(36px,5.5vw,70px); font-weight:900;
  line-height:1.15; letter-spacing:-.01em;
  display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap; justify-content:center;
}
.ht-w { color:#fff; }
.ht-p { color:var(--pk); }

.hero-dots {
  /* 히어로 섹션 안, overflow:hidden으로 잘리지 않도록
     하단바 높이만큼 위에, 좌우 정중앙 */
  position: absolute;
  bottom: calc(var(--bbh) + 16px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 15;
  pointer-events: auto;
}
.hdot { width:8px;height:8px; border-radius:50%; background:rgba(255,255,255,.38); border:none; cursor:pointer; padding:0; transition:all .32s; }
.hdot.on { width:28px; border-radius:4px; background:#fff; }

.hero-bar {
  position:absolute; bottom:0; left:0; right:0;
  height:var(--bbh); display:flex; z-index:20;
}
.hb-tel,.hb-reg {
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:15px; font-weight:700;
  font-family:'Noto Sans KR',sans-serif; letter-spacing:.04em;
  transition:filter .2s,background .2s;
}
.hb-tel { background:rgba(22,28,52,.65); color:#fff; border-top:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px); }
.hb-tel:hover { background:rgba(28,38,72,.75); }
.hb-reg { background:linear-gradient(90deg,rgba(224,96,184,.72),rgba(192,64,160,.72)); color:#fff; backdrop-filter:blur(8px); }
.hb-reg:hover { filter:brightness(1.1); }

/* 아이콘: 투명 배경, 텍스트 높이에 맞게 */
.hb-ic {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent !important;
  /* mix-blend-mode 제거 — 이미 투명 PNG */
}

/* ═══════════════════════════════════════════════════
   본문 섹션 (모두 흰 배경 기반)
═══════════════════════════════════════════════════ */
.w-inner { max-width:1120px; margin:0 auto; padding:0 40px; }
.t-center { text-align:center; }

.s-about  { background:#fff;    padding:88px 0; border-bottom:1px solid var(--bd); }
.s-feat   { background:var(--bg2); padding:88px 0; border-bottom:1px solid var(--bd); }
.s-loc    { background:#fff;    padding:88px 0; border-bottom:1px solid var(--bd); }
.s-inq    { background:var(--nv); padding:88px 0; }
.s-dir    { background:#fff;    padding:88px 0; }

.s-en { font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.38em; color:var(--pk); text-transform:uppercase; margin-bottom:10px; }
.s-en.lt { color:rgba(224,96,184,.85); }
.s-ko { font-size:clamp(24px,3.2vw,40px); font-weight:700; line-height:1.35; color:var(--nv); margin-bottom:10px; }
.s-ko.lt { color:#fff; }
.s-sub { font-size:15px; color:var(--gr); margin-bottom:44px; }

/* 사업개요 */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:48px; }
.stat-box  { background:var(--bg2); border:1px solid var(--bd); border-radius:14px; padding:36px 18px 28px; text-align:center; transition:all .3s; }
.stat-box:hover { background:#fff; border-color:var(--pk); box-shadow:0 6px 28px rgba(224,96,184,.12); transform:translateY(-3px); }
.sn { display:block; font-family:'Montserrat',sans-serif; font-size:52px; font-weight:900; color:var(--nv); line-height:1; letter-spacing:-.02em; }
.su { display:block; font-size:15px; color:var(--pk); font-weight:600; margin:4px 0 10px; }
.sd { font-size:13px; color:var(--gr); }

/* 특징 */
.feat-grid { display:grid; grid-template-columns:290px 1fr; gap:72px; align-items:start; }
.feat-desc { font-size:15px; color:var(--gr); line-height:1.9; margin-top:16px; }
.feat-row  { display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--bd); transition:padding-left .25s; }
.feat-row:first-child { border-top:1px solid var(--bd); }
.feat-row:hover { padding-left:8px; }
.fn { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; color:var(--pk); letter-spacing:.1em; flex-shrink:0; padding-top:3px; }
.fh { font-size:16px; font-weight:700; color:var(--nv); margin-bottom:6px; }
.fp { font-size:14px; color:var(--gr); line-height:1.75; }

/* 입지 */
.map-box { width:100%; height:400px; background:var(--bg2); border:1px solid var(--bd); border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:24px; }
.map-box p { font-size:14px; color:#bbb; line-height:1.7; margin-top:12px; }
.tags { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tag  { padding:9px 20px; background:#fff; border:1px solid var(--bd); border-radius:40px; font-size:14px; color:var(--nv); transition:all .22s; }
.tag:hover { border-color:var(--pk); color:var(--pk); background:#fdf5fb; }

/* 관심고객 */
.inq-grid   { display:grid; grid-template-columns:260px 1fr; gap:60px; align-items:start; }
.inq-desc   { font-size:15px; color:rgba(255,255,255,.55); line-height:1.9; margin-top:16px; }
.inq-tel    { display:block; margin-top:22px; font-family:'Montserrat',sans-serif; font-size:21px; font-weight:700; color:var(--pk); transition:color .22s; }
.inq-tel:hover { color:#fff; }

.f2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.fg label { font-size:12.5px; font-weight:500; color:rgba(255,255,255,.6); letter-spacing:.05em; }
.fg label em { color:var(--pk); font-style:normal; }
.fg input,.fg textarea {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:9px; padding:11px 14px; font-size:14px; color:#fff;
  font-family:'Noto Sans KR',sans-serif; outline:none; resize:none;
  transition:border-color .22s, background .22s;
}
.fg input::placeholder,.fg textarea::placeholder { color:rgba(255,255,255,.28); }
.fg input:focus,.fg textarea:focus { border-color:var(--pk); background:rgba(224,96,184,.06); }
.tbtn-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.tbtn { padding:7px 16px; border:1px solid rgba(255,255,255,.22); border-radius:40px; background:transparent; color:rgba(255,255,255,.6); font-size:13px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:all .22s; }
.tbtn:hover { border-color:var(--pk); color:var(--pk); }
.tbtn.on { background:var(--pk); border-color:var(--pk); color:#fff; font-weight:600; }
.priv-row { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; color:rgba(255,255,255,.6); margin-bottom:14px; }
.priv-row input { accent-color:var(--pk); width:15px; height:15px; }
.priv-row em { color:var(--pk); font-style:normal; }
.sub-btn { width:100%; padding:14px; background:linear-gradient(135deg,var(--pk),var(--pk2)); color:#fff; font-size:15px; font-weight:700; border:none; border-radius:10px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; letter-spacing:.06em; transition:all .28s; box-shadow:0 5px 22px rgba(224,96,184,.35); }
.sub-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(224,96,184,.5); }
.sub-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.fmsg { padding:12px 16px; border-radius:9px; font-size:14px; text-align:center; margin-top:10px; }
.fmsg.ok  { background:rgba(0,200,100,.1); border:1px solid rgba(0,200,100,.28); color:#4ade80; }
.fmsg.err { background:rgba(255,80,80,.1); border:1px solid rgba(255,80,80,.25); color:#f87171; }

/* 오시는길 */
.dir-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:44px; text-align:left; }
.dir-card { background:var(--bg2); border:1px solid var(--bd); border-radius:14px; padding:24px; transition:all .28s; }
.dir-card:hover { border-color:var(--pk); background:#fff; box-shadow:0 4px 18px rgba(224,96,184,.1); }
.dir-ico { font-size:26px; margin-bottom:10px; }
.dir-card h4 { font-size:15px; font-weight:700; color:var(--nv); margin-bottom:7px; }
.dir-card p  { font-size:14px; color:var(--gr); line-height:1.65; }

/* 푸터 */
.site-footer { background:var(--nv); padding:48px 0 28px; }
.ft-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:32px; }
.ft-brand { display:flex; align-items:center; gap:14px; }
.ft-logo { width:46px; height:46px; object-fit:contain; mix-blend-mode:screen; }
.ft-name { font-size:16px; font-weight:700; color:#fff; }
.ft-sub  { font-family:'Montserrat',sans-serif; font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,.3); margin-top:3px; }
.ft-nav  { display:flex; gap:24px; }
.ft-nav a { font-size:13px; color:rgba(255,255,255,.42); transition:color .22s; }
.ft-nav a:hover { color:#fff; }
.ft-bottom { padding-top:20px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.ft-bottom p { font-size:12px; color:rgba(255,255,255,.28); }
.ft-legal { max-width:480px; text-align:right; line-height:1.55; font-size:11px!important; }

/* 맨위로 */
.totop { position:fixed; bottom:22px; right:calc(var(--pw)+12px); width:40px; height:40px; background:var(--pk); border:none; border-radius:50%; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(10px); transition:all .3s; z-index:800; }
.totop.show { opacity:1; transform:none; }
.totop:hover { background:var(--pk2); transform:translateY(-3px); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:1024px){
  .feat-grid { grid-template-columns:1fr; gap:40px; }
  .inq-grid  { grid-template-columns:1fr; gap:40px; }
}
@media(max-width:768px){
  :root{ --pw:60px; --nh:58px; --dw:260px; }
  .gnb { display:none; }
  .gnb-toggle { display:flex; }
  .hero-text { top:76px; padding:0 20px; }
  .hero-title { font-size:clamp(28px,7vw,44px); }
  .f2col { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .ft-bottom { flex-direction:column; }
  .ft-legal { text-align:left; }
  .w-inner { padding:0 20px; }
  .s-about,.s-feat,.s-loc,.s-inq,.s-dir { padding:64px 0; }
}
@media(max-width:480px){
  :root{ --pw:52px; }
  .hero-sub { font-size:12px; }
  .sn { font-size:40px; }
  .sp-words { font-size:12px; letter-spacing:.28em; }
  .spw-wonderful,.spw-city,.spw-life { font-size:12px; }
  .sp-logo-img { width:44px; height:44px; }
}