/* redesign 스킬 점검 반영(2026-10-21). 파프짐 고정 규칙(로고·Volte·애플 고딕·흑백·원본 사진)과 글자 크기 목록은 그대로 두고
   디테일만 더한다: 줄바꿈 균형, 숫자 정렬, 마우스 올림·누름·초점, 사진 확대 반응, 등장 움직임, 검정 면 미세 질감, 바로가기 링크. */

/* 글자: 제목 줄 균형, 본문 끝 한 글자 방지, 문단 폭 제한, 숫자 고정폭 */
.h1, .h2, .h2en, .h3, .statement__text, .vcard__t, .bcard__name, .tcard__name, .cta__t { text-wrap: balance; }
p, li, .meta, .sub, .faq details p { text-wrap: pretty; }
.faq details p, .statement__sub, .vcard .meta { max-width: 38em; }
.meta, .bcard .meta, a[href^="tel:"], .tnum { font-variant-numeric: tabular-nums; }

/* 바로가기 링크(키보드) */
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 14px; font-size: 14px; font-weight: 600; }
.skip:focus { top: 12px; }

/* 초점 고리 — 모든 누를 수 있는 것 */
a:focus-visible, button:focus-visible, summary:focus-visible, .chip:focus-visible { outline: 2px solid #116dff; outline-offset: 3px; }
.statement a:focus-visible, .cta a:focus-visible, .cta button:focus-visible, .hero a:focus-visible { outline-color: #fff; }

/* 마우스 올림(마우스 기기만). 색·위치만 0.2초 */
@media (hover: hover) and (pointer: fine) {
  .btn { transition: transform var(--dur-release) var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
  .btn--solid:hover { background: #262626; border-color: #262626; }
  .btn--line:hover { background: var(--ink); color: var(--white); }
  .btn--white:hover { background: #e6e6e6; border-color: #e6e6e6; }
  .btn--light:hover { background: var(--white); color: var(--ink); }
  .chip:not(.is-on):hover { background: rgba(0,0,0,.06); }
  .link:hover, .ft__links a:hover { color: #5E5E5E; }
  .hd__nav a:hover { color: #5E5E5E; }
  .faq summary:hover { color: #262626; }
}

/* 사진 카드: 사진만 아주 조금 커지는 반응(겉 크기는 그대로) */
.bcard, .tcard a, .vcard, .journal__item { overflow: hidden; }
.bcard__img, .tcard__img, .vcard img, .journal__item img { transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .bcard:hover .bcard__img, .tcard a:hover .tcard__img, .vcard:hover img, .journal__item:hover img { transform: scale(1.03); }
}
.tcard a:active .tcard__img, .journal__item:active img { transform: scale(0.99); }

/* 지점 카드 버튼 줄을 카드 맨 아래로 맞춤 */
.bcard { display: flex; flex-direction: column; }
.bcard__body { display: flex; flex-direction: column; flex: 1; }
.bcard__actions { margin-top: auto; padding-top: 16px; }

/* 검정 면에 아주 옅은 질감(평평함 완화). 글자 대비에는 영향 없음 */
.statement, .cta { position: relative; isolation: isolate; }
.statement::before, .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* 등장 움직임: 스크립트가 켜졌을 때만 숨겼다가 화면에 들어오면 위로 18px·투명도 0→1, 0.6초. 움직임 줄이기면 없음 */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.23,1,0.32,1), transform 600ms cubic-bezier(0.23,1,0.32,1); transition-delay: calc(var(--i, 0) * 70ms); }
  html.js [data-reveal].in { opacity: 1; transform: none; }
}

/* 하단 고정 바 위 얇은 구분(흰 배경 위에서 떠 있는 느낌) */
.bar { box-shadow: 0 -1px 0 #eaeaea; }

/* 예약 · 톡톡 · 전화 세 버튼 */
.trio { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; width: 100%; }
.trio .btn { width: 100%; padding: 0 8px; }
.bar--3 { display: block; }
.btn.is-off, .sheet__row.is-off { opacity: .45; pointer-events: none; cursor: default; }
.btn.is-off { font-size: 13px; }
.thero__act .trio, .dcta__act .trio { max-width: 520px; }

/* 프로필 = 흰 배경으로 통일(CEO 2026-10-21) */
.tcard__img, .thero__img, .thero img, .tcard img { background: #fff !important; }
.tcard a::after { display: none; }
.tcard__name { color: var(--ink); }
.tcard .meta { color: var(--grey); }
.tcard__level { background: var(--ink); color: var(--white); }
/* 흰 배경이므로 휴대폰에서도 이름을 사진 아래로 */
.tcard__level, .tcard__name, .tcard .meta { position: static !important; }
.tcard__name { padding: 12px 0 0; font-size: 17px; }
.tcard .meta { padding: 0; }
.tcard__level { display: inline-block; margin-top: 6px; padding: 3px 7px; }

/* ── 원래 메뉴(About·Branch·Personal Training·Pilates·Community·Careers·FAQ) ── */
.hd__nav { display: none; }
.nv { position: relative; }
.nv__top { display: block; padding: 0 12px; font-family: var(--en); font-weight: 400; font-size: 15px; line-height: 80px; letter-spacing: 0; }
.nv__sub { position: absolute; left: 0; top: 100%; min-width: 180px; background: #fff; padding: 8px 0; box-shadow: 0 8px 24px rgba(0,0,0,.08); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
.nv__sub a { display: block; padding: 10px 16px; font-size: 15px; white-space: nowrap; }
.nv:hover .nv__sub, .nv:focus-within .nv__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .nv__sub a:hover, .nv__top:hover { color: #5E5E5E; } }
@media (min-width: 1100px) { .hd__nav { display: flex; align-items: center; margin-left: 40px; margin-right: auto; } }
@font-face { font-family: "PF Volte"; src: local("Volte-Regular"), local("Volte Regular"), url("/fonts/Volte-Regular.woff2") format("woff2"), url("/fonts/Volte-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }

/* 휴대폰 전체 메뉴 */
.mm { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 0 var(--gut) 40px; background: #fff; }
.mm[open] { animation: mmIn .28s cubic-bezier(.23,1,.32,1); }
@keyframes mmIn { from { opacity: 0; transform: translateY(-8px); } }
.mm__top { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.mm__x { width: 36px; height: 36px; position: relative; }
.mm__x span { position: absolute; left: 7px; top: 17px; width: 22px; height: 2px; background: #000; transform: rotate(45deg); }
.mm__x span + span { transform: rotate(-45deg); }
.mm__list > li { border-bottom: 1px solid #ececec; }
.mm__en { display: block; padding: 20px 0; font-family: var(--en); font-weight: 700; font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; list-style: none; cursor: pointer; }
.mm summary { list-style: none; } .mm summary::-webkit-details-marker { display: none; }
.mm summary .mm__en::after { content: "+"; float: right; font-weight: 300; }
.mm details[open] summary .mm__en::after { content: "–"; }
.mm details ul { padding: 0 0 16px; }
.mm details li a { display: block; padding: 10px 0; font-size: 16px; color: #262626; }

/* 첫 상담부터 다른 네 가지 — 큰 영문 단어가 테두리에서 채워지며 강조 */
.xp__list { list-style: none; margin: 32px var(--gut) 0; display: grid; gap: 40px; }
.xp__word { font-family: var(--en); font-weight: 700; font-size: 36px; line-height: 0.9; letter-spacing: 0.03em; color: transparent; -webkit-text-stroke: 1px #000; background: linear-gradient(#000,#000) left / 0% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-size 1.2s cubic-bezier(.77,0,.18,1); }
.xp__item.in .xp__word, html:not(.js) .xp__word { background-size: 100% 100%; }
.xp__t { font-size: 20px; font-weight: 400; margin: 14px 0 6px; }
.xp__d { font-size: 16px; color: #262626; max-width: 34em; }
@media (prefers-reduced-motion: reduce) { .xp__word { background-size: 100% 100%; transition: none; } }
@media (min-width: 1100px) {
  .xp__list { max-width: 1344px; margin: 48px auto 0; padding: 0 48px; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .xp__word { font-size: 40px; }
  .xp__t { font-size: 24px; } .xp__d { font-size: 17px; }
}

/* 원래 홈 카드(PT·필라테스·채용) */
.pcard { width: 300px; }
.pcard img { width: 300px; height: 272px; object-fit: cover; margin-bottom: 16px; }
.pcard .label { font-size: 13px; }
.pcard__d { font-size: 14px; color: #262626; margin: 8px 0 12px; }
.pcard__more { font-size: 14px; font-weight: 600; border-bottom: 1px solid #000; padding-bottom: 2px; }
@media (min-width: 1100px) { .pcard { width: 420px; } .pcard img { width: 420px; height: 381px; } .pcard__d { font-size: 15px; } }

/* 커뮤니티 — 원래처럼 사진 위 가운데 */
.community { position: relative; color: #fff; text-align: center; overflow: hidden; }
.community__img { width: 100%; height: 560px; object-fit: cover; filter: brightness(.55); }
.community__in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 0 var(--gut); }
.community .sub { color: rgba(255,255,255,.8); }
.community__d { font-size: 16px; max-width: 30em; margin: 20px 0 28px; }
@media (min-width: 1100px) { .community__img { height: 640px; } .community__d { font-size: 17px; } }

/* 푸터 — 원래 정보 */
.ft { padding: 56px var(--gut) 40px; background: #ccc; color: #262626; }
.ft__in { max-width: 1344px; margin: 0 auto; display: grid; gap: 20px; }
.ft__logo { width: 120px; height: 120px; object-fit: cover; margin: -41px 0 -41px 0; }
.ft__biz { font-size: 13px; line-height: 1.7; }
.ft__links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; list-style: none; }
.ft__bizd summary { cursor: pointer; }
.ft__bizd p { font-size: 13px; color: #555; margin-top: 6px; }
.ft__sns, .ft__org { display: flex; gap: 12px; align-items: center; list-style: none; }
.ft__sns img { width: 36px; height: 36px; }
.ft__org img { height: 28px; width: auto; }
.ft__copy { font-size: 13px; color: #555; }
@media (min-width: 1100px) { .ft { padding: 64px 48px 48px; } .ft__in { grid-template-columns: 200px 1fr auto; align-items: start; } .ft__copy { grid-column: 1 / -1; } }

/* 지점 오시는 길 — 지도(휴대폰·컴퓨터) */
.dvisit { display: grid; gap: 20px; padding-top: 64px; padding-bottom: 64px; }
.dvisit__map { width: 100%; height: 320px; border: 0; filter: grayscale(.2); }
@media (min-width: 1100px) { .dvisit { grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; } .dvisit__map { height: 440px; } }

/* 지점·강사 블로그 글(공식 블로그 finest2010) */
.dblog { padding-top: 64px; padding-bottom: 64px; }
.dblog__t { font-size: 22px; font-weight: 300; margin: 8px 0 20px; }
.dblog__t .meta { display: block; font-size: 14px; margin-top: 4px; }
.dblog__list { list-style: none; border-top: 1px solid #e5e5e5; margin-bottom: 24px; }
.dblog__list li a { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid #e5e5e5; font-size: 16px; line-height: 1.5; }
.dblog__go { font-family: var(--en); transition: transform .3s cubic-bezier(.23,1,.32,1); }
@media (hover: hover) { .dblog__list li a:hover .dblog__go { transform: translateX(6px); } .dblog__list li a:hover { color: #262626; } }
@media (min-width: 1100px) { .dblog { display: grid; grid-template-columns: 1fr 2fr; column-gap: 48px; } .dblog__t { font-size: 28px; grid-column: 1; } .dblog .label { grid-column: 1; } .dblog__list, .dblog .btn { grid-column: 2; grid-row: 1 / span 3; } .dblog .btn { grid-row: 4; justify-self: start; } .dblog__list li a { font-size: 17px; } }

/* 미션·비전 */
.values__grid { display: grid; gap: 1px; background: #e5e5e5; margin: 28px var(--gut) 20px; }
.values__item { background: #fff; padding: 28px 0; }
.values__k { font-family: var(--en); font-weight: 700; font-size: 13px; letter-spacing: .03em; color: #5E5E5E; }
.values__v { font-size: 22px; font-weight: 300; line-height: 1.4; margin-top: 10px; }
.values__more { margin-left: var(--gut); display: inline-block; }
@media (min-width: 1100px) { .values__grid { grid-template-columns: 1fr 1fr; max-width: 1344px; margin: 40px auto 24px; padding: 0; } .values__item { padding: 40px 40px 40px 0; } .values__v { font-size: 28px; } .values__more { margin-left: max(48px, calc((100vw - 1344px) / 2)); } }

/* 교육·컨퍼런스·협업·언론 */
.act { background: #0b0b0b; color: #fff; }
.act .h2en { color: #fff; } .act .sub { color: rgba(255,255,255,.65); }
.act__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 36px var(--gut) 32px; }
.act__n { font-family: var(--en); font-weight: 700; font-size: 36px; line-height: 1; }
.act__n small { font-family: var(--kr); font-weight: 400; font-size: 14px; margin-left: 2px; }
.act__l { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 10px; line-height: 1.45; }
.act .chip { border-color: rgba(255,255,255,.6); color: #fff; }
.act .chip.is-on { background: #fff; color: #000; }
.act__list { list-style: none; margin: 24px var(--gut) 0; border-top: 1px solid rgba(255,255,255,.18); }
.act__list li a { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.press__d { font-family: var(--en); font-size: 13px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.press__t { font-size: 16px; line-height: 1.5; }
@media (max-width: 1099px) { .act__list li a { grid-template-columns: 1fr auto; } .press__d { grid-column: 1 / -1; } }
@media (hover: hover) { .act__list li a:hover .dblog__go { transform: translateX(6px); } }
@media (min-width: 1100px) { .act__nums, .act__list { max-width: 1344px; margin-left: auto; margin-right: auto; padding: 0; } .act__n { font-size: 72px; } .act__l { font-size: 15px; } .press__t { font-size: 17px; } }

/* 회원 이야기(흰 바탕) */
.stories .act__list { border-top-color: #e5e5e5; }
.stories .act__list li a { border-bottom-color: #e5e5e5; }
.stories .press__d { color: #5E5E5E; }
.stories__note { margin: 20px var(--gut) 0; font-size: 14px; color: #5E5E5E; }
@media (min-width: 1100px) { .stories .act__list, .stories__note { max-width: 1344px; margin-left: auto; margin-right: auto; } }

/* 커뮤니티 글 카드 */
.ccard { width: 260px; }
.ccard img { width: 260px; height: 325px; object-fit: cover; margin-bottom: 14px; }
.ccard__t { font-size: 17px; }
.ccard__d { font-size: 14px; color: #5E5E5E; margin-top: 4px; }
@media (min-width: 1100px) { .ccard { width: 320px; } .ccard img { width: 320px; height: 400px; } }

/* 예약·톡톡·전화 공통 껍데기 — 같은 순서·같은 폭(1:1:1)·같은 높이·아이콘 16 */
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; width: 100%; }
.trio .btn { width: 100%; height: 48px; padding: 0 6px; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.trio .ci { width: 16px; height: 16px; flex: none; }
.bar .trio .btn { height: 52px; }
.bcard .trio .btn { height: 44px; font-size: 13px; }
.trio .is-off span { font-size: 12px; }
@media (min-width: 1100px) { .trio .btn { font-size: 15px; } .bcard .trio .btn { font-size: 14px; } }

/* 글자 최소 크기(CEO 2026-10-21 "너무 작은 글씨"): 한글은 휴대폰 14 · 컴퓨터 15 이상, 영문 대문자 이름표는 12 · 13 이상 */
.meta, .chip, .link, .ft__biz, .dtag, .dinfo__ko, .trow__ko, .btn--xs, .dintro__note, .ccard__d, .act__l, .stories__note, .pcard__d, .xp__d, .faq details p, .tcard .meta, .dblog__t .meta, .trio .is-off span { font-size: 14px; }
.label { font-size: 12px; }
.press__d, .values__k { font-size: 13px; }
@media (min-width: 1100px) {
  .meta, .chip, .link, .ft__biz, .dtag, .dinfo__ko, .trow__ko, .btn--xs, .dintro__note, .ccard__d, .act__l, .stories__note, .pcard__d, .tcard .meta, .dblog__t .meta { font-size: 15px; }
  .label { font-size: 13px; }
}
.bcard .trio .btn { font-size: 14px; }
.maplink, .ft__bizd p, .tin__cap, .trow__v a, .ft__links, .ft__links strong, .ft__bizd summary { font-size: 14px; }
.trio .is-off span { font-size: 14px; }
@media (min-width: 1100px) {
  .xp__d, .skip, .trio .btn, .trio .is-off span, .bcard .trio .btn, .maplink, .ft__bizd p, .ft__links, .ft__links strong, .ft__bizd summary, .trow__v a { font-size: 15px; }
}

figcaption, figcaption a { font-size: 14px; }
@media (min-width: 1100px) { figcaption, figcaption a { font-size: 15px; } }

/* 처음 오시는 분 · 예약 방법 */
.guide__steps { list-style: none; margin: 28px var(--gut) 0; display: grid; gap: 1px; background: #e5e5e5; }
.guide__steps li { background: #fff; padding: 24px 0; }
.guide__n { font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: .03em; color: #5E5E5E; }
.guide__t { font-size: 20px; margin: 6px 0; }
.guide__d { font-size: 16px; color: #262626; }
.guide__law { margin: 20px var(--gut) 0; font-size: 14px; color: #5E5E5E; }
.guide__cta { margin: 24px var(--gut) 0; max-width: 520px; }
@media (min-width: 1100px) {
  .guide__steps { grid-template-columns: repeat(3, 1fr); max-width: 1344px; margin: 40px auto 0; }
  .guide__steps li { padding: 32px 32px 32px 0; }
  .guide__t { font-size: 24px; } .guide__d { font-size: 17px; }
  .guide__law, .guide__cta { max-width: 1344px; margin-left: auto; margin-right: auto; } .guide__law { font-size: 15px; }
  .guide__cta .trio { max-width: 520px; }
}

/* 첫 화면 숫자 모션 */
.hero__stats { display: flex; gap: 28px; margin: 4px 0 24px; color: #fff; }
.hstat { display: flex; flex-direction: column; gap: 6px; }
.hstat__n { font-family: var(--en); font-weight: 700; font-size: 40px; line-height: .9; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hstat__l { font-size: 12px; line-height: 1.4; opacity: .85; }
@media (min-width: 1100px) {
  .hero__stats { gap: 56px; margin: 8px 0 32px; }
  .hstat__n { font-size: 64px; } .hstat__l { font-size: 13px; }
  .hero__pause { bottom: 104px !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .hstat { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 100% 0); transition: opacity .8s ease, transform 1s cubic-bezier(.19,1,.22,1), clip-path 1s cubic-bezier(.19,1,.22,1); }
  html.js .hero.ready .hstat { opacity: 1; transform: none; clip-path: inset(0 0 0 0); transition-delay: 1.15s; }
  html.js .hero.ready .hstat + .hstat { transition-delay: 1.35s; }
}

@media (min-width: 1100px) { .xp__list { grid-template-columns: repeat(3, 1fr) !important; } }