@charset "UTF-8";
/* ═══════════════════════════════════════════════
   헬스방 — 광주 효천지구 회원제 헬스장
   블랙 + 밝은 블루 (컨셉: design/KakaoTalk_20260830_164544706_29.jpg)
   최초 작성 2026-08-31
   ═══════════════════════════════════════════════ */

:root{
  --bg:#0B0F16;
  --bg2:#0E131B;
  --card:#141A24;
  --card2:#182029;
  --line:#232B38;
  --line2:#2E3847;
  --brand:#3FA9FF;
  --brand-dk:#2A8AE0;
  --glow:#7CC7FF;
  --tx:#F5F8FC;
  --tx2:#9AA7B8;
  --tx3:#6C7889;

  /* ★2026-09-15 — 블로그 글 화면용 별칭.
     빌더가 만드는 글 화면 CSS는 --ink 계열을 쓰는데 이 사이트는 --tx 계열이라,
     변수를 못 찾아 밝은 테마용 기본값(검정)이 적용됐다. 검은 배경에 검은 글씨가
     되어 글이 통째로 안 보였다. 첫 화면은 --tx 를 그대로 쓰므로 영향이 없다. */
  --ink:#F5F8FC;
  --ink-2:#D7DEE8;
  --ink-3:#9AA7B8;

  --wrap:1200px;
  --r-s:12px;
  --r-m:18px;
  --r-l:26px;
  --pill:999px;

  --sec-y:110px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.7;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 한글은 단어 중간에서 끊지 않는다 ("됩니/다" 방지) */
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.dim{color:var(--tx3)}

/* ── 버튼 ───────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 30px;border-radius:var(--pill);
  font-size:16px;font-weight:700;letter-spacing:-.02em;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.btn-fill{background:var(--brand);color:#05111E;box-shadow:0 6px 26px rgba(63,169,255,.28)}
.btn-fill:hover{background:var(--glow);transform:translateY(-2px);box-shadow:0 10px 32px rgba(63,169,255,.4)}
.btn-line{border:1px solid var(--line2);color:var(--tx)}
.btn-line:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn-full{width:100%}
.btn-lg{height:60px;padding:0 40px;font-size:19px}

/* ═══════════ 헤더 ═══════════ */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(11,15,22,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.hd.is-on{background:rgba(11,15,22,.94);border-bottom-color:var(--line)}
.hd-in{display:flex;align-items:center;gap:28px;height:78px}
.hd-logo{
  flex:none;display:flex;align-items:center;
  transition:filter .22s ease,transform .22s ease;
}
.hd-logo img{height:47px;width:auto;display:block}
.hd-logo:hover{transform:translateY(-1px);filter:drop-shadow(0 0 12px rgba(63,169,255,.55))}
.hd-nav{display:flex;gap:30px;margin-left:auto}
.hd-nav a{
  font-size:15.5px;font-weight:600;color:var(--tx2);
  position:relative;padding:6px 0;transition:color .18s ease;
}
.hd-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--brand);transition:right .25s ease;
}
.hd-nav a:hover{color:var(--tx)}
.hd-nav a:hover::after{right:0}

.hd-tel{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;
  padding:8px 20px;border-radius:var(--pill);
  border:1px solid var(--line2);flex:none;
  transition:border-color .18s ease,background .18s ease;
}
.hd-tel:hover{border-color:var(--brand);background:rgba(63,169,255,.07)}
.hd-tel-lb{font-size:11.5px;color:var(--tx3);letter-spacing:.02em}
.hd-tel-no{font-size:16px;font-weight:800;color:var(--brand);letter-spacing:-.01em}

.hd-burger{display:none;width:42px;height:42px;flex:none;padding:10px}
.hd-burger span{display:block;height:2px;background:var(--tx);border-radius:2px;transition:.25s ease}
.hd-burger span+span{margin-top:5px}
.hd-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════ 1. 히어로 ═══════════ */
.hero{
  position:relative;overflow:hidden;
  /* 사진(4:3)이 덜 잘리도록 넉넉히 잡는다 — 낮으면 위아래가 크게 잘린다 */
  min-height:min(96vh,980px);
  display:flex;align-items:center;
  /* 아래쪽은 시설 박스가 절반 올라타므로 그만큼 비워 둔다 */
  padding:150px 0 190px;
}

/* 배경 사진 3장 — 서서히 바뀌며 아주 천천히 확대된다 */
.hero-bg{position:absolute;inset:0}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center 44%;
  opacity:0;transform:scale(1);
  transition:opacity 1.6s ease;
}
/* ★확대 폭을 줄여 사진이 더 넓게 보이도록 했다 (1.06→1.16 이었음) */
.hero-slide.is-on{opacity:1;animation:kenburns 13s ease-out forwards}
@keyframes kenburns{
  from{transform:scale(1)}
  to{transform:scale(1.07)}
}

/* 사진 위에 덮는 그라데이션 — 글씨가 읽히고 아래는 배경색으로 녹아든다 */
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 74% 38%,rgba(63,169,255,.19),transparent 62%),
    linear-gradient(90deg,rgba(11,15,22,.92) 0%,rgba(11,15,22,.82) 34%,rgba(11,15,22,.40) 64%,rgba(11,15,22,.70) 100%),
    linear-gradient(0deg,var(--bg) 0%,rgba(11,15,22,.28) 26%,transparent 52%),
    linear-gradient(180deg,rgba(11,15,22,.86) 0%,transparent 22%);
}
/* 파란 빛이 아주 느리게 흐르는 띠 */
.hero-scan{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.hero-scan::before{
  content:"";position:absolute;top:-30%;left:-40%;width:42%;height:160%;
  background:linear-gradient(100deg,transparent,rgba(124,199,255,.11) 46%,rgba(124,199,255,.02) 62%,transparent);
  filter:blur(8px);
  animation:sweep 9s ease-in-out infinite;
}
@keyframes sweep{
  0%{transform:translateX(0) rotate(8deg)}
  55%{transform:translateX(310%) rotate(8deg)}
  100%{transform:translateX(310%) rotate(8deg)}
}

.hero-in{position:relative;width:100%}
.hero-txt{max-width:660px}

/* 히어로 글씨가 하나씩 올라온다 */
.up{opacity:0;transform:translateY(22px);animation:upIn .85s cubic-bezier(.22,.7,.3,1) forwards}
.up-1{animation-delay:.15s}
.up-2{animation-delay:.3s}
.up-3{animation-delay:.45s}
.up-4{animation-delay:.6s}
@keyframes upIn{to{opacity:1;transform:none}}

/* 사진 넘김 — 좌·우 화살표 (미르 2026-09-02, 막대 3개 대신) */
/* ★사진 위에 얹히므로 살짝 어두운 판을 깔아야 안 묻힌다 */
.hero-arw{
  position:absolute;top:50%;margin-top:-26px;z-index:3;
  width:52px;height:52px;display:grid;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;
  background:rgba(0,0,0,.26);backdrop-filter:blur(3px);
  color:rgba(255,255,255,.82);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.hero-arw:hover{
  background:rgba(0,0,0,.42);color:var(--brand);
  border-color:rgba(63,169,255,.55);
}
.hero-arw:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.hero-arw svg{width:21px;height:21px}
/* ★★좌·우 양쪽에 둔다 (미르 2026-09-02 — 오른쪽 쓸림 수정).
   ★글과 같은 높이에 두면 왼쪽 화살표가 제목을 덮는다
     (헬스방은 글이 왼쪽 끝 24px 에 붙어 있다).
   ★그래서 **버튼 아래·시설박스 위** 사이의 빈 띄에 앚힌다.
     실측 : 버튼 아랫끝 634 / 시설박스 윗끝 776 → 142px 짜리 띄 */
.hero-arw{top:auto;bottom:130px;margin-top:0}
.hero-prev{left:20px;right:auto}
.hero-next{right:20px;left:auto}

/* 아래로 내려가라는 표시 */
.hero-down{
  /* ★오른쪽 화살표와 자리가 겹쳐서 가운데로 옮겼다 (2026-09-02) */
  position:absolute;left:50%;transform:translateX(-50%);bottom:122px;z-index:3;
  width:26px;height:44px;border:2px solid rgba(255,255,255,.28);
  border-radius:var(--pill);display:flex;justify-content:center;padding-top:8px;
  transition:border-color .25s ease;
}
.hero-down:hover{border-color:var(--brand)}
.hero-down span{
  width:3px;height:8px;border-radius:2px;background:var(--brand);
  animation:wheel 1.9s ease-in-out infinite;
}
@keyframes wheel{
  0%,100%{transform:translateY(0);opacity:1}
  55%{transform:translateY(14px);opacity:.15}
}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 17px;border-radius:var(--pill);
  background:rgba(63,169,255,.09);border:1px solid rgba(63,169,255,.28);
  font-size:14px;font-weight:600;color:var(--glow);margin-bottom:26px;
}
.badge-dot{
  width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 rgba(63,169,255,.6);animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(63,169,255,.55)}
  70%{box-shadow:0 0 0 11px rgba(63,169,255,0)}
  100%{box-shadow:0 0 0 0 rgba(63,169,255,0)}
}
.hero-h1{
  font-size:clamp(38px,5.1vw,62px);line-height:1.22;font-weight:800;
  letter-spacing:-.045em;margin-bottom:26px;
}
.hero-h1 em{
  font-style:normal;color:var(--brand);
  text-shadow:0 0 34px rgba(63,169,255,.5);
}
.hero-p{
  font-size:17.5px;color:#C3CDDA;line-height:1.85;margin-bottom:38px;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero-h1{text-shadow:0 4px 26px rgba(0,0,0,.55)}
.hero-btns{display:flex;gap:13px;flex-wrap:wrap}
.hero .btn-line{border-color:rgba(255,255,255,.34);backdrop-filter:blur(6px)}

/* ═══════════ 2. 시설 정보 바 ═══════════
   ★히어로 하단을 절반쯤 덮으며 올라타 있다.
     음수 여백(margin-top)이 박스 높이의 절반이라 정확히 반이 걸친다. */
.facts{
  position:relative;z-index:5;
  margin-top:-88px;              /* 박스 높이(약 176px)의 절반 */
  padding:0 0 40px;
}
/* ★★히어로 아래 '요약 패널' 하나로 합쳤다 (미르 2026-09-02).
   숫자 구간이 갤러리와 한 덩어리로 보인다는 지적이 있었다.
   구분선을 하나 더 긋는 대신 **블록 수를 셋에서 둘로 줄여** 원인을 없앴다
   (히어로 → 요약패널 → 갤러리). 패널이 끝나고 여백 뒤에 갤러리가 시작하므로
   선을 안 그어도 구간이 갈린다. */
.facts-panel{
  padding:34px 30px;border-radius:var(--r-l);
  background:linear-gradient(180deg,#171F2A,var(--card));
  border:1px solid var(--line2);
  box-shadow:0 26px 64px rgba(0,0,0,.55),0 0 0 1px rgba(63,169,255,.07);
}
.facts-list{
  display:flex;justify-content:space-between;gap:10px;
  padding-top:30px;border-top:1px solid var(--line);
  overflow-x:auto;
}
/* 윗변에 파란 형광이 살짝 얹힌다 — 히어로에서 이어지는 느낌 */
.facts-panel{position:relative}
.facts-panel::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:min(560px,64%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,169,255,.7),transparent);
  box-shadow:0 0 14px rgba(63,169,255,.5);
}
.facts-list li{
  display:flex;flex-direction:column;align-items:center;gap:15px;
  flex:1 0 auto;min-width:100px;text-align:center;
}
.facts-list svg{width:34px;height:34px;color:var(--brand)}
.facts-list span{font-size:15px;font-weight:600;color:var(--tx2);white-space:nowrap}

/* ═══════════ 4. 숫자 ═══════════ */
/* 패널 윗칸 — 숫자로 증명하는 세 가지 */
.stats-in{display:flex;justify-content:center;gap:0;flex-wrap:wrap;padding-bottom:26px}
.stat{
  flex:1 1 0;min-width:150px;text-align:center;padding:4px 18px;
  position:relative;
}
.stat+.stat::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--line2);
}
/* ★이름을 숫자 위에 둔다 — '무엇 → 얼마' 순으로 읽힌다.
   ★이름은 작고 옅게(눈썹처럼). 15px 로 두면 숫자와 서로 경쟁한다. */
.stat-lb{
  display:block;margin-bottom:9px;font-size:13px;font-weight:600;
  color:var(--tx3);letter-spacing:.04em;
}
/* ★60px 은 너무 커서 이 구간만 유난히 높아 보였다 → 40px */
.stat strong{
  display:block;font-size:clamp(32px,3.6vw,40px);font-weight:800;
  color:var(--brand);line-height:1.05;letter-spacing:-.045em;
  text-shadow:0 0 24px rgba(63,169,255,.28);
}
.stat-u{font-size:.46em;font-weight:700;color:var(--tx2);margin-left:4px;text-shadow:none}

/* ═══════════ 섹션 공통 ═══════════ */
.sec{padding:var(--sec-y) 0}
/* 한 칸 걸러 배경을 바꿔 구간을 나눈다
   (갤러리 → 프로그램 → 후기 → 이용권 → 소식 → 오시는길 이 번갈아 든다) */
.sec-mid{
  position:relative;
  background:var(--bg2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
/* 구간 경계에 파란 형광 이음선 */
.sec-mid::before,.sec-mid::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:min(720px,68%);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(63,169,255,.6),transparent);
  box-shadow:0 0 14px rgba(63,169,255,.45);
}
.sec-mid::before{top:-1px}
.sec-mid::after{bottom:-1px}
.sec-head{margin-bottom:44px}
.sec-head.is-center{text-align:center}
.sec-h2{
  font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.3;
}
.sec-sub{margin-top:11px;font-size:16.5px;color:var(--tx2)}

/* ═══════════ 5. 갤러리 ═══════════ */
/* ★비율 16:9 (미르 2026-09-02 — 4:3 은 뭉투해 보였다).
   헬스장은 가로로 넓은 공간이라 가로가 긴 틀이 시설을 더 잘 담는다.
   ★세로 사진은 위아래 빈자리가 더 커지지만, 뒤에 같은 사진을
     흐리게 깔아 메우므로 빈 틀처럼 보이지 않는다(.gal-back). */
.gal-stage{
  position:relative;aspect-ratio:16/9;
  border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);background:var(--card);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
/* 세로 사진일 때 양옆 빈자리를 같은 사진을 흐리게 깔아 메운다 */
.gal-back{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(30px) saturate(.7) brightness(.42);
  transform:scale(1.18);
  transition:background-image .28s ease;
}
/* ★받은 사진이 전부 4:3 (1400x1050, 15장 모두) 이다.
   16:9 틀에 contain 으로 넣으면 양옆에 흐린 띄가 생기고
   사진이 1152 → 864 로 **작아진다**. 그래서 cover 로 꿉 채운다.
   ★위아래가 약 25% 잘리지만 실내 시설 사진이라 가운데가 남는다.
   ★세로 사진이 들어오면 cover 로 자르면 망가지므로 그때만 contain 으로 되돌린다. */
.gal-stage img{
  position:relative;width:100%;height:100%;
  object-fit:cover;
  transition:opacity .28s ease;
}
.gal-stage.is-portrait img{object-fit:contain}
.gal-stage img.is-fade{opacity:0}
.gal-cap{
  margin-top:16px;font-size:16px;font-weight:600;color:var(--tx2);
  text-align:center;
}
.gal-strip{display:flex;align-items:center;gap:12px;margin-top:22px}
.gal-nav{
  flex:none;width:44px;height:44px;padding:11px;border-radius:50%;
  border:1px solid var(--line2);color:var(--tx2);
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.gal-nav:hover{border-color:var(--brand);color:var(--brand);background:rgba(63,169,255,.08)}
.gal-track{
  display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;
  padding:4px 2px;scrollbar-width:none;flex:1;
}
.gal-track::-webkit-scrollbar{display:none}
.gal-thumb{
  flex:none;width:152px;border-radius:var(--r-s);overflow:hidden;
  border:2px solid transparent;opacity:.55;
  transition:opacity .2s ease,border-color .2s ease,transform .2s ease;
  padding:0;line-height:0;
}
/* ★썸네일도 같은 16:9 — 큰 사진과 틀이 다르면 골라 놓은 느낌이 난다 */
.gal-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.gal-thumb:hover{opacity:.85;transform:translateY(-2px)}
.gal-thumb.is-on{opacity:1;border-color:var(--brand);box-shadow:0 0 0 3px rgba(63,169,255,.2)}

/* ═══════════ 6. 프로그램 ═══════════ */
.prog-box{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:26px;border-radius:var(--r-l);
  background:var(--card);border:1px solid var(--line);
}
.prog{
  padding:28px 24px;border-radius:var(--r-m);
  background:var(--card2);border:1px solid var(--line);
  transition:border-color .2s ease,transform .2s ease;
}
.prog:hover{border-color:rgba(63,169,255,.45);transform:translateY(-3px)}
.prog svg{width:30px;height:30px;color:var(--brand);margin-bottom:16px}
.prog h3{font-size:18.5px;font-weight:700;letter-spacing:-.03em;margin-bottom:9px}
.prog p{font-size:15px;color:var(--tx2);line-height:1.72}

/* ═══════════ 7. 후기 ═══════════ */
.rv-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rv{
  position:relative;padding:34px 28px 26px;border-radius:var(--r-m);
  background:var(--card);border:1px solid var(--line);
}
.rv-mark{
  position:absolute;top:16px;right:24px;
  font-size:58px;line-height:1;color:rgba(63,169,255,.22);font-weight:800;
}
.rv p{font-size:16px;color:var(--tx);line-height:1.8;min-height:86px}
.rv footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.rv footer b{display:block;font-size:15px;font-weight:700}
.rv footer span{font-size:13.5px;color:var(--tx3)}
/* ★임시(예시) 후기 표시 — 실제 문구로 바꾸면 is-demo 와 .rv-demo 를 지웁니다 */
.rv.is-demo{border-style:dashed;border-color:var(--line2)}
.rv-demo{
  position:absolute;top:-11px;left:22px;
  padding:3px 11px;border-radius:var(--pill);
  background:var(--line2);color:var(--tx2);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.rv-warn{margin-top:18px;font-size:14px;color:var(--tx3)}

/* ═══════════ 8. 이용권 ═══════════ */
/* ★회원요금 구간 배경에 실내 사진을 아주 연하게 깔았다 (미르 2026-09-02).
   ★덮개를 .90~.97 로 진하게 준다 — 사진이 보이는 게 아니라
     '결이 있는 배경'으로만 느껴져야 가격표 읽는 데 방해가 안 된다.
   ★g03(프리웨이트·유산소 존) — 파란 조명이라 사이트 톤과 맞는다.
   ★background-attachment:fixed 는 안 쓴다 — 휴대폰에서 끊긴다. */
#pass{
  background:
    linear-gradient(180deg,rgba(11,15,22,.97) 0%,rgba(11,15,22,.90) 32%,
                           rgba(11,15,22,.92) 68%,rgba(11,15,22,.98) 100%),
    url('../images/web/g03.jpg') center/cover no-repeat,
    var(--bg2);
}

.pass-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.pass{
  position:relative;padding:36px 30px;border-radius:var(--r-l);
  background:var(--card);border:1px solid var(--line);
  transition:border-color .2s ease,transform .2s ease;
}
.pass:hover{border-color:var(--line2);transform:translateY(-3px)}
.pass.is-pick{
  border-color:var(--brand);
  background:linear-gradient(180deg,rgba(63,169,255,.09),var(--card) 46%);
  box-shadow:0 18px 50px rgba(63,169,255,.15);
}
.pass-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:5px 16px;border-radius:var(--pill);white-space:nowrap;
  background:var(--brand);color:#05111E;font-size:12.5px;font-weight:800;
}
.pass h3{font-size:22px;font-weight:800;letter-spacing:-.035em}
.pass-for{
  margin:8px 0 24px;padding-bottom:22px;border-bottom:1px solid var(--line);
  font-size:19px;font-weight:700;color:var(--brand);letter-spacing:-.03em;
}
.pass ul{margin-bottom:28px}
.pass li{
  position:relative;padding-left:26px;font-size:15.5px;color:var(--tx2);
  line-height:1.6;margin-bottom:12px;
}
.pass li::before{
  content:"";position:absolute;left:2px;top:.55em;
  width:11px;height:6px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}

/* ═══════════ 9. 인스타 · 블로그 ═══════════ */
.sns-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sns{
  display:flex;align-items:center;gap:18px;
  padding:28px 30px;border-radius:var(--r-m);
  background:var(--wash,none),var(--card);border:1px solid var(--line);
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.sns:hover{border-color:var(--sns,var(--brand));transform:translateY(-3px);
  background:var(--wash,none),var(--card2)}
.sns svg{width:34px;height:34px;flex:none;color:var(--sns,var(--brand))}

/* ★각 곳이 내세우는 색을 가미한다 (미르 2026-09-02).
   ★색은 아이콘·테두리·은은한 물들임에만 쓴다.
     카드를 통째로 브랜드색으로 칠하면 어두운 사이트에서 광고 배너처럼 뉖다.
   ★인스타는 원래 그라데이션(주황→분홍→보라)이라 물들임도 그대로 세 색을 쓴다.
     아이콘은 선(stroke)이라 그라데이션을 못 입힌다 — 가운데 색 하나로 대신한다. */
.sns-ig{
  --sns:#E1306C;
  --wash:linear-gradient(120deg,rgba(245,133,41,.11),rgba(221,42,123,.11) 44%,
                                rgba(81,52,175,.10) 72%,transparent 92%);
}
.sns-bl{
  --sns:#03C75A;                       /* 네이버 초록 */
  --wash:linear-gradient(120deg,rgba(3,199,90,.13),transparent 62%);
}
.sns div{flex:1;min-width:0}
.sns b{display:block;font-size:18px;font-weight:700;letter-spacing:-.03em}
.sns span{font-size:14.5px;color:var(--tx2)}
.sns em{
  font-style:normal;font-size:22px;color:var(--tx3);flex:none;
  transition:transform .2s ease,color .2s ease;
}
.sns:hover em{transform:translateX(5px);color:var(--sns,var(--brand))}

/* ═══════════ 10. 오시는 길 ═══════════ */
.loc{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:stretch}
.loc-map{
  position:relative;
  border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);background:var(--card);
  min-height:400px;display:flex;
}
/* 구글 지도를 어두운 파랑 톤으로 물들여 사이트와 맞춘다 */
.loc-map iframe{
  width:100%;height:100%;min-height:400px;border:0;flex:1;
  filter:invert(92%) hue-rotate(188deg) saturate(.72) contrast(.92) brightness(.94);
}
/* 가장자리에 파란 형광이 은은하게 돌게 */
.loc-pin{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px 12px rgba(63,169,255,.24),inset 0 0 0 1px rgba(63,169,255,.28);
  animation:mapGlow 5.5s ease-in-out infinite;
}
@keyframes mapGlow{
  0%,100%{box-shadow:inset 0 0 90px 12px rgba(63,169,255,.20),inset 0 0 0 1px rgba(63,169,255,.24)}
  50%{box-shadow:inset 0 0 110px 16px rgba(63,169,255,.34),inset 0 0 0 1px rgba(63,169,255,.44)}
}
.loc-links{display:flex;gap:10px;flex-wrap:wrap}
.loc-links a{
  padding:7px 15px;border-radius:var(--pill);
  border:1px solid var(--line2);font-size:14.5px;font-weight:600;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.loc-links a:hover{border-color:var(--brand);color:var(--brand);background:rgba(63,169,255,.08)}
.loc-map-holder{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:40px 24px;text-align:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(63,169,255,.10),transparent 58%),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.028) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.028) 39px 40px);
}
.loc-map-holder svg{width:44px;height:44px;color:var(--brand);margin-bottom:6px}
.loc-map-holder b{font-size:19px;font-weight:700;letter-spacing:-.03em}
.loc-map-holder span{font-size:15px;color:var(--tx2)}
.loc-map-holder .btn{margin-top:16px}
#loc-map iframe,#loc-map>div[id]{width:100%;height:100%;min-height:400px;border:0}

.loc-info{
  padding:34px 30px;border-radius:var(--r-l);
  background:var(--card);border:1px solid var(--line);
}
.loc-info>div{padding:20px 0;border-bottom:1px solid var(--line)}
.loc-info>div:first-child{padding-top:0}
.loc-info>div:last-child{border-bottom:0;padding-bottom:0}
.loc-info dt{font-size:13.5px;font-weight:700;color:var(--brand);margin-bottom:7px;letter-spacing:.01em}
.loc-info dd{font-size:16px;line-height:1.7}
.loc-info dd a{font-weight:700;transition:color .18s ease}
.loc-info dd a:hover{color:var(--brand)}
.loc-info dd a.dim{font-weight:600}

/* ═══════════ 11. 전화 CTA ═══════════ */
.cta{padding:90px 0}
.cta-in{
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding:52px 56px;border-radius:var(--r-l);
  background:linear-gradient(120deg,rgba(63,169,255,.16),rgba(63,169,255,.04) 55%,transparent),var(--card);
  border:1px solid var(--line2);
}
.cta h2{font-size:clamp(25px,3.1vw,34px);font-weight:800;letter-spacing:-.04em}
.cta p{margin-top:9px;font-size:16.5px;color:var(--tx2)}

/* ═══════════ 12. 푸터 ═══════════ */
.ft{border-top:1px solid var(--line);background:var(--bg2)}
.ft-in{
  display:grid;grid-template-columns:1.5fr 1fr 1.6fr;gap:48px;
  padding-top:92px;padding-bottom:68px;
}
.ft-logo{height:46px;width:auto;margin-bottom:16px}
.ft-brand p{font-size:15px;color:var(--tx2);line-height:1.75}
.ft-nav{display:flex;flex-direction:column;gap:11px}
.ft-nav b,.ft-info b{
  font-size:14px;font-weight:700;color:var(--tx);margin-bottom:5px;letter-spacing:-.01em;
}
.ft-nav a{font-size:15px;color:var(--tx2);transition:color .18s ease;width:fit-content}
.ft-nav a:hover{color:var(--brand)}
.ft-info p{font-size:15px;color:var(--tx2);line-height:1.85}
.ft-info a{transition:color .18s ease}
.ft-info a:hover{color:var(--brand)}
.ft-copy{
  padding-top:32px;padding-bottom:42px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--tx3);
}

/* ═══════════ 모바일 하단 전화 바 ═══════════ */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:99;
  align-items:center;justify-content:center;gap:10px;
  height:60px;background:var(--brand);color:#05111E;
  font-size:16px;font-weight:700;letter-spacing:-.02em;
  box-shadow:0 -6px 24px rgba(0,0,0,.4);
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar svg{width:20px;height:20px;stroke-width:1.9}
.callbar b{font-weight:800}

/* ═══════════ 안내 말풍선 (PC 번호 복사) ═══════════ */
.toast{
  position:fixed;left:50%;bottom:40px;transform:translate(-50%,20px);
  z-index:200;padding:14px 24px;border-radius:var(--pill);
  background:var(--card2);border:1px solid var(--brand);color:var(--tx);
  font-size:15px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ═══════════ 스크롤 등장 ═══════════ */
.rise{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rise.is-in{opacity:1;transform:none}

/* ═══════════ 움직임 더하기 ═══════════ */

/* 섹션 제목 옆에 파란 형광 선이 그어진다 */
.sec-h2{position:relative;display:inline-block;padding-bottom:14px}
.sec-h2::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  border-radius:2px;background:linear-gradient(90deg,var(--brand),rgba(63,169,255,0));
  box-shadow:0 0 12px rgba(63,169,255,.65);
  transition:width .9s cubic-bezier(.22,.7,.3,1) .15s;
}
.sec-head.is-in .sec-h2::after{width:78px}
.sec-head.is-center .sec-h2::after{left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(63,169,255,0),var(--brand),rgba(63,169,255,0))}

/* 시설 아이콘이 살짝 뜬다 */
.facts-list li{transition:transform .22s ease}
.facts-list li:hover{transform:translateY(-4px)}
.facts-list li:hover svg{filter:drop-shadow(0 0 9px rgba(63,169,255,.75))}
.facts-list svg{transition:filter .22s ease}

/* ★숫자 뒤 조명 애니메이션은 뺐다 (미르 2026-08-31) */

/* 프로그램 아이콘이 카드에 얹혀 살짝 커진다 */
.prog svg{transition:transform .28s ease,filter .28s ease}
.prog:hover svg{transform:scale(1.14) translateY(-2px);filter:drop-shadow(0 0 10px rgba(63,169,255,.7))}

/* 추천 이용권 카드에 파란 테두리 빛이 돈다 */
.pass.is-pick{animation:pickGlow 4.4s ease-in-out infinite}
@keyframes pickGlow{
  0%,100%{box-shadow:0 18px 50px rgba(63,169,255,.13)}
  50%{box-shadow:0 18px 62px rgba(63,169,255,.28)}
}

/* 전화 CTA 배경에 파란 기운이 천천히 흐른다 */
.cta-in{position:relative;overflow:hidden}
.cta-in>*{position:relative;z-index:1}
.cta-in::before{
  content:"";position:absolute;top:-60%;left:-20%;width:60%;height:220%;
  background:radial-gradient(ellipse,rgba(63,169,255,.22),transparent 62%);
  animation:drift 12s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(120%)}}

/* 갤러리 사진에 마우스를 올리면 아주 살짝 커진다 */
.gal-stage img{transition:opacity .28s ease,transform .5s ease}
.gal-stage:hover img{transform:scale(1.02)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .up{opacity:1;transform:none;animation:none}
  .badge-dot,.hero-slide.is-on,.hero-scan::before,
  .pass.is-pick,.cta-in::before,.loc-pin,.hero-down span{animation:none}
  .sec-h2::after{width:78px;transition:none}
  .gal-stage:hover img{transform:none}
  .facts-list li:hover{transform:none}
}

/* ═══════════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════════ */
@media (max-width:1080px){
  :root{--sec-y:84px}
  .hero{min-height:min(90vh,840px)}
  .prog-box{grid-template-columns:repeat(2,1fr)}
  .loc{grid-template-columns:1fr}
  .loc-map{min-height:340px}
}

@media (max-width:900px){
  .hd-nav{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;gap:0;margin:0;
    background:rgba(11,15,22,.98);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .hd-nav.is-open{max-height:340px}
  .hd-nav a{padding:17px 24px;border-bottom:1px solid var(--line);font-size:16px}
  .hd-nav a::after{display:none}
  /* ★머리말 전화 버튼을 뺀 뒤로는 햄버거가 오른쪽 끝을 맡는다.
       예전엔 .hd-tel 의 margin-left:auto 가 밀어주고 있었다 —
       그걸 빼니 햄버거가 로고 옆에 붙어버렸다(2026-09-02 실측). */
  .hd-burger{display:block;order:3;margin-left:auto}

  .hero{padding:124px 0 150px;min-height:min(88vh,760px)}
  /* ★휴대폰은 사진이 화면 전체를 채워 옆에 빈 자리가 없다.
       글 위쪽 빈 사진 자리(오른쪽 윗모서리)로 올린다.
     ★아래로 내리면 360px 에서 버튼과 시설박스 사이 22px 밖에 안 남아
       버튼 위에 올라탄다(실측함). */
  .hero-arw{top:96px;bottom:auto;margin-top:0;width:44px;height:44px}
  .hero-prev{left:24px;right:auto}
  .hero-next{right:20px;left:auto}
  .hero-veil{
    background:
      radial-gradient(ellipse 90% 45% at 60% 26%,rgba(63,169,255,.20),transparent 64%),
      linear-gradient(180deg,rgba(11,15,22,.84) 0%,rgba(11,15,22,.52) 34%,rgba(11,15,22,.82) 72%,var(--bg) 100%);
  }
  .hero-p br{display:none}
  .hero-down{display:none}

  .rv-list{grid-template-columns:1fr}
  .rv p{min-height:0}
  .pass-list{grid-template-columns:1fr;gap:26px}
  .sns-list{grid-template-columns:1fr}
  .cta-in{padding:38px 30px;flex-direction:column;align-items:flex-start}
  .ft-in{grid-template-columns:1fr;gap:38px;padding-top:70px;padding-bottom:54px}
  .ft-copy{padding-top:26px;padding-bottom:36px}

  .callbar{display:flex}
  body{padding-bottom:60px}
  .toast{bottom:78px}
}

@media (max-width:600px){
  :root{--sec-y:66px;--r-l:20px;--r-m:15px}
  .wrap{padding:0 18px}
  .hd-in{height:66px;gap:12px}
  html{scroll-padding-top:66px}
  .hd-nav{inset:66px 0 auto 0}
  .hd-logo img{height:34px}
  .ft-logo{height:40px}
  .hd-tel-lb{display:none}

  .hero{padding:100px 0 48px}
  .hero-h1{font-size:34px;letter-spacing:-.04em;line-height:1.28}
  .hero-p{font-size:16px}
  .hero-btns{gap:10px}
  .btn{height:48px;padding:0 24px;font-size:15px}
  .btn-lg{height:56px;font-size:17px;width:100%}

  /* 휴대폰에서는 옆으로 밀지 않고 네 칸씩 두 줄로 떨어뜨린다 */
  .facts{margin-top:-96px;padding:0 0 30px}
  .facts-panel{padding:24px 16px}
  .facts-list{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:22px 8px;padding:24px 0 4px;overflow:visible;
  }
  .facts-list li{min-width:0;gap:10px}
  .facts-list svg{width:26px;height:26px}
  .facts-list span{font-size:12.5px;white-space:normal;line-height:1.35}

  .stats-in{padding-bottom:20px}
  /* ★360px 에서 96px 이면 셋째가 다음 줄로 떨어졌다(실측). 78px 로 낮췌다 */
  .stat{flex:1 1 30%;min-width:78px;padding:6px 4px}
  .stat+.stat::before{display:none}
  .stat-lb{font-size:12px;margin-bottom:5px}

  .sec-head{margin-bottom:30px}
  .sec-sub{font-size:15.5px}

  .gal-strip{gap:8px;margin-top:16px}
  .gal-nav{width:38px;height:38px;padding:9px}
  .gal-thumb{width:108px}
  .gal-cap{font-size:14.5px;margin-top:12px}
  /* 휴대폰에서는 세로 사진을 세로 그대로 크게 보여준다 */
  .gal-stage.is-portrait{aspect-ratio:3/4}

  .prog-box{grid-template-columns:1fr;padding:16px;gap:12px}
  .prog{padding:22px 20px}

  .pass{padding:30px 22px}
  .loc-info{padding:26px 22px}
  .loc-map{min-height:280px}
  #loc-map iframe,#loc-map>div[id]{min-height:280px}
}