/* _components.css — site.css 에서 분리(2026-08-03). 내용 무변경, 위치만 이동.
   불러오는 순서: tokens → _shell → _components → _legacy → page-*
   🔒 락. 2개 이상 페이지가 함께 쓰는 컴포넌트. */
/* ── 카드 그리드 (5가지) ── */
.dk-g5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
/* ★2026-08-21 회장 지적 "이 두 섹션 카드 디자인 시야에 졸라 안들어온다".
   원인은 취향이 아니라 값이었다 — 카드 배경이 var(--dk-surface-card)(#f5f5f5)인데
   「실제 반 구성」 섹션 배경도 같은 #f5f5f5 다. 즉 **카드와 바닥이 같은 색**이고
   1px 헤어라인만 남아 있었다. 홈에서 "아이콘 원이랑 카드가 같은 색이라 안 보인다"고
   지적받은 것과 정확히 같은 종류다.
   → 그때 회장이 고른 해법(2안 = 그림자로 살짝 띄우기)을 그대로 쓴다. 흰 면 + 2겹 그림자는
     어제 승인된 .dk-ds 의 값을 글자 그대로 복제한 것이다(새로 짓지 않는다).
     흰 배경 섹션(배정 기준)에서도 그림자가 모서리를 만들어 카드가 읽힌다. */
.dk-card5 {
  background: #fff;
  border: 1px solid var(--dk-hairline-soft);
  border-radius: var(--dk-radius-lg);
  box-shadow: 0 1px 2px rgba(20,40,90,.10), 0 10px 22px -6px rgba(20,40,90,.20);
  padding: 30px 26px;
  display: flex; flex-direction: column;
  transition: transform var(--dk-dur-base) var(--dk-ease-out), box-shadow var(--dk-dur-base) var(--dk-ease-out), border-color var(--dk-dur-base) var(--dk-ease-out);
}
.dk-card5:hover {
  transform: translateY(-4px);
  /* 기본 그림자보다 확실히 위여야 hover 가 읽힌다. 예전 값(0 10px 28px/.10)은
     새 기본값보다 오히려 약해서 올려도 내려앉아 보였다. */
  box-shadow: 0 2px 4px rgba(20,40,90,.12), 0 18px 34px -8px rgba(20,40,90,.26);
  border-color: var(--dk-accent-red-bg);
}
.dk-card5 .num {
  font-family: var(--dk-font-display);
  font-size: 30px; font-weight: 800; color: var(--dk-accent-red);
  line-height: 1; margin-bottom: 16px; opacity: 0.85;
}
.dk-card5 .lead {
  font-size: 17px; font-weight: 700; color: var(--dk-ink);
  line-height: 1.5; margin: 0 0 10px;
}
.dk-card5 .sub {
  font-size: 14px; color: var(--dk-fg-3); line-height: 1.65; margin: 0 0 18px; flex: 1;
}
.dk-card5 .goto {
  font-size: 13px; font-weight: 700; color: var(--dk-accent-red);
  border-top: 1px solid var(--dk-hairline-soft); padding-top: 14px; margin-top: auto;
}
.dk-bi-slot .tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--dk-fg-cool); border: 1px solid var(--dk-hairline-cool); border-radius: var(--dk-radius-full); padding: 5px 12px; background: rgba(255,255,255,0.6); }
.dk-bi-slot .spec { font-size: 12.5px; color: var(--dk-fg-muted); max-width: 260px; line-height: 1.6; margin: 0; }
/* ── 키포인트 요약 ── */
/* ★2026-07-26 회장 지적 — 어두운 바깥박스+어두운 안쪽카드 이중박스라 가독성 저하.
   바깥 wrap을 없애고 카드가 밝은 섹션 배경 위에 바로 놓이게 단일 표면으로 정리. */
.dk-kp-wrap { padding: 0; }
.dk-kp-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.dk-kp-card { background: var(--dk-surface-dark); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--dk-radius-md); padding: 28px 24px; transition: transform var(--dk-dur-base) var(--dk-ease-out), background var(--dk-dur-base) var(--dk-ease-out); }
.dk-kp-card:hover { transform: translateY(-4px); background: #333; }
.dk-kp-num { font-family: var(--dk-font-display); font-size: 30px; font-weight: 800; color: var(--dk-accent-red-light); line-height: 1; margin-bottom: 16px; }
.dk-kp-text { font-size: 17px; font-weight: 600; color: #fff; line-height: 1.6; margin: 0; }
/* 표 — 비교표 / 시간표 / 단계표 */
.dk-table-wrap { overflow-x: auto; border-radius: var(--dk-radius-lg); border: 1px solid var(--dk-hairline-soft); }
table.dk-table--menu th, table.dk-table--menu td { padding: 12px 14px; font-size: 13px; line-height: 1.5; min-width: 150px; }
table.dk-table { width: 100%; border-collapse: collapse; min-width: 480px; }
table.dk-table th, table.dk-table td { padding: 16px 20px; text-align: left; font-size: 14.5px; line-height: 1.6; vertical-align: top; }
table.dk-table thead th { background: var(--dk-surface-dark); color: #fff; font-weight: 700; font-size: 14px; }
table.dk-table tbody th { background: var(--dk-surface-card); color: var(--dk-ink); font-weight: 700; white-space: nowrap; }
table.dk-table tbody td { color: var(--dk-fg-3); border-top: 1px solid var(--dk-hairline-soft); }
table.dk-table tbody tr:nth-child(even) td, table.dk-table tbody tr:nth-child(even) th { background: var(--dk-surface-soft); }
/* 하루 일과표 — 구분/시간 2개 라벨열 + 요일 3열 */
table.dk-table--day { min-width: 760px; }
table.dk-table--day tbody td { text-align: center; }
table.dk-table--day tbody th { font-size: 13.5px; text-align: center; }
/* 월간 일정표 — 7열이라 더 넓고 촘촘하게. 날짜줄/내용줄이 번갈이라
   .dk-table 기본 짝수행 줄무늬는 끄고, 날짜줄만 회색으로 구분한다. */
table.dk-table--month { min-width: 940px; }
table.dk-table--month th, table.dk-table--month td {
  padding: 11px 10px; font-size: 12.5px; line-height: 1.55; text-align: center; vertical-align: middle;
}
table.dk-table--month tbody tr td { background: #fff; color: var(--dk-fg-3); }
table.dk-table--month tbody tr.dk-month-date td {
  background: var(--dk-surface-card); color: var(--dk-ink);
  font-weight: 700; font-size: 12px; white-space: nowrap;
}
/* 배지 */
.dk-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--dk-radius-full); background: var(--dk-surface-elevated); color: var(--dk-fg-2); vertical-align: middle; margin-left: 4px; white-space: nowrap; }
.dk-badge--s1 { background: var(--dk-surface-elevated); color: var(--dk-fg-2); }
/* ★2026-08-03 — 밝은 배경에 밝은 빨강이라 2.41:1 로 거의 안 보였다. 글자·선은 어두운 단계로. */
.dk-badge--s2 { background: var(--dk-surface-elevated); color: var(--dk-warning-ink); border: 1px solid var(--dk-warning-ink); }
.dk-badge--s3 { background: var(--dk-accent-red); color: #fff; }
/* 단계 흐름(순서도) */
.dk-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
/* ★2026-08-21 — 카드가 흰색인데 「학습 보완」 섹션도 흰색이라 헤어라인만 남았다.
   .dk-card5 와 같은 처방(2겹 그림자로 띄우기). 값은 .dk-ds 에서 복제. */
/* ★2026-08-21 회장 지시 "pc 버전도 차라리 번호랑 텍스트랑 같은 줄에 놓던지".
   번호를 위에 두면 칸 높이가 두 배가 되는데 담긴 것은 짧은 라벨 한 줄뿐이라
   아래쪽이 통째로 비었다. 한 줄로 놓으면 칸이 라벨 높이까지 내려온다. */
.dk-step { flex: 1 1 140px; min-width: 128px; background: #fff; border: 1px solid var(--dk-hairline-soft); border-radius: var(--dk-radius-md); padding: 15px 16px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 1px 2px rgba(20,40,90,.10), 0 10px 22px -6px rgba(20,40,90,.20);
  transition: border-color var(--dk-dur-base) var(--dk-ease-out), transform var(--dk-dur-base) var(--dk-ease-out), box-shadow var(--dk-dur-base) var(--dk-ease-out); }
.dk-step:hover { border-color: var(--dk-accent-red-bg); transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20,40,90,.12), 0 18px 34px -8px rgba(20,40,90,.26); }
.dk-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--dk-surface-dark); color: #fff; font-weight: 800; font-size: 12.5px; flex: 0 0 auto; }
.dk-step p { margin: 0; font-size: 13.5px; color: var(--dk-ink); font-weight: 600; line-height: 1.55; }
.dk-step-arrow { display: flex; align-items: center; justify-content: center; color: var(--dk-fg-muted); font-size: 18px; padding: 0 6px; flex: 0 0 auto; }
@media (max-width: 1099px) {
/* ★2026-08-21 회장 "이거 아직 좀 구린데".
   세로로 쌓은 상태에서 칸 하나가 화면 폭 전체(350px)인데 담긴 것은 번호 원과
   짧은 라벨뿐이다. 번호를 옆으로 옮겨 높이를 절반으로 줄여도 오른쪽은 여전히 비었다 —
   **비는 것은 높이가 아니라 상자 자체**였다. 여섯 개의 큰 빈 상자가 남는다.

   그래서 좁은 폭에서는 상자를 걷어내고 세로 타임라인으로 잇는다. 절차는 '방향'이므로
   형태도 선이 맞다(카드는 항목 사이에 관계가 없을 때 쓰는 형태다).
   이 페이지의 「하루 9시간」 .dk-tl 이 이미 쓰는 언어라 결이 갈리지 않는다 —
   세로선 + 원 노드 + 오른쪽 라벨.
   ⚠️ 상자를 없앤 것은 형태 변경이다. 상자를 남기는 쪽을 원하시면 되돌린다.

   가운데 떠 있던 화살표도 뺀다. 선이 같은 일을 하고, 좌측 번호와 이어지지 않아
   따로 노는 기호였다. 
   ★기준을 768 이 아니라 1099 로 잡았다. 실측 결과 6칸이 한 줄에 들어가는 것은
     1100px 부터이고, 769~1099 에서는 5칸 + 1칸으로 접혀 **둘째 줄 오른쪽이
     통째로 비었다** — 회장이 지적한 그 모양이 태블릿 폭에서 그대로 났다.
     한 줄로 못 서는 폭이면 처음부터 세로로 세운다. */
.dk-steps { flex-direction: column; gap: 0; }
.dk-step-arrow { display: none; }
.dk-step { flex: 0 0 auto; position: relative; gap: 14px; padding: 11px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; }
.dk-step:hover { transform: none; box-shadow: none; }
/* 세로선 — 번호 원(26px)의 중심이 13px 이므로 2px 선은 12px 에서 시작한다.
   첫 칸은 원 아래부터, 마지막 칸은 원 위까지만 그어 선이 밖으로 새지 않게 한다. */
.dk-step::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0;
  width: 2px; background: var(--dk-hairline); }
.dk-step:first-child::before { top: 50%; }
.dk-step:last-child::before  { bottom: 50%; }
.dk-step-num { position: relative; }
.dk-step p { font-size: 15px; }
}
/* 안내 콜아웃 — 희소 자원, 페이지당 한둘만 */
/* ★2026-08-03 회장 승인 B안 — '라운드 + 컬러 좌측 레일' 동시 사용은 금지 조합
   (craft/anti-ai-slop P0 #5). 세로줄을 남기고 모서리를 각지게 한다. */
.dk-callout { display: flex; align-items: flex-start; gap: 14px; background: var(--dk-surface-card); border-left: 4px solid var(--dk-surface-dark); border-radius: 0; padding: 20px 24px; margin-top: var(--dk-gap-lg); }
.dk-callout svg { flex-shrink: 0; width: 20px; height: 20px; stroke: var(--dk-fg-2); stroke-width: 1.8; fill: none; margin-top: 2px; }
.dk-callout p { margin: 0; font-size: 14.5px; color: var(--dk-fg-2); line-height: 1.7; }
/* 간단 체크 리스트 */
.dk-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.dk-checklist li { position: relative; padding-left: 22px; font-size: 15px; color: var(--dk-fg-3); line-height: 1.8; }
.dk-checklist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--dk-accent-red); }
.dk-contact-direct .k { font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: var(--dk-accent-red); }
.dk-contact-direct .v { font-size: 16px; font-weight: 700; color: var(--dk-ink); }
/* ── 반응형 안전장치 ── */
@media (max-width: 480px) {
.dk-g5, .dk-g3, .dk-perf-nums, .dk-kp-track, .dk-vi-grid { grid-template-columns: 1fr; }
}
/* =====================================================================
   2026-07-28 — 표·인포그래픽 재설계 (프리뷰 7차 확정분)
   레퍼런스에서 가져온 표 문법: 컬러 헤더 밴드 / 좌측 라벨 블록 / 행 줄무늬 /
   셀 안 pill / 번호 블록. 색은 tokens-domestic.css 값과 그 투명도 파생만 사용.
   ※ p 요소용 클래스는 `.dk ` 접두 필수 — tokens의 `.dk p`(0-1-1)에 밀린다.
   ===================================================================== */

/* ★2026-07-29 포인트 컬러 사용 규칙 (회장 지적 "너무 대놓고 많이 써서 촌스럽다")
   면(배경)에 코발트를 쓰는 곳은 다음 5곳뿐이다:
     ① 롤링 밴드(브랜드 띠)  ② CTA 섹션  ③ 영상 재생 버튼(핵심 액션)
     ④ 수학 pill(수학 중심 = 브랜드 메시지)  ⑤ 월간 일정표 입소일
   그 외 강조(배지·태그·스텝번호·표 헤더·콜아웃)는 다크(--dk-surface-dark)나
   중립 명도로 처리한다. 글자·아이콘 색으로서의 코발트는 이 규칙과 별개.
   근거: open_design craft/anti-ai-slop.md "var(--accent) 6회 이상 = P1 tell". */

/* ── ① 표 공통 강화 — 기존 .dk-table 전면 교체(curriculum·life-care 전부 적용) ── */
.dk-table-wrap {
  overflow-x: auto; border-radius: var(--dk-radius-md);
  border: 1px solid var(--dk-hairline-soft); background: #fff;
  box-shadow: 0 2px 10px rgba(20,40,90,.06);
}
table.dk-table thead th {
  background: var(--dk-surface-dark); color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: .3px;
  padding: 13px 14px; white-space: nowrap; border: none;
}
table.dk-table tbody th {
  background: var(--dk-surface-elevated); color: var(--dk-ink);
  font-weight: 700; white-space: nowrap;
}
table.dk-table tbody td { color: var(--dk-fg-2); border-top: 1px solid var(--dk-hairline-soft); }
table.dk-table tbody tr:nth-child(even) td { background: var(--dk-surface-soft); }
table.dk-table tbody tr:nth-child(even) th { background: var(--dk-surface-elevated); }

/* ── 좁은 화면에서는 표를 세로로 편다 (★2026-08-20 회장 지적) ──────────────
   "글자가 한 화면에 안 나오고 옆으로 밀어봐야 하는거 에바".
   원인은 table.dk-table 의 min-width:480px + .dk-table-wrap 의 overflow-x:auto 다.
   320~390px 에서는 어떤 값을 줘도 3열이 안 들어간다 — 열을 좁히는 게 아니라 **행으로 편다.**
   각 행이 [구분 라벨] + [값들] 한 덩어리가 되고, 값에는 원래 열 이름을 붙인다
   (마크업의 data-label="중등"/"고등"). 그래야 무슨 값인지 안 잃는다.
   ⚠️ 식단표(--menu)는 제외한다. 8일치 날짜 × 끼니라 세로로 펴면 60칸이 넘는 목록이 된다.
      그건 정말로 가로 스크롤이 맞는 표다.
   ⚠️ thead 를 감추므로 남는 정보는 tbody th 와 data-label 뿐이다.
      새 표를 만들 때 열 이름이 값에 안 붙어 있으면 모바일에서 뜻이 사라진다. */
@media (max-width: 620px) {
  /* ⚠️ .dk-table-wrap 의 overflow-x:auto 는 건드리지 않는다.
     여기서 visible 로 풀었더니 식단표(940px)가 래퍼 안에서 스크롤되지 못하고
     페이지를 통째로 1,051px 밀어냈다(320px 실측). 세로로 펴는 표는 min-width 를 0 으로
     두면 래퍼에 꽉 차므로 auto 여도 스크롤바가 안 생긴다 — 풀 이유가 없었다. */
  table.dk-table:not(.dk-table--menu) { min-width: 0; display: block; }
  table.dk-table:not(.dk-table--menu) thead { display: none; }
  table.dk-table:not(.dk-table--menu) tbody { display: block; }
  table.dk-table:not(.dk-table--menu) tbody tr {
    display: block; padding: 15px 16px; border-top: 1px solid var(--dk-hairline-soft); }
  table.dk-table:not(.dk-table--menu) tbody tr:first-child { border-top: 0; }
  table.dk-table:not(.dk-table--menu) tbody tr:nth-child(even) { background: var(--dk-surface-soft); }
  /* 행 배경으로 옮겼으므로 칸 배경은 지운다 — 안 지우면 칸마다 회색 덩어리가 진다. */
  table.dk-table:not(.dk-table--menu) tbody th,
  table.dk-table:not(.dk-table--menu) tbody tr:nth-child(even) th,
  table.dk-table:not(.dk-table--menu) tbody tr:nth-child(even) td { background: none; }
  table.dk-table:not(.dk-table--menu) tbody th {
    display: block; padding: 0 0 9px; white-space: normal;
    font-size: 14.5px; color: var(--dk-ink); }
  table.dk-table:not(.dk-table--menu) tbody td {
    display: block; padding: 0; border-top: 0; font-size: 14px; line-height: 1.7; }
  table.dk-table:not(.dk-table--menu) tbody td + td { margin-top: 12px; }
  table.dk-table:not(.dk-table--menu) tbody td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    color: var(--dk-accent-red); margin-bottom: 4px; }
}
/* =====================================================================
   2026-07-28 — 시각 콘텐츠 슬롯 레이아웃 세트 (회장 지시)
   "히어로 제외 페이지당 시각 콘텐츠 최소 1/3". 정비례 그리드 금지 —
   섹션마다 다른 구도를 쓰되 사이즈는 다각화한다.
   실물 사진·영상이 없어도 슬롯이 '설계된 자리'로 보이게 만들고,
   실물이 들어오면 마크업 그대로 <img>/<video>만 갈아끼우면 되게 짠다.
   색은 tokens 값과 그 투명도 파생만 사용.
   ===================================================================== */

/* ★2026-08-20 — 사진 칸 비율을 실물(3:2)에 맞춘다. 🔒 락 파일 수정(회장 보고 후 진행).
   활동사진 55장이 전부 1600x1068 = 1.50:1 인데 칸 비율이 제각각이라 잘려 나갔다.
   남는 비율 = min(원본비/칸비, 칸비/원본비). 기준 75% (verify/03_layout.py).
     split 폰 1/1.18 → 56% · PC 21/10 → 71%      (둘 다 실패)
     tri   폰 4/5.2  → 51% · 작은칸 auto → 69%    (실패 + 큰칸 아래 201px 빈 공간)
   ⚠️ 자리표시는 min-height:130px 라 이게 안 보인다. 실물이 들어와야 드러난다 —
      8/16 에 여기서 하루를 썼다. 이제 비율을 사진 쪽에 맞춰 둔다. */
/* ── 슬롯 기본 ── */
.dk-ph {
  /* ★그리드 자식의 기본 min-width:auto 때문에 최소 콘텐츠 폭(한글 keep-all) 아래로
     안 줄어들어 모바일에서 가로 overflow가 났다. min-width:0으로 풀어 준다. */
  min-width: 0;
  position: relative; border-radius: var(--dk-radius-lg); overflow: hidden;
  border: 1.5px dashed var(--dk-hairline-cool);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(20,42,77,.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%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 9px; padding: 20px; min-height: 130px;
}
.dk-ph svg { width: 26px; height: 26px; stroke: var(--dk-accent-red); fill: none; stroke-width: 1.6; opacity: .55; }
.dk-ph .tag {
  font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--dk-accent-red);
  background: rgba(15,82,201,.10); border-radius: var(--dk-radius-full); padding: 3px 10px;
}
.dk .dk-ph .cap { font-size: 13px; font-weight: 700; color: var(--dk-fg-2); margin: 0; line-height: 1.45; }
.dk .dk-ph .spec { font-size: 11.5px; color: var(--dk-fg-muted); margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.dk .dk-ph .cap { overflow-wrap: anywhere; }
/* 실물이 들어오면 이 클래스만 추가 — 점선·도트 제거 */
.dk-ph.is-filled { border-style: solid; border-color: var(--dk-hairline-soft); background: none; padding: 0; }
.dk-ph.is-filled > img, .dk-ph.is-filled > video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── A. 풀블리드 와이드 밴드 — 섹션 사이를 끊는 가로 띠 ── */
/* ★2026-07-29 — 슬롯 블록 상하 여백 규칙. 섹션 사이 단독 블록이라 .dk-sec와 같은 리듬을 준다.
   (이전엔 .dk-wrap만 걸쳐 위여백 0~84px, 아래여백 -20px 겹침까지 제각각이었다) */
/* ★2026-07-30 긴급 수정 — 회장 지적 "pc버전은 버리는거냐".
   여기 있던 `margin: 0`이 .dk-wrap의 `margin: 0 auto`(가운데 정렬)를 죽여서
   1280px 넘는 화면에서 슬롯 블록만 왼쪽에 붙고 오른쪽에 죽은 공간이 생겼다
   (1900px 실측: .dk-wrap 좌310/우310 vs 슬롯 좌0/우620).
   상하 여백만 만들면 되는 자리이므로 `margin-block`으로 좁혀 좌우 auto를 살린다.
   ⚠️ 검증에 "가로 위치(좌우 여백 대칭)" 항목이 없어서 놓쳤다. 이제 회귀에 포함한다. */
.dk-ph-block { padding-top: clamp(56px,8vw,96px); padding-bottom: clamp(56px,8vw,96px);
  margin-block: 0; margin-inline: auto; }
.dk-ph-band { margin-block: 0; margin-inline: auto; }
.dk-ph-band .dk-ph { aspect-ratio: 21/6; min-height: 150px; max-height: 380px; }
/* ── B. 좌우 분할 — 텍스트 : 이미지 = 4 : 6 (교차 가능) ── */
/* 텍스트가 2~3줄뿐이라 컬럼이 넓으면 한 줄로 퍼져 좌우 균형이 깨진다.
   텍스트 컬럼을 캡션 폭(최대 340px)으로 묶어 덩어리를 만든다. */
.dk-ph-split { display: grid; grid-template-columns: minmax(220px,340px) 1fr; gap: clamp(20px,3.5vw,56px); align-items: center; }
/* ★2026-07-29 — order는 배치 순서만 바꾼다. 컬럼 폭은 그대로라
   .rev에선 이미지가 캡션 폭(340px)에 들어가 890x72로 눌렸다. 컬럼 폭도 함께 뒤집는다. */
.dk-ph-split.rev { grid-template-columns: 1fr minmax(220px,340px); }
.dk-ph-split.rev > *:first-child { order: 2; }
.dk-ph-split .dk-ph { aspect-ratio: 3/2; }
.dk-ph-split .txt h3 { font: var(--dk-display-xs); color: var(--dk-ink); margin: 0 0 10px; letter-spacing: var(--dk-track-snug); }
.dk .dk-ph-split .txt p { font: var(--dk-body-md); color: var(--dk-fg-3); line-height: 1.75; margin: 0; }
@media (max-width: 768px) {
.dk-ph-split, .dk-ph-split.rev { grid-template-columns: 1fr; gap: 18px; }
.dk-ph-split.rev > *:first-child { order: 0; }
.dk-ph-split .dk-ph { aspect-ratio: 3/2; }
}
/* ── C. 비대칭 3분할 — 큰 1 + 작은 2 (좌우 반전 가능) ── */
.dk-ph-tri { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.dk-ph-tri > *:first-child { grid-row: 1 / 3; }
.dk-ph-tri.rev { grid-template-columns: 1fr 2fr; }
.dk-ph-tri.rev > *:first-child { grid-column: 2; grid-row: 1 / 3; }
.dk-ph-tri.rev > *:nth-child(2) { grid-column: 1; grid-row: 1; }
.dk-ph-tri.rev > *:nth-child(3) { grid-column: 1; grid-row: 2; }
/* ★2026-08-20 — 비율을 거는 쪽을 뒤집었다. 전에는 큰 칸이 16/11 고정이고 작은 칸이
   height:100% 로 따라가서, 작은 칸 비율이 2.17:1 까지 벌어져 사진이 69% 만 남았다
   (그리고 큰 칸 아래가 1440px 에서 201px 비었다).
   → 작은 칸을 3:2 로 고정하고 큰 칸이 그 높이를 채운다. 컬럼 2fr/1fr 이면
     큰 칸 실효비 = 2·col2 / (2·col2/1.5 + 12) ≈ 1.47:1 → 남는 비율 98%. 빈 공간 0. */
.dk-ph-tri > *:first-child { aspect-ratio: auto; height: 100%; }
.dk-ph-tri > *:nth-child(n+2) { aspect-ratio: 3/2; height: auto; }
/* ★2026-07-29 회장 제보(모바일 스샷) — 모바일 tri가 계단식으로 어긋나 좌측이 통째로 비었다.
   원인: PC용 배치 지정을 부분적으로만 되돌렸다. .rev의 grid-row(1/3, 1, 2)는 (0,3,0)이라
   .dk-ph-tri > *(0,2,0)의 초기화를 이기고 살아남았고, height:100%도 남아 칸 크기가 뒤틀렸다.
   → 모바일에선 .rev 여부와 무관하게 "전부 초기화 후 한 가지 배치"로 통일한다. 부분 초기화 금지. */
@media (max-width: 640px) {
.dk-ph-tri, .dk-ph-tri.rev { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  /* PC 규칙이 .dk-ph-tri.rev > *:nth-child(2) 형태라 (0,3,0)이다.
     리셋을 `> *`(0,2,0)로 쓰면 특성도에서 져서 조용히 무시된다. :nth-child(n)으로 맞춘다. */
  .dk-ph-tri > *:nth-child(n), .dk-ph-tri.rev > *:nth-child(n) { grid-column: auto; grid-row: auto; height: auto; }
.dk-ph-tri > *:first-child, .dk-ph-tri.rev > *:first-child { grid-column: 1 / -1; aspect-ratio: 3/2; height: auto; }
.dk-ph-tri > *:nth-child(n+2), .dk-ph-tri.rev > *:nth-child(n+2) { aspect-ratio: 4/3; }
}
/* ── D. 오프셋 겹침 2장 — 세로로 어긋나게 ── */
.dk-ph-stack { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2.5vw,26px); align-items: start; }
.dk-ph-stack > *:first-child { aspect-ratio: 4/3.4; }
/* ★2026-07-30 회장 지적 "레이아웃 또 안맞음". 세로 엇갈림(offset)이 정돈돼 보이지 않아
   PC에서도 두 칸을 같은 높이에 맞춘다. 아래 주석문도 좌측 정렬로 붙인다. */
.dk-ph-stack > *:last-child { aspect-ratio: 4/3.4; margin-top: 0; }
.dk-ph-stack { align-items: stretch; }
.dk .dk-ph-note { text-align: left; max-width: 720px; }
/* 슬롯 묶음 위 안내문 */
.dk .dk-ph-note { font-size: 12px; color: var(--dk-fg-muted); margin: var(--dk-gap-xs) 2px 0; line-height: 1.65; }
/* ── 슬롯 비율 브레이크포인트 (★2026-07-29 정리) ──
   기존엔 560/640/768/880에 비율 재정의가 흩어져 있어, 폰용 세로 비율이 태블릿까지 흘러가
   768px에서 이미지 하나가 816px, tri 한 덩어리가 950px까지 길어졌다.
   → 경계를 둘로만 둔다.  ≤480px 폰 = 세로형 / 481~1023px 태블릿 = 완만한 가로형 / ≥1024px = PC(위 블록) */
@media (max-width: 480px) {
  /* 폰에선 텍스트가 세로로 길어지므로 슬롯도 세워야 시각 비중이 유지된다. */
  .dk-ph-band .dk-ph { aspect-ratio: 1/1.18; }
/* ★2026-08-20 — 폰 세로 비율(1/1.18 · 4/5.2 · 1/1.15)이 크롭의 최대 원인이었다.
   원본이 가로 사진(1.5:1)인데 칸을 세워 놓아 51~58% 만 남았다. 가로형으로 되돌린다.
   시각 비중은 폭을 다 쓰므로 3:2 로도 충분히 유지된다(390px 폰에서 342x228). */
.dk-ph-split .dk-ph { aspect-ratio: 3/2; }
.dk-ph-tri > *:first-child, .dk-ph-tri.rev > *:first-child { aspect-ratio: 3/2; }
.dk-ph-tri > *:nth-child(n+2), .dk-ph-tri.rev > *:nth-child(n+2) { aspect-ratio: 4/3;
  /* ★2026-08-20 — 여기서 min-height:130px 를 풀어야 한다. 320px 에서 이 두 칸은 폭이
     134px 인데 4/3 이면 높이가 100px 다. min-height 가 이기면 브라우저는 높이를 130 으로
     잡고 비율을 맞추려 폭을 173 으로 늘린다 → 트랙(134)을 39px 넘겨 문서가 19px 밀린다.
     tri 를 쓰는 3페이지(커리큘럼·관리형자습·생활환경)만 실패하고 나머지가 멀쩡했던 이유.
     ⚠️ 이 폭에서는 min-height 와 「사진 75% 이상 남기기」를 동시에 만족할 수 없다 —
        높이 130 을 지키려면 비율이 1.03 이하여야 하는데 75% 기준은 1.125~2.0 을 요구한다.
        둘 중 하나를 놔야 하고, 잘림 기준이 회장 지적으로 박힌 것이라 min-height 를 놓는다.
        대신 자리표시(사진 전) 안내문은 이 칸에서 잘린다 — 실물이 들어오면 사라질 문제다. */
  min-height: 0; }
.dk-ph-stack { grid-template-columns: 1fr; }
.dk-ph-stack > *:first-child, .dk-ph-stack > *:last-child { aspect-ratio: 4/3.4; margin-top: 0; }
}
@media (min-width: 481px) and (max-width: 1023px) {
.dk-ph-band .dk-ph { aspect-ratio: 16/9; }
.dk-ph-split .dk-ph { aspect-ratio: 3/2; }
.dk-ph-stack > *:first-child, .dk-ph-stack > *:last-child { aspect-ratio: 16/10; }
}
/* ── 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) {
.dk-ph-split .dk-ph { aspect-ratio: 3/2; }
.dk-ph-tri > *:first-child { aspect-ratio: auto; }
.dk-ph-stack > *:first-child { aspect-ratio: 16/10; }
.dk-ph-stack > *:last-child { aspect-ratio: 16/10; }
}
/* ── 상세 카드 (커리큘럼 6대 핵심 + 컨설팅 3축 공용 템플릿) ──
   ★병렬 항목은 레이아웃을 통일한다. 여섯 칸이든 세 칸이든 규격이 하나여야 한다.
   셀별로 값을 따로 쓰지 않는다. 달라지는 것은 내용과 --tone(의미를 담은 색)뿐이다. */
/* ★2026-08-20 회장 지시 — 레퍼런스(일정표 리본 카드) 벤치마킹.
   가져온 것 넷:
     ① 좌측 식별 블록과 본문을 **세로 구분선**으로 가른다
     ② **컬러 캡이 카드 뒤에서 좌·우 번갈아** 삐져나온다
     ③ 캡이 접혀 들어가는 **입체** — 캡 안쪽 짙은 그림자 + 그 접힘이 카드에 드리우는 그늘
     ④ 카드가 바닥에서 뜨는 2겹 그림자
   ★교차가 핵심이다. 한쪽에만 두면 색인표가 되고, 번갈아 두면 아래로 훑을 때
     시선이 지그재그로 끌린다. 홈 POINT 01~05 의 우·좌·우·좌·우 와 같은 리듬이다.
   ★교차하는 건 색뿐이다 — 번호·제목·라벨 순서는 여섯 장 모두 그대로다.
   ★상단 3px 레일은 뺐다. 색이 이미 번호(--tone)와 아이콘 박스(--tone)에 있어서
     레일은 같은 색의 세 번째 반복이었고, 카드 위 모서리가 바로 위 카드의 아래 모서리와
     마주 보는 자리라 "카드의 성질"이 아니라 "카드 사이 칸막이"로 읽혔다.
   ★바탕은 흰색으로 둔다 — 연회색 바탕이 그림자가 더 잘 살지만, 바로 위 벌집(#efefef)이
     이미 회색이라 두 덩어리가 연달아 회색이 된다. 이 사이트는 연속 두 섹션이 같은 배경인
     데가 한 곳도 없고, 홈에서 그 리듬 때문에 다크 배경을 원복한 적이 있다. */
/* ★padding-inline 은 캡이 나갈 자리다. 없으면 1280px 에서 21px 가로 스크롤이 난다 —
   .dk-wrap 이 정확히 1280px 에서 패딩 0 이 되어 카드가 화면 폭을 꽉 채우고,
   캡이 밖으로 나갈 공간이 물리적으로 사라지기 때문이다.
   (같은 함정이 page-curriculum.css 벌집 주석에도 이미 적혀 있다 — 음수 마진으로
    파고드는 방식이 ≥1280px 에서 실패한 그 건이다.)
   카드가 섹션 제목보다 22px 안으로 들어오는데, 레퍼런스도 캡을 포함한 덩어리가
   안쪽에 놓인 모양이라 어긋나 보이지 않는다. 좌우가 같은 값이라 대칭도 유지된다. */
.dk-ds-list { display: flex; flex-direction: column; gap: 16px; padding-inline: 22px; }
.dk-ds { background: #fff; border: 1px solid var(--dk-hairline-soft);
  border-radius: var(--dk-radius-lg);
  padding: clamp(18px,2.4vw,26px); position: relative;
  /* ④ 가까운 그림자(윤곽) + 먼 그림자(높이). 한 겹만 쓰면 번지기만 하고 안 뜬다. */
  box-shadow: 0 1px 2px rgba(20,40,90,.10), 0 10px 22px -6px rgba(20,40,90,.20);
  display: grid; grid-template-columns: 214px 1fr; gap: clamp(18px,2.6vw,34px);
  align-items: stretch; }
/* ② 컬러 캡 — 홀수(01·03·05) 오른쪽 / 짝수(02·04·06) 왼쪽.
   ⚠️ z-index:-1 로 카드 뒤에 넣으면 안 된다. .dk-ds 가 쌓임 맥락을 안 만들어서 캡이
      카드뿐 아니라 **바탕색을 가진 조상 뒤로도** 내려가 통째로 사라진다(실제로 겪었다).
      카드 위에 그리되 겹침을 6px 만 줘서 카드 라운드가 만드는 틈만 메운다. */
.dk-ds::after { content: ""; position: absolute; top: 7px; bottom: 7px; width: 28px;
  background: var(--tone, var(--dk-hairline)); }
.dk-ds:nth-child(odd)::after { right: -22px; border-radius: 0 11px 11px 0;
  box-shadow: inset 13px 0 11px -9px rgba(0,0,0,.62), 0 5px 11px -4px rgba(20,40,90,.38); }
.dk-ds:nth-child(even)::after { left: -22px; border-radius: 11px 0 0 11px;
  box-shadow: inset -13px 0 11px -9px rgba(0,0,0,.62), 0 5px 11px -4px rgba(20,40,90,.38); }
/* ③ 접힘이 카드 표면에 드리우는 그늘. 없으면 캡과 카드가 남남처럼 논다. */
.dk-ds::before { content: ""; position: absolute; top: 1px; bottom: 1px; width: 34px;
  pointer-events: none; z-index: 1; }
.dk-ds:nth-child(odd)::before { right: 1px; border-radius: 0 15px 15px 0;
  background: linear-gradient(270deg, rgba(20,40,90,.16), rgba(20,40,90,0)); }
.dk-ds:nth-child(even)::before { left: 1px; border-radius: 15px 0 0 15px;
  background: linear-gradient(90deg, rgba(20,40,90,.16), rgba(20,40,90,0)); }
.dk-ds--core { --tone: #0f52c9; }
.dk-ds--fix  { --tone: #2a2a2a; }
.dk-ds--opt  { --tone: var(--dk-tone-3); }
.dk-ds--base { --tone: var(--dk-fg-faint); }
/* ① 세로 구분선 — 전에는 좌측 블록과 우측 라벨행이 여백으로만 갈려 있었다.
   선이 카드 높이를 지나야 「식별자 │ 내용」으로 읽히므로 위 .dk-ds 에서
   align-items 를 start → stretch 로 풀었다(그래야 두 칸 높이가 같아진다). */
.dk-ds__hd { display: grid; grid-template-columns: auto auto; gap: 4px 12px;
  align-items: center; min-width: 0;
  border-right: 1px solid var(--dk-hairline-soft);
  padding-right: clamp(9px,1.3vw,17px); align-content: start; }
.dk-ds__n { font-family: var(--dk-font-display); font-weight: 800;
  font-size: clamp(22px,2.8vw,28px); line-height: 1; letter-spacing: -0.5px;
  color: var(--tone); grid-row: 1; }
.dk-ds__ib { width: 34px; height: 34px; border-radius: var(--dk-radius-sm);
  background: var(--tone); display: flex; align-items: center; justify-content: center; grid-row: 1; }
.dk-ds__i { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.dk-ds__tw { grid-column: 1 / -1; grid-row: 2; margin-top: 9px; min-width: 0; }
.dk .dk-ds__t { margin: 0; font-family: var(--dk-font-display); font-weight: 800;
  font-size: clamp(17px,2.3vw,21px); line-height: 1.3; letter-spacing: var(--dk-track-snug);
  color: var(--dk-ink); word-break: keep-all; }
.dk .dk-ds__k { margin: 6px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .9px;
  color: var(--dk-fg-muted); }
.dk-ds__rows { margin: 0; display: grid; grid-template-columns: 88px 1fr; min-width: 0; }
.dk-ds__rows dt { padding: 11px 14px 11px 0; font-size: 11.5px; font-weight: 700;
  letter-spacing: .4px; color: var(--dk-fg-2); border-top: 1px solid var(--dk-hairline-soft); }
.dk-ds__rows dd { margin: 0; padding: 11px 0; font-size: 13.5px; line-height: 1.8;
  color: var(--dk-fg-3); border-top: 1px solid var(--dk-hairline-soft);
  word-break: keep-all; min-width: 0; }
.dk-ds__rows dt:first-of-type, .dk-ds__rows dd:first-of-type { border-top: 0; padding-top: 0; }
.dk-ds__rows dd b { color: var(--dk-fg-2); font-weight: 700; }
.dk-ds__rows dd em { display: block; font-style: normal; font-size: 11.5px;
  color: var(--dk-fg-muted); margin-top: 6px; }
@media (max-width: 820px) {
.dk-ds { grid-template-columns: 1fr; gap: 16px; }
/* ★1열이 되면 좌측 블록이 본문 '옆'이 아니라 '위'로 간다 — 구분선도 같이 눕혀야 한다.
   오른쪽에 그대로 두면 카드 한가운데를 세로로 긋는 선이 된다.
   ⚠️ padding-right 도 같이 지운다. 부분만 되돌리면 남은 값이 배치를 뒤튼다. */
.dk-ds__hd { grid-template-columns: auto auto 1fr; align-items: center; gap: 0 12px;
  border-right: 0; padding-right: 0;
  border-bottom: 1px solid var(--dk-hairline-soft); padding-bottom: 14px; }
.dk-ds__tw { grid-column: 3; grid-row: 1; margin-top: 0; }
/* ★캡 돌출을 줄인다 — .dk-wrap 좌우 패딩이 390px 에서 20px 뿐이라
   22px 이 그대로면 2px 이 화면 밖으로 나가 가로 스크롤이 생긴다. */
.dk-ds-list { padding-inline: 14px; }
.dk-ds::after { top: 6px; bottom: 6px; width: 22px; }
.dk-ds:nth-child(odd)::after  { right: -14px; }
.dk-ds:nth-child(even)::after { left: -14px; }
}
@media (max-width: 520px) {
/* ★2026-08-20 회장 지적 — 여기서 헤더를 두 줄로 내리던 것을 뺐다.
   「01 · 아이콘 · 수학」 셋이 한 줄에 좌측정렬로 붙는 게 낫다는 판단.
   521~820px 구간이 이미 그 배치(auto auto 1fr, 제목이 3열)라, 이 구간의 덮어쓰기만
   지우면 폰까지 그대로 내려온다 — 새 규칙을 짜지 않는다.
   ⚠️ 제목이 긴 칸(SKY · 의대 선배 멘토링 / 관리형 자기주도학습)은 3열 안에서 2줄로 접힌다.
      keep-all 이 걸려 있어 어절 단위로만 끊긴다. 320px 까지 넘침 0 확인. */
.dk-ds__rows { grid-template-columns: 1fr; }
.dk-ds__rows dt { padding: 12px 0 0; }
.dk-ds__rows dd { padding: 4px 0 12px; border-top: 0; }
.dk-ds__rows dt:first-of-type { padding-top: 0; }
}