/* ═══════════════════════════════════════════════════
   펜타힐즈 더블유 스퀘어 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  : 120px;
  --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,.52);
  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: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  perspective: 500px;
  cursor: pointer;
}
.sp-logo-img {
  width: 72px; height: 72px;
  object-fit: contain;
  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 → 텍스트가 위→아래 세로로 흐름
     단 하나의 p 태그에 모든 글자를 넣어 진짜 세로 1줄 구현 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Gloock', Georgia, serif;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.82);
  line-height: 1;
  user-select: none;
  white-space: nowrap;   /* 세로 1줄 강제 */
}
/* sp-words 안의 단일 p 태그 */
.sp-words .spw-text {
  font-family: 'Gloock', Georgia, serif;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}

/* 첫 대문자 강조 */
.spw-W {
  color: #ffcc49;
  font-style: italic;
  font-size: 1em;
}
.spw-C { color: #ffcc49; font-size: 1em; }
.spw-sep {
  color: rgba(255,255,255,.35);
  font-size: .7em;
  letter-spacing: 0;
}
.spw-L { color: #ffcc49; font-size: 1em; }

/* ── 구버전 span 스타일 (하위호환) ── */
.spw-wonderful, .spw-city, .spw-life {
  font-family: 'Gloock', Georgia, serif;
  font-size: 50px;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.82);
}

/* 화살표 버튼 */
.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: 42px; height: 42px;
  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,.75);
  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; }
.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 top;
  transform:scale(1.12);
  transition:background-image 0.3s ease;
}
/* 모바일: 세로형 이미지는 center center 정렬 */
@media(max-width:768px){
  .slide-bg {
    background-position:center center;
  }
}
.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: PC=2열, mobile=3열(JS/CSS로 분기) */
.hero-bar {
  position:absolute; bottom:0; left:0; right:0;
  height:var(--bbh);
  display:grid;
  grid-template-columns: 1fr 1fr;
  z-index:20;
}
/* PC: 모바일 전용 숨김 */
.hero-bar-logo--mo { display:none; }
.mobile-arrow-btn  { display:none; }
.hero-sub-mo       { display:none; }
.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,.50); color:#fff; border-top:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px); }
.hb-tel:hover { background:rgba(28,38,72,.60); }
.hb-reg { background:linear-gradient(90deg,rgba(224,96,184,.55),rgba(192,64,160,.55)); 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; }

/* ═══════════════════════════════════
   지도 탭 UI — 시안 스타일
   (W로고 + 탭명, 노란/초록 배경)
═══════════════════════════════════ */
.maptab-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 40px;
}

/* 탭 버튼 */
.maptab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 24px;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(255,255,255,.7);
  transition: all .28s;
  background: #b0b8a0;   /* 비활성 기본 */
}
.maptab-btn:first-child { border-radius: 8px 0 0 0; }
.maptab-btn:last-child  { border-radius: 0 8px 0 0; }

/* 활성 탭: 홍보관=노란색, 모델하우스=초록색 */
.maptab-btn.active:nth-child(1) {
  background: #e8b832;
  color: #fff;
}
.maptab-btn.active:nth-child(2) {
  background: #6aaa5a;
  color: #fff;
}
.maptab-btn:not(.active):hover {
  background: #9aaa8a;
  color: #fff;
}

/* 탭 안 로고 */
.maptab-logo {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.18);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
}
.maptab-logo img {
  width: 28px; height: 28px;
  object-fit: contain;
}

/* 탭 패널 */
.maptab-body {
  border: 1px solid var(--bd);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.maptab-panel { display: none; }
.maptab-panel.active {
  display: block;
  animation: mtFadeIn .3s ease;
}
@keyframes mtFadeIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}

/* 주소 행 */
.maptab-addr {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--nv);
  border-bottom: 1px solid var(--bd);
  background: var(--bg2);
  letter-spacing: .02em;
}

/* 지도 이미지 래퍼 */
.maptab-map-wrap {
  width: 100%;
  overflow: hidden;
  background: var(--bg2);
}
.maptab-map-wrap > div {
  width: 100% !important;
}
.maptab-map-wrap img.map {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* 지도 하단 정보 */
.maptab-info {
  display: flex;
  gap: 28px;
  padding: 14px 24px;
  border-top: 1px solid var(--bd);
  font-size: 13.5px;
  color: var(--gr);
  flex-wrap: wrap;
}

/* 태그 */
.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; }

/* 모바일 */
@media(max-width:768px){
  .maptab-btn  { font-size:14px; padding:13px 12px; gap:8px; letter-spacing:.08em; }
  .maptab-logo { width:28px; height:28px; }
  .maptab-logo img { width:22px; height:22px; }
  .maptab-addr { padding:12px 16px; font-size:13px; }
  .maptab-info { padding:12px 16px; gap:12px; flex-direction:column; }
}

/* ═══════════════════════════════════
   이미지 팝업
═══════════════════════════════════ */
.ph-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.ph-popup-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* 팝업 래퍼 */
.ph-popup-img-wrap {
  position: relative;
  max-width: 520px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  transform: translateY(16px) scale(.97);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1);
  background: #0d1535;
}
.ph-popup-overlay.show .ph-popup-img-wrap {
  transform: none;
}

/* 닫기 버튼 */
.ph-popup-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(0,0,0,.55);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .22s, transform .22s;
}
.ph-popup-close:hover {
  background: rgba(0,0,0,.8);
  transform: rotate(90deg);
}

/* 팝업 이미지 */
.ph-popup-img-link { display: block; }
.ph-popup-main-img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: opacity .22s;
}
.ph-popup-main-img:hover { opacity: .92; }

/* 이미지 미설정 안내 */
.ph-popup-noimg {
  padding: 60px 32px;
  text-align: center;
  color: rgba(255,255,255,.5);
  font-size: 14px;
  line-height: 2;
}

/* 오늘 하루 보지 않기 */
.ph-popup-footer {
  background: rgba(0,0,0,.4);
  padding: 10px 18px;
  display: flex;
  justify-content: flex-end;
}
.pp-today-check {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  transition: color .2s;
}
.pp-today-check:hover { color: #fff; }
.pp-today-check input { accent-color: #c8a030; width: 14px; height: 14px; }

/* 모바일 */
@media(max-width:480px){
  .ph-popup-overlay { padding: 12px; align-items: flex-end; }
  .ph-popup-img-wrap { max-width: 100%; border-radius: 12px 12px 0 0; }
}

/* 관심고객 */
.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; }
.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){

  /* ── 변수: 패널 0, 하단바 고정 높이 ── */
  :root{ --pw:0px; --nh:0px; --dw:280px; --bbh:64px; }

  /* page-wrap: 패널 없음, 하단바 고정만큼 padding */
  .page-wrap { margin-right:0; padding-bottom:var(--bbh); }

  /* 우측 사이드패널 완전 숨김 */
  .side-panel { display:none !important; }

  /* GNB 숨김 */
  .gnb-wrap  { display:none !important; }
  .gnb-toggle{ display:none !important; }

  /* 드로어: 모바일에선 왼쪽에서 슬라이드 */
  .drawer {
    left: 0;
    right: auto;
    width: 80vw;
    max-width: 300px;
    transform: translateX(-100%);  /* 왼쪽 밖으로 숨김 */
    border-left: none;
    border-right: 1px solid rgba(255,255,255,.1);
  }
  .drawer.open { transform: translateX(0); }

  /* ── 모바일 HERO ── */
  .hero {
    height: 100svh;
    min-height: 600px;
  }

  /* 모바일 텍스트: 중앙 정렬, 상단 1/3 지점 */
  .hero-text {
    top: clamp(24px, 8vh, 60px);
    left: 0; right: 0;
    text-align: center;
    padding: 0 28px;
  }

  /* PC 태그라인 숨기고 모바일 3줄 표시 */
  .hero-sub-pc { display:none !important; }
  .hero-sub-mo {
    display: block;
    font-size: 14px;
    line-height: 2;
    letter-spacing: .02em;
    color: rgba(255,255,255,.9);
    margin-bottom: 10px;
    text-align: center;
  }
  .hero-sub-mo p { display:block; }
  .hero-sub-mo strong { font-weight:700; color:#fff; }

  /* 타이틀: 중앙 정렬, 적절한 크기 */
  .hero-title {
    font-size: clamp(30px, 8.5vw, 48px);
    letter-spacing: -.02em;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
  }

  /* 슬라이드 도트 숨김 */
  .hero-dots { display:none; }

  /* 모바일 화살표: 우측 하단 고정 */
  .mobile-arrow-btn {
    display: flex;
    position: fixed;        /* absolute → fixed: 스크롤해도 고정 */
    bottom: calc(var(--bbh) + 14px);
    right: 16px;
    z-index: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .mobile-arrow-btn img {
    width: 48px; height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  }

  /* ── 모바일 하단 바: position:fixed, 화면 하단 고정 ── */
  .hero-bar {
    position: fixed;       /* 히어로 내부 absolute → fixed로 변경 */
    bottom: 0; left: 0; right: 0;
    height: var(--bbh);
    display: grid;
    grid-template-columns: 90px 1fr 1fr;
    z-index: 600;
  }
  .hero-bar-logo--mo { display:flex; }
  .mobile-arrow-btn  { display:flex; }

  /* 로고 셀 */
  .hero-bar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(26,34,64,.85);
    border-top: 1px solid rgba(255,255,255,.15);
    border-right: 1px solid rgba(255,255,255,.2);
    padding: 6px 8px;
  }
  /* 모바일 로고 Y축 플립 애니메이션 */
  .hero-bar-logo .mob-logo-img {
    width: 32px; height: 32px;
    object-fit: contain;
    transform-origin: center center;
  }
  .hero-bar-logo .mob-logo-img.flipping {
    animation: mobLogoFlip .9s cubic-bezier(.4,0,.2,1) forwards;
  }
  @keyframes mobLogoFlip {
    0%  { transform: rotateY(0deg); }
    30% { transform: rotateY(-130deg) scale(1.15); }
    65% { transform: rotateY(-270deg) scale(1.05); }
    100%{ transform: rotateY(-360deg); }
  }
  .hero-bar-logo span {
    font-size: 8px;
    color: rgba(255,255,255,.85);
    letter-spacing: .03em;
    white-space: nowrap;
    font-family: 'Noto Sans KR', sans-serif;
  }

  /* 전화 버튼 */
  .hb-tel {
    font-size: 13px;
    gap: 7px;
    background: rgba(26,34,64,.75);
    border-top: 1px solid rgba(255,255,255,.12);
    border-right: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
  }
  /* 관심고객 버튼 */
  .hb-reg {
    font-size: 13px;
    gap: 7px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .hb-ic { width: 20px; height: 20px; }

  /* 본문 */
  .f2col     { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .feat-grid { grid-template-columns:1fr; gap:32px; }
  .inq-grid  { grid-template-columns:1fr; gap:36px; }
  .ft-top    { flex-direction:column; gap:16px; }
  .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:56px 0; }
  .dir-grid  { grid-template-columns:1fr; }
}
@media(max-width:480px){
  .hero-title { font-size:clamp(26px,8vw,38px); }
  .hero-sub-mo { font-size:13px; }
  .sn { font-size:36px; }
  .hero-bar { grid-template-columns:80px 1fr 1fr; }
}