/* =====================================================================
   짐모어피트니스 사가정점 — 2026-10-16 전면 개편
   사장님: "AI 느낌 전혀 없이, 트레이너 제일 위, 지금까지 만든 사이트들과 완전 다르게, 단색 쫙".
   → 코발트 한 색 + 흰 글자, 사진은 전부 흑백. 카드·그림자·둥근 모서리·그라데이션·애니메이션 없음.
   구간은 잡지 목차처럼 번호 + 가는 선. 토니바디 style.css 는 더 이상 쓰지 않는다.
   ===================================================================== */
:root {
  --c: #0c1322;            /* 바탕 한 색 — 진한 검정남색 (10/16 코발트에서 변경) */
  --w: #ffffff;
  --w2: rgba(255,255,255,.72);
  --ln: rgba(255,255,255,.22);
  --pad: clamp(20px, 4vw, 48px);
  --maxw: 1240px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  background: var(--c); color: var(--w);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px; line-height: 1.7; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* 사진은 컬러 그대로 (10/16 흑백 → 컬러, 사장님 "흑백 별로") */

/* ----- 헤더 ----- */
.top {
  position: sticky; top: 0; z-index: 10; background: var(--c);
  border-bottom: 1px solid var(--ln);
}
.top .wrap { height: 56px; display: flex; align-items: center; gap: 28px; }
.top__name { font-weight: 800; letter-spacing: .02em; font-size: 15px; white-space: nowrap; }
.top__name small { font-weight: 500; opacity: .7; margin-left: 6px; font-size: 13px; }
.top nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--w2); }
.top nav a:hover { color: var(--w); }
.btn {
  display: inline-block; background: var(--w); color: var(--c);
  font-weight: 700; font-size: 14px; padding: 10px 16px; line-height: 1; white-space: nowrap;
}
.btn:hover { background: #c9d3ea; color: var(--c); }
.btn--lg { font-size: 17px; padding: 18px 26px; }

/* ----- 첫 화면 + 트레이너 ----- */
.intro { padding: clamp(40px, 6vw, 80px) 0 0; }
.intro__row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.intro h1 {
  font-size: clamp(42px, 8.4vw, 118px); font-weight: 800; line-height: .98; letter-spacing: -.055em;
}
.intro__meta { font-size: 15px; color: var(--w2); text-align: right; line-height: 1.8; }
.intro__meta .btn { margin-top: 14px; }

.sec__head--top { margin: clamp(40px, 5vw, 64px) 0 0; padding-bottom: 14px; }
.coaches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ln); }
.coach { border-right: 1px solid var(--ln); }
.coach:last-child { border-right: 0; }
.coach figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 16px 18px; border-top: 1px solid var(--ln);
}
.coach b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.coach span { font-size: 13px; color: var(--w2); }
.coach img { aspect-ratio: 1000 / 1502; object-fit: cover; }

/* ----- 구간 머리: 번호 + 이름 + 선 ----- */
.sec { padding: clamp(72px, 9vw, 120px) 0 0; }
.sec__head {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline;
  border-top: 1px solid var(--w); padding-top: 14px; margin-bottom: clamp(28px, 4vw, 48px);
}
.sec__no { font-size: 14px; font-weight: 700; }
.sec__head h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; }
.sec__head p { font-size: 14px; color: var(--w2); }

/* ----- 수업 ----- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.lead { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.75; font-weight: 500; }
.lead + .lead { margin-top: 18px; }
.facts { border-top: 1px solid var(--ln); }
.facts div { display: grid; grid-template-columns: 112px 1fr; padding: 16px 0; border-bottom: 1px solid var(--ln); }
.facts dt { font-size: 14px; color: var(--w2); }
.facts dd { font-weight: 600; }

.programs { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 96px); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ln); }
.programs li { list-style: none; padding: 20px 0 22px; border-bottom: 1px solid var(--ln); }
.programs b { display: block; font-size: 18px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.03em; }
.programs p { font-size: 15px; color: var(--w2); }

/* ----- 사진 격자 ----- */
.grid { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 2px; }
.grid--3 { --n: 3; }
.grid img { aspect-ratio: var(--ar, 1 / 1); object-fit: cover; }
.grid--tall { --ar: 4 / 5; }
.note { font-size: 12px; color: var(--w2); margin-top: 14px; }

/* ----- 상담·오시는 길 ----- */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.visit h3 { font-size: clamp(32px, 5vw, 64px); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; margin-bottom: 20px; }
.visit .lead { margin-bottom: 28px; }
.visit dl { margin-top: 36px; }
.map { min-height: 380px; border: 1px solid var(--ln); }
.map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* ----- 푸터 ----- */
.foot { margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid var(--w); padding: 28px 0 40px; font-size: 13px; color: var(--w2); }
.foot .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot b { color: var(--w); font-weight: 800; letter-spacing: .02em; }

/* ----- 폰 ----- */
@media (max-width: 860px) {
  .top nav { display: none; }
  .top .wrap { justify-content: space-between; }
  .intro__row { grid-template-columns: 1fr; }
  .intro__meta { text-align: left; }
  .coaches { grid-template-columns: 1fr 1fr 1fr; }
  .coach figcaption { flex-direction: column; gap: 2px; padding: 10px 10px 14px; }
  .coach b { font-size: 16px; }
  .coach span { font-size: 12px; }
  .sec__head { grid-template-columns: 44px 1fr; }
  .sec__head p { grid-column: 2; }
  .split, .programs, .visit { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 88px 1fr; }
  .grid { --n: 2; }
  .grid--3 { --n: 2; }
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 2px; }
  .strip > * { flex: 0 0 auto; width: 62%; scroll-snap-align: start; }
}
@media (max-width: 520px) {
  /* 트레이너는 옆으로 넘기기 */
  .coaches { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; border-top: 0; }
  .coach { flex: 0 0 auto; width: 78%; scroll-snap-align: start; border-right: 0; }
  .coach figcaption { flex-direction: row; padding: 12px 2px 4px; border-top: 0; }
  .coach b { font-size: 20px; }
}

/* 시설: 첫 장을 두 칸으로 */
.grid--lead > :first-child { grid-column: span 2; aspect-ratio: 8 / 3; }
@media (max-width: 860px) { .grid--lead > :first-child { aspect-ratio: 16 / 9; } }

/* 변화 기록: 한 줄로 옆으로 넘기기 (10/16 사장님 요청). PC 3장씩 + 화살표, 폰은 1.2장 보이게 밀어서 */
.slide {
  display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slide::-webkit-scrollbar { display: none; }
.slide img { flex: 0 0 auto; width: calc((100% - 4px) / 3); scroll-snap-align: start; aspect-ratio: 1 / 1; object-fit: cover; }
.arrows { display: flex; gap: 6px; }
.arrows button {
  width: 40px; height: 40px; border: 1px solid var(--ln); background: none; color: var(--w);
  font-size: 18px; cursor: pointer; font-family: inherit;
}
.arrows button:hover { background: var(--w); color: var(--c); }
@media (max-width: 860px) {
  .slide img { width: 82%; }
  .sec__head .arrows { grid-column: 2; margin-top: 10px; }
}

/* 헬스 회원권 — 기간·가격만, 월 환산 없음 */
.price { border-top: 1px solid var(--ln); max-width: 720px; }
.price div { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--ln); }
.price dt { font-size: 18px; font-weight: 600; }
.price dd { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.04em; }
.price em {
  font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0;
  border: 1px solid var(--w); padding: 3px 7px; margin-right: 12px; vertical-align: 6px;
}

/* 네이버 플레이스 (placeId 1701634723) */
.place { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--w2); white-space: nowrap; }
.place i { font-style: normal; font-weight: 900; font-size: 12px; width: 22px; height: 22px; display: grid; place-items: center; background: #03c75a; color: #fff; }
.place:hover { color: var(--w); }
.ul { text-decoration: underline; text-underline-offset: 4px; }
.ul:hover { color: #03c75a; }
@media (max-width: 860px) {
  .place span { display: none; }
  .top .place { margin-left: auto; margin-right: 10px; }
}

/* ===== 눌러야 열리는 구간 (10/16 사장님: "클릭하면 켜지는 버튼식") =====
   변화 기록·바디프로필·시설·프로그램. 제목 줄 전체가 버튼, 오른쪽에 「열기 +」/「닫기 −」. */
.acc > summary { list-style: none; cursor: pointer; margin-bottom: 0; padding-bottom: 14px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc[open] > summary { margin-bottom: clamp(24px, 3vw, 40px); }
.acc__btn::after {
  content: "열기 +"; display: inline-block; font-size: 14px; font-weight: 700;
  border: 1px solid var(--w); padding: 9px 14px; line-height: 1; white-space: nowrap;
}
.acc[open] > summary .acc__btn::after { content: "닫기 −"; background: var(--w); color: var(--c); }
.acc > summary:hover .acc__btn::after { background: var(--w); color: var(--c); }
.acc .arrows { justify-content: flex-end; margin-bottom: 12px; }
/* 프로그램(수업 안) */
.acc--sub { margin-top: clamp(40px, 5vw, 64px); }
.acc--sub > summary { border-top: 1px solid var(--ln); }
.acc--sub > summary h2 { font-size: 20px; }
.acc--sub .programs { margin-top: 0; }
@media (max-width: 860px) {
  .acc > summary.sec__head { grid-template-columns: 44px 1fr auto; align-items: center; }
  .acc__btn::after { font-size: 13px; padding: 8px 11px; }
}
/* 접힌 구간끼리는 목록처럼 붙인다 */
#profile, #facility { padding-top: 0; }
.acc:not(.acc--sub) > summary { padding: 18px 0; }
.acc:not(.acc--sub):not([open]) > summary { margin-bottom: 0; }
#facility .acc:not([open]) { border-bottom: 1px solid var(--w); }
.acc:not(.acc--sub)[open] { padding-bottom: clamp(40px, 5vw, 64px); }

/* PT 상담 / 헬스 상담 두 버튼 (네이버 예약 items 4265976 / 8136362) */
.btns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.intro__meta .btns { margin-top: 14px; justify-content: flex-end; }
.intro__meta .btns .btn { margin-top: 0; }
.btn--line { background: none; color: var(--w); box-shadow: inset 0 0 0 1px var(--w); }
.btn--line:hover { background: var(--w); color: var(--c); }
.price__cta { margin-top: 28px; }
@media (max-width: 860px) { .intro__meta .btns { justify-content: flex-start; } }