/* _legacy.css — site.css 에서 분리(2026-08-03). 내용 무변경, 위치만 이동.
   불러오는 순서: tokens → _shell → _components → _legacy → page-*
   ⚠️ 7페이지 어디에서도 안 쓰이는 규칙. 쪼개기를 '순수 이동'으로 유지하려고
   지우지 않고 여기 모아뒀다. 삭제 여부는 별도 판단. */
/* ── 하루의 흐름 (3단) ── */
.dk-g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.dk-flow-card {
  background: #fff; border-radius: var(--dk-radius-lg); padding: 32px 28px;
  border: 1px solid var(--dk-hairline-soft);
  transition: transform var(--dk-dur-base) var(--dk-ease-out), box-shadow var(--dk-dur-base) var(--dk-ease-out);
}
.dk-flow-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
.dk-flow-card .tod {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--dk-accent-red); background: var(--dk-accent-red-bg);
  border-radius: var(--dk-radius-full); padding: 5px 14px; margin-bottom: 16px;
}
.dk-flow-card p { margin: 0; font-size: 16px; color: var(--dk-ink); font-weight: 600; line-height: 1.6; }
.dk-flow-arrow { text-align: center; color: var(--dk-fg-muted); font-size: 22px; }
@media (max-width: 768px) {
.dk-flow-arrow { transform: rotate(90deg); }
}
.dk-stat-dark-list { display: flex; flex-direction: column; gap: 0; }
.dk-stat-dark-item { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.dk-stat-dark-item:last-child { border-bottom: none; }
.dk-stat-dark-icon {
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--dk-accent-red);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dk-stat-dark-icon svg { width: 24px; height: 24px; stroke: var(--dk-accent-red); stroke-width: 1.8; fill: none; }
.dk-stat-dark-num { font-family: var(--dk-font-display); font-size: clamp(24px,3vw,30px); font-weight: 800; color: var(--dk-accent-onDark); line-height: 1; }
.dk-stat-dark-num span { font-size: 16px; font-weight: 600; margin-left: 2px; }
.dk-stat-dark-desc { font-size: 14px; color: rgba(255,255,255,0.72); margin: 6px 0 0; line-height: 1.6; }
@media (max-width: 640px) {
.dk-stat-dark-item { grid-template-columns: 48px 1fr; gap: 14px; }
.dk-stat-dark-icon { width: 44px; height: 44px; }
.dk-stat-dark-icon svg { width: 20px; height: 20px; }
}
/* ── 브랜드 인트로 ── */
.dk-bi-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,60px);
  align-items: center; margin-top: var(--dk-gap-xl);
}
.dk-bi-row--rev .dk-bi-media { order: 2; }
.dk-bi-slot {
  position: relative; aspect-ratio: 4/3; border-radius: var(--dk-radius-lg);
  border: 1.5px dashed var(--dk-hairline-cool);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 24px;
  transition: border-color var(--dk-dur-base) var(--dk-ease-out), box-shadow var(--dk-dur-base) var(--dk-ease-out);
}
.dk-bi-slot:hover { border-color: var(--dk-fg-muted); box-shadow: inset 0 0 0 1px rgba(20,42,77,0.06); }
.dk-bi-slot svg { width: 32px; height: 32px; stroke: var(--dk-fg-cool); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dk-bi-st { font: var(--dk-display-sm); letter-spacing: var(--dk-track-snug); color: var(--dk-ink); margin: 0 0 14px; }
.dk-bi-st em { color: var(--dk-accent-red); font-style: normal; }
.dk-bi-rp { font: var(--dk-body-lg); color: var(--dk-fg-3); line-height: 1.85; margin: 0; max-width: 460px; }
.dk-bi-close {
  margin: var(--dk-gap-xl) auto 0; max-width: 760px; text-align: center;
  font: var(--dk-title-lg); font-weight: 700; color: var(--dk-ink); line-height: 1.55;
}
.dk-bi-close em { color: var(--dk-accent-red); font-style: normal; }
@media (max-width: 640px) {
.dk-bi-row { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
.dk-bi-row--rev .dk-bi-media { order: 0; }
}
.dk-vi-todo {
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  font-size: 12.5px; color: #fff; background: rgba(20,20,20,0.55); border-radius: 8px;
  padding: 8px 12px; margin: 0; line-height: 1.5; backdrop-filter: blur(2px);
}
.dk-tr-section { width: 100%; overflow-x: auto; margin-top: var(--dk-gap-lg); padding-bottom: 8px; }
.dk-tr-track { display: flex; gap: 20px; padding: 0 clamp(20px,5vw,48px); width: max-content; }
/* 아코디언 — 학습 시스템 6대 수업 */
.dk-course-list { border-top: 1px solid var(--dk-hairline-soft); }
.dk-course-item { border-bottom: 1px solid var(--dk-hairline-soft); }
/* ★2026-07-29 — 1280px에서 가로 스크롤 6px이 생기던 원인.
   [open]일 때 '+' 아이콘이 45° 회전하는데, transform은 레이아웃 폭에 반영되지 않아
   회전 후 바운딩 박스만 10px 커져 컨테이너 밖으로 나갔다. ≥1280px에선 .dk-wrap 패딩이 0이라
   그 10px이 그대로 문서 스크롤이 됐다. → 아이콘을 고정 정사각으로 묶고 좌우 여유를 준다. */
.dk-course-q { display: flex; align-items: center; gap: 16px; padding: 22px 8px; cursor: pointer; list-style: none; }
.dk-course-q::-webkit-details-marker { display: none; }
.dk-course-tag { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--dk-fg-2); background: var(--dk-surface-elevated); border-radius: var(--dk-radius-full); padding: 5px 12px; white-space: nowrap; }
.dk-course-title { flex: 1; font: var(--dk-title-lg); color: var(--dk-ink); }
.dk-course-title em { color: var(--dk-fg-muted); font-style: normal; font-size: 14px; font-weight: 400; margin-left: 6px; }
.dk-course-icon { margin-left: auto; color: var(--dk-fg-muted); font-size: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; line-height: 1; transition: transform var(--dk-dur-base) var(--dk-ease-out), color var(--dk-dur-base) var(--dk-ease-out); }
.dk-course-item[open] .dk-course-icon { transform: rotate(45deg); color: var(--dk-accent-red); }
.dk-course-a { padding: 0 4px 28px; }
.dk-course-a ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.dk-course-a li { font-size: 15px; color: var(--dk-fg-3); line-height: 1.7; }
@media (max-width: 640px) {
.dk-course-q { gap: 10px; }
.dk-course-title { font-size: 16px; }
}
.dk-history__soon { display: inline-block; margin-left: 8px; font: 700 11px/1 'Pretendard',sans-serif; color: var(--dk-accent-red); background: var(--dk-accent-red-bg); border-radius: 100px; padding: 4px 9px; vertical-align: middle; }
/* 관리시스템 5축 — 흰/연회색 교차 섹션 */
.dk-axis-sec:nth-of-type(even) { background: var(--dk-surface-card); }
/* ── CONTACT 페이지 (2026-07-25 회장 6차 지적 반영 — 필핀 실사이트(/26) 그대로 재현)
   필핀 원본 실측(Playwright, www.dakgongcamp.com/26): 회색(#F9F9F9) 히어로에 제목 한 줄만,
   전화/카카오/이메일 카드 없음, 폼 하나(개인정보동의 체크박스+이름+연락처+내용+제출)뿐.
   기존 .dk-contact-direct(전화/카카오/이메일 3카드)는 원본에 없는 요소라 마크업에서 제거.
   규칙은 다른 곳에서 참조할 수 있어 남겨둔다(미사용). ── */
.dk-contact-direct { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: var(--dk-gap-lg); }
.dk-contact-direct a {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--dk-surface-card); border: 1px solid var(--dk-hairline-soft);
  border-radius: var(--dk-radius-lg); padding: 22px 22px 24px;
  text-decoration: none; color: var(--dk-ink);
  transition: border-color var(--dk-dur-fast) var(--dk-ease-out);
}
.dk-contact-direct a:hover { border-color: var(--dk-accent-red); }
/* ── 스크롤 등장(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].is-in { opacity: 1; transform: translateY(0); }
[data-reveal="stagger"].is-in > * { opacity: 1; transform: translateY(0); }
[data-reveal="stagger"].is-in > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal="stagger"].is-in > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal="stagger"].is-in > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal="stagger"].is-in > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal="stagger"].is-in > *:nth-child(6) { transition-delay: 0.4s; }
[data-reveal="stagger"].is-in > *:nth-child(7) { transition-delay: 0.48s; }
}