@charset "UTF-8";
/* ==========================================================================
   백호종합격투기 — 공개 화면 스타일 (site.css)

   순서: 토큰 → 기본 → 레이아웃(헤더·푸터·바닥 바) → 공통 부품 → 화면 블록 → 반응형은 각 블록 안에.

   ★ 빌드 없는 순수 CSS 다(SPEC 1절). Tailwind 산출물 재생성을 잊어 스타일이 빠진 채 배포되는 함정을 피한다.
   ★ 외부 요청 0 — CDN·구글 폰트를 부르지 않는다. 글꼴은 fonts.css 가 /fonts/pretendard 에서 싣는다.
   ★ 모바일 우선. 브레이크포인트는 640px / 1024px 두 개뿐이다. 375px 에서 가로 스크롤이 생기면 안 된다
     (표만 .table-scroll 안에서 밀린다).
   ★ 화면 전용 블록은 접두사로 이름을 짓는다(home-hero, trial-form …). 한 파일 안에서 이름이 부딪히지 않게 —
     송골농원 pages/*.css 가 같은 이름을 서로 덮어쓴 사고를 옮기지 않는다.
   ★ 색은 로고의 네 색(검정·노랑·파랑·빨강)과 중립색 토큰만 쓴다. 새 색을 만들지 않는다(The Logo Origin Rule).
     노랑은 채움 전용 — 흰 바탕 위 노랑 글자 금지(약 2:1). 검정 바탕 위 노랑 글자는 된다(약 9.3:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 토큰 — DESIGN.md frontmatter 와 한 글자도 다르지 않게 둔다(SPEC 7.6)
   TODO(고객): 원본 로고를 받으면 색을 다시 뽑는다(지금 값은 252px 스크린샷 실측 추정)
   -------------------------------------------------------------------------- */
:root {
  /* 로고 실측 (logo-temp.png, 2026-10-13) */
  --color-ink: #0E0E10;            /* 로고 바탕 검정 — 헤더·대문·푸터 바탕 */
  --color-ink-soft: #1C1C21;       /* 검정 위 카드 */
  --color-tiger: #CBB51F;          /* 노란 원형 띠 (실측 평균 #CBB51F) — 채움 전용 */
  --color-navy: #1B2A5D;           /* 파란 글씨 (실측 평균 #1B2A5D) — 밝은 바탕의 제목·링크 */
  --color-star: #B43306;           /* 빨간 별 (실측 평균 #B43306) — 드물게 */

  /* 중립·상태 */
  --color-bg: #F7F6F2;
  --color-surface: #FFFFFF;
  --color-text: #17171A;
  --color-text-muted: #55555C;
  --color-text-on-ink: #F4F2EA;
  --color-text-on-ink-muted: #B9B7AE;
  --color-border: #DDDAD2;
  --color-border-strong: #A8A59C;
  --color-danger: #B42318;
  --color-success: #1F7A3A;

  /* 글자 */
  --font-sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* fonts.css 가 Pretendard 로 덮는다 */
  --fs-xs: 0.9375rem;  /* 15px */
  --fs-sm: 1rem;       /* 16px */
  --fs-base: 1.0625rem;/* 17px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: 1.5rem;     /* 24px */
  --fs-2xl: 1.875rem;  /* 30px */
  --fs-3xl: 2.375rem;  /* 38px */
  --lh-base: 1.7;
  --lh-tight: 1.3;

  /* 간격·모양 */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --radius-sm: 6px; --radius-md: 12px; --radius-pill: 999px;
  --tap-min: 48px;
  --container-max: 1120px;
  --gutter: 16px;          /* ≥1024px 에서 24px 로 다시 정의 */
  --measure: 72ch;
  --header-h: 64px;        /* sticky 헤더 높이는 이 토큰 하나로만 쓴다(songgol 앵커 사고) */
}

@media (min-width: 1024px) {
  :root { --gutter: 24px; }
}

/* --------------------------------------------------------------------------
   2. 기본
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 앵커(#master 등)로 뛸 때 sticky 헤더 밑에 제목이 숨지 않게 */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  /* 한글은 어절 단위로 줄을 바꾼다. 긴 영문·주소는 넘치면 끊는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* 1024px 미만에는 바닥 고정 바(64px)가 있다. 본문 끝(푸터 저작권 줄)이 바 밑에 깔리지 않게 비운다 */
@media (max-width: 1023.98px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; }

img { display: block; max-width: 100%; height: auto; }

a { color: var(--color-navy); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }

/* 초점 링은 한 벌. 밝은 바탕은 남색, 검정 바탕은 노랑 */
:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 2px; }
.site-header :focus-visible,
.site-footer :focus-visible,
.mobile-bar :focus-visible,
.page-head :focus-visible,
.home-hero :focus-visible,
.contact-cta :focus-visible,
.home-guide__tile:focus-visible,
.map-card :focus-visible,
.hours-card :focus-visible { outline-color: var(--color-tiger); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-tiger);
  color: var(--color-ink);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

.site-main:focus { outline: none; }

/* 아이콘은 글자 크기를 따른다(fragments/icons) */
.icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.22em;
}

/* --------------------------------------------------------------------------
   3. 레이아웃
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); }

.section { padding-block: var(--space-7); }
.section--surface { background: var(--color-surface); }
.section--tight { padding-block: var(--space-5); }
@media (min-width: 1024px) {
  .section { padding-block: var(--space-8); }
  .section--tight { padding-block: var(--space-6); }
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}
.section__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-xl);
  color: var(--color-text);
}
.section__head .section__title { margin-bottom: 0; }
@media (min-width: 1024px) {
  .section__title { font-size: var(--fs-2xl); }
}
.section__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  font-weight: 600;
  text-decoration: none;
}
.section__more:hover { text-decoration: underline; }
.section__note { margin-top: var(--space-5); color: var(--color-text-muted); }

/* 앵커 목적지 */
.anchor-target { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* 본문 + 옆 칸(사진 자리 등). 좁은 화면에서는 한 줄 */
.split { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-7); align-items: start; }
}

/* --------------------------------------------------------------------------
   4. 헤더 — 검정 sticky
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-ink);
  color: var(--color-text-on-ink);
  border-bottom: 1px solid var(--color-ink-soft);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-h);
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}
/* 임시 로고는 스크린샷이라 모서리에 다른 색이 묻어 있다. 원으로 잘라 감춘다 */
.site-header__logo { width: 40px; height: 40px; border-radius: 50%; }
.site-header__name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.site-header__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.site-header__area { font-size: var(--fs-xs); color: var(--color-tiger); white-space: nowrap; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.site-header__tel {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  justify-content: center;
  padding-inline: var(--space-2);
  color: var(--color-text-on-ink);
  font-weight: 700;
  text-decoration: none;
}
.site-header__tel:hover { color: var(--color-tiger); }
.site-header__tel-num { display: none; }
/* .btn(뒤에 정의, display:inline-flex)보다 강하게 — 640px 미만에서는 바닥 바가 같은 일을 한다 */
.site-header__actions .site-header__cta { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  background: var(--color-ink-soft);
  color: var(--color-text-on-ink);
  border: 0;
  border-radius: var(--radius-sm);
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle__icon { display: inline-flex; }
.nav-toggle__icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close { display: inline-flex; }

/* 휴대폰: 헤더 아래로 펼쳐지는 판. site.js 가 is-open 을 붙인다 */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: var(--color-ink);
  border-top: 1px solid var(--color-ink-soft);
  box-shadow: 0 16px 32px rgba(14, 14, 16, 0.4);
}
.site-nav.is-open { display: block; }
.site-nav__list { list-style: none; margin: 0; padding: var(--space-2) var(--gutter) 0; }
.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  color: var(--color-text-on-ink);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink-soft);
}
.site-nav__item.is-active .site-nav__link { color: var(--color-tiger); }
.site-nav__item.is-active .site-nav__link::before {
  content: "";
  width: 4px;
  height: 1.1em;
  margin-right: var(--space-3);
  background: var(--color-tiger);
}
.site-nav__extra { display: grid; gap: var(--space-2); padding: var(--space-4) var(--gutter) var(--space-5); }
.site-nav__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: var(--color-text-on-ink);
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 640px) {
  .site-header__actions .site-header__cta { display: inline-flex; }
}

@media (min-width: 1024px) {
  .site-header__tel { display: inline-flex; }
  .nav-toggle { display: none; }

  .site-nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-nav__list { display: flex; padding: 0; }
  .site-nav__link {
    min-height: var(--header-h);
    padding-inline: 10px;
    font-size: var(--fs-sm);
    color: var(--color-text-on-ink-muted);
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
  }
  .site-nav__link:hover { color: var(--color-text-on-ink); }
  .site-nav__item.is-active .site-nav__link { color: var(--color-text-on-ink); border-bottom-color: var(--color-tiger); }
  .site-nav__item.is-active .site-nav__link::before { display: none; }
  .site-nav__extra { display: none; }
}

@media (min-width: 1200px) {
  .site-header__tel-num { display: inline; }
}

/* --------------------------------------------------------------------------
   5. 푸터
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-7) var(--space-6);
  background: var(--color-ink);
  color: var(--color-text-on-ink-muted);
  font-size: var(--fs-sm);
  border-top: 6px solid var(--color-tiger);
}
.site-footer a { color: var(--color-text-on-ink); }
.site-footer__top {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-ink-soft);
}
.site-footer__name { color: var(--color-text-on-ink); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.site-footer__local { margin-top: var(--space-1); color: var(--color-tiger); }
.site-footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.site-footer__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
}
.site-footer__hours { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__menu a { display: flex; align-items: center; min-height: var(--tap-min); text-decoration: none; }
.site-footer__menu a:hover { text-decoration: underline; }
.site-footer__biz {
  display: grid;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
}
.site-footer__biz div { display: flex; gap: var(--space-3); }
.site-footer__biz dt { flex: none; min-width: 6.5em; color: var(--color-text-on-ink-muted); }
.site-footer__biz dd { color: var(--color-text-on-ink); }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.site-footer__copy { margin-top: var(--space-3); font-size: var(--fs-xs); }

@media (min-width: 640px) {
  .site-footer__menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__biz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__biz-wide { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .site-footer__menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__biz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__biz-wide { grid-column: span 3; }
}

/* --------------------------------------------------------------------------
   6. 바닥 고정 바 (1024px 미만) — 전화·체험 신청이 엄지 닿는 곳에 늘 있다
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-ink);
  border-top: 1px solid var(--color-ink-soft);
}
.mobile-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  color: var(--color-text-on-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.mobile-bar__item .icon { width: 22px; height: 22px; }
.mobile-bar__item--primary { background: var(--color-tiger); color: var(--color-ink); font-weight: 700; }
.mobile-bar__item--kakao .icon { color: #FEE500; }
.mobile-bar__item--primary:focus-visible { outline-color: var(--color-text-on-ink); outline-offset: -4px; }

@media (min-width: 1024px) {
  .mobile-bar { display: none; }
}

/* --------------------------------------------------------------------------
   7. 공통 부품
   -------------------------------------------------------------------------- */

/* 단추. 높이는 언제나 48px 이상(--tap-min) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}
.btn--primary { background: var(--color-tiger); border-color: var(--color-tiger); color: var(--color-ink); }
.btn--primary:hover { filter: brightness(0.93); }
.btn--dark { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-text-on-ink); }
.btn--dark:hover { background: var(--color-ink-soft); border-color: var(--color-ink-soft); }
.btn--outline { background: transparent; border-color: var(--color-border-strong); color: var(--color-text); }
.btn--outline:hover { border-color: var(--color-ink); }
/* 각 회사가 정한 색 그대로(바꾸지 않는다) */
.btn--kakao { background: #FEE500; border-color: #FEE500; color: #191919; }
.btn--naver { background: #03C75A; border-color: #03C75A; color: #FFFFFF; }
.btn--kakao:hover, .btn--naver:hover { filter: brightness(0.95); }
.btn--lg { min-height: 56px; padding-inline: 24px; font-size: var(--fs-lg); }
.btn--sm { padding-inline: 14px; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

/* 검정 바탕 위의 외곽선 단추 */
.home-hero .btn--outline,
.contact-cta .btn--outline,
.map-card .btn--outline { color: var(--color-text-on-ink); border-color: var(--color-text-on-ink-muted); }
.home-hero .btn--outline:hover,
.contact-cta .btn--outline:hover,
.map-card .btn--outline:hover { border-color: var(--color-text-on-ink); }

.card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* 글자 배지 — 색만으로 구분하지 않는다(글자가 늘 함께 있다) */
.badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-text-on-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
}
/* 빨강은 별처럼 드물게, 밝은 바탕 위에서만(The Red Star Rule) — 고정 공지 하나에 쓴다 */
.badge--pinned { background: var(--color-star); color: #FFFFFF; }

/* 사실 목록 (dt/dd) */
.fact-list { border-top: 2px solid var(--color-ink); }
.fact-list__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.fact-list dt { color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: 600; }
.fact-list dd { font-weight: 600; }
.fact-list__link { display: inline-flex; align-items: center; min-height: var(--tap-min); margin-left: var(--space-2); font-weight: 600; }
.fact-list--compact .fact-list__row { padding-block: var(--space-3); }
@media (min-width: 640px) {
  .fact-list__row { grid-template-columns: 10em minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}

/* 아직 받지 못한 정보 (fragments/pending) — 점선 상자 하나. 숫자를 지어 넣지 않는다 */
.pending {
  max-width: var(--measure);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}
.section--surface .pending,
.trial-form .pending { background: var(--color-bg); }
.pending strong { color: var(--color-ink); }
.pending p + p { margin-top: var(--space-2); color: var(--color-text-muted); }

/* 사진 자리 — 그림만 있는 빈 틀(aria-hidden). 넓은 화면의 옆 칸에만 보인다 */
.photo-slot {
  display: none;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--color-bg);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-border-strong);
}
.section--surface .photo-slot { background: var(--color-bg); }
.section:not(.section--surface) .photo-slot { background: var(--color-surface); }
.photo-slot .icon { width: 40px; height: 40px; }
.photo-slot--portrait { aspect-ratio: 3 / 4; }
@media (min-width: 1024px) {
  .photo-slot { display: grid; }
}

/* 연락 구획(fragments/cta :: contactCta) — 밝은 바탕 위 검정 판 */
.section--cta { padding-block: var(--space-7); }
.contact-cta {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
  background: var(--color-ink);
  color: var(--color-text-on-ink);
}
.contact-cta__title { font-size: var(--fs-xl); }
.contact-cta__lead { margin-top: var(--space-2); color: var(--color-text-on-ink-muted); }
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta-group .btn { flex: 1 1 calc(50% - var(--space-3)); }
.cta-group .btn--primary { flex-basis: 100%; }
@media (min-width: 640px) {
  .contact-cta {
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--container-max) - 2 * var(--gutter));
    padding: var(--space-6);
    border-radius: var(--radius-md);
  }
  .cta-group .btn,
  .cta-group .btn--primary { flex: 0 1 auto; }
}
@media (min-width: 1024px) {
  .contact-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--space-7); }
  .cta-group { justify-content: flex-end; max-width: 40rem; }
}

/* 화면 머리(fragments/pagehead) — 검정 띠 + 아래 노란 줄 */
.page-head {
  padding-block: var(--space-6);
  background: var(--color-ink);
  color: var(--color-text-on-ink);
  border-bottom: 6px solid var(--color-tiger);
}
.page-head__title { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.page-head__lead { max-width: var(--measure); margin-top: var(--space-2); color: var(--color-text-on-ink-muted); }
@media (min-width: 1024px) {
  .page-head { padding-block: var(--space-8) var(--space-7); }
  .page-head__title { font-size: var(--fs-3xl); }
  .page-head__lead { font-size: var(--fs-lg); }
}

/* 화면 안 이동(소개 화면) */
.page-toc {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-5);
  overflow-x: auto;
}
.page-toc a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}
.page-toc a:hover { border-color: var(--color-ink); }

/* 쪽 이동 */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--space-6); }
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}
.pagination__link:hover { border-color: var(--color-ink); }
.pagination__link.is-active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-text-on-ink); }

/* 폼 */
.form-field { min-width: 0; margin: 0 0 var(--space-5); padding: 0; border: 0; }
.form-field__label { display: block; margin-bottom: var(--space-2); padding: 0; font-weight: 700; }
.form-field__req { margin-left: var(--space-1); color: var(--color-navy); font-size: var(--fs-xs); font-weight: 600; }
.form-field__opt { margin-left: var(--space-1); color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: 400; }
.form-field__input {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);   /* 16px 이상이어야 iOS 가 입력칸을 확대하지 않는다 */
  line-height: 1.4;
}
.form-field__input:focus { border-color: var(--color-navy); }
.form-field__textarea { min-height: 7.5rem; resize: vertical; }
.form-field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}
.form-field__help { margin-top: 6px; color: var(--color-text-muted); font-size: var(--fs-xs); }
.form-error {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: rgba(180, 35, 24, 0.07);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  font-weight: 700;
}
/* 허니팟 — 사람 눈에는 화면 밖, 봇은 채운다 */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* 긴 글 */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-6); font-size: var(--fs-xl); }
.prose h3 { margin-top: var(--space-5); font-size: var(--fs-lg); }
.prose h4 { margin-top: var(--space-5); font-size: var(--fs-base); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-1); }
.prose blockquote { padding-left: var(--space-4); border-left: 4px solid var(--color-border-strong); color: var(--color-text-muted); }

/* 표 — 표만 옆으로 밀린다(화면 전체 가로 스크롤 금지) */
.table-scroll {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.table-scroll__hint { margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-xs); }
@media (min-width: 640px) {
  .table-scroll__hint { display: none; }
}

.empty-note { padding-block: var(--space-6); color: var(--color-text-muted); text-align: center; }

/* 결과 화면(신청 완료·오류) */
.result-panel { padding-block: var(--space-8); text-align: center; }
.result-panel__mark {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  background: var(--color-tiger);
  color: var(--color-ink);
  border-radius: 50%;
}
.result-panel__mark .icon { width: 32px; height: 32px; stroke-width: 3; }
.result-panel__code {
  margin-bottom: var(--space-3);
  color: var(--color-border-strong);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.result-panel__title { font-size: var(--fs-2xl); }
.result-panel__reason { margin-top: var(--space-3); color: var(--color-navy); font-weight: 600; }
.result-panel__text { margin-top: var(--space-3); color: var(--color-text-muted); }
.result-panel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   8. 화면 블록 — 홈
   -------------------------------------------------------------------------- */

/* ① 대문. 사진 대신 로고. 아래 노란 줄은 로고의 원형 띠에서 왔다 */
.home-hero {
  padding-block: var(--space-6) var(--space-8);
  background: var(--color-ink);
  color: var(--color-text-on-ink);
  border-bottom: 6px solid var(--color-tiger);
}
.home-hero__inner { display: grid; gap: var(--space-5); align-items: center; }
.home-hero__mark { order: -1; }
.home-hero__logo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  /* 메달처럼 검정 틈 + 노란 테 한 줄 */
  box-shadow: 0 0 0 5px var(--color-ink), 0 0 0 7px var(--color-tiger);
}
.home-hero__title { display: flex; flex-direction: column; gap: var(--space-2); }
.home-hero__area { color: var(--color-tiger); font-size: var(--fs-lg); letter-spacing: -0.01em; }
.home-hero__brand {
  color: var(--color-text-on-ink);
  font-size: clamp(2.375rem, 10vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.home-hero__lead { max-width: 34em; margin-top: var(--space-4); color: var(--color-text-on-ink-muted); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.home-hero__actions .btn { flex: 1 1 100%; }
@media (min-width: 640px) {
  .home-hero__actions .btn { flex: 0 1 auto; }
}
@media (min-width: 1024px) {
  .home-hero { padding-block: var(--space-8) calc(var(--space-8) + var(--space-6)); }
  .home-hero__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); }
  .home-hero__mark { order: 0; padding-right: var(--space-6); }
  .home-hero__logo { width: 200px; height: 200px; box-shadow: 0 0 0 8px var(--color-ink), 0 0 0 11px var(--color-tiger); }
  .home-hero__area { font-size: var(--fs-xl); }
}

/* ② 오늘 확인 카드 — 대문 노란 줄 위로 살짝 얹는다 */
.home-facts { position: relative; margin-top: calc(-1 * var(--space-6)); }
.home-facts__card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(14, 14, 16, 0.06), 0 10px 28px rgba(14, 14, 16, 0.1);
}
.home-facts__title { margin-bottom: var(--space-4); font-size: var(--fs-lg); }
.home-facts__list { display: grid; gap: var(--space-4); }
.home-facts__item dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.home-facts__item dt .icon { color: var(--color-navy); }
.home-facts__item dd { margin-top: var(--space-1); font-weight: 600; }
.home-facts__note { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: 400; }
.home-facts__tel { font-size: var(--fs-lg); font-weight: 700; text-decoration: none; }
.home-facts__actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.home-facts__actions .btn { flex: 1 1 0; }
@media (min-width: 640px) {
  .home-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .home-facts { margin-top: calc(-1 * var(--space-8)); }
  .home-facts__card { padding: var(--space-6); }
  .home-facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .home-facts__item { padding-inline: var(--space-5); border-left: 1px solid var(--color-border); }
  .home-facts__item:first-child { padding-left: 0; border-left: 0; }
  .home-facts__actions .btn { flex: 0 1 auto; }
}

/* ③ 프로그램 카드 (홈·목록 공용) */
.program-list { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.program-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-ink);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s;
}
.program-card:hover { border-top-color: var(--color-tiger); border-color: var(--color-border-strong); }
.program-card__label { color: var(--color-navy); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.program-card__summary { color: var(--color-text-muted); }
.program-card__more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-navy); font-weight: 700; }
.program-card:hover .program-card__more { text-decoration: underline; }
@media (min-width: 1024px) {
  .program-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .program-list--page .program-card { padding: var(--space-6); }
}

/* ④ 시간표·수강료 두 판 — 검정 한 판, 남색 한 판 */
.home-guide { display: grid; gap: var(--space-3); }
.home-guide__tile {
  display: grid;
  align-content: space-between;
  gap: var(--space-3);
  min-height: 9.5rem;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  color: var(--color-text-on-ink);
  text-decoration: none;
}
.home-guide__tile--ink { background: var(--color-ink); }
.home-guide__tile--navy { background: var(--color-navy); }
.home-guide__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xl); font-weight: 700; }
.home-guide__label .icon { color: var(--color-tiger); }
.home-guide__detail { color: var(--color-text-on-ink-muted); }
.home-guide__go { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-tiger); font-weight: 700; }
.home-guide__tile:hover .home-guide__go { text-decoration: underline; }
@media (min-width: 640px) {
  .home-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

/* ⑦ 오시는 길 요약 */
.home-location { display: grid; gap: var(--space-5); }
.home-location .section__title { margin-bottom: var(--space-3); }
.home-location__address { font-size: var(--fs-lg); font-weight: 700; }
.home-location__sub { margin-top: var(--space-1); color: var(--color-text-muted); }
.home-location__actions { display: grid; gap: var(--space-3); }
@media (min-width: 640px) {
  .home-location__actions { display: flex; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .home-location { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* --------------------------------------------------------------------------
   9. 화면 블록 — 공지·사진
   -------------------------------------------------------------------------- */
.notice-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-ink); }
.notice-list__item { border-bottom: 1px solid var(--color-border); }
.notice-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-height: 56px;
  padding-block: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}
.notice-list__title { flex: 1 1 0; min-width: 0; font-weight: 600; }
.notice-list__date { flex-basis: 100%; color: var(--color-text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.notice-list__link:hover .notice-list__title { color: var(--color-navy); text-decoration: underline; }
@media (min-width: 640px) {
  .notice-list__date { flex-basis: auto; }
}

.notice-article { padding-block: var(--space-6) var(--space-8); }
.notice-article__head { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-ink); }
.notice-article__kicker { font-size: var(--fs-sm); font-weight: 600; }
.notice-article__title { margin-top: var(--space-2); font-size: var(--fs-2xl); }
.notice-article__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); }
.notice-article__back { margin-top: var(--space-7); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery-grid__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-border);
  border-radius: var(--radius-sm);
}
.gallery-grid__caption { margin-top: 6px; color: var(--color-text-muted); font-size: var(--fs-xs); line-height: 1.5; }
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}

/* 동영상 (고객 요청 2026-10-12). 휴대폰은 한 줄에 하나 — 재생기는 너무 작으면 단추를 누르기 어렵다.
   16:9 칸에 담고 세로 영상은 검은 여백 안에 그대로 보인다(object-fit: contain). */
.video-grid {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.video-grid__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--color-ink);
  border-radius: var(--radius-sm);
}
.video-grid__caption { margin-top: var(--space-2); font-weight: 700; line-height: var(--lh-tight); }
@media (min-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

/* 사진 ↔ 동영상 오가기 단추 */
.media-switch { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   10. 화면 블록 — 프로그램 상세
   -------------------------------------------------------------------------- */
.program-detail { display: grid; gap: var(--space-7); padding-block: var(--space-6) var(--space-7); }
.program-detail__block + .program-detail__block { margin-top: var(--space-6); }
.program-detail__title {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-ink);
  font-size: var(--fs-lg);
}
.program-detail__block > p { max-width: var(--measure); }
.program-detail__cta { margin-top: var(--space-7); }
.program-detail__aside-title { margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-base); }
.other-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.other-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
}
.other-list__link:hover { color: var(--color-navy); }
@media (min-width: 1024px) {
  .program-detail { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-8); padding-block: var(--space-7) var(--space-8); }
  .program-detail__aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start; }
}

/* 다른 화면으로 가는 줄 판 */
.link-tiles { display: grid; gap: var(--space-3); }
.link-tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
.link-tile:hover { border-color: var(--color-ink); }
.link-tile > .icon:first-child { width: 24px; height: 24px; color: var(--color-navy); }
.link-tile__text { display: grid; flex: 1 1 auto; min-width: 0; }
.link-tile__text span { color: var(--color-text-muted); font-size: var(--fs-sm); }
@media (min-width: 640px) {
  .link-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   11. 화면 블록 — 운영시간·수강료·오시는 길
   -------------------------------------------------------------------------- */
.hours-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 40rem;
  padding: var(--space-5);
  background: var(--color-ink);
  color: var(--color-text-on-ink);
  border-radius: var(--radius-md);
}
.hours-card > .icon { width: 32px; height: 32px; color: var(--color-tiger); }
.hours-card__value { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); }
.hours-card__source { margin-top: var(--space-2); color: var(--color-text-on-ink-muted); font-size: var(--fs-sm); }

.price-card {
  position: relative;
  display: grid;
  gap: var(--space-1);
  max-width: 28rem;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* 위 노란 띠 — 채움으로만 쓰는 노랑 */
.price-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--color-tiger); }
.price-card__name { color: var(--color-navy); font-size: var(--fs-xl); font-weight: 700; }
.price-card__terms { color: var(--color-text-muted); }
.price-card__amount { margin-top: var(--space-2); font-size: var(--fs-lg); font-weight: 600; }
.price-card__amount strong { margin-right: 2px; font-size: var(--fs-3xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-card__source { color: var(--color-text-muted); font-size: var(--fs-xs); }
.price-card .btn { justify-self: start; margin-top: var(--space-4); }

.location { display: grid; gap: var(--space-6); }
.location__here { margin-bottom: var(--space-4); font-size: var(--fs-lg); font-weight: 600; }
.location__road { display: block; }
.copy-btn { margin-top: var(--space-2); }
.map-card { padding: var(--space-5); background: var(--color-ink); color: var(--color-text-on-ink); border-radius: var(--radius-md); }
.map-card__title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--fs-lg); font-weight: 700; }
.map-card__title .icon { color: var(--color-tiger); }
.map-card__links { display: grid; gap: var(--space-3); }
.map-card .btn { justify-content: space-between; }
@media (min-width: 1024px) {
  .location { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); align-items: start; }
}

.way-list { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.way-list__item { display: flex; gap: var(--space-4); padding: var(--space-5); background: var(--color-bg); border-radius: var(--radius-md); }
.way-list__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  background: var(--color-ink);
  color: var(--color-tiger);
  border-radius: 50%;
}
.way-list__label { margin-bottom: 2px; font-weight: 700; }
@media (min-width: 1024px) {
  .way-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

/* 개인정보처리방침 */
.policy { padding-block: var(--space-6) var(--space-8); }
.policy h2 { font-size: var(--fs-lg); }

/* --------------------------------------------------------------------------
   12. 화면 블록 — 체험 신청
   폼이 DOM 앞에 온다(휴대폰에서 바로 적게). 넓은 화면에서만 다른 연락 방법을 왼쪽에 둔다.
   -------------------------------------------------------------------------- */
.trial {
  display: grid;
  grid-template-areas: "form" "aside";
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-8);
}
.trial__form-wrap { grid-area: form; min-width: 0; }
.trial__aside { grid-area: aside; }
.trial-form {
  position: relative;
  max-width: 40rem;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-ink);
  border-radius: var(--radius-md);
}
.trial-form__title { margin-bottom: var(--space-4); font-size: var(--fs-lg); }

.choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.choice { position: relative; display: block; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice__box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  height: 100%;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}
.choice input:checked + .choice__box { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-text-on-ink); }
.choice input:checked + .choice__box::before { content: "✓"; margin-right: 6px; color: var(--color-tiger); }
.choice input:focus-visible + .choice__box { outline: 3px solid var(--color-navy); outline-offset: 2px; }

.consent {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.consent__title { margin-bottom: var(--space-2); font-weight: 700; }
.consent__list { display: grid; gap: var(--space-1); margin-bottom: var(--space-2); }
.consent__list div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--space-2); }
.consent__list dt { color: var(--color-text-muted); }
.consent__note { color: var(--color-text-muted); font-size: var(--fs-xs); }
.consent__check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  margin-top: var(--space-3);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
}
.consent__check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--color-ink); }

.trial__aside-title { margin-bottom: var(--space-3); font-size: var(--fs-lg); }
.contact-list { display: grid; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.contact-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
.contact-list__link:hover { border-color: var(--color-ink); }
.contact-list__link > .icon { width: 24px; height: 24px; color: var(--color-navy); }
.contact-list__link strong { display: block; }
.trial__hours { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); }

@media (min-width: 640px) {
  .trial-form { padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .trial {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas: "aside form";
    gap: var(--space-7);
    align-items: start;
    padding-block: var(--space-7) var(--space-8);
  }
  .trial__aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* --------------------------------------------------------------------------
   2026-10-14 채운 내용 — 시간표·수강료·준비물(벤치마킹 더미. 고객 확인 후 숫자·글만 바꾼다)
   -------------------------------------------------------------------------- */
.timetable { width: 100%; min-width: 40rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.timetable th, .timetable td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: center; white-space: nowrap; }
.timetable thead th { background: var(--color-ink); color: var(--color-text-on-ink); font-weight: 700; }
.timetable tbody th { color: var(--color-navy); font-weight: 700; text-align: left; }
.timetable tbody tr:last-child th, .timetable tbody tr:last-child td { border-bottom: 0; }
.timetable-notes { max-width: var(--measure); margin-top: var(--space-5); padding-left: 1.2em; }
.timetable-notes li + li { margin-top: var(--space-2); }

.price-grid { display: grid; gap: var(--space-4); }
.price-grid .price-card { max-width: none; }
@media (min-width: 640px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.price-notes { max-width: var(--measure); margin-top: var(--space-5); padding-left: 1.2em; }
.price-notes li + li { margin-top: var(--space-2); }
.price-notes__source { max-width: var(--measure); margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); }

.bring-list { max-width: var(--measure); padding-left: 1.2em; }
.bring-list li + li { margin-top: var(--space-2); }
.bring-list--steps { padding-left: 1.4em; }
.trial-terms { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }