/* _shell.css — site.css 에서 분리(2026-08-03). 내용 무변경, 위치만 이동.
   불러오는 순서: tokens → _shell → _components → _legacy → page-*
   🔒 락. 헤더·메뉴·푸터·히어로·롤링밴드·하단CTA·섹션래퍼·등장모션 + 전역 기본값.
   페이지 세션은 이 파일을 고치지 않는다. 고쳐야 하면 멈추고 회장께 보고한다. */
/* =====================================================================
   DAKGONG CAMP — 국내캠프 자체코딩 사이트 공용 스타일시트
   ---------------------------------------------------------------------
   출처: clients/dakgong/imweb/pages-out/domestic-*.html 6개 파일의
   <style> 블록이 전부 동일했음(제목만 다름) — 그 공용 블록을 그대로
   가져와 병합했다. 색상·타이포·간격 값은 전부 tokens-domestic.css의
   --dk-* 변수 참조(하드코딩 없음, 원본 그대로).
   바뀐 것 = 아임웹 위젯 의존 헤더 CSS(#w2026..., .viewport-nav,
   .dropdown-menu, .navbar-nav 등)를 전부 제거하고, 그 자리에
   순수 HTML/CSS 헤더·내비게이션·푸터(.site-header/.site-nav/.site-footer)를
   새로 작성해 넣은 것뿐. 컴포넌트 클래스(.dk-*)는 전부 원본 값 그대로.
   ===================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.dk {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
.dk h1, .dk h2, .dk h3, .dk h4 {
  font-family: 'Paperlogy', 'Pretendard', sans-serif;
}
.dk-wrap { max-width: var(--dk-container); margin: 0 auto; padding: 0 clamp(20px,5vw,48px); }
/* ★2026-07-25 회장 4차 지적 재확정 — 히어로(.dk-bg-video-content, max-width 1280px,
   padding 0)와 본문(.dk-wrap, 동일 max-width 1280px)의 폭이 안 맞는 원인 실측:
   clamp(20px,5vw,48px)는 5vw가 960px 뷰포트부터 48px 상한에 걸려 "고정 48px"이
   되어버려서, 뷰포트가 1280px 이상인 데스크톱에서도 본문이 좌우 48px씩(총 96px)
   더 좁게 나온다. 뷰포트가 1280px보다 좁을 때(태블릿 이하)는 .dk-wrap의 실제
   박스폭이 뷰포트폭 그대로라 이 여백이 화면 끝 밀착 방지용으로 계속 필요하다.
   그래서 뷰포트가 1280px에 도달해 컨테이너가 max-width로 꽉 찬 순간부터만
   패딩을 0으로 만들어 히어로와 정확히 같은 1280px 박스가 되게 한다(모바일 여백은
   그대로 보존). */
@media (min-width: 1280px) {
.dk-wrap, .dk-pt-in { padding: 0; }
}
.dk-sec  { padding: clamp(56px,8vw,96px) 0; }
.dk-label {
  font: var(--dk-label-red);
  color: var(--dk-accent-red);
  letter-spacing: normal;
  margin: 0 0 12px;
  display: block;
}
.dk-h2 {
  font: var(--dk-display-lg);
  letter-spacing: var(--dk-track-snug);
  color: var(--dk-ink);
  margin: 0;
}
.dk-h2 em { color: var(--dk-accent-red); font-style: normal; }
.dk-sec--dark .dk-h2 { color: #fff; }
.dk-sec--dark .dk-h2 em { color: var(--dk-accent-onDark); }
.dk-sec--dark .dk-split p { color: rgba(255,255,255,0.7); }
@media (max-width: 640px) {
.dk-sec { padding: 56px 0 !important; }
.dk-h2, .dk .dk-brand-kicker { font-size: 26px !important; }
}
/* sr-only — 표준 스크린리더 전용 숨김 패턴 (버튼/링크 보조텍스트용으로 계속 사용) */
.sr-only {
  position : absolute;
  width    : 1px;
  height   : 1px;
  padding  : 0;
  margin   : -1px;
  overflow : hidden;
  clip     : rect(0, 0, 0, 0);
  border   : 0;
}
/* =====================================================================
   헤더 / 내비게이션 — 아임웹 의존 없는 순수 HTML/CSS/최소 JS 신규 작성
   (2026-07-25, 자체코딩+Netlify 전환 작업). 색·높이(70px)·폭(1280px)은
   기존 6페이지에 이미 검증된 실측값 그대로 유지, 구현 방식만 교체.
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 70px;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--dk-hairline-soft);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow var(--dk-dur-base) var(--dk-ease-out);
  z-index: 400;
}
/* 스크롤 고정 상태 — 필핀 원본은 스크롤 시 헤더가 화면 위에 고정되며 옅은 그림자가
   붙는 방식(jquery-scrolltofixed 재구현). 순수 CSS position:sticky + 스크롤량에 따라
   nav.js가 붙이는 .is-scrolled 클래스로 그림자만 얹는다(구조는 그대로, 티만 살짝). */
.site-header.is-scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
/* ★2026-07-25 회장 1920px 실측 재확정 — 헤더는 본문(.dk-wrap, 1280px 박스)과
   달리 뷰포트 기준 좌131px/우131px 여백의 거의 풀블리드 레이아웃이다(필핀
   dakgongcamp.com 실측: 로고 시작 x=131, 메뉴그룹+MENU아이콘 끝 x=1789,
   1920-1789=131 — 좌우 대칭). 그래서 헤더 안쪽은 .dk-wrap(1280 중앙정렬)을
   쓰지 않고 자체 풀폭 padding을 쓴다. clamp 상한 131px = 6.823vw(1920 기준
   131px과 정확히 일치하도록 역산한 값), 좁은 화면에서는 20px까지 줄어든다. */
.site-header__inner {
  height: 70px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 clamp(20px, 6.823vw, 131px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo { display: flex; align-items: center; height: 100%; }
.site-logo img { display: block; height: 32px; width: auto; }
/* 메뉴 링크 그룹 + MENU 아이콘 버튼을 하나의 우측 그룹으로 묶는다(필핀 원본은
   nav 끝(1736)과 MENU 아이콘 시작(1751) 사이 15px 간격 — 그대로 재현).
   묶지 않고 header__inner에 개별 flex item으로 두면 space-between이 셋을
   고르게 벌려버려 "로고 / 메뉴 / 아이콘"이 3분할되는 오류가 난다. */
.site-header__right {
  display: flex;
  align-items: center;
  gap: 15px;
}
/* ★2026-07-26 회장 실측 재지시 — 필핀 실사이트 구조 재확인:
   ①PC = 가로 텍스트메뉴(호버드롭다운) + 항상 있는 삼선(☰) 버튼, 삼선 누르면
      우측에서 어두운 패널이 "추가로" 펼쳐짐(가로메뉴 대체 아님)
   ②모바일 = 로고 중앙, 삼선만 우측(가로메뉴 자체가 없음), 삼선 누르면 같은
      어두운 패널이 펼쳐짐
   그래서 .site-nav-bar(가로, PC 전용)와 .site-nav(삼선이 여는 패널, 모든 폭 공통)를
   완전히 분리한다 — 기존엔 같은 요소가 폭에 따라 이도저도 되려다 삼선이 PC에서
   먹통이었다. */

/* ── PC 전용 가로 메뉴 + 호버 드롭다운 ── */
.site-nav-bar { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav-bar > li { position: relative; }
.site-nav-bar > li > a {
  position: relative; display: flex; align-items: center; height: 70px; padding: 0 18px;
  font-family: 'Poppins', 'Pretendard', sans-serif; font-size: 15px; font-weight: 400; color: #1a1a1a;
  letter-spacing: normal; text-decoration: none; transition: color var(--dk-dur-fast) var(--dk-ease-out);
}
.site-nav-bar > li > a:hover, .site-nav-bar > li.is-active > a { color: var(--dk-accent-red); }
.site-nav-bar > li.is-active > a { font-weight: 700; }
.site-nav-bar__sub {
  position: absolute; top: 100%; left: 50%; min-width: 190px; background: #fff;
  border: 1px solid var(--dk-hairline-soft); border-radius: var(--dk-radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08); padding: 10px 0; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity var(--dk-dur-base) var(--dk-ease-out), transform var(--dk-dur-base) var(--dk-ease-out), visibility var(--dk-dur-base);
}
.site-nav-bar > li.has-sub:hover > .site-nav-bar__sub,
.site-nav-bar > li.has-sub:focus-within > .site-nav-bar__sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.site-nav-bar__sub li a { display: block; padding: 10px 20px; font-size: 14px; color: var(--dk-fg-3); text-decoration: none; white-space: nowrap; }
.site-nav-bar__sub li a:hover { color: var(--dk-accent-red); background: var(--dk-surface-card); }
@media (max-width: 880px) {
.site-nav-bar { display: none; }
}
/* ── 삼선(☰) 버튼: 모든 폭에서 항상 노출, 항상 같은 패널을 연다 ── */
.site-nav__toggle {
  display: flex;
  width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  flex-shrink: 0;
}
.site-nav__toggle-bar,
.site-nav__toggle-bar::before,
.site-nav__toggle-bar::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--dk-ink);
  transition: transform var(--dk-dur-base) var(--dk-ease-out), opacity var(--dk-dur-base) var(--dk-ease-out);
}
.site-nav__toggle-bar { position: relative; }
.site-nav__toggle-bar::before { position: absolute; top: -7px; left: 0; }
.site-nav__toggle-bar::after { position: absolute; top: 7px; left: 0; }
/* ★2026-07-28 — 패널이 열리면 헤더 삼선은 감춘다. 필핀 원본은 닫기(×)가 헤더가 아니라
   패널 안 우상단에 있어서(.pc-navbar-toggle / .navbar-toggle.close.slide-close),
   삼선을 ×로 바꾸면 헤더 ×와 패널 ×가 둘 다 보이는 중복이 된다. 그래서 삼선의
   ×모핑 규칙을 걷어내고 패널 자체 닫기 버튼(.site-nav__close)만 남긴다. */
.site-header.is-open .site-nav__toggle { visibility: hidden; }
/* ── 삼선이 여는 어두운 슬라이드 패널: PC·모바일 공통, 폭 무관하게 항상 이 구조 ── */
.site-nav {
  position: fixed; top: 0; right: 0; bottom: 0;
  /* ★회장 지시(2026-08-21) — 「폭이 과하게 넓다」. 72vw 340px → 64vw 300px.
     393px 폰 기준 283px → 251px. 가장 긴 항목(ABOUT CAMP, 16px Poppins)이
     좌우 24px 패딩 안에 여유 있게 들어간다. */
  width: min(64vw, 300px);
  background: var(--dk-surface-dark);
  transform: translateX(100%);
  transition: transform var(--dk-dur-base) var(--dk-ease-out);
  overflow-y: auto;
  padding: 0 0 40px;
  z-index: 401;
}
.site-header.is-open .site-nav { transform: translateX(0); }
.site-header.is-open::before {
  content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 398;
}
/* ★2026-07-28 — 패널 상단 = 필핀 원본(`pc_slide_menu` 안: 닫기버튼 → `pc_slide_menu_logo`
   → 메뉴목록) 구조 그대로. 국내 패널엔 로고·닫기가 통째로 빠져 있었다.
   로고는 패널 배경이 #2a2a2a라 헤더용 검정 글자 로고를 못 쓴다 → 흰 글자 +
   코발트 깃털 변형본(logo-on-dark.png)을 별도로 만들어 쓴다. */
.site-nav__close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  border: none; background: transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.site-nav__close::before, .site-nav__close::after {
  content: ""; position: absolute; width: 20px; height: 1.8px; background: rgba(255,255,255,0.85);
  transition: background var(--dk-dur-fast) var(--dk-ease-out);
}
.site-nav__close::before { transform: rotate(45deg); }
.site-nav__close::after  { transform: rotate(-45deg); }
.site-nav__close:hover::before, .site-nav__close:hover::after { background: #fff; }
/* ★회장 지시(2026-08-21) — 좌측 정렬 + 로고~메뉴 간격 축소.
   ⚠️ 아래 주석의 「필핀 실측: 가운데 정렬」과 여기서 갈라진다. 국내 지시분이다. */
.site-nav__logo { padding: 52px 24px 20px; text-align: left; }
.site-nav__logo a { display: inline-block; }
.site-nav__logo img { display: block; height: 26px; width: auto; margin: 0; }
/* 메뉴 항목 = 필핀 실측: 가운데 정렬, 구분선 없음(국내엔 좌측정렬+구분선이 들어가 있었음) */
.site-nav__list { display: flex; flex-direction: column; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; }
.site-nav__list > li { position: relative; }
.site-nav__list > li > a {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  height: auto; padding: 11px 24px; color: rgba(255,255,255,0.92); font-size: 16px;
  font-family: 'Poppins', 'Pretendard', sans-serif; letter-spacing: 0.5px; text-decoration: none;
  transition: color var(--dk-dur-fast) var(--dk-ease-out);
}
.site-nav__list > li > a:hover { color: #fff; }
.site-nav__list > li.is-active > a { color: var(--dk-accent-onDark); font-weight: 700; }
.site-nav__list > li.has-sub > a::after {
  content: "⌄"; display: inline-block; font-size: 15px; line-height: 1;
  color: rgba(255,255,255,0.6); transform: translateY(-3px);
  transition: transform var(--dk-dur-base) var(--dk-ease-out);
}
.site-nav__list > li.has-sub.is-open > a::after { transform: translateY(1px) rotate(180deg); }
.site-nav__sub {
  list-style: none; margin: 0; padding: 4px 0 10px; display: none;
}
.site-nav__list > li.has-sub.is-open .site-nav__sub { display: block; }
.site-nav__sub li a {
  display: block; padding: 8px 24px 8px 36px; text-align: left;
  color: rgba(255,255,255,0.72); font-size: 14.5px; text-decoration: none;
}
.site-nav__sub li a:hover { color: #fff; }
.site-nav__sub li.is-active a { color: var(--dk-accent-onDark); }
/* ── 모바일: 로고 중앙정렬(필핀 실측), 헤더는 삼선만 우측에 ── */
@media (max-width: 880px) {
.site-header__inner { position: relative; justify-content: center; }
.site-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.site-header__right { position: absolute; right: clamp(20px,6.823vw,131px); }
}
/* =====================================================================
   푸터 — 신규 작성(아임웹 의존 없음). 사업자정보는
   clients/dakgong/자료/2026-07-23_국내캠프_푸터정보...md 정본 값 그대로.
   ===================================================================== */
/* ★2026-07-25 실측 정밀화(www.dakgongcamp.com/26 footer): bg #292929(구 #1a1a1a는
   근사값이었음), 약관/SNS/사업자정보 텍스트 전부 #eee, copyright만 #828282/13px/200.
   ⚠️ 구조 자체(전화·카카오·이메일 직통 행 유무, 약관 링크 유무)는 이번 지시 범위를
   넘는 발견이라 색상만 정밀화하고 마크업은 그대로 둠 — 보고서 참조. */
/* ★2026-08-25 회장 지시 — 필핀 실사이트 배치로 통일.
   패딩 실측: 필핀 30/30 (국내는 44/36 이었다). */
.site-footer { background: #2a2a2a; color: #efefef; padding: 30px 0 53px; font-size: 13px; line-height: 1.9; }
/* 하단 42px — 필핀은 padding 30 이지만 마지막 줄 아래 실제 여백이 50px 이다.
   패딩값이 아니라 렌더 결과를 맞춘다. */
.site-footer a { color: #efefef; text-decoration: none; }
.site-footer a:hover { color: #fff; }
/* ★2026-07-25: 필핀 원본 구조 대조 2건 반영 — 약관 링크 행 + SNS 아이콘.
   근거: clients/dakgong/imweb/_reference/live-site-header-footer-extract_2026-07-25.md
   약관 실제 URL 미확인(2026-07-23 자료 34행) → href="#" placeholder. */
/* 약관 링크 + SNS 를 한 행에. 필핀은 링크가 좌측, SNS 가 우측이다.
   구분선(|)은 필핀에 없어 뺐다. 개인정보처리방침만 굵게(실측 700). */
.site-footer__top { display: flex; align-items: center; justify-content: space-between;
                    gap: 16px; flex-wrap: wrap; margin: 0 0 27px; }   /* SNS 끝→저작권 27px (필핀 실측) */
.site-footer__legal { font-size: 12px; color: #efefef; margin: 0; }
.site-footer__legal a { margin-right: 20px; }
.site-footer__legal a:last-child { margin-right: 0; font-weight: 700; }
/* ★2026-07-25(3차, 최종): Plipop-Social-Icons.ttf가 실제로는 로그인·결제 없이
   공개 URL(vendor-cdn.imweb.me/fonts/Plipop-Social-Icons.ttf)에서 받을 수 있는
   파일임을 재확인 → 손그림 SVG를 걷어내고 실제 아이콘 폰트로 교체.
   순서=블로그·유튜브·인스타그램·카카오, 색상=#eee 단색, 텍스트 라벨 없음(sr-only만),
   높이(font-size) 20px, hover 시 #fff. 글리프 코드포인트는 tokens-domestic.css
   @font-face 주석의 실측 근거(ii.css 원본 + Playwright computed style) 참조. */
.site-footer__social { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0; }
.site-footer__social a { display: inline-flex; align-items: center; }
.site-footer__icon-font {
  font-size: 20px;
  line-height: 28.57px;   /* ★2026-08-25 필핀 실측. 1 이면 아이콘 박스가 20px 로 작아진다 */
  color: #efefef;
  font-style: normal;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.site-footer__social a:hover .site-footer__icon-font { color: #fff; }
.site-footer__icon-font.ii { font-family: "Plipop-Social-Icons"; }
.site-footer__icon-font.ii-nblog::before { content: "\e90f"; }
.site-footer__icon-font.ii-youtube::before { content: "\e919"; }
.site-footer__icon-font.ii-kakaotalk::before { content: "\e90d"; }
.site-footer__icon-font.fa-instagram { font-family: "FA-Brands"; font-weight: 400; }
.site-footer__icon-font.fa-instagram::before { content: "\f16d"; }
/* 구분선(hr)은 필핀에 없다 — 마크업에서 뺐고 규칙만 남겨 둔다. */
.site-footer hr { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 20px 0; }
/* 사업자 정보 — 필핀은 항목을 가로로 이어 붙인다(2줄). 좁은 폭에서는
   자동으로 접히게 두되, 항목이 서로 붙지 않게 오른쪽 여백을 준다. */
.site-footer__biz { margin: 0; font-size: 12px; color: #efefef; line-height: 30px; }  /* 필핀 실측 30px */
/* 줄 간격은 부모(30px), 글자 상자는 24px — 필핀과 같이 줄 사이 6px 이 남는다. */
/* 항목 간격 8px — 필핀 실측(항목 사이가 일관되게 8px 이다).
   span 사이에 공백이 없으면 줄바꿈 기회가 아예 없어 880px 에서 화면을 뚫었다.
   그래서 마크업에서 span 을 줄바꿈해 공백을 만들고, 나머지를 margin 으로 채운다. */
.site-footer__biz span { margin-right: 5px; white-space: nowrap; line-height: 24px; }
.site-footer__biz span:last-child { margin-right: 0; }
/* 좁은 폭 — nowrap 을 풀지 않으면 긴 항목(사업장주소 338px)이 320px 화면을
   뚫고 나가 가로 스크롤이 생긴다. 필핀 실사이트는 모바일에서 실제로 가로
   스크롤이 생기는데(390px 실측), 그 결함까지 따라갈 이유는 없다. */
@media (max-width: 768px) {
  .site-footer__biz span { white-space: normal; margin-right: 5px; }
}
/* ★2026-08-03 회장 승인 — 대비 3.63:1(기준 4.5) 로 안 읽혔다. 어두운 배경 위라
   밝은 배경용 muted 를 쓰면 반대로 더 안 보인다. 전용 토큰 + 굵기 200→400.
   크기·위치·간격은 그대로. 대비 5.10:1 */
/* ★2026-08-25 — 필핀은 저작권이 사업자 정보 **위**에 온다. 순서를 맞췄다. */
.site-footer__copy { margin: 0; color: var(--dk-fg-muted-onDark); font-size: 13px;
                     font-weight: 400; line-height: 26px; }   /* lh 는 필핀 실측 */
/* ── 정체성 띠 (무한 롤링 배너) ── */
.dk-idband-wrap {
  width: 100%;
  overflow: hidden;
  background: var(--dk-accent-red);
  padding: 10px 0;
}
.dk-idband-track {
  display: flex;
  width: max-content;
  animation: dk-idband-rolling 60s linear infinite;
}
.dk-idband-track span {
  font-size: clamp(13px,2.6vw,16px);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  padding: 0 18px;
  letter-spacing: 0.2px;
}
@keyframes dk-idband-rolling {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
.dk-idband-track span { font-size: 13px; padding: 0 12px; }
}
/* ★2026-08-17 — 다크 배경 라벨이 두 곳인데 색이 갈려 있었다.
   여긴 흰색 60%, teachers 선발기준은 --dk-accent-onDark. 후자로 통일한다.
   라벨은 전 사이트 36개 중 34개가 코발트고, 다크에서 밝은 코발트로 가는 게
   그 규칙의 연장이다. 흰색 60% 는 코발트라는 정체성을 잃는다. */
.dk-stat-dark-sec .dk-label { color: var(--dk-accent-onDark); }
.dk-stat-dark-sec .dk-h2 { color: #fff; }
/* ── 문의 CTA ── */
.dk-cta { background: var(--dk-accent-red); text-align: center; }
.dk-cta .dk-label { color: rgba(255,255,255,0.75); }
.dk-cta h2 { color: #fff; margin: 0 0 var(--dk-gap-md); }
.dk-cta .btn { text-decoration: none; }
/* ★2026-07-26 회장 지시 — CTA 버튼 2개 구성(필핀과 문구 동일, 색만 국내 코발트로),
   전 페이지 CTA 디자인 통일. 필핀 원문 버튼 카피 그대로: "캠프 참여 문의하기"
   (채움, 흰바탕+코발트글자) + "카카오톡 상담하기"(외곽선, 흰테두리). */
/* ★2026-07-29 회장 지적 "글자수가 다르다고 버튼 두개 사이즈까지 다르면 어쩌냐".
   auto 폭이면 '상담 신청'(4자)과 '카카오톡 상담'(6자)의 폭이 달라진다.
   1fr 균등 컬럼으로 묶어 넓은 쪽에 맞춘다. 좁은 화면에선 1열로 세우고 폭을 100%로 통일. */
.dk-cta .btn-group { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 16px; justify-content: center; max-width: 100%; }
@media (max-width: 480px) {
.dk-cta .btn-group { grid-auto-flow: row; width: min(100%, 320px); }
}
.dk-cta .btn-cta-primary { background: #fff; color: var(--dk-accent-red); }
.dk-cta .btn-cta-primary:hover { background: var(--dk-surface-soft); }
.dk-cta .btn-cta-outline { background: transparent; color: #fff; border: 2px solid #fff; padding: 10px 22px; }
.dk-cta .btn-cta-outline:hover { background: #fff; color: var(--dk-accent-red); }
@keyframes dkReviewScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.dk-pt-in {
  max-width: var(--dk-container); margin: 0 auto; padding: 0 clamp(20px,5vw,48px); width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start;
}
/* ★2026-07-28 회장 지적("타이틀 폭과 POINT 상세 폭이 안 맞는다") 근본원인 수정.
   파일 앞쪽(35행) @media(min-width:1280px){ .dk-wrap, .dk-pt-in { padding:0 } }가
   이미 있었지만, 바로 위 .dk-pt-in 선언이 그보다 뒤에 오면서 같은 특성도(0,1,0)라
   나중 규칙이 이겨 패딩 48px이 되살아나 있었다(미디어쿼리는 특성도를 안 올린다).
   → 데스크톱에서 타이틀(.dk-wrap, 1280px)보다 POINT 상세가 좌우 48px씩 좁던 원인.
   .dk-pt-in 선언 "뒤"에 같은 미디어쿼리를 다시 둬서 실제로 먹게 만든다. */
@media (min-width: 1280px) {
  .dk-pt-in { padding: 0; }
}
@media (max-width: 640px) {
.dk-pt-in { grid-template-columns: 1fr; gap: 24px; }
}
/* ── 히어로(홈) — 실물 영상 없음, 코발트 그라디언트 placeholder ── */
.dk-bg-video-section {
  position: relative;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  background: #fff;
}
.dk-bg-video-section .dk-bg-video-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(135deg, var(--dk-navy-deep) 0%, var(--dk-navy) 55%, var(--dk-navy-deep) 100%);
  background-size: cover;
  background-position: center;
}
.dk-bg-video-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0) 75%);
  z-index: 1;
}
.dk-bg-video-content {
  position: relative;
  z-index: 2;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0px;
  box-sizing: border-box;
  color: #fff;
  max-width: 1280px;
  margin: 0 auto;
}
/* ★2026-08-03: 셀렉터가 h2 만 겨냥하고 있어서, h1 을 쓰는 하위 5페이지는 이 규칙을
   안 받고 전역 `.dk h1` 을 받고 있었다. 두 계통의 값이 우연히 맞춰져 있었을 뿐이라
   한쪽만 고치면 조용히 갈라진다(2026-07-25 에 실제로 갈라졌던 그 구조).
   히어로 제목은 태그와 무관하게 이 한 규칙이 책임진다. */
.dk-bg-video-content h1,
.dk-bg-video-content h2 {
  margin: 0 0 20px;
  font-family: 'Paperlogy', sans-serif;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  /* ★2026-07-25: 태그 종류(h1/h2)와 무관하게 항상 홈 기준(-0.3px)으로 통일.
     이전엔 이 값을 안 정해서 tokens-domestic.css의 .dk h1(-0.5px)/.dk h2(-0.3px)
     전역값을 그대로 물려받아 홈(h2)과 하위 5페이지(h1)가 서로 다르게 렌더링됐다. */
  letter-spacing: var(--dk-track-snug);
  word-break: keep-all;
}
/* 히어로 리드문단 이력 —
   2026-07-25: 범용 `.dk-bg-video-content p`(0,1,1)가 `.lead`(0,1,0)를 이겨서 하위
     5페이지 브레드크럼·리드까지 덮어쓰던 버그. 홈 전용 `.dk-hero-lead-plain`을
     만들어 범용 규칙을 좁혔다.
   2026-07-26: 홈 전용값(20px/300/Helvetica)이 공용 `.lead`와 달라 커 보인다는 지적.
     공용 값(18px/400/1.7/Pretendard)에 맞춰 통일.
   2026-08-03: 값이 같아진 이상 클래스를 둘로 유지할 이유가 없다. 홈도 `.lead`를 쓴다.
     두 계통을 남겨두면 한쪽만 고쳐서 또 갈라진다. */
.dk-bg-video-section .dk-bg-video-content h1,
.dk-bg-video-section .dk-bg-video-content h2 {
  color: #fff;
}
/* 하위 5페이지 히어로 안의 .lead는 어두운 배경 위라 기본 .dk .lead의 회색(#555)
   대신 흰색으로 덮어써야 한다(글자·배경 안 보임 방지). 다른 값(18px/400/
   Pretendard)은 tokens-domestic.css의 .dk .lead 정의를 그대로 상속한다. */
.dk-bg-video-content .lead {
  color: #fff;
}
@media (max-width: 768px) {
.dk-bg-video-section,
  .dk-bg-video-content {
    min-height: 520px;
  }
.dk-bg-video-content {
    padding: 72px 24px;
  }
.dk-bg-video-content h1,
  .dk-bg-video-content h2 {
    font-size: 22px;
  }
.dk-bg-video-content p {
    font-size: 16px;
  }
  /* ★2026-07-26 회장 지시 — 모바일이 디자인 기준점. `.dk .lead`(0,2,0)가 위 범용 p
     규칙(0,1,1)을 이겨서 모바일에서도 데스크톱과 똑같이 18px로 렌더링되던 버그.
     명시적으로 타깃해서 모바일 전용 크기를 강제. */
  .dk-bg-video-content .lead {
    font-size: 16px;
    line-height: 1.6;
  }
}
/* ── ABOUT CAMP 하위 5페이지 히어로 ── (2026-07-25 재작성)
   회장 실측 지적: 하위 페이지 히어로가 홈 히어로와 디자인 언어가 어긋남(어두운 네이비
   그라디언트 + h1 36px 독자 컴포넌트였음). 필핀 라이브(dakgongcamp.com) 실측 결과
   홈/하위 히어로는 완전히 동일한 컴포넌트(.dk-bg-video-section, 600px, video bg,
   h2 30px/700)를 재사용함 — 하위 전용 배너가 따로 없음. 그래서 하위 페이지도
   .dk-bg-video-section/.dk-bg-video-content를 그대로 재사용(구조 통일), 실물 사진/영상은
   아직 없어 코발트 그라디언트 placeholder 유지 + breadcrumb만 추가로 얹는다. */
/* ★2026-07-25 재수정(1차 수정 검증 중 재발견): `.dk-breadcrumb`(class 단독, specificity
   0,1,0)가 tokens-domestic.css의 `.dk p`(0,1,1)에 여전히 밀려 16px/#555555(본문 회색)로
   렌더링되고 있었다(`.dk-bg-video-content p`를 좁힌 것만으로는 불충분). 실제 마크업
   중첩 그대로 `.dk-bg-video-content .dk-breadcrumb`로 스코프해 specificity를 0,2,0으로
   올려 `.dk p`를 이기도록 고쳤다. */
.dk-bg-video-content .dk-breadcrumb { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0 0 18px; letter-spacing: .2px; }
.dk-bg-video-content .dk-breadcrumb span { color: #fff; font-weight: 600; }
.dk-bg-video-content .dk-label { color: var(--dk-accent-onDark); margin-bottom: 14px; }
.dk-bg-video-content h1 {
  margin: 0 0 20px;
  font-family: 'Paperlogy', sans-serif;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
  letter-spacing: var(--dk-track-snug); /* ★2026-07-25: 홈 h2와 통일(-0.3px) */
  word-break: keep-all;
}
@media (max-width: 768px) {
.dk-bg-video-content h1 { font-size: 22px; }
}
.dk-shead { margin-bottom: var(--dk-gap-lg); }
.dk-shead .lead { margin-top: var(--dk-gap-sm); max-width: 680px; }
.dk-shead h2.dk-h2 { margin-bottom: 4px; }
/* ── 스크롤 등장(reveal-on-scroll) ── (2026-07-25 신규)
   필핀 라이브 실측: 인포그래픽 섹션이 IntersectionObserver로 뷰포트 진입 시 .is-in
   클래스를 받아 opacity/transform 트랜지션이 걸리는 방식(원리만 재구현, 셀렉터명은
   철학이 다른 사이트라 새로 지음). assets/js/reveal.js가 [data-reveal] 요소를 관찰해
   .is-in을 붙인다. 첫 화면(히어로)에는 절대 달지 않는다 — 로드 직후 빈 화면 방지. */
@media (prefers-reduced-motion: no-preference) {
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--dk-ease-out), transform 0.7s var(--dk-ease-out);
  }
[data-reveal="stagger"] > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.6s var(--dk-ease-out), transform 0.6s var(--dk-ease-out);
  }
}
/* ── 히어로 줄바꿈 규칙 (web agent CLAUDE.md「한글 타이포·줄바꿈 기준」) ──
   · 타이틀 <br> = 수사(대구) → 전 화면 유지
   · 서브 <br> = 스타일용 → 820px 이하에서 제거. 마크업의 <br> 앞 공백이 어절을 띄운다.
   · 긴 헤드라인은 text-wrap:balance로 행 길이 균형 */
.dk-bg-video-content h1, .dk-bg-video-content h2 { text-wrap: balance; }
@media (max-width: 820px) {
.dk-bg-video-content .lead br,
  .dk-bg-video-content .dk-hero-lead-plain br { display: none; }
}
/* ── 고아 행 방지 (web agent CLAUDE.md「한글 타이포·줄바꿈 기준」) ──
   마지막 행에 한두 글자만 남는 것을 브라우저가 알아서 피하게 한다.
   제목·짧은 캡션 = balance(행 길이 균등), 본문 = pretty(고아 행 방지). */
:where(.dk) h1, :where(.dk) h2, :where(.dk) h3, :where(.dk) h4,
.dk-h2, .dk-perf-title, .dk-hub-cap, .dk-head6, .dk-tt-h,
.dk-ph .cap, .dk-ph .spec, .dk-brand-kicker, .dk-brand-sub,
.dk-glance-v, .dk-tt-txt, .dk-kp-text, .dk-pt-h {
  text-wrap: balance;
}
:where(.dk) p, :where(.dk) li, :where(.dk) td, .dk-pt-d, .dk-faq-a p {
  text-wrap: pretty;
}
/* ═══════════════════════════════════════════════════════════════════
   입시 컨설팅 페이지 (consulting.html) + 6대 핵심 상세 공용 카드 — ★2026-07-30 신설
   회장/닥공 통화 확정:
     · 캠프 비용에 포함된 서비스가 아니다(별도). 단 유료 사실을 페이지에 노출하지 않는다.
     · POINT5에 두는 이유 = 캠프 전문성 제시 + 간보기. "닥공의 전문 영역 중 하나"로 쓴다.
     · 중등/고등 컨설팅 문의 CTA를 이 페이지에만 별도로 둔다.
   CTA 겹침 해법 — 층위를 다르게 둔다:
     · 컨설팅 문의 = 본문 안(03 직후), 흰 카드 + 상단 코발트 실선  → '안내'
     · 캠프 문의   = 페이지 끝, 풀블리드 코발트 .dk-cta (6페이지 공통) → '결론'
   금지 유지: 라운드 + 컬러 좌측 레일 동시 사용(anti-ai-slop P0 #5) → 상단 실선으로 대신.
   여백은 --dk-gap-* 스케일만 쓴다.
═══════════════════════════════════════════════════════════════════ */

/* ── 01 닥공의 전문 영역 리드 블록 ── */
/* ★2026-07-30 회장 지적 "아래 버튼도 없는데 여백은 왜있나". 리드 블록 뒤에 아무것도 없어
   섹션 하단 96px이 빈 여백으로 남았다. 스케일 안에서 한 단 낮춘다(96 → lg). */
.dk-sec--csintro { padding-bottom: var(--dk-gap-lg); }
.dk-cinq__btns { display: grid; grid-auto-flow: row; gap: 10px; min-width: 0; }
@media (max-width: 760px) {
.dk-cinq__btns { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
@media (max-width: 460px) {
.dk-cinq__btns { grid-auto-flow: row; grid-auto-columns: auto; }
}


/* ── 푸터 법적 고지 팝업 · 전문 페이지 (2026-08-25) ────────────────────
   그전까지 푸터의 이용약관·개인정보처리방침이 href="#" 이라 눌러도 아무 일이
   없었다. 필핀 실사이트는 같은 자리에서 팝업으로 전문을 띄운다.
   값은 전부 토큰 참조 — 이 팝업 때문에 새 색·새 여백을 만들지 않는다. */
.dk-legal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: var(--dk-gap-sm);
  background: rgba(12, 14, 18, .72);
}
.dk-legal[hidden] { display: none; }

.dk-legal__panel {
  width: min(760px, 100%);
  max-height: min(82vh, 780px);
  display: flex; flex-direction: column;
  background: var(--dk-primary);
  border-radius: var(--dk-radius-md);
  overflow: hidden;
}

.dk-legal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dk-gap-xs);
  padding: 20px var(--dk-gap-sm);
  border-bottom: 1px solid var(--dk-hairline-soft);
}
:where(.dk) .dk-legal__h {
  margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4;
  color: var(--dk-fg-1);
}
.dk-legal__x {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--dk-radius-full);
  background: transparent; color: var(--dk-fg-3);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.dk-legal__x:hover { background: var(--dk-surface-card); color: var(--dk-fg-1); }

.dk-legal__body {
  overflow-y: auto;
  padding: var(--dk-gap-sm);
  -webkit-overflow-scrolling: touch;
}

/* 문서 본문 — 팝업과 전문 페이지가 같은 규칙을 쓴다 */
/* ⚠️ :where() 로 쓰면 안 된다 — tokens-domestic.css 의 `.dk p`(0,1,1)가
   특성도 0 을 이겨서 16px 로 떨어진다. 실제로 그렇게 뚫렸다(2026-08-25). */
.dk .dk-legal-doc p,
.dk-legal-page .dk-legal-doc p {
  margin: 0 0 14px;
  font-size: 13px; line-height: 1.8;
  color: var(--dk-fg-3);
  word-break: keep-all;
}
.dk .dk-legal-doc p:last-child, .dk-legal-page .dk-legal-doc p:last-child { margin-bottom: 0; }
.dk .dk-legal-doc b, .dk-legal-page .dk-legal-doc b { color: var(--dk-fg-1); font-weight: 700; }

/* 전문 페이지 (JS 없이 열렸을 때) */
.dk-legal-page { padding: var(--dk-gap-xl) 0; }
:where(.dk) .dk-legal-page__h {
  margin: 0 0 var(--dk-gap-md);
  font-size: clamp(24px, 4vw, 32px); font-weight: 800; line-height: 1.3;
  color: var(--dk-fg-1);
}
.dk-legal-page .dk-legal-doc { max-width: 760px; }
.dk-legal-page__back { margin: var(--dk-gap-md) 0 0; font-size: 14px; }
.dk-legal-page__back a { color: var(--dk-accent-red); text-decoration: none; }
.dk-legal-page__back a:hover { text-decoration: underline; }