/* page-teachers.css — site.css 에서 분리(2026-08-03). 내용 무변경, 위치만 이동. 불러오는 순서: tokens → _shell → _components → _legacy → page-* ✏️ 이 페이지 전용. 이 페이지 세션이 고치는 유일한 CSS. */ .dk-perf-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin-bottom: var(--dk-gap-sm); } /* ★2026-08-21 — 섹션이 다크에서 흰색으로 바뀌면서, 다크 배경을 전제로 한 반투명 흰색 (rgba(255,255,255,.14))이 흰 바닥 위에서 거의 안 보이게 됐다. 같은 섹션 안 카드(.dk-kp-card)가 어두운 면이므로 숫자 상자도 같은 면으로 맞춘다 — 섹션이 「흰 바닥 + 어두운 블록들」 한 가족으로 읽힌다. 값은 카드에서 복제. */ .dk-perf-num { background: var(--dk-surface-dark); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--dk-radius-lg); padding: 30px 24px; text-align: center; transition: transform var(--dk-dur-base) var(--dk-ease-out), background var(--dk-dur-base) var(--dk-ease-out); } .dk-perf-num:hover { transform: translateY(-4px); background: var(--dk-surface-dark-2); } .dk-perf-num .v { font-family: var(--dk-font-display); font-weight: 800; font-size: clamp(28px,3.6vw,38px); color: var(--dk-accent-red-light); margin-bottom: 8px; } .dk-perf-num .k { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.5; } .dk-kp-note { text-align: center; margin: var(--dk-gap-md) auto 0; max-width: 640px; font: var(--dk-title-md); color: var(--dk-fg-3); } /* ── E. 균등 4열 (프로필·시설 목록용) ── */ .dk-ph-quad { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .dk-ph-quad .dk-ph { aspect-ratio: 3/3.6; } @media (max-width: 880px) { .dk-ph-quad { grid-template-columns: repeat(2,1fr); } } /* ── 슬롯 비율 브레이크포인트 (★2026-07-29 정리) ── 기존엔 560/640/768/880에 비율 재정의가 흩어져 있어, 폰용 세로 비율이 태블릿까지 흘러가 768px에서 이미지 하나가 816px, tri 한 덩어리가 950px까지 길어졌다. → 경계를 둘로만 둔다. ≤480px 폰 = 세로형 / 481~1023px 태블릿 = 완만한 가로형 / ≥1024px = PC(위 블록) */ @media (max-width: 480px) { .dk-ph-quad .dk-ph { aspect-ratio: 3/4; } } @media (min-width: 481px) and (max-width: 1023px) { .dk-ph-quad .dk-ph { aspect-ratio: 3/3.4; } } /* ── 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-quad .dk-ph { aspect-ratio: 3/3.4; } } /* ── 히어로 배경 이미지 (★2026-08-20 회장 지시) ────────────────────────── "인덱스 빼고는 히어로 섹션 배경을 각자에 어울리는 이미지로. 옅은 블랙박스도." 원본 = 활동사진 mentoring-04 (조끼를 입은 멘토들이 학생들과 마주 앉아 상담하는 모습). 🔒 _shell.css 는 안 건드린다 — 페이지마다 그림이 다르니 각자 파일에서 얹는다. 홈은 실물 영상이라 이 규칙과 무관하다. ⚠️ 히어로는 600px 고정 높이의 풀블리드라 3:2 원본이 세로로 크게 잘린다. 슬롯 사진의 「75% 이상 남기기」 기준은 여기 적용 대상이 아니다(그건 콘텐츠 칸 기준). 대신 background-position 으로 피사체가 잘려 나가지 않는 지점을 잡는다. */ /* ★2026-08-21 회장 지적 — "히어로에 회색창 1초 떴다가 로딩된다". 원인 둘이었다. ① CSS 배경이라 브라우저가 CSS 5장을 다 받은 뒤에야(988ms) 사진을 요청한다. → HTML 에 preload 를 넣어 요청을 앞으로 당겼다. ② 그동안 보이는 것이 회색이었다. placeholder 배경이 투명이라 흰 섹션 위에 검은 오버레이만 얹혀 회색이 된 것이다(_shell.css 의 남색 그라디언트는 여기서 background-image 를 덮어써서 사라진다). → 20px 짜리 흐린 축소본(아래 base64, 164바이트)을 아래층에 깔았다. 회색 대신 그 사진의 흐릿한 형태가 보이다가 실물이 도착하면 덮인다. ⚠️ background-image 를 새로 선언하는 곳은 아래층(var(--hero-lqip))을 같이 써야 한다. 한 층만 쓰면 흐린 층이 사라져 다시 회색이 된다. */ .dk-bg-video-section .dk-bg-video-placeholder { --hero-lqip: url("data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAAAwBACdASoUAA0APsFOoUqnpCMhsAgA8BgJZQDKACIG2xJKAV3YCiU8gdAAzj9zaVPQzCeN7fle7u6WuhzZPpiA1piDHuRaxnPWdYu/n9/xKzs6FS+7Xh0Br/EcM93MDfr/TLVRH70H0S+3c9mD9jZkg2sP9WhbxSTfcnvWHQZhZjWjplFIkg7upuiV0A2AAAA="); background-image: url("../images/hero/dakgong-domestic-hero-teachers-1920.webp"), var(--hero-lqip); background-size: cover; background-position: center 42%; } @media (max-width: 820px) { /* ★2026-08-21 회장 지적 — "모바일에서 애 등짝이 너무 크게 나온다. 좌측 여자 쌤과 아이가 주인공으로 나오게 이미지를 오른쪽으로 당겨라." 폰(390px)에서는 600px 고정 높이를 채우느라 원본 가로의 **43% 만** 보인다. 가운데(50%)를 잡으면 그 43% 안이 전경의 큰 등판으로 꽉 찬다. → 가로 기준점을 왼쪽 끝(0%)으로. 멘토가 화면 중앙에서 오른쪽에 놓이고 등판은 우측 가장자리로 밀린다. 320~430px 전부 확인했다. 세로(42%)는 무의미하다 — cover 로 높이를 꽉 채우므로 세로로는 넘치는 부분이 없다. */ .dk-bg-video-section .dk-bg-video-placeholder { background-image: url("../images/hero/dakgong-domestic-hero-teachers-1200.webp"), var(--hero-lqip); background-position: 0% 42%; } } /* ★블랙박스 — 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) — .dk-ph-split .txt 가 쓰던 값을 그대로 가져왔다. 글을 사진 위로 올리면서 필요해진 것이고, 새 값을 짓지 않는다. */ .page-teachers-phlead { margin-bottom: var(--dk-gap-lg); } .page-teachers-phlead h3 { font: var(--dk-display-xs); color: var(--dk-ink); margin: 0 0 10px; letter-spacing: var(--dk-track-snug); } .dk .page-teachers-phlead p { font: var(--dk-body-md); color: var(--dk-fg-3); line-height: 1.75; margin: 0; max-width: 680px; } /* ★2026-08-21 회장 지시 — 「역할 구성」·「선발 기준」 6칸을 PC 에서 상3 / 하3 으로. 공용 그리드는 auto-fit(minmax 230/220px)이라 1280px 에서 5칸이 서고 6번째만 혼자 남았다. 두 섹션 다 6개 병렬 항목이라 3+3 이 균등하다. 🔒 _components.css 는 안 건드린다 — 같은 컴포넌트를 index 가 5개짜리로 쓰고 있어 공용을 3열로 바꾸면 홈이 깨진다. 이 페이지에서만 열 수를 고정한다. ⚠️ 경계를 880px 로 잡은 이유: 그 아래에서 3열을 강제하면 칸이 217px 까지 좁아진다. 880 미만은 auto-fit 이 알아서 2열(2+2+2) 또는 1열로 내려가고, 6은 둘 다로 나눠떨어진다. ★4열이 되는 구간(뷰포트 1080px~)이 4+2 로 깨지던 자리라 여기서 같이 막힌다. */ @media (min-width: 880px) { .dk-g5.page-teachers-g3, .dk-kp-track.page-teachers-g3 { grid-template-columns: repeat(3, 1fr); } } /* ★2026-08-21 — 멘토링 사진 3장을 섹션 '안'으로 옮기면서 필요해진 여백. 원래 `.dk-wrap.dk-ph-block` 으로 섹션 밖 형제였는데, 섹션 순서가 바뀌며 멘토링 섹션이 회색이 되자 사진만 흰 바닥에 홀로 뜨는 띠가 됐다. 커리큘럼에서 이미 같은 처방을 했다(`.page-curriculum-inph`) — 사진은 자기를 설명하는 섹션 안에 둔다. `.dk-ph-block` 의 자체 padding(56~96px)은 버리고 스케일 값만 쓴다. */ .page-teachers-inph { margin: var(--dk-gap-xl) 0 0; } /* ★2026-08-21 회장 승인(프리뷰 A안) — 「역할 구성」 제목 아래 과목 수업 사진 4장. PC 4열 / 태블릿·폰 2열. 6칸 카드가 880px 에서 3열로 서므로 띠도 같은 경계에서 접는다. ⚠️ `.dk-ph` 의 `min-height:130px` 를 여기서만 푼다. 촬영분이 전부 3:2 인데, 좁은 폭에서 칸 폭이 130px 아래로 내려가면 min-height 가 이겨서 칸이 1:1 쪽으로 눌리고 사진이 잘린다 (320px 기준 칸 134px → 3:2 면 89px 인데 130px 로 밀린다 = 31% 손실). 자리표시일 땐 안 보이고 실물에서만 드러나는 종류라 미리 막아 둔다. */ .page-teachers-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dk-gap-xs); margin-bottom: var(--dk-gap-lg); } .page-teachers-strip figure { margin: 0; min-width: 0; } .page-teachers-strip .dk-ph { aspect-ratio: 3/2; min-height: 0; } .dk .page-teachers-strip figcaption { font-size: 13px; font-weight: 700; color: var(--dk-fg-2); line-height: 1.45; margin-top: 10px; } @media (max-width: 880px) { .page-teachers-strip { grid-template-columns: repeat(2, 1fr); } } /* ★2026-08-03 — 인라인 여백을 클래스로. 값 무변경. */ .dk .page-teachers-nums { margin-top: var(--dk-gap-lg); }