@charset "utf-8";
/* 킨더나무(옛 (주)동심 중부파트너) — 공용 스타일 1장
 * 스킬: sky-clean-paper-saas (warm paper + 하늘색 시그널 + 라운드 서피스)
 * 보조: beautiful-shadows(웜 틴트 그림자) / animation-on-scroll(리빌)
 * 수치 근거: wjthinkbig.com DOM 실측 2026-07-29
 *   - 썸네일 1:1 / radius 12px / 플레이스홀더 #F8F9FA
 *   - 카드 그리드 gap 24px, 카드 내부 gap 20px
 *   - 드롭다운 h58 / radius 8 / 옵션 padding 14px 20px / transition .275~.375s ease-in-out
 * 색 규율(2026-09-09 리브랜딩): 의뢰인 지정 하늘색 #89CFF0은 흰 글자 대비 1.71 = AA 실패.
 *   → **채움 전용**(버튼 배경·칩·배지·강조 배경). 그 위 글자는 반드시 --ink(대비 10.20).
 *   레퍼 울림교육이 노랑 #FFC629 바탕 + 먹색 글자로 버튼을 만드는 구조와 같다.
 *   글자·링크·아이콘·포커스링은 --brand-deep(#1B6F9E — 흰 바탕 5.51 / paper 5.09 / tint 5.00 = AA 통과).
 */

:root {
  --paper: #f7f6f3;
  --white: #fff;
  --tint: #e9f6fd;
  --tint-soft: #f4fbfe;
  --ink: #1c1917;
  --sub: #57534e;
  --muted: #736c67;
  --brand: #89cff0;
  --brand-deep: #1b6f9e;
  --brand-lit: #b9e3f8;
  --line: #e7e2da;
  --line-soft: #f0ece5;
  --ph: #f8f9fa;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  --gap: 24px;
  --max: 1160px;

  /* beautiful-shadows: 중립 검정 대신 웜 브라운을 깔아 페이퍼 톤과 붙인다 */
  --sh-1: 0 1px 2px rgba(87, 60, 35, .05), 0 1px 3px rgba(87, 60, 35, .06);
  --sh-2: 0 2px 4px rgba(87, 60, 35, .05), 0 8px 20px rgba(87, 60, 35, .08);
  --sh-3: 0 4px 8px rgba(87, 60, 35, .06), 0 16px 40px rgba(87, 60, 35, .11);
  --sh-brand: 0 6px 20px rgba(27, 111, 158, .22);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .2s var(--ease);
  --t: .275s ease-in-out;
  --t-slow: .375s ease-in-out;

  /* 레퍼(울림교육) 실측 이식 2026-09-09 — 12-레퍼런스-울림교육-실측.md §9-1.
     레퍼의 깊이는 그림자가 아니라 **2px 먹색 테두리**다(계측: 전 카드 shadow "none",
     hover 때만 --shadow-sm). 그 두께를 한 곳에서 쥔다. */
  --bw: 2px;
  /* 브랜드색 면(헤더 띠·phero·히어로·푸터) 위에 얹는 본문색. 레퍼의 `#4a4220`(노랑에 먹을
     섞은 톤)에 대응하는 하늘색 판 — #89CFF0 바탕 대비 7.19:1 로 AA 통과한다.
     --sub(#57534e)를 그대로 쓰면 4.2:1 로 본문 기준에 걸린다. */
  --ink-on-brand: #17384a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* 끝의 컬러 이모지 3종은 **폴백**이다 — 본문 이모지(회사소개 h1 🏫 · FAQ 💬 · `.f span`)가
     Pretendard 에도 system-ui 에도 없어서, 이모지 폰트를 명시하지 않은 환경(스크린샷용 헤드리스
     크로뮴·일부 리눅스)에서 두부(□)로 떨어진다. 플랫폼마다 이름이 달라 셋을 다 적는다. */
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: 16px;
  /* 1.65 였다. 레퍼 실측 `body{line-height:1.55}` — 본문 굵기를 600 으로 올리면서 행간을
     같이 조이지 않으면 글줄이 떠서 문단이 목록처럼 읽힌다(실측 §0-3 타이포 본문 p). */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

/* 페이지 상단 하늘빛 라디얼 — sky-clean-paper-saas의 "softer radial page background" */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 620px;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(137, 207, 240, .16), transparent 70%),
    radial-gradient(700px 380px at 88% -6%, rgba(27, 111, 158, .07), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--brand-deep); }

/* 타이포 스케일 = 레퍼 390 실측(실측 §0-3). 굵기가 위계를 잡는 판이라 700/800 을 전부
   **900** 으로 올리고 제목 행간을 1.28 → 1.05 로 조인다. 크기보다 굵기·행간이 인상을 바꾼다.
   h1 32/800 → clamp(30,5vw,52)/900 · h2 24/700 → clamp(26,4vw,42)/900 · h3 20/700 → 19/900. */
h1, h2, h3, h4 { margin: 0; line-height: 1.05; letter-spacing: -.02em; }
h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 900; letter-spacing: -.03em; }
h2 { font-size: clamp(26px, 4vw, 42px); font-weight: 900; letter-spacing: -.03em; }
/* h3·h4 는 1.05 로 조이면 두 줄 제목의 글자가 서로 붙는다(카드 제목이 대부분 두 줄이다) —
   큰 제목만 조이고 소제목은 읽는 행간을 남긴다. 레퍼 실측도 h3 lh 29.45/19 = 1.55 다. */
h3, h4 { line-height: 1.5; }
h3 { font-size: 19px; font-weight: 900; }
p { margin: 0; }
/* 본문 weight 400 → 600(실측 §0-3). 문단·답변에만 준다 — 표·메타까지 올리면 굵기로 잡는
   위계가 통째로 무너진다. */
.qa p, .post p, .sec-h p { font-weight: 600; }

.wrap { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { position: relative; z-index: 1; }

/* ── 헤더 ───────────────────────────────────────────── */
/* 반투명 페이퍼 + blur 띠였다. 레퍼(울림교육)는 헤더가 **브랜드색 채움 + 2px 먹색 밑줄**이고
   그것이 전 페이지 첫 화면의 인상을 통째로 만든다(실측 §0-3 sticky 헤더 · §9-2).
   blur 를 걷는 이유는 취향이 아니라 규격이다 — 색면 위에 blur 를 걸면 스크롤 위치에 따라
   띠 색이 변해 아래 `.phero` 색면과 이가 안 맞는다. */
.gnb {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand);
  border-bottom: var(--bw) solid var(--ink);
}
.gnb .in {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 20px;
}
/* 글자 로고 18/800 → 21/900(실측 §0-3 브랜드 로고). 이미지 마크는 오너 확정으로 없다. */
.gnb .brand { font-weight: 900; font-size: 21px; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 7px; }
.gnb .brand a { color: var(--ink); text-decoration: none; }
/* 로고 이미지가 들어오면 글자 로고 자리를 그대로 차지한다(생성기 `logoMark()` · 2026-09-11).
   높이만 `height="32"` 로 박고 **폭은 파일 비율에 맡긴다** — 가로로 긴 로고가 눌리지 않게. */
.gnb .brand-logo { display: block; width: auto; height: 32px; }
/* 로마자 병기 — 레퍼 `.brand span`(11/800 ls .06em) 규격. 한글 이름 옆에 작게 붙어
   같은 줄의 두 번째 목소리가 된다. 브랜드색 면 위라 색은 --ink-on-brand. */
.brand-en { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink-on-brand); }
.gnb nav { margin-left: auto; display: flex; gap: 4px; }
.gnb nav a {
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 800;
  padding: 9px 14px; border-radius: 999px; transition: var(--t-fast);
}
.gnb nav a:hover { color: var(--ink); background: var(--brand-lit); }
/* 실측 §9-2 는 현재 위치를 `--brand-deep` **글자**로 적었다. 하늘색 띠 위 #1B6F9E 는 3.21:1 —
   15px/800 은 WCAG 대형 글자(18.66px 굵게)가 아니라 4.5 가 필요하다. 레퍼 자신의 어휘 중
   대비가 서는 것으로 바꾼다: `.sec-h .more` 의 **2px 먹색 밑줄**(10.20:1).
   먹색 채움 pill(`.res-tab.on` 결)도 후보였지만 "홈" 처럼 한 글자짜리 메뉴가 동그라미가 된다. */
.gnb nav a[aria-current] { border-radius: 0; border-bottom: var(--bw) solid var(--ink); padding-bottom: 7px; }
/* 글자 버튼("메뉴")이었다. 레퍼는 3줄 아이콘이다(실측 §0-3 햄버거) — 아이콘으로 바꾸되
   누르는 면 44px 은 그대로 지킨다(레퍼는 24×15 라 그 규격이 없다). */
.gnb .burger {
  display: none; margin-left: auto; width: 44px; height: 44px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 0; color: var(--ink); cursor: pointer;
  font: inherit; letter-spacing: -.02em;
  /* 3줄 막대를 **배경으로** 그린다 — 마크업(`<button class="burger">메뉴</button>`)은 S2 소유라
     span 3개를 넣을 수 없고, ::before/::after 로는 막대가 두 개뿐이다. 24×3 막대 셋을 8px 간격
     (막대 3 + 틈 5 = 레퍼 `gap:5px`)으로 얹는다. 글자 "메뉴"는 접되 DOM 에 남긴다 —
     그게 이 버튼의 접근성 이름이다(aria-label 이 따로 없다). */
  font-size: 0;
  background:
    linear-gradient(var(--ink), var(--ink)) 50% calc(50% - 8px) / 24px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50% 50%             / 24px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50% calc(50% + 8px) / 24px 3px no-repeat;
}

/* ── 히어로 ─────────────────────────────────────────── */
/* 사진 3화면 슬라이드(`.heroart`/`.heroslide`/`.heroctl`)와 바로가기 타일(`.quicknav`)은
   2026-09-09 리브랜딩에서 마크업째 사라졌다 — 홈 히어로가 레퍼 색면 한 칸(`.hero-panel`)이
   되고 바로가기는 그 안 pill 4개(`.shopbtns`)가 됐다. 렌더되지 않는 규칙은 남기지 않는다.
   `.hero` 는 이제 **색면 + 그 아래 검색 한 줄**을 묶는 껍데기일 뿐이라 여백만 갖는다. */
.hero { padding: 0 0 clamp(28px, 4vw, 44px); }
.hero > .wrap { margin-top: 22px; }

/* ── 버튼 ───────────────────────────────────────────── */
/* 사각 pill(r8 · h52 · 700 · 1px 투명 테두리 · 상시 그림자)이었다. 레퍼는 전부
   **완전 pill(r999) + 800 + 2px 먹색 테두리**이고 그림자는 hover 때만 뜬다(실측 §0-3 버튼 pill).
   높이를 px 로 묶지 않고 패딩으로 세우는 것도 레퍼 규격이다 — 글자가 커지면 버튼이 같이 큰다. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer;
  border: var(--bw) solid var(--ink); transition: var(--t-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
/* 먹색 채움 + 브랜드색 글자(10.23:1). 레퍼의 "확정 행동" 조합(`.booknow`·`.evt-cta`·`.res-item .dl`)이다.
   하늘색 채움 + 흰 글자는 1.71 이라 애초에 불가능하고, 하늘색 채움 + 먹색 글자는
   `.btn-ghost` 의 hover 반전과 겹쳐 두 버튼이 같은 색으로 붙는다. */
.btn-primary { background: var(--ink); color: var(--brand); }
.btn-primary:hover { background: #000; color: var(--brand); }
/* 흰 카드형이었다. 레퍼 `.btn.line` 은 투명 + 먹색이고 hover 에서 **반전**한다(색만 바뀌지 않는다). */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--brand); }
/* 신설 — 페이지 히어로(`.phero`) 오른쪽에 서는 한 칸짜리 CTA. 레퍼 실측 h64.
   ⚠ 색을 반드시 여기서 정한다. 크기만 주면 `<a class="btn big">` 은 `a` 상속색(--brand-deep)을
   그대로 쓰고, 이 버튼이 서는 자리는 하늘색 `.phero` 면이라 대비가 3.21:1 로 떨어진다(AA 미달).
   `<button class="btn big">`(교육행사)은 아예 UA 기본 회색 버튼으로 뜬다 — 같은 자리에
   두 가지 버튼이 산다. 레퍼 `.btn.big` 규격 그대로 **먹색 채움 + 브랜드색 글자**(10.20:1)로 못 박아
   `a` 든 `button` 이든 같은 것이 되게 한다. */
.btn.big { font-size: 17px; padding: 17px 34px; background: var(--ink); color: var(--brand); border-color: var(--ink); }
.btn.big:hover { background: #000; color: var(--brand); }
/* 신설 — 자료·행사 줄의 작은 pill. 레퍼는 13/800 · 8px 14px · h40 이다.
   **h40 은 우리 모바일 게이트(탭타겟 44px)를 통과하지 못한다** — 폭·글자·테두리는 그대로 두고
   최소 높이만 44 로 올린다(레퍼 40 → 우리 44, 실측과 다른 유일한 수치). */
.btn.pill-sm, .pp-links a, .pp-links button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: var(--bw) solid var(--ink); background: var(--white); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: var(--t-fast);
}
.btn.pill-sm:hover, .pp-links a:hover, .pp-links button:hover { background: var(--ink); color: var(--brand); transform: none; box-shadow: none; }
/* 레퍼 `.vid`(영상 pill · 주황 채움)에 대응하는 규칙은 두지 않는다 — 22종 전부 영상이 아직
   `준비 중`이라 마크업에 `.vid` 가 한 번도 나오지 않는다. 영상이 들어오는 날 스펙 §7-2 대로
   `background:var(--brand-deep);color:#fff`(5.44:1)로 되살린다. */
/* 준비 중 — 레퍼는 opacity .55 로만 흐린다. 우리는 회색화 + "준비 중" 글자를 이미 갖고 있고
   그쪽이 명시적이라 유지한다(실측 §4 판정). 껍데기만 pill 로 맞춘다. */
.pill-sm.soon, .pp-links .soon {
  background: var(--paper); border-color: var(--line); color: var(--muted); cursor: not-allowed;
}
.pill-sm.soon:hover, .pp-links .soon:hover { background: var(--paper); border-color: var(--line); color: var(--muted); transform: none; }
/* 포커스링은 **불투명**이다. 반투명(.55)이면 실제 대비는 바탕색에 따라 굴러다닌다 —
   하늘색 `.phero`·브랜드색 푸터 위에서 2:1 아래로 떨어졌다. `--brand-deep` 원색은
   흰 5.51 · paper 5.09 · tint 5.00 · brand(#89cff0) 3.21 · ink(#1c1917 `.story` 띠) 3.18 —
   이 사이트가 쓰는 모든 바탕에서 3:1 을 넘는다(WCAG 2.2 비텍스트 대비 1.4.11). */
.btn:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand-deep); outline-offset: 2px;
}

/* 자료 버튼(상세 히어로) — 상담 요청과 **같은 줄**이다(2026-09-05 업체 요청 ⑤ "상담요청 옆").
   8-31 판은 상담 아래에 "자료" 라벨을 단 별도 줄(`.matlinks`)이었는데, 요청이 "옆"이라고
   못 박았고 실제로도 한 줄이 맞다 — 브로슈어·영상은 상담을 정하기 **전에** 보는 것이다.
   준비 중인 것은 누를 수 없지만 **자리는 보인다** — 자료가 오면 그 자리에 그대로 들어간다. */
/* 상세 버튼 줄은 이제 `.acts.pp-links`(pill-sm) 다 — `.hero .acts` 예외와 `.acts .soon` 은
   `.pp-links` 규칙이 그대로 대신한다. 죽은 예외는 지운다. */
.soon em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); opacity: .85; }

/* ── 영역 탭 바 (목록 상단 상위 카테고리) ───────────
   가로 스크롤 한 줄이었다. 레퍼 `.filters` 는 **줄바꿈 + 가운데 정렬**이다(실측 295행:
   `display:flex;gap:8px;justify-content:center;flex-wrap:wrap`) — 스크롤 축이 하나 줄고,
   화면 밖으로 밀린 칸이 없어 폰에서 12칸이 전부 한눈에 보인다. 그대로 따른다. */
.domtabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-bottom: 14px;
}
/* 레퍼 `.filters button`·`.res-tab` 과 같은 pill 계열이라 규격만 맞춘다(실측 §8 영역 탭 바):
   테두리 1→2px · weight 600→800 · 활성은 `--brand-deep` 채움이 아니라 **먹색 채움 + 브랜드색 글자**.
   `min-height:44px` 는 손가락 규격이라 그대로 둔다. */
.domtab {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: var(--bw) solid var(--line); background: var(--white); color: var(--sub);
  font: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap; transition: var(--t-fast);
}
.domtab:hover { border-color: var(--ink); color: var(--ink); }
.domtab[aria-pressed='true'] {
  background: var(--ink); border-color: var(--ink); color: var(--brand);
}

/* ── 검색 바 (웅진 select_mate 구조 이식) ────────────── */
.fsearch {
  background: var(--white);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
}
.fsearch .fields { display: flex; gap: 10px; flex: 1 1 auto; flex-wrap: nowrap; }

.sel { position: relative; flex: 1 1 170px; min-width: 150px; }
.sel > select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.sel .selbtn {
  width: 100%; height: 58px; padding: 0 44px 0 18px;
  background: var(--white); border: var(--bw) solid var(--ink); border-radius: 10px;
  font: inherit; font-size: 16px; color: var(--muted); text-align: left;
  cursor: pointer; transition: var(--t-slow);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sel .selbtn[data-picked='true'] { color: var(--ink); font-weight: 600; border-color: var(--brand); }
.sel .selbtn:hover { border-color: var(--brand); }
.sel[data-open='true'] .selbtn { border-color: var(--brand-deep); box-shadow: 0 0 0 3px rgba(137, 207, 240, .45); }
.sel .arrow {
  position: absolute; right: 16px; top: 50%; width: 16px; height: 16px;
  margin-top: -8px; pointer-events: none; transition: transform var(--t);
  color: var(--muted);
}
.sel[data-open='true'] .arrow { transform: rotate(180deg); color: var(--brand-deep); }
.sel .opts {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sh-3); list-style: none; margin: 0; padding: 6px;
  max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  /* max-height 는 전환에서 뺀다 — 레이아웃 프로퍼티 애니메이션은 프레임마다 리플로를 만든다(D13 layout-transition).
     열림 감각(.375s)은 도너 계승값 그대로 transform 이 낸다. */
  transition: opacity var(--t), visibility var(--t), transform var(--t-slow);
}
.sel[data-open='true'] .opts { max-height: 296px; overflow-y: auto; opacity: 1; visibility: visible; transform: none; }
.sel .opts li {
  padding: 14px 20px; border-radius: 6px; font-size: 16px; color: var(--sub);
  cursor: pointer; transition: var(--t);
}
.sel .opts li:hover { background: var(--tint-soft); color: var(--ink); }
.sel .opts li[aria-selected='true'] { background: var(--tint); color: var(--brand-deep); font-weight: 600; }
/* 그라디언트 원이었다. 레퍼 검색 버튼은 **먹색 채움 + 브랜드색 아이콘**이다(실측 §8 2축 드롭다운) —
   그라디언트는 이 판(2px 테두리 + 평면 색)에서 혼자 튄다. */
.fsearch .go {
  width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%;
  border: var(--bw) solid var(--ink); background: var(--ink);
  color: var(--brand); cursor: pointer; display: grid; place-items: center;
  transition: var(--t-fast);
}
.fsearch .go:hover { transform: scale(1.05) rotate(-4deg); }

/* ── 영역 인덱스 (웅진 quickImgwrap 40×40 + 라벨) ───────── */
/* 영역 인덱스 — 40px 라인 아이콘 12칸이었다. 모티프가 겹쳐 구분이 안 되고 템플릿 티만 났다.
   지금은 그 영역 대표 프로그램의 실제 키비주얼을 깔고 이름을 얹는다. */
/* `.row-scroll` 과 같이 걸린다 — 폭·간격·스냅은 `.row-scroll` 이 쥐고 여기서는 타일 안쪽만 쓴다. */
.domains a {
  text-decoration: none; color: var(--ink); border-radius: var(--r); overflow: hidden;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1);
  display: grid; transition: var(--t-fast);
}
.domains a:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: var(--brand); }
/* `height: auto` 를 반드시 같이 준다 — <img height> 속성이 presentational hint 로 살아 있어서
   width 만 CSS로 잡으면 높이는 속성값(675px)이 그대로 쓰이고 aspect-ratio 가 무시된다. */
.domains a img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--paper); align-self: start; }
.domains a b { font-size: 15px; font-weight: 700; letter-spacing: -.024em; padding: 12px 14px 0; }
.domains a span {
  font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: -.02em;
  padding: 3px 14px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── 섹션 헤더 ──────────────────────────────────────── */
/* 세로 여백은 레퍼가 **80px 고정**이다 — 폰에서도 줄이지 않는다(실측 §0-3 `.sec` 리듬).
   clamp(52…92) 는 390 에서 52 라 섹션끼리 붙어 한 덩어리로 읽혔다. */
.sec { padding: 80px 0; }
/* 섹션 하나 걸러 하나 배경을 바꾸는 유틸(레퍼는 흰↔#FFFBEF↔노랑 3색 교차). 우리는 페이퍼 위라
   틴트 한 단계만 준다 — 색을 두 단계 넣으면 카드 흰면과 구분이 사라진다. */
.sec.alt { background: var(--tint-soft); }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.sec-h p { margin-top: 10px; color: var(--sub); max-width: 56ch; }
.sec-h .right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* hover 때만 밑줄이던 `.seclink` 였다. 레퍼 `.more` 는 **상시 2px 먹색 밑줄**이라 그 자체가
   작은 버튼처럼 선다. 이름도 마크업을 따라 `.more` 로 갈렸다. */
.sec-h .more {
  font-size: 15px; font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap;
  border-bottom: var(--bw) solid var(--ink); padding-bottom: 2px;
}
.sec-h .more:hover { color: var(--brand-deep); border-bottom-color: var(--brand-deep); }
/* 가로 스냅 캐러셀 안내 — 레퍼는 화살표 버튼을 만들지 않고 글자 한 줄로 알린다(실측 §1). */
.scrollhint { font-size: 13px; font-weight: 700; color: var(--sub); }

/* ── 카드 그리드 ────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
/* 12열 중 실제로 쓰이는 두 칸만 남긴다(회사소개·상담문의의 8 : 4 분할). */
.span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; }

/* 카드 = 웅진 `.listGridBoxWrap` 실측 이식 (2026-07-31 재실측)
 *   데스크톱 264×467 / 모바일 169×343 · 카드 내부 gap 20(모바일 12) · 썸네일 1:1 radius 12
 *   라벨 12px/500 · 제목 18px/600 · 설명 14px **2줄 clamp** · 해시 13px/500
 *   레퍼 카드에는 버튼이 없다 — 면 전체가 링크다. */
/* 테두리 1px + **상시** 그림자였다. 레퍼의 깊이는 그림자가 아니라 2px 테두리이고, 그림자는
   hover 때만 뜬다(실측 §0-3 그림자 규칙 · §9-1·§9-7). 상시 그림자를 걷으면 카드가 종이 위에
   놓인 스티커가 아니라 종이에 그은 칸이 된다 — 그게 레퍼의 인상이다. */
.card {
  background: var(--white); border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: var(--t-fast);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--brand-deep); }
.cardlink { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
/* 썸네일은 16:9 — 원천 키비주얼(공급 브랜드가 만든 슬라이드)이 가로형이라 1:1로 자르면 카피가 잘린다.
   `contain` 으로 얹고 남는 자리는 종이 톤으로 채운다(잘린 글자보다 여백이 낫다). */
/* 썸네일 16:9 · 2줄 설명 · 해시 줄은 목록이 레퍼 `.pcard`(56px 아이콘 + 제목 + 한 줄)로
   바뀌면서 마크업에서 통째로 빠졌다 — `.thumb`/`.body`/`.cat`/`.benefit`/`.hash` 규칙을 지운다.
   `.card` 자체는 남는다: app.js 필터가 `.card` 로 카드를 잡고(app.js 75) `[hidden]` 도 여기 걸린다. */
.card .badge {
  position: absolute; left: 10px; top: 10px; font-style: normal;
  font-size: 11px; font-weight: 700; letter-spacing: -.02em;
  padding: 4px 9px; border-radius: 999px; background: var(--brand-deep); color: var(--white);
}
.card[hidden] { display: none; }

/* ── 사실 목록(하는 일 · 프로그램 요점) ───────────────
   흰 카드 3장을 나란히 놓는 판이었다. 둥근 모서리·그림자·같은 패딩의 카드 3장은
   어느 생성형 템플릿에나 있는 모양이라 그 자체가 AI티다(오너 지적 2026-08-07).
   카드를 걷고 편집 기호만 남긴다: 위 헤어라인 + 브랜드색 번호 + 제목 + 본문.
   번호는 순서가 실재할 때만 의미가 있으므로 `.facts.plain`은 번호를 지운다. */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.4vw, 34px); }
.tri article {
  border-top: 2px solid var(--ink); padding-top: 16px;
}
.tri .stepn {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--brand-deep); margin-bottom: 6px;
}
.tri :is(h2, h3) { font-size: 18px; margin-bottom: 8px; letter-spacing: -.03em; }
/* 상세의 `이 프로그램이 하는 일`은 1열이라 카드가 span-8 폭을 통째로 먹는다 —
   상한이 없으면 1440에서 한 줄 92자가 된다(D13 line-length). */
.tri p { font-size: 14.8px; color: var(--sub); line-height: 1.66; max-width: 62ch; }

/* 표지 카드(`.doccard`)는 자료실이 레퍼 `.res-item` 줄 목록으로 바뀌면서 마크업에서 빠졌다 — 규칙도 지웠다.
   ⚠ 자료 **보기 화면**(`pageDocView()`)은 그대로 산다. 원장이 관리 화면에서 파일을 올리면
   (`fileUrl`) 그 라우트가 생기고 아래 네 규칙이 다시 쓰인다 — 지금 커밋된 자료 6종이 전부
   드라이브 링크라 매치가 0일 뿐이다. 규칙을 지우면 그날 iframe 높이가 0이 되어 화면이 빈다.
   `--r-md` 토큰은 리브랜딩에서 `--r` 로 합쳐졌다. */
/* 뷰어 높이를 vh 로 잡는 이유: 자료마다 쪽수가 달라 고정 px 은 한쪽에서 반드시 어긋난다 —
   폰에서는 우표만 하고 PC 에서는 여백만 남는다. 82vh 는 헤더와 위 버튼 줄을 뺀 나머지다.
   못 펴는 뷰어가 있어도 화면이 무너지지 않도록 배경과 테두리는 박스가 갖는다. */
.pdfbox {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--paper); box-shadow: var(--sh-1);
}
.pdfbox iframe { display: block; width: 100%; height: 82vh; min-height: 420px; border: 0; }
/* PDF 뷰어가 없는 브라우저에서 상자를 대신하는 한 줄(app.js 가 갈아 끼운다). */
.pdfoff {
  padding: 26px 22px; text-align: center; font-size: 14.5px; font-weight: 500; line-height: 1.6;
  color: var(--sub); background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r);
}
/* 버튼 줄은 뷰어 **위**에 둔다 — 뷰어가 비는 기기에서 아래에 있으면 빈 사각형만 보고 나간다. */
.docact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.doctoc { margin-top: 26px; padding: 22px; background: var(--paper); border-radius: var(--r); border: 1px solid var(--line-soft); }
.doctoc h2 { font-size: 17px; font-weight: 700; letter-spacing: -.028em; }
.doctoc ul { margin-top: 12px; display: grid; gap: 8px; padding-left: 18px; }
.doctoc li { font-size: 14.5px; font-weight: 500; color: var(--sub); line-height: 1.55; }

/* ── 교육행사 ───────────────────────────────────────── */
.poster {
  border: var(--bw) solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--paper); transition: var(--t-fast);
}
.poster:hover { border-color: var(--brand-deep); }
.poster img { width: 100%; height: auto; display: block; }
/* 카드 머리(카테고리 칩 + 행사명)는 이제 `.ev .top` 이다 — `figcaption` 은 마크업에 없다. */
.poster a:hover img { opacity: .92; }
.poster a { display: block; cursor: zoom-in; }

/* 포스터 확대판(.lb) — `<dialog>`를 쓰는 이유: 상위 레이어라 `.wrap`의 z-index·overflow를 타지
   않고, Esc 닫기·배경 비활성·포커스 가둠을 브라우저가 그냥 준다. 배경은 잉크 톤으로만 덮는다
   (글로우·후광 금지, 디자인-공통코어 §3). 이미지 바깥 여백을 눌러도 닫히므로 ✕는 보조 출구다. */
.lb {
  /* width/height 는 UA 기본값(fit-content)을 지킨다 — `auto` 로 덮으면 `inset:0` 탓에 가로가
     92vw 로 늘어나고, 과제약된 `margin:auto` 가 0으로 풀려 이미지가 왼쪽에 붙는다. */
  width: fit-content; height: fit-content; max-width: 92vw; max-height: 92vh;
  padding: 0; border: 0; overflow: visible;
  background: transparent; box-shadow: var(--sh-3);
}
.lb::backdrop { background: rgba(28, 25, 23, .78); }
.lb img { width: auto; height: auto; max-width: 92vw; max-height: 92vh; border-radius: var(--r); }
.lbx {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  background: rgba(28, 25, 23, .86); color: var(--white); cursor: pointer;
  transition: background var(--t-fast);
}
.lbx:hover, .lbx:focus-visible { background: var(--ink); }
.lbx svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .lb, .lb img { max-width: 96vw; max-height: 88vh; }
}
@keyframes lbpop { from { opacity: 0; transform: scale(.965); } }
.lb[open] { animation: lbpop .22s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .lb[open] { animation: none; }
}

/* 대표 프로그램·공급 브랜드 판은 히어로 2·3화면으로 올라갔다(2026-08-07). 여기 있던
   `.feature`·`.partners` 규칙은 렌더되는 마크업이 없어져 같이 지운다 — 죽은 CSS는 남기지 않는다. */

/* ── 상세 키비주얼 ─────────────────────────────────── */
/* 레퍼 `.pprog .pp-media` 규격(2px 먹색 · r14 · 여백 배경 #f6f4ef ≈ 우리 --paper) — 실측 §4. */
.keyshot {
  border: var(--bw) solid var(--ink); border-radius: 14px; overflow: hidden;
  background: var(--paper);
}
.keyshot img { width: 100%; height: auto; display: block; }

/* ── 브로슈어 페이저(.bviewer) ───────────────────────
   자료가 있는 프로그램은 오른쪽 단이 키비주얼 한 장이 아니라 **넘겨 보는 브로슈어**다
   (2026-09-05 의뢰 ④ · 참고 화면은 동심 본사 e북).

   무대 높이를 `70vh` 로 묶는 이유는 판형이다 — 받은 16종이 가로형 5(780×540 · 960×540 · 1446×836)
   세로·정방 11(595×765 ~ 794×794)로 섞여 있다. 비율을 고정하면 한쪽이 반드시 잘리고,
   `height:auto` 로 풀면 세로 브로슈어가 화면 두 개 높이로 서서 다음 쪽 버튼이 안 보인다.
   높이를 묶고 `contain` 으로 넣으면 가로든 세로든 같은 자리에 앉고, 넘길 때 페이지가 안 튄다.

   쪽은 전부 마크업에 있고 한 장만 보인다 — JS 가 죽어도 표지는 뜬다. */
.bviewer {
  border: var(--bw) solid var(--ink); border-radius: 14px; overflow: hidden;
  background: var(--paper);
}
.bvstage {
  display: grid; place-items: center; padding: 12px;
  min-height: 220px; max-height: 70vh;
  /* `pan-y` 가 없으면 가로로 미는 손짓을 브라우저가 **스크롤로 먼저 가져간다** —
     그 순간 `pointerup` 대신 `pointercancel` 이 오고 넘김이 통째로 죽는다(390 실측).
     세로 스크롤은 그대로 남긴다: 브로슈어를 보다 페이지를 내리는 동작을 뺏으면 안 된다. */
  touch-action: pan-y;
}
/* 겹쳐 두지 않고 한 칸에 한 장만 넣는다 — 절대배치로 겹치면 컨테이너가 높이를 잃어
   쪽마다 판형이 다를 때 상자가 최대 높이로 굳는다(가로 브로슈어 밑에 흰 여백 200px). */
/* `height:auto` 가 없으면 `<img height="900">` 속성이 CSS 높이로 작용해 상자가 70vh 세로로 서고,
   그 안에 가로 쪽이 가운데 떠서 위아래가 200px 씩 빈다(2026-09-05 preview 실측). */
.bvpage { display: none; width: auto; height: auto; max-width: 100%; max-height: calc(70vh - 24px); object-fit: contain; }
.bvpage.on { display: block; }
/* 흰 띠였다. 레퍼 전체화면 PDF 의 `.pdf-top` 은 **먹색 띠 + 흰 글자**다(실측 §8 브로슈어 뷰어) —
   그 아래 종이 무대와 위 흰 페이지 사이에 검은 줄이 하나 서면서 상자의 윤곽이 잡힌다. */
.bvbar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; border-top: var(--bw) solid var(--ink); background: var(--ink); color: var(--white);
}
.bvbar .bvbtn { color: var(--white); }
.bvbar .bvbtn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); color: var(--brand); }
.bvbar .bvbtn:disabled { color: rgba(255, 255, 255, .32); }
.bvbar .bvnum { color: var(--white); }
/* 44px — 폰에서 넘기는 손가락 규격(Apple HIG). 화살표는 작아도 **누르는 면**은 크다.
   46 인 이유는 여백이 아니라 **재는 일** 때문이다: 이 바는 `[data-reveal]`(0.62초 translateY)
   안에 있고, 모바일 프로브는 로드 0.5초 뒤 — 즉 그 전환이 끝나기 전에 잰다. 변환 중인
   요소의 사각형은 44 가 아니라 44−1/16384 로 돌아와(2026-09-05 실측 43.99993896484375)
   "44px 미만 탭타겟" 이 한 번 걸러 한 번씩 뜬다. 규격에 딱 붙여 놓으면 반올림 한 톨에
   게이트가 흔들린다 — 손가락에도 2px 이 손해일 리 없으니 경계에서 내려온다. */
.bvbtn {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  transition: var(--t-fast);
}
.bvbtn:hover:not(:disabled) { background: var(--tint); color: var(--brand-deep); }
.bvbtn:disabled { color: var(--line); cursor: default; }
.bvnum {
  font-size: 13px; font-weight: 700; color: var(--sub); padding: 0 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* "크게 보기"는 오른쪽 끝 — 넘기는 손과 확대하는 손을 갈라 놓는다(오탭 방지). */
/* `<button>` 이 아니라 `<a href="1쪽.webp">` 다 — `<dialog>` 를 모르는 브라우저(구형 웹뷰)에서
   눌러도 아무 일이 안 나는 버튼 대신 그림이 새 창에 뜬다. JS 가 살아 있으면 가로챈다.
   그래서 `inline-flex` 로 눌리는 면을 44px 로 세운다(a 는 기본이 inline 이라 높이가 안 선다). */
/* 레퍼 `.pdf-dl` 규격 — 먹색 띠 위에 얹히는 브랜드색 채움 pill(r8 · 13/800). */
.bvzoom {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 0;
  border-radius: var(--r-sm); background: var(--brand); color: var(--ink);
  font-size: 13px; font-weight: 800; letter-spacing: -.02em; cursor: pointer;
  text-decoration: none; transition: var(--t-fast);
}
.bvzoom:hover { background: var(--brand-lit); }

/* 전체화면 브로슈어 — `.lb`(포스터 확대판)를 그대로 물려받고 아래 컨트롤 줄만 더한다.
   `.lb` 는 `width:fit-content` 라 이미지 크기를 따라간다. 여기서는 **쪽마다 폭이 달라서**
   상자가 넘길 때마다 흔들린다 — 폭을 고정해 상자를 세워 두고 안에서 그림만 바뀌게 한다. */
.bv-lb {
  width: min(92vw, 1100px); max-height: 94vh;
  background: var(--white); border-radius: var(--r); overflow: hidden;
}
/* `display:flex` 는 **열렸을 때만** 준다. 클래스 본체에 얹으면 UA 기본 규칙
   `dialog:not([open]) { display: none }` 을 덮어써서, 닫힌 상자가 본문 맨 끝에
   흰 박스(‹ › · 빈 카운터 · PDF 내려받기 · ✕)로 그대로 남는다 — 브로슈어가 달린
   7종 상세 전부에서 그랬다(2026-09-05 실측: `getComputedStyle().display === 'flex'`,
   `open === false`). 선택자 특이도가 아니라 **UA 규칙과의 순서 싸움**이라 `[open]` 한정이 답이다. */
.bv-lb[open] { display: flex; flex-direction: column; }
.bvlbstage {
  flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center;
  padding: 12px; background: var(--paper);
}
.bvlbstage img { display: none; width: auto; max-width: 100%; height: auto; border-radius: var(--r-sm); }
.bvlbstage img.on { display: block; }
.bvlbbar {
  display: flex; align-items: center; gap: 4px; flex: none;
  padding: 6px 10px; border-top: 1px solid var(--line); background: var(--white);
  border-radius: 0 0 var(--r) var(--r);
}
.bvpdf {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 46px; padding: 0 12px;
  font-size: 14px; font-weight: 700; color: var(--brand-deep); text-decoration: none;
}
.bvpdf:hover { text-decoration: underline; }

/* 원어 병기 — `.phero h1`(브랜드색 면) 안이라 회색 `--muted` 는 3.2:1 로 흐려진다. */
h1 .aka { font-size: 16px; font-weight: 700; color: var(--ink-on-brand); letter-spacing: -.01em; }

/* ── 공지 목록 ─────────────────────────────────────────
   3열 표(`.board`)였다. 레퍼 `.res-item` 줄 목록으로 갈면서 표가 사라졌다 — `.board*` 규칙을
   지운다. 총 건수 줄(`.boardbar`)만 그대로 산다. */
.boardbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.boardbar .cnt { font-size: 14.5px; font-weight: 700; color: var(--sub); letter-spacing: -.02em; }
.boardbar .cnt em { font-style: normal; font-weight: 800; color: var(--brand-deep); }
/* ── 공지 본문 (notice/<주소>/) ──────────────────────────
   목록에서 제목을 누르면 여는 글. 본문 폭은 문장 길이로 잡는다 —
   원장이 쓰는 안내문은 68자 줄이 되면 눈이 다음 줄 머리를 못 찾는다. */
.post { max-width: 46em; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.post p { font-size: 16px; line-height: 1.85; color: var(--ink); }
.post p + p { margin-top: 1.05em; }
/* 이전/다음 — 게시판에서 글로 들어온 사람이 목록으로 되돌아가지 않고도 옆 글을 읽게 한다.
   없는 쪽도 자리를 비우지 않고 "없습니다"로 남긴다(칸이 하나면 어느 방향인지 안 보인다). */
.postnav { display: grid; gap: 0; margin-top: 30px; border-top: 1px solid var(--line); }
.postnav .pn {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: baseline; gap: 4px 18px;
  padding: 16px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: var(--t-fast);
}
.postnav a.pn:hover { background: var(--tint); }
.postnav .pn > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.postnav .pn b { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postnav .pn.off b { font-weight: 500; color: var(--muted); }
.post + .acts, .postnav + .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 560px) {
  .post p { font-size: 15.5px; }
  .postnav .pn { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* 질문(FAQ) `.qalist`/`.qa` 규칙은 여기 한 층과 아래 레퍼 이식 한 층으로 나뉘어 있었다 —
   테두리·패딩·hover 색이 두 곳에서 서로를 덮어써서 "어느 값이 사는지"를 매번 다시 계산해야 했다.
   §8 FAQ 행 한 블록으로 합쳤다(이 파일 아래쪽). 여기에는 아무것도 남기지 않는다. */

/* 열 머리 h2 — 위 여백이 아래보다 좁으면 "앞 블록의 캡션"으로 읽힌다(D13 heading-rhythm). */
.colhead { margin-top: 34px; }

/* 눈에는 없고 개요에는 있는 제목. 교육행사·FAQ 는 히어로 `h1` 다음이 곧 카드 안 `h3` 라
   문서 개요에 h2 구멍이 났다(D13 skipped-heading). 화면에 보이는 제목을 새로 얹으면 히어로
   `h1` 과 같은 말을 두 번 하게 되므로, 낭독·개요에만 서는 h2 를 둔다.
   `clip-path` 만 쓰지 않는 이유: 옛 웹뷰가 모르면 제목이 그대로 보인다 — 1px 상자 + overflow 로 가둔다. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── 상세 스펙표 ────────────────────────────────────── */
/* 레퍼에는 회사 정보 표가 없다(푸터 한 줄로 처리) — 우리 표가 낫다고 판정했다(실측 §2).
   테두리만 레퍼 규격(2px 먹색)으로 갈아 끼운다. */
.spec { width: 100%; border-collapse: collapse; background: var(--white); border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; }
.spec th, .spec td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec th { width: 168px; background: var(--tint-soft); color: var(--ink); font-weight: 800; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* ── 안내 상자 ──────────────────────────────────────── */
/* `.blank`(▢ 미정 자리표시)는 은퇴시켰다 — 값이 없으면 줄을 아예 만들지 않는다(2026-08-10 오너 지시).
   `.pending` 은 남는다. 이건 "값이 비었다"가 아니라 **아직 안 되는 기능**을 알리는 자리다.
   문의 폼 전송은 2026-08-31에 실제로 붙어서 그 안내를 지우고, 지금 남은 쓰임은
   자료실의 발행처 표기 안내다. 값의 부재는 숨기고, 기능의 부재는 밝힌다. */
.pending {
  border: 1px dashed var(--line); border-radius: var(--r); padding: 22px;
  background: rgba(255, 255, 255, .5); color: var(--muted); font-size: 14.5px;
}

/* ── 문의 폼 ────────────────────────────────────────── */
.form { display: grid; gap: 16px; }
/* 회색 14.5/700 라벨이었다. 레퍼는 **검정 13/800** 이라 칸 제목이 본문과 확실히 갈린다(실측 §7 폼 필드). */
.form label { display: grid; gap: 5px; font-size: 13px; font-weight: 800; color: var(--ink); }
/* 테두리 1px line r8 → 2px 먹색 r10, 패딩 14/16 → 11/13(레퍼 규격).
   ⚠ `font-size:16px` 만은 레퍼(14px)를 따르지 않는다 — 16 미만이면 iOS 사파리가 입력을
   시작하는 순간 화면을 확대하고, 폰으로만 보는 의뢰인 화면이 그때부터 어긋난다. */
.form input, .form select, .form textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
  border: var(--bw) solid var(--ink); border-radius: 10px; padding: 11px 13px;
  transition: var(--t-fast); width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
  /* 글로우는 **테두리를 대신하지 않는다** — 초점을 알리는 것은 `--ink`→`--brand-deep` 테두리이고
     이 링은 그 둘레의 후광일 뿐이다. 불투명 `--brand` 를 그대로 깔면 3px 하늘색 띠가 테두리보다
     굵어 보여 어느 쪽이 칸의 경계인지 흐려진다(레퍼도 후광은 반투명이다). */
  outline: 0; border-color: var(--brand-deep); box-shadow: 0 0 0 3px rgba(27, 111, 158, .35);
}
/* 제출 = 레퍼의 "확정 행동" 버튼 — 폭 100% · 먹색 채움 · 브랜드색 글자 · r12 · pad14(실측 §7 제출 버튼).
   pill 이 아니다: 레퍼도 폼 제출만은 모서리를 죽여 "보내는 칸"으로 세운다. */
.form button[type='submit'] {
  width: 100%; padding: 14px; border-radius: 12px; border: 0;
  background: var(--ink); color: var(--brand); font-size: 16px; font-weight: 800;
}
.form button[type='submit']:hover { background: #000; transform: none; box-shadow: none; }
.form textarea { min-height: 132px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 동의 줄 — 체크박스가 글자 첫 줄에 붙도록 `align-items:start`. 글은 본문급으로 낮춘다 —
   라벨 굵기 그대로 두면 동의문이 입력칸 제목처럼 읽힌다. */
.form .agree { grid-template-columns: 22px 1fr; align-items: start; gap: 10px; font-weight: 500; }
/* 체크박스는 **눈에 22px · 손가락에 44px** 다. 기본 체크박스를 그대로 두면 22×22 가
   그대로 탭타겟이 돼 모바일에서 오탭이 난다(390 실측 22×22). 그렇다고 네모를 44px 로
   키우면 동의란이 체크박스 하나로 도배된다 — `appearance:none` 으로 상자를 직접 그려
   누르는 면은 44, 보이는 면은 22 로 갈라 둔다(음수 마진으로 글자 줄과 수평을 맞춘다). */
.form .agree input {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 44px; margin: -11px 0 -11px -11px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-content: center;
}
.form .agree input::before {
  content: ''; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--line); background: var(--white); transition: var(--t-fast);
}
.form .agree input:hover::before { border-color: var(--brand); }
/* 체크는 하늘색 채움 위에 **먹색** 획이다 — 흰 획은 1.71 로 안 보인다. */
.form .agree input:checked::before {
  border-color: var(--brand-deep); background: var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231c1917' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
.form .agree span { font-size: 13.8px; line-height: 1.6; color: var(--muted); }
/* 미끼 칸 — 사람에겐 안 보이고 봇에겐 보인다. `display:none` 은 일부 봇이 건너뛰므로
   화면 밖으로 밀어 놓는다(초점 순서에서는 tabindex=-1 로 빠진다). */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 전송 결과 한 줄. 색만으로 알리지 않는다 — 문장이 본체고 색은 거듬이다. */
.formstat {
  margin: 0; padding: 13px 16px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--line); color: var(--sub);
}
.formstat.ok { background: var(--tint-soft); border-color: var(--brand); color: var(--brand-deep); }
.formstat.bad { background: #fff5f5; border-color: #f0b4ac; color: #a52f1c; }
.formnote { margin-top: 14px; font-size: 14px; color: var(--muted); line-height: 1.65; }

.contactinfo { display: grid; gap: 14px; }
.contactinfo div { display: flex; gap: 12px; font-size: 15px; }
.contactinfo dt { flex: 0 0 84px; color: var(--muted); font-weight: 600; }
.contactinfo dd { margin: 0; color: var(--ink); font-weight: 600; }

/* ── 빈 결과 ────────────────────────────────────────── */
.empty {
  grid-column: 1 / -1; padding: 64px 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-lg); background: rgba(255, 255, 255, .6);
}
.empty b { display: block; font-size: 18px; margin-bottom: 8px; }
.empty p { color: var(--sub); font-size: 15px; }

/* ── 결과 툴바 (웅진 `.hasthumbListBtnWrap` 실측: 높이 50 · 좌 "총 N건" · 우 컨트롤) ── */
.resbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 50px; margin: 18px 0 14px;
}
/* 24/26px 였다. 2026-08-07 오너 판정 "T3도 이렇게 좀 작게"(웅진 "총 58건" 툴바 크롭 제시) —
   레퍼 툴바 카운트는 본문급 한 줄이지 페이지 제목이 아니다. 게시판 카운트(`.boardbar .cnt`)와
   같은 규격으로 맞춘다: 14.5px/700 회색 + 숫자만 브랜드색 800. 위계는 카드 제목(18px)이 잡는다. */
.resbar .cnt { font-size: 14.5px; font-weight: 700; color: var(--sub); letter-spacing: -.02em; }
.resbar .cnt em { font-style: normal; font-weight: 800; color: var(--brand-deep); }
.resbar .sum { font-size: 14px; font-weight: 600; color: var(--muted); }
.resbar .tools { display: flex; align-items: center; gap: 10px; }
.resbar .reset {
  min-height: 40px; padding: 0 14px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--sub); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: var(--t-fast);
}
.resbar .reset:hover { color: var(--brand-deep); border-color: var(--brand); }
.listmain { padding-top: 22px; }

.crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--brand-deep); }

/* ── 스크롤 리빌 (animation-on-scroll) ──────────────── */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .62s var(--ease), transform .62s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width: 1000px) {
  .span-4 { grid-column: span 6; }
  .span-8 { grid-column: span 12; }
  .tri { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .gnb nav { display: none; }
  .gnb .burger { display: block; }
  .gnb nav.open {
    display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line); padding: 10px 16px; gap: 2px;
    box-shadow: var(--sh-2);
  }
  .span-4, .span-8 { grid-column: span 12; }

  /* 프로그램 목록은 2026-09-09 리브랜딩으로 **1열 `.pcard`** 가 됐다(스펙 §7-1) — 2열 173px
     타일과 그 안의 썸네일·2줄 설명·해시 규칙(`.card.span-3 …`)은 마크업이 사라져 같이 지웠다.
     `.listmain #list` 의 음수 마진·gap 12 도 2열 그리드를 위한 값이라 걷는다(1열은 `.pcards` 가 잡는다). */

  /* 전화 링크 탭타겟 — 390 실측에서 100×18px이었다. 원장이 모바일에서 누르는 유일한 즉시 전환 동선이라
     44px 미만은 오탭을 만든다(Practical UI 하드룰). [근거: 2026-07-31 auditMobile telTargets] */
  a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
  /* 나머지 손가락 규격 — 2026-08-07 전 페이지 실측에서 44px 미만이 무더기로 나왔다:
     크럼 "홈" 12×16 · 헤더 로고 112×21 · `.seclink` 72×25 · 버거 54×40 · 캐러셀 버튼 34×34 ·
     초기화 66×40 · 공지 인라인 링크 124×23 · 메일 링크 171×18.
     글자 크기는 건드리지 않는다(레퍼 실측 타이포가 정본) — **누르는 면만** 넓힌다.
     인라인 링크는 세로 패딩 + 같은 크기 음수 마진이라 줄바꿈·행간이 그대로다. */
  .gnb .brand a { display: inline-flex; align-items: center; min-height: 44px; }
  .gnb .burger { min-height: 44px; padding: 11px 14px; }
  /* 한 자짜리 크럼("홈")은 좌우 16px 여백으로 43px 이 된다 — 하한 44 에 1px 모자라
     프로브가 매번 잡는다. 18px 로 올려 45px 을 만든다(줄 높이는 음수 마진이 흡수한다). */
  .crumb a { display: inline-block; padding: 13px 18px; margin: -13px -14px; }
  .sec-h .more, .resbar .reset { display: inline-flex; align-items: center; min-height: 44px; }
  a[href^="mailto:"], .qa p a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  /* 푸터 링크 열(`.fcol a`)의 44px 규칙은 이 블록에 있었다. 전역 `.fcol a { display:block; margin-bottom:9px }`
     가 **이 블록보다 뒤**(레퍼 푸터 이식분)라 같은 특이도에서 뒤가 이겼다 — 폰에서 44px 이 안 섰다.
     파일 끝 ≤760 블록으로 옮겼다. 한 곳에서만 쥔다. */
  /* 영역 인덱스는 이제 가로 스냅 캐러셀(`.row-scroll`)이다 — 3열 그리드 규칙은 죽었다.
     대표 프로그램명만 모바일에서 내린다(그림이 이미 말한다). */
  .domains a b { font-size: 13px; padding: 10px 10px 0; letter-spacing: -.03em; }
  .domains a span { display: none; }
  .form .row { grid-template-columns: 1fr; }  /* 필터는 모바일에서도 "딱 한 줄"이다 — 오너 확정(2026-07-29 G-W "한 줄이라 더 깔끔",
     2026-07-31 "필터가 공간을 너무 차지한다"). 축 2개 + 검색 아이콘이 한 행 전부이고,
     초기화는 결과 툴바로 내렸다(레퍼 웅진도 목록 툴바에 컨트롤을 둔다).
     [근거: 2026-07-31 390 나란히 실측 · 07-판정.html §1] */
  .fsearch { padding: 10px; gap: 8px; }
  .fsearch .fields { gap: 8px; min-width: 0; }
  .sel { flex: 1 1 0; min-width: 0; }
  .sel .selbtn { height: 52px; padding: 0 28px 0 12px; font-size: 14px; }
  .sel .arrow { right: 10px; }
  .sel .opts li { padding: 12px 14px; font-size: 15px; }
  .fsearch .go { width: 52px; height: 52px; flex: 0 0 52px; }
  .resbar { margin: 14px 0 12px; }
  /* 가로 스크롤을 걷으면서 음수 마진(가장자리까지 흘리기)도 같이 걷었다 — 줄바꿈 탭은
     래퍼 안에 머물러야 마지막 줄이 가운데로 선다. 폰에서는 칸만 조금 좁힌다. */
  .domtab { font-size: 14px; padding: 0 14px; }
  /* 상세 자료 버튼은 폰에서 줄이 접힌다 — 접힌 줄이 왼쪽에만 붙어 어긋나 보이지 않게 늘려 채운다. */
  .pp-links a, .pp-links button { flex: 1 1 auto; }  .spec th { width: 116px; }
}

/* 360 — 갤럭시 S·아이폰 SE 폭. 여기서만 깨지던 것을 잡는다(2026-08-07 31페이지 실측).
   회사소개 `.spec` 표가 368px로 넘쳐 페이지 전체에 가로 스크롤이 생겼다(머리열 116 + 값 여백).
   카드 설명 clamp 는 여기서 더 풀지 않는다 — 문장 자체를 25자 이하로 줄여 360에서도 2줄에 들어간다. */
@media (max-width: 400px) {
  .spec th { width: 104px; }
  .spec th, .spec td { padding: 13px 12px; font-size: 14.5px; }
}

/* == 폼 다이얼로그 (2026-09-09) == */
/* 교육행사의 [행사진행문의] 상자. 골격은 포스터 확대판(`.lb`)을 그대로 쓰고 — 상위 레이어·
   Esc·바깥 클릭·초점 가둠을 브라우저가 준다 — 폼이 들어가면서 달라지는 것만 여기서 덮는다:
   배경(투명 → 흰색) · 폭(fit-content → 고정) · 안쪽 여백.
   ⚠ `display` 는 건드리지 않는다. `.evform { display:… }` 를 얹는 순간 UA 규칙
   `dialog:not([open]) { display: none }` 을 이겨서, 닫힌 폼이 교육행사 본문 맨 끝에
   흰 박스로 늘 떠 있게 된다(브로슈어 상자에서 실제로 그랬다 — `.bv-lb[open]` 주석 참조). */
.evform {
  width: min(92vw, 440px); max-height: 92vh; overflow: auto;
  background: var(--white); border: var(--bw) solid var(--ink); border-radius: 20px;
}
/* 안쪽 여백을 상자가 아니라 **폼이** 갖는다. 상자에 주면 그 여백을 누르는 순간
   `e.target === dialog` 가 되어(app.js 의 바깥 클릭 판정) 쓰던 글이 그대로 닫힌다. */
.evform .form { padding: 24px 20px 22px; }
.evform h2 { font-size: 19px; font-weight: 900; padding-right: 44px; } /* ✕ 자리를 비운다 */
.evform .evformlead { margin-top: -7px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
/* ✕ 는 흰 상자 위에 뜬다 — 포스터 확대판의 잉크 원을 그대로 쓰면 폼 위에서 너무 무겁다.
   누르는 면 44px 은 `.lbx` 에서 그대로 물려받는다(모바일 탭타겟 게이트).
   ⚠ `position` 을 `absolute` 에서 `sticky` 로 바꾼다. 상자가 `overflow:auto` 라 폼이 화면보다 길면
   절대배치 ✕ 는 상자 **내용 맨 위**에 붙어 같이 굴러 올라가 사라진다 — 폰에서 칸을 다 채운 원장이
   닫을 곳을 잃는다(출구가 Esc·바깥 클릭만 남는데 폰에는 Esc 가 없다).
   오른쪽 정렬은 `margin-left:auto`(고정폭 블록), 아래 음수 마진은 ✕ 가 차지한 줄을 도로 걷어
   폼이 예전과 같은 자리에서 시작하게 한다 — 겹침 규격(h2 의 padding-right 44px)이 그대로 산다. */
.evform .lbx {
  position: sticky; top: 10px; right: auto; z-index: 2;
  margin: 10px 10px -54px auto; border-width: var(--bw);
  background: var(--paper); border-color: var(--line); color: var(--sub);
}
.evform .lbx:hover, .evform .lbx:focus-visible { background: var(--ink); color: var(--white); }
/* 진행 희망 행사 체크 묶음(2026-09-11 복수 선택). `<fieldset>` 은 브라우저 기본 테두리·여백이
   제각각이라 전부 걷고 다시 세운다 — 폼의 다른 `<label>` 들과 줄이 어긋나면 상자 안이 흔들려 보인다. */
.evform .evchk { border: 0; padding: 0; margin: 0; min-width: 0; }
.evform .evchk legend {
  padding: 0; font-size: 14px; font-weight: 700; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px;
}
/* "여러 개 고르셔도 됩니다" — 지시가 아니라 안심시키는 말이라 제목보다 작고 옅다. */
.evform .evchk legend span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* 한 줄에 하나씩 쌓는다. 행사명이 길어(`사회정서기술! 전인교육`) 2열로 깔면 360 에서 줄이 접히고,
   접힌 두 줄짜리 라벨 옆의 체크박스가 어느 줄에 속하는지 눈으로 안 갈린다. */
.evform .evchk .chk {
  display: flex; align-items: center; gap: 10px; min-height: 44px; /* 탭타겟 하드룰 */
  font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
  border-top: 1px solid var(--line);
}
.evform .evchk .chk:first-of-type { border-top: 0; }
/* 18px 은 브라우저 기본(13px)보다 크다 — 폰에서 손가락으로 정확히 겨냥하는 대상이라 키운다.
   `accent-color` 는 체크 표시를 브랜드색으로 칠한다(지원 안 하면 기본 파랑, 기능은 같다). */
.evform .evchk .chk input { width: 18px; height: 18px; flex: none; accent-color: var(--brand-deep); }
.evform .evchk .chk span { min-width: 0; }

/* 히어로 리드 바로 아래 한 줄. 포스터 그리드와 붙지 않게 아래 여백을 준다. */
.evopen { margin-top: 22px; }
@media (max-width: 640px) {
  .evform { width: 94vw; max-height: 90vh; }
  .evform .form { padding: 22px 16px 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   레퍼(울림교육) 규격 이식 — 정본 `12-레퍼런스-울림교육-실측.md` §9 5~12.
   여기 수치는 전부 레퍼 `_dev/ref-woollim/style.css` 실측값이다. 다르게 쓴 곳은
   그 줄에 이유를 적었다(대개 탭타겟 44px 하드룰이나 iOS 확대 방지 16px).
   색은 §0-2 치환표대로 갈아 끼운다: 노랑 → --brand · 주황(글자) → --brand-deep ·
   노랑연함 → --tint / --brand-lit · 먹색 → --ink.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 5. 페이지 히어로 `.phero` — 서브 페이지 첫 화면 ────────────────────────
   레퍼는 서브 7개 페이지가 전부 브랜드색 띠로 시작한다(실측 h249~331). 우리는 흰 종이
   위 제목뿐이었다 — 페이지가 시작됐다는 신호가 없어 헤더와 본문이 한 덩어리로 읽혔다. */
.phero { background: var(--brand); border-bottom: var(--bw) solid var(--ink); }
/* 레퍼는 `padding:56px 28px`(≤560 은 38/20)다. 좌우는 **우리 래퍼 값 24 를 쓴다** —
   28 로 두면 바로 아래 `.sec .wrap`(24)과 글머리가 4px 어긋나 띠가 삐뚤어 보인다. */
.phero .wrap {
  padding: 56px 24px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.phero .wrap > div { flex: 1 1 320px; min-width: 0; }
.phero .crumb { font-size: 13px; font-weight: 800; color: var(--ink-on-brand); margin-bottom: 10px; }
.phero .crumb a { color: var(--ink-on-brand); }
.phero .crumb a:hover { color: var(--ink); }
.phero h1 { color: var(--ink); }
.phero p {
  font-size: 16px; font-weight: 600; color: var(--ink-on-brand); margin-top: 10px; max-width: 560px;
}
/* 프로그램 목록만 얇은 판 — 2026‑07‑31 오너 판정("첫 화면에 카드가 바로 떠야 한다")과 레퍼의
   282px 히어로가 부딪히는 자리다. 띠는 두되 높이를 200 아래로 누른다(실측 §9-5 예외).
   실측: 크럼 30 + h1 31 + p 25 + 위아래 60 = 146. */
.phero.thin .wrap { padding: 30px 24px; }

/* ── 홈 색면 히어로 `.hero-panel` ────────────────────────────────────────
   사진 3화면 슬라이드였다. 오너 지시("레퍼를 그대로 따른다", 스펙 §7-1)로 레퍼 `.hero`
   규격으로 간다: 브랜드색 면 + 2px 먹색 하단선 + 큰 제목 + 형광펜 띠 + pill CTA 4개.
   레퍼는 상단 여백이 200px 인데 그 자리를 마스코트가 쓴다 — 우리는 캐릭터가 없으므로
   그 여백을 두면 빈 색면만 한 화면이 된다. 56/48 로 줄인다(실측과 다른 곳 ②). */
.hero-panel { background: var(--brand); border-bottom: var(--bw) solid var(--ink); overflow: hidden; }
.hero-panel .wrap { padding: 56px 24px 48px; text-align: center; }
.hero-panel h1 {
  font-size: clamp(40px, 7.5vw, 92px); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--ink);
}
/* 형광펜 띠 — 단어 **뒤**에 깔리는 색 막대다(레퍼 `.u::after`). `.u` 자체는 stacking context 를
   만들지 않으므로 z-index:-1 이 `.wrap`(z-index:1) 안에서 글자 아래·색면 위에 앉는다. */
.hero-panel h1 .u { position: relative; white-space: nowrap; }
.hero-panel h1 .u::after {
  content: ''; position: absolute; left: -1%; right: -1%; bottom: .1em;
  height: .16em; background: var(--brand-deep); border-radius: 4px; z-index: -1;
}
.hero-panel .herosub {
  font-size: 18px; font-weight: 600; color: var(--ink-on-brand);
  max-width: 560px; margin: 22px auto 28px;
}
.shopbtns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.shopbtns a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  background: var(--ink); color: var(--brand); border: var(--bw) solid var(--ink);
  font-size: 14px; font-weight: 800; letter-spacing: -.02em;
  padding: 11px 19px; border-radius: 999px; text-decoration: none; transition: var(--t-fast);
}
.shopbtns a:hover { transform: translateY(-2px); }
.shopbtns a.o { background: transparent; color: var(--ink); }
.shopbtns a.o:hover { background: var(--ink); color: var(--brand); }

/* ── 풀블리드 배너 `.promo-bleed` ────────────────────────────────────────
   옛 히어로 2번 화면(우리아이 행복프로젝트)이 가던 자리. 레퍼는 히어로에 배너를 겹치지 않고
   **아래 별도 블록**으로 뺀다(실측 §8). 폰에서는 1열이고 그림이 글 위로 올라간다. */
.promo-bleed { background: var(--tint); border-bottom: var(--bw) solid var(--ink); }
.promo-in {
  max-width: var(--max); margin: 0 auto; padding: 54px 24px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center;
}
.promo-in img { width: 100%; height: auto; display: block; border: var(--bw) solid var(--ink); border-radius: 18px; }
.promo-copy h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; }
.promo-copy p { margin-top: 16px; font-size: 17px; font-weight: 600; color: var(--sub); max-width: 520px; line-height: 1.6; }
.promo-copy .btn { margin-top: 22px; }

/* ── 7. 카드 규격 ─────────────────────────────────────────────────────── */

/* 프로그램 목록 1열 카드(레퍼 `.pcard` 354×193 r16 pad22/18 gap18).
   레퍼 `.ic` 는 50×50 이모지 칩인데 우리는 실사 썸네일이라 56×56 로 두고 잘라 채운다(스펙 §7-1). */
/* 컨테이너 — 12열 `.grid` 를 벗겨야 1열이 산다(스펙 §7-2-a `.pcards`). */
.pcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
/* `.card` 와 **같이** 걸린다(app.js 필터가 `.card` 로 잡는다) — 겉모습은 여기서 다시 쓴다.
   뒤에 선언돼 있으니 같은 특이도에서 이긴다. */
.pcard {
  display: block; background: var(--white); border: var(--bw) solid var(--line); border-radius: 16px;
  padding: 22px 18px; overflow: visible; text-decoration: none; color: inherit; transition: var(--t-fast);
}
.pcard:hover { border-color: var(--brand-deep); transform: translateY(-4px); box-shadow: var(--sh-2); }
.pcard .cardlink { display: block; height: auto; }
.pcard .ic {
  width: 56px; height: 56px; border-radius: 13px; background: var(--brand-lit);
  display: grid; place-items: center; font-size: 25px; margin-bottom: 14px; overflow: hidden;
}
.pcard .ic img { width: 100%; height: 100%; object-fit: cover; }
/* 제목 태그가 목록(h2)·관련 카드(h3)로 갈린다(스펙 §7-2-a). 레퍼는 h4 16/800 이다. */
.pcard :is(h2, h3, h4) { font-size: 16px; font-weight: 800; letter-spacing: -.028em; line-height: 1.4; }
.pcard p { font-size: 13px; color: var(--sub); margin-top: 4px; line-height: 1.55; }
.pcard .go { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 800; color: var(--brand-deep); }
/* "브로슈어" 표식 — 56px 썸네일 위에 얹을 자리가 없어 `.go` 줄 오른쪽으로 내렸다(스펙 §7-2-a).
   `.card .badge` 의 절대배치를 여기서 되돌린다(`.pcard` 는 positioned 가 아니라 그대로 두면
   칩이 페이지 왼쪽 위로 날아간다). */
.pcard .badge { position: static; margin-left: auto; }

/* 행사 카드(레퍼 `.ev` 354 r18 gap22 · 머리 아래 2px **점선**) */
.ev-list { display: grid; gap: 22px; }
.ev {
  border: var(--bw) solid var(--line); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; background: var(--white); transition: var(--t-fast);
}
.ev:hover { border-color: var(--brand-deep); }
.ev .top { display: flex; gap: 13px; align-items: center; padding: 16px 18px; border-bottom: var(--bw) dashed var(--line); }
/* 레퍼는 이 자리에 먹색 날짜 칩(`.date`)을 둔다. 우리 행사는 **상시 신청이라 날짜가 없다** —
   지어내지 않고 같은 칩 규격에 카테고리를 넣는다(실측 §5 판정 그대로). */
.ev .cat {
  flex: none; background: var(--ink); color: var(--brand); border-radius: 11px;
  padding: 8px 11px; font-size: 12px; font-weight: 800; text-align: center; white-space: nowrap;
}
.ev .top h3 { font-size: 17px; font-weight: 900; letter-spacing: -.028em; }
/* 대표 사진 — 레퍼 `.ov-thumb` 는 4:3 contain + 여백 #f6f4ef + 2px 먹색 + r10 이다.
   포스터는 세로형이라 `contain` 을 지킨다(잘라 채우면 행사명이 날아간다). */
.ov-thumb {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 10px;
}
/* 하단 고정 문의 버튼(레퍼 `.evt-cta` 실측 350×56) */
.evt-cta { max-width: 760px; margin: 14px auto 34px; padding: 0 20px; }
.evt-cta button {
  width: 100%; background: var(--ink); color: var(--brand); border: 0; border-radius: 14px;
  padding: 18px; font: inherit; font-size: 17px; font-weight: 900; cursor: pointer;
}
.evt-cta button:hover { background: #000; transform: none; box-shadow: none; }

/* 수치 카드(레퍼 `.st` 170×106 r16 · 390 에서 2열) */
.ab-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.st { border: var(--bw) solid var(--ink); border-radius: 16px; padding: 20px 16px; text-align: center; background: var(--white); }
.st .n { display: block; font-size: 24px; font-weight: 900; color: var(--brand-deep); line-height: 1.2; }
.st .l { display: block; font-size: 13.5px; font-weight: 700; color: var(--sub); margin-top: 4px; }

/* 사실 타일(레퍼 `.pd-feat .f` 171×138 r14 · 이모지 30px) */
.pd-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pd-feat .f {
  border: var(--bw) solid var(--line); border-radius: 14px; padding: 16px 14px;
  font-weight: 800; text-align: center; background: var(--white); word-break: keep-all;
}
.pd-feat .f span { display: block; font-size: 30px; margin-bottom: 6px; line-height: 1; }
.pd-feat .f b, .pd-feat .f :is(h3, h4) { display: block; font-size: 16px; font-weight: 900; letter-spacing: -.028em; }
.pd-feat .f p { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--sub); line-height: 1.55; }

/* 긴 글 상자(레퍼 `.hall` 2px 먹색 · r18 · 연한 틴트 배경) — 대표 인사말 8문단이 여기 든다.
   문단 간격을 CSS 가 쥔다: 마크업 인라인 margin 은 문단이 늘거나 줄면 같이 안 움직인다. */
.hall { border: var(--bw) solid var(--ink); border-radius: 18px; padding: 22px; background: var(--tint-soft); }
.hall .hall-body p { font-size: 15.5px; font-weight: 600; color: var(--sub); line-height: 1.75; }
.hall .hall-body p + p { margin-top: 14px; }
.hall .hall-body .sign { margin-top: 26px; font-weight: 900; color: var(--ink); }

/* 프로그램 상세 카드(레퍼 `.pprog` 2px line · r18 · pad 24/26).
   레퍼는 미디어가 있는 카드에 JS 로 `has-media` 를 붙여 flex 2단을 만든다 — 우리는 미디어가
   항상 있으므로 클래스 없이 그리드 2단으로 두고, 버튼 줄만 아래 폭 전체를 쓴다. */
.pprog {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start;
  border: var(--bw) solid var(--line); border-radius: 18px; padding: 24px 26px;
  background: var(--white); transition: var(--t-fast);
}
.pprog:hover { border-color: var(--brand-deep); }
.pprog .pp-main, .pprog .pp-media { min-width: 0; }
/* 상세 카드가 2단(글 | 브로슈어)에서 1단으로 접히는 자리. 330px 미디어 칸이 남으면
   390 에서 문서가 405px 이 되어 페이지 전체에 가로 스크롤이 생긴다(프로브 실측).
   이 규칙은 `.pprog` **선언 뒤**에 있어야 한다 — 위쪽 @media 블록에 두면 뒤에 오는
   base 선언이 같은 특이도로 이긴다. */
@media (max-width: 1000px) {
  .pprog { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
}
.pprog .pp-links { grid-column: 1 / -1; }
/* 특장점은 세로 목록이다(레퍼 `.pp-desc`) — 3열 그리드를 좁은 칸에 넣으면 한 줄 8자가 된다. */
.pprog .tri { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
.pprog .pp-main > .colhead:first-child { margin-top: 0; }

/* 프로그램 상세 칩·버튼줄·미디어(레퍼 `.pp-*`) */
.pp-tag {
  display: inline-block; background: var(--brand); border: 1.5px solid var(--ink); color: var(--ink);
  font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.pp-links { display: flex; gap: 8px; flex-wrap: wrap; }
/* ⚠ **직계 자식만** 잡는다. `.pp-media img` 로 쓰면 그 안 브로슈어 뷰어의 쪽 이미지
   (`.bvpage`, 한 장 빼고 `display:none`)까지 걸려 특이도 싸움에서 이긴다 — 쪽이 전부 펼쳐지고
   `loading=lazy` 가 풀려 첫 로드에 4장을 다 내려받는다(뷰어 e2e "첫 로드 1건" 실패로 잡혔다). */
.pp-media > img, .pp-media > .bviewer, .pp-media > .keyshot {
  border: var(--bw) solid var(--ink); border-radius: 14px;
}
.pp-media > img { display: block; width: 100%; height: auto; background: var(--paper); }

/* 줄 목록(레퍼 `.res-list`/`.res-item`) — 공지 게시판·자료 목록 공용 결.
   폰에서는 태그·버튼이 한 줄에 서고 제목이 그 아래로 내려간다(레퍼 ≤560 규칙 그대로). */
.res-list { border-top: var(--bw) solid var(--ink); margin-top: 28px; }
.res-item {
  display: flex; align-items: center; gap: 16px; padding: 18px 8px;
  border-bottom: 1px solid var(--line); transition: var(--t-fast);
  text-decoration: none; color: inherit;
}
.res-item:hover { background: var(--tint); }
.res-item .rtag {
  flex: none; background: var(--tint); color: var(--brand-deep); font-size: 12px; font-weight: 800;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap; min-width: 88px; text-align: center;
}
.res-item .rtitle { flex: 1; min-width: 0; }
.res-item .rtitle :is(h2, h3, h4, b) { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.028em; }
.res-item .rtitle p { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 3px; line-height: 1.55; }
.res-item .rbtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--ink); color: var(--brand); border: 0; border-radius: 10px; padding: 10px 16px;
  font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.res-item .rbtn:hover { background: #000; }

/* 아코디언 껍데기(레퍼 `.acc` 354×92 닫힘 r16). `<details>` 시맨틱은 유지한다 —
   레퍼는 JS 로만 열려서 JS 가 죽으면 내용이 영영 안 보인다(실측 §5 판정). */
.acc { border: var(--bw) solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 14px; background: var(--white); }
.acc summary { display: flex; align-items: center; gap: 14px; padding: 20px 22px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--tint); }
.acc .ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-lit); display: grid; place-items: center; font-size: 23px; }
.acc :is(h3, h4) { font-size: 18px; font-weight: 900; letter-spacing: -.028em; }
.acc summary p { font-size: 13px; font-weight: 600; color: var(--sub); }
.acc .cnt { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--brand-deep); }
.acc .arr { flex: none; font-size: 14px; transition: transform var(--t); }
.acc[open] .arr { transform: rotate(180deg); }
.acc > :not(summary) { padding: 6px 22px 20px; border-top: 1px solid var(--line); }

/* FAQ `<details class="qa acc">` — **여기가 유일한 층이다**(위쪽 §질문 블록은 걷었다).
   껍데기는 레퍼 카드 규격(실측 §8 FAQ 행) · 셰브론은 우리 것을 유지(레퍼 ▾ 글자보다 회전이 분명하다).
   ⚠ 이 블록은 `.acc` 선언 **뒤**에 있어야 한다 — `.qa p` 와 `.acc > :not(summary)` 가 같은 특이도라
   앞으로 옮기면 답변 위 패딩이 0 에서 6px 로 되살아난다.
   `display:flex`·아이콘 칸·화살표 회전은 같이 붙는 `.acc` 가 준다 — 여기서는 FAQ 만의 값을 적는다. */
.qalist { display: grid; gap: 0; }
.qa { border: var(--bw) solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 14px; background: var(--white); }
.qa[open] { background: var(--tint-soft); }
.qa summary {
  list-style: none; cursor: pointer; position: relative; padding: 20px 22px; gap: 14px;
  font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; transition: var(--t-fast);
}
/* 셰브론 `::after` 를 그리지 않는다 — 마크업이 `<span class="arr">▾</span>` 를 직접 주므로
   (스펙 §7-2 `.acc … .arr`) 그리면 화살표가 두 개가 된다. 회전은 `.acc[open] .arr` 이 맡는다. */
.qa summary::-webkit-details-marker { display: none; }
.qa summary :is(h3, h4) { flex: 1; min-width: 0; }
.qa summary:hover { background: var(--tint); color: var(--ink); }
/* 답변 줄길이 상한 — 카드 폭을 그대로 쓰면 1440에서 한 줄 148자가 되어 눈이 줄을 잃는다(D13 line-length). */
.qa p { padding: 0 22px 20px; max-width: 620px; font-size: 15px; color: var(--sub); line-height: 1.7; }
/* 닫힌 답변은 **레이아웃에서도** 빼야 한다 — 크로뮴은 닫힌 <details> 내용을 display:none 이 아니라
   content-visibility 로 감춰서 rect 가 그대로 남는다. `.qa{overflow:hidden}` 이 눈에는 안 보이게 하지만
   그 유령 사각형이 아래 카드와 겹쳐 "글자가 가려짐"으로 잡힌다(D13 text-occlusion). */
.qa:not([open]) p { display: none; }

/* ── 8. 가로 스냅 캐러셀 `.row-scroll` ───────────────────────────────────
   레퍼는 화살표 버튼을 **만들지 않는다** — 스크롤바를 굵게(10px) 그려 두고 글자 힌트 한 줄로
   안내한다(실측 §1 캐러셀 안내). JS 는 한 줄도 없다. */
.row-scroll {
  display: flex; gap: 24px; overflow-x: auto; padding: 4px 0 16px;
  scroll-snap-type: x proximity;
}
.row-scroll::-webkit-scrollbar { height: 10px; }
.row-scroll::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 999px; }
.row-scroll::-webkit-scrollbar-track { background: var(--line); border-radius: 999px; }
.row-scroll > * { flex: none; min-width: 248px; max-width: 248px; scroll-snap-align: start; }

/* ── 9. 마감 CTA `.story` — 풀블리드 먹색 띠 ────────────────────────────
   밝은 틴트 박스(`.closing .band`/`.ctaband`)였다. 레퍼는 페이지 끝을 **화면 폭을 통째로 먹는
   먹색 면**으로 닫는다(실측 h473). 인상 변화가 가장 큰 항목이면서 규칙은 열 줄이다. */
.story { background: var(--ink); color: var(--white); text-align: center; }
.story .wrap { padding: 84px 24px; }
.story h2 {
  font-size: clamp(26px, 4vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1.12;
  max-width: 880px; margin: 0 auto; color: var(--white);
}
.story h2 em { color: var(--brand); font-style: normal; }
.story p {
  color: #cfc9bf; margin: 18px auto 0; font-weight: 600; max-width: 620px; word-break: keep-all;
}
.story .btns { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.story .btns .btn { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.story .btns .btn:hover { background: var(--brand-lit); border-color: var(--brand-lit); color: var(--ink); }
.story .btns .btn.line { background: transparent; color: var(--white); border-color: var(--white); }
.story .btns .btn.line:hover { background: var(--white); color: var(--ink); }

/* ── 10. 푸터 ───────────────────────────────────────────────────────────
   흰 반투명 띠 + 세 줄이었다. 레퍼 푸터는 브랜드색 면 위에 링크 열 · 대형 전화번호 ·
   초대형 회사명 · 바닥줄이 순서대로 선다(실측 §1 푸터 h718). */
.foot { background: var(--brand); border-top: var(--bw) solid var(--ink); overflow: hidden; }
.foot .in { max-width: var(--max); margin: 0 auto; padding: 58px 24px 0; display: block; }
.foot-top { display: flex; flex-wrap: wrap; gap: 56px; }
.fcol h5 { font-size: 15px; font-weight: 900; margin-bottom: 14px; color: var(--ink); }
.fcol a { display: block; font-size: 14px; font-weight: 600; margin-bottom: 9px; color: var(--ink-on-brand); text-decoration: none; }
.fcol a:hover { color: var(--ink); font-weight: 800; }
.foot-phone {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: var(--bw) solid var(--ink); margin-top: 30px; padding-top: 22px; margin-bottom: 8px;
}
.foot-phone .lab {
  font-size: 13px; font-weight: 800; background: var(--ink); color: var(--brand);
  padding: 8px 15px; border-radius: 999px; white-space: nowrap;
}
.foot-phone .num {
  font-size: clamp(22px, 3.6vw, 34px); font-weight: 900; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.foot-phone .num:hover { color: var(--brand-deep); }
/* 회사명 초대형 — 390 에서 42.9px(11vw). 로고 이미지가 없는 판에서 이 글자가 로고 노릇을 한다. */
.giant { font-size: clamp(26px, 11vw, 60px); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--ink); white-space: nowrap; padding: 8px 0 2px; }
/* 사업자 표시 줄(레퍼 `.bizinfo` 12.5/1.7). 큰 회사명 줄(`.fb`)은 `.giant` 가 대신해 사라졌다. */
.foot .fi { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; line-height: 1.7; color: var(--ink-on-brand); margin-top: 14px; }
.foot .fi a { color: var(--ink-on-brand); }
.footbar .fc { font-size: 12px; color: var(--ink-on-brand); }
.footbar {
  border-top: var(--bw) solid var(--ink); font-size: 12px; color: var(--ink-on-brand);
  display: flex; justify-content: space-between; padding: 14px 24px; flex-wrap: wrap; gap: 8px;
}

/* ── 12. 폼 상자 껍데기(레퍼 `.pm-box`) ─────────────────────────────────
   레퍼 모달 규격(2px 먹색 · r20 · 제목 19/900)은 위 "폼 다이얼로그" 블록에 합쳐 넣었다.
   여기에 두면 그 블록의 `@media (max-width:640px)` 축소(94vw/90vh)보다 뒤에 서서
   같은 특이도로 폰 규격을 도로 덮는다 — `.evform` 은 그 블록 한 곳에서만 쥔다. */

/* ── 새 규격의 폰 보정 ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .promo-in { grid-template-columns: 1fr; padding: 38px 22px; gap: 30px; }
  /* 그림이 글 위로 — 레퍼 `.promo-right{order:-1}`. 배너는 그림이 먼저 말한다. */
  .promo-in > img { order: -1; }
}
@media (max-width: 760px) {
  .gnb .in { height: 60px; }
  /* 열린 메뉴 = 브랜드색 면 + 항목마다 얇은 구분선(레퍼 script.js 364‑368 인라인 규격). */
  .gnb nav.open { top: 62px; background: var(--brand); border-bottom: var(--bw) solid var(--ink); box-shadow: none; padding: 10px 24px 20px; }
  .gnb nav.open a { padding: 13px 0; border-radius: 0; border-bottom: 1px solid rgba(28, 25, 23, .15); min-height: 44px; display: flex; align-items: center; }
  .gnb nav.open a:last-child { border-bottom: 0; }
  .foot-top { gap: 28px; }
  .fcol { flex: 1 1 140px; }
  /* 푸터 링크 열 — 레퍼는 14/600 에 margin 9px(높이 22)이라 손가락 규격이 아예 없다.
     글자 크기는 레퍼 그대로 두고 **누르는 면만** 44 로 세운다(margin 은 그만큼 걷는다).
     ⚠ 전역 `.fcol a` 선언(위 §10 푸터)보다 **뒤**에 있어야 이긴다 — 앞쪽 ≤760 블록에 두면 진다. */
  .fcol a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
}
@media (max-width: 560px) {
  .phero .wrap { padding: 38px 24px; }
  .hero-panel .wrap { padding: 40px 24px 36px; }
  /* `.sec{padding:80px}`·`.story .wrap{padding:84px}` 은 폰에서도 **줄이지 않는다** —
     레퍼가 모바일 축소를 두지 않은 것이 그 리듬의 핵심이다(실측 §0-3 `.sec` 리듬). */
  /* 레퍼는 `.res-item` 을 폰에서 접어 태그·버튼을 한 줄에 세우고 제목을 아래로 내린다. */
  .res-item { flex-wrap: wrap; gap: 10px 16px; }
  .res-item .rtitle { flex-basis: 100%; order: 3; }
  .foot-top { flex-direction: column; gap: 22px; }
  .acc summary, .qa summary { padding-left: 16px; padding-right: 16px; }
  .qa p { padding: 0 16px 18px; }
}