/* ──────────────────────────────────────────────────────────────
   site.css — 테넌트 공개 홈페이지·블로그 전용 디자인 시스템.

   출처: 사장님이 직접 다듬은 시안 「헬스장 마케팅 앱 v3」의 SITE PREVIEW.
   시안의 픽셀 값을 그대로 옮긴다 (4/8px 그리드로 반올림하지 않는다).
   시안이 860px 카드 안에서 그려졌으므로 --site-max 도 860px 이고,
   좌우 여백(56px/22px)까지 시안 그대로다.

   직원용 백오피스(app.css)와 완전히 분리한다. 이건 손님이 보는 브랜드
   얼굴이라 관리자 네이비가 아니라 자기 팔레트를 갖는다. 자족적(self-
   contained)이라 app.css / Basecoat 유틸리티에 의존하지 않는다.

   ── 스킨 프리셋 ────────────────────────────────────────────────
   시안의 5종(포레스트·미드나잇·클레이·클린 화이트·에너지)을 전부 토큰으로
   담았다. <html data-skin="midnight"> 처럼 속성 하나만 바꾸면 사이트 전체가
   갈아입는다. 그 속성은 tenant_sites.skin 이 채운다 — 사장님이 관리 화면
   «홈페이지 꾸미기»에서 견본을 누르면 그 자리에서 저장된다. 기본값은 포레스트.

   ── 글자 크기 (2026-09-11) ─────────────────────────────────────
   시안의 본문 13.5px 를 15px 로 올렸다. 손님은 20대 개발자가 아니라 50대이고,
   흐린 회색(opacity .45~.55)은 휴대폰 야외 화면에서 사실상 안 보인다 —
   그 계열을 .68~.8 로 함께 올렸다. 백오피스(app.css)와는 무관한 값이다.

   스킨을 늘릴 때 손댈 곳은 두 군데뿐이다 (마이그레이션은 필요 없다).
     ① 여기에 :root[data-skin="<코드>"] 블록 하나 (--scrim-tint 까지 넷)
     ② modules/website/models.py 의 SITE_SKINS 에 한 줄 (이름·설명·견본 색)

   ── 사진이 이끄는 화면으로 (2026-09-24) ────────────────────────
   그전까지 이 사이트는 «색면 위에 글자»로 시작했다. 손님이 첫 화면에서
   «여기가 어떤 공간인가»를 알 수 없었고, 절마다 간격이 같아 글이 위에서
   아래로 쌓인 블로그처럼 읽혔다. 셋을 고쳤다.

     ① 히어로를 실사진이 이끈다 (--scrim-tint 로 글씨 대비를 스킨별로 보장).
        사진이 없으면 지금까지의 색면 히어로로 우아하게 물러선다.
     ② 절의 무게를 다르게 준다 — --sec-y-lg / --sec-y / --sec-y-sm 셋과
        연한 띠(--band-bg). 같은 간격의 반복이 «블로그 느낌»의 원인이었다.
     ③ 손이 닿는 곳·읽히는 크기 — 본문 16px, 입력칸 16px(아이폰이 초점에서
        화면을 확대하는 경계값), 버튼·칩 44px, 하단 고정 바 48px.

   근거로 버린 것도 적어 둔다 — 사진 가로 스와이프(손님이 옆으로 밀 줄
   모르면 가장 센 증거가 안 보이는 픽셀이 된다), 슬라이드·자동재생 영상·
   스크롤 등장 효과(첫 화면을 늦춘다). 그래서 이 파일에는 애니메이션이 없다.

   ── 마케팅 랜딩으로 (2026-09-26 · 계획서 §8 «P4 시각 방향 — 결정») ──
   홈이 «블로그형»으로 읽히던 원인 셋을 고쳤다: ① 아홉 절이 전부 같은 폭·같은
   리듬(눈썹→제목→카드) ② 히어로가 결정 재료를 하나도 안 품어 첫 화면이 결론이
   아니라 목차 ③ 최근 글이 문자 그대로 블로그 목록.

     ① 첫 화면이 «한 장의 안내판»이다 — 사진 띠 위에 판(.plate)이 걸리고 그
        안에 포인트 3줄·영업시간·오시는 길·최저가·CTA·한 문단 요약이 전부 든다.
     ② 둥근 카드를 **괘선 격자**로 바꿨다 (.landing { --radius: 0 }). 둥근 건
        CTA(--radius-pill) 하나만 남아 «누를 수 있는 것»의 표식이 된다.
     ③ 가격은 진짜 <table>(.ptable), FAQ 는 접지 않은 열린 문답(.qa), 최신 글은
        리드 기사 + 보조 2편(.lead-post/.posts2) — 요약이 붙어야 목록을 벗어난다.

   괘선을 위해 --rule 을 새로 뒀다. --hair(rgba(0,0,0,.09) = 1.1:1)는 장식선이라
   격자로 쓰면 보이지 않는다. 보조 잉크도 --ink-2 로 **불투명 값**을 둔다 —
   opacity:.74 방식은 어두운 면(문의 슬랩) 위에서 계산이 깨진다.
   블로그 화면(--site-max 860px · --radius 12px)은 그대로다: 글은 읽는 폭이 따로 있다.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── 스킨 토큰 (기본 = 포레스트) ──
     2026-09-26: 기본 스킨이 랜딩 시안 A(«한 장의 안내판») 팔레트다 —
     종이 #f2f0e9 / 판 #ffffff / 잉크 #16211d / 보조 #55635c / 진녹 #0f4534 /
     슬랩 #12362a / 괘선 #d5d0c2. 색을 늘리지 않는다. */
  --accent:      #0f4534;
  --accent-ink:  #ffffff;
  --hero-bg:     linear-gradient(135deg, #0c3527, #0f4534);
  --hero-ink:    #eef1ec;
  --page-bg:     #f2f0e9;
  --ink:         #16211d;

  /* 글꼴 슬롯 둘 — 제목(--head-font)과 본문(--font). 스킨이 **짝**을 정한다.
     전에는 --font 가 전역 하나뿐이라 «제목 고딕 + 본문 다른 산세리프»를
     스킨이 표현할 수 없었다. 실제 파일을 받아오는 일은 <head> 의 몫이고
     어느 스타일시트를 걸지는 services.skin_font_hrefs 가 값으로 낸다.
     폴백 스택을 끝까지 적는다 — 글꼴이 늦거나 막혀도 화면은 그대로 선다. */
  --head-font:   "Gothic A1", "IBM Plex Sans KR", -apple-system,
                 BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
                 "Malgun Gothic", sans-serif;

  /* 사진 위 글씨를 받치는 어두운 면. 사진 밝기는 우리가 모르므로 스킨마다
     «그 스킨의 어두운 색»을 하나 정해 두고 그 색으로 덮는다 — 흰 글씨가 어느
     사진 위에서도 WCAG AA 를 넘기게 하는 유일하게 확실한 방법이다. */
  --scrim-tint:  #0d2a20;

  /* ── 랜딩 토큰 (2026-09-26 · 계획서 §8) ────────────────────────
     --ink-2   보조 잉크. **불투명 값**이다 (opacity 로 흐리면 어두운 면에서
               계산이 깨진다). 지면 위에서 4.5:1 을 넘겨야 한다.
     --plate   판(plate)·표의 면. --card-bg(흰색 60%)는 반투명이라 사진 띠에
               걸치는 판으로 쓰면 사진이 비쳐 글씨가 안 읽힌다.
     --slab    평면 진한 색 — 표 머리와 문의 구역. --hero-bg 는 그라디언트라
               표 머리에 쓰면 칸마다 색이 달라진다.
     --rule    괘선. 절과 칸을 선으로 나누려면 그 선이 **보여야** 한다.
     --shot-h  히어로 사진 띠 높이. */
  --ink-2:       #55635c;
  --plate:       #ffffff;
  --slab:        #12362a;
  --slab-ink:    #eef1ec;
  --slab-ink-2:  #c6d3cb;
  --rule:        #d5d0c2;
  --page-max:    1120px;
  --shot-h:      clamp(300px, 34vw, 490px);

  /* ── 시안에서 그대로 온 치수 (데스크톱) ──
     --gutter·--h1·--h2·--sec-y* 는 **clamp()** 다 (2026-09-26). 전에는 719px
     에서 값이 한 번에 튀어 1440 에서 여백이 모자라고 390–719 사이가 비었다.
     --site-max(860px)는 **글 읽는 폭**으로 그대로 두고, 랜딩은 --page-max 를 쓴다. */
  --site-max:    860px;
  --nav-pad:     16px 32px;
  --hero-pad:    64px 56px;
  --sec-pad:     44px 56px;
  --sec-pad-tight: 10px 56px 44px;
  --gutter:      clamp(22px, 4vw, 56px);
  --h1:          clamp(29px, 4.2vw, 50px);
  --h2:          clamp(23px, 2.4vw, 32px);
  --sub:         16px;
  --photo-cols:  1fr 1fr 1fr;
  --photo-cols2: 1fr 1fr;

  /* ── 절의 무게 (2026-09-24) ──────────────────────────────────
     간격이 절마다 같으면 히어로·사진·가격도 «또 한 단락»으로 읽힌다.
     셋으로 나눠 쓴다: 사진·가격·문의는 넓게, 안내·FAQ 는 조밀하게. */
  --sec-y:       clamp(32px, 3.8vw, 48px);
  --sec-y-lg:    clamp(44px, 5.4vw, 70px);
  --sec-y-sm:    clamp(22px, 2.6vw, 30px);

  /* 한글 본문 한 줄 길이. WCAG 1.4.8 은 라틴 80자에 대해 **CJK 는 40자**를
     쓴다 — 한글 한 글자가 라틴의 두 배 폭이라 라틴 기준 65자를 그대로 쓰면
     한 줄이 1.6배 길어진다. 여기서는 34자 남짓(≈34em)으로 잡는다. */
  --measure:     34em;

  /* ── 시안의 선·면 ── */
  --hair:        rgba(0, 0, 0, .09);   /* 카드 테두리 (장식선) */
  --hair-soft:   rgba(0, 0, 0, .07);   /* 표 안쪽 줄 */
  /* 누를 수 있는 것의 테두리는 장식선으로 그리면 안 된다 — WCAG 1.4.11 이
     «UI 부품 경계»에 3:1 을 요구한다. --hair(.09)는 1.1:1 밖에 안 되고,
     클린 화이트 스킨에서는 버튼이 배경에 녹아 사라진다. 잉크의 45% 가
     흰 바탕에서 3:1 경계다 (계산: 상대휘도 0.3 지점 ≈ #9d9d9d). */
  --line-strong: color-mix(in srgb, var(--ink) 45%, transparent);
  --card-bg:     rgba(255, 255, 255, .6);
  /* 절을 번갈아 칠하는 연한 띠. 스킨의 강조색에서 파생하므로 다섯 스킨이
     각자 자기 색의 연한 면을 갖는다 (토큰 밖에 새 색을 박지 않는다). */
  --band-bg:     color-mix(in srgb, var(--accent) 5%, var(--page-bg));
  --radius:      12px;                 /* 카드·사진 */
  --radius-pill: 22px;                 /* CTA 버튼 */
  --radius-chip: 18px;                 /* 상단 전화 칩 */
  /* 푸터 회색 #9aa3b8 은 밝은 바탕에서 2.6:1 이었다 (11px 글씨에 AA 4.5:1
     미달). 잉크에서 파생시켜 다섯 스킨 모두 통과하게 바꿨다. */
  --foot-ink:    color-mix(in srgb, var(--ink) 72%, transparent);
  /* 강조색을 «밝은 바탕 위의 작은 글씨·테두리»로 쓸 때의 값.
     칠(버튼 배경·배지)에는 --accent 를 그대로 쓰지만, 글씨와 테두리는
     바탕과 4.5:1 / 3:1 을 넘겨야 한다. 에너지 스킨의 노랑(#f5c518)은 흰
     바탕에서 1.56:1 이라 «— 가격», «최신 글» 같은 라벨이 사실상 안 보였다
     (실측). 그런 스킨만 같은 계열의 진한 값으로 내려 잡는다. */
  --accent-text: var(--accent);
  /* 포커스 링 — 사진·어두운 면 위에서는 흰색으로 뒤집는다 (아래 참조). */
  --focus:       var(--accent-text);

  /* 본문 글꼴 — 기본 스킨(포레스트)의 짝은 공업용 산세리프다. 숫자가
     tabular 로 서고 제목 고딕(Gothic A1)과 성격이 갈린다. */
  --font: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* 나머지 네 스킨의 본문은 Pretendard 다 (services._SKIN_NEEDS_PRETENDARD 와
   같은 목록이어야 한다 — 거기서 실제로 받아올 스타일시트를 고른다). */
:root[data-skin="midnight"],
:root[data-skin="clay"],
:root[data-skin="clean"],
:root[data-skin="energy"] {
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* 미드나잇 — 딥 네이비 · 고딕 */
:root[data-skin="midnight"] {
  --accent: #2e4a9e; --accent-ink: #ffffff;
  --hero-bg: linear-gradient(150deg, #0f1730, #22315c);
  --hero-ink: #f2f4fb; --page-bg: #f6f7fb; --ink: #171c2b;
  --head-font: "Pretendard Variable", Pretendard, -apple-system, system-ui,
               "Malgun Gothic", sans-serif;
  --scrim-tint: #0b1020;
  --ink-2: #4b5468; --plate: #ffffff;
  --slab: #16203c; --slab-ink: #eef1fb; --slab-ink-2: #bcc6de;
  --rule: #d2d7e4;
}
/* 클레이 — 테라코타 · 따뜻한 톤 */
:root[data-skin="clay"] {
  --accent: #b4553a; --accent-ink: #ffffff;
  --hero-bg: linear-gradient(160deg, #f6e8dc, #efd9c8);
  --hero-ink: #3c2a22; --page-bg: #fbf6f1; --ink: #33261f;
  --head-font: "Noto Serif KR", serif;
  --scrim-tint: #2b1a12;
  /* 테라코타 원색은 연한 띠 위에서 4.27:1 로 4.5 에 아슬아슬하게 못 미쳤다 */
  --accent-text: #9a462d;
  --ink-2: #6b564a; --plate: #ffffff;
  --slab: #3b2419; --slab-ink: #f7ece4; --slab-ink-2: #d9c4b6;
  --rule: #e3d6c9;
}
/* 클린 화이트 — 미니멀 모노톤 */
:root[data-skin="clean"] {
  --accent: #16181d; --accent-ink: #ffffff;
  --hero-bg: #ffffff; --hero-ink: #16181d; --page-bg: #f7f7f8; --ink: #1a1c22;
  --head-font: "Pretendard Variable", Pretendard, -apple-system, system-ui,
               "Malgun Gothic", sans-serif;
  --scrim-tint: #101114;
  --ink-2: #5a5e68; --plate: #ffffff;
  --slab: #16181d; --slab-ink: #f2f2f4; --slab-ink-2: #c3c5cb;
  --rule: #dcdde1;
}
/* 에너지 — 옐로 × 블랙 · 임팩트 서체 */
:root[data-skin="energy"] {
  --accent: #f5c518; --accent-ink: #141414;
  --hero-bg: #141414; --hero-ink: #ffffff; --page-bg: #fafafa; --ink: #141414;
  --head-font: "Black Han Sans", -apple-system, system-ui, "Malgun Gothic", sans-serif;
  --scrim-tint: #0f0f0f;
  /* 노랑은 칠로만 쓴다 (검은 글씨를 얹으면 잘 읽힌다). 글씨·테두리로 쓸
     때는 같은 계열의 진한 값으로 — 흰 바탕에서 1.56:1 → 5.9:1 */
  --accent-text: #7a5c00;
  --ink-2: #565656; --plate: #ffffff;
  /* 노랑 슬랩에 흰 글씨는 못 얹는다 — 어두운 면은 검정 쪽으로 둔다. */
  --slab: #141414; --slab-ink: #fafafa; --slab-ink-2: #c4c4c4;
  --rule: #dcdcdc;
}

/* 모바일 — 시안의 375px 프리뷰 값 그대로 */
@media (max-width: 719px) {
  :root {
    /* 상단 바 — 칩을 44px 표적으로 키우는 대신 위아래 여백을 줄여 바 높이를
       56px 에 맞춘다 (전보다 2px 만 두꺼워진다 — 첫 화면을 밀지 않는다). */
    --nav-pad: 6px 18px;
    --hero-pad: 36px 22px;
    --sec-pad: 30px 22px;
    --sec-pad-tight: 10px 22px 30px;
    --sub: 15.5px;
    --photo-cols: 1fr;
    --photo-cols2: 1fr;
    /* --gutter·--h1·--h2·--sec-y* 는 여기서 안 바꾼다 — clamp() 가 이미
       390px 부터 1440px 까지 이어서 값을 낸다 (위 :root 주석 참조). */
  }
}

*, *::before, *::after { box-sizing: border-box; word-break: keep-all; }

html, body { overflow-x: clip; }        /* 가로 스크롤·클리핑 방지 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  /* 15px → 16px. 고령 독자 가독성 연구(정성원, JKCA 2016 · 65세 이상 n=24)에서
     글자 «크기»가 서체·자간·행간을 압도하는 변수였고 13pt(≈17px)가 11pt 보다
     읽는 시간이 12% 짧았다. 서체는 통계적으로 차이가 없었다 — 그래서 글꼴을
     새로 들이는 대신 크기만 올린다. 글 본문은 아래에서 17px 까지 올린다. */
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

a { color: inherit; }

/* 포커스 링 — 키보드로 훑는 사람에게 «지금 여기»가 보여야 한다. 마우스
   클릭에는 나오지 않게 :focus-visible 만 쓴다. 어두운 면 위에서는 흰색으로
   뒤집는다 (강조색 링이 사진·검은 면에 묻힌다). */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 컨테이너 ─────────────────────────────────────────────────────
   시안의 860px 카드 = 이 사이트의 본문 폭. 좌우 여백은 --gutter 로,
   섹션 배경(히어로·CTA)은 화면 끝까지 흐르고 글만 이 폭 안에 선다. */
.wrap {
  max-width: var(--site-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ── 상단 바 ─────────────────────────────────────────────────────
   시안: padding 16px 32px, 브랜드는 제목 글꼴 900/17px, 우측 전화 칩. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--page-bg);
  /* 사진 히어로 위에 떠 있으므로 바의 «끝»이 보여야 한다 (전에는 선이 없어
     브랜드 글자가 사진 위에 떠 있는 것처럼 읽혔다). */
  border-bottom: 1px solid var(--hair);
}
/* 바 자체는 화면 끝까지 (히어로가 옆으로 비쳐 보이면 안 된다),
   그 안의 내용만 시안의 860px 안에 선다. */
.topbar__inner {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--site-max); margin: 0 auto;
  padding: var(--nav-pad);
}
.topbar__brand {
  font-family: var(--head-font);
  font-weight: 900; font-size: 17px; color: var(--ink);
  white-space: nowrap; text-decoration: none; letter-spacing: -.01em;
  /* 상호가 길어도 칩을 밀어내지 않는다 — 390px 에서 가로 스크롤이 생기던 길. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; min-height: 44px;
}
.topbar__brand span { color: var(--accent-text); }
.topbar__spacer { flex: 1; }
/* 시안의 전화 칩 — 1.5px 아웃라인 · 18px radius · 12px/800 */
.navchip {
  display: inline-flex; align-items: center; flex: none;
  border: 1.5px solid var(--accent-text); color: var(--accent-text);
  border-radius: var(--radius-chip); padding: 5px 14px;
  font-size: 12.5px; font-weight: 800; text-decoration: none;
  white-space: nowrap; background: transparent;
}
.navchip:hover { background: color-mix(in srgb, var(--accent-text) 8%, transparent); }
/* 누를 수 있는 것은 장식선(--hair, 1.1:1)이 아니라 --line-strong(3:1). */
.navchip--soft { border-color: var(--line-strong); color: var(--ink); }
/* 휴대폰에서는 44px 표적 — 위아래 여백(--nav-pad)을 줄여 바 높이는 56px 유지. */
@media (max-width: 719px) { .navchip { min-height: 44px; padding: 5px 13px; } }

/* ── 히어로 ─────────────────────────────────────────────────────
   대표 사진을 걸었으면 사진이 화면을 이끈다 (.hero--photo). 안 걸었으면
   지금까지의 색면 히어로 그대로다 — 사진 없는 집이 «깨진 그림 자리»를
   보게 되면 안 된다 (§9).

   왜 사진인가: 헬스장을 고를 때 손님이 가장 먼저 걱정하는 건 «붐비나·
   기구가 낡았나·나 혼자 초보인가» 같은 공간에 대한 불확실이고, 그건 문장
   으로는 못 지운다. 진짜 바닥 사진 한 장이 그 질문에 바로 답한다. */
.hero, .ctaband { --focus: var(--hero-ink); }
.hero { background: var(--hero-bg); color: var(--hero-ink); }
.hero .wrap { padding-top: 0; padding-bottom: 0; }
.hero__inner { padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 719px) { .hero__inner { padding-top: 36px; padding-bottom: 36px; } }

/* 사진 히어로 — 사진은 배경이 아니라 <img> 다 (alt 를 줄 수 있고, 브라우저가
   우선순위를 높여 먼저 받아온다). 자리는 min-height 로 미리 잡아 두므로
   사진이 늦게 도착해도 글자가 튀지 않는다. */
.hero--photo {
  position: relative; isolation: isolate;
  color: #ffffff;                 /* 사진 위에서는 스킨 잉크가 아니라 흰 글씨 */
  --focus: #ffffff;               /* 포커스 링도 뒤집는다 */
  background: var(--scrim-tint);  /* 사진이 도착하기 전의 면 */
  min-height: 62vh;
  display: flex; align-items: flex-end;
}
@media (min-width: 720px) { .hero--photo { min-height: 460px; } }
.hero__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* 글씨가 앉는 아래쪽을 진하게 덮는다. 사진 밝기를 모르니 대비를 사진에
   맡기지 않는다 — 아래 92% 지점에서 흰 글씨가 어떤 사진 위에서도 AA 를 넘는다. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--scrim-tint) 92%, transparent) 0%,
    color-mix(in srgb, var(--scrim-tint) 74%, transparent) 46%,
    color-mix(in srgb, var(--scrim-tint) 34%, transparent) 100%);
}
.hero--photo .hero__inner { padding-top: 40px; padding-bottom: 34px; width: 100%; }
.hero--photo .hero__title { text-shadow: 0 1px 14px color-mix(in srgb, var(--scrim-tint) 55%, transparent); }
.hero--photo .hero__eyebrow, .hero--photo .hero__sub { opacity: .95; }
/* 클린 화이트·에너지 스킨의 강조색은 어두운 면에서 버튼 경계가 사라진다 —
   사진 위에서는 흰 테두리로 경계를 보장한다 (WCAG 1.4.11 · 3:1). */
.hero--photo .btn--onDark { border-color: rgba(255, 255, 255, .62); }
.hero--photo .time-pill { border-color: rgba(255, 255, 255, .55); }

.hero__eyebrow {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; opacity: .75;
}
.hero__eyebrow::before { content: "● "; }
.hero__title {
  margin: 0;
  font-family: var(--head-font);
  font-size: var(--h1); font-weight: 900; line-height: 1.25;
  /* 제목은 balance — 마지막 줄에 한 글자만 떨어지는 것을 막는다 (§8) */
  white-space: pre-line; text-wrap: balance;
}
.hero__sub {
  margin: 14px 0 0; font-size: var(--sub); opacity: .92; line-height: 1.6;
}
/* CTA — 휴대폰에서는 두 버튼이 한 줄을 반씩 채운다. 엄지가 닿는 곳은
   화면 아래 가운데고, 좌우 끝은 사각지대다. 칩만큼 작은 버튼을 모서리로
   밀지 않는다. */
.hero__cta { display: flex; gap: 9px; margin-top: 20px; flex-wrap: wrap; }
@media (max-width: 719px) {
  .hero__cta { gap: 8px; }
  .hero__cta > .btn { flex: 1 1 46%; }
}

/* 시간 배지 — 시안에는 없지만 기존 기능이라 살린다. 히어로 위 톤으로 맞춘다. */
.time-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 7px 14px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 800; letter-spacing: .02em; opacity: .9;
}
.time-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; opacity: .8;
}

/* ── 버튼 (시안: radius 22px · padding 10px 20px · 13px/800) ───── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* 44px — 손떨림·관절이 있는 손도 한 번에 누르게. WCAG 2.5.8(AA)은 24px
     이지만 애플 44pt·머티리얼 48dp 가 실무 기준이고 우리 손님은 50대다. */
  min-height: 44px;
  padding: 11px 20px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 800; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; background: transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { filter: brightness(.92); }
/* 히어로/CTA 처럼 어두운 면 위 — 시안의 두 번째 버튼 */
.btn--onDark { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--ghostDark { border-color: currentColor; color: inherit; opacity: .9; }
.btn--ghostDark:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.btn--outline { border-color: var(--line-strong); color: var(--ink); background: var(--card-bg); }
.btn--outline:hover { border-color: var(--accent-text); color: var(--accent-text); }
.btn--block { width: 100%; }
.btn--lg { padding: 10px 22px; font-size: 13px; }

/* ── 섹션 (시안: padding 44px 56px · eyebrow 11px/800/.12em) ─────
   절마다 간격이 같으면 히어로도 가격도 «또 한 단락»이 되고, 그게 이 화면이
   블로그처럼 읽혔던 이유였다. 무게를 셋으로 나눈다.
     .section--wide   사진·가격·문의 — 결정이 일어나는 자리
     .section         기본
     .section--tight  트레이너·첫 방문·FAQ — 읽고 넘기는 자리
   여기에 연한 띠(.section--band)를 번갈아 얹어 절의 «경계»를 눈에 보이게 한다.
   간격만으로는 스크롤 중에 경계가 안 읽힌다. */
.section { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.section--wide { padding-top: var(--sec-y-lg); padding-bottom: var(--sec-y-lg); }
.section--tight { padding-top: var(--sec-y-sm); padding-bottom: var(--sec-y-sm); }
.section--band { background: var(--band-bg); }
/* 같은 색 띠가 두 번 붙으면 한 절처럼 보인다 — 맞닿으면 사이에 선을 넣는다. */
.section--band + .section--band { border-top: 1px solid var(--hair-soft); }

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--accent-text);
}
.eyebrow::before { content: "— "; }
.section__title {
  margin: 0 0 12px;
  font-family: var(--head-font);
  font-size: var(--h2); font-weight: 800; line-height: 1.3; text-wrap: balance;
}
.section__lead { margin: 0 0 14px; opacity: .92; line-height: 1.8;
  max-width: var(--measure); }
/* 절 제목 + 오른쪽 링크 한 줄 */
.sechead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.prose { line-height: 1.8; text-wrap: pretty; }
.prose p { margin: 0 0 12px; opacity: .92; }
.prose p:last-child { margin-bottom: 0; }

/* 약속 — 히어로 바로 아래 «우리가 어떤 곳인가».
   소개 문단 하나가 카드 하나다. 줄글로 흘려 읽히지 않게 칸을 나누고 표식을 준다. */
.promises { display: grid; grid-template-columns: var(--photo-cols2); gap: 10px; }
.promise {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--card-bg); padding: 14px 16px;
}
.promise p { margin: 0; line-height: 1.75; text-wrap: pretty; }
.promise__mark {
  width: 18px; height: 18px; margin-top: 3px; border-radius: 999px;
  background: var(--accent); position: relative;
}
.promise__mark::after {
  content: ""; position: absolute; left: 5px; top: 4px;
  width: 5px; height: 9px; border: solid var(--accent-ink);
  border-width: 0 2px 2px 0; transform: rotate(42deg);
}

/* ── 카드 (시안: 1px var(--hair) · radius 12px · 반투명 흰 면) ─── */
.card {
  background: var(--card-bg); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 14px 16px;
}

/* 방문 절차 — 시안에 없는 기존 기능. 시안의 표 톤을 그대로 쓴다. */
.steps {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: var(--radius);
  overflow: hidden; background: var(--card-bg);
}
.step {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  padding: 12px 16px; border-bottom: 1px solid var(--hair-soft);
}
.step:last-child { border-bottom: 0; }
.step__no {
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 800;
}
.step__body p { margin: 0; opacity: .92; max-width: var(--measure); }

/* NAP — 찾아오는 길. 시안 가격표와 같은 표 톤. */
.nap {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: var(--radius);
  overflow: hidden; background: var(--card-bg);
}
.nap__row {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--hair-soft); font-size: 15px;
}
.nap__row:last-child { border-bottom: 0; }
.nap__k { opacity: .72; font-weight: 700; }
.nap__v a { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent-text); font-weight: 700; text-decoration: none; }
.linkrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* 가격표 — 여섯 줄짜리 표에서 «카드 목록»으로.
   전에는 이름과 금액만 있어서 손님이 «1개월 10만 vs 12개월 40만»을 머릿속으로
   나눠야 했다. 하루·1회 기준 금액을 옆에 적어 그 계산을 대신한다. 새 약속을
   보태는 게 아니라 사장님이 적은 숫자를 나눈 것뿐이다.

   강조는 하나만 — «많이 고르는 것»은 우리가 모르는 사실이므로 그렇게 쓰지
   않는다. 대신 사장님 숫자로 확인되는 것(하루로 나누면 가장 낮은 줄)에만
   표식을 준다. */
.plans { display: grid; gap: 8px; }
.plan {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; font-size: 16px;
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--card-bg);
}
.plan > div:first-child { min-width: 0; }
.plan__name { display: block; font-weight: 700; line-height: 1.45; }
.plan__meta { display: block; opacity: .74; font-size: 13.5px; }
.plan__price { flex: none; font-weight: 800; white-space: nowrap; text-align: right;
  font-size: 18px; letter-spacing: -.01em; }
.plan__price small { font-weight: 600; font-size: 13.5px; opacity: .78; }
.plan__right { flex: none; text-align: right; }
/* 하루·1회로 나눈 금액 — 비교축이다. 금액보다 작고 흐리게 둔다. */
.plan__unit { font-size: 13px; opacity: .74; white-space: nowrap; margin-top: 2px; }
/* 표식이 붙는 한 줄 — 색이 아니라 «테두리 + 작은 말»로 표시한다. 다섯 스킨
   중 에너지(노랑)·클린(검정)에서는 색면만으로는 구분이 안 된다. */
.plan--pick {
  border-color: var(--accent-text); border-width: 2px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
  padding: 13px 15px;
}
.plan__tag {
  display: inline-block; margin-bottom: 5px;
  padding: 2px 9px; border-radius: var(--radius-chip);
  background: var(--accent); color: var(--accent-ink);
  font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
}
.note { opacity: .74; font-size: 13.5px; margin-top: 12px; line-height: 1.7; }
.note--center { text-align: center; }
/* 환불 규정처럼 사장님이 줄 나눠 적는 글 — 줄바꿈을 살린다. */
.note--lines { white-space: pre-line; }
@media (max-width: 719px) {
  /* 390px 에서 이름과 금액을 한 줄에 억지로 붙이면 둘 다 줄바꿈된다.
     이름 위, 금액 아래 — 세로로 쌓되 금액을 오른쪽에 붙여 눈이 한 열로 훑게. */
  .plan { align-items: flex-end; gap: 10px; }
  .plan__price { font-size: 17px; }
}

/* 트레이너 칩 */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips--after { margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 7px 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--card-bg);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.chip--on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
a.chip:hover { border-color: var(--accent-text); color: var(--accent-text); }
a.chip--on:hover { color: var(--accent-ink); }

/* 후기 — 시안의 2열 카드 */
.reviews { display: grid; grid-template-columns: var(--photo-cols2); gap: 10px; }
.review {
  border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 14px 16px; font-size: 12.5px; line-height: 1.7; background: var(--card-bg);
}
.review__by { margin-top: 6px; opacity: .75; font-weight: 700; }

/* 사진 — 격자. 한 장씩 세로로 쌓지 않는다.
   장수는 사장님이 정한다(1~6장)고 매번 균형이 맞아야 하므로 장수별로 판을
   바꾼다: 한 장이면 넓게 한 장, 두 장이면 나란히, 셋 이상이면 «대표 한 장 +
   나머지 격자».

   ⚠️ 가로 스와이프(scroll-snap)는 일부러 안 썼다. 옆으로 밀 수 있다는 걸
   모르는 손님에게는 두 번째 사진부터가 없는 픽셀이 되고, 시설 사진은 이
   화면에서 가장 센 증거라 숨기면 손해가 가장 크다. 세로 스크롤은 아무도
   배우지 않아도 된다. */
.photos {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
.photo {
  margin: 0;
  aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius);
  background: linear-gradient(135deg, #d8dde7, #eef1f6);
  display: flex; align-items: center; justify-content: center;
  color: #8a92a6; font-size: 11.5px; overflow: hidden;
}
/* 셋 이상 — 첫 장이 대표 사진 자리(넓게), 나머지가 격자 */
.photos:has(> .photo:nth-child(3)) > .photo:first-child {
  grid-column: 1 / -1; aspect-ratio: 21 / 9;
}
/* 두 장 — 3칸으로 나누면 오른쪽에 빈 칸이 남는다 */
.photos:has(> .photo:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
/* 한 장 — 넓게 한 장. 4/3 으로 두면 860px 폭에 세로 645px 사진이 된다 */
.photos:has(> .photo:only-child) { grid-template-columns: 1fr; }
.photos:has(> .photo:only-child) > .photo { aspect-ratio: 16 / 9; }
.photo--wide { aspect-ratio: 21 / 9; font-size: 12px; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 719px) {
  /* 휴대폰에서도 격자다 — 두 칸이면 한 화면에 두 장이 들어와 «둘러본다»는
     느낌이 난다. 대표 한 장만 3/2 로 크게 남긴다. */
  .photos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .photos:has(> .photo:nth-child(3)) > .photo:first-child { aspect-ratio: 3 / 2; }
  .photos:has(> .photo:nth-child(2):last-child) { grid-template-columns: 1fr; }
}

/* FAQ — 시안의 표 톤 위에 접기 */
.faq {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: var(--radius);
  overflow: hidden; background: var(--card-bg);
}
.faq details { border-bottom: 1px solid var(--hair-soft); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  display: flex; align-items: center; min-height: 44px;
  padding: 11px 40px 11px 16px; font-size: 15px; font-weight: 700;
  line-height: 1.5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; margin-top: -13px;
  font-size: 19px; font-weight: 500; color: var(--accent-text); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 16px 15px; opacity: .92; line-height: 1.8;
  max-width: var(--measure); }

/* ── 문의 폼 ──────────────────────────────────────────────────── */
.contact-card {
  background: var(--card-bg); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 20px;
}
.field { margin-top: 14px; }
.field:first-of-type { margin-top: 0; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; opacity: .9; }
.req { color: #c0392b; }
/* 성함·연락처는 짧은 칸이라 넓은 화면에서 한 줄에 둘 — 폼이 짧아 보이면
   «금방 끝난다»고 읽힌다. 390px 에서는 한 칸씩 쌓인다. */
.fieldrow { display: grid; gap: 14px; }
@media (min-width: 560px) { .fieldrow { grid-template-columns: 1fr 1fr; } }
.fieldrow .field { margin-top: 0; }
.input {
  width: 100%; min-height: 44px; padding: 11px 12px; border-radius: 0;
  border: 1px solid var(--line-strong); background: #ffffff; color: var(--ink);
  /* 16px 은 취향이 아니라 경계값이다 — 이보다 작으면 아이폰 사파리가 입력칸에
     초점이 갈 때 화면을 확대하고, 그 뒤로는 손님이 좌우로 스크롤하게 된다. */
  font-family: inherit; font-size: 16px; line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  outline: none; border-color: var(--accent-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
textarea.input { resize: vertical; min-height: 84px; }
.formsubmit { margin-top: 18px; min-height: 50px; font-size: 15px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── CTA 밴드 (시안: 히어로 배경 · 가운데) ───────────────────── */
.ctaband { background: var(--hero-bg); color: var(--hero-ink); text-align: center; }
.ctaband p { max-width: var(--measure); margin-inline: auto; }
.ctaband .section__title { margin-bottom: 0; }
.ctaband p { margin: 8px auto 0; font-size: 15.5px; opacity: .92; }
.ctaband .hero__cta { justify-content: center; margin-top: 16px; }

/* ── 알림(flash) ─────────────────────────────────────────────── */
.flash { display: grid; gap: 8px; padding-top: 16px; }
.flash div {
  padding: 11px 14px; border-radius: var(--radius); font-size: 13px;
  border: 1px solid var(--hair); background: var(--card-bg);
  border-left: 3px solid var(--accent);
}
.flash div[data-variant="error"] { border-left-color: #c0392b; color: #8c2a1c; }

/* ── 푸터 (시안: 18px · 11px · #9aa3b8 · 가운데) ─────────────── */
.foot {
  /* 11px 는 사업자 정보를 확인하러 온 사람에게 너무 작았다 (그리고 옛
     회색 #9aa3b8 은 AA 미달이었다 — 위 --foot-ink 주석 참조). */
  padding: 22px 18px; text-align: center; font-size: 12.5px; color: var(--foot-ink);
  background: var(--page-bg); line-height: 1.9;
  border-top: 1px solid var(--hair-soft);
}
.foot p { margin: 0; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }

/* ── 모바일 하단 고정 CTA ──────────────────────────────────────
   이 화면의 목적은 문의다. 히어로의 버튼은 한 번 스크롤하면 사라지고,
   손님이 «지금 물어볼까»를 정하는 지점은 사람마다 다르다 — 사진에서
   정하는 사람도 있고 가격을 본 뒤인 사람도 있다. 그래서 늘 손 닿는 곳에 둔다.

   반투명한 바가 글을 가리면 안 된다: body 아래 여백을 바 높이만큼 준다.
   테두리도 --hair(1.1:1) 가 아니라 --line-strong(3:1) 이다 — 밝은 스킨에서
   반투명 바와 본문의 경계가 사라지던 곳이다. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 9px; padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--page-bg) 94%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line-strong);
}
/* 한 줄을 반씩 — 엄지가 닿는 곳은 아래 가운데고 좌우 끝은 사각지대다. */
.dock .btn { flex: 1; min-height: 48px; font-size: 14.5px; }
@media (min-width: 720px) { .dock { display: none; } }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 720px) { body { padding-bottom: 0; } }

/* ══════════════════════════════════════════════════════════════
   블로그 스킨
   시안에는 블로그 화면이 없어 위의 토큰(색·글꼴·radius 12/22px·
   hairline)에서 그대로 파생했다. 네이버 블로그·티스토리 방문자가
   기대하는 배치 — 목록 + 사이드(카테고리·최신글), 글 + 목차 + 이전/다음.
   ══════════════════════════════════════════════════════════════ */

/* 목록은 2단(본문 + 검색·묶음·태그). 사이드는 모바일에서 본문 아래로. */
.blog {
  display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 32px;
  align-items: start;
}
@media (max-width: 899px) { .blog { grid-template-columns: 1fr; gap: 24px; } }

/* 글 본문 화면은 1단이다 — 읽는 화면이라 옆 위젯이 글 폭을 좁히면 안 된다.
   위젯은 글 아래로 내려가 «다음에 읽을 것»이 된다. */
.blog--read { grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* 글도 위젯도 같은 한 단 안에 선다 — 글만 좁고 아래 위젯이 넓으면 두 화면을
   위아래로 붙인 것처럼 보인다. */
.blog--read > * { width: 100%; max-width: var(--measure); margin-inline: auto; }
.blog--read .side { display: grid; gap: 14px; }
@media (min-width: 720px) {
  .blog--read .side { grid-template-columns: 1fr 1fr; align-items: start; }
}

.blog__head { padding-bottom: 4px; }
.blog__head h1 {
  margin: 0; font-family: var(--head-font);
  font-size: calc(var(--h2) + 4px); font-weight: 800; line-height: 1.3;
  letter-spacing: -.01em;
}
.blog__count { margin: 8px 0 0; font-size: 14px; opacity: .76; }

/* 글 목록 — 카드.
   카드의 «면»은 가져오고 카드의 «격자»는 버렸다. 글마다 썸네일이 다르면
   격자가 훑기 좋지만, 동네 블로그 글은 서로 비슷비슷해서 격자로 깔면
   똑같은 네모의 벽이 된다. 390px 에서는 어차피 한 열로 내려온다 — 그러면
   카드의 테두리 값만 치르고 훑는 이득은 0 이다.
   그래서 «한 줄에 한 장짜리 카드»다. 제목이 가장 큰 표적이다 (목록에서
   읽히는 건 사실상 제목뿐이다). */
.postlist { display: grid; gap: 10px; }
.postlist > a {
  display: block; padding: 16px 18px; text-decoration: none;
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--card-bg);
  transition: border-color .15s ease, transform .12s ease;
}
.postlist > a:hover { border-color: var(--accent-text); transform: translateY(-1px); }
.postlist > a:hover .postlist__title { color: var(--accent-text); }
.postlist__title {
  margin: 0; font-family: var(--head-font);
  font-size: 19px; font-weight: 800; line-height: 1.4; text-wrap: pretty;
}
.postlist__meta {
  margin: 7px 0 0; font-size: 13.5px; opacity: .74; letter-spacing: .01em;
}
.postlist__excerpt {
  margin: 8px 0 0; font-size: 15px; opacity: .88; line-height: 1.7;
  max-width: var(--measure);
}
/* 홈의 «최근 글» 세 개는 훑는 목록이 아니라 맛보기라 넓은 화면에서 나란히. */
@media (min-width: 720px) {
  .postlist--teaser { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
  .postlist--teaser .postlist__title { font-size: 16.5px; }
}
@media (max-width: 719px) {
  .postlist__title { font-size: 17.5px; }
}

/* 사이드 위젯 — 티스토리 스킨 사이드바 모듈에 해당 */
.side { display: flex; flex-direction: column; gap: 14px; }
.side__box {
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--card-bg); padding: 14px 16px;
}
.side__title {
  margin: 0 0 10px; font-size: 12px; font-weight: 800;
  letter-spacing: .12em; color: var(--accent-text);
}
.side__list { display: flex; flex-direction: column; gap: 8px; }
.side__list a {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px; font-size: 14px; line-height: 1.55; text-decoration: none;
}
.side__list a:hover { color: var(--accent-text); }
.side__list time { display: block; font-size: 13px; opacity: .74; }
.side__fact { font-size: 13.5px; line-height: 1.6; opacity: .88; }
.side__cats { display: flex; flex-direction: column; gap: 2px; }
.side__cats a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 0; font-size: 14px; text-decoration: none;
  border-bottom: 1px solid var(--hair-soft);
}
.side__cats a:last-child { border-bottom: 0; }
.side__cats a[aria-current="true"] { color: var(--accent-text); font-weight: 800; }
.side__cats b { font-weight: 600; opacity: .68; }

/* 블로그 내 검색 (네이버 '블로그 내 검색' · 티스토리 검색창) */
.blogsearch { display: flex; gap: 6px; }
.blogsearch .input { flex: 1; min-width: 0; padding: 10px; }
.blogsearch button {
  flex: none; min-height: 44px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  padding: 8px 14px; font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 0;
}

/* 페이지 넘기기 */
.pager { display: flex; gap: 6px; justify-content: center; padding: 26px 0 0; flex-wrap: wrap; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 6px 9px;
  border: 1px solid var(--line-strong); border-radius: 0;
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.pager span[aria-current="page"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

/* ── 글 본문 ─────────────────────────────────────────────────── */
/* 읽는 화면 — 글이 화면 가운데 한 단으로 선다. */
.article { padding: 22px 0 8px; max-width: var(--measure); margin-inline: auto; }
.article__title {
  margin: 14px 0 0; font-family: var(--head-font);
  font-size: clamp(26px, 6.4vw, 36px); font-weight: 900; line-height: 1.28;
  letter-spacing: -.015em; text-wrap: pretty;
}
.article__meta { margin: 12px 0 0; font-size: 13.5px; opacity: .74; }
.article__meta b { font-weight: 700; opacity: .85; }
/* 글 상단 요약 — 브런치·티스토리의 '요약' 블록에 해당 */
.article__summary {
  margin: 18px 0 0; padding: 14px 16px;
  border-left: 3px solid var(--accent); background: var(--card-bg);
  font-size: 15.5px; line-height: 1.75; opacity: .95;
}
/* 본문 17px/1.85. 고령 독자 연구에서 13pt(≈17px)가 11pt 보다 읽는 시간이
   12% 짧았고 서체·자간·행간은 통계적으로 차이가 없었다 — 글꼴을 새로 들이는
   대신 크기를 올린다. 한 줄 길이는 --measure(≈34자)가 잡는다. */
.article__body { margin-top: 22px; font-size: 17px; line-height: 1.85; }
.article__body h2 {
  margin: 38px 0 12px; font-family: var(--head-font);
  font-size: 22px; font-weight: 800; line-height: 1.4; text-wrap: pretty;
  scroll-margin-top: 72px;
}
.article__body p { margin: 0 0 20px; opacity: .95; }
/* 사장님이 엔터로 나눈 줄은 템플릿이 <br> 로 살린다 (에디터에서 본 모양 =
   손님이 보는 모양). 옛 .prewrap(white-space: pre-line)은 그래서 없어졌다. */

/* 본문의 목록 — «- 이렇게» 로 쓴 줄. 여기 규칙이 없어서 그동안 브라우저
   기본값(들여쓰기 40px)으로 나왔다. */
.article__body ul,
.article__body ol { margin: 0 0 20px; padding-left: 1.3em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li { margin: 0 0 7px; opacity: .95; }
.article__body li:last-child { margin-bottom: 0; }
.article__body li > p { margin: 0; }

/* 본문의 표 — 「| 상품 | 가격 |」 로 쓴 줄.
   AI 초안이 그대로 게시글이 되므로 표가 실제로 들어온다
   (modules/website/services.py::render_blocks 의 주석 참고).
   넘치는 것은 .tablewrap 안에서만 흐른다 — 페이지 본문이 가로로 밀리면
   휴대폰(390px)에서 읽기가 망가진다. */
.article__body .tablewrap { overflow-x: auto; margin: 6px 0 24px; }
/* 가로로 굴릴 수 있는 영역이라 tabindex="0" 이 붙어 있다 — 마우스 없이도 굴려야
   한다. 포커스가 어디 갔는지 보이는 일(WCAG 2.4.7)은 위쪽의
   :where(…, [tabindex]):focus-visible 이 이미 한다 (--focus, 3px) — 여기서
   같은 규칙을 또 쓰지 않는다. */
.article__body table {
  border-collapse: collapse; width: 100%;
  /* 칸을 찌그러뜨리는 것보다 표 안에서 가로로 흐르는 편이 읽기 쉽다.
     390px 화면(본문 폭 ≈340px)에서 두 칸짜리 표는 그대로 들어온다. */
  min-width: 340px;
  /* 본문 17px 보다 한 단 작게. 표는 읽는 게 아니라 훑는 것이라 행간도 낮춘다. */
  font-size: 15.5px; line-height: 1.6;
  /* 헬스장 표는 대부분 가격이다 — 숫자 자리가 맞아야 위아래를 견줄 수 있다. */
  font-variant-numeric: tabular-nums;
}
.article__body th,
.article__body td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hair-soft);
}
.article__body thead th {
  background: var(--band-bg); font-weight: 800;
  border-bottom: 1px solid var(--hair);
}
.article__body tbody tr:last-child th,
.article__body tbody tr:last-child td { border-bottom: 0; }

/* 백틱으로 감싼 글자. 파서가 붙이는 cop-code 는 백오피스 CSS 의 이름이라
   여기서는 안 걸린다 — 손님 화면에서도 읽히게 최소한만 입힌다. */
.article__body code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--band-bg); border: 1px solid var(--hair);
  font-size: .92em;
}

/* 목차 (네이버 스마트에디터 '목차' · 티스토리 TOC 플러그인) */
.toc {
  margin: 20px 0 0; border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--card-bg); padding: 12px 16px;
}
.toc__title { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--accent-text); }
.toc ol { margin: 8px 0 0; padding-left: 18px; }
.toc li { margin: 6px 0; font-size: 14px; line-height: 1.6; }
.toc a { text-decoration: none; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; }
.toc a:hover { color: var(--accent-text); }

/* 공유 (네이버 '공유하기' · 티스토리 공유 버튼) */
.share { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 22px; }
.share { max-width: var(--measure); margin-inline: auto; }
.share__label { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; opacity: .75; }

/* 이전 글 · 다음 글 (양쪽 플랫폼 공통) */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
@media (max-width: 719px) { .prevnext { grid-template-columns: 1fr; } }
.prevnext { max-width: var(--measure); margin-inline: auto; }
.prevnext a {
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--card-bg); padding: 14px 16px; text-decoration: none;
}
.prevnext a:hover { border-color: var(--accent-text); }
.prevnext span {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  color: var(--accent-text); margin-bottom: 5px;
}
.prevnext strong {
  display: block; font-size: 14.5px; font-weight: 700; line-height: 1.5; text-wrap: pretty;
}
.prevnext a:last-child { text-align: right; }
.prevnext a:only-child { text-align: left; }

.backlink { display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; opacity: .78; text-decoration: none; }
.backlink:hover { color: var(--accent-text); opacity: 1; }
.morelink { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent-text); font-weight: 800; font-size: 14px; text-decoration: none;
  white-space: nowrap; }

/* 목록 아래 문의 한 줄 — 글을 읽다 바로 이어지게 */
.listcta { text-align: center; padding: 26px 0 4px; }
/* 글 아래 문의 카드 — 읽는 폭 안에 선다 */
.postcta {
  max-width: var(--measure); margin: 26px auto 0; text-align: center;
}
.postcta p { margin: 0 0 14px; font-size: 15px; opacity: .9; line-height: 1.7; }

/* 빈 화면 — 표만 덩그러니 두지 않는다 (§9) */
.empty {
  border: 1px solid var(--hair); border-radius: var(--radius); background: var(--card-bg);
  padding: 30px 20px; text-align: center; font-size: 15.5px; line-height: 1.85; opacity: .9;
}

/* ══════════════════════════════════════════════════════════════
   마케팅 랜딩 (2026-09-26 · 계획서 §8 «P4 시각 방향 — 결정»)

   홈 한 화면만 쓰는 부품들. 블로그(목록·글)는 위쪽 규칙을 그대로 쓴다 —
   옛 부품(.plans·.promises·.steps·.chips·.reviews·.faq·.postlist--teaser)은
   지우지 않았다: 홈 템플릿에서만 빠졌고 클래스는 남아 있다 (§3 삭제보다 상태변경).

   판형 한 문장: 사진 띠가 화면 끝까지 흐르고 그 위에 판(plate) 한 장이 걸려,
   손님이 30초에 정하는 데 필요한 것이 전부 그 판 안에 든다.
   ══════════════════════════════════════════════════════════════ */

/* 랜딩에서는 둥근 모서리가 CTA(--radius-pill) 하나뿐이다. «모든 블록이 같은
   둥근 카드»인 상태가 블로그 느낌의 절반이었다 (§8). 변수 하나로 이 화면
   안의 모든 부품이 각을 갖는다 — 블로그의 12px 는 건드리지 않는다. */
.landing { --radius: 0; }

/* 랜딩은 두 단이 서야 하므로 글 읽는 폭(860px)보다 넓다 */
.wrap--wide { max-width: var(--page-max); }

/* ── 히어로 = 안내판 ──────────────────────────────────────────── */
.board { background: var(--page-bg); padding-bottom: clamp(26px, 3.4vw, 48px); }
.board:has(> .shots) { padding-top: 0; }
.board:not(:has(> .shots)) { padding-top: clamp(22px, 3vw, 40px); }

/* 사진 띠 — 장수를 보고 판을 바꾼다. 한 장뿐인 집에서도 무너지지 않아야 한다
   (우리는 짐작 말고도 팔아야 한다 — 계획서 §8). 가로 스와이프는 여기서도 안 쓴다. */
.shots {
  display: grid; gap: 3px; background: var(--slab);
  height: var(--shot-h);
  grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
}
.shots figure { margin: 0; overflow: hidden; }
.shots img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shots figure:first-child { grid-row: 1 / 3; }
/* 두 장 — 한 줄에 나란히 (아래 칸이 비면 판이 뚫린 것처럼 보인다) */
.shots:has(> figure:nth-child(2):last-child) { grid-template-rows: 1fr; }
.shots:has(> figure:nth-child(2):last-child) figure:first-child { grid-row: auto; }
/* 한 장 — 넓게 한 장 */
.shots:has(> figure:only-child) {
  grid-template-columns: 1fr; grid-template-rows: 1fr;
}
@media (max-width: 719px) {
  .shots {
    height: auto; gap: 2px;
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
  }
  .shots figure:first-child { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 3 / 2; }
  .shots figure:not(:first-child) { aspect-ratio: 1 / 1; }
  .shots:has(> figure:only-child) figure { aspect-ratio: 16 / 9; }
}

.plate {
  position: relative; z-index: 2;
  background: var(--plate); border: 1px solid var(--rule);
  padding: clamp(20px, 3vw, 36px);
}
/* 사진 띠가 있을 때만 판이 그 위로 올라탄다 */
.shots + .wrap .plate { margin-top: clamp(-72px, -4.5vw, -32px); }
.plate__kick {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--accent-text);
}
.plate__kick::before { content: "● "; }
.plate__h1 {
  margin: 0; font-family: var(--head-font);
  font-size: var(--h1); font-weight: 900; line-height: 1.2; letter-spacing: -.03em;
  text-wrap: balance; max-width: 20em; white-space: pre-line;
}
.plate .time-pill { margin-top: 14px; }

/* 업장 포인트 3줄 — 사장님이 적는 칸(TenantSite.usp_points). 비면 이 격자를
   아예 안 그린다: 빈 칸 셋을 지어내지 않는다 (J6).
   칸 사이 선은 gap 으로 낸다 — 줄 수가 1~3 으로 바뀌고 좁은 화면에서 접히므로
   테두리로 그리면 마지막 칸의 선이 남는다. */
.points {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border-top: 1px solid var(--rule);
}
.points li { background: var(--plate); padding: 16px 20px 18px; }
.pno {
  display: block;
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.points b {
  display: block; margin: 7px 0 0; font-family: var(--head-font);
  font-weight: 800; font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.4;
  letter-spacing: -.02em; text-wrap: balance;
}

/* 사실 띠 — 지역 업체를 고를 때 먼저 확인하는 것들(지금 여나·가까운가·얼마인가).
   칸 수가 값에 따라 달라지므로 여기도 gap 으로 선을 낸다. */
.facts {
  margin: 0; display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  border-top: 1px solid var(--rule);
}
.facts > div { background: var(--band-bg); padding: 14px 18px; }
.facts dt {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--ink-2); margin-bottom: 4px;
}
.facts dd {
  margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.facts dd small {
  display: block; font-weight: 400; font-size: 13px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
/* 여러 줄 적은 영업시간은 줄바꿈을 살린다 (사장님이 본 모양 = 손님이 보는 모양).
   기계가 못 읽는 글이어도 손님에게는 그대로 보인다 — 스키마에만 안 올라간다. */
.lines { display: block; white-space: pre-line; }
.facts dd .lines { font-weight: 700; }

.acts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  border-top: 1px solid var(--rule); padding-top: 18px;
}
@media (max-width: 519px) { .acts > .btn { flex: 1 1 100%; } }

/* GEO — «…은 어떤 곳인가요?» 질문형 소제목 + 자기완결 답 한 덩이.
   AI 검색이 통째로 인용할 수 있는 모양이자 사람에게도 요약이다. */
.quote {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 26px; margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 20px;
}
.quote h2 {
  margin: 0; font-family: var(--head-font); font-weight: 800; font-size: 18px;
  line-height: 1.45; letter-spacing: -.02em; text-wrap: balance;
}
.quote p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.8; max-width: var(--measure); }
.quote p:last-child { margin-bottom: 0; }
@media (max-width: 719px) { .quote { grid-template-columns: 1fr; gap: 10px; } }

/* ── 확인되지 않은 값의 자리 ───────────────────────────────────
   J6 «확인되지 않은 값은 넣지 않는다»의 화면 표현. 값이 비면 행을 숨기지
   말고 이 칸을 그린다 — 조용히 실패하지 않는다 (§9). */
.slot {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px dashed var(--line-strong); color: var(--ink-2);
  background: transparent; padding: 7px 12px;
  font-size: 13px; font-weight: 700; line-height: 1.4;
}
.slot::before { content: "✎"; }

/* ── 가격표 — 카드 목록이 아니라 진짜 표 ───────────────────────
   화면이 <table> 이면 손님·검색·AI 가 같은 것을 읽는다 (Offer 스키마와 1:1). */
.tscroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--plate); }
.ptable {
  border-collapse: collapse; width: 100%; min-width: 560px;
  font-variant-numeric: tabular-nums;
}
.ptable caption {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.ptable th {
  background: var(--slab); color: var(--slab-ink); text-align: left;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; padding: 12px 18px;
  white-space: nowrap;
}
.ptable td {
  padding: 15px 18px; border-bottom: 1px solid var(--rule);
  font-size: 16.5px; vertical-align: middle;
}
.ptable tr:last-child td { border-bottom: 0; }
.ptable .r { text-align: right; }
.ptable .nm { font-weight: 700; }
.ptable .won {
  font-family: var(--head-font); font-weight: 800; font-size: 20px;
  letter-spacing: -.02em; white-space: nowrap;
}
.ptable .won em { font-family: var(--font); font-style: normal; font-weight: 600; font-size: 14px; }
.ptable .unit { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
/* 표식이 붙는 한 줄 — 색면만으로는 에너지(노랑)·클린(검정)에서 구분이 안 된다.
   왼쪽 굵은 선 + 작은 말로 표시한다. */
.ptable tr.pick td {
  background: var(--band-bg);
  box-shadow: inset 3px 0 0 var(--accent-text);
}
.tag {
  display: inline-block; margin-bottom: 5px; padding: 2px 9px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
}
@media (max-width: 719px) {
  /* 가격은 이 화면의 핵심이라 옆으로 밀게 두지 않는다. 이름에 이미 들어 있는
     «기간·횟수» 열을 접으면 390px 안에 세 열이 그대로 들어온다. */
  .ptable { min-width: 0; }
  .ptable th:nth-child(2), .ptable td:nth-child(2) { display: none; }
  .ptable th { padding: 10px 11px; font-size: 11.5px; letter-spacing: .04em; }
  .ptable td { padding: 13px 11px; font-size: 15.5px; }
  .ptable .won { font-size: 18px; }
  .ptable .unit { font-size: 13px; }
}

/* 환불 기준 — 요금과 **함께** 표시해야 하는 항목이다 (체육시설업).
   비면 문구를 지어내지 않고 .slot 으로 «아직 비어 있다»를 보여 준다. */
.refund {
  margin-top: 18px; border: 1px solid var(--rule); background: var(--plate);
  padding: 18px 20px;
  display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.refund h3 {
  margin: 0; font-family: var(--head-font); font-weight: 800; font-size: 17px;
  letter-spacing: -.02em;
}
.refund p {
  margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-2);
  max-width: var(--measure); white-space: pre-line;
}
.refund .slot + p { margin-top: 10px; }
@media (max-width: 719px) { .refund { grid-template-columns: 1fr; gap: 10px; } }

/* ── 자주 묻는 질문 — 접지 않는다 ──────────────────────────────
   GEO 인용 대상이 <details> 로 접혀 있으면 사람도 스캔을 못 한다.
   질문형 <h3> + 바로 아래 자기완결 답, 넓은 화면에서 두 단. */
.qa { columns: 2; column-gap: 44px; }
@media (max-width: 859px) { .qa { columns: 1; } }
.qa__i { break-inside: avoid; border-top: 1px solid var(--rule); padding: 16px 0 18px; }
.qa__i h3 {
  margin: 0 0 6px; font-family: var(--head-font); font-weight: 800;
  font-size: 18.5px; line-height: 1.45; letter-spacing: -.02em; text-wrap: balance;
}
.qa__i h3::before { content: "Q. "; color: var(--accent-text); }
.qa__i p { margin: 0; font-size: 16px; line-height: 1.8; max-width: var(--measure); }

/* ── 최신 글 — 리드 기사 한 편 + 보조 2편 (시안 B 이식) ────────
   «제목 + 날짜 카드 셋»이 이 화면을 블로그로 읽히게 한 진원지였다.
   요약이 붙어야 목록을 벗어난다. */
.lead-post {
  display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 44px);
  align-items: center; margin-top: 8px;
}
@media (min-width: 860px) {
  .lead-post { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.lead-post figure { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.lead-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lead-post h3 {
  margin: 0; font-family: var(--head-font); font-weight: 800;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.36; letter-spacing: -.015em;
  text-wrap: balance;
}
.lead-post h3 a { text-decoration: none; }
.lead-post h3 a:hover { color: var(--accent-text); }
.lead-post .dek {
  margin: 14px 0 0; max-width: var(--measure);
  font-size: 16.5px; line-height: 1.85; color: var(--ink-2);
}
.pmeta {
  margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.readmore {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px;
  font-size: 14.5px; font-weight: 800; color: var(--accent-text); text-decoration: none;
  border-bottom: 1px solid var(--accent-text);
}
.posts2 {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: clamp(24px, 4vw, 48px); border-top: 2px solid var(--ink);
}
@media (min-width: 720px) { .posts2 { grid-template-columns: 1fr 1fr; gap: 0 44px; } }
.posts2 article { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.posts2 h3 {
  margin: 0; font-family: var(--head-font); font-weight: 800;
  font-size: 20px; line-height: 1.44; letter-spacing: -.01em; text-wrap: balance;
}
.posts2 h3 a { text-decoration: none; }
.posts2 h3 a:hover { color: var(--accent-text); }
.posts2 p {
  margin: 10px 0 0; max-width: var(--measure);
  font-size: 15.5px; line-height: 1.8; color: var(--ink-2);
}

/* ── 문의 — 어두운 슬랩 띠 ─────────────────────────────────────
   이 화면의 목적(문의)이 마지막 한 덩이로 선다. 폼은 밝은 판 위에 두고
   («입력»은 종이 위에서 한다), 위치·영업시간은 슬랩 위에 글로 둔다. */
.section--slab {
  background: var(--slab); color: var(--slab-ink);
  --focus: #ffffff;
}
.section--slab .eyebrow { color: var(--slab-ink-2); }
.section--slab .section__title { color: var(--slab-ink); }
.section--slab .section__lead,
.section--slab .note { color: var(--slab-ink-2); opacity: 1; }
.section--slab .slot { border-color: rgba(255, 255, 255, .45); color: var(--slab-ink-2); }
.section--slab .nap { background: transparent; border: 0; }
.section--slab .nap__row { border-bottom-color: rgba(255, 255, 255, .14); }
.section--slab .nap__k { color: var(--slab-ink-2); opacity: 1; }
.section--slab .nap__v a { color: var(--slab-ink); text-decoration: underline; }
/* 폼은 밝은 판 — 그 안에서는 잉크와 포커스 링이 지면 값으로 돌아온다 */
.section--slab .contact-card {
  background: var(--plate); color: var(--ink); border-color: var(--rule);
  --focus: var(--accent-text);
}
.section--slab .contact-card .note { color: var(--ink-2); }
.contact {
  display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
}

/* 처음 오시면 — 사장님이 적은 순서 그대로. 번호가 정보다.
   («첫 방문»은 문의를 남기기 직전에 읽히는 게 가장 쓸모 있다.) */
.section--slab h3.eyebrow { margin-top: 26px; }
.visitsteps {
  list-style: none; counter-reset: vs; margin: 18px 0 0; padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.visitsteps li {
  counter-increment: vs;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: 15.5px; line-height: 1.7;
}
.visitsteps li::before {
  content: counter(vs);
  font-size: 12.5px; font-weight: 800; color: var(--slab-ink-2);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.visitsteps p { margin: 0; max-width: var(--measure); }

/* 슬랩 위의 흰 버튼 — 진녹 위에 진녹 버튼을 얹으면 경계가 사라진다 */
.btn--onSlab {
  background: var(--plate); color: var(--slab); border-color: var(--plate);
  font-weight: 800;
}
.btn--onSlab:hover { filter: brightness(.94); }

/* ── 코치 소개 (2026-10-09 C2 · 요구사항서 §7.10 «트레이너 소개») ─────────
   «사업장 자료 › 코치»에서 «홈페이지에 소개»를 켠 코치만 선다. 괘선 격자 톤 그대로 —
   카드 그림자 없이 판 + 괘선. 사진은 3:4 세로, 없으면 이름 머리글자 칸.
   휴대폰 1열(사진 옆 글), 넓으면 2열 — 3열이면 소개 글이 한 줄에 열 자도 안 들어간다. */
.coaches {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: 18px; border-top: 2px solid var(--ink);
}
@media (min-width: 720px) {
  .coaches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
}
.coach {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--rule); word-break: keep-all;
}
.coach__photo {
  margin: 0; width: 112px; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--plate); border: 1px solid var(--rule);
}
.coach__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coach__initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--head-font); font-size: 34px; font-weight: 800; color: var(--ink-2);
}
.coach__name {
  margin: 0; font-family: var(--head-font); font-size: 19px; font-weight: 800;
  line-height: 1.4; letter-spacing: -.01em;
}
.coach__name span {
  margin-left: 4px; font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--ink-2); letter-spacing: 0;
}
.coach__tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 0; padding: 0;
}
.coach__tags li {
  padding: 3px 9px; border: 1px solid var(--rule); font-size: 13px; font-weight: 700;
  color: var(--accent-text);
}
.coach__intro {
  margin: 10px 0 0; max-width: var(--measure);
  font-size: 15px; line-height: 1.75; color: var(--ink-2);
}

/* 푸터의 우리 채널 줄 (C2) — 사업장 자료 › 채널 주소의 공개 채널. 44px 터치 높이. */
.foot__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px;
  margin-bottom: 6px; word-break: keep-all;
}
.foot__links a { gap: 6px; font-weight: 700; text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
.foot__links img { width: 16px; height: 16px; border-radius: 4px; }