/* 나눔바른고딕 — 사이트에 직접 넣어 서빙한다(외부 CDN 의존 X).
   네이버 배포본은 굵기마다 폰트 "이름"이 달라서(NanumBarunGothicBold 등)
   font-weight로는 안 바뀐다. 여기서 이름 하나에 굵기를 묶어 정상화한다.
   원본 woff 1.6MB → 한자 제외 + woff2 변환으로 약 340KB (한글 11,172자 전체 유지). */
@font-face {
  font-family: "NanumBarunGothic";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/nanum-300.woff2") format("woff2");
}
@font-face {
  font-family: "NanumBarunGothic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/nanum-400.woff2") format("woff2");
}
@font-face {
  font-family: "NanumBarunGothic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/nanum-700.woff2") format("woff2");
}

:root {
  --bg: #ffffff;
  --bg-2: #f5f4f1;
  --surface: #ffffff;
  --text: #17171a;
  --muted: #63636c;
  /* 기존 골드(#d99a1c)는 채도가 높아 저렴해 보였다 → 샴페인 골드로 한 단계 낮춤 */
  --accent: #b5945c;        /* 채움용 (버튼/보더) */
  --accent-2: #96784a;      /* 호버 */
  --accent-ink: #7a6138;    /* 흰 배경 위 글자용 (대비 5.9:1) */
  --accent-bright: #d8bd8b; /* 어두운 히어로 위 */
  --line: #e6e4df;
  --radius: 14px;
  --maxw: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "NanumBarunGothic", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

/* ===== Buttons ===== */
.btn-primary, .btn-outline, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 999px; font-weight: 700;
  font-size: 0.95rem; transition: all .2s ease; cursor: pointer; border: none;
}
.btn-primary { background: var(--accent); color: #1a1a1a; }
.btn-primary:hover { background: var(--accent-2); color: #fff; transform: translateY(-2px); }
.btn-outline { border: 1.5px solid var(--accent); color: var(--accent-ink); background: transparent; }
.btn-outline:hover { background: var(--accent); color: #1a1a1a; }
.btn-ghost { color: var(--muted); padding: 8px 14px; }
.btn-ghost:hover { color: var(--text); }
.lg { padding: 16px 34px; font-size: 1.05rem; }

/* ===== Header ===== */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); transition: background .3s, box-shadow .3s;
}
.header.scrolled { background: rgba(255,255,255,.97); box-shadow: 0 6px 22px rgba(0,0,0,.07); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-size: 1.4rem; font-weight: 700; letter-spacing: 1px; display: flex; align-items: center; }
/* 로고 원본이 흰색이라 밝은 헤더에서는 반전시켜 사용 */
.logo img { height: 34px; width: auto; filter: invert(1); }
.logo span { color: var(--accent); }
.nav { display: flex; gap: 32px; }
.nav a { color: var(--muted); font-weight: 400; font-size: .95rem; transition: color .2s; }
.nav a:hover { color: var(--text); }
.header__actions { display: flex; align-items: center; gap: 10px; }

/* ===== Nav dropdown ===== */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown__toggle { color: var(--muted); font-weight: 400; font-size: .95rem; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-dropdown__toggle:hover { color: var(--text); }
.caret { font-size: .65rem; transition: transform .28s ease; }
.nav-dropdown__menu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 210px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 18px 44px rgba(0,0,0,.13); z-index: 120;
}
.nav-dropdown__menu::before {
  content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.nav-dropdown__menu a { padding: 12px 14px; border-radius: 8px; color: var(--muted); font-size: .92rem; font-weight: 400; white-space: nowrap; transition: background .18s, color .18s; }
.nav-dropdown__menu a:hover { background: var(--bg-2); color: var(--accent-ink); }
.nav-dropdown:hover .caret, .nav-dropdown.open .caret { transform: rotate(180deg); }
.nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown.open .nav-dropdown__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text); transition: .3s; }

/* ===== Hero ===== */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: #0d0d0f url("https://cdn.imweb.me/thumbnail/20230804/54cd1aedb3cb1.jpg") center/cover no-repeat;
  overflow: hidden;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13,13,15,.92) 0%, rgba(13,13,15,.55) 60%, rgba(13,13,15,.75) 100%);
}
/* 히어로는 사진 위이므로 화이트톤에서도 어둡게 유지하고 글자만 흰색으로 */
.hero__content { position: relative; z-index: 2; color: #fff; }
.hero__tag { color: var(--accent-bright); font-weight: 700; letter-spacing: 3px; font-size: .85rem; margin-bottom: 22px; }
.hero__title { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 700; line-height: 1.15; }
.hero__title span { color: var(--accent-bright); }
.hero__sub { margin-top: 24px; font-weight: 300; font-size: clamp(1rem, 2.2vw, 1.3rem); color: rgba(255,255,255,.82); }
.hero__cta { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-outline { border-color: var(--accent-bright); color: var(--accent-bright); }
.hero .btn-outline:hover { background: var(--accent-bright); color: #1a1a1a; }
.hero__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.72); font-size: .8rem; letter-spacing: 2px; z-index: 2; animation: bob 2s infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ===== W우먼 전용 히어로 =====
   사진이 밝은 로즈톤이라 기본 히어로(어두운 사진 + 흰 글자)를 그대로 쓰면 글자가 날아간다.
   왼쪽 빈 벽 쪽에만 밝은 로즈 스크림을 깔고 글자를 어둡게 뒤집는다. */
.hero--w { background: #f7e6e0 url("img/women/hero.webp") center/cover no-repeat; }
.hero--w .hero__overlay {
  background: linear-gradient(90deg,
    rgba(253,242,238,.95) 0%, rgba(253,242,238,.86) 32%,
    rgba(253,242,238,.42) 54%, rgba(253,242,238,0) 72%);
}
.hero--w .hero__content { color: #2e2226; }
.hero--w .hero__tag { color: #a84a6a; }
.hero--w .hero__title { color: #2e2226; }
.hero--w .hero__title span { color: #b85c7c; }
.hero--w .hero__sub { color: #5b464c; }
.hero--w .btn-primary { background: #a9546f; color: #fff; }
.hero--w .btn-primary:hover { background: #8e4159; color: #fff; }
.hero--w .btn-outline { border-color: #a9546f; color: #8e4159; background: rgba(255,255,255,.55); }
.hero--w .btn-outline:hover { background: #a9546f; color: #fff; }

/* ===== Sections ===== */
.section { padding: 110px 0; }
.eyebrow { color: var(--accent-ink); font-weight: 700; letter-spacing: 2px; font-size: .8rem; margin-bottom: 16px; }
.section__title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.25; }
.section__title.center { text-align: center; }
.section__lead { margin-top: 22px; color: var(--muted); font-weight: 300; font-size: 1.1rem; max-width: 720px; }
.section__lead.center { margin-left: auto; margin-right: auto; }

/* ===== 브랜드 시작 이야기 (W우먼) =====
   불편함 나열 → 한 박자 → 질문 → 답. 글씨 크기와 굵기로 리듬을 준다. */
.story__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.story__pain {
  margin-top: 6px; font-weight: 300; line-height: 2.15; color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.16rem);
}
.story__beat {
  margin-top: 46px; line-height: 1.85; color: var(--text);
  font-size: clamp(1.12rem, 2.9vw, 1.42rem);
}
.story__beat b { font-weight: 700; }
.story__ask {
  margin-top: 46px; font-weight: 300; line-height: 1.95; color: #6d5c61;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}
/* 답으로 넘어가기 전 짧은 호흡 */
.story__into {
  margin-top: 58px; font-weight: 700; font-size: .92rem;
  letter-spacing: 1.5px; color: #a9546f;
}
.story__into::before {
  content: ""; display: block; width: 1px; height: 34px;
  background: linear-gradient(#e6d6da, #c98da0); margin: 0 auto 22px;
}
.story__answer {
  margin-top: 14px; font-weight: 700; line-height: 1.4;
  font-size: clamp(1.5rem, 4.4vw, 2.4rem); letter-spacing: -.5px;
}
.story__answer span { color: #b85c7c; }

/* ===== 네이버 리뷰 ===== */
.reviews { background: var(--bg); }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.rv {
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 32px 28px 26px;
}
.rv__stars { font-size: .95rem; letter-spacing: 2px; color: #e0a53f; }
.rv__body {
  margin-top: 16px; flex: 1;
  font-weight: 300; font-size: .97rem; line-height: 1.85; color: var(--text);
}
.rv__body::before { content: "“"; margin-right: 2px; color: var(--accent); font-weight: 700; }
.rv__body::after  { content: "”"; margin-left: 2px;  color: var(--accent); font-weight: 700; }
.rv__meta { margin-top: 20px; font-size: .8rem; color: #a0a0a8; letter-spacing: .3px; }
.rv__more { margin-top: 34px; text-align: center; font-size: .95rem; }
.rv__more a { color: var(--accent-ink); font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.rv__more a:hover { border-color: var(--accent); }
/* W우먼은 로즈톤 */
.page-w .rv__more a { color: #8e4159; }

/* ===== 데이터 블록 =====
   숫자는 전부 출처가 있는 실측치. 출처 표기를 지우면 과장광고가 되므로 함께 유지할 것. */
.stathook { background: linear-gradient(180deg, #fdf2f5, #f9ecef); }
.stathook__inner { max-width: 860px; margin: 0 auto; text-align: center; }
.stathook .section__title span { color: #b85c7c; }
/* 칸 수는 style="--n:N"으로. 한 칸만 둘 땐 --rw로 폭을 줄여 가운데 세운다 */
.statrow {
  display: grid; grid-template-columns: repeat(var(--n, 2), 1fr);
  gap: 18px; margin-top: 46px;
  max-width: var(--rw, none); margin-left: auto; margin-right: auto;
}
.statbox {
  background: rgba(255,255,255,.78); border: 1px solid #f1dde3;
  border-radius: 18px; padding: 36px 22px;
}
.statbox strong {
  display: block; font-weight: 700; color: #a9546f;
  font-size: clamp(2.4rem, 7vw, 3.5rem); line-height: 1.1; letter-spacing: -1.5px;
}
.statbox strong em { font-style: normal; font-size: .44em; margin-left: 3px; letter-spacing: 0; }
.statbox p {
  margin-top: 15px; font-weight: 300; color: #6d5c61; line-height: 1.75;
  font-size: clamp(.92rem, 2.3vw, 1rem);
}
.statbox p b { font-weight: 700; color: #2e2226; }
/* 그래프 이미지 — 글씨가 작아 폰에서는 탭해서 확대해 봐야 한다 */
.chartfig {
  margin-top: 42px; border-radius: 18px; overflow: hidden;
  border: 1px solid #f1dde3; background: #fff;
  box-shadow: 0 6px 22px rgba(169,84,111,.07);
}
.chartfig img { width: 100%; height: auto; cursor: zoom-in; }
.stathook__note {
  margin-top: 36px; font-weight: 300; line-height: 1.95; color: #6d5c61;
  font-size: clamp(.98rem, 2.4vw, 1.12rem);
}
.stathook__note b { font-weight: 700; color: #2e2226; }
.stathook__src { margin-top: 24px; font-size: .76rem; color: #a3939a; line-height: 1.7; }

/* 전문성 페이지 하단 '돌아가기' */
.backto { padding: 60px 0; background: var(--bg); }

/* ===== PT 후킹 (트레이너 소개 다음) ===== */
.pthook { background: var(--bg-2); }
.pthook__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.pthook .section__title span { color: #b85c7c; }
.pthook__body {
  margin-top: 30px; font-weight: 300; line-height: 2.05; color: #6d5c61;
  font-size: clamp(1rem, 2.5vw, 1.18rem);
}
/* 섹션 중간에 놓는 보조 CTA */
.midcta { margin-top: 54px; text-align: center; }
/* W우먼은 로즈톤이라 기본 골드 아웃라인이 튄다 → 로즈로 맞춘다 */
.page-w .midcta .btn-outline { border-color: #a9546f; color: #8e4159; }
.page-w .midcta .btn-outline:hover { background: #a9546f; color: #fff; }
/* W우먼의 상담예약 버튼은 전부 로즈로 (헤더·상담 섹션·오시는 길) */
.page-w .btn-primary { background: #a9546f; color: #fff; }
.page-w .btn-primary:hover { background: #8e4159; color: #fff; }
/* 버튼이 로즈가 되면 상담 섹션의 크림(골드) 배경이 부딪힌다 → 로즈 계열로 */
.page-w .pt { background: linear-gradient(135deg, #fdf1f4, #f9f4f4); }

/* ===== 올해 현황 (전문성 페이지 맨 위) ===== */
.nowyear { background: var(--bg); }
.nowyear__inner { max-width: 900px; margin: 0 auto; }
.nowyear .section__title span { color: var(--accent-ink); }
.nowyear__desc {
  margin-top: 26px; text-align: center; font-weight: 300; line-height: 1.95;
  color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.12rem);
}
.nowyear__desc b { font-weight: 700; color: var(--text); }
.nowyear__list {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin-top: 40px;
}
.nowyear__list li {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 24px; font-size: 1.02rem; line-height: 1.5;
}
.nowyear__list li b {
  flex: none; font-size: .78rem; font-weight: 700; letter-spacing: .5px;
  color: #fff; background: var(--accent); border-radius: 999px; padding: 5px 11px;
}
.nowyear__point {
  margin-top: 34px; text-align: center; line-height: 1.75;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem); color: var(--text);
}
.nowyear__point b { font-weight: 700; color: var(--accent-ink); }
/* 데이터 다음에 오는 브랜드 메시지 */
.nowyear__msg { margin-top: 50px; text-align: center; }
.nowyear__msg::before {
  content: ""; display: block; width: 46px; height: 1px;
  background: var(--accent); margin: 0 auto 40px; opacity: .55;
}
.nowyear__msg-lead {
  font-size: clamp(1.2rem, 3.2vw, 1.6rem); line-height: 1.5; color: var(--text);
}
.nowyear__msg-lead b { font-weight: 700; color: var(--accent-ink); }
.nowyear__msg-body {
  margin-top: 22px; font-weight: 300; line-height: 1.95; color: var(--muted);
  font-size: clamp(.98rem, 2.4vw, 1.1rem);
}
.nowyear__msg-end {
  margin-top: 26px; font-size: clamp(1.05rem, 2.8vw, 1.3rem); color: var(--text);
}
.nowyear__msg-end b { font-weight: 700; color: var(--accent-ink); }

.nowyear__src {
  margin-top: 34px; text-align: center; font-size: .76rem;
  color: #a9a9b0; line-height: 1.7;
}

/* ===== Intro / Stats ===== */
.intro { background: var(--bg-2); }
/* 칸 수는 style="--n:N"으로 (기본 4칸) */
.stats { display: grid; grid-template-columns: repeat(var(--n,4),1fr); gap: 20px; margin-top: 56px; }
.stat { text-align: center; padding: 28px 12px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); }
.stat strong { display: block; font-size: 2rem; color: var(--accent-ink); font-weight: 700; }
.stat span { color: var(--muted); font-size: .9rem; }

/* ===== CEO ===== */
.ceo__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.ceo__img { aspect-ratio: 4/5; border-radius: var(--radius); background: linear-gradient(135deg,#efeee9,#e2e0da); border: 1px solid var(--line); overflow: hidden; }
.ceo__img img { width: 100%; height: 100%; object-fit: cover; }
.ceo__text p { color: var(--muted); margin-top: 18px; }
.ceo__text b { color: var(--text); }
.ceo__sign { margin-top: 28px; font-size: 1.15rem; }
.ceo__sign b { color: var(--accent-ink); }

/* ===== Cards ===== */
.cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 50px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 24px; box-shadow: 0 4px 16px rgba(0,0,0,.05); transition: transform .25s, border-color .25s, box-shadow .25s; }
.card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(0,0,0,.09); }
.card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .95rem; }

/* ===== 프리미엄 카드 (사이트 공용) =====
   일련번호 + 헤어라인 테두리. 그림자와 아이콘은 걷어냈다.
   열 수는 섹션마다 style="--cols:N"으로 준다. auto-fit은 카드 수가 늘면
   (예: 6장) 마지막 줄에 한 장만 남아 깨져서 쓰지 않는다.
   색은 아래 변수로만 바꾼다 → 기본 샴페인 골드, W우먼(.page-w)만 로즈.
   ※ 모바일 열 수/패딩은 아래 미디어쿼리에서 다시 잡는다. */
.cards--lux {
  --lux-tint: #fffdf9;          /* 카드 아래쪽 은은한 색 */
  --lux-line: #ece3d5;          /* 테두리 */
  --lux-line-on: #dcc9a7;       /* 호버 테두리 */
  --lux-bar1: #e7d6b4;          /* 상단 라인 시작 */
  --lux-bar2: #b5945c;          /* 상단 라인 끝 */
  --lux-no: #b5945c;            /* 번호 */
  --lux-rule: #ddc9a9;          /* 제목 밑 짧은 선 */
  --lux-title: #201d18;
  --lux-body: #666057;
  --lux-shadow: 181,148,92;     /* 호버 그림자 RGB */

  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 18px; margin-top: 56px;
}
/* W우먼은 히어로가 로즈톤이라 카드도 로즈로 맞춘다 */
.page-w .cards--lux {
  --lux-tint: #fffbfb;  --lux-line: #f1e3e5;  --lux-line-on: #e3c5ce;
  --lux-bar1: #e6bfc9;  --lux-bar2: #c98da0;  --lux-no: #c98da0;
  --lux-rule: #ddb2bf;  --lux-title: #2e2226; --lux-body: #6d5c61;
  --lux-shadow: 169,84,111;
}
.cards--lux .card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--lux-tint) 100%);
  border: 1px solid var(--lux-line);
  border-radius: 18px;
  padding: 38px 26px 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
/* 호버 시에만 드러나는 상단 라인 */
.cards--lux .card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--lux-bar1), var(--lux-bar2) 55%, transparent);
  opacity: 0; transition: opacity .3s ease;
}
.cards--lux .card:hover::before { opacity: 1; }
.cards--lux .card:hover {
  transform: translateY(-4px);
  border-color: var(--lux-line-on);
  box-shadow: 0 18px 38px rgba(var(--lux-shadow), .11);
}
/* 아이콘을 뺀 자리를 번호가 대신 잡아준다 → 제목 위에 얹는다 */
.cards--lux .card__no {
  display: block; margin-bottom: 16px;
  font-size: .8rem; font-weight: 700; letter-spacing: 1.6px; color: var(--lux-no);
}
.cards--lux .card h3 {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.2px;
  color: var(--lux-title); margin-bottom: 0; line-height: 1.45;
}
/* 제목과 본문을 갈라주는 짧은 선 */
.cards--lux .card h3::after {
  content: ""; display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--lux-rule); margin: 13px 0;
}
.cards--lux .card p { font-size: .92rem; line-height: 1.75; color: var(--lux-body); }

/* W우먼 페이지는 히어로가 로즈톤이라 섹션 라벨의 골드가 튄다 → 로즈로 통일 */
.page-w .eyebrow { color: #a84a6a; }
/* 900(블랙)은 다듬은 카드 옆에서 과하게 무겁다 → 한 단계 낮추고 자간을 좁힌다 */
.page-w .section__title { letter-spacing: -.6px; }

/* ===== Career (전문성) ===== */
.career-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 50px; }
.career-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; box-shadow: 0 4px 16px rgba(0,0,0,.05); transition: border-color .25s, box-shadow .25s; }
.career-box:hover { border-color: var(--accent); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.career-box h3 { font-size: 1.25rem; margin-bottom: 18px; }
.career-box ul { list-style: none; }
.career-box li { color: var(--muted); font-size: .96rem; padding-left: 18px; position: relative; margin-bottom: 10px; line-height: 1.5; }
.career-box li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-ink); font-weight: 700; }
.career-note { text-align: center; margin-top: 34px; color: var(--muted); font-size: .95rem; letter-spacing: .5px; }

/* ===== Proof gallery (전문성 증빙) ===== */
.proof { background: var(--bg-2); }
/* 위촉장·저서 표지는 원본이 1500~1600px인데 940px로 묶여 있어 글자가 안 읽혔다.
   이 섹션만 폭을 넓혀 원본 해상도를 살린다. */
.proof .container { max-width: 1360px; }
.proof-list { max-width: 1280px; margin: 56px auto 0; display: grid; gap: 26px; }
.proof-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,.07);
  transition: transform .25s, box-shadow .25s;
}
.proof-item:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.proof-item img { width: 100%; height: auto; }
.proof-item figcaption {
  background: #faf9f6; color: var(--muted); font-size: .95rem;
  text-align: center; padding: 16px 20px; border-top: 1px solid var(--line);
}
.proof-item figcaption b { color: var(--accent-ink); }

/* ===== 지점 갤러리 ===== */
.gallery { background: var(--bg-2); }
.gallery.alt { background: var(--bg); }
.gal-grid { display: grid; gap: 14px; margin-top: 40px; grid-template-columns: repeat(var(--cols, 3), 1fr); }
.gal-item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.05);
  transition: box-shadow .25s, transform .25s;
}
.gal-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.1); }
.gal-item img { width: 100%; display: block; }
/* 종횡비는 컨테이너(figure)가 고정하고 이미지는 그 안을 채운다 */
.gal--cover .gal-item { aspect-ratio: var(--ar, 4/3); }
.gal--contain .gal-item { aspect-ratio: var(--ar, 1/1); }
.gal--cover .gal-item img, .gal--contain .gal-item img { width: 100%; height: 100%; }
/* 시설·바디프로필: 격자를 맞추기 위해 잘라서 채움 */
.gal--cover .gal-item img { object-fit: cover; transition: transform .45s ease; }
.gal--cover .gal-item:hover img { transform: scale(1.05); }
/* Before/After·트레이너 카드: 글자가 있어 자르면 안 됨 */
.gal--contain .gal-item img { object-fit: contain; background: #fff; }

/* 갤러리 사진은 전부 탭하면 확대된다 (script.js의 라이트박스) */
.gal-item > .zoomable { display: block; width: 100%; height: 100%; }
.proof-item > .zoomable { display: block; }
.gal-item img, .proof-item img { cursor: zoom-in; }

/* ===== 사진 확대 보기 (라이트박스) ===== */
.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(18,14,15,.95);
}
.lb.is-open { display: flex; }
.lb__stage { display: flex; max-width: 94vw; max-height: 86vh; }
.lb__img {
  max-width: 94vw; max-height: 86vh; width: auto; height: auto;
  object-fit: contain; border-radius: 6px; background: #fff;
}
.lb__close, .lb__nav {
  position: absolute; background: rgba(255,255,255,.13); color: #fff; border: 0;
  border-radius: 999px; cursor: pointer; line-height: 1; padding: 0;
  display: grid; place-items: center; transition: background .2s;
}
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.28); }
.lb__close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 1.75rem; }
.lb__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.9rem; }
.lb__prev { left: 16px; }
.lb__next { right: 16px; }
.lb__count {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.82); font-size: .9rem; letter-spacing: 1.5px;
}

/* ===== 모바일 가로 슬라이드 갤러리 =====
   데스크톱에서는 .gal-page가 display:contents라 없는 셈 치고 기존 그리드가 그대로 먹는다. */
.gal-page { display: contents; }
.gal-dots { display: none; }

/* ===== Coaches ===== */
.coaches { background: var(--bg-2); }
.coach-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-top: 50px; }
.coach { display: flex; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.coach__photo { flex: 0 0 120px; height: 150px; border-radius: 10px; background: linear-gradient(135deg,#efeee9,#e0ded8); overflow: hidden; }
/* 트레이너 카드 원본에서 인물 부분만 보이도록 크롭 */
.coach__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 24% 48%; }
.coach__body h3 { font-size: 1.4rem; }
.coach__body h3 span { font-size: .8rem; color: var(--accent-ink); font-weight: 700; margin-left: 8px; }
.coach__body ul { list-style: none; margin-top: 14px; }
.coach__body li { color: var(--muted); font-size: .95rem; padding-left: 16px; position: relative; margin-bottom: 6px; }
.coach__body li::before { content: "—"; position: absolute; left: 0; color: var(--accent-ink); }

/* ===== PT form ===== */
.pt { background: linear-gradient(135deg,#fdf5e3,#f7f6f2); }
.pt__inner { max-width: 640px; margin: 0 auto; }
.pt__form { margin-top: 40px; display: grid; gap: 14px; }
/* 폼 대신 예약 링크 버튼만 놓는 경우 */
.pt__cta { margin-top: 40px; text-align: center; }
.pt__form input, .pt__form select {
  padding: 16px 18px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 1rem; font-family: inherit;
}
.pt__form input:focus, .pt__form select:focus { outline: none; border-color: var(--accent); }

/* ===== YouTube ===== */
.youtube { text-align: center; }
.youtube .btn-outline { margin-top: 30px; }

/* ===== Branches ===== */
.branches { background: var(--bg-2); }
.branch-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 50px; }
.branch-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 24px; box-shadow: 0 4px 16px rgba(0,0,0,.05); transition: transform .25s, border-color .25s, box-shadow .25s; }
.branch-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.branch-card--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.branch-card--link:hover { box-shadow: 0 14px 30px rgba(0,0,0,.1); }
.branch-card__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 12px; margin-bottom: 18px; }
.branch-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.branch-card p { color: var(--muted); font-size: .92rem; min-height: 42px; }
.branch-card__link { display: inline-block; margin-top: 16px; color: var(--accent-ink); font-weight: 700; font-size: .9rem; }
.branch-card__link:hover { text-decoration: underline; }

/* ===== Location / Map ===== */
.branch__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.branch__list { list-style: none; margin: 30px 0; }
.branch__list li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.branch__list b { color: var(--text); display: inline-block; width: 130px; }
.branch__map { min-height: 320px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); }

/* ===== Footer ===== */
.footer { background: var(--bg-2); padding: 60px 0 40px; border-top: 1px solid var(--line); }
.footer__inner { text-align: center; }
.footer__brand { font-size: 1.5rem; font-weight: 700; }
.footer__brand span { color: var(--accent-ink); }
.footer__info { color: var(--muted); font-size: .9rem; margin-top: 18px; line-height: 1.8; }
.footer__links { margin-top: 20px; display: flex; gap: 24px; justify-content: center; }
.footer__links a { color: var(--muted); font-size: .9rem; }
.footer__links a:hover { color: var(--accent-ink); }
.footer__copy { margin-top: 24px; color: #9a9aa3; font-size: .82rem; }

/* ===== Responsive ===== */

/* 가로 스크롤 방지 + 긴 한글/URL 줄바꿈 */
html, body { overflow-x: hidden; }
h1, h2, h3, p, li, a { overflow-wrap: break-word; word-break: keep-all; }

/* ── 태블릿 / 모바일 (≤860px) ───────────────────────── */
@media (max-width: 860px) {
  .container { padding: 0 18px; }
  .header__inner { height: 60px; }
  .logo img { height: 28px; }

  /* 슬라이드 인 메뉴 */
  .nav {
    position: fixed; top: 60px; right: 0; width: min(80vw, 300px); height: calc(100vh - 60px);
    flex-direction: column; gap: 0; background: var(--bg-2); padding: 12px 18px 40px;
    transform: translateX(100%); transition: transform .3s; border-left: 1px solid var(--line);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav.open { transform: translateX(0); box-shadow: -18px 0 44px rgba(0,0,0,.16); }
  .nav > a { padding: 16px 8px; border-bottom: 1px solid var(--line); font-size: 1rem; }

  /* 지점안내 드롭다운 = 인라인 아코디언 */
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown__toggle { padding: 16px 8px; border-bottom: 1px solid var(--line); justify-content: space-between; width: 100%; font-size: 1rem; }
  .nav-dropdown__menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: none; background: rgba(0,0,0,.035); border-radius: 0;
    padding: 0; min-width: 0; display: none;
  }
  .nav-dropdown__menu::before { display: none; }
  .nav-dropdown.open .nav-dropdown__menu { display: flex; }
  .nav-dropdown__menu a { padding: 14px 8px 14px 24px; border-bottom: 1px solid var(--line); color: var(--muted); }
  /* 데스크톱용 가운데 정렬(translateX(-50%))이 남으면 패널 밖으로 밀려 잘린다 */
  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown.open .nav-dropdown__menu { opacity: 1; visibility: visible; transform: none; }

  .nav-toggle { display: flex; }
  .header__actions .btn-ghost, .header__actions .btn-primary { display: none; }

  /* 섹션 간격 축소 */
  .section { padding: 64px 0; }
  .section__title { font-size: clamp(1.55rem, 6.5vw, 2rem); }
  .section__lead { font-size: 1rem; margin-top: 18px; }
  .eyebrow { font-size: .72rem; }

  /* 히어로 */
  .hero { min-height: 88vh; background-attachment: scroll; }
  .hero__tag { font-size: .75rem; margin-bottom: 16px; }
  .hero__sub { margin-top: 18px; }
  .hero__cta { margin-top: 32px; gap: 12px; }
  .hero__cta .btn-primary, .hero__cta .btn-outline { width: 100%; }
  .hero__scroll { display: none; }


  /* 그리드 → 2열 */
  .stats, .cards, .branch-cards, .career-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .ceo__grid, .coach-grid, .branch__grid { grid-template-columns: 1fr; gap: 28px; }
  .ceo__img { max-width: 320px; margin: 0 auto; }
  .coach { flex-direction: column; }
  /* 전신 세로 사진이라 가로로 넓게 깔면 머리가 잘린다 → 세로 비율 유지 */
  .coach__photo { width: 168px; flex: none; height: 224px; margin: 0 auto 4px; }
  .coach__body { text-align: left; }

  /* 라벨이 좁은 폭에서 끊기지 않게 위아래로 쌓기 */
  .branch__list li { padding: 12px 0; }
  .branch__list b { display: block; width: auto; margin-bottom: 3px; }

  /* 카드 여백 축소 */
  .card, .branch-card, .career-box { padding: 24px 20px; }
  /* .cards--lux .card 가 더 구체적이라 위 규칙에 안 눌린다 → 따로 줄여준다 */
  .cards--lux .card { padding: 26px 20px 24px; border-radius: 15px; }
  .cards--lux .card__no { margin-bottom: 12px; }
  .stat { padding: 22px 10px; }
  .stat strong { font-size: 1.6rem; }
  .branch-card p { min-height: 0; }

  /* 지점 갤러리 */
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
  .gal-item { border-radius: 9px; }

  /* 탭하면 커진다는 걸 알려주는 표시 */
  .gal-item, .proof-item > .zoomable, .zoomfig { position: relative; }
  .gal-item::after, .proof-item > .zoomable::after, .zoomfig::after {
    content: "⤢"; position: absolute; right: 7px; bottom: 7px;
    width: 23px; height: 23px; display: grid; place-items: center;
    background: rgba(23,23,26,.6); color: #fff; font-size: .78rem;
    border-radius: 7px; pointer-events: none; z-index: 2;
  }

  /* 사진이 많은 갤러리는 세로로 한없이 길어진다 → 6장씩 묶어 옆으로 넘긴다 */
  .gal-grid.gal-slider {
    display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .gal-grid.gal-slider::-webkit-scrollbar { display: none; }
  .gal-slider .gal-page {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    flex: 0 0 100%; scroll-snap-align: start;
  }
  /* 트레이너 카드처럼 글자가 작은 건 한 장씩 크게 봐야 읽힌다 */
  .gal-slider[data-per="1"] .gal-page { grid-template-columns: 1fr; }
  .gal-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .gal-dots button {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
    background: #d5cfc7; cursor: pointer; transition: width .22s, background .22s;
  }
  .gal-dots button.is-on { background: var(--accent); width: 22px; }

  /* 숫자 여러 개를 나란히 두면 폰에서 글자가 눌린다 → 무조건 위아래로 */
  .statrow { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .statbox { padding: 28px 20px; }

  /* 좁은 화면에선 좌우 화살표가 사진을 덮는다 → 아래쪽으로 내린다 */
  .lb__nav { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; }
  .lb__prev { left: 22px; }
  .lb__next { right: 22px; }
  .lb__count { bottom: 30px; }
  .lb__close { top: 14px; right: 14px; }

  /* 리뷰 — 폰에서는 한 줄에 하나씩 */
  .rv-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .rv { padding: 26px 22px 22px; }

  /* 올해 현황 — 폰에서는 한 줄에 하나씩 */
  .nowyear__list { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
  .nowyear__list li { padding: 18px 18px; font-size: .96rem; }

  /* 전문성 증빙 갤러리 */
  .proof-list { margin-top: 32px; gap: 16px; }
  .proof-item { border-radius: 10px; }
  .proof-item figcaption { font-size: .88rem; padding: 13px 16px; }

  /* 지도 / 오시는 길 */
  .branch__map { min-height: 260px; }

  /* PT 폼 / 버튼 풀폭 */
  .pt__inner .btn-primary, .pt__form button, .midcta .btn-outline { width: 100%; }
  .lg { padding: 15px 28px; font-size: 1rem; }

  /* 푸터 */
  .footer { padding: 48px 0 32px; }
  .footer__links { flex-wrap: wrap; gap: 16px 20px; }
}

/* ── W우먼 히어로: 세로 화면 (≤600px) ─────────────────
   좌우가 크게 잘리므로 인물 쪽으로 당기고, 글자가 인물 위로 올라오니
   스크림을 가로→세로로 바꾼다. 글자가 끝나는 아래쪽은 사진이 살아나게 연다. */
@media (max-width: 600px) {
  .hero--w { background-position: 64% center; }
  .hero--w .hero__overlay {
    background: linear-gradient(180deg,
      rgba(253,242,238,.92) 0%, rgba(253,242,238,.86) 44%,
      rgba(253,242,238,.72) 68%, rgba(253,242,238,.28) 100%);
  }
}

/* ── 소형 모바일 (≤480px) ───────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .stats, .cards, .branch-cards, .career-grid { grid-template-columns: 1fr; }
  /* Before/After·트레이너 카드는 글자가 작아서 소형 화면에선 1열 */
  .gal-grid--wide { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .section { padding: 56px 0; }
  .career-box h3 { font-size: 1.15rem; }
}