/* GIBEON IBL 블록 — design.md의 실행 단위. tokens.css 다음에 로드한다.
v0.7 (2026-07-19) 신설
design.md는 규범(금지 목록)은 297줄인데 재사용 단위가 없어서, 실제 산출물 20개 중
완전 준수가 2건뿐이었다. 이 파일이 그 공백을 메운다. 새 문서는 이 클래스를 쓰고,
여기 없는 게 필요하면 이 파일에 추가한다 — 문서 안에서 새로 짜지 않는다.
에 이 3줄 먼저 (경로는 문서 위치에 맞게 — 하위 폴더면 ../):
서체는 자체 호스팅이다. 외부 CDN을 다시 끌어오지 마라 — jsDelivr·Google Fonts가
죽으면 시스템 폰트로 떨어져 산출물이 무너진다. 상세는 fonts.css 헤더 참조.
*/
*{margin:0;padding:0;box-sizing:border-box}
body{
background:var(--bg); color:var(--text);
font-family:var(--font-ko);
font-size:16px; line-height:1.65; letter-spacing:-.01em;
-webkit-font-smoothing:antialiased;
}
/* ══════════════════════════════════════════
1. 컨테이너
══════════════════════════════════════════ */
.wrap{max-width:1040px;margin:0 auto;padding:0 var(--space-md)}
.narrow{max-width:620px} /* 텍스트 블록 상한 — 읽기 길이 제한 */
.mid{max-width:900px} /* 스펙 셀 그리드 상한 */
/* ══════════════════════════════════════════
2. 섹션 리듬
보더로 나누지 않는다. --bg ↔ --bg2 배경 전환으로만 구분한다.
══════════════════════════════════════════ */
.sec{padding:var(--space-xxl) 0 var(--space-xl);background:var(--bg)}
.sec.alt{background:var(--bg2)}
.sec.hero-sec{padding-top:var(--space-super)}
@media(max-width:900px){ .sec{padding:var(--space-xl) 0 var(--space-lg)} }
/* ══════════════════════════════════════════
3. 타이포 역할
══════════════════════════════════════════ */
/* eyebrow — 모노 대문자. 양수 자간은 여기와 .label에만 허용된다. */
.eyebrow{
font-family:var(--font-mono); font-size:11px; font-weight:400;
letter-spacing:.11em; text-transform:uppercase; line-height:1;
color:var(--gold); margin-bottom:var(--space-sm);
}
.eyebrow.cool{color:var(--daylight)}
/* hero — 52px는 하한이지 목표가 아니다. 화면을 압도하는 게 목적. */
.hero{
font-size:clamp(38px,7vw,72px); font-weight:700;
line-height:1.07; letter-spacing:-.03em;
}
.hero em{font-style:normal;color:var(--gold)} /* 키워드 1개만 */
.section-title{
font-size:clamp(28px,4vw,40px); font-weight:700;
line-height:1.15; letter-spacing:-.02em;
}
.lead{
font-size:17px; font-weight:400; line-height:1.6;
letter-spacing:-.01em; color:var(--muted); margin-top:var(--space-sm);
}
.lead b{color:var(--text);font-weight:600}
.body-text{font-size:16px;line-height:1.75;max-width:640px}
.caption{font-size:12px;line-height:1.5;color:var(--muted)}
/* label — 버튼·태그·날짜. 배경·보더 없이 타이포 그 자체로. */
.label{
font-family:var(--font-mono); font-size:12px; font-weight:400;
letter-spacing:.08em; text-transform:uppercase; line-height:1;
}
/* ══════════════════════════════════════════
4. 숫자
Oxanium 전용. 자간은 0 또는 양수 — 음수 금지(세로로 늘어나 보인다).
작아질수록 웨이트를 올려 획 굵기를 보정한다.
══════════════════════════════════════════ */
.num{
font-family:var(--font-num); font-variant-numeric:tabular-nums;
letter-spacing:.01em; line-height:1;
}
.num.gold{color:var(--gold)}
.num.cool{color:var(--daylight)}
.num .u{font-size:52%;color:var(--muted);font-weight:400} /* 단위 */
/* ══════════════════════════════════════════
5. 스펙 셀 — 수치 디스플레이 표준
수치 위 + 모노 대문자 라벨 아래 + 셀 사이 헤어라인.
리플로우해도 수치 크기는 줄이지 않는다.
══════════════════════════════════════════ */
.specs{
display:grid; grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--line); margin-top:var(--space-xl);
}
.specs.c3{grid-template-columns:repeat(3,1fr)}
.specs.c2{grid-template-columns:repeat(2,1fr)}
.spec{padding:var(--space-sm) var(--space-sm) var(--space-sm) 0;border-right:1px solid var(--line)}
.spec:last-child{border-right:none}
.spec .num{font-size:clamp(34px,5vw,54px);font-weight:300}
.spec .l{
font-family:var(--font-mono); font-size:11px; font-weight:400;
letter-spacing:.08em; text-transform:uppercase;
color:var(--muted); margin-top:10px;
}
@media(max-width:820px){
.specs,.specs.c3{grid-template-columns:repeat(2,1fr)}
.spec:nth-child(2n){border-right:none}
}
/* ══════════════════════════════════════════
6. 이미지 = 창
액자가 아니라 검정 캔버스에 뚫린 구멍. 보더 없음.
풀블리드 히어로 이미지는 페이지당 1회. 에디토리얼 기어 전용.
══════════════════════════════════════════ */
.window{
position:relative; border-radius:12px; overflow:hidden;
aspect-ratio:16/7; margin-top:var(--space-xl); background:var(--panel);
}
.window img{width:100%;height:100%;object-fit:cover;display:block}
.window::after{ /* 웜블랙 스크림 — 텍스트 가독 확보 */
content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to top,var(--bg) 2%,rgba(0,0,0,.36) 34%,transparent 62%);
}
.window .cap{position:absolute;left:var(--space-md);right:var(--space-md);bottom:var(--space-md);z-index:2}
.window .cap .t{font-size:22px;font-weight:700;letter-spacing:-.02em}
/* ══════════════════════════════════════════
7. 테크니컬 기어
══════════════════════════════════════════ */
.panel{
background:var(--panel); border:1px solid var(--line);
border-radius:8px; padding:var(--space-sm);
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xs)}
@media(max-width:820px){ .grid2,.grid3{grid-template-columns:1fr} }
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{
background:var(--panel2); font-family:var(--font-mono);
font-size:11px; font-weight:400; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted); text-align:left; padding:11px var(--space-xs);
}
.tbl td{padding:11px var(--space-xs);border-top:1px solid var(--line)}
.tbl td.num{font-weight:600;text-align:right;color:var(--gold)}
.tbl td.num.cool{color:var(--daylight)}
.tbl td.num.ok{color:var(--ok)}
.tbl td.num.bad{color:var(--bad)}
/* 배지 — 상태 의미 전용 */
.badge{
display:inline-block; font-family:var(--font-mono); font-size:11px;
letter-spacing:.06em; text-transform:uppercase;
padding:4px 9px; border-radius:4px;
}
.badge.ok{background:rgba(94,201,138,.12);color:var(--ok)}
.badge.bad{background:rgba(255,107,94,.12);color:var(--bad)}
.badge.info{background:rgba(106,166,232,.12);color:var(--info)}
/* ══════════════════════════════════════════
8. 링크·CTA
인터랙션 메타포는 조명 디밍 — hover는 밝아지고 pressed는 어두워진다.
솔리드 골드 CTA는 한 폴드에 1개. 초과분은 아웃라인으로 강등.
══════════════════════════════════════════ */
.cta{
display:inline-block; font-family:var(--font-mono); font-size:12px; font-weight:700;
letter-spacing:.08em; text-transform:uppercase;
padding:13px 22px; border-radius:999px; text-decoration:none;
background:var(--gold); color:#1a1409; border:1px solid var(--gold);
transition:background .18s ease,border-color .18s ease;
}
.cta:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.cta:active{background:var(--gold-press);border-color:var(--gold-press)}
.cta.ghost{background:transparent;color:var(--gold)}
.cta.ghost:hover{background:rgba(239,178,44,.08)}
/* ══════════════════════════════════════════
8b. 브랜드 로고 (design.md §6 로고·워드마크)
· 락업 SVG를 인라인으로 넣고 이 클래스로 크기·색만 제어.
path fill=currentColor라 color가 곧 로고색이다.
· 자산: brand/gibeon-lockup.svg (인라인·currentColor)
brand/gibeon-lockup-gold.svg (img·og·파비콘용 골드 고정)
· 골드 배급 예외: .brand 위치의 로고는 "브랜드 서명"이라
골드 강조 1군데 카운트에 넣지 않는다. 단 본문 폴드에서
큰 로고와 골드 CTA를 같은 화면에 두지 않는다.
══════════════════════════════════════════ */
.brand{ display:inline-block; color:var(--gold); }
.brand svg,
svg.brand{ display:block; height:100%; width:auto; }
/* 서명 크기 프리셋 — 헤더·푸터 서명은 sm, 표지 히어로만 lg */
.brand-sm{ height:22px; } /* 헤더·푸터·문서 서명 */
.brand-md{ height:40px; } /* 섹션 도입·명함급 */
.brand-lg{ height:72px; } /* 표지 히어로 전용 (폴드당 1회) */
/* 색 변형: 저대비 위치·1도 출력엔 단색 */
.brand-muted{ color:var(--muted); }
.brand-mono{ color:var(--text); } /* 흑백·실물 라벨용 단색 */
/* ══════════════════════════════════════════
9. 주석 블록
══════════════════════════════════════════ */
.note{
font-family:var(--font-mono); font-size:11px; line-height:1.75;
letter-spacing:.02em; color:var(--muted);
border-left:1px solid var(--line); padding-left:var(--space-xs);
margin-top:var(--space-md);
}
/* ══════════════════════════════════════════
10. 금지 사항 (design.md §5) — 참고용, 코드 아님
· 그림자 기본 0개. 예외는 모달과 스티키 크롬뿐
· 불투명 회색 보더 금지 — 보더는 var(--line)만
· 화면 전체 단일 라디우스 금지 (4/8/12/999 계층 사용)
· 가운데 정렬은 표지 히어로 1장에만
· 골드는 장식 금지. 섹션당 강조 1군데
· 숫자에 음수 자간 금지
══════════════════════════════════════════ */