/* 지점·강사 상세 — style.css 다음에 읽는다. 기준: docs/design-standard-mobile.md
   휴대폰 글자: 36(지점 영문 H1, §2.2) · 30 · 22 · 20 · 17 · 16 · 15 · 14 · 13 · 11
   컴퓨터 글자(1100 이상): 72 · 40 · 28 · 24 · 17 · 15 · 13 · 11 (§6.2)
   홈 style.css 의 #visit·#trainers·#branches 규칙과 겹치지 않게 이 페이지의 id 는 d- 로 시작한다. */
:root { --rule: #d9d9d9; }
.wrap { padding-left: var(--gut); padding-right: var(--gut); }
.d-en { font-family: var(--en); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 1099.98px) { .d-only { display: none !important; } }
@media (min-width: 1100px) { .m-only { display: none !important; } }

/* 아래 고정 바: 강사 상세는 첫 화면 버튼이 보이는 동안 숨김(§7.3) */
.bar { transition: transform 240ms var(--ease-out); }
.bar.is-hidden { transform: translateY(110%); }

/* ── 지점: 제목 칸 §8.2-2 (흰 바탕, 위 32 아래 24) */
.dtitle { padding-top: 32px; padding-bottom: 24px; }
.dtitle__en { font-family: var(--en); font-weight: 700; font-size: 36px; line-height: 1.1; margin-top: 8px; }
.dtitle__ko { font-weight: 400; font-size: 20px; line-height: 1.4; margin-top: 6px; }
.dtags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dtag { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--ink); font-weight: 600; font-size: 13px; }
.dtag .label { line-height: 1; }

/* 사진 넘기기 390×520 + 위 진행 막대(§2.3) */
.dgal { position: relative; }
.dgal__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dgal__rail::-webkit-scrollbar { display: none; }
.dgal__item { flex: 0 0 100%; scroll-snap-align: start; }
.dgal__item img { width: 100%; height: 520px; object-fit: cover; }
.dgal__bar { position: absolute; z-index: 2; top: 16px; left: var(--gut); right: var(--gut); display: flex; gap: 4px; pointer-events: none; }
.dgal__bar i { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.45); }
.dgal__bar i.is-on { background: var(--white); }

/* 큰 문장 + 정보 접는 줄(줄 높이 79) */
.dintro { padding-top: 80px; padding-bottom: 80px; }
.dbig { font-weight: 300; font-size: 30px; line-height: 1.35; letter-spacing: -0.02em; max-width: 900px; }
.dintro__note { margin-top: 16px; }
.dacc { margin-top: 40px; border-top: 1px solid #e5e5e5; }
.dacc details { border-bottom: 1px solid #e5e5e5; }
.dacc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; height: 79px; font-weight: 300; font-size: 16px; cursor: pointer; }
.dacc summary::-webkit-details-marker { display: none; }
.dacc summary::after { content: "+"; font-family: var(--en); font-weight: 300; font-size: 20px; line-height: 1; }
.dacc details[open] summary::after { content: "–"; }
.dacc details p { font-size: 16px; padding: 0 0 24px; }
.dacc .maplink { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 13px; }

/* 후기 줄 §8.2-6 */
.drev { padding-bottom: 80px; }
.drev__t { font-size: 16px; margin-top: 12px; }
.drev__act { margin-top: 20px; }
.drev__act .btn { width: 100%; }

/* 강사 줄(밝은 회색) — 카드 300×400 + 아래 흰 칸 */
.dteam { background: var(--bg-grey); padding: 80px 0 96px; }
.dteam__t { font-weight: 300; font-size: 22px; line-height: 1.45; margin-top: 8px; }
.drail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px var(--gut) 4px; scroll-padding-left: var(--gut); scrollbar-width: none; }
.drail::-webkit-scrollbar { display: none; }
.drail > li { flex: none; scroll-snap-align: start; }
.dtc { width: 300px; }
.dtc a { display: block; background: var(--white); transition: opacity var(--dur-release) var(--ease-out); }
.dtc a:active { opacity: 0.7; }
.dtc__img { width: 300px; height: 400px; object-fit: cover; object-position: center top; }
.dtc__box { padding: 16px 20px 20px; }
.dtc__name { font-weight: 400; font-size: 17px; line-height: 1.4; }
.drail__ctl { display: flex; gap: 8px; }
.drail__arrow { width: 32px; height: 32px; display: grid; place-content: center; border: 1px solid var(--ink); background: var(--white); font-family: var(--en); font-weight: 300; font-size: 15px; line-height: 1; transition: transform var(--dur-release) var(--ease-out); }
.drail__arrow:active { transform: scale(0.97); transition-duration: var(--dur-press); }

/* 검정 CTA */
.dcta { background: var(--ink); color: var(--white); padding: 80px var(--gut); }
.dcta__t { font-weight: 300; font-size: 22px; line-height: 1.45; margin: 12px 0 28px; }
.dcta__act { display: flex; gap: 8px; }
.dcta__act .btn { flex: 1; }

/* ── 강사 상세 §7.3 */
.thero { padding: 0; }
.thero__img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center top; }
.thero__info { padding: 20px var(--gut) 40px; }
.thero__name { font-weight: 300; font-size: 30px; line-height: 1.35; letter-spacing: -0.02em; margin-top: 8px; }
.thero__branch { display: inline-block; margin-top: 4px; font-weight: 600; font-size: 15px; color: var(--grey); }
.thero__sum { font-size: 16px; margin-top: 16px; }
.thero__act { display: grid; gap: 8px; margin-top: 24px; }
.thero__act .btn { width: 100%; }

.trows { padding-bottom: 80px; }
.trow { border-top: 1px solid var(--rule); padding: 32px 0; }
.trow__ko { display: none; }
.trow__v { margin-top: 16px; }
.tlist li { font-size: 16px; line-height: 1.6; }
.tlist li + li { margin-top: 4px; }
.tig img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
.tig__cap { margin-top: 12px; font-weight: 600; font-size: 13px; }
.tig__cap a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tbr__img { width: 100%; height: 233px; object-fit: cover; margin-bottom: 16px; }
.tbr__name { font-size: 17px; }
.tbr__grid { display: grid; gap: 12px; margin-top: 12px; }
.tbr__grid dd { font-size: 16px; }
.tbr__links { margin-top: 16px; font-weight: 600; font-size: 13px; }

/* ════ 컴퓨터 화면 1100 이상(1440 기준) §6·§7.4·§8.3 ════ */
@media (min-width: 1100px) {
  html { scroll-padding-top: 144px; }

  /* 하위 메뉴 줄 64, 헤더 아래에 붙음(§6.3) */
  .dsub { position: sticky; top: 80px; z-index: 45; background: var(--white); box-shadow: 0 1px 0 var(--bg-grey); }
  .dsub__in { display: flex; align-items: center; gap: 32px; height: 64px; padding: 0 var(--gut); }
  .dsub__in > a:not(.btn) { font-weight: 600; font-size: 15px; transition: opacity var(--dur-release) var(--ease-out); }
  .dsub__in > a:not(.btn):hover { opacity: 0.6; }
  .dsub__cta { margin-left: auto; height: 40px; padding: 0 20px; }

  /* 제목 띠 232 */
  .dtitle { min-height: 232px; display: flex; flex-direction: column; justify-content: center; padding-top: 40px; padding-bottom: 32px; }
  .dtitle__en { font-size: 72px; line-height: 1.05; letter-spacing: -0.01em; margin-top: 12px; }
  .dtitle__row { display: flex; align-items: center; gap: 24px; margin-top: 12px; }
  .dtitle__ko { font-size: 24px; margin-top: 0; }
  .dtags { margin-top: 0; }

  /* 사진: 본문 폭 안 2장 나란히(높이 440, 원본 비율 그대로 = 768px 원본 0.86배, 확대 없음) */
  .dgal { padding: 0 var(--gut); }
  .dgal__rail { gap: 24px; }
  .dgal__item { flex: none; height: 440px; width: calc(440px * var(--ar)); }
  .dgal__item img { height: 440px; }
  .dgal__ctl { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding: 0 !important; }

  /* 큰 문장 40 → 1px 선 → 4칸 정보 줄(칸 324, 간격 16) */
  .dintro { padding-top: 120px; padding-bottom: 0; }
  .dbig { font-size: 40px; }
  .dinfo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--rule); }
  .dinfo dt .label, .dinfo__ko { display: block; }
  .dinfo__ko { font-weight: 600; font-size: 13px; margin-top: 4px; }
  .dinfo dd { font-size: 17px; color: var(--ink-2); margin-top: 16px; }
  .dinfo .maplink { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 15px; }

  /* 후기 줄 — 반반 */
  .drev { display: grid; grid-template-columns: minmax(0, 624fr) minmax(0, 672fr); column-gap: 48px; align-items: end; padding-top: 120px; padding-bottom: 120px; }
  .drev__t { font-weight: 300; font-size: 28px; line-height: 1.45; margin-top: 12px; }
  .drev .meta { margin-top: 4px; }
  .drev__act { display: flex; align-items: center; gap: 24px; margin-top: 0; }
  .drev__act .btn { width: auto; }
  .drev__eng .label { display: inline; }

  /* 강사 줄 — 카드 420×560 + 흰 칸 88, 간격 24, 3장 + 약 60px */
  .dteam { padding: 120px 0; }
  .dteam__t { font-size: 40px; line-height: 1.35; letter-spacing: -0.02em; margin-top: 12px; max-width: 900px; }
  .drail { gap: 24px; padding: 40px var(--gut) 0; }
  .drail > li:last-child { margin-right: var(--gut); }
  .dtc { width: 420px; }
  .dtc__img { width: 420px; height: 560px; }
  .dtc__box { height: 88px; padding: 14px 20px 0; }
  .dtc__name { font-size: 24px; }
  .dteam .drail__ctl { margin-top: 40px; }

  /* 오시는 길 — 반반, 사진 672×448 */
  .dvisit { display: grid; grid-template-columns: minmax(0, 624fr) minmax(0, 672fr); column-gap: 48px; align-items: center; padding-top: 120px; padding-bottom: 120px; }
  .dvisit__t { font-weight: 300; font-size: 28px; line-height: 1.45; margin: 12px 0 24px; }
  .dvisit p { color: var(--ink-2); }
  .dvisit__hours { margin-top: 8px; }
  .dvisit .btn { margin-top: 32px; }
  .dvisit__img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }

  /* 검정 CTA 1344×400 */
  .dcta { background: none; padding: 0 var(--gut) 120px; }
  .dcta__in { height: 400px; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 48px; }
  .dcta__t { font-size: 28px; margin: 20px 0 40px; }
  .dcta__act { justify-content: center; }
  .dcta__act .btn { flex: none; padding: 0 28px; }

  /* ── 강사 상세 §7.4 — 반반 첫 화면(사진 624×624 / 오른쪽 672, 아래 끝 맞춤) */
  .thero { display: grid; grid-template-columns: minmax(0, 624fr) minmax(0, 672fr); column-gap: 48px; align-items: end; padding: 64px var(--gut) 120px; }
  .thero__info { padding: 0; }
  .thero__name { font-size: 40px; }
  .thero__branch { margin-top: 8px; }
  .thero__sum { font-size: 17px; margin-top: 24px; }
  .thero__act { display: flex; margin-top: 32px; }
  .thero__act .btn { width: auto; padding: 0 28px; }

  .trows { padding-bottom: 120px; }
  .trow { display: grid; grid-template-columns: minmax(0, 624fr) minmax(0, 672fr); column-gap: 48px; padding: 48px 0; }
  .trow__k .label, .trow__ko { display: block; }
  .trow__ko { font-weight: 600; font-size: 13px; margin-top: 4px; }
  .trow__v { margin-top: 0; }
  .tlist li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
  .tig img { width: 324px; height: 432px; }
  .tbr__name { font-size: 24px; }
  .tbr__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 20px; }
  .tbr__grid dd { font-size: 17px; color: var(--ink-2); margin-top: 4px; }
  .tbr__links { margin-top: 24px; }
}