/* ⚠️ 사본입니다. 원본 SSOT = projects/nodak-company/brand/tokens.css
   여기서 값을 고치지 말 것. 원본을 고치고 `node check.mjs --fix` 로 다시 복사한다. */
/* ─────────────────────────────────────────────────────────────
   노닥컴퍼니 브랜드 토큰 — v1.0 (2026-08-22)
   SSOT. 사이트·랜딩·슬라이드 어디서든 이 파일을 import 해서 쓴다.
   값을 로컬에서 다시 선언하지 말 것. 바꿔야 하면 이 파일을 바꾼다.
   ───────────────────────────────────────────────────────────── */


:root{
  /* Color — 노랑은 바탕·포인트 전용. 글자는 항상 먹색. */
  --nodak-gold:  #FFC233;   /* 브랜드 코어 */
  --nodak-ink:   #1A1916;   /* 모든 글자 */
  --nodak-cream: #F3F2EE;   /* 페이지 바탕 */
  --nodak-gray:  #56544D;   /* 캡션·보조 */
  --nodak-line:  rgba(26,25,22,.12);

  /* Type */
  --nodak-font-display: 'Noto Sans KR', sans-serif;   /* 로고·헤드라인 */
  --nodak-font-body:    'Pretendard', 'Noto Sans KR', sans-serif;

  /* Wordmark 비율 (px 계산용) */
  --nodak-wordmark-ratio: 4.608;   /* 노닥컴퍼니 가로/세로 */
  --nodak-nodak-ratio:    1.864;   /* 노닥 단독 */
  --nodak-dot-size:       .216em;  /* 골드 점 지름 = '노닥' 잉크 높이의 23% (노닥 글자크기 기준) */
}

/* ─── 워드마크 컴포넌트 ───────────────────────────────────────
   웹에선 라이브 텍스트가 기본. 확대해도 안 깨지고 접근성도 살아있다.
   <span class="nodak-wordmark">노닥<i>컴퍼니</i></span>
   크기는 font-size 하나로만 조절한다.
   ───────────────────────────────────────────────────────────── */
.nodak-wordmark{
  font-family: var(--nodak-font-display);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
  color: var(--nodak-ink);
  display: inline-block;
  font-style: normal;
}
.nodak-wordmark i{
  font-weight: 400;
  font-size: .82em;       /* 컴퍼니 = 노닥의 82% */
  letter-spacing: -.02em;
  font-style: normal;
}
/* 골드 점 — 노닥과 컴퍼니 사이. 로고의 일부다(장식 아님).
   값은 '노닥' 글자크기 기준이라, .82em인 i 안에서는 /.82 해서 쓴다. */
.nodak-wordmark i::before{
  content:"";
  display: inline-block;
  vertical-align: baseline;          /* 점이 베이스라인 위에 앉는다 */
  width: .2634em; height: .2634em;   /* = .216em / .82 */
  border-radius: 50%;
  background: var(--nodak-gold);
  margin: 0 .1957em 0 .0734em;       /* 앞 0.6r · 뒤 1.6r */
}

/* 노랑 판 위에선 점도 먹색 — 노랑 점을 노랑 판에 얹으면 사라진다.
   .nodak-plate(노랑 판) 안이거나, 직접 --on-gold 를 붙였을 때. */
.nodak-plate .nodak-wordmark i::before,
.nodak-wordmark--on-gold i::before{ background: var(--nodak-ink); }

/* 반전 — 먹색 판 위 */
.nodak-wordmark--gold{  color: var(--nodak-gold); }
.nodak-wordmark--cream{ color: var(--nodak-cream); }

/* 여백 규정 — 사방 '노' 한 글자 높이(= 1em) */
.nodak-lockup{ display:inline-block; padding: 1em; }

/* 노랑 판 */
.nodak-plate{ background: var(--nodak-gold); color: var(--nodak-ink); }