/* ★2026-08-21 — 아래 다섯은 전부 「흰 카드 + 1px 헤어라인」인데 섹션 배경도 흰색이라 카드가 바닥에 묻혀 있었다(13폭 전부에서 검사에 걸림). 커리큘럼에서 회장이 고른 2안(그림자로 띄우기)을 그대로 쓴다. 값은 승인된 `.dk-card5` 에서 글자 그대로 복제. ★추기(2026-08-21) — 그 「섹션 배경 3~4개 연속」 을 회장이 직접 지적해 풀었다. 흰색 / var(--dk-surface-card) 을 번갈아 깔아 다른 5페이지와 같은 리듬으로 맞췄다. 선언 방식도 사이트 정본 패턴(HTML 인라인 background)을 그대로 따른다. */ /* page-consulting.css — site.css 에서 분리(2026-08-03). 내용 무변경, 위치만 이동. 불러오는 순서: tokens → _shell → _components → _legacy → page-* ✏️ 이 페이지 전용. 이 페이지 세션이 고치는 유일한 CSS. */ /* ★ 2026-07-30 회장 지시 — 캠프 포함으로 오해되지 않게 성격을 한 줄로 못 박는 안내. 작게, 중간 여백에. 강조하지 않는다(간보기 성격을 깨지 않도록). */ .dk .dk-cs-caveat { margin: var(--dk-gap-md) 0 0; font-size: 12.5px; line-height: 1.75; color: var(--dk-fg-muted); word-break: keep-all; } .dk-cs-lead { background: #fff; border: 1px solid var(--dk-hairline-soft); border-radius: var(--dk-radius-lg); border-top: 3px solid var(--dk-fg-2); padding: 18px 22px; margin-top: var(--dk-gap-md); box-shadow: 0 1px 2px rgba(20,40,90,.10), 0 10px 22px -6px rgba(20,40,90,.20);} .dk .dk-cs-lead__k { margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; color: var(--dk-fg-muted); } .dk .dk-cs-lead__v { margin: 0; font-size: 14px; line-height: 1.85; color: var(--dk-fg-3); word-break: keep-all; } .dk .dk-cs-lead__v b { color: var(--dk-ink); font-weight: 700; } /* ── 02 인포그래픽 : 3축 수렴 ── */ .dk-cvg { margin-bottom: var(--dk-gap-lg); } .dk-cvg__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .dk-cvg__c { background: #fff; border: 1px solid var(--dk-hairline-soft); border-radius: var(--dk-radius-lg); border-top: 3px solid var(--tone); padding: 22px 18px; text-align: center; box-shadow: 0 1px 2px rgba(20,40,90,.10), 0 10px 22px -6px rgba(20,40,90,.20);} .dk-cvg__n { display: block; font-family: var(--dk-font-display); font-weight: 800; font-size: clamp(20px,2.6vw,26px); line-height: 1; letter-spacing: -0.5px; color: var(--tone); margin-bottom: 11px; } .dk-cvg__i { width: 26px; height: 26px; margin: 0 auto 11px; display: block; fill: none; stroke: var(--tone); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dk .dk-cvg__t { margin: 0 0 5px; font-family: var(--dk-font-display); font-weight: 800; font-size: clamp(15px,2vw,18px); letter-spacing: var(--dk-track-snug); color: var(--dk-ink); word-break: keep-all; } .dk .dk-cvg__k { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .7px; color: var(--dk-fg-muted); } .dk-cvg__arrows { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; height: 26px; } .dk-cvg__arrows i { position: relative; display: block; } .dk-cvg__arrows i::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 7px; width: 1px; background: var(--dk-hairline); transform: translateX(-50%); } .dk-cvg__arrows i::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; border-right: 1.5px solid var(--dk-hairline); border-bottom: 1.5px solid var(--dk-hairline); transform: translateX(-50%) rotate(45deg); } .dk-cvg__base { background: var(--dk-surface-dark); border-radius: var(--dk-radius-lg); padding: 18px 22px; text-align: center; } .dk-cvg__base b { display: block; font-family: var(--dk-font-display); font-weight: 800; font-size: clamp(16px,2.2vw,20px); letter-spacing: var(--dk-track-snug); color: #fff; } .dk-cvg__base span { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,0.68); } @media (max-width: 640px) { .dk-cvg__cols { grid-template-columns: 1fr; } .dk-cvg__arrows { grid-template-columns: 1fr; height: 22px; } .dk-cvg__arrows i:nth-child(n+2) { display: none; } } /* ── 03 프로세스 4단계 + 상시 2개 ── */ .dk-pr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .dk-pr__i { background: #fff; border: 1px solid var(--dk-hairline-soft); border-radius: var(--dk-radius-lg); padding: 18px 20px; display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; box-shadow: 0 1px 2px rgba(20,40,90,.10), 0 10px 22px -6px rgba(20,40,90,.20);} .dk-pr__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(--dk-accent-red-2); } .dk-pr__b { min-width: 0; } .dk .dk-pr__t { margin: 0 0 6px; font-family: var(--dk-font-display); font-weight: 800; font-size: clamp(15.5px,2.1vw,19px); letter-spacing: var(--dk-track-snug); color: var(--dk-ink); word-break: keep-all; } .dk .dk-pr__d { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--dk-fg-3); word-break: keep-all; } .dk-pr__u { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .dk-pr__u li { position: relative; padding-left: 15px; font-size: 12.5px; font-weight: 700; color: var(--dk-fg-2); line-height: 1.6; word-break: keep-all; } .dk-pr__u li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--dk-hairline); } .dk-pr__u em { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--dk-fg-muted); margin-top: 4px; line-height: 1.65; } .dk-pr__add { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dk-pr__a { background: var(--dk-surface-elevated); border: 1px dashed var(--dk-hairline); border-radius: var(--dk-radius-lg); padding: 17px 19px; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; } .dk-pr__ap { font-size: 17px; font-weight: 700; color: var(--dk-fg-2); line-height: 1.2; } .dk .dk-pr__m { margin: 9px 0 0; font-size: 11.5px; font-weight: 700; color: var(--dk-fg-muted); line-height: 1.6; } @media (max-width: 700px) { .dk-pr__add { grid-template-columns: 1fr; } } @media (max-width: 520px) { .dk-pr__i { grid-template-columns: 1fr; gap: 9px; } } /* ── 컨설팅 전용 문의 (본문 내 '안내' 층위) ── */ .dk-cinq { margin-top: var(--dk-gap-lg); background: #fff; border: 1px solid var(--dk-hairline-soft); border-radius: var(--dk-radius-lg); border-top: 3px solid var(--dk-accent-red); padding: clamp(20px,2.8vw,28px); display: grid; grid-template-columns: 1fr auto; gap: clamp(20px,3vw,40px); align-items: center; box-shadow: 0 1px 2px rgba(20,40,90,.10), 0 10px 22px -6px rgba(20,40,90,.20);} .dk-cinq__tx { min-width: 0; } .dk .dk-cinq__k { margin: 0 0 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; color: var(--dk-accent-red); } .dk .dk-cinq__t { margin: 0; font-family: var(--dk-font-display); font-weight: 800; font-size: clamp(17px,2.5vw,22px); line-height: 1.35; letter-spacing: var(--dk-track-snug); color: var(--dk-ink); word-break: keep-all; } .dk .dk-cinq__d { margin: 10px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--dk-fg-3); word-break: keep-all; } .dk .dk-cinq__d b { color: var(--dk-fg-2); font-weight: 700; } /* ★2026-07-30 회장 지적 "cta 버튼 글자 안보인다". tokens-domestic.css의 `.dk a`(특성도 0-1-1)가 `.dk-cinq__b`(0-1-0)를 이겨 글자색이 코발트로 덮여 코발트 배경과 같아졌다(실측: 글자 rgb(15,82,201) = 배경). HANDOFF에 이미 적힌 함정인데 또 밟았다. → `.dk` 접두를 붙여 0-2-0으로 올린다. */ .dk .dk-cinq__b { background: var(--dk-accent-red); color: #fff; border-radius: var(--dk-radius-md); padding: 13px 22px; font-size: 13.5px; font-weight: 700; text-align: center; white-space: nowrap; text-decoration: none; transition: background var(--dk-dur-fast) var(--dk-ease-out); } .dk .dk-cinq__b:hover { background: var(--dk-accent-red-light); color: #fff; } .dk .dk-cinq__b--gh { background: transparent; border: 2px solid var(--dk-accent-red); color: var(--dk-accent-red); padding: 11px 20px; } .dk .dk-cinq__b--gh:hover { background: var(--dk-accent-red); color: #fff; } @media (max-width: 760px) { .dk-cinq { grid-template-columns: 1fr; gap: 18px; } .dk-cinq__b { white-space: normal; padding: 13px 12px; } } /* ── 04 준비물 ── */ .dk-prep { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .dk-prep__i { background: #fff; border: 1px solid var(--dk-hairline-soft); border-radius: var(--dk-radius-lg); padding: 19px 21px; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; box-shadow: 0 1px 2px rgba(20,40,90,.10), 0 10px 22px -6px rgba(20,40,90,.20);} .dk-prep__ic { width: 24px; height: 24px; fill: none; stroke: var(--dk-fg-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dk .dk-prep__t { margin: 0 0 5px; font-family: var(--dk-font-display); font-weight: 800; font-size: 17px; letter-spacing: var(--dk-track-snug); color: var(--dk-ink); } .dk .dk-prep__k { margin: 0 0 9px; display: inline-block; background: var(--dk-surface-elevated); border-radius: var(--dk-radius-full); padding: 2px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--dk-fg-2); } .dk .dk-prep__d { margin: 0; font-size: 13px; line-height: 1.8; color: var(--dk-fg-3); word-break: keep-all; } .dk .dk-prep__d b { color: var(--dk-fg-2); font-weight: 700; } @media (max-width: 700px) { .dk-prep { grid-template-columns: 1fr; } } /* ── 히어로 배경 이미지 (★2026-08-20 회장 지시) ────────────────────────── "인덱스 빼고는 히어로 섹션 배경을 각자에 어울리는 이미지로. 옅은 블랙박스도." 원본 = 활동사진 consulting-03 (강당에서 다수의 청중이 입시 설명회를 듣는 모습). 🔒 _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, 152바이트)을 아래층에 깔았다. 회색 대신 그 사진의 흐릿한 형태가 보이다가 실물이 도착하면 덮인다. ⚠️ background-image 를 새로 선언하는 곳은 아래층(var(--hero-lqip))을 같이 써야 한다. 한 층만 쓰면 흐린 층이 사라져 다시 회색이 된다. */ .dk-bg-video-section .dk-bg-video-placeholder { --hero-lqip: url("data:image/webp;base64,UklGRooAAABXRUJQVlA4IH4AAADQAwCdASoUAAoAPu1iqU2ppaOiMAgBMB2JQBOgA8IWc1S3iUDg10AA25H4JWUs6IqzI1qM7Q2Q+4eRpt66MkrmshngjouMcdDglejWTmItzlgfuuw95n6LiYkUDJzyZNouQIMUKGf8Wrx/0Crs78GSkFUqyDSkpd4TVexngAA="); background-image: url("../images/hero/dakgong-domestic-hero-consulting-1920.webp"), var(--hero-lqip); background-size: cover; background-position: center 42%; } /* ★2026-08-21 회장 지시 — 사진을 「컨설팅1」(설명회 전경)으로 교체하고, 강단의 발표자와 앉아 있는 청중이 PC·모바일 둘 다 보이게 맞췄다. ⚠ 이것은 8/20 에 여기 적혀 있던 「인물 노출 없이 시스템만」(7/30 판단)을 뒤집는다. 회장이 직접 반대로 지시했기 때문이다 — 그 때 왜 왼쪽 24% 를 잘랐는지를 여기 남겨 둔다. 다시 「인물 빼라」가 나오면 사진부터 바꿔야 한다. 자르는 지점은 background-position 이 아니라 **파일 비율**로 잡았다. cover 는 한 쪽만 자르기 때문에, 박스 비율이 폭에 따라 2.1:1(1280px) → 3.2:1(1920px) 로 크게 변하는 이 히어로에서는 3:2 원본을 그대로 쓰면 한 폭에 맞추면 다른 폭이 깨진다. PC — 가로 전체, 세로 위 20% 컷 → 1.875:1 (1920×1024). 잘린 것은 스크린 상단뿐이다. 위치 25% — 산정: 1920px 에서 보이는 창은 사진의 10.4~68.9%, 1440px 에서 5.5~83.6%, 1280px 에서 3.0~91.9%. 발표자 머리(15.5%)가 세 폭 모두 들어온다. 42% 로 두면 1920px 에서 창이 16.7~75.3% 로 내려가 발표자 머리가 잘린다. 모바일 — 박스가 세로로 길어(390×520 = 0.75:1) 반대다. 0.95:1 거의 정사각으로 자르고 발표자가 크롭 폭의 70% 지점에 오게 놓았다(글은 왼쪽, 사람은 오른쪽). 320px(0.62:1)에서도 가로 17.6~82.4% 가 남아 발표자(62~78%)가 안 잘린다. */ @media (min-width: 821px) { .dk-bg-video-section .dk-bg-video-placeholder { background-position: center 25%; } } @media (max-width: 820px) { .dk-bg-video-section .dk-bg-video-placeholder { background-image: url("../images/hero/dakgong-domestic-hero-consulting-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%); } } /* ── SYSTEM 섹션 하단 사진 띠 4칸 (★2026-08-21 회장 지시) ────────────── 새 컴포넌트가 아니다. 자습(.page-self-study-strip)·선생님(.page-teachers-strip)이 쓰는 것과 같은 값을 그대로 넣었다 — 4칸 / gap-xs / 3:2 / ≤880px 에서 2칸. 칸 모양은 공용 `.dk-ph.is-filled` 가 맡는다(띠가 따로 손대지 않는다). ⚠ 사진 원본이 3:2 이므로 칸도 3:2 — 극단 크롭이 안 난다. */ .page-consulting-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dk-gap-xs); margin-top: var(--dk-gap-lg); } .page-consulting-strip .dk-ph { aspect-ratio: 3/2; min-height: 0; } @media (max-width: 880px) { .page-consulting-strip { grid-template-columns: repeat(2, 1fr); } } /* ── 컨설팅 영상 1개 (★2026-08-21 회장 지시) ─────────────────── 홈(index)의 인터뷰 영상 칸과 **같은 컴포넌트**다. 동작도 같은 assets/js/video.js (썸네일 파사드 → 누르면 youtube-nocookie iframe) 를 그대로 쓴다. ⚠ 그 정의가 page-index.css 에 있어 **복제 말고는 방법이 없다** — 공용으로 올리려면 🔒 _components.css 를 고쳌야 하고 그건 페이지 세션이 정할 것이 아니다. **고칠 때는 반드시 양쪽을 같이 고친다.** 아래 값은 index 에서 계산된 최종값 그대로다 (`.dk-vi-grid .dk-vi-card` 가 기본 `.dk-vi-card` 를 이기는 것까지 반영해 합쳤다). 자리표시용 점선·도트 배경 한 벌(.dk-bi-slot,.dk-vi-card,.dk-pt-vis)은 복제하지 않았다 — 이 칸은 항상 is-filled 라 그 background-image 를 none 으로 덮어쓴다(계산값 동일). 그리드만 다르다: 홈은 2개를 상하로 쌓지만 여기는 한 개뿐이라 `grid-template-rows: auto auto` 를 그대로 쓰면 빈 둘째 행 앞에 gap 만 남는다. */ /* ★2026-08-21 회장 지시 — 「영상 창 사이즈를 섬션 폭 규정으로 키워버리자」. 홈은 영상 2개를 상하로 쌓아서 880px 로 묶어 둔 것이고, 여기는 한 개뿐이라 그 묶음을 따를 이유가 없다. 폭을 따로 정하지 않고 `.dk-wrap` 이 주는 그대로 둔다 — 그래야 위의 글·카드와 좌우 끝이 같은 선에 떨어진다(실측 1440px 에서 1280px). */ .page-consulting-vid { margin-top: var(--dk-gap-lg); } .page-consulting-vid .dk-vi-card { position: relative; height: auto; aspect-ratio: 16/9; border-radius: var(--dk-radius-sm); 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); } .page-consulting-vid .dk-vi-card:hover { transform: translateY(-4px); border-color: var(--dk-fg-muted); } .page-consulting-vid .dk-vi-card.is-filled { border-style: solid; border-color: var(--dk-hairline-soft); background-image: none; } .page-consulting-vid .dk-vi-card.is-playing { transform: none; } .page-consulting-vid .dk-vi-card.is-playing:hover { transform: none; } /* 파사드 버튼 — 카드 전체가 누를 수 있는 영역이다.
가 아니라