/* 매트 위 — site.css (docs/mockup/*.html 의 토큰·골격을 옮겼다, 2026-10-15)
   대비는 WCAG 2.x 상대휘도로 계산한 값이다(목업 home.html 이 처음 잰 값). 새 색을 만들면 다시 재서 여기 적는다.
   강조색(--mark, 사프란)은 '매트' 하나다: 홈은 큰 숫자 밑 띠, 자세 상세는 그림 밑 띠, 강좌 상세는 신청 버튼. 화면당 한 번.
   그래서 로고의 매트 그림은 ink 로 칠한다(사프란이면 화면마다 강조가 둘이 된다). 지도 화면엔 강조가 없다. */
:root {
  --ground: #F5F4F9;     /* 바탕(새벽 라일락 안개) */
  --surface: #FFFFFF;
  --ink: #25213B;        /* 본문. ground 14.12:1 · surface 15.45:1 */
  --dim: #5C5774;        /* 보조 글. ground 6.25:1 · surface 6.84:1 */
  --link: #3B2F8F;       /* 링크·포커스 링·유료 점. ground 9.65:1 · surface 10.56:1 */
  --mark: #F2A93B;       /* 매트(강조) 바탕 — 글자색 아님 */
  --on-mark: #25213B;    /* 매트 위 글자. 7.73:1 */
  --free: #0B6B5F;       /* '무료' 글자·지도 점. surface 6.40:1 · free-tint 위 5.54:1 */
  --free-tint: #E3F2EE;  /* 이 위의 ink 13.39:1 */
  --line: #C9C5D8;       /* 장식선 전용(글자에 쓰지 않음). surface 1.69:1 */
  --map: #E6E3EF;        /* 지도 바탕. 무료 점 5.06:1 · 유료(link) 점 8.34:1 · ink 12.21:1 (점은 비글자 3:1 기준) */
  color-scheme: light dark;

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리킨다(G:\workspace\DESIGN.md '토큰').
     실측(2026-10-16, WCAG 상대휘도): ink surface 15.45:1 · dim surface 6.84:1 / ground 6.25:1 ·
     accent 는 사프란(--mark)이 아니라 --link #3B2F8F — 폰 탭바의 현재 칸이 accent 를 '글자색'으로 쓰는데
     사프란은 글자로 2:1 남짓이라 못 쓴다. #3B2F8F 위 흰 글자 10.56:1 · surface 위 글자 10.56:1.
     사프란은 지금처럼 '매트' 한 번(큰 숫자·그림 밑 띠·신청 버튼)에만 남는다. */
  --fb-bg: var(--ground);
  --fb-surface: var(--surface);
  --fb-ink: var(--ink);
  --fb-muted: var(--dim);
  --fb-line: var(--line);
  --fb-accent: var(--link);
  --fb-on-accent: #FFFFFF;
  --fb-display: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --fb-max: 880px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #16141F;
    --surface: #201D2C;
    --ink: #ECEAF5;      /* ground 15.30:1 · surface 13.86:1 */
    --dim: #A9A4BF;      /* ground 7.58:1 · surface 6.87:1 */
    --link: #B7AEFF;     /* ground 9.11:1 · surface 8.25:1 */
    --mark: #F2B556;
    --on-mark: #1A1724;  /* 9.66:1 */
    --free: #6FD6C3;     /* surface 9.49:1 · free-tint 위 7.87:1 */
    --free-tint: #18322E;
    --line: #3A3550;
    --map: #2A2638;      /* 무료 점 8.43:1 · 유료 점 7.34:1 · ink 12.32:1 */
    --fb-on-accent: #16141F;  /* accent(--link #B7AEFF) 위 9.11:1 · accent 글자 surface 위 8.25:1 */
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }
h1, h2, .logo { font-family: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; line-height: 1.3; margin: 32px 0 8px; }
h2 { font-size: 1.25rem; line-height: 1.35; margin: 44px 0 8px; }
h3 { font-size: 1.0625rem; margin: 0 0 4px; }
p { margin: 0 0 12px; }
.dim { color: var(--dim); }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; }
.lede { font-size: 1.0625rem; }
.src { font-size: 0.875rem; color: var(--dim); margin: 8px 0 0; }

/* 머리 — 틀은 fb.css 의 .fb-nav(폰에서는 아래 탭바). 여기서는 로고의 매트 그림과 끝 칸 바꿔 끼우기만 */
.logo { gap: 8px; font-size: 1.25rem; font-weight: 700; }
.logo svg { width: 28px; height: 12px; border-radius: 0; }
.nav .nav-narrow { display: none; }
@media (max-width: 719px) {
  .nav .nav-wide { display: none; }
  .nav .nav-narrow { display: inline-flex; }
}

/* 배우기 2차 띠 — 글자 링크, 가로 스크롤 없이 줄바꿈 */
.band { margin-top: 8px; }
.band ul { list-style: none; margin: 0 auto; padding: 0 12px; max-width: 880px; display: flex; flex-wrap: wrap; gap: 0 4px; }
.band a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink); font-size: 0.9375rem; }
.band a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 2px; }

/* 홈 브리핑 — 큰 숫자는 이것 하나: '지금 신청할 수 있는' 강좌 수(손을 쓰는 숫자) */
.brief .fb-hero__h { font-size: clamp(28px, 5vw, 44px); }
.brief .matnum { margin-top: 8px; }
.brief .src { margin-top: 12px; }
.matnum { display: inline-flex; align-items: baseline; gap: 12px; background: var(--mark); color: var(--on-mark); border-radius: 999px; padding: 4px 28px 6px; }
.matnum b { font: 700 3.5rem/1.1 "Noto Serif KR", "Nanum Myeongjo", "Batang", serif; font-variant-numeric: tabular-nums; }
.matnum span { font-size: 1.0625rem; font-weight: 700; }
.brief .where { margin: 16px 0 0; }

.ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; }
.ghost:hover { background: var(--surface); }

/* 목록 줄 — 줄 전체가 링크(처음부터 만드는 화면이라 앵커가 줄을 깐다) */
.rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: 12px; }
.rows li + li { border-top: 1px solid var(--line); }
.rows a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 16px; min-height: 64px; color: var(--ink); text-decoration: none; }
.rows a:hover .t { text-decoration: underline; }
.rows .t { font-weight: 700; color: var(--link); }
.rows .m { grid-column: 1; font-size: 0.9375rem; color: var(--dim); display: flex; flex-wrap: wrap; gap: 0 12px; }
.rows .r { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 0.9375rem; }
.tag-free { display: inline-block; padding: 0 8px; border-radius: 4px; background: var(--free-tint); color: var(--free); font-size: 0.8125rem; font-weight: 700; }
.more-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; }
.empty { background: var(--surface); border-radius: 12px; padding: 16px; }
.empty p:last-child { margin: 0; }

/* 이번 주 자세 */
.pose-card { display: grid; grid-template-columns: 200px 1fr; gap: 16px 24px; align-items: center; background: var(--surface); border-radius: 12px; padding: 16px; position: relative; color: var(--ink); }
.pose-card h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.pose-card h3 a::after { content: ""; position: absolute; inset: 0; }
.pose-card p { margin: 0; }
.fig { display: block; width: 100%; height: auto; color: var(--ink); }

.styles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.styles a { display: block; min-height: 44px; padding: 12px 16px; background: var(--surface); border-radius: 8px; text-decoration: none; color: var(--ink); height: 100%; }
.styles a b { color: var(--link); }
.styles a:hover b { text-decoration: underline; }
.styles span { display: block; font-size: 0.875rem; color: var(--dim); }

/* 필터 — 상태는 주소(?status= ?free= ?level= ?kind=)에 둔다. 링크라 JS 없이 동작 */
.filters { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.seg a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--ink); text-decoration: none; }
.seg a + a { border-left: 1px solid var(--line); }
.seg a[aria-current="true"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--ink); }
.seg a:hover { text-decoration: underline; }
.chips { list-style: none; margin: 8px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
.chips a[aria-current="true"] { border-color: var(--ink); font-weight: 700; }
.chips a:hover { text-decoration: underline; }
.pager { display: flex; justify-content: center; gap: 16px; margin: 16px 0; }
.pager a, .pager span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

/* 지도 */
/* 🔥 isolation: Leaflet 판·컨트롤의 z-index(400~1000)를 지도 상자 안에 가둔다. 없으면 스크롤할 때 지도가
   떠 있는 내비(.fb-nav z-index 50)·폰 탭바(60) 위로 올라온다. */
.map { position: relative; z-index: 0; isolation: isolate; height: min(62vh, 560px); min-height: 360px; border-radius: 12px; overflow: hidden; background: var(--map); }
.map--mini { height: 220px; min-height: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; vertical-align: -1px; }
.leaflet-popup-content a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.leaflet-container a.leaflet-popup-close-button { width: 44px; height: 44px; font-size: 24px; line-height: 44px; }
.map.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }  /* leaflet.css 가 뒤에 오고 .leaflet-touch .leaflet-bar a(30px)와 겨룬다 — 클래스 셋으로 이긴다 */
.leaflet-control-attribution a { display: inline-block; min-height: 0; }

/* 강좌 상세 */
.crumb { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 16px; font-size: 0.9375rem; }
.crumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; }
.crumb + h1 { margin-top: 8px; }
.status { display: inline-block; padding: 2px 12px; border: 1px solid var(--ink); border-radius: 999px; font-size: 0.875rem; font-weight: 700; }
.head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.facts { margin: 0; background: var(--surface); border-radius: 12px; padding: 4px 16px; }
.facts div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; }
.facts div + div { border-top: 1px solid var(--line); }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; }
.facts dd a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }  /* 행 높이를 키우지 않고 탭 대상만 44px */
.apply { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 16px 0 8px; padding: 0 24px; border-radius: 999px; background: var(--mark); color: var(--on-mark); font-weight: 700; font-size: 1.0625rem; text-decoration: none; text-align: center; }
.apply:hover { text-decoration: underline; }
.out { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.out a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

/* 자세 */
.names { margin: 0 0 24px; color: var(--dim); }
.names i { font-style: normal; }
.stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.plate { margin: 0; background: var(--surface); border-radius: 16px; padding: 24px 24px 16px; color: var(--ink); }
.plate figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--dim); }
.facts-pill { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.facts-pill li { padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.875rem; background: var(--surface); }
ol.steps { margin: 0; padding-left: 24px; }
ol.steps li { margin-bottom: 8px; padding-left: 4px; }
ol.steps li::marker { font-weight: 700; font-variant-numeric: tabular-nums; }
.care { background: var(--surface); border-left: 4px solid var(--ink); border-radius: 0 12px 12px 0; padding: 12px 16px; }
.care ul { margin: 0; padding-left: 20px; }
.easier { background: var(--surface); border-radius: 12px; padding: 12px 16px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cards a { display: grid; gap: 4px; min-height: 44px; height: 100%; padding: 12px; background: var(--surface); border-radius: 12px; text-decoration: none; color: var(--ink); }
.cards a b { color: var(--link); }
.cards a:hover b { text-decoration: underline; }
.cards a span { font-size: 0.8125rem; color: var(--dim); }
.cards .fig { max-height: 96px; }
.disclaim { margin-top: 32px; font-size: 0.9375rem; color: var(--dim); }
.srcs { font-size: 0.875rem; color: var(--dim); padding-left: 20px; }
.srcs a { display: inline-block; padding: 12px 0; }

/* 글(배우기·소개·방침·약관) */
.prose { max-width: 680px; }
.prose h2 { font-size: 1.1875rem; margin-top: 36px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* 더보기 격자 — 제목 있는 두 묶음 */
.mgroup { font-size: 1rem; margin: 28px 0 8px; }
.mgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mgrid a { display: flex; align-items: center; min-height: 56px; padding: 8px 16px; background: var(--surface); border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 700; }
.mgrid a:hover { text-decoration: underline; }

/* 쿠팡 칸(기본 끔) — 대가성 문구는 제목 바로 아래 */
.cpn { margin: 32px 0; padding: 12px 16px; background: var(--surface); border-radius: 12px; }
.cpn__h { font-weight: 700; margin: 0 0 4px; }
.cpn__d { font-size: 0.8125rem; color: var(--dim); }
.cpn__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cpn__i { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; }
.cpn__a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.cpn__n { font-size: 0.875rem; margin: 0; }

/* 꼬리말 — 틀은 fb.css 의 .fb-foot. 제목은 h2 공통 serif·여백을 받지 않는다 */
.fb-foot__h { font-family: inherit; letter-spacing: .04em; }
.fb-cta__h { margin-top: 0; }

@media (max-width: 720px) {
  h1 { font-size: 1.5rem; }
  .matnum b { font-size: 2.75rem; }
  .pose-card { grid-template-columns: 1fr; }
  .pose-card .fig { max-width: 220px; }
  .styles { grid-template-columns: 1fr; }
  .rows a { grid-template-columns: 1fr; }
  .rows .r { grid-column: 1; grid-row: auto; text-align: left; }
  .layout { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 80px 1fr; }
  .stage { grid-template-columns: 1fr; }
  .plate { padding: 16px 16px 12px; }
  .cards { grid-template-columns: 1fr; }
  .cards a { grid-template-columns: 96px 1fr; align-items: center; }
  .cards a .fig { grid-row: 1 / span 2; }
  .map { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }