/* 기준: docs/design-standard-mobile.md
   글자 크기 8개만: 30 · 22 · 20 · 17 · 16 · 14 · 13 · 11
   영문 = Volte Bold / Light, 한글 = Apple SD Gothic Neo (Light·Regular·SemiBold) → 대체 Noto Sans KR */
@font-face { font-family: "PF Volte"; src: local("Volte-Bold"), local("Volte Bold"), url("/fonts/Volte-Bold.woff2") format("woff2"), url("/fonts/Volte-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PF Volte"; src: local("Volte-Light"), local("Volte Light"), url("/fonts/Volte-Light.woff2") format("woff2"), url("/fonts/Volte-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }

:root {
  --ink: #000; --ink-2: #262626; --grey: #5E5E5E; --bg-grey: #f2f2f2; --white: #fff;
  --kr: "Apple SD Gothic Neo", "AppleSDGothicNeo", "Noto Sans KR", sans-serif;
  --en: "PF Volte", "Apple SD Gothic Neo", sans-serif;
  --gut: 20px;
  --dur-press: 100ms; --dur-release: 160ms; --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; scroll-padding-bottom: 72px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--kr); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--white); padding-bottom: calc(68px + env(safe-area-inset-bottom)); -webkit-font-smoothing: antialiased; word-break: keep-all; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* 글자 역할 */
.label { font-family: var(--en); font-weight: 700; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.label--light { color: var(--white); }
.h1 { font-weight: 300; font-size: 30px; line-height: 1.35; letter-spacing: -0.02em; }
.h2 { font-weight: 300; font-size: 30px; line-height: 1.35; letter-spacing: -0.02em; margin-top: 12px; }
.h3 { font-weight: 400; font-size: 20px; line-height: 1.4; margin-top: 8px; }
.meta { font-size: 13px; line-height: 1.5; color: var(--grey); }
.link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* 버튼 — 사이트 검정 사각 버튼, 반지름 0 */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; font-family: var(--kr); font-weight: 600; font-size: 14px; letter-spacing: 0; border: 1px solid var(--ink); transition: transform var(--dur-release) var(--ease-out), background-color var(--dur-release) var(--ease-out); }
.btn:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.btn--solid { background: var(--ink); color: var(--white); }
.btn--line { background: transparent; color: var(--ink); }
.btn--white { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--sm { height: 40px; padding: 0 18px; }
.btn--xs { height: 36px; padding: 0 14px; font-size: 13px; }
.btn--onwhite { background: var(--white); }

/* 헤더 64, 흰 띠 위 원본 로고 */
.hd { position: sticky; top: 0; z-index: 50; height: 64px; padding: 0 var(--gut); display: flex; align-items: center; gap: 12px; background: var(--white); }
.hd__logo { margin-right: auto; display: block; width: 100px; height: 32px; overflow: hidden; }
.hd__logo img { width: 100px; height: 100px; object-fit: cover; margin-top: -34px; } /* 512 정사각 파일에서 박스 부분만 보이게(박스 = 세로 37%~63%) */
.hd__menu { width: 36px; height: 36px; display: grid; place-content: center; gap: 6px; }
.hd__menu span { display: block; width: 22px; height: 2px; background: var(--ink); }
.hd__menu:active { transform: scale(0.92); }

/* 첫 화면 — 실측 390×844 전면, 글자는 아래 1/3 */
.hero { position: relative; height: calc(100svh - 64px - 68px - env(safe-area-inset-bottom)); min-height: 520px; overflow: hidden; background: var(--ink); color: var(--white); }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.6)); }
.hero__text { position: absolute; left: var(--gut); right: var(--gut); bottom: 40px; }
.hero__text .h1 { margin-top: 12px; }
.hero__lead { font-weight: 300; font-size: 16px; margin: 12px 0 24px; }

/* 큰 문장 — 실측: 가운데 정렬 statement 한 곳 */
.statement { padding: 96px var(--gut) 104px; text-align: center; }
.statement__text { font-weight: 300; font-size: 22px; line-height: 1.45; letter-spacing: -0.01em; }
.statement__sub { font-size: 14px; color: var(--grey); margin: 20px auto 0; max-width: 300px; }
.statement__actions { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }

/* 섹션 */
.sec { padding: 80px 0 96px; }
.sec > .label, .sec > .h2, .sec > .chips { margin-left: var(--gut); margin-right: var(--gut); }
.sec--grey { background: var(--bg-grey); }

/* 칩 — 각진 사각, 선택 = 검정 */
.chips { display: flex; gap: 8px; margin-top: 28px; }
.chips--scroll { overflow-x: auto; scrollbar-width: none; margin-right: 0 !important; padding-right: var(--gut); }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 36px; padding: 0 14px; font-weight: 600; font-size: 13px; border: 1px solid var(--ink); background: transparent; transition: transform var(--dur-release) var(--ease-out); }
.chip:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.chip.is-on { background: var(--ink); color: var(--white); }

/* 카드 줄 — 실측: 간격 20, 다음 카드 40px 보임 */
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px var(--gut) 4px; scroll-padding-left: var(--gut); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > li { scroll-snap-align: start; flex: none; }
.rail > li[hidden] { display: none; }

.bcard { width: 310px; background: var(--white); }
.bcard__img { width: 310px; height: 232px; object-fit: cover; }
.bcard__body { padding: 20px 0 0; }
.bcard__name { font-weight: 400; font-size: 20px; line-height: 1.4; margin: 4px 0 6px; }
.bcard__actions { display: flex; gap: 8px; margin-top: 16px; }
.bcard__actions .btn { flex: 1; }

.tcard { width: 240px; }
.tcard a { display: block; }
.tcard a:active { opacity: 0.7; }
.tcard__img { width: 240px; height: 300px; object-fit: cover; object-position: center top; background: var(--ink-2); }
.tcard__level { margin-top: 14px; color: var(--grey); }
.tcard__name { font-weight: 400; font-size: 17px; line-height: 1.4; margin-top: 2px; }

/* 아래 고정 바 — 높이 52 */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom)); background: var(--white); }
.bar .btn { height: 52px; width: 100%; }

/* 시트 */
.sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 86svh; border: 0; padding: 28px var(--gut) calc(20px + env(safe-area-inset-bottom)); background: var(--white); }
.sheet::backdrop { background: rgba(0, 0, 0, 0.5); }
.sheet[open] { animation: up 200ms var(--ease-out); }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
.sheet__list { margin-top: 20px; border-top: 1px solid #e5e5e5; }
.sheet__row { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 56px; padding: 0 4px; border-bottom: 1px solid #e5e5e5; font-size: 16px; text-align: left; }
.sheet__row:active { background: rgba(0, 0, 0, 0.06); }
.sheet__close { width: 100%; margin-top: 16px; }

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

/* 제목 = 원본 사이트 방식(영문 대문자 이름표 + 한글 사실 한 줄) */
.h2en { font-family: var(--en); font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; }
.sub { font-weight: 300; font-size: 16px; color: var(--grey); margin-top: 8px; }
.sec > .h2en, .sec > .sub { margin-left: var(--gut); margin-right: var(--gut); }
.statement .label { margin-bottom: 16px; }

/* 강사 카드: Third Space 처럼 사진 위 왼쪽 아래에 이름(흰 글자) + 등급 태그 */
.tcard a { position: relative; }
.tcard__img { height: 320px; }
.tcard a::after { content: ""; position: absolute; left: 0; right: 0; top: 160px; height: 160px; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; }
.tcard__level, .tcard__name, .tcard .meta { position: absolute; left: 16px; z-index: 1; margin: 0; }
.tcard__name { bottom: 44px; color: var(--white); }
.tcard__level { bottom: 16px; color: var(--ink); background: var(--white); padding: 4px 8px; }
.tcard .meta { bottom: 72px; color: rgba(255,255,255,.85); }

/* 큰 문장 — Third Space 실측: 검정 바탕, 가운데 정렬, 큰 글자가 화면을 채움, 버튼 2개(흰 채움 / 흰 테두리) */
.statement { background: var(--ink); color: var(--white); padding: 88px var(--gut) 96px; }
.statement .label { margin-bottom: 24px; }
.statement__text { font-size: 30px; font-weight: 300; line-height: 1.35; letter-spacing: -0.02em; }
.statement__sub { color: rgba(255,255,255,.7); margin-top: 20px; }
.statement__actions { margin-top: 40px; }
.btn--light { color: var(--white); border-color: var(--white); }
.hero__media { object-position: 50% 30%; }
.band img { width: 100%; height: 480px; object-fit: cover; }

/* 첫 방문 카드 */
.vcard { width: 280px; }
.vcard img { width: 280px; height: 350px; object-fit: cover; margin-bottom: 16px; }
.vcard__t { font-weight: 400; font-size: 20px; line-height: 1.4; margin: 4px 0 8px; }

/* 글과 영상 */
.journal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px var(--gut) 0; }
.journal__item { display: block; }
.journal__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 12px; }
.journal__item:active { opacity: 0.7; }
.journal__t { display: block; font-size: 14px; margin-top: 2px; }

/* 자주 묻는 질문 — Third Space 시설 접는 줄 리듬 */
.faq { margin: 24px var(--gut) 0; border-top: 1px solid #e5e5e5; }
.faq details { border-bottom: 1px solid #e5e5e5; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 16px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--en); font-weight: 300; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { font-size: 14px; color: var(--grey); padding: 0 0 22px; }

/* 예약 마무리 — 검정 바탕 */
.cta { background: var(--ink); color: var(--white); padding: 88px var(--gut); }
.cta__t { font-weight: 300; font-size: 16px; margin: 12px 0 28px; color: rgba(255,255,255,.8); }

/* 푸터 */
.ft { padding: 48px var(--gut) 32px; background: var(--white); }
.ft__logo { width: 100px; height: 100px; object-fit: cover; margin: -34px 0 -34px -0px; }
.ft__links { display: flex; gap: 20px; margin: 24px 0 16px; font-size: 14px; }

/* ── 컴퓨터 화면 전용 부품: 휴대폰에서는 숨김(휴대폰 규칙 변경 없음) ── */
.hd__nav, .hero__alt, .rail-nav { display: none; }

/* ════ 컴퓨터 화면(1100 이상, 1440 기준) — docs/design-standard-mobile.md §6
   격자: 여백 48 · 본문 최대 1344 (§6.1)
   글자 8개만: 72 · 40 · 28 · 24 · 17 · 15 · 13 · 11 (§6.2) — 홈에는 72 자리가 없음(지점 H1 전용)
   섹션 위아래 120(작은) / 160(큰) (§6.1·§6.8) ════ */
@media (min-width: 1100px) {
  :root { --gut: max(48px, calc((100% - 1344px) / 2)); --line: #d9d9d9; }
  html { scroll-padding-top: 80px; scroll-padding-bottom: 0; }
  body { font-size: 17px; line-height: 1.65; color: var(--ink); padding-bottom: 0; }
  .bar { display: none; }

  /* 글자 역할 */
  .meta { font-size: 13px; }
  .btn { font-size: 15px; }
  .btn--sm { height: 40px; padding: 0 20px; }
  .h2en { font-family: var(--en); font-weight: 700; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }
  .sub { font-weight: 300; font-size: 40px; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); margin-top: 12px; max-width: 900px; }

  /* 헤더 §6.3 — 높이 80 흰 띠 + 아래 1px #F2F2F2, 로고 높이 36(가로 112), 로고 오른쪽 64 띄우고 한글 메뉴 SemiBold 15 간격 32, 오른쪽 끝 [첫 상담] 높이 40·안 여백 20 */
  .hd { height: 80px; gap: 0; box-shadow: 0 1px 0 var(--bg-grey); }
  .hd__logo { width: 112px; height: 36px; margin-right: 64px; }
  .hd__logo img { width: 112px; height: 112px; margin-top: -38px; }
  .hd__nav { display: flex; gap: 32px; margin-right: auto; }
  .hd__nav a { font-weight: 600; font-size: 15px; line-height: 80px; transition: opacity var(--dur-release) var(--ease-out); }
  .hd__nav a:hover { opacity: 0.6; }
  .hd .btn--xs { height: 40px; padding: 0 20px; font-size: 15px; }
  .hd__menu { display: none; }

  /* 첫 화면 §6.4 — 전면 사진, 글은 왼쪽 아래 1/3(x48), 큰 문장 40 + 버튼 2개(검정 / 흰 테두리), 검정 40% 막 */
  .hero { height: calc(100svh - 80px); min-height: 640px; }
  .hero__shade { background: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,.4) 66%); }
  .hero__text { left: var(--gut); right: auto; bottom: 80px; max-width: 624px; }
  .hero__text .h1 { font-size: 40px; margin-top: 16px; }
  .hero__lead { font-weight: 400; font-size: 17px; margin: 16px 0 32px; }
  .hero .btn--white { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .hero__alt { display: inline-flex; margin-left: 8px; }

  /* 순서 §2.4: 사진 → 큰 문장 → 처음 오시면 → 지점 → 강사 → 글과 영상 → 질문 → CTA */
  .band { display: none; } /* 홈 바탕 순서(§6.8)에 없는 띠 사진 */

  /* Statement §6.5 — 흰 바탕, 가운데 Light 28 최대 3줄 폭 900, 버튼 2개 가운데 */
  .statement { background: var(--white); color: var(--ink); padding: 120px var(--gut); }
  .statement .label--light { color: var(--ink); }
  .statement__text { font-size: 28px; line-height: 1.45; letter-spacing: -0.01em; max-width: 900px; margin: 0 auto; }
  .statement__sub { font-size: 13px; color: var(--grey); max-width: 900px; margin-top: 24px; }
  .statement__actions { margin-top: 40px; }
  .statement .btn--white { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .statement .btn--light { color: var(--ink); border-color: var(--ink); }

  /* 섹션 §6.8 — 위아래 120/160, 같은 바탕이 이어질 때만 1px #D9D9D9 선 1344 */
  .sec { padding: 120px 0; }
  .sec--grey { padding: 160px 0; }
  #journal { background: var(--white); }
  #visit, #branches, #faq { background: linear-gradient(var(--line), var(--line)) 50% 0 / calc(100% - 2 * var(--gut)) 1px no-repeat; }
  .chips { margin-top: 40px; }

  /* 카드 줄 §6.6 — 카드 420, 간격 24, 3장 + 약 60px 보임, 아래 왼쪽 ‹ › 32×32 */
  .rail { gap: 24px; padding: 40px var(--gut) 0; scroll-padding-left: var(--gut); }
  .rail:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
  .rail-nav { display: flex; gap: 8px; margin: 50px var(--gut) 0; }
  .rail-nav.is-off { visibility: hidden; }
  .rail-nav__btn { width: 32px; height: 32px; display: grid; place-content: center; border: 1px solid var(--ink); background: var(--white); transition: transform var(--dur-release) var(--ease-out), opacity var(--dur-release) var(--ease-out); }
  .rail-nav__btn:active { transform: scale(0.97); transition-duration: var(--dur-press); }
  .rail-nav__btn:disabled { opacity: 0.3; cursor: default; }

  /* 지점 카드 420×315(4:3) + 흰 칸: 영문 11 / 한글 24 / 13 */
  .bcard { width: 420px; }
  .bcard__img { width: 420px; height: 315px; }
  .bcard__body { padding-top: 20px; }
  .bcard__name { font-size: 24px; margin: 4px 0 8px; }
  .bcard__actions { margin-top: 20px; }

  /* 강사 카드 420×560(3:4) + 사진 아래 흰 칸 높이 88: 이름 Regular 24 + 등급·지점 13 회색 */
  .tcard { width: 420px; }
  .tcard a { display: grid; grid-template-columns: auto 1fr; align-content: start; column-gap: 6px; background: var(--white); height: 648px; }
  .tcard a::after { display: none; }
  .tcard__img { grid-column: 1 / -1; width: 420px; height: 560px; }
  .tcard__level, .tcard__name, .tcard .meta { position: static; }
  .tcard__name { grid-column: 1 / -1; grid-row: 2; color: var(--ink); font-size: 24px; padding: 14px 20px 0; }
  .tcard__level { grid-row: 3; background: none; padding: 2px 0 0 20px; font-size: 13px; color: var(--grey); }
  .tcard .meta { grid-row: 3; color: var(--grey); padding-top: 2px; }
  .tcard .meta::before { content: "· "; }

  /* 처음 오시면 §6.6 — 지그재그 4칸(사진 320×320), 오른쪽 줄 125 내려 시작, 왼쪽 제목 고정 */
  #visit { padding: 160px var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) 672px; column-gap: 48px; align-items: start; }
  #visit > .h2en, #visit > .sub { grid-column: 1; grid-row: 1; margin: 0; position: sticky; align-self: start; }
  #visit > .h2en { top: 128px; }
  #visit > .sub { top: 156px; margin-top: 28px; }
  #visit .rail { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 320px 320px; gap: 64px 32px; overflow: visible; padding: 0 0 125px; scroll-snap-type: none; }
  #visit .vcard { width: 320px; }
  #visit .vcard:nth-child(even) { transform: translateY(125px); }
  .vcard img { width: 320px; height: 320px; margin-bottom: 20px; }
  .vcard__t { font-size: 24px; margin: 6px 0 8px; }
  .vcard .meta { font-size: 17px; line-height: 1.65; color: var(--ink-2); }

  /* 글과 영상 · 질문 — 반반(왼쪽 제목 / 간격 48 / 오른쪽 672) §6.1 */
  #journal, #faq { padding: 120px var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) 672px; grid-template-rows: auto 1fr; column-gap: 48px; }
  #journal > .h2en, #faq > .h2en, #journal > .sub, #faq > .sub { grid-column: 1; margin-left: 0; margin-right: 0; }
  .journal, .faq { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .journal { grid-template-columns: 324px 324px; gap: 24px; }
  .journal__item img { margin-bottom: 16px; }
  .journal__t { font-weight: 600; font-size: 15px; margin-top: 4px; }
  .faq summary { font-weight: 600; font-size: 15px; padding: 28px 0; }
  .faq summary::after { font-size: 24px; }
  .faq details p { font-size: 17px; line-height: 1.65; padding-bottom: 28px; }

  /* 검정 CTA 1344×480, 가운데 §6.8 */
  .cta { width: calc(100% - 2 * var(--gut)); max-width: 1344px; height: 480px; margin: 0 auto 120px; padding: 0 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .cta .h2en { color: var(--white); }
  .cta__t { font-size: 28px; line-height: 1.45; margin: 20px 0 40px; color: var(--white); }

  /* 푸터 */
  .ft { padding: 64px var(--gut) 48px; box-shadow: inset 0 1px 0 var(--line); }
  .ft__links { font-size: 13px; gap: 32px; }

  /* 시트(지점 선택) — 화면 가운데 상자 */
  .sheet { margin: auto; width: 480px; max-height: 80vh; padding: 40px; }
  .sheet .h3 { font-size: 24px; }
  .sheet__row { font-size: 15px; min-height: 56px; }
}

/* 2026-10-21 검수 보정: 컴퓨터 화면도 휴대폰과 같은 제목 체계(Volte 큰 영문 이름표 + 한글 사실 한 줄)와
   Third Space 홈처럼 검정 바탕 큰 문장을 쓴다(휴대폰과 같은 장면). 크기는 §6.2 의 8개 안. */
@media (min-width: 1100px) {
  .h2en { font-size: 40px; line-height: 1.2; letter-spacing: 0.02em; }
  .sub { font-size: 17px; line-height: 1.65; color: var(--grey); margin-top: 12px; letter-spacing: 0; }
  .statement { background: var(--ink); color: var(--white); padding: 160px var(--gut); }
  .statement .label--light { color: var(--white); }
  .statement__text { font-size: 40px; line-height: 1.35; letter-spacing: -0.02em; }
  .statement__sub { font-size: 15px; color: rgba(255,255,255,.7); }
  .statement .btn--white { background: var(--white); color: var(--ink); border-color: var(--white); }
  .statement .btn--light { color: var(--white); border-color: var(--white); }
  #visit > .sub { top: 188px; }
}