/* ===================================================================== DAKGONG CAMP — Design Tokens (국내캠프 파생본 / DOMESTIC) --------------------------------------------------------------------- 이 파일은 필핀(필리핀캠프) tokens.css의 국내캠프 파생본이다. accent-red 계열 토큰명은 그대로 유지하되(--dk-accent-red 등), 실제 색은 코발트 블루(B안 #0f52c9)다. 근거 = domestic-blue/PALETTE.md B안(코발트) · WCAG 명도대비 계산 완료. 같은 것 = 그 외 전부(잉크·본문·다크섹션·캔버스·폭 1280·타이포·간격·radius·motion). 다른 것 = 포인트 컬러 4색뿐(아래 표 참조). 상태 = DRAFT (고객 미승인, 회장 추천 B안 기준 복제본). ★ 토큰 이름을 바꾸지 말 것 — 필핀 컴포넌트/페이지 재사용 호환을 위해 이름 고정. ===================================================================== */ /* Self-hosted Pretendard (body / UI) + Paperlogy (optional display). */ /* ★ 2026-07-25 실측 수정: assets/fonts/ 안 Pretendard 실물은 전부 .otf인데 src가 .ttf를 요구해 전부 404(로컬 ERR_FILE_NOT_FOUND / 배포본 HTTP 404) → Pretendard 미로딩, 시스템 폴백(Helvetica Neue 등)으로 렌더링되던 버그 수정. 확장자를 실제 파일(.otf)에 맞추고 format도 opentype로 정정. Paperlogy는 실물이 .ttf 그대로라 변경 없음(Glob 실측 확인, assets/fonts/ 9개 전부 .ttf). */ @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/Pretendard-Thin.otf") format("opentype"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/Pretendard-ExtraLight.otf") format("opentype"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Pretendard-Light.otf") format("opentype"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Pretendard-Regular.otf") format("opentype"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Pretendard-Medium.otf") format("opentype"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Pretendard-SemiBold.otf") format("opentype"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Pretendard-Bold.otf") format("opentype"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/Pretendard-ExtraBold.otf") format("opentype"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/Pretendard-Black.otf") format("opentype"); } @font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/Paperlogy-1Thin.ttf") format("truetype"); } @font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/Paperlogy-2ExtraLight.ttf") format("truetype"); } @font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Paperlogy-3Light.ttf") format("truetype"); } @font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Paperlogy-4Regular.ttf") format("truetype"); } @font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Paperlogy-5Medium.ttf") format("truetype"); } @font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Paperlogy-6SemiBold.ttf") format("truetype"); } @font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Paperlogy-7Bold.ttf") format("truetype"); } @font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/Paperlogy-8ExtraBold.ttf") format("truetype"); } @font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/Paperlogy-9Black.ttf") format("truetype"); } /* ★2026-07-25: 필핀 실사이트 SNS 아이콘 폰트 실측 반영(블로그·유튜브·카카오). 파일 출처 = https://vendor-cdn.imweb.me/fonts/Plipop-Social-Icons.ttf?xgz9qy (로그인·결제 없이 공개 접근 가능한 URL, 2026-07-25 확인·다운로드). 글리프 매핑은 https://vendor-cdn.imweb.me/css/ii.css?1738631657 원본 CSS 정본 값 + 실사이트 getComputedStyle(el, '::before').content 실측(Playwright)으로 이중 확인. */ @font-face { font-family: "Plipop-Social-Icons"; font-style: normal; font-weight: normal; font-display: block; src: url("../fonts/Plipop-Social-Icons.ttf") format("truetype"); } /* 인스타그램은 필핀 사이트도 Plipop이 아니라 FontAwesome 5 Brands(class="fa fa-instagram")를 씀 — getComputedStyle 확인 결과 font-family: FontAwesome, content: "\f16d". 동일 글리프를 Font Awesome Free 6.5.1(SIL OFL 라이선스, 자유 재배포 가능)에서 self-host. */ @font-face { font-family: "FA-Brands"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.ttf") format("truetype"); } :root { /* ----- Brand & accent --------------------------------------------- */ --dk-primary: #ffffff; /* the canvas — trust & clarity */ --dk-ink: #1a1a1a; /* default headline / body color */ --dk-on-primary: #ffffff; --dk-on-dark: #1a1a1a; --dk-accent-red: #0f52c9; /* ★국내 파생: 코발트 B안 주력(필핀 #ab0000 치환). 이름은 유지 */ --dk-accent-red-2: #2666d6; /* ★국내 파생: 코발트 보조(필핀 #c1272d 치환) */ --dk-accent-red-light: #5187e8; /* ★국내 파생: 코발트 hover(필핀 #e74c5a 치환) — 밝은 면·면(fill) 용 */ --dk-accent-onDark: #6393ea; /* 어두운 면 위 글자 전용. #5187e8 은 #2a2a2a 위에서 4.09:1 로 미달(기준 4.5). 색상각 219° 그대로, 밝기만 +4%. 밝은 면에서 이걸 쓰면 거꾸로 대비가 떨어진다 — 용도를 지킨다 */ --dk-accent-red-bg: #dce8fc; /* ★국내 파생: 연한 코발트 배경(필핀 #fbd7d7 치환) */ --dk-surface-dark: #2a2a2a; /* ★실측: 검정 섹션·카드. 순검정 #111 ❌ (변경 없음) */ --dk-accent-black: #1a1a1a; /* ----- Text scale (foreground) ------------------------------------ */ --dk-fg-1: #1a1a1a; /* primary text (= ink) */ --dk-fg-2: #2a2a2a; /* body-strong, leads */ --dk-fg-3: #555555; /* ★실측: 본문 회색. 구값 #4a4a4a ❌ */ --dk-fg-muted: #808080; /* captions, meta, breadcrumbs ★2026-08-03 #6a6a6a 로 어둡게 했다가 **원복**. 회장 지시 — 인포그래픽은 라이브 버전 그대로 둔다. 이 토큰이 인포그래픽 라벨(dk-ds/dk-cvg/dk-pr 등)에 걸려 있어서, 대비를 올리면 인포그래픽이 같이 바뀐다. 대비 미달은 아래 contrast_exempt 로 기록해 둔다. */ --dk-fg-muted-onDark: #9a9a9a; /* 어두운 면 위 보조 글자 — 밝은 배경용을 그대로 쓰면 반대로 어두워져 더 안 보인다(푸터 3.63:1) */ /* ----- Surfaces --------------------------------------------------- */ --dk-canvas: #ffffff; --dk-surface-soft: #fafafa; /* almost-white, for stat blocks */ --dk-surface-card: #f5f5f5; /* feature cards */ --dk-surface-elevated: #efefef; /* nested cards */ /* ----- Hairlines & dividers -------------------------------------- */ --dk-hairline: #d0d0d0; /* visible 1px rule */ --dk-hairline-soft: #e8e8e8; /* card edge / faint rule */ /* ----- Semantic --------------------------------------------------- */ --dk-warning: #ff6b6b; /* 면(fill) 전용 */ --dk-warning-ink: #c1272d; /* 글자·선 전용 — craft/color.md: 브랜드 밝은 색은 면에만 쓰고, 글자엔 어두운 단계를 쓴다 */ --dk-success: #2ecc71; /* ----- Type families --------------------------------------------- */ --dk-font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif; /* Paperlogy = optional display face for posters / hero / card-news headlines. */ --dk-font-display: "Paperlogy", "Pretendard", var(--dk-font-sans); /* ----- Type scale (size / weight / line-height / tracking) ------- */ /* ★ 2026-06-29 메인페이지 실측값으로 확정. display-lg(섹션H2)=Paperlogy 36px, label=15px/400/no-uppercase */ --dk-display-xl: 700 48px/1.2 var(--dk-font-display); --dk-display-lg: 700 36px/1.25 var(--dk-font-display); /* 섹션 H2. Paperlogy. 구값 40px ❌ */ --dk-display-md: 700 32px/1.3 var(--dk-font-display); --dk-display-sm: 700 28px/1.35 var(--dk-font-display); /* ★2026-08-21 회장 지적 — "여기 글씨만 볼드로 포인트인데 폰트가 일반 폰트야?" 전 페이지 제목 68개를 재보니 Paperlogy 가 61개, Pretendard 가 7개였다. 그 7개가 전부 24px 소제목이었고, 원인은 소제목이 **본문 계열 토큰(title-lg)** 을 쓰고 있던 것이다. 크기·굵기는 맞는데 계열이 틀렸다. → 같은 크기·굵기·행간의 display 단을 하나 등록한다. 글자만 바뀌고 자리는 안 움직인다. */ --dk-display-xs: 700 24px/1.4 var(--dk-font-display); /* 24px 소제목. title-lg 와 크기 동일, 계열만 display */ --dk-title-lg: 700 24px/1.4 var(--dk-font-sans); --dk-title-md: 600 20px/1.5 var(--dk-font-sans); --dk-title-sm: 600 18px/1.5 var(--dk-font-sans); --dk-body-lg: 400 18px/1.6 var(--dk-font-sans); /* 리드/서브텍스트. 구값 없었음 */ --dk-body-md: 400 16px/1.6 var(--dk-font-sans); --dk-body-sm: 400 14px/1.6 var(--dk-font-sans); --dk-caption: 400 12px/1.5 var(--dk-font-sans); --dk-button: 700 14px/1.4 var(--dk-font-sans); --dk-nav-link: 600 14px/1.5 var(--dk-font-sans); --dk-label-red: 400 15px/1.4 var(--dk-font-sans); /* 빨강 라벨. 대문자X. 구값 label-up(700/14px/uppercase) ❌ */ --dk-label-up: 700 14px/1.4 var(--dk-font-sans); /* 일반 태그/뱃지용으로만 유지 */ --dk-track-tight: -0.5px; --dk-track-snug: -0.3px; --dk-track-wide: 0.5px; --dk-track-caption: 0.3px; /* ----- Spacing (4px base) ---------------------------------------- */ --dk-space-xxs: 4px; --dk-space-xs: 8px; --dk-space-sm: 12px; --dk-space-md: 16px; --dk-space-lg: 24px; --dk-space-xl: 32px; --dk-space-xxl: 48px; --dk-space-section: 64px; /* ----- Radii ----------------------------------------------------- */ --dk-radius-none: 0; --dk-radius-xs: 4px; --dk-radius-sm: 8px; --dk-radius-md: 12px; --dk-radius-lg: 16px; --dk-radius-full: 9999px; /* ----- Layout ---------------------------------------------------- */ --dk-container: 1280px; /* ★2026-07-14 코어 확정. 구값 1200px ❌ (아임웹 실측 폭과 불일치했음 → 실측 기준으로 통일. 국내캠프 등 비(非)아임웹 사이트도 이 값을 쓴다) */ --dk-touch-min: 44px; /* WCAG AAA hit target */ --dk-divider-accent: 3px; /* the signature red rule */ /* ----- Vertical rhythm / 섹션 내 상하여백 스케일 --------------------- ★2026-07-29 신설. 회장 지적 "섹션내에서 상하여백 규칙 개판". 실측 결과 섹션 내부 간격이 0~46px 사이 16종으로 흩어져 있었고, 역할이 같은데 clamp 범위만 다른 선언이 10종이었다. 앞으로 블록 간 여백은 반드시 아래 5단 중 하나를 쓴다. 새 값을 짓지 않는다. xs 라벨·캡션 → 바로 아래 (붙는 관계) sm 소제목(h3) → 그 소제목이 이끄는 콘텐츠 md 콘텐츠 → 보조설명·부속 블록 lg 섹션 헤드 → 본문 / 블록 → 블록 (기본값) xl 같은 섹션 안의 독립된 덩어리 (일과표 3블록 등) */ --dk-gap-xs: 12px; --dk-gap-sm: clamp(16px, 2vw, 20px); --dk-gap-md: clamp(26px, 3.2vw, 34px); --dk-gap-lg: clamp(40px, 5vw, 56px); --dk-gap-xl: clamp(56px, 7vw, 80px); /* ----- Motion ---------------------------------------------------- */ --dk-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --dk-ease-in: cubic-bezier(0.6, 0, 0.8, 0.2); --dk-dur-fast: 120ms; --dk-dur-base: 200ms; --dk-dur-slow: 320ms; /* ── 2026-08-03 등록 — 이미 쓰고 있던 값에 이름표를 붙인 것이다 ── 실측: 토큰 밖 25색 중 12색이 색상각 214~219°로 브랜드 파랑(218°)과 같은 색이었다. 밝기만 조절해 쓴 사실상의 브랜드 자산인데 이름이 없었다. 이름은 색이 아니라 역할로 짓는다(craft/color.md) — 브랜드 색이 바뀌어도 이름이 안 거짓말한다. ⚠️ design-core 에도 같은 내용을 반영해야 한다(코어→사이트 한 방향 원칙). */ --dk-surface-dark-2: #333333; /* 다크 표면 2단 */ --dk-surface-dark-3: #363636; /* 제출 버튼 배경 (필핀 원본 실측값) */ --dk-tone-3: #5c5c5c; /* 인포그래픽 단계 사다리 3단 — 색약 명도비 검증값 (#2a2a2a↔#5c5c5c = 2.15:1). #555555 로 통합했다가 사다리가 눌려 되돌림. 회장 지시로 라이브 값 유지 */ --dk-fg-faint: #8f8f8f; /* 가장 옅은 글자·톤 단계 */ --dk-navy-deep: #0a1f3d; /* 히어로 그라디언트 짙은 쪽 */ --dk-navy: #142a4d; /* 히어로 그라디언트 옅은 쪽 */ --dk-fg-cool: #5b6b85; /* 푸른기 글자·아이콘 선 */ --dk-fg-cool-soft: #a9b6cc; /* 푸른기 옅은 글자(자리표시) */ --dk-fg-cool-faint: #c3cee2; /* 푸른기 가장 옅은 글자 */ --dk-hairline-cool: #c3ccd8; /* 푸른기 실선·점선 테두리 */ --dk-hairline-cool-soft: #dbe3f1; /* 푸른기 옅은 테두리 */ --dk-dot-cool: #e8edf6; /* 점그리드 도트 */ --dk-surface-cool: #f5f8fc; /* 푸른기 가장 밝은 면 */ } /* ===================================================================== Semantic element styles — apply once, get the look for free. Scope under .dk to avoid leaking into host pages. The UI kits and preview cards all wrap their content in or a
ancestor. ===================================================================== */ .dk { font: var(--dk-body-md); color: var(--dk-fg-1); background: var(--dk-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; word-break: keep-all; /* ★실측: 한글 줄바꿈. 모든 .dk 하위에 적용 */ } /* ★2026-07-28 근본 수정 — 요소 기본값을 `:where()`로 감싸 특성도 0으로 낮춘다. 기존 `.dk h2`/`.dk p`는 특성도 (0-1-1)이라 컴포넌트 클래스 (0-1-0)를 전부 이겨서, `.dk-perf-title`(32px/800/Paperlogy) · `.dk-kp-text`(17px/600) · `.dk-label`(15px) · `.dk-pt-label`(13px/700) · `.site-footer__*` · `.dk-history__*` 등 11개 이상이 자기 값을 못 받고 전부 16px/1.6 기본값으로 떨어져 있었다(제목 크기·줄간격이 섹션마다 제각각으로 보이던 실제 원인). 이건 "기본값"이므로 어떤 클래스든 이겨야 맞다. `:where()`는 특성도를 0으로 만들어 클래스 규칙이 자연스럽게 우선하게 한다. */ :where(.dk) h1, :where(.dk) .h1 { font: var(--dk-display-xl); letter-spacing: var(--dk-track-tight); color: var(--dk-ink); margin: 0; } :where(.dk) h2, :where(.dk) .h2 { font: var(--dk-display-lg); letter-spacing: var(--dk-track-snug); color: var(--dk-ink); margin: 0; } :where(.dk) h3, :where(.dk) .h3 { font: var(--dk-display-md); color: var(--dk-ink); margin: 0; } :where(.dk) h4, :where(.dk) .h4 { font: var(--dk-display-sm); color: var(--dk-ink); margin: 0; } :where(.dk) h5, :where(.dk) .h5 { font: var(--dk-title-lg); color: var(--dk-ink); margin: 0; } :where(.dk) h6, :where(.dk) .h6 { font: var(--dk-title-md); color: var(--dk-ink); margin: 0; } :where(.dk) p { font: var(--dk-body-md); color: var(--dk-fg-3); margin: 0; } /* ★실측(dakgongcamp.imweb.me): 리드·서브텍스트 = 18px / 400 / 1.7 / #555555 */ .dk .lead { font: var(--dk-body-lg); line-height: 1.7; color: var(--dk-fg-3); word-break: keep-all; } /* ★실측: 빨강 라벨 = 15px / 400 / 대문자 아님 / 자간 normal / (국내파생은 코발트) */ .dk .label-red { font: var(--dk-label-red); letter-spacing: normal; text-transform: none; color: var(--dk-accent-red); } .dk .caption { font: var(--dk-caption); letter-spacing: var(--dk-track-caption); color: var(--dk-fg-muted); } .dk .label-up { font: var(--dk-label-up); letter-spacing: var(--dk-track-wide); text-transform: uppercase; color: var(--dk-ink); } .dk .nav-link { font: var(--dk-nav-link); color: var(--dk-ink); text-decoration: none; } .dk a { color: var(--dk-accent-red); text-decoration: none; transition: color var(--dk-dur-fast) var(--dk-ease-out); } .dk a:hover { color: var(--dk-accent-red-light); } /* ----- Buttons ------------------------------------------------------ */ .dk .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--dk-space-xs); height: var(--dk-touch-min); padding: 12px 24px; border-radius: var(--dk-radius-md); font: var(--dk-button); letter-spacing: var(--dk-track-wide); cursor: pointer; border: none; transition: background var(--dk-dur-fast) var(--dk-ease-out), color var(--dk-dur-fast) var(--dk-ease-out), transform var(--dk-dur-fast) var(--dk-ease-out); user-select: none; } .dk .btn:active { transform: scale(0.98); } .dk .btn-primary { background: var(--dk-accent-red); color: var(--dk-on-primary); } .dk .btn-primary:hover { background: var(--dk-accent-red-light); } .dk .btn-primary-outline { background: transparent; color: var(--dk-accent-red); border: 2px solid var(--dk-accent-red); padding: 10px 22px; /* compensate for border */ } .dk .btn-primary-outline:hover { background: var(--dk-accent-red); color: var(--dk-on-primary); } .dk .btn-secondary { background: var(--dk-surface-card); color: var(--dk-ink); } .dk .btn-secondary:hover { background: var(--dk-surface-elevated); } .dk .btn-icon { width: var(--dk-touch-min); height: var(--dk-touch-min); padding: 0; border-radius: var(--dk-radius-full); background: var(--dk-surface-card); color: var(--dk-ink); } .dk .btn-icon:hover { background: var(--dk-surface-elevated); } /* ----- Cards & surfaces -------------------------------------------- */ .dk .card { background: var(--dk-surface-card); border-radius: var(--dk-radius-sm); padding: var(--dk-space-lg); } .dk .card-elevated { background: var(--dk-surface-elevated); border-radius: var(--dk-radius-sm); padding: var(--dk-space-lg); } .dk .card-achievement { background: var(--dk-primary); border: 2px solid var(--dk-accent-red); border-radius: var(--dk-radius-md); padding: var(--dk-space-lg); } .dk .stat-block { background: var(--dk-surface-soft); border-radius: var(--dk-radius-sm); padding: var(--dk-space-lg); } /* ----- Section header (red band) ----------------------------------- */ .dk .section-header { background: var(--dk-accent-red); color: var(--dk-on-primary); padding: var(--dk-space-xl) var(--dk-space-lg); border-radius: 0; } .dk .section-header h2, .dk .section-header h3 { color: var(--dk-on-primary); } /* ----- Dividers ---------------------------------------------------- */ .dk .divider-accent { height: var(--dk-divider-accent); background: var(--dk-accent-red); border: 0; width: 48px; } .dk .divider-hair { height: 1px; background: var(--dk-hairline); border: 0; } /* ----- Tag / badge -------------------------------------------------- */ .dk .tag { display: inline-block; padding: 4px 10px; font: var(--dk-button); letter-spacing: var(--dk-track-wide); text-transform: uppercase; color: var(--dk-accent-red); background: transparent; border: 1.5px solid var(--dk-accent-red); border-radius: var(--dk-radius-xs); } .dk .tag-filled { color: var(--dk-on-primary); background: var(--dk-accent-red); border-color: var(--dk-accent-red); } .dk .tag-neutral { color: var(--dk-fg-3); border-color: var(--dk-hairline); } /* ----- Form inputs ------------------------------------------------- */ .dk .field { display: flex; flex-direction: column; gap: 6px; } .dk .field-label { font: var(--dk-body-sm); font-weight: 600; color: var(--dk-fg-2); } .dk .input, .dk .textarea, .dk .select { height: var(--dk-touch-min); padding: 0 var(--dk-space-md); font: var(--dk-body-md); color: var(--dk-ink); background: var(--dk-canvas); border: 1.5px solid var(--dk-hairline); border-radius: var(--dk-radius-sm); transition: border-color var(--dk-dur-fast) var(--dk-ease-out); } .dk .textarea { height: auto; padding: 12px var(--dk-space-md); resize: vertical; min-height: 96px; } .dk .input:focus, .dk .textarea:focus, .dk .select:focus { outline: none; border-color: var(--dk-accent-red); } .dk .input::placeholder, .dk .textarea::placeholder { color: var(--dk-fg-muted); } /* ----- Logo lockup helper ------------------------------------------ */ .dk .logo-lockup { display: inline-flex; align-items: center; gap: var(--dk-space-sm); }