/* page-curriculum.css — site.css 에서 분리(2026-08-03). 내용 무변경, 위치만 이동.
   불러오는 순서: tokens → _shell → _components → _legacy → page-*
   ✏️ 이 페이지 전용. 이 페이지 세션이 고치는 유일한 CSS. */
/* ═══════════════════════════════════════════════════════════════════
   6대 핵심 수업 구성 — 벌집 인포그래픽 (curriculum.html) ★2026-07-30 신설
   회장 지정 레퍼런스 구조를 그대로 구현:
     · 중앙 육각형 = 섹션 제목 「6대 핵심 수업 구성」
     · 둘레 6개 = 6대 핵심. 시계방향으로 원문 순서
     · 각 육각형의 컬러 쐐기를 '중앙을 보는 모서리'로 몰았다
       → 6개 쐐기가 모여 중앙을 감싸는 또 하나의 육각형 링이 된다
     · 아이콘은 컬러 쐐기 안 / 텍스트는 흰 부분(쐐기 반대쪽)

   구현: 쐐기는 육각형 중심을 기준으로 회전하는 반평면(half-plane)이다.
     --ang 만 바꾸면 여섯 방향이 전부 나온다. 부모 육각형 clip-path가 잘라 준다.
     쐐기 안쪽 경계를 중심에서 등거리로 뒀기 때문에 여섯 경계가 정확히 하나의 육각형을 그린다.

   ★규격 통일: 6칸의 번호·아이콘·제목·라벨·본문 크기와 내부 여백을 아래 토큰으로만 정한다.
     셀별로 값을 따로 쓰지 않는다 → 어긋날 수가 없다.

   ★색: 레퍼런스의 6색 무지개를 쓰지 않는다. 쐐기 색은 장식이 아니라 '운영 방식'이며
     코발트 1 + 중립 명도 3단이다. 회장 색약이므로 링 이웃끼리 명도비를 계산으로 확보했다 —
       01수학 #0f52c9 ↔ 02 #2a2a2a 2.10:1 · 02 ↔ 03 #5c5c5c 2.15:1
       04 ↔ 05 #8f8f8f 2.07:1 · 06 ↔ 01 2.11:1   (전부 기준 1.9 초과)
     흰 아이콘 대비도 전 색 3:1 이상(최저 #8f8f8f 3.23:1). 범례에 글자 병기.

   ★그림자는 부모(.dk-hx)에 건다. clip-path를 가진 요소에 filter를 같이 걸면
     자식 쐐기가 클립을 못 받고 육각형 밖으로 나간다(1차 구현에서 실제로 발생).
═══════════════════════════════════════════════════════════════════ */
.dk-hc {
  --w: clamp(206px, 30.5vw, 300px);       /* 육각형 폭 */
  --h: calc(var(--w) * 1.1547);           /* 정육각 비율 */
  --cut: 55.6%;                           /* 쐐기 안쪽 경계 (= 중심에서 0.10h) */
  --ir: 0.275;                            /* 아이콘을 중심에서 밀어낼 거리 (h 배수) */
  --t-num: clamp(20px, 2.6vw, 26px);
  --t-ico: clamp(20px, 2.5vw, 25px);
  --t-ttl: clamp(13px, 1.62vw, 15.5px);
  --t-lab: 10px;
  --t-bdy: clamp(10.5px, 1.25vw, 11.5px);
  --gap-1: 6px; --gap-2: 4px; --gap-3: 7px;
  /* 흰 육각형이 흰 배경에서 사라진다. 섹션 표면을 깔아 육각형과 그림자가 읽히게 한다.
     ★2026-07-30 회장 지적 "인포그래픽 뒷 배경 색을 좌우 끝까지 채울것".
     .dk-wrap 안에서 음수 마진으로 파고드는 방식은 ≥1280px에서 패딩이 0이라 실패한다.
     → 마크업에서 .dk-wrap 밖(섹션 직계)으로 빼서 자연스럽게 화면 폭을 쓰게 했다.
     (실사이트 .dk-idband-wrap이 쓰는 것과 같은 방식)

     ★2026-08-21 회장 지시로 배경이 여기서 .page-curriculum-hcband 로 올라갔다.
       「과목마다 목적이 다릅니다」 헤드와 벌집이 서로 다른 배경 위에 앉아 있어
       한 덩어리로 안 읽혔다. 배경을 두 곳에 두면 언젠가 한쪽만 바뀌므로 여기선 뺀다. */
  padding: clamp(22px,3.6vw,40px) clamp(10px,1.8vw,20px) clamp(16px,2.6vw,28px);
  margin: 0 0 var(--dk-gap-lg);
  width: 100%;
  overflow: hidden;
}
.dk-hc__grid { position: relative; width: calc(var(--w) * 3); height: calc(var(--h) * 2.5); margin: 0 auto; }
.dk-hx { position: absolute; width: var(--w); height: var(--h);
  left: calc(var(--cx) * var(--w)); top: calc(var(--cy) * var(--h) * .75); padding: 4px;
  filter: drop-shadow(0 2px 7px rgba(26,26,26,0.15)); }
.dk-hx__c { position: relative; width: 100%; height: 100%; background: #fff; overflow: hidden;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* 쐐기 : 중심을 향해 회전하는 반평면 */
.dk-hx__c::after { content: ""; position: absolute; left: -40%; top: -40%; width: 180%; height: 180%;
  background: var(--wedge, transparent);
  clip-path: polygon(0 var(--cut), 100% var(--cut), 100% 100%, 0 100%);
  transform: rotate(var(--ang, 0deg)); transform-origin: 50% 50%; }
/* 아이콘 : 쐐기 안. 방향으로 밀어낸 뒤 되돌려 세운다 */
.dk-hx__i { position: absolute; left: 50%; top: 50%; z-index: 2;
  width: var(--t-ico); height: var(--t-ico);
  fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transform: translate(-50%,-50%) rotate(var(--ang, 0deg))
             translateY(calc(var(--h) * var(--ir))) rotate(calc(-1 * var(--ang, 0deg))); }
/* 텍스트 : 쐐기 반대쪽 흰 부분 */
.dk-hx__in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  justify-content: center; padding: 18% 14%; }
.dk-hx__n { font-family: var(--dk-font-display); font-weight: 800; font-size: var(--t-num);
  line-height: 1; letter-spacing: -0.5px; color: var(--wedge, var(--dk-fg-muted));
  margin-bottom: var(--gap-1); }
.dk .dk-hx__t { margin: 0 0 var(--gap-2); font-family: var(--dk-font-display); font-weight: 800;
  font-size: var(--t-ttl); line-height: 1.3; letter-spacing: var(--dk-track-snug);
  color: var(--dk-ink); word-break: keep-all; }
.dk .dk-hx__k { margin: 0 0 var(--gap-3); font-size: var(--t-lab); font-weight: 700;
  letter-spacing: .8px; color: var(--dk-fg-muted); }
.dk .dk-hx__d { margin: 0; font-size: var(--t-bdy); line-height: 1.65;
  color: var(--dk-fg-3); word-break: keep-all; }
/* 방향별 텍스트 자리 — 쐐기 쪽 여백을 키워 흰 부분으로 밀어낸다 */
.dk-hx--dr .dk-hx__in { padding: 15% 30% 33% 13%; text-align: left; }
.dk-hx--dl .dk-hx__in { padding: 15% 13% 33% 30%; text-align: right; }
.dk-hx--l  .dk-hx__in { padding: 19% 12% 19% 34%; text-align: right; }
.dk-hx--ul .dk-hx__in { padding: 33% 13% 15% 30%; text-align: right; }
.dk-hx--ur .dk-hx__in { padding: 33% 30% 15% 13%; text-align: left; }
.dk-hx--r  .dk-hx__in { padding: 19% 34% 19% 12%; text-align: left; }
/* 운영 방식별 쐐기 색 (명도 계산으로 확정) */
.dk-hx--core { --wedge: #0f52c9; }
.dk-hx--fix  { --wedge: #2a2a2a; }
.dk-hx--opt  { --wedge: #555555; }
.dk-hx--base { --wedge: var(--dk-fg-faint); }
/* 중앙 : 섹션 제목 */
.dk-hx--hub { filter: drop-shadow(0 4px 16px rgba(26,26,26,0.16)); }
.dk-hx__hb { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 20% 16%; }
.dk .dk-hx__hk { margin: 0 0 10px; font-size: 10px; font-weight: 700; letter-spacing: 1.1px;
  color: var(--dk-fg-muted); }
.dk .dk-hx__ht { margin: 0; font-family: var(--dk-font-display); font-weight: 800;
  font-size: clamp(21px,3.1vw,31px); line-height: 1.22; letter-spacing: -0.8px; color: var(--dk-ink); }
.dk .dk-hx__hd { margin: 11px 0 0; font-size: clamp(10.5px,1.25vw,11.5px); line-height: 1.65;
  color: var(--dk-fg-3); }
/* 범례 */
.dk-hc__lg { list-style: none; margin: clamp(14px,2vw,22px) 0 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; }
.dk-hc__lg li { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
  color: var(--dk-fg-2); letter-spacing: .2px; }
.dk-hc__lg b { color: var(--dk-accent-red); font-weight: 700; }
.dk-sw { width: 17px; height: 6px; flex: none; border-radius: 1px; }
.dk-sw--core { background: #0f52c9; }
 .dk-sw--fix { background: #2a2a2a; }
.dk-sw--opt { background: #555555; }
  .dk-sw--base { background: var(--dk-fg-faint); }

/* ── 벌집이 순서대로 붙는 등장 (★2026-08-20 회장 지시) ──────────────────
   "육각형이 순차적으로 촤라라라라 만들어지는 느낌".

   ★방향을 새로 정의하지 않는다 — 각 칸이 이미 --cx/--cy 로 자기 자리를 들고 있고
     허브가 (1,1) 이므로, (cx-1, cy-1) 이 곧 「허브에서 바깥으로」 방향이다.
     그 반대로 밀어 둔 상태에서 제자리로 오게 하면 가운데서 뻗어 나오는 것이 된다.
     허브 자신은 (0,0) 이라 안 움직이고 크기만 커진다 — 규칙 한 줄이 7칸을 다 덮는다.
   ★밀어 두는 거리를 px 로 박지 않고 --w(육각형 폭)의 6% 로 잡는다.
     px 로 박으면 PC 300px 칸에서 알맞은 값이 모바일 112px 칸에선 과하게 커진다.

   ★.dk-hx 는 left/top 으로 배치돼 있어서 transform 이 비어 있다 — 그래서 애니메이션이
     배치를 건드리지 않는다. transform 으로 배치했다면 이 방법을 못 썼다.
   ⚠️ filter(그림자)는 .dk-hx 에, clip-path 는 자식 .dk-hx__c 에 걸린 기존 구조를
      그대로 둔다. 둘을 한 요소에 겹치면 자식이 클립 밖으로 새어 나온다.

   순서 = DOM 순서 = 시계방향 01→06 (허브 → 01 좌상 → 02 우상 → 03 우 → 04 우하
   → 05 좌하 → 06 좌). 간격 75ms — 이보다 늘리면 "촤라라라"가 아니라 하나씩 세는 게 된다. */
@media (prefers-reduced-motion: no-preference) {
  /* 블록 전체 페이드는 끈다. 켜 두면 판이 한 번 뜬 뒤 칸이 또 떠서 동작이 두 번 인다. */
  .dk-hc[data-reveal] { opacity: 1; transform: none; transition: none; }

  .dk-hc .dk-hx {
    opacity: 0;
    transform: translate(calc((var(--cx) - 1) * var(--w) * -0.06),
                         calc((var(--cy) - 1) * var(--w) * -0.06)) scale(.88);
  }
  .dk-hc.is-in .dk-hx {
    opacity: 1;
    transform: none;
    /* 크기는 살짝 넘겼다 돌아오게(overshoot) — 그래야 "붙는" 맛이 난다.
       투명도는 짧게 끝내야 잔상이 안 남는다. */
    transition: opacity .42s var(--dk-ease-out),
                transform .60s cubic-bezier(.22, 1.15, .36, 1);
  }
  /* ★2026-08-20 회장 "속도가 너무 빠르다" → 간격 75ms → 150ms, 칸당 길이도 늘렸다.
     칸당 길이만 늘리면 여러 칸이 동시에 떠서 "순차"가 흐려진다. 간격을 같이 벌려야
     한 칸이 어느 정도 자리를 잡은 뒤 다음 칸이 온다. */
  .dk-hc.is-in .dk-hx:nth-child(2) { transition-delay: .14s; }
  .dk-hc.is-in .dk-hx:nth-child(3) { transition-delay: .29s; }
  .dk-hc.is-in .dk-hx:nth-child(4) { transition-delay: .44s; }
  .dk-hc.is-in .dk-hx:nth-child(5) { transition-delay: .59s; }
  .dk-hc.is-in .dk-hx:nth-child(6) { transition-delay: .74s; }
  .dk-hc.is-in .dk-hx:nth-child(7) { transition-delay: .89s; }

  /* 범례는 벌집이 다 붙은 뒤에 */
  .dk-hc .dk-hc__lg { opacity: 0; transition: opacity .40s var(--dk-ease-out); }
  .dk-hc.is-in .dk-hc__lg { opacity: 1; transition-delay: 1.06s; }
}
/* ★2026-07-30 회장 지적 "모바일에는 육각형 인포그래픽 어디가뿐노" —
   기존엔 ≤880px에서 육각형을 버리고 카드 목록으로 바꿨다. 인포그래픽이 통째로 사라졌다.
   → 육각형 구조를 그대로 유지하고 화면 폭에 맞춰 줄인다.
     좁은 폭에서 칸 안에 텍스트를 다 넣으면 9px 이하가 되어 못 읽으므로
     둘레 칸은 [번호 + 아이콘]만 남기고, 제목·라벨·설명은 바로 아래 상세 6칸이 담당한다
     (번호 01~06이 상세 카드와 1:1로 이어져 대응이 읽힌다).
   폭 계산: .dk-hc가 섹션 직계(풀블리드)라 안쪽 = 100vw - 좌우 패딩. 육각형 폭 = 그 1/3. */
@media (max-width: 880px) {
.dk-hc { --w: calc((100vw - 24px) / 3);
    padding: clamp(18px,4vw,26px) 12px clamp(14px,3vw,20px); border-radius: 0; }
  /* ★모바일도 3열 링을 유지한다(모바일이 기준). 다만 육각형이 114px밖에 안 되므로
     칸 안에는 [번호 + 제목]만 남기고, 제목의 뒷부분은 감춘다(.dk-hx__tl).
     지어낸 축약이 아니라 원문 단어를 잘라 쓰는 것이다 —
       국어 · 영어(특강) / 수능 대비(집중반) / 과학 · 사회(선택과목) /
       SKY · 의대(선배 멘토링) / (관리형) 자기주도학습
     라벨·설명·아이콘은 감추고, 그 내용은 바로 아래 상세 6칸이 담당한다(번호 01~06이 1:1 대응). */
  /* ★2026-08-20 회장 지적 — 아이콘은 다시 살린다. PC 에는 컬러 쐐기 안에 아이콘이 있는데
     모바일만 없어서 같은 그림이 아니었다. 아이콘이 들어가는 자리는 쐐기(컬러 면)이고
     번호·제목이 들어가는 자리는 그 반대쪽 흰 부분이라, 서로 자리를 뺏지 않는다.
     처음에 같이 숨긴 건 텍스트 자리를 걱정한 것이었는데 실제로는 겹치지 않는다. */
  .dk .dk-hx__d, .dk .dk-hx__k, .dk-hx__tl { display: none; }
.dk .dk-hx__t { font-size: clamp(11px,3vw,14px); line-height: 1.2;
    letter-spacing: -0.7px; margin: 3px 0 0; }
.dk-hx__in, .dk-hx--dr .dk-hx__in, .dk-hx--dl .dk-hx__in, .dk-hx--l .dk-hx__in,
  .dk-hx--ul .dk-hx__in, .dk-hx--ur .dk-hx__in, .dk-hx--r .dk-hx__in {
    align-items: center; justify-content: center; text-align: center; }
  /* 쐐기 반대쪽(흰 부분)으로 번호를 밀어낸다 — 방향별로 여백만 조정 */
  .dk-hx--dr .dk-hx__in { padding: 14% 26% 40% 12%; }
.dk-hx--dl .dk-hx__in { padding: 14% 12% 40% 26%; }
.dk-hx--l  .dk-hx__in { padding: 20% 10% 20% 40%; }
.dk-hx--ul .dk-hx__in { padding: 40% 12% 14% 26%; }
.dk-hx--ur .dk-hx__in { padding: 40% 26% 14% 12%; }
.dk-hx--r  .dk-hx__in { padding: 20% 40% 20% 10%; }
.dk-hx__n { font-size: clamp(15px,4.2vw,21px); margin-bottom: 0; }
.dk-hx__i { width: clamp(15px,4vw,20px); height: clamp(15px,4vw,20px); }
  /* 중앙 — 제목만 (설명은 섹션 리드가 이미 말한다) */
  .dk-hx__hb { padding: 14% 10%; }
.dk .dk-hx__hk { display: none; }
.dk .dk-hx__ht { font-size: clamp(12px,3.4vw,17px); line-height: 1.25; }
.dk .dk-hx__hd { display: none; }
.dk-hc__lg { gap: 7px 14px; }
.dk-hc__lg li { font-size: 10.5px; }
.dk-sw { width: 14px; height: 5px; }
}
/* 아주 좁은 화면(≤400px) — 아이콘까지 빼고 번호만. 그 아래가 안 뭉개지는 최소 조건이다 */
@media (max-width: 400px) {
/* ★2026-08-20 — 여기에도 아이콘 숨김이 또 있었다(≤880 에 이어 두 번째).
   회장 지적대로 PC 와 같게 살린다. 대신 이 폭에선 육각형이 112px 라 아이콘을 한 단 줄인다. */
.dk-hx__i { width: 14px; height: 14px; }
.dk-hx__n { font-size: 17px; }
.dk .dk-hx__ht { font-size: 12.5px; }
}

/* ── 히어로 배경 이미지 (★2026-08-20 회장 지시) ──────────────────────────
   "인덱스 빼고는 히어로 섹션 배경을 각자에 어울리는 이미지로. 옅은 블랙박스도."
   원본 = 활동사진 lecture-01 (강사가 화이트보드에 수학 함수 풀이를 적으며 설명하는 모습).
   ★2026-08-20 회장 지시로 class-04(교실 전경) → lecture-01 로 교체. "수학 수업 중인 이미지로".
     촬영분에서 판서 내용이 수학인 컷은 이것 하나뿐이다(나머지는 영어·국어·과학).
   ⚠️ 이 사진은 홈 POINT 01 에도 쓰인다. 수학 판서 컷이 하나뿐이라 불가피하다 —
      홈은 4:3 카드, 여기는 가로로 넓게 잘려 프레이밍은 달라진다.
   🔒 _shell.css 는 안 건드린다 — 페이지마다 그림이 다르니 각자 파일에서 얹는다.
   홈은 실물 영상이라 이 규칙과 무관하다.
   ⚠️ 히어로는 600px 고정 높이의 풀블리드라 3:2 원본이 세로로 크게 잘린다.
      슬롯 사진의 「75% 이상 남기기」 기준은 여기 적용 대상이 아니다(그건 콘텐츠 칸 기준).
      대신 background-position 으로 피사체가 잘려 나가지 않는 지점을 잡는다. */
/* ★2026-08-21 회장 지적 — "히어로에 회색창 1초 떴다가 로딩된다".
   원인 둘이었다.
   ① CSS 배경이라 브라우저가 CSS 5장을 다 받은 뒤에야(988ms) 사진을 요청한다.
      → HTML <head> 에 preload 를 넣어 요청을 앞으로 당겼다.
   ② 그동안 보이는 것이 회색이었다. placeholder 배경이 투명이라 흰 섹션 위에
      검은 오버레이만 얹혀 회색이 된 것이다(_shell.css 의 남색 그라디언트는
      여기서 background-image 를 덮어써서 사라진다).
      → 20px 짜리 흐린 축소본(아래 base64, 128바이트)을 아래층에 깔았다.
        회색 대신 그 사진의 흐릿한 형태가 보이다가 실물이 도착하면 덮인다.
   ⚠️ background-image 를 새로 선언하는 곳은 아래층(var(--hero-lqip))을 같이 써야 한다.
      한 층만 쓰면 흐린 층이 사라져 다시 회색이 된다. */
.dk-bg-video-section .dk-bg-video-placeholder {
  --hero-lqip: url("data:image/webp;base64,UklGRngAAABXRUJQVlA4IGwAAADQAwCdASoUAA0APsFcpEwnpaOiMAgA8BgJYgABHn9PlnojMoCwnQAA/v0ttqw/Ykmhu/7YkZiC2t9jpSi/WGCVwnuLyei6Vh7HYnf3DvGSQFwYMMb+Lc2VoZUER+IWw3dQ5LKhhlm8MacAAAA=");
  background-image: url("../images/hero/dakgong-domestic-hero-curriculum-1920.webp"), var(--hero-lqip);
  background-size: cover; background-position: center 42%;
}
@media (max-width: 820px) {
  .dk-bg-video-section .dk-bg-video-placeholder {
    background-image: url("../images/hero/dakgong-domestic-hero-curriculum-1200.webp"), var(--hero-lqip); }
}
/* ★블랙박스 — 5페이지 전부에서 흰 글자가 읽히는 **최소값**이다. 회장 "옅은".
   실측(글자가 실제 놓인 줄 상자 기준, 기준 h1 3:1 · 리드 4.5:1) —
     PC   .62/.32/.08 → teachers 리드 4.35 ✗   ·  .62/.38/.10 → 최저 4.77 ✓  ← 채택
     모바일 .62/.34/.28 → 커리큘럼 3.50 · 자습 3.55 · 생활 3.71 ✗
            .66/.48/.42 + 아래→위 .46 → 최저 5.96 ✓  ← 채택
   ⚠️ 모바일은 글이 화면 폭을 거의 다 써서 가로 그라디언트만으론 안 된다.
      리드가 화면 세로 중앙쯤에 놓이므로 아래에서 올라오는 겹을 70%까지 끌어올렸다. */
.dk-bg-video-section::after {
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.10) 75%); }
@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%); }
}

/* (2026-08-20 — .page-curriculum-phlead 규칙 삭제. 「수업은 이렇게 진행됩니다」 블록을
   회장 지시로 통째로 걷어내면서 쓰는 데가 없어졌다.) */
/* ── 컨설팅 히어로 크롭 (★2026-08-20) ── 는 page-consulting.css 에 있다. */

/* ── 하루 학습량 다크 밴드 (★2026-08-20) ──────────────────────────────
   필핀 「닥공 약속」 섹션(home브랜드약속_dark.html)의 레이어 구조를 이식했다.
     ① 좌측 사진이 세로로 무한 슬라이딩 (위아래는 마스크로 페이드)
     ② 우측 다크 패널이 사진 위로 얹히고, 좌측 모서리를 크게 둥글려 레이어처럼 보이게
     ③ 원형 메달리온이 패널 밖으로 절반 나와 두 레이어 경계에 걸침
     ④ 숫자를 고정폭으로 잡아 라벨 시작점을 일직선으로 (오와열)
   색만 우리 것으로 바꿨다 — 다크는 --dk-surface-dark, 강조는 어두운 면 위 전용
   --dk-accent-onDark. 필핀은 레드(#ab0000)에 배경 #0d0d0d 지만 그건 그쪽 브랜드다. */
/* ★2026-08-20 2차 — 표(타임라인)와 이 밴드가 같은 내용을 두 번 말하고 있어서 합쳤다.
   우측 패널 내용이 숫자 3행 → 타임라인 6항목이 됐다.
   ⚠️ 그래서 높이를 min-height 로 고정하면 안 된다. 패널을 흐름 안에 두고(margin-left)
      내용이 높이를 정하게 한다. 사진 칸만 absolute 로 그 높이에 맞춰 늘어난다.
      절대배치 패널에 6항목을 넣으면 밴드 밖으로 넘친다. */
.dk-daily { position: relative; overflow: hidden;
  border-radius: var(--dk-radius-lg); background: var(--dk-surface-dark); }
.dk-daily__bg { position: absolute; left: 0; top: 0; bottom: 0; width: 48%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); }
/* 2026-08-20 회장 지적 — 사진 사이 12px gap 이 다크 배경을 드러내 검정 띠로 보였다.
   gap 을 없애고 사진끼리 붙이되, 이음매를 얕게 페더 처리한다.
   방법: 각 사진의 위 18px 을 투명으로 빼고(mask) 그만큼 위로 당겨(margin-top: -18px)
   앞 사진 위에 겹친다. 잘린 자국 없이 부드럽게 넘어간다.
   주의: margin-top 은 모든 사진에 똑같이 걸어야 한다. 첫 장만 빼면 한 벌의 높이가
   6h-5x18, 다른 벌은 6h-6x18 이 되어 -50% 루프가 매 바퀴 9px 씩 어긋난다
   (후기 띠에서 gap 반 칸 때문에 겪었던 것과 같은 함정). */
.dk-daily__track { display: flex; flex-direction: column; gap: 0;
  animation: dkDailyUp 40s linear infinite; }
/* 2026-08-20 회장 지시 — hover/터치로 멈추는 기능 제거. 계속 돌아야 한다.
   후기 띠는 사람이 읽는 콘텐츠라 멈추는 게 맞지만, 여기 사진은 배경이다.
   배경이 손 닿을 때마다 멈추면 오히려 고장 난 것처럼 보인다. 속도는 그대로(40s). */
.dk-daily__track img { width: 100%; height: auto; display: block; margin-top: -18px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px); }
/* 목록을 두 벌 깔고 -50% 까지만 밀면 이음새가 안 보인다(후기 롤링과 같은 원리). */
@keyframes dkDailyUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.dk-daily__panel { position: relative; margin-left: 40%; width: 60%;
  background: var(--dk-surface-dark); border-radius: 80px 0 0 80px;
  padding: clamp(34px,4vw,48px) clamp(26px,3vw,44px) clamp(34px,4vw,48px) clamp(30px,3.4vw,46px);
  box-sizing: border-box; }
.dk-daily__row { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px); }

/* 메달리온 — 패널 밖으로 절반 나가 사진 경계에 걸친다. */
.dk-daily__badge { position: relative; flex: 0 0 auto; width: 92px; height: 92px;
  margin-left: -46px; border-radius: 50%; background: var(--dk-surface-dark);
  display: grid; place-items: center; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.dk-daily__badge::before { content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--dk-surface-dark-2); border: 3px solid var(--dk-accent-onDark); }
.dk-daily__badge svg { position: relative; width: 36px; height: 36px;
  stroke: #fff; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 숫자 — 고정폭이라 옆 라벨들이 한 줄에 선다. 이게 없으면 세 행이 들쭉날쭉해진다. */
.dk-daily__num { flex: 0 0 168px; white-space: nowrap;
  font-family: var(--dk-font-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1; letter-spacing: -1px; color: var(--dk-accent-onDark); }
.dk-daily__num span { font-size: .46em; font-weight: 700; }
.dk-daily__txt { min-width: 0; }
.dk .dk-daily__txt .lbl { margin: 0 0 6px; font-family: var(--dk-font-display);
  font-weight: 800; font-size: 17px; line-height: 1.4; color: #fff; }
.dk .dk-daily__txt .p { margin: 0; font-size: 14px; line-height: 1.7;
  color: var(--dk-fg-cool-soft); word-break: keep-all; }

/* 모바일 — 레이어를 푼다. 사진 위, 내용 아래. 메달리온 돌출도 없앤다. */
@media (max-width: 768px) {
  .dk-daily { min-height: 0; }
  .dk-daily__bg { position: relative; width: 100%; height: 300px; }  /* 회장 지적: 너무 좁다. 200 -> 300px */
  .dk-daily__panel { position: relative; width: 100%; border-radius: 0;
    padding: 26px 20px 30px; gap: 22px; }
  .dk-daily__badge { width: 60px; height: 60px; margin-left: 0; box-shadow: none; }
  .dk-daily__badge::before { inset: 6px; border-width: 2.5px; }
  .dk-daily__badge svg { width: 26px; height: 26px; }
  .dk-daily__row { gap: 14px; flex-wrap: wrap; }
  .dk-daily__num { flex: 0 0 auto; font-size: 30px; }
  /* 좁은 폭에서 숫자와 라벨이 한 줄에 다 못 들어가므로 설명만 아래로 내린다. */
  .dk-daily__txt { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-daily__track { animation: none; }
}

/* ── 하루 9시간 타임라인 (★2026-08-20 회장 지시) ────────────────────────
   표를 걷어내고 레퍼런스(일정 앱 타임라인) 문법으로 바꿨다.
   좌측 세로선 + 원형 노드 / 우측 카드에 [제목 + 시간] 한 줄, 설명 아래.
   ★강조(is-key)는 장식이 아니라 의미다 — 수학이 중심축이라 그 칸만 코발트를 쓴다.
     벌집 01 이 코발트인 것과 같은 뜻이고, 그래서 화면당 액센트도 늘지 않는다.
   ★세로선은 ::before 로 li 에 그린다. 마지막 항목만 선을 끊어야 꼬리가 안 남는다. */
/* ⚠️ 폭을 안 묶으면 PC 에서 카드가 1,240px 까지 늘어나 제목과 시간이 화면 양 끝으로
   갈라진다(1440px 실측). 눈이 그 사이를 건너야 해서 한 줄로 안 읽힌다.
   레퍼런스도 폰 폭(≈360px)의 목록이다 — 그 리듬을 지키려면 상한이 필요하다. */
.dk-tl { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.dk-tl__it { position: relative; padding: 0 0 clamp(14px,2vw,18px) clamp(30px,4vw,42px); }
.dk-tl__it:last-child { padding-bottom: 0; }
/* 세로선 */
.dk-tl__it::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: -8px;
  width: 2px; background: var(--dk-hairline); }
.dk-tl__it:last-child::before { display: none; }
/* 원형 노드 — 강조 칸만 속을 채운다 */
.dk-tl__it::after { content: ""; position: absolute; left: 0; top: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--dk-hairline); box-sizing: border-box; }
.dk-tl__it.is-key::after { border-color: var(--dk-accent-red);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 16px var(--dk-accent-red); }

.dk-tl__card { background: var(--dk-surface-card); border-radius: var(--dk-radius-md);
  padding: clamp(14px,2vw,18px) clamp(16px,2.2vw,22px); }
.dk-tl__it.is-key .dk-tl__card { background: var(--dk-accent-red); }
/* 제목 줄 — 제목은 좌, 시간은 우. 시간이 없는 항목은 span 자체가 없다. */
.dk .dk-tl__h { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 6px; font-family: var(--dk-font-display); font-weight: 800;
  font-size: clamp(15px,1.9vw,17.5px); line-height: 1.4; color: var(--dk-ink);
  word-break: keep-all; }
.dk-tl__t { flex: 0 0 auto; font-family: var(--dk-font-sans); font-weight: 700;
  font-size: clamp(12.5px,1.5vw,14px); color: var(--dk-fg-muted); white-space: nowrap; }
.dk .dk-tl__d { margin: 0; font-size: clamp(13px,1.6vw,14px); line-height: 1.7;
  color: var(--dk-fg-3); word-break: keep-all; }
/* 강조 칸은 면이 코발트라 글자를 전부 흰 계열로 뒤집는다. */
.dk .dk-tl__it.is-key .dk-tl__h { color: #fff; }
.dk-tl__it.is-key .dk-tl__t { color: rgba(255,255,255,.82); }
.dk .dk-tl__it.is-key .dk-tl__d { color: rgba(255,255,255,.88); }
/* 좁은 폭에선 제목과 시간이 한 줄에 안 들어간다 — 시간을 아래로 내린다. */
@media (max-width: 480px) {
  .dk .dk-tl__h { flex-wrap: wrap; gap: 2px 10px; }
  .dk-tl__t { flex: 1 1 100%; }
}


/* ── 다크 면 위 타임라인 (★2026-08-20) ────────────────────────────────
   같은 타임라인 컴포넌트를 어두운 패널 안에서 쓴다. 구조는 그대로 두고 색만 뒤집는다 —
   새 컴포넌트를 만들지 않는다. 폭 상한(720px)도 패널이 이미 잡아 주므로 푼다. */
.dk-tl--dark { max-width: none; }
.dk-tl--dark .dk-tl__it::before { background: rgba(255,255,255,.22); }
.dk-tl--dark .dk-tl__it::after { background: var(--dk-surface-dark);
  border-color: rgba(255,255,255,.38); }
.dk-tl--dark .dk-tl__it.is-key::after { border-color: var(--dk-accent-onDark);
  box-shadow: inset 0 0 0 3px var(--dk-surface-dark), inset 0 0 0 16px var(--dk-accent-onDark); }
.dk-tl--dark .dk-tl__card { background: rgba(255,255,255,.07); }
.dk .dk-tl--dark .dk-tl__h { color: #fff; }
.dk-tl--dark .dk-tl__t { color: rgba(255,255,255,.72); }
.dk .dk-tl--dark .dk-tl__d { color: var(--dk-fg-cool-soft); }
/* 강조 칸 — 어두운 면 위에서는 진한 코발트가 배경과 덜 갈린다. 밝은 쪽 코발트를 쓰고
   글자를 어둡게 뒤집는다(어두운 면 위 글자 전용 토큰이 그 용도다). */
.dk-tl--dark .dk-tl__it.is-key .dk-tl__card { background: var(--dk-accent-onDark); }
.dk .dk-tl--dark .dk-tl__it.is-key .dk-tl__h { color: var(--dk-surface-dark); }
.dk-tl--dark .dk-tl__it.is-key .dk-tl__t { color: rgba(42,42,42,.78); }
.dk .dk-tl--dark .dk-tl__it.is-key .dk-tl__d { color: rgba(42,42,42,.86); }

@media (max-width: 768px) {
  .dk-daily__panel { margin-left: 0; width: 100%; }
}
/* (2026-08-20 — .dk-daily__row/__badge/__num/__txt 규칙은 숫자 3행이 타임라인으로
   바뀌면서 쓰는 데가 없어졌다. 마크업에 남은 게 없어 무해하지만 다음에 정리 대상.) */

/* ═══════════════════════════════════════════════════════════════════
   배경 띠 — 「6대 핵심 수업 구성」 헤드 + 벌집 인포그래픽 (2026-08-21 회장 지시)

   회장은 이 둘을 "섹션 두 개"로 본다. 실제 마크업은 상세카드까지 포함한 한 섹션이라
   섹션 배경을 바꾸면 상세카드 뒤까지 회색이 되고, 바로 다음 「하루 9시간」 섹션이
   #f5f5f5 라 #efefef 와 붙으면 이음매가 실수처럼 보인다.
   → 헤드와 벌집만 띠로 묶고 상세카드는 흰 배경 그대로 둔다.

   ★음수 마진으로 섹션 상단 패딩을 걷어낸다. 안 그러면 띠 위에 흰 줄이 남는다.
     값은 .dk-sec 패딩과 같아야 하므로 _shell.css 의 clamp 와 640px 오버라이드를
     그대로 따라간다 — 한쪽만 바뀌면 흰 줄이 다시 생긴다.
   ★아래쪽은 .dk-hc 의 margin-bottom 이 띠 밖으로 상쇄돼 나가므로
     띠는 벌집 아래 모서리에서 정확히 끝난다(바닥 패딩을 주면 상쇄가 막힌다).
═══════════════════════════════════════════════════════════════════ */
.page-curriculum-hcband {
  background: var(--dk-surface-elevated);
  margin-top: calc(-1 * clamp(56px, 8vw, 96px));
  padding-top: clamp(56px, 8vw, 96px);
}
@media (max-width: 640px) {
  .page-curriculum-hcband { margin-top: -56px; padding-top: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 안에 들어가는 사진 블록 (2026-08-21 회장 지시)

   .dk-ph-block 은 섹션 '밖' 형제로 놓는 부품이고, 자기 padding 이 56~96px 이다.
   위 섹션의 padding-bottom 과 겹쳐 텍스트와 사진 사이가 최대 192px 까지 벌어졌다.
   회장: "이미지랑 텍스트 간격이 너무 멀다".

   ★더 큰 문제는 소속이었다. 섹션 사이에 떠 있으면 위 섹션 것인지 아래 것인지
     읽는 사람이 알 수 없다. 「배정 기준」에서는 실제로 [사진][텍스트][카드] 순으로
     보였다 — 회장: "듣도보도 못한 배치". 사진은 자기를 설명하는 텍스트 아래,
     같은 섹션 안에 있어야 한다.

   간격은 여백 스케일로만 준다 — 위는 .dk-shead 의 margin-bottom(gap-lg),
   아래는 여기서 같은 gap-lg. 값을 새로 짓지 않으므로 종류가 늘지 않는다.
═══════════════════════════════════════════════════════════════════ */
.page-curriculum-inph { margin: 0; }
.page-curriculum-inph + .dk-g5 { margin-top: var(--dk-gap-lg); }