/* page-index.css — site.css 에서 분리(2026-08-03). 내용 무변경, 위치만 이동.
   불러오는 순서: tokens → _shell → _components → _legacy → page-*
   ✏️ 이 페이지 전용. 이 페이지 세션이 고치는 유일한 CSS. */
/* ★2026-07-28 신설 — 브랜드 섹션 맨 앞 도입부(회장 지시 원문 2줄).
   PHILOSOPHY 라벨·헤드라인 위에 별도 블록으로 올리고, 아래 헤어라인으로
   "캠프 소개 → 원칙" 두 덩어리를 구분한다. */
.dk-brand-intro {
  margin: 0 0 var(--dk-gap-lg);
  padding: 0 0 clamp(28px,3.5vw,40px);
  border-bottom: 1px solid var(--dk-hairline-soft);
}
/* 아래로 내려온 경우 — 구분선을 위쪽으로 옮긴다 */
/* ★2026-08-17 회장 지시 — 사진이 두 블록을 갈라 주므로 구분선을 뺀다.
   선과 사진이 겹치면 경계가 두 번 그어진다. */
.dk-brand-intro--after {
  margin: var(--dk-gap-lg) 0 0;
  padding: clamp(28px,3.5vw,40px) 0 0;
  border-bottom: none;
}
/* ★2026-08-20 회장 지시 — 캠프 소개 블록이 다시 위로, PHILOSOPHY 가 아래로.
   위로 올라왔지만 구분선은 두지 않는다 — 바로 아래가 사진이라 8/17 과 같은 상황
   (선과 사진이 겹치면 경계가 두 번 그어진다)이기 때문. 아래 여백은 사진의
   margin-top(gap-xl)과 겹쳐 collapse 되므로 gap-lg 만 둔다. */
.dk-brand-intro--lead {
  margin: 0 0 var(--dk-gap-lg);
  padding: 0;
  border-bottom: none;
}
/* 사진 아래로 내려간 PHILOSOPHY 덩어리 — 사진 위쪽 여백(gap-xl)과 대칭을 맞춘다. */
.page-index-philo { margin-top: var(--dk-gap-xl); }
/* ※ 셀렉터에 `.dk `를 붙이는 이유 — tokens-domestic.css의 `.dk p`(특성도 0-1-1)가
   클래스 하나짜리(0-1-0) 규칙을 이겨서 p 요소용 클래스는 그냥 두면 안 먹는다.
   이 파일의 `.dk .lead`와 같은 기존 관례를 따른다. */
/* ★2026-07-29 — 같은 섹션의 두 타이틀이 크기가 달랐다(kicker 30px vs .dk-h2 36px).
   둘 다 섹션 제목 급이므로 .dk-h2와 동일한 토큰(display-lg)으로 통일하고 색으로만 구분한다. */
.dk .dk-brand-kicker {
  font: var(--dk-display-lg);
  letter-spacing: var(--dk-track-snug); color: var(--dk-accent-red); margin: 0 0 12px;
}
/* ★2026-07-29 — 같은 섹션의 다른 본문 단락(18px/400/#555)과 크기·굵기·색이 달랐다(20px/600/#1a1a1a).
   섹션 제목 아래 본문이므로 본문 주력 스타일로 통일한다. */
.dk .dk-brand-sub {
  font: var(--dk-body-lg); color: var(--dk-fg-3); line-height: 1.75;
  margin: 0; max-width: 760px;
}
/* ── 히어로 배경 영상 (★2026-08-20 회장 지시) ────────────────────────────
   🔒 _shell.css 는 안 건드린다 — 실물 영상이 있는 건 홈뿐이라 여기서 얹는다.
   하위 5페이지는 지금처럼 코발트 그라디언트 placeholder 를 그대로 쓴다. */
.dk-bg-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; display: block; }
/* ★블랙박스 — 필리핀 실측값(0.55/0.25/0.05, facility히어로영상배경.html:25)에서 한 단 올렸다.
   ⚠️ 필핀 값을 그대로 쓰면 **리드가 4.40:1 로 미달**한다(기준 4.5:1). 그 값은 필핀 영상
      위에서 검증된 것이지 우리 영상 기준이 아니다 — 우리 히어로가 더 밝다.
      "레퍼런스 값을 가져온다"가 곧 "통과한다"는 아니라는 걸 여기서 한 번 맞았다.
   실측(영상 0.2/2/4/6/8초 × 흰 글자가 실제 놓인 줄 상자):
      0.55/0.25/0.05 → h1 3.74 · 리드 4.40 ✗
      0.62/0.32/0.08 → h1 4.59 · 리드 5.45 ✓   ← 통과하는 최소값이라 이걸 쓴다
      0.70/0.42/0.12 → h1 6.07 · 리드 7.18 (통과하지만 영상이 어두워진다)
   ⚠️ 글자 전체 블록이 아니라 Range.getClientRects() 의 줄 상자로 재야 한다.
      블록으로 재면 글자 없는 오른쪽 빈 영역의 밝은 영상까지 섞여 실제보다 나쁘게 나온다.
   ⚠️ _shell.css 의 ::after 와 같은 특성도인데 이 파일이 뒤에 로드돼서 이긴다. */
.dk-bg-video-section::after {
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.08) 75%); }
/* 모바일은 글이 화면 폭을 거의 다 쓴다. 가로 그라디언트만 두면 오른쪽 글자가 밝은 영상
   위에 놓인다 → 아래에서 위로 한 겹 더 덮어 전 폭에서 대비를 확보한다.
   ★2026-08-20 2차 — 모바일 세로본으로 갈아탄 뒤 값을 올렸다. 세로본은 화면을 꽉 채우는
     대신 **더 밝은 영역까지 담아서**(야외 잔디·발표 스크린) 전 값으로는 미달했다
     (h1 3.31 · 리드 3.88). 크롭을 없앤 대가를 오버레이가 받는 셈이다.
     실측 .66/.48/.42 + 아래→위 .46@70% → h1 5.56 · 리드 6.18 ✓ (360·390·430px 전부)
     이 값은 하위 5페이지 히어로가 쓰는 것과 같다 — 사이트 모바일 블랙박스가 한 값이 된다. */
@media (max-width: 768px) {
  .dk-bg-video-section::after {
    background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.48) 60%, rgba(0,0,0,.42) 100%),
                linear-gradient(to top, rgba(0,0,0,.46) 0%, rgba(0,0,0,0) 70%); }
}
/* ⚠️ 모바일 포스터(세로본 첫 프레임)는 만들어 뒀지만 CSS 로는 못 바꾼다.
   poster 는 HTML 속성이라 뷰포트별로 못 나누고, .dk-bg-video 에 content:url() 을 걸면
   <video> 가 통째로 이미지로 대체돼 영상이 죽는다(실제로 한 번 넣었다가 되돌렸다).
   영상이 뜨기 전 잠깐 가로 포스터가 잘려 보이는데, preload="auto" 라 사실상 순간이다.
   거슬리면 JS 로 matchMedia 보고 poster 속성을 갈아 주는 방법이 있다. */
/* 모션 최소화 설정이면 영상을 재우고 포스터만 남긴다 — 배경에서 계속 움직이는 화면은
   그 설정을 켠 사람에게 가장 부담되는 종류다. */
@media (prefers-reduced-motion: reduce) {
  .dk-bg-video { display: none; }
  .dk-bg-video-section .dk-bg-video-placeholder {
    background-image: url("../video/dakgong-domestic-hero-poster.webp");
    background-size: cover; background-position: center; }
}

.dk-split {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(24px,4vw,48px); flex-wrap: wrap;
  margin-bottom: var(--dk-gap-lg);
}
.dk-split p { max-width: 300px; text-align: right; font: var(--dk-body-lg); color: var(--dk-fg-3); margin:0; line-height:1.75; }
@media (max-width: 640px) {
.dk-split { flex-direction: column; align-items: flex-start; }
.dk-split p { text-align: left; max-width: 100%; }
}
/* ── 숫자로 보는 캠프(다크형) — 필핀 실사이트 참고: 다크섹션+원형아이콘+큰숫자+설명문 ── */
.dk-stat-dark-sec { background: var(--dk-surface-dark); }
.dk-stat-dark-sec .dk-split p { color: rgba(255,255,255,0.7); }
/* ── 진학실적 ── */
/* ★2026-07-29 — 다크 표면은 --dk-surface-dark 하나로 통일. #1a1a1a는 --dk-ink(글자색)이라 배경 오용이었다. */
.dk-perf { background: var(--dk-surface-dark); }
.dk-perf-title {
  font-family: var(--dk-font-display); font-weight: 800;
  font-size: clamp(22px,3.6vw,32px); color: #fff; line-height: 1.4;
  text-align: center; margin: 0 auto var(--dk-gap-lg); max-width: 760px;
}
.dk-perf-title em { color: var(--dk-accent-red-light); font-style: normal; }
.dk-perf-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--dk-gap-lg); }
.dk-perf-badge {
  font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--dk-radius-full); padding: 8px 16px;
}
.dk-perf p.body {
  text-align: center; max-width: 640px; margin: 0 auto; color: rgba(255,255,255,0.68);
  font-size: 15px; line-height: 1.85;
}
/* ── FAQ ── */
.dk-faq-wrap { max-width: 820px; margin: 0 auto; }
.dk-faq-item { border-top: 1px solid var(--dk-hairline-soft); }
.dk-faq-item:last-child { border-bottom: 1px solid var(--dk-hairline-soft); }
.dk-faq-q {
  display: flex; align-items: center; gap: 14px; padding: 22px 4px; cursor: pointer;
  list-style: none; user-select: none;
}
.dk-faq-q::-webkit-details-marker { display: none; }
.dk-faq-q .qn { color: var(--dk-accent-red); font-weight: 700; font-size: 14px; flex-shrink: 0; min-width: 34px; }
.dk-faq-q .qt { flex: 1; font-weight: 700; font-size: 16px; color: var(--dk-ink); }
.dk-faq-q .qi { margin-left: auto; color: var(--dk-fg-muted); font-size: 20px; }
.dk-faq-a { padding: 0 4px 22px 48px; }
.dk-faq-a p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--dk-fg-3); }
/* ── 미디어 슬롯 공용 배경 (2026-07-25 근본수정)
   전: flat var(--dk-surface-soft)(#fafafa, 흰 배경 섹션 위에서 거의 안 보임) →
       "빈 회색 박스/버그"로 오인되는 원인. 실물 사진·영상은 여전히 넣지 않되(원칙 유지),
       "여기 콘텐츠 들어올 자리"임이 분명하도록 은은한 코발트 톤 그리드 패턴 + 그라디언트로 교체.
   .dk-bi-slot(브랜드 인트로 3개)/.dk-vi-card(인터뷰 4개)/.dk-pt-vis(POINT 6개)
   ※후기(.dk-tr-shot)는 2026-08-17 실물 캡처 22장이 들어와 이 그룹에서 빠졌다.
   전부 이 배경 하나로 통일 — 페이지별 담당자가 실물 넣을 땐 이 background만 지우면 됨. */
.dk-bi-slot, .dk-vi-card, .dk-pt-vis {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(20,42,77,0.10) 1.4px, transparent 0),
    linear-gradient(155deg, var(--dk-surface-cool) 0%, var(--dk-dot-cool) 55%, var(--dk-dot-cool) 100%);
  background-size: 18px 18px, 100% 100%;
  background-position: 0 0, 0 0;
}
/* ── 비디오 인터뷰 — 필핀 실사이트 gallery2 실측(우상단 재생버튼 + 좌하단 캡션 오버레이바) 재현.
   PC 3칸 그리드 / 모바일 1칸씩 수직 나열(회장 확정 2026-07-26). */
/* ★2026-08-20 회장 지시 — 3칸 → 2개 상하. 여기 있던 3열/880px 분기는 지운다.
   실제 배치는 아래 「⑥ 영상 자리」 한 벌에서만 정한다(정의를 두 군데 두지 않는다). */
.dk-vi-card {
  position: relative; aspect-ratio: 16/9; border-radius: var(--dk-radius-lg);
  border: 1.5px dashed var(--dk-hairline-cool); overflow: hidden;
  transition: transform var(--dk-dur-base) var(--dk-ease-out), border-color var(--dk-dur-base) var(--dk-ease-out);
}
.dk-vi-card:hover { transform: translateY(-4px); border-color: var(--dk-fg-muted); }
.dk-vi-play {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.85); box-shadow: 0 1px 4px rgba(20,42,77,0.15);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dk-dur-fast) var(--dk-ease-out);
}
.dk-vi-card:hover .dk-vi-play { background: var(--dk-accent-red); }
.dk-vi-card:hover .dk-vi-play svg { fill: #fff; }
.dk-vi-play svg { width: 14px; height: 14px; fill: var(--dk-fg-cool); }
/* ── 실물 영상이 들어온 칸 (★2026-08-20) ──────────────────────────────
   자리표시는 점선 테두리 + 도트 배경인데, 실물이 들어오면 그게 사진 위로 비쳐 지저분해진다.
   .dk-ph.is-filled 이 이미 쓰는 방식(점선→실선, 배경 제거)을 그대로 따른다. */
.dk-vi-card.is-filled { border-style: solid; border-color: var(--dk-hairline-soft);
  background-image: none; }
/* 파사드 버튼 — 카드 전체가 누를 수 있는 영역이다. <div> 가 아니라 <button> 인 이유는
   키보드(탭·엔터)와 스크린리더로도 재생이 되어야 하기 때문. */
.dk-vi-btn { position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: block; }
.dk-vi-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 포커스 링 — 카드 안쪽으로 넣는다(카드가 overflow:hidden 이라 밖에 그리면 잘린다). */
.dk-vi-btn:focus-visible { outline: 3px solid var(--dk-accent-red); outline-offset: -3px; }
.dk-vi-card.is-playing { transform: none; }
.dk-vi-card.is-playing:hover { transform: none; }
.dk-vi-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* 재생이 시작되면 캡션 바는 걷는다 — 유튜브가 자기 컨트롤을 하단에 그려서 겹친다. */
.dk-vi-card.is-playing .dk-vi-cap { display: none; }
/* ── 텍스트 리뷰 ── */
/* ★2026-07-26 회장 지시 — 리뷰 섹션에 필핀 review-carousel.imweb.html의 무한 롤링
   애니메이션 벤치마킹(디자인·모션만). hover 시 정지, 카드 목록을 통째로 한 번 더
   반복해 이음새 없는 루프를 만든다(롤링 자체는 JS 없이 순수 CSS).
   ★2026-08-17 — 그동안 굴리던 placeholder 카드를 닥공이 준 실물 캡처 22장으로 교체했다. */
/* ★2026-08-20 회장 지시 — CSS 애니메이션에서 JS 로 옮겼다(review.js).
   요구가 셋인데 CSS 로는 셋째가 안 된다:
     ① 손·커서 올리면 정지  ② 좌우로 밀 수 있게  ③ 민 속도만큼 미끄러지다 멈춤(관성)
   ①은 animation-play-state 로 됐지만, ②③은 매 프레임 위치를 사람이 민 만큼 바꿔야 해서
   keyframes 로는 표현이 안 된다. 그래서 위치를 JS 가 잡고 CSS 는 골격만 남긴다.
   ⚠️ 🔒 _shell.css 의 @keyframes dkReviewScroll 은 안 지웠다 — 락 파일이라 멈춰야 하고,
      쓰는 데가 없어져 무해하다. 락 파일 손댈 일 생기면 그때 같이 지운다.
   touch-action: pan-y — 가로는 우리가 먹고 세로는 브라우저에 넘긴다.
   이걸 빼면 폰에서 후기를 밀 때 페이지가 같이 스크롤돼 둘 다 어정쩡해진다. */
.dk-review-scroll { width: 100%; overflow: hidden; margin-top: var(--dk-gap-lg);
  cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.dk-review-scroll.is-dragging { cursor: grabbing; }
.dk-review-scroll-track { display: flex; gap: 20px; width: max-content; will-change: transform; }
.dk-tr-shot {
  /* ★2026-08-17 — placeholder 카드(.dk-tr-card) 폐기, 실물 캡처 22장으로 교체.
     ★높이만 고정하고 폭은 auto 다. object-fit:cover 로 칸에 맞추면 카톡 글이 잘린다.
       원본 비율 0.45~0.96 이 제각각이라 어떤 고정 비율을 잡아도 누군가는 잘린다.
       세로 스크린샷은 "덜 보이는" 게 아니라 "못 읽는" 것이 되므로 크롭 0 이 유일한 답. */
  /* ★2026-08-20 — cursor:zoom-in · hover 들림 · focus 링을 뺐다. 확대창이 없어졌으니
     누를 게 없고, 이제 이 띠는 "미는 면"이다. 카드가 커서 따라 들리면 미는 감각을 방해한다.
     커서는 띠 전체(.dk-review-scroll)가 grab/grabbing 으로 갖는다. */
  flex: 0 0 auto; height: 420px; padding: 0; background: none;
  border: 1px solid var(--dk-hairline-cool); border-radius: var(--dk-radius-lg);
  overflow: hidden; display: block;
}
/* 이미지 자체를 브라우저가 끌고 가면(네이티브 drag) 미는 동작이 끊긴다. */
.dk-tr-shot img { display: block; height: 100%; width: auto;
  -webkit-user-drag: none; user-select: none; pointer-events: none; }
@media (max-width: 880px) {
.dk-tr-shot { height: 340px; }
}
@media (max-width: 480px) {
.dk-tr-shot { height: 300px; }
}

/* ── 후기 확대창 — 2026-08-20 회장 지시로 삭제 ────────────────────────
   "왜 쓸데없이 클릭확대 기능 넣었냐". .dk-galbox 규칙 23줄 + review.js 의 확대창
   전량을 지웠다. 확대본(-full) 22장 1MB 도 이제 아무도 안 받는다.
   ⚠️ 같은 이름의 규칙이 page-life-care.css 에 따로 있다(시설 갤러리). 그건 그대로 둔다 —
      두 파일이 이름만 같을 뿐 한 페이지가 둘을 같이 부르지 않아 여기 삭제와 무관하다. */

/* ── 키포인트별 상세(좌우교차) ── */
/* ★회장 지적(2026-08-21) — POINT 1~5 는 흰/회색 교차 배경이라 **각각이 시각적으로
   독립 섹션**이다. 그런데 상하 패딩만 48~72px 로 섹션 규칙(56~96px)보다 좁아
   유독 답답해 보였다. 섹션 규칙에 맞춘다.
   감싸는 섹션의 패딩은 0 으로 넘긴다 — 안 그러면 첫·마지막 POINT 바깥에
   96px 이 한 겹 더 붙어 192px 이 된다. 여백을 만드는 주체는 이제 item 이다. */
.dk-pt-item { display: flex; padding: clamp(56px,8vw,96px) 0; }
/* ⚠️ _shell.css 의 ≤640px 규칙이 `.dk-sec { padding: 56px 0 !important }` 라
   그냥 0 을 주면 폰에서만 안 먹는다(첫 POINT 위가 56+56=112px 이 됐다).
   같은 !important 로 맞서되, 특성도가 위라 이긴다. */
section:has(> .dk-pt-wrap) { padding-block: 0 !important; }
.dk-pt-item:nth-child(odd) { background: #fff; }
.dk-pt-item:nth-child(even) { background: var(--dk-surface-card); }
.dk-pt-item--rev .dk-pt-vis { order: -1; }
.dk-pt-label { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--dk-accent-red); margin: 0 0 14px; }
.dk-pt-h { font: var(--dk-display-sm); letter-spacing: var(--dk-track-snug); color: var(--dk-ink); margin: 0 0 16px; }
.dk-pt-d { font: var(--dk-body-md); color: var(--dk-fg-3); line-height: 1.75; margin: 0 0 24px; }
.dk-pt-vis { margin-top: 8px; }
.dk-pt-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  border: 1.6px solid var(--dk-ink); border-radius: var(--dk-radius-sm);
  font-size: 14px; font-weight: 700; color: var(--dk-ink); text-decoration: none;
  transition: background var(--dk-dur-fast) var(--dk-ease-out), color var(--dk-dur-fast) var(--dk-ease-out), border-color var(--dk-dur-fast) var(--dk-ease-out);
}
.dk-pt-link:hover { background: var(--dk-accent-red); color: #fff; border-color: var(--dk-accent-red); }
.dk-pt-vis {
  aspect-ratio: 4/3; border-radius: var(--dk-radius-lg);
  border: 1.5px solid var(--dk-hairline-cool-soft);
  display: flex; align-items: center; justify-content: center;
}
/* ★2026-08-20 회장 지시 — 사진 좌측 모서리의 번호(01~05)를 전부 제거.
   "지저분한 느낌만 든다". HTML 의 <span class="num"> 5개와 함께 규칙도 지운다. */
@media (max-width: 640px) {
.dk-pt-item--rev .dk-pt-vis { order: 0; }
}
/* ── 연혁 타임라인 — 필핀 실사이트(dakgongcamp.com) .dk-history 컴포넌트 원본 그대로,
   색만 레드(#ab0000)→코발트(--dk-accent-red, 국내파생) 치환. 레이아웃·폭·타이포 무변경. ── */
.dk-history { background: #fff; padding: clamp(56px, 9vw, 96px) 0; }
.dk-history__wrap { max-width: 1280px; margin: 0 auto; padding: 0; box-sizing: border-box; }
.dk-history__inner { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: clamp(40px, 5vw, 88px); align-items: start; }
.dk-history__head { position: sticky; top: 48px; }
.dk-history__label { font: 700 15px/30px 'Pretendard',sans-serif; letter-spacing: normal; color: var(--dk-accent-red); margin: 0 0 10px; }
.dk-history__label span { color: #d0d0d0; margin: 0 6px; font-weight: 400; }
.dk-history__label em { color: #333; font-style: normal; }
.dk-history__title {
  font-family: 'Paperlogy','Pretendard',sans-serif !important;
  font-size: 36px !important; font-weight: 700 !important; line-height: 1.2 !important;
  letter-spacing: -0.5px !important; color: #1A1A1A !important; margin: 0;
}
.dk-history__sub { font: 400 18px/1.35 'Pretendard',sans-serif; color: #555; margin: 16px 0 0; text-align: left; word-break: keep-all; }
.dk-history__timeline { list-style: none; margin: 0 0 0 auto; padding: 0; min-width: 0; width: 100%; max-width: 560px; }
.dk-history__item { position: relative; display: grid; grid-template-columns: 84px 28px 1fr; gap: clamp(10px, 1.6vw, 18px); padding-bottom: 30px; }
.dk-history__item:last-child { padding-bottom: 0; }
.dk-history__year { font: 800 26px/1.1 'Paperlogy','Pretendard',sans-serif; color: #1A1A1A; letter-spacing: -0.5px; text-align: right; padding-top: 1px; }
.dk-history__rail { position: relative; }
.dk-history__rail::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 6px; bottom: -30px; width: 2px; background: #e8e8e8; }
.dk-history__item:last-child .dk-history__rail::before { display: none; }
.dk-history__rail::after { content: ""; position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--dk-accent-red); box-sizing: border-box; }
.dk-history__events { padding-top: 1px; display: flex; flex-direction: column; gap: 7px; }
.dk-history__event { font: 500 15.5px/1.55 'Pretendard',sans-serif; color: #333; margin: 0; word-break: keep-all; }
.dk-history__item--soon .dk-history__year { color: var(--dk-accent-red); }
.dk-history__item--soon .dk-history__rail::after { background: var(--dk-accent-red); }
@media (max-width: 768px) {
.dk-history__wrap { padding: 0 20px; }
.dk-history__inner { display: block; }
.dk-history__head { position: static; margin-bottom: var(--dk-gap-lg); }
.dk-history__timeline { max-width: none; margin-left: 0; }
.dk-history__label { font-size: 13px; }
.dk-history__title { font-size: 26px !important; }
.dk-history__sub { font-size: 15px; line-height: 1.55; }
.dk-history__item { grid-template-columns: 52px 22px 1fr; }
.dk-history__year { font-size: 19px; }
.dk-history__event { font-size: 14px; }
.dk-history__rail::after { width: 11px; height: 11px; }
}
/* ── ④ 한눈에 보기 — 번호 블록 + 아이콘 라벨 + 값 ── */
@media (max-width: 560px) {
/* ★2026-08-17 — 번호 블록이 칸의 위 절반(48/96px)만 덮어 L 자로 파여 있었다.
   2열로 바꾸면서 값을 2행으로 내렸는데 번호 블록에 grid-row 를 안 줘서
   1행만 차지한 것. 0순위 7 「부분 초기화 금지」 그대로다.
   PC(3열)에선 세 칸이 한 행이라 안 드러나고 ≤560px 에서만 보인다. */
/* ⚠️ `1 / -1` 은 안 먹는다 — grid-template-rows 가 없어 암시적 행이라
      -1 이 가리킬 끝선이 없다(1/1 로 접힌다). span 으로 세야 한다. */
}
/* ── ⑤ 숫자 섹션(다크) — 핵심/확장 허브 + 252시간 + 10명 중 6명 ── */
.dk-hub-grp { display: flex; align-items: center; gap: 9px; max-width: 340px; margin: 0 auto 4px; }
.dk-hub-grp i { width: 10px; height: 10px; border-radius: 50%; background: var(--dk-accent-red-light); flex: none; }
.dk-hub-grp i.hollow { background: transparent; border: 1.7px solid rgba(255,255,255,.45); }
.dk-hub-grp .t { font-size: 11px; font-weight: 700; letter-spacing: .9px; color: rgba(255,255,255,.72); }
.dk-hub-grp .r { flex: 1; height: 1px; background: rgba(255,255,255,.16); }
.dk-orbit { position: relative; width: min(300px, 78vw); aspect-ratio: 1; margin: var(--dk-gap-xs) auto 0; }
.dk-orbit .ring { position: absolute; inset: 0; border: 1px dashed rgba(255,255,255,.2); border-radius: 50%; }
.dk-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 65%; aspect-ratio: 1; border-radius: 50%; padding: 10px; text-align: center;
  background: radial-gradient(circle at 40% 32%, var(--dk-accent-red-light) 0%, var(--dk-accent-red) 70%);
  box-shadow: 0 14px 40px rgba(15,82,201,.45), 0 0 0 10px rgba(81,135,232,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dk .dk-core .k { font-size: 12px; font-weight: 700; color: #fff; opacity: .92; margin: 0 0 5px; line-height: 1.3; }
.dk-core .v { font-size: clamp(34px,10vw,46px); font-weight: 700; letter-spacing: -2.2px; line-height: .95; color: #fff; }
.dk-core .v u { text-decoration: none; font-size: .35em; }
.dk-chipx { position: absolute; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.28);
  border-radius: var(--dk-radius-full); padding: 8px 14px 8px 11px; }
.dk-chipx .b { width: 8px; height: 8px; border-radius: 50%; border: 1.7px solid rgba(255,255,255,.55); flex: none; }
.dk-chipx .t { font-size: 10.5px; color: rgba(255,255,255,.66); line-height: 1.2; }
.dk-chipx .n { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.5px; }
.dk-chipx .n u { text-decoration: none; font-size: .62em; font-weight: 600; color: rgba(255,255,255,.66); }
.dk-chipx.p1 { left: -5%; top: 5%; }
 .dk-chipx.p2 { right: -7%; bottom: 8%; }
.dk .dk-hub-cap { text-align: center; margin: var(--dk-gap-sm) auto 0; max-width: 440px; font-size: 13px; color: rgba(255,255,255,.78); }
.dk .dk-hub-cap b { color: #fff; font-weight: 700; }
.dk-hub-badge { display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid var(--dk-accent-red-light);
  border-radius: var(--dk-radius-full); padding: 7px 16px; margin: 12px 0 0; }
.dk-hub-badge span { font-size: 11.5px; font-weight: 700; color: var(--dk-accent-onDark); letter-spacing: .4px; }
.dk-hub-badge b { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -.6px; }
.dk-hub-badge b u { text-decoration: none; font-size: .62em; font-weight: 600; color: var(--dk-accent-onDark); }
.dk-duo { display: grid; gap: 1px; background: rgba(255,255,255,.12); margin-top: var(--dk-gap-md); border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 640px) {
.dk-duo { grid-template-columns: 1fr 1fr; }
}
.dk-duo-cell { background: var(--dk-surface-dark); padding: 26px 14px 22px; text-align: center; }
.dk .dk-duo-cell .cl { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); margin: 0 0 8px; }
.dk-glowstat { position: relative; display: flex; align-items: center; justify-content: center; height: 118px; overflow: hidden; }
.dk-glowstat::before { content: ""; position: absolute; width: 250px; height: 118px; filter: blur(7px);
  background: radial-gradient(ellipse at center, rgba(81,135,232,.42) 0%, rgba(81,135,232,.12) 42%, transparent 72%); }
.dk-glowstat .n { position: relative; font-size: clamp(56px,15vw,76px); font-weight: 700; letter-spacing: -3.5px; line-height: 1; color: #fff; }
.dk-glowstat .n u { text-decoration: none; font-size: .3em; letter-spacing: -1px; margin-left: 2px; color: var(--dk-accent-onDark); }
.dk-eq { display: inline-flex; background: rgba(255,255,255,.09); border-radius: var(--dk-radius-full);
  padding: 8px 15px; margin: 5px 0 0; font-size: 13px; color: rgba(255,255,255,.82); }
.dk-eq b { color: #fff; font-weight: 700; }
.dk .dk-head6 { font-family: var(--dk-font-display); font-weight: 800; font-size: clamp(22px,6vw,28px);
  letter-spacing: -.9px; color: #fff; margin: 3px 0 0; line-height: 1.28; }
.dk-head6 em { font-style: normal; color: var(--dk-accent-red-light); }
/* ★2026-07-30 — 320px에서 가로 스크롤 22px의 원인이었다(직전 배포에도 있던 기존 결함).
   아이콘 10개 × 24px + gap 6px×9 = 294px가 min-content로 굳어 그리드 칸을 322px로 밀어냈다
   (320px 화면인데 칸이 322px). → 좁은 폭에서 아이콘·간격을 줄이고 줄바꿈을 허용한다. */
.dk-ppl { display: flex; justify-content: center; gap: 6px; margin: 16px 0 0;
  flex-wrap: wrap; min-width: 0; }
.dk-ppl svg { width: 24px; height: 30px; display: block; }
@media (max-width: 420px) {
.dk-ppl { gap: 4px; }
.dk-ppl svg { width: 18px; height: 23px; }
}
.dk-duo-cell { min-width: 0; }
.dk-ppl .on path { fill: var(--dk-accent-red-light); }
.dk-ppl .off path { fill: rgba(255,255,255,.16); }
.dk .dk-dnote { font-size: 12px; color: rgba(255,255,255,.55); margin: 13px 0 0; line-height: 1.55; }
.dk-strip { margin-top: var(--dk-gap-md); display: grid; grid-template-columns: repeat(2,1fr); gap: 1px;
  background: rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 560px) {
.dk-strip { grid-template-columns: repeat(4,1fr); }
}
.dk-strip > div { background: var(--dk-surface-dark); padding: 17px 8px; text-align: center; }
.dk-strip .v { font-size: clamp(17px,4.4vw,21px); font-weight: 700; color: #fff; letter-spacing: -.8px; line-height: 1; }
.dk-strip .v u { text-decoration: none; font-size: .46em; color: rgba(255,255,255,.6); font-weight: 600; }
.dk .dk-strip .k { font-size: 11px; color: rgba(255,255,255,.55); margin: 6px 0 0; }
/* ── ⑥ 영상 자리 — 2개를 상하로 (★2026-08-20 회장 지시) ──────────────────
   전에는 「큰1 + 작은2」 비대칭 3칸이었고, 비율·배치 재정의가 base·880·480·1023·1024
   다섯 군데에 흩어져 있었다(그래서 7/29 에 height:100% 가 1열에서 2px 로 붕괴하는
   회귀가 났다). 2개 상하는 분기가 필요 없다 — 폭이 얼마든 1열 2행이고 비율도 하나다.
   흩어진 정의를 전부 지우고 이 한 벌만 남긴다.
   · 왜 상하인가 — 좌우로 놓으면 두 썸네일이 나란히 놓여 통일 안 된 게 바로 드러난다.
     상하면 둘이 같은 폭·같은 비율이라 규격이 하나가 된다.
   · 16:9 = 영상 원본 비율. 썸네일을 안 자른다(다른 비율을 걸면 인물 얼굴이 잘린다).
   · 폭 — 처음엔 1280 을 다 썼는데 회장 지적 "PC 에서 영상 화면 너무 크다"(한 칸 1280x720).
     ★그래서 PC 에서만 880px 로 줄이되 반드시 가운데로 둔다(margin-inline:auto).
       좌측 정렬로 좁히면 우측만 400px 비어 「우측 죽은 공간」이 된다 —
       920px 좌측정렬을 재 봤을 때 좌80 우440 이었다. 가운데면 좌우가 280/280 으로 맞는다.
     모바일·태블릿은 원래 폭을 다 쓰는 게 맞으므로 제한을 PC 구간에만 건다.
   · 모서리 — radius-lg(16px) → radius-sm(8px). 회장 "야악간 라운드".
     영상은 카드가 아니라 화면이라 카드 라운드를 그대로 쓰면 둥글어 보인다.
     캡션 바 아래 모서리도 같이 맞춰야 한다(안 맞추면 바가 카드 밖으로 튀어나온 것처럼 보인다). */
/* ★2026-08-20 회장 지시 "영상 두 개 높이 간격이 너무 좁다 — 두 배로".
   16px 은 내가 그때 지어 넣은 raw 값이었다(여백도 토큰에서 고른다는 규칙 위반).
   두 배 자리에 있는 스케일 단이 --dk-gap-md(clamp 26~34px)라 그걸로 바꾼다.
   실측 — 1440px 34px · 768px 26px · 390px 26px. */
.dk-vi-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto;
  gap: var(--dk-gap-md); }
.dk-vi-grid .dk-vi-card { position: relative; height: auto; aspect-ratio: 16/9;
  border-radius: var(--dk-radius-sm); }
.dk-vi-grid .dk-vi-cap { border-radius: 0 0 var(--dk-radius-sm) var(--dk-radius-sm); }
@media (min-width: 1024px) {
  .dk-vi-grid { max-width: 880px; margin-inline: auto; }
}
.dk-vi-cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(26,26,26,.74); color: #fff;
  padding: 8px 11px; font-size: 11.5px; font-weight: 600; line-height: 1.4; text-align: left;
  border-radius: 0 0 var(--dk-radius-md) var(--dk-radius-md); }
.dk-vi-play { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--dk-accent-red); display: flex; align-items: center; justify-content: center; }
.dk-vi-play svg { width: 12px; height: 12px; fill: #fff; }
/* ── ⑦ POINT 시각 — 뒤에 코발트 블록 오프셋 ── */
.dk-pt-vis { position: relative; aspect-ratio: auto; border: none; background: none; margin-top: 8px; padding: 0 14px 14px 0; display: block; }
.dk-pt-vis::before { content: ""; position: absolute; left: 16px; top: 16px; right: 0; bottom: 0;
  background: var(--dk-accent-red); border-radius: var(--dk-radius-lg); }
.dk-pt-vis .card { position: relative; aspect-ratio: 4/3; border-radius: var(--dk-radius-lg);
  border: 1.5px solid var(--dk-hairline-cool-soft); background: #fff;
  background-image: radial-gradient(var(--dk-dot-cool) 1px, transparent 1px); background-size: 11px 11px;
  display: flex; align-items: center; justify-content: center; color: var(--dk-fg-cool-soft); font-size: 12px; }
/* ★2026-08-17 — POINT 01~05 에 실물 사진이 들어왔다.
   자리표시일 때의 점 패턴 배경을 끄고 사진이 칸을 채우게 한다.
   칸 4:3 vs 사진 1.498:1 → 89% 남는다(검사 기준 75%). 전 폭에서 칸 비율이 안 바뀌어
   PC/모바일이 따로 놀지 않는다 — .dk-ph-split(51%) 이 났던 문제가 여기선 구조상 안 난다. */
.dk-pt-vis .card.is-filled { background: none; display: block; overflow: hidden; padding: 0; }
/* ★padding:0 이 없으면 사진이 칸을 25px씩 못 채운다.
   tokens 의 `.dk .card` 가 padding: var(--dk-space-lg) 를 들고 있는데
   `.dk-pt-vis .card` 는 padding 을 아예 선언하지 않아 그 값이 그대로 살아 있었다.
   자리표시(가운데 정렬된 글자)일 땐 티가 안 났고 실물 사진이 들어와서야 드러났다 —
   실측 칸 590x443 인데 사진은 540x393 이었다. `.card` 는 이름이 너무 흔해서 또 물릴 자리다. */
.dk-pt-vis .card > img { width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: inherit; }
/* (2026-08-20 회장 지시로 .dk-pt-vis .num 규칙 삭제 — 위 주석 참조) */
/* ── 슬롯 비율 브레이크포인트 (★2026-07-29 정리) ──
   기존엔 560/640/768/880에 비율 재정의가 흩어져 있어, 폰용 세로 비율이 태블릿까지 흘러가
   768px에서 이미지 하나가 816px, tri 한 덩어리가 950px까지 길어졌다.
   → 경계를 둘로만 둔다.  ≤480px 폰 = 세로형 / 481~1023px 태블릿 = 완만한 가로형 / ≥1024px = PC(위 블록) */
@media (max-width: 480px) {
}
@media (min-width: 481px) and (max-width: 1023px) {
  /* (2026-08-20 — 인터뷰 2개 상하로 바뀌어 여기 있던 .dk-vi-grid 분기 3줄 삭제.
     3장을 접는 문제가 사라졌다. 폭과 무관하게 1열 2행 하나다.) */
}
/* ── PC 슬롯 높이 상한 (2026-07-29) ──
   aspect-ratio만 두면 1440px에서 슬롯 하나가 836px까지 커져 화면을 거의 다 먹었다.
   폭이 넓어질수록 비율 대신 상한이 걸리게 해서 블록 높이를 뷰포트의 ~70% 아래로 묶는다. */
/* ★2026-07-29 2차 수정 — 처음엔 max-height로 높이를 눌렀는데, aspect-ratio가 걸린 칸은
   높이를 누르면 폭도 같이 줄어서 컬럼보다 좁아진다. 그 결과 우측에 죽은 공간이 생겼다
   (1440px에서 tri 780px 컬럼에 카드가 698px). → 상한 대신 "완만한 비율"로 높이를 잡는다.
   비율은 폭을 100% 채우면서 높이만 낮추므로 빈 공간이 안 생긴다. */
@media (min-width: 1024px) {
  /* (2026-08-20 — .dk-vi-grid 첫 칸 예외 삭제. 두 칸이 같은 규격이라 예외가 없다.) */
}

/* ★2026-08-03 — HTML 인라인 여백을 클래스로 옮김. 값은 원래대로(전부 토큰이었다).
   인라인이면 여백을 바꿀 때 HTML 여러 곳을 찾아다녀야 한다. */
.dk .page-index-intro { font: var(--dk-body-lg); color: var(--dk-fg-3); line-height: 1.75; margin: var(--dk-gap-sm) 0 0; max-width: 720px; }
.dk .page-index-badges { margin-top: var(--dk-gap-md); }
.dk .page-index-qahead { text-align: center; max-width: 640px; margin: 0 auto; }
.dk .page-index-qahead .lead { margin-top: var(--dk-gap-sm); }
.dk .page-index-faqcat { margin: var(--dk-gap-lg) auto var(--dk-gap-xs); max-width: 820px; }

/* ══════════════════════════════════════════════════════════════
   캠프 한눈에 보기 (.dk-glance) — 2026-08-17 재설계
   PC = 가로 5칸(원형 배지가 카드 위로 걸침) · ≤1023px = 세로 스택(좌측 아이콘)

   ★ 위계를 뒤집었다 — 라벨(대상)은 작게, 값(중1~고3학년)은 크게.
     레퍼런스는 제목이 '주장'이라 컸지만 닥공은 라벨이 '분류'다.
   ★ 아이콘은 블랙, 값이 포인트 컬러다. 아이콘이 시선을 먼저 먹으면
     정작 정보인 값이 뒤로 밀린다. (「면에 코발트 5곳」 규칙은 배경 얘기라
     글자·아이콘 색에는 안 걸린다)
   ★ 마크업은 하나. DOM 은 badge → dash → txt(head, value) 고,
     PC 에서만 .dk-glance-txt 를 display:contents 로 풀어 order 로 세운다.
     그래야 같은 dash 하나가 PC 는 라벨 아래 가로선, 모바일은 아이콘 옆 세로선이 된다.
   ★ 카드 높이는 가장 큰 것(2줄짜리)에 전부 맞춘다 —
     PC 는 값의 flex:1, 모바일은 격자의 grid-auto-rows:1fr. 한쪽만 걸면 안 된다.
   ⚠️ 5열은 1280 에서 칸이 243px 다. 768 에서 5열이면 125px 로 찌그러져
      값이 4줄이 된다. 세로 스택을 1023px 까지 끌고 간다.
══════════════════════════════════════════════════════════════ */
/* ⚠️ 바로 아래 「숫자로 보는 닥공캠프」가 이미 다크(#2a2a2a)다.
   여길 다크로 하면 1,902px 가 한 덩어리로 붙어 섹션이 끝없이 길어 보인다.
   원래 이 사이트는 연속 두 섹션이 같은 배경인 데가 한 곳도 없었다 — 그 리듬을 지킨다. */
.dk-glance-sec { background: var(--dk-surface-card); }




.dk-glance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin-top: calc(var(--dk-gap-lg) + 26px); }
/* ★ 카드 껍데기는 사이트 기존 패턴을 그대로 쓴다 — 연회색 섹션 위 흰 카드는
   .dk-table-wrap 이 이미 쓰던 조합이다(흰 배경 + radius-md + hairline-soft 테두리
   + 0 2px 10px 그림자). 배경과 카드가 1.09:1 이라 명도로는 안 갈리는데,
   사이트는 그걸 테두리와 그림자로 풀고 있었다. 새로 지어내지 않는다. */
.dk-glance-card { position: relative; background: #fff;
  border-radius: var(--dk-radius-md); border: 1px solid var(--dk-hairline-soft);
  box-shadow: 0 2px 10px rgba(20,40,90,.06);
  padding: 52px 16px 24px; display: flex; flex-direction: column;
  align-items: center; text-align: center; }
.dk-glance-txt { display: contents; }
.dk-glance-head { order: 1; }
.dk-glance-dash { order: 2; }
.dk-glance-v    { order: 3; }

/* 원형 배지 — 카드 위로 걸친다. 카드에 overflow:hidden 을 걸면 잘리므로 안 건다. */
/* ★2026-08-20 회장 지시 — 배지 원이 안 보였다. 배지도 카드도 #fff 라 아래 절반은 1.00:1,
   위 절반은 섹션배경(#f5f5f5)과 1.09:1. 원의 윤곽을 그릴 게 그림자뿐인데 그 알파가
   카드와 같은 .06 이라 사실상 투명했다. 8/17 에 카드 껍데기를 그대로 복제하면서
   "카드는 테두리+그림자로 푼다"는 부분을 배지에 안 옮긴 것이 원인.
   → 테두리(선을 하나 더 긋는 것) 대신 그림자를 살려 "살짝 떠 있게" 한다(회장 선택 2안).
     색은 새로 안 만든다 — 카드와 같은 rgba(20,40,90,…) 이고 알파만 .06 → .14.
     두 겹인 이유: 넓은 쪽(6/14)이 뜬 거리를, 좁은 쪽(2/4)이 원의 가장자리를 만든다.
     한 겹만 쓰면 번지기만 하고 윤곽이 안 잡힌다.
   ※ 그림자는 명도 단서라 색약 기준에서도 안전하다. */
.dk-glance-badge { position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 68px; height: 68px; border-radius: 50%; background: #fff;
  box-shadow: 0 6px 14px rgba(20,40,90,.14), 0 2px 4px rgba(20,40,90,.10);
  display: grid; place-items: center; }
.dk-glance-badge svg { width: 30px; height: 30px; stroke: var(--dk-ink);
  fill: none; stroke-width: 1.7; }

.dk-glance-head { display: flex; align-items: baseline; gap: 7px; margin: 0; }
.dk .dk-glance-no { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--dk-fg-muted); font-variant-numeric: tabular-nums; }
.dk .dk-glance-k { font-size: 13.5px; font-weight: 600; color: var(--dk-fg-3); }
/* ★2026-08-20 회장 지시 "바가 좀 더 길었으면" → 18px → 56px.
   18px 에는 근거가 없었다(주석도 토큰도 없는 하드코딩). 배지 30px 아이콘보다도 짧아
   구분선이 아니라 티끌로 읽혔다.
   56px 인 이유 — 라벨 행(「01 대상」·「02 학습량」)의 폭과 거의 같다. 그래서 라벨에
   딸린 밑줄로 읽히고, 위의 배지 68px → 56px → 값 순으로 폭이 좁아지는 테이퍼가 된다.
   ⚠️ 라벨 글자수는 칸마다 다르지만 선은 5칸 전부 같은 값으로 고정한다 —
      병렬 세트 안에서 값이 갈리면 안 된다(라벨 폭에 맞추면 5칸이 제각각이 된다).
   ※ 카드 폭 전체(align-self:stretch)도 봤는데, 5칸이 전부 가로줄로 잘려 표처럼 보였다. */
.dk-glance-dash { width: 56px; height: 1px; background: var(--dk-hairline);
  margin: 11px 0; flex: none; }
.dk .dk-glance-v { flex: 1; font-size: 18px; font-weight: 700; line-height: 1.5;
  color: var(--dk-accent-red); margin: 0; word-break: keep-all; }

@media (max-width: 1023px) {
  .dk-glance { grid-template-columns: 1fr; grid-auto-rows: 1fr;
    gap: 10px; margin-top: var(--dk-gap-lg); }
  .dk-glance-card { flex-direction: row; align-items: center; text-align: left;
    padding: 16px 18px; gap: 15px; height: 100%; }
  .dk-glance-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .dk-glance-head, .dk-glance-dash, .dk-glance-v { order: 0; }
  .dk-glance-badge { position: static; transform: none; width: 52px; height: 52px;
    box-shadow: none; background: var(--dk-surface-card); flex: none; }
  .dk-glance-badge svg { width: 25px; height: 25px; }
  .dk-glance-dash { width: 1px; height: 44px; margin: 0; }
  .dk .dk-glance-v { flex: none; font-size: 17px; }
}


/* ── PHILOSOPHY 사진 밴드 (2026-08-17 회장 지시) ──────────────
   원칙 문단과 캠프 소개 블록 사이에 수업 전경 한 장.
   ⚠️ 원본이 1.50:1 이라 칸 비율이 여기서 멀수록 잘린다.
      PC 16:9 → 84% 남음 · 모바일 3:2 → 100% (안 자름).
      2:1 은 75% 라 기준선이고, 21:9 는 64% 로 미달이다.
   껍데기는 위 카드와 같은 패턴(radius-md + hairline-soft). */
/* ⚠️ figure 기본값이 margin: 1em 40px 이라 좌우가 40px 씩 파먹힌다
   (390px 에서 사진이 350 → 268px 로 줄었다). 좌우를 0 으로 명시한다. */
.page-index-philo-shot { margin: var(--dk-gap-xl) 0 0; border-radius: var(--dk-radius-md);
  overflow: hidden; border: 1px solid var(--dk-hairline-soft); }
.page-index-philo-shot img { display: block; width: 100%; height: 100%;
  object-fit: cover; aspect-ratio: 3 / 2; }
@media (min-width: 1024px) {
  .page-index-philo-shot img { aspect-ratio: 16 / 9; }
}

/* ── 재참가율 사람 아이콘이 한 칸씩 채워짐 (2026-08-20 회장 지시) ──────────
   6명이 한꺼번에 켜지면 "6"이 안 읽힌다. 왼쪽부터 차례로 켜져야 세는 게 된다.
   .dk-duo 가 [data-reveal] 이라 화면에 들어올 때 .is-in 을 받는다 — 그걸 방아쇠로 쓴다.
   ★꺼진 색에서 켜진 색으로 fill 을 넘긴다. 투명도로 처리하면 다크 배경이 비쳐
     회색 아이콘(.off)과 구분이 흐려진다.
   ★간격 130ms — 6칸이 0.78초에 다 켜진다. 더 벌리면 마지막 칸이 늦어 답답하고,
     좁히면 한꺼번에 켜진 것처럼 보인다. */
@media (prefers-reduced-motion: no-preference) {
  .dk-ppl .on path { fill: rgba(255,255,255,.16);
    transition: fill .45s var(--dk-ease-out); }
  .dk-duo.is-in .dk-ppl .on path { fill: var(--dk-accent-red-light); }
  .dk-duo.is-in .dk-ppl .on:nth-child(1) path { transition-delay: .18s; }
  .dk-duo.is-in .dk-ppl .on:nth-child(2) path { transition-delay: .31s; }
  .dk-duo.is-in .dk-ppl .on:nth-child(3) path { transition-delay: .44s; }
  .dk-duo.is-in .dk-ppl .on:nth-child(4) path { transition-delay: .57s; }
  .dk-duo.is-in .dk-ppl .on:nth-child(5) path { transition-delay: .70s; }
  .dk-duo.is-in .dk-ppl .on:nth-child(6) path { transition-delay: .83s; }
}
/* 숫자가 1→3 자리로 늘 때 폭이 들썩이지 않게 자릿수 폭을 고정한다. */
.dk-glowstat .n { font-variant-numeric: tabular-nums; }