/* ══════════════════════════════════════════════════════════
   BASI PILATES KOREA — 지점 랜딩페이지 공통 스타일
   이 파일 하나만 고치면 모든 지점 페이지가 함께 바뀝니다.
   ══════════════════════════════════════════════════════════ */

/* ── BASI 공식 브랜드 색상 (BASI Brand Expression V1.4 / Colors 2.0) ──
   Red   : Pantone 485C  #DA291C   — 로고 마크 전용. 그 외에는 아주 아껴 쓴다
   Dark  : #353635                 — 어두운 패널 · 색면의 기본색
   Light : #4E4E4D
   White : #FFFFFF (Paper White)
   ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F6F4;
  --ink:#353635; --ink-soft:#4E4E4D; --muted:#8A8A88;
  --line:#E6E6E3; --line-strong:#CECEC9;
  --accent:#DA291C; --accent-deep:#B32116; --accent-soft:#E8837A; --accent-wash:#FBEEEC;
  --btn-red:#DA291C; --btn-red-dk:#B32116;
  --dark:#353635;
  --radius:0; --r-img:12px; --maxw:1140px;   /* 패널은 각지게, 사진만 살짝 둥글게 */

  /* 제목 : 영문은 Intro(→Montserrat), 한글은 명조.  본문 : 고딕 */
  --ff-kr:"Pretendard Variable",Pretendard,"Helvetica Neue",Helvetica,
          "Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
  --ff-en:"Montserrat",var(--ff-kr);
  /* ↓ 제목 글꼴 스위치. 명조로 바꾸려면 "Montserrat","Noto Serif KR",serif */
  --ff-title:var(--ff-en);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--ff-kr);font-size:1.075rem;line-height:1.75;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;padding-bottom:76px;
  word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--ff-title);line-height:1.38;
  letter-spacing:-.022em;font-weight:600;text-wrap:balance;word-break:keep-all}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.5rem,4.5vw,2.5rem)}
.en{font-family:var(--ff-en)}
/* 소제목 라벨 — 기본은 회색. 강조가 필요한 곳만 .eyebrow.hot 으로 빨강 */
.eyebrow{font-family:var(--ff-en);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted);font-weight:700;margin:0 0 1rem}
.eyebrow.hot{color:var(--accent)}

/* ── 로고 ── */
.logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink)}
/* 상단 바가 이미 흰색이라 로고를 감싸는 흰 상자는 없앤다 */
.logo .tile{background:none;border:0;border-radius:0;padding:0;display:inline-flex;box-shadow:none}
.logo .tile img{width:82px;height:auto}
.logo .divider{width:1px;height:22px;background:var(--line);margin:0 .5rem}
/* 지점명은 검정 — 빨강은 로고 마크에만 (브랜드 가이드: Red is reserved for the BASI thumbnail) */
.logo .loc{font-weight:700;font-size:1.2rem;color:var(--ink);letter-spacing:-.02em}
.logo.sm .tile img{width:60px}

/* ── 상단 바 ── */
/* 상단 띠 — 이번 달 혜택 알림 */
.promo{background:var(--ink);color:#fff;text-align:center;font-size:.83rem;
  font-weight:600;padding:.6rem 1.1rem;letter-spacing:-.01em}
.promo a{color:#fff;text-decoration:none;display:inline-flex;gap:.45rem;align-items:center}
.promo a:hover{text-decoration:underline}
.promo .arrow{transition:transform .2s}
.promo a:hover .arrow{transform:translateX(3px)}

.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:.3s}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.96)}
/* 로고 | 메뉴 | 버튼 을 3등분해서 메뉴가 화면 정중앙에 오게 한다 */
/* 로고 · 메뉴 · 버튼 세 덩어리를 고르게 편다.
   왼쪽에 로고와 메뉴를 다 몰면 무게가 한쪽으로 쏠려 오른쪽이 허전해진다 */
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
.nav-links{display:flex;gap:clamp(1.15rem,1.9vw,1.7rem);align-items:center;justify-self:center}
.nav-links a{text-decoration:none;color:var(--ink-soft);font-size:1.02rem;font-weight:600;transition:.2s;letter-spacing:-.015em;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
/* 인스타는 글씨 대신 아이콘으로, 신청 버튼 옆에 */
/* 인스타 아이콘 — 메뉴 마지막 항목처럼 FAQ 옆에 */
.nav .ig{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;color:var(--muted);margin-left:-.4rem;
  border-radius:50%;transition:.2s;flex:0 0 auto}
.nav .ig svg{width:21px;height:21px}
.nav .ig:hover{color:var(--accent);background:var(--surface-2)}

.nav .btn{display:none}
/* 상단 바 버튼은 조용하게 — 빨간 버튼은 첫 화면과 맨 아래 두 곳에만 */
.nav .btn-primary{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.nav .btn-primary:hover{background:transparent;border-color:var(--accent);color:var(--accent);transform:none;box-shadow:none}
@media(max-width:940px){ .nav-links{display:none} }
@media(min-width:721px){ .nav .btn{display:inline-flex} }
@media(max-width:940px){ .nav-right{margin-left:auto} }
/* 오른쪽 묶음 — 신청 버튼, 그리고 메뉴가 숨는 폭에서만 나오는 인스타.
   넓은 화면에서는 인스타가 메뉴 끝(FAQ 옆)에 있는 게 자연스럽고,
   메뉴가 통째로 숨는 폭부터는 여기 있는 아이콘이 대신 나온다 */
.nav-right{display:flex;align-items:center;gap:.55rem;justify-self:end}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--ff-kr);font-size:.96rem;font-weight:700;letter-spacing:-.01em;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .18s,box-shadow .25s,background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--btn-red);color:#fff}
.btn-primary:hover{background:var(--btn-red-dk);transform:translateY(-2px);
  box-shadow:0 12px 26px -14px rgba(53,54,53,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:1.05rem 2rem;font-size:1.05rem}
/* 카카오톡 말풍선 아이콘 */
.ico-kakao{width:1.15em;height:1.15em;flex:0 0 auto;margin-right:-.1rem}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* ── 히어로 : 사진이 화면을 꽉 채웁니다 ── */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--dark)}
/* 배경 사진 — <img class="hero-bg" src="photos/hero.jpg" alt=""> 한 줄로 넣습니다 */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* 글씨가 놓이는 왼쪽을 어둡게 깔아 사진이 산만해도 읽히게 한다 */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(28,28,28,.88) 0%,rgba(28,28,28,.66) 38%,rgba(28,28,28,.12) 78%),
    linear-gradient(180deg,rgba(28,28,28,.42) 0%,rgba(28,28,28,.10) 30%,rgba(28,28,28,.72) 100%)}
@media(max-width:900px){
  .hero::after{background:linear-gradient(180deg,rgba(28,28,28,.55) 0%,rgba(28,28,28,.42) 30%,rgba(28,28,28,.88) 100%)}
}
.hero .wrap{position:relative;z-index:2;padding-top:7rem;padding-bottom:clamp(2.6rem,6vw,4.4rem)}
.hero-inner{max-width:46rem;color:#fff}
.hero .eyebrow{color:#fff;opacity:.82;margin-bottom:1.3rem}
.hero h1{color:#fff;font-size:clamp(2.3rem,6.2vw,4.4rem);letter-spacing:-.04em;
  text-shadow:0 2px 34px rgba(0,0,0,.4)}
.hero h1 .hl{color:var(--accent-soft)}
.hero .lead{margin-top:1.5rem;font-size:clamp(1.02rem,1.5vw,1.16rem);
  color:rgba(255,255,255,.88);max-width:40ch;line-height:1.8}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.hero .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
.hero-note{margin-top:1.1rem;font-size:.85rem;color:rgba(255,255,255,.62)}
.hero-stats{display:flex;gap:2.4rem;margin-top:2.6rem;flex-wrap:wrap;
  padding-top:1.9rem;border-top:1px solid rgba(255,255,255,.22)}
.stat{padding-left:1rem;border-left:1px solid rgba(255,255,255,.35)}
.stat .n{font-family:var(--ff-en);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;
  line-height:1;color:#fff}
.stat .n > span{font-size:.55em}
.stat .l{font-size:.78rem;color:rgba(255,255,255,.6);margin-top:.4rem}

/* 히어로 안 혜택 배지 */
.hero-offer{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:.5rem .5rem .5rem 1rem;margin-top:1.8rem;
  font-size:.9rem;font-weight:700;color:#fff;text-decoration:none;
  backdrop-filter:blur(8px);transition:.2s}
.hero-offer:hover{background:rgba(255,255,255,.22)}
.hero-offer b{background:var(--accent);border-radius:999px;padding:.3rem .8rem;
  font-family:var(--ff-en);font-size:.72rem;letter-spacing:.12em}

/* ══ 히어로 B : BASI 썸네일 형상 ══
   브랜드 가이드의 "Thumbnail shapes our visual world" 를 따른 버전.
   흰 바탕 + 사진을 BASI 마크 모양으로 오려 넣는다. */
.hero-brand{background:var(--ground);padding:clamp(2rem,4vw,3.2rem) 0 clamp(2.4rem,4.5vw,3.6rem)}
.hb-grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,4vw,3.4rem);align-items:center}
@media(max-width:900px){ .hb-grid{grid-template-columns:1fr;gap:2.4rem} }
.hb-copy .eyebrow{font-size:.86rem;letter-spacing:.16em;color:var(--ink-soft);margin-bottom:1.2rem}
.hb-copy h1{font-size:clamp(2.2rem,5.4vw,3.8rem);letter-spacing:-.042em;line-height:1.2}
.hb-copy .lead{margin-top:1.2rem;font-size:clamp(1.02rem,1.4vw,1.12rem);
  color:var(--ink-soft);max-width:35ch;line-height:1.75;
  text-wrap:pretty}   /* 줄바꿈은 브라우저에 맡긴다 — 마지막 줄에 한 단어만 남지 않게 */
.hb-copy .hero-cta{margin-top:1.5rem}
.hb-copy .hero-note{margin-top:1.1rem;font-size:.85rem;color:var(--muted)}
.hb-copy .hero-cta{align-items:center;gap:1.6rem}
.hb-info{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--ink-soft)}
/* 히어로 아래 얇은 숫자 띠 */
.statband{background:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statband .wrap{display:flex;justify-content:center;flex-wrap:wrap;padding-left:0;padding-right:0}
.statband .stat{flex:1;min-width:9rem;text-align:center;padding:1.4rem 1rem;
  border:0;border-left:1px solid var(--line)}
.statband .stat:first-child{border-left:0}
.statband .stat .n{font-family:var(--ff-en);font-size:1.35rem;font-weight:600;
  letter-spacing:-.02em;line-height:1;color:var(--ink)}
.statband .stat .n > span{font-size:.55em}
.statband .stat .l{font-size:.74rem;color:var(--muted);margin-top:.6rem;letter-spacing:.02em}

.hb-copy .hero-stats{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line);
  display:flex;gap:2.2rem;flex-wrap:wrap}
.hb-copy .stat{padding-left:1rem;border-left:1px solid var(--line-strong)}
.hb-copy .stat .n{color:var(--ink)}
.hb-copy .stat .l{color:var(--muted)}
/* 첫 화면 혜택 배지 — 조용하게. 강조는 빨간 라벨 하나로만 */
.hb-copy .hero-offer{background:none;border:1px solid var(--line-strong);
  color:var(--ink);backdrop-filter:none;font-weight:600;font-size:1rem;
  padding:.55rem .65rem .55rem .75rem;margin-top:1.3rem}
.hb-copy .hero-offer:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.hb-copy .hero-offer b{font-size:.74rem;padding:.32rem .78rem;letter-spacing:.1em}

/* 사진 — 장식 없이 그대로 */
/* 첫 화면 사진 — 원본이 정사각형. 잘리면 거울이 날아가므로 비율을 지킨다 */
.hb-art{position:relative;aspect-ratio:1/1;max-width:31rem;margin-left:auto;width:100%}
@media(max-width:900px){ .hb-art{margin:0 auto;max-width:26rem} }
.hb-art img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-img)}
/* 사진이 없는 지점용 — 짙은 회색 면 */
.hb-art .fill{width:100%;height:100%;background:var(--dark);
  display:flex;align-items:center;justify-content:center;padding:16%}
.hb-art .fill img{width:100%;height:auto;object-fit:contain;filter:brightness(0) invert(1)}

/* 히어로 비주얼 — 사진이 있으면 img, 없으면 아래 추상 그래픽 */
.hero-art{position:relative;aspect-ratio:4/5;border-radius:calc(var(--radius) + 6px);
  background:linear-gradient(160deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);overflow:hidden;box-shadow:0 30px 60px -40px rgba(53,54,53,.5)}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-art .rails{position:absolute;left:0;right:0;top:38%;height:24%;
  display:flex;flex-direction:column;justify-content:space-between}
.hero-art .rails span{height:2px;background:linear-gradient(90deg,transparent,var(--accent-soft),transparent);opacity:.55}
.hero-art .carriage{position:absolute;top:34%;left:18%;width:38%;height:32%;
  border:1.5px solid var(--accent);border-radius:6px;background:rgba(225,40,31,.08);
  animation:glide 6s ease-in-out infinite}
.hero-art .frame{position:absolute;inset:0;padding:1.6rem;display:flex;
  flex-direction:column;justify-content:space-between}
.hero-art .tag{font-family:var(--ff-en);font-weight:600;color:var(--accent);font-size:.95rem}
.hero-art .big{font-family:var(--ff-en);font-size:clamp(2.3rem,6.2vw,3rem);font-weight:800;
  letter-spacing:-.03em;align-self:flex-end;line-height:.95}
.hero-art .big i{font-style:normal;color:var(--accent);display:block;font-size:.36em;
  letter-spacing:.22em;text-transform:uppercase;margin-top:.6rem;font-weight:700}
@keyframes glide{0%,100%{transform:translateX(0)} 50%{transform:translateX(46%)}}
@media(prefers-reduced-motion:reduce){ .hero-art .carriage{animation:none} }

/* ── 섹션 ── */
.band{padding:clamp(3.2rem,5.5vw,4.8rem) 0}
.band + .band{border-top:1px solid var(--line)}
.band.alt{background:var(--surface-2)}
.sec-head{max-width:52ch;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.34;letter-spacing:-.035em}
.sec-head p{margin-top:.8rem;color:var(--ink-soft);text-wrap:pretty}

/* ── 공감 리스트 ── */
.pains{max-width:40rem;margin:0 auto;display:grid;gap:.7rem}
.pain{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.4rem;font-size:1rem;font-weight:700;display:flex;gap:.9rem;align-items:flex-start}
.pain::before{content:"—";color:var(--accent-soft);font-weight:800;flex:0 0 auto}
.turn{max-width:40rem;margin:2.2rem auto 0;text-align:center;font-size:1.15rem;
  font-weight:800;letter-spacing:-.03em;line-height:1.55}
.turn em{font-style:normal;color:var(--accent)}
.turn + p{max-width:44rem;margin:1.1rem auto 0;text-align:center;color:var(--ink-soft);font-size:1rem}

/* ── 4기둥 ── */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,2.6vw,2.4rem) clamp(2rem,3.5vw,3.2rem)}
@media(max-width:720px){ .pillars{grid-template-columns:1fr} }
.pillar{background:none;padding:1.2rem 0 0;border-top:1px solid var(--line-strong)}
.pillar .k{font-family:var(--ff-en);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted);font-size:.66rem;margin-bottom:1.2rem}
.pillar h3{font-size:1.26rem;margin-bottom:.7rem}
.pillar p{color:var(--ink-soft);font-size:.97rem}

/* ── 피처(블록 시스템) ── */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:820px){ .feature{grid-template-columns:1fr} }
/* BASI 12 블록 */
/* 12블록 — 큰 숫자를 주인공으로 한 편집형 인덱스 */
.blocks{display:grid;grid-template-columns:repeat(4,1fr);
  gap:0 clamp(1.6rem,3vw,3rem);background:none;border:0}
@media(max-width:900px){ .blocks{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .blocks{grid-template-columns:1fr} }

.blk{background:none;position:relative;display:block;
  padding:1rem 0 1.1rem;border-top:1px solid var(--line-strong)}
.blk .n{display:block;font-family:var(--ff-en);font-size:clamp(1.6rem,2.6vw,2.1rem);
  font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--line-strong);
  transition:color .25s}
.blk .e{display:block;font-family:var(--ff-en);font-weight:700;
  font-size:clamp(.86rem,1.05vw,.95rem);letter-spacing:-.015em;color:var(--ink);
  line-height:1.4;margin-top:.5rem;min-height:2.6em}
@media(max-width:900px){ .blk .e{min-height:0} }
.blk:hover .n{color:var(--accent)}
.feature h2{font-size:clamp(1.8rem,3.3vw,2.5rem)}
.feature p{margin-top:1.1rem;color:var(--ink-soft)}
.feature ul{margin:1.6rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.85rem}
.feature li{display:flex;gap:.8rem;align-items:flex-start;font-size:1rem}
.feature li .tick{color:var(--line-strong);font-weight:700;margin-top:.05rem}

/* ── 목적별 ── */
.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.4vw,2.2rem)}
@media(max-width:820px){ .goals{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .goals{grid-template-columns:1fr} }
.goal{background:none;padding:1.2rem 0 0;border-top:1px solid var(--line-strong)}
.goal .ico{width:28px;height:28px;margin-bottom:.7rem;color:var(--accent)}
.goal h3{font-size:1.12rem;margin-bottom:.45rem}
.goal p{font-size:.92rem;color:var(--ink-soft)}

/* ── 카드(수업) ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:820px){ .cards{grid-template-columns:1fr} }
/* 테두리 없는 편집형 카드 — 사진이 먼저, 글이 아래 */
.card{background:transparent;border:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.card > img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:1.4rem;border-radius:var(--r-img);
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover) and (pointer:fine){ .card:hover > img{transform:scale(1.02)} }
.card .num{font-family:var(--ff-en);font-weight:700;color:var(--line-strong);font-size:1.1rem;line-height:1}
.card h3{font-size:1.32rem;margin-top:.35rem}
.card .desc{color:var(--ink-soft);font-size:.95rem;flex:1;margin-top:.5rem}
.card .meta{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.card .meta b{color:var(--ink);font-weight:700}
.cards{gap:clamp(1.4rem,3vw,2.4rem)}

/* ── 이벤트 ── */
.offers{display:grid;gap:clamp(1.2rem,2vw,1.6rem);grid-template-columns:repeat(3,1fr)}
.offers.n2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){ .offers,.offers.n2{grid-template-columns:1fr} }
/* 크림 바탕 위에 흰 카드로 띄운다 — 이 섹션은 강조 구역 */
.offer{background:var(--surface);border:0;border-radius:var(--r-img);
  padding:clamp(1.9rem,3vw,2.5rem);display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(53,54,53,.04), 0 20px 38px -30px rgba(53,54,53,.55);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s}
@media (hover:hover) and (pointer:fine){
  .offer:hover{transform:translateY(-3px);
    box-shadow:0 1px 2px rgba(53,54,53,.05), 0 28px 48px -30px rgba(53,54,53,.6)}
}
/* 빨간 짧은 선 하나로 "혜택"임을 표시 */
.offer::before{content:"";display:block;width:26px;height:2px;background:var(--accent);margin-bottom:1.3rem}
.offer .tagline{font-size:.72rem;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:.9rem}
.offer h3{font-size:1.3rem;margin-bottom:1rem}
.offer .benefit{font-size:1.14rem;font-weight:700;line-height:1.65;color:var(--ink);margin-bottom:1.4rem;letter-spacing:-.02em}
.offer .big{display:block;font-family:var(--ff-en);font-size:2.1rem;font-weight:800;
  color:var(--accent);line-height:1.1;letter-spacing:-.03em;margin-bottom:.3rem}
.offer dl{margin:auto 0 0;padding-top:1.4rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:.45rem .9rem;font-size:.87rem}
.offer dt{color:var(--muted);white-space:nowrap}
.offer dd{margin:0;color:var(--ink-soft)}
.note{margin-top:1.6rem;font-size:.87rem;color:var(--muted);text-align:center;line-height:1.75}

/* ── 스텝 ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.3rem,2.2vw,2rem)}
@media(max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .steps{grid-template-columns:1fr} }
.step{background:none;border:0;border-top:1px solid var(--line-strong);padding:1.1rem 0 0}
.step .k{font-family:var(--ff-en);font-weight:700;letter-spacing:.16em;color:var(--muted);
  font-size:.74rem;margin-bottom:.9rem}
.step h3{font-size:1.08rem;margin-bottom:.5rem}
.step p{font-size:.92rem;color:var(--ink-soft)}

/* ── 갤러리 ── */
/* 갤러리 — PC·모바일 모두 같은 크기로 나란히 */
.gal{display:grid;gap:clamp(.7rem,1.4vw,1.1rem);overflow:hidden;
  grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .gal{grid-template-columns:repeat(2,1fr)} }
@media(max-width:380px){ .gal{grid-template-columns:1fr} }
.gal img,.gal .ph{width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--r-img);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover) and (pointer:fine){ .gal img:hover{transform:scale(1.03)} }
.ph{background:#F6F6F4;border:1.5px dashed var(--line-strong);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--muted);font-size:.82rem;text-align:center;padding:1rem;gap:.3rem;font-weight:700}
.ph b{font-size:.7rem;letter-spacing:.1em;color:var(--line-strong)}

/* ── 오시는 길 ── */
.contact{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.3rem,2.2vw,2rem)}
@media(max-width:1000px){ .contact{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .contact{grid-template-columns:1fr} }
.contact .item{background:none;padding:1.1rem 0 0;border-top:1px solid var(--line-strong)}
.contact .k{font-family:var(--ff-en);font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.contact .v{font-size:1.02rem;font-weight:700}
.contact .v small{display:block;font-size:.87rem;font-weight:400;color:var(--muted);margin-top:.3rem}

/* ── FAQ ── */
.faq details{background:none;border:0;border-bottom:1px solid var(--line);margin:0}
/* space-between 을 쓰면 안쪽에 span 이 하나만 생겨도 글자가 양끝으로 벌어진다.
   글자는 붙여 두고 + 기호만 오른쪽으로 민다 */
.faq summary{padding:1.15rem .2rem;font-weight:700;cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:1rem;font-size:1rem;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--muted);font-weight:400;
  font-size:1.3rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 .2rem 1.3rem;color:var(--ink-soft);font-size:.97rem;max-width:60ch}

/* ── 예약 ── */
/* 마지막 신청 구역 — 어두운 상자 대신 여백과 글씨로 */
.booking{text-align:center;max-width:44rem;margin:0 auto}
.booking h2{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.035em;line-height:1.3}
.booking .lead{margin:1.1rem auto 2.2rem;color:var(--ink-soft);max-width:38ch}
.alt-links{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:center;
  font-size:.88rem}
.alt-links a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:2px;transition:.2s}
.alt-links a:hover{color:var(--ink);border-color:var(--ink)}

/* ── 푸터 ── */
/* 푸터 — 마지막 요소라 좌우로 벌리지 않고 가운데로 모은다 */
footer{padding:3rem 0 3.2rem;border-top:1px solid var(--line)}
.foot-in{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.3rem;font-size:.88rem;color:var(--muted);line-height:1.9}
.foot-in .logo{pointer-events:auto}
.foot-in .logo.sm .tile img{width:96px}
.foot-in .logo.sm .loc{font-size:1.15rem}
.foot-in .logo.sm .divider{height:20px}
.foot-in a{color:var(--ink-soft);text-decoration:none;font-weight:600}
.foot-in a:hover{color:var(--accent)}

/* ── 채워야 할 자리 ── */
.todo{color:var(--accent);font-weight:800;background:var(--accent-wash);padding:.1rem .5rem;
  border-radius:6px;font-size:.87rem;border:1px dashed var(--accent-soft)}

/* ── 모바일 하단 고정 ── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.7rem 1.1rem;
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(246,243,238,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.dock-in{display:flex;align-items:center;gap:.6rem;max-width:32rem;margin:0 auto}
.dock .btn{flex:1 1 auto;display:flex}
/* 전화가 편한 분들을 위한 자리. 아이콘만 두어 카카오톡 버튼의 크기를 지키게 한다 */
.dock-tel{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:999px;background:#fff;
  border:1px solid var(--line-strong);color:var(--ink);text-decoration:none;
  transition:border-color .2s,color .2s}
.dock-tel svg{width:21px;height:21px}
.dock-tel:active{border-color:var(--accent);color:var(--accent)}
@media(min-width:721px){ body{padding-bottom:0} .dock{display:none} }

/* ── 사진 톤 통일 ──
   폰으로 찍은 컷이라 밝기·색이 제각각이라, 아주 살짝만 눌러 한 세트로 보이게 한다.
   천장(배관·에어컨)이 덜 보이도록 아래쪽을 기준으로 잘라낸다. */
.hb-art img,.card > img,.gal img{
  filter:saturate(.94) contrast(1.05) brightness(1.01);
  object-position:center 62%;
}
/* 첫 화면 사진은 잘라내지 않고 전체를 보여준다 */
.hb-art img{object-position:center center}

/* 자격 칩 (송도 초안) */
.creds{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;
  font-size:.85rem;color:var(--ink-soft)}
.chip b{color:var(--accent);font-family:var(--ff-en);font-weight:700;font-size:.8rem;letter-spacing:.04em}

/* ══════════════════════════════════════════════════════════
   휴대폰에서 세로로 너무 길어지지 않게 — 격자를 2열로 유지
   ══════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* 12블록 · 목적별 · 체험흐름 · 공간사진 : 1열 → 2열 */
  .blocks{grid-template-columns:repeat(2,1fr) !important;column-gap:1.1rem}
  .goals{grid-template-columns:repeat(2,1fr) !important;gap:1.1rem}
  .steps{grid-template-columns:repeat(2,1fr) !important;gap:1.1rem}
  .gal{grid-template-columns:repeat(2,1fr) !important;gap:.6rem}
  .gal img{aspect-ratio:1/1}
  .contact{grid-template-columns:repeat(2,1fr) !important;gap:1.1rem}
  .pillars{grid-template-columns:repeat(2,1fr);gap:1.3rem 1.1rem}

  /* 수업 카드 사진을 납작하게 */
  .card > img{aspect-ratio:16/9;margin-bottom:.8rem}
  .cards{gap:3rem}

  /* 여백 한 번 더 조이기 */
  .band{padding:2.6rem 0}
  .sec-head{margin-bottom:1.4rem}
  .offer{padding:1.4rem 1.3rem}
  .offers{gap:.9rem}
  .blk{padding:.8rem 0 .9rem}
  .blk .n{font-size:1.5rem}
  .blk .e{font-size:.8rem;min-height:2.4em;margin-top:.35rem}
  .goal .ico{width:24px;height:24px;margin-bottom:.5rem}
  .goal h3,.step h3,.pillar h3{font-size:1rem}
  .goal p,.step p{font-size:.86rem}
  .pillar p{font-size:.9rem}
}
@media(max-width:380px){
  .blocks,.goals,.steps{grid-template-columns:repeat(2,1fr) !important}
  .blk .e{font-size:.75rem}
}
/* 휴대폰에서 혜택 배지가 알약 안에서 두 줄로 깨지는 문제 —
   알약을 버리고 왼쪽 선이 있는 블록으로 바꿔 줄을 가지런히 맞춘다 */
@media(max-width:700px){
  .hb-copy .hero-offer{
    display:block;width:100%;border:0;border-left:2px solid var(--accent);
    border-radius:0;background:var(--surface-2);
    padding:.85rem 1rem .9rem;margin-top:1.4rem;
    font-size:.97rem;line-height:1.5;color:var(--ink)}
  .hb-copy .hero-offer:hover{background:#EFEFED}
  .hb-copy .hero-offer b{
    display:block;background:none;color:var(--accent);
    padding:0;margin-bottom:.25rem;font-size:.72rem;letter-spacing:.14em;font-weight:700}
  .hb-copy .hero-offer .arrow{display:inline-block;margin-left:.25rem;color:var(--muted)}
}
/* 휴대폰 상단 바 — 메뉴가 숨겨져 로고만 남으므로 가운데로 모은다 */
@media(max-width:720px){
  .nav-in{position:relative;display:flex;justify-content:center;height:58px}
  .nav .logo{margin:0}
}
/* ══════════════════════════════════════════════════════════
   스크롤하면 요소가 부드럽게 나타난다
   · 같은 줄에 있는 항목들은 아주 살짝 시차를 두고 등장
   · 애니메이션을 끄고 쓰는 분에게는 적용하지 않는다
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(18px);
      transition:opacity .8s cubic-bezier(.22,.7,.25,1), transform .8s cubic-bezier(.22,.7,.25,1)}
  .rv.on{opacity:1;transform:none}
  .rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s}
  .rv-d3{transition-delay:.24s} .rv-d4{transition-delay:.32s}
  .rv-d5{transition-delay:.40s}
}
/* ══════════════════════════════════════════════════════════
   마감 다듬기 — 디테일이 인상을 만든다
   ══════════════════════════════════════════════════════════ */

/* 1) 제목의 첫 글자를 살짝 왼쪽으로 빼서 선과 맞춘다 (광학 정렬) */
h1,h2{text-indent:-.03em}

/* 2) 숫자와 영문에 표 정렬용 자간 — 12블록 숫자가 가지런해진다 */
.blk .n,.stat .n,.card .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* 3) 섹션 제목 위에 짧은 선 하나 — 시작점을 명확히 */
.sec-head .eyebrow{display:inline-flex;align-items:center;gap:.7rem}
.sec-head .eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--line-strong)}
.sec-head.center .eyebrow{justify-content:center;flex-wrap:nowrap}
@media(max-width:700px){
  .sec-head .eyebrow::before{display:none}
  .sec-head .eyebrow{gap:0;letter-spacing:.16em}
}

/* 4) 사진 위에 아주 옅은 안쪽 테두리 — 흰 배경에서 사진이 뜨는 느낌 */
.hb-art,.card > img,.gal img{box-shadow:inset 0 0 0 1px rgba(53,54,53,.06)}



/* 6) 12블록 — 마우스를 올리면 숫자와 이름이 함께 반응 */
.blk{transition:border-color .3s}
.blk .e{transition:color .25s}
@media (hover:hover) and (pointer:fine){
  .blk:hover{border-top-color:var(--accent)}
  .blk:hover .e{color:var(--accent)}
}

/* 7) 목적별 카드도 같은 방식으로 */
.goal{transition:border-color .3s}
.goal .ico{transition:transform .35s cubic-bezier(.22,.7,.25,1)}
@media (hover:hover) and (pointer:fine){
  .goal:hover{border-top-color:var(--accent)}
  .goal:hover .ico{transform:translateY(-3px)}
}

/* 8) 혜택 카드 위 빨간 선이 마우스를 올리면 길어진다 */
.offer::before{transition:width .4s cubic-bezier(.22,.7,.25,1)}
@media (hover:hover) and (pointer:fine){ .offer:hover::before{width:44px} }

/* 9) 상단 바 — 스크롤하면 살짝 얇아지며 자리를 내준다 */
.nav-in{transition:height .3s cubic-bezier(.22,.7,.25,1)}
.nav.scrolled .nav-in{height:62px}

/* 10) 본문 문단의 마지막 줄이 한 단어만 남지 않게 */
.sec-head p,.card .desc,.pillar p,.goal p,.step p{text-wrap:pretty}
/* 휴대폰에서만 보이는 네 번째 사진 — 2열 x 2줄로 꽉 차게 */
.only-mobile{display:none}
@media(max-width:700px){ .only-mobile{display:block} }

/* 보조 링크 — 밑줄 없이 화살표가 따라온다 */
.more{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-soft);
  font-size:.95rem;font-weight:600;text-decoration:none;border:0;padding:0;
  transition:color .2s;white-space:nowrap}
.more::after{content:"\2192";font-size:.9em;
  transition:transform .25s cubic-bezier(.22,.7,.25,1)}
.more:hover{color:var(--accent)}
.more:hover::after{transform:translateX(4px)}
/* ══════════════════════════════════════════════════════════
   휴대폰 전용 마무리
   · PC용으로 잡은 글씨가 작은 화면에선 너무 크다
   · PC에서 넣은 강제 줄바꿈(<br>)은 좁은 화면에서 오히려 방해가 된다
   ══════════════════════════════════════════════════════════ */
@media(max-width:700px){

  /* 본문 — 줄간격을 조금 좁혀 읽는 흐름을 빠르게 */
  body{font-size:1rem;line-height:1.62}

  /* 첫 화면 */
  .hb-copy h1{font-size:1.78rem;line-height:1.32;letter-spacing:-.035em}
  .hb-copy .lead{font-size:.97rem;line-height:1.68;margin-top:.9rem}
  .hb-copy .hero-offer{margin-top:1.1rem;font-size:.92rem}
  .hb-copy .hero-cta{margin-top:1.2rem;gap:1rem}
  .hb-info{font-size:.85rem;margin-top:1.1rem;padding-top:.9rem}
  .hb-art{max-width:100%}

  /* 섹션 제목 */
  .sec-head h2{font-size:1.45rem;line-height:1.42}
  .sec-head h2 br{display:none}
  .sec-head p{font-size:.93rem;margin-top:.6rem}
  .sec-head p br{display:none}
  .eyebrow{font-size:.62rem;letter-spacing:.2em;margin-bottom:.7rem}
  .sec-head .eyebrow::before{width:1rem}

  /* 혜택 카드 */
  .offer{padding:1.35rem 1.25rem}
  .offer h3{font-size:1.14rem;margin-bottom:.7rem}
  .offer .benefit{font-size:1rem;line-height:1.6;margin-bottom:1rem}
  .offer .benefit br{display:none}
  .offer .big{font-size:1.7rem}
  .offer dl{font-size:.82rem;padding-top:1rem;gap:.35rem .7rem}

  /* 수업 카드 */
  .card h3{font-size:1.14rem}
  .card .desc{font-size:.9rem;line-height:1.65}
  .card > img{aspect-ratio:16/9;margin-bottom:.75rem}
  /* 사진이 어느 카드 것인지 헷갈리지 않게 카드 사이를 크게 벌린다.
     사진-제 글자 12px 대 카드-카드 52px */
  .cards{gap:3.25rem}

  /* 4기둥 · 목적별 · 체험흐름 */
  .pillar h3{font-size:1.02rem}
  .pillar p{font-size:.87rem;line-height:1.62}
  .goal h3,.step h3{font-size:.98rem}
  .goal p,.step p{font-size:.85rem;line-height:1.6}

  /* 버튼 */
  .btn-lg{padding:.92rem 1.5rem;font-size:1rem}
  .more{font-size:.92rem}

  /* FAQ */
  .faq summary{font-size:.98rem;padding:1rem .1rem}
  .faq .a{font-size:.9rem;padding:0 .1rem 1.1rem}

  /* 오시는 길 */
  .contact .v{font-size:.95rem}
  .contact .v small{font-size:.82rem}

  /* 마지막 신청 */
  .booking h2{font-size:1.5rem}
  .booking h2 br{display:none}
  .booking .lead{font-size:.95rem;margin-bottom:1.6rem}
  .alt-links{font-size:.85rem;gap:.4rem 1.1rem}

  /* 푸터 */
  .foot-in{font-size:.83rem;gap:1rem}
  .foot-in .logo.sm .tile img{width:78px}
}
/* 휴대폰 — 섹션 제목과 내용이 끊겨 보이지 않게 붙인다 */
@media(max-width:700px){
  .sec-head{margin-bottom:1.1rem}
  #block .sec-head{margin-bottom:.9rem}
  .blocks{gap:0 1rem}
  .blk{padding:.7rem 0 .8rem}
}

/* 푸터 맨 끝 — 본사 공식 채널. 신뢰를 위한 한 줄이라 아주 조용하게 둔다 */
.foot-official{display:block;margin-top:.75rem;font-size:.84rem;color:var(--muted);letter-spacing:-.01em}
.foot-official a{color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
@media(hover:hover) and (pointer:fine){
  .foot-official a:hover{color:var(--ink-soft);border-bottom-color:var(--line-strong)}
}

/* Why BASI 끝 — 본사 공식 채널 카드.
   빨간 버튼이 아니라 면을 채운 패널이라, 눈에는 들어오되 체험 신청과 겨루지 않는다 */
.ig-card{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.25rem);
  margin-top:clamp(2rem,3.4vw,3rem);
  padding:clamp(1.05rem,2.1vw,1.45rem) clamp(1.15rem,2.3vw,1.6rem);
  background:var(--surface-2);border:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.ig-card .mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:clamp(42px,5vw,52px);height:clamp(42px,5vw,52px);border-radius:50%;
  background:var(--accent);color:#fff}
.ig-card .mark svg{width:56%;height:56%}
.ig-card .txt{flex:1 1 auto;min-width:0}
.ig-card .txt b{display:block;font-size:clamp(1rem,1.5vw,1.08rem);
  font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.4}
.ig-card .txt > span{display:block;margin-top:.15rem;font-size:.89rem;
  color:var(--muted);line-height:1.5}
.ig-card .go{flex:0 0 auto;color:var(--muted);font-size:1.25rem;
  transition:transform .2s,color .2s}
@media(hover:hover) and (pointer:fine){
  .ig-card:hover{background:#fff;border-color:var(--accent);
    transform:translateY(-2px);box-shadow:0 16px 30px -22px rgba(53,54,53,.5)}
  .ig-card:hover .go{color:var(--accent);transform:translateX(3px)}
}
@media(max-width:700px){
  .ig-card{margin-top:1.7rem;gap:.85rem;padding:1rem 1.05rem}
  .ig-card .txt b{font-size:.98rem}
  .ig-card .txt > span{font-size:.84rem}
}

/* 맨 아래 신청 — 여기까지 읽은 사람에게는 두 갈래를 나란히 보여준다.
   첫 화면과 달리 이 자리에서는 신청서도 충분히 검토된 선택지다 */
.book-cta{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;align-items:center}
.booking .btn-ghost{background:#fff;border-color:var(--line-strong)}
@media(hover:hover) and (pointer:fine){
  .booking .btn-ghost:hover{background:#fff;border-color:var(--accent);color:var(--accent);
    transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(53,54,53,.45)}
}
@media(max-width:560px){
  .book-cta{flex-direction:column;align-items:stretch;gap:.7rem}
  .book-cta .btn{width:100%}
}

/* Why BASI — 주장 바로 아래 붙는 근거 숫자.
   빨강은 쓰지 않는다. 숫자는 크기만으로 충분히 말한다 */
.proof{margin:clamp(1.9rem,3vw,2.7rem) 0 clamp(2rem,3.4vw,3rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-label{text-align:center;font-size:.86rem;letter-spacing:-.01em;
  color:var(--muted);font-weight:600;padding-top:1.15rem}
.proof-row{display:grid;grid-template-columns:repeat(3,1fr)}
.proof-row .stat{text-align:center;padding:1.15rem .8rem 1.4rem;
  border-left:1px solid var(--line)}
.proof-row .stat:first-child{border-left:0}
.proof-row .n{font-family:var(--ff-en);font-size:clamp(1.55rem,3.4vw,2.25rem);
  font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.proof-row .n > span{font-family:var(--ff-kr);font-size:.44em;font-weight:700;
  margin-left:.1em;letter-spacing:-.01em}
.proof-row .l{margin-top:.55rem;font-size:.82rem;color:var(--muted);letter-spacing:-.01em}
@media(max-width:520px){
  .proof-label{font-size:.8rem;padding-top:.95rem}
  .proof-row .stat{padding:.95rem .35rem 1.05rem}
  .proof-row .n{font-size:1.3rem}
  .proof-row .l{font-size:.72rem;margin-top:.4rem}
}

/* 상단 메뉴 — 지금 보고 있는 섹션에 밑줄.
   색이 아니라 선으로 알린다. 빨강은 체험 신청 버튼의 자리다 */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--ink);border-radius:2px;transform:scaleX(0);
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){ .nav-links a::after{transition:none} }

/* 휴대폰 — 하단 고정 바가 늘 떠 있으므로, 첫 화면의 같은 버튼은 감춘다.
   같은 빨간 버튼이 한 화면에 둘이면 서로 힘을 나눠 갖는다 */
@media(max-width:720px){
  .hb-copy .hero-cta{display:none}
  .hb-copy .hero-offer{margin-bottom:.2rem}
}

/* ── 사진 크게 보기 ──
   공간 사진을 누르면 어두운 화면 위에 원본 크기로 띄운다.
   원본이 570~760px이라 억지로 늘리지 않고, 화면 높이에 맞춰 딱 채우는 정도까지만 */
.gal img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(28,28,28,.93);backdrop-filter:blur(6px)}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:86vh;width:auto;height:auto;
  border-radius:var(--r-img);box-shadow:0 30px 80px -30px rgba(0,0,0,.85)}
.lb button{border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.15);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;transition:background .2s;font-family:var(--ff-en);line-height:1}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-close{position:absolute;top:clamp(.7rem,2vw,1.4rem);right:clamp(.7rem,2vw,1.4rem);
  width:44px;height:44px;font-size:1.6rem}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;font-size:1.5rem}
.lb-prev{left:clamp(.5rem,2vw,1.4rem)}
.lb-next{right:clamp(.5rem,2vw,1.4rem)}
.lb-count{position:absolute;bottom:clamp(1rem,3vw,1.8rem);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.72);font-size:.85rem;font-family:var(--ff-en);letter-spacing:.08em}
body.lb-open{overflow:hidden}
@media(max-width:520px){
  .lb{padding:.8rem}
  .lb-nav{width:40px;height:40px;font-size:1.3rem}
}

/* 첫 화면 문장 — 넓은 화면에서는 아래 <br> 로 줄을 직접 나눈다.
   폭이 좁아지면 줄바꿈을 풀고 글자 수로 흐르게 둔다 */
@media(min-width:901px){ .hb-copy .lead{max-width:none} }
@media(max-width:900px){
  /* 좁은 화면에서는 줄바꿈을 풀어 글자 수대로 흐르게 둔다.
     다만 두 문장 사이 한 곳은 남겨 덩어리를 나눈다 */
  .hb-copy .lead br{display:none}
  .hb-copy .lead br.keep{display:block;content:"";margin-bottom:.55rem}
}

/* ── 오시는 길 약도 ──
   지도를 박아 넣는 대신 역에서 문까지의 흐름만 보여준다.
   도보 1분 거리라 지도를 들여다볼 일이 아니고, 이쪽이 한눈에 읽힌다 */
.route{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;
  margin-top:clamp(1.6rem,3vw,2.4rem);
  padding:clamp(1.5rem,3vw,2.2rem) clamp(1.1rem,2.5vw,2rem);
  border:1px solid var(--line);background:var(--surface-2)}
.rt-step{display:grid;justify-items:center;text-align:center;gap:.5rem}
.rt-dot{width:11px;height:11px;border-radius:50%;background:var(--line-strong);
  box-shadow:0 0 0 4px var(--surface-2)}
.rt-step.is-end .rt-dot{width:13px;height:13px;background:var(--accent)}
.rt-step b{font-size:clamp(.97rem,1.6vw,1.08rem);font-weight:700;
  color:var(--ink);letter-spacing:-.02em;line-height:1.4}
.rt-sub{font-size:.85rem;color:var(--muted);line-height:1.5;letter-spacing:-.01em}
.rt-line{height:1px;min-width:1.8rem;margin-top:5px;background:var(--line-strong)}

@media(max-width:640px){
  .route{grid-template-columns:1fr;padding:1.3rem 1.15rem}
  .rt-step{position:relative;justify-items:start;text-align:left;
    gap:.15rem;padding-left:1.5rem}
  .rt-dot{position:absolute;left:0;top:.42rem}
  .rt-line{width:1px;height:1.5rem;min-width:0;margin:.1rem 0 .1rem 5px}
  .rt-step b{font-size:1rem}
  .rt-sub{font-size:.82rem}
}

/* 네이버 지도 — 약도가 "어떻게 오는지", 지도가 "어디인지"를 맡는다 */
.map-wrap{margin-top:clamp(1rem,2vw,1.4rem);border:1px solid var(--line);overflow:hidden}
.map{width:100%;height:clamp(260px,32vw,380px);background:var(--surface-2)}

/* ── 목적별 ──
   테두리 상자를 버리고 가로선으로만 나눈다. 여백이 살아서 페이지가 가벼워진다.
   아이콘 대신 번호와 영문 라벨이 순서와 성격을 알려준다 */
/* 2단 헤더 — 기본 .sec-head 의 52ch 제한을 풀어야 왼쪽 제목이 안 쪼개진다 */
.sec-head.split{max-width:none;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1rem,4vw,4rem);align-items:end}
.sec-head.split .eyebrow{grid-column:1 / -1}
/* 오른쪽 설명 위의 짧은 선 — 눈썹 라벨의 선과 짝을 이뤄 두 칸을 묶는다 */
.sec-head.split > p:last-child{position:relative;max-width:34ch;
  margin:0 0 .45rem;padding-top:1.15rem}
.sec-head.split > p:last-child::before{content:"";position:absolute;top:0;left:0;
  width:34px;height:1px;background:var(--line-strong)}
@media(max-width:860px){
  .sec-head.split{grid-template-columns:1fr;gap:.9rem;align-items:start}
  .sec-head.split > p:last-child{max-width:none;padding-top:.95rem;margin-bottom:0}
}

.goal-list{display:grid;gap:0;margin-top:clamp(1.8rem,3vw,2.6rem);
  border-top:1px solid var(--line-strong)}
.gc{padding:clamp(2.1rem,3.8vw,3.3rem) 0;border-bottom:1px solid var(--line)}
.gc-no{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.2rem);
  font-family:var(--ff-en);font-size:clamp(2.5rem,5.4vw,3.9rem);font-weight:300;
  letter-spacing:-.04em;line-height:1;color:var(--line-strong);
  margin-bottom:clamp(1rem,2vw,1.5rem)}
.gc-no::after{content:"";flex:0 0 clamp(28px,4vw,54px);height:1px;background:var(--line)}
.gc-grid{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:clamp(1.3rem,3vw,3rem)}
.gc-en{font-family:var(--ff-en);font-size:.67rem;font-weight:700;letter-spacing:.18em;
  color:var(--muted);margin-bottom:.75rem}
.gc h3{font-size:clamp(1.32rem,2.4vw,1.82rem);letter-spacing:-.032em;
  line-height:1.32;margin-bottom:1.1rem}
.gc-mode{display:inline-block;font-family:var(--ff-en);font-size:.65rem;font-weight:700;
  letter-spacing:.14em;color:var(--ink-soft);
  padding-bottom:.3rem;border-bottom:1px solid var(--line-strong)}
.gc-lab{font-family:var(--ff-en);font-size:.65rem;font-weight:700;letter-spacing:.18em;
  color:var(--muted);margin-bottom:.85rem}
.gc ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.gc li{position:relative;padding-left:.95rem;font-size:.94rem;
  color:var(--ink-soft);line-height:1.62}
.gc li::before{content:"·";position:absolute;left:.1rem;top:-.06em;
  color:var(--line-strong);font-weight:700}
.gc-r p{font-size:clamp(.97rem,1.4vw,1.06rem);color:var(--ink);
  line-height:1.62;letter-spacing:-.015em;text-wrap:pretty}
.gc-note{margin-top:.65rem;font-size:.82rem;color:var(--muted);line-height:1.55}
.gc-note::before{content:"* "}

@media(max-width:860px){
  .gc{padding:1.7rem 0}
  .gc-no{font-size:2.3rem;margin-bottom:.75rem}
  .gc-grid{grid-template-columns:1fr;gap:1.25rem}
  .gc h3{font-size:1.28rem;margin-bottom:.8rem}
  .gc li{font-size:.9rem}
  .gc-r p{font-size:.96rem}
}

/* 붙어 있어야 읽히는 말은 줄이 갈라지지 않게 묶는다.
   한국어는 조사와 뒷말이 떨어지면 한 박자 걸린다 */
.nb,.gc .nb,.ig-card .nb{display:inline;white-space:nowrap}
@media(max-width:420px){ .nb{white-space:normal} }

/* 사진 위에 마우스를 올리면 살짝 밝아지며 떠오른다 — 누를 수 있다는 신호 */
@media(hover:hover) and (pointer:fine){
  .gal img{transition:transform .35s cubic-bezier(.2,.7,.3,1),
                     box-shadow .35s,filter .35s}
  .gal img:hover{transform:translateY(-3px) scale(1.012);
    filter:saturate(.94) contrast(1.05) brightness(1.06);
    box-shadow:0 20px 34px -22px rgba(53,54,53,.55)}
}