/* ============================================================================
   kobyko — 브랜드 토큰 v0.1
   ----------------------------------------------------------------------------
   원본 결정: MASTER_PLAN 변경 이력 54차-n 「가마 v2」 · 근거 = kobyko_brand_color_type_rationale.md
   서체 선택: 2026-08-07 사용자 선택 = Baloo 2 (근거 문서 §4-2 「키치 라운드」 갈래)
   적용 규칙 전문: kobyko_brand_system.md

   ⚠️ 이 파일이 색·서체의 단일 원본이다. 다른 파일에 HEX 를 다시 적지 않는다.
   ⚠️ D-021 미발행 — 실물 실 스와치 대조 전이라 「브랜드 컬러 확정」이 아니다.
      라임(#C9E84A)의 실 재현이 관문이고, 실패 시 대안은 머스터드 #F2B33D (54차-n ④).
   ============================================================================ */

:root {
  /* --- 코어 4색 (54차-n 가마 v2. 이 4개는 사람이 정한 값이다) ------------- */
  --k-brick: #B33A18;   /* 브랜드 면. 로고를 항상 여기 넣지 않는다 (에르메스 방식) */
  --k-cream: #FBF0DE;   /* 바탕 */
  --k-lime:  #C9E84A;   /* 킥. 면·도형 전용 — 글자 금지 */
  --k-ink:   #1E1712;   /* 본문·작은 글씨 */

  /* --- 파생 4색 (HSL 명도만 이동. 생성 근거는 ramp 계산, §대비표 참조) ---- */
  --k-brick-deep: #943014;  /* brick L−7%  · hover/pressed */
  --k-cream-deep: #F8E6C7;  /* cream L−5%  · 카드·구획 면 */
  --k-ink-soft:   #644D3C;  /* ink   L+22% · 보조 텍스트 */
  --k-lime-deep:  #ACD01A;  /* lime  L−14% · 라임 면의 테두리·그림자 */

  /* --- 역할 별칭 (컴포넌트는 코어가 아니라 이걸 참조한다) ---------------- */
  --k-page:        var(--k-cream);
  --k-surface:     var(--k-cream-deep);
  --k-text:        var(--k-ink);
  --k-text-muted:  var(--k-ink-soft);
  --k-accent:      var(--k-brick);
  --k-accent-hover:var(--k-brick-deep);
  --k-kick:        var(--k-lime);
  --k-line:        rgba(30, 23, 18, 0.14);   /* ink 14% — 헤어라인 */

  /* --- 타이포 -------------------------------------------------------------
     Baloo 2 는 라틴/데바나가리 전용이다. 한글 글리프가 없다 (근거 문서 §4-3 제약 1).
     국문은 --k-font-kr 로 폴백하며, 국문 페어링 서체는 아직 결정되지 않았다.
     지금 값은 「시스템 한글 스택」이지 결정된 브랜드 국문 서체가 아니다.           */
  --k-font-brand: "Baloo 2", system-ui, sans-serif;
  --k-font-body:  "Baloo 2", system-ui, sans-serif;
  --k-font-kr:    "Pretendard Variable", Pretendard, -apple-system,
                  "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --k-font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 워드마크 조판값 — kobyko_wordmark_baloo2.svg 를 만든 값과 동일하게 유지 */
  --k-wordmark-weight: 800;
  --k-wordmark-tracking: 0.015em;   /* 가운뎃점은 SVG 에서 좌우 −0.055em 로 당겨져 있다 */

  --k-step--1: 0.833rem;
  --k-step-0:  1rem;
  --k-step-1:  1.2rem;
  --k-step-2:  1.44rem;
  --k-step-3:  1.728rem;
  --k-step-4:  2.074rem;
  --k-step-5:  2.488rem;    /* 1.2 배 스케일 */

  /* --- 공간·반경 (라운드 서체와 라운드 마크에 맞춰 반경을 크게 잡는다) ---- */
  --k-space-1: 4px;  --k-space-2: 8px;  --k-space-3: 12px;
  --k-space-4: 16px; --k-space-5: 24px; --k-space-6: 40px;
  --k-space-7: 64px; --k-space-8: 96px;
  --k-radius-sm: 8px; --k-radius-md: 16px; --k-radius-lg: 28px;
  --k-radius-pill: 999px;

  --k-maxw: 1080px;
}

/* ============================================================================
   대비 검산표 (WCAG 2.1 상대휘도. 이 표는 주장이 아니라 계산 결과다)
   ----------------------------------------------------------------------------
            brick   cream    lime     ink   white
   brick     1.00    5.27    4.28    2.98    5.94
   cream     5.27    1.00    1.23   15.69    1.13
   lime      4.28    1.23    1.00   12.75    1.39
   ink       2.98   15.69   12.75    1.00   17.70

   파생색:  brick-deep × cream 6.92 · cream-deep × ink 14.44 · cream-deep × brick 4.85
            ink-soft × cream 6.98 · lime-deep × ink 9.94

   ✅ 허용 조합 (본문 글자 기준 AA 4.5 이상)
      크림 바탕 + 잉크 글자 15.69 / 크림 바탕 + 브릭 글자 5.27
      브릭 바탕 + 크림 글자 5.27 / 잉크 바탕 + 크림 글자 15.69 / 잉크 바탕 + 라임 글자 12.75
      크림 바탕 + ink-soft 보조글자 6.98 / cream-deep 카드 + 브릭 글자 4.85

   ⛔ 금지 조합
      크림 바탕 + 라임 글자 1.23 — 운용 규칙 ②의 근거. 라임은 면·도형 전용
      브릭 바탕 + 잉크 글자 2.98 — 「작은 글씨는 잉크」 규칙은 **크림 바탕 전제**다
      브릭 바탕 + 라임 글자 4.28 — 본문 미달. 큰 그래픽·도형에서만 (3.0 이상)
   ============================================================================ */

/* --- 로크업 3형 (54차-n ③. 이 셋 밖의 배색으로 로고를 놓지 않는다) -------- */
.k-lockup           { display: inline-flex; align-items: center; gap: 0.42em; }
.k-lockup--stack    { flex-direction: column; gap: 0.30em; }
.k-lockup .k-mark   { flex: none; }
.k-lockup .k-word   { display: block; }

.k-lockup--paper    { color: var(--k-brick); background: var(--k-cream); }  /* 5.27 */
.k-lockup--signature{ color: var(--k-cream); background: var(--k-brick); }  /* 5.27 */
.k-lockup--campaign { color: var(--k-lime);  background: var(--k-ink);   }  /* 12.75 */

/* 여백 규칙: 마크 높이의 0.5배를 사방 최소 여백으로 둔다 */
.k-lockup--boxed { padding: 0.5em; border-radius: var(--k-radius-md); }

/* --- 최소 크기 가드 -------------------------------------------------------
   마크의 루프 구멍은 화면 20px 에서 살아 있고 16px 에서 닫힌다
   (근거 문서 §6-2 실측). 그 아래로는 마크를 쓰지 않는다.                     */
.k-mark { min-width: 20px; min-height: 20px; }

/* --- 기본 컴포넌트 -------------------------------------------------------- */
.k-btn {
  font-family: var(--k-font-brand); font-weight: 700; font-size: var(--k-step-0);
  padding: 0.7em 1.5em; border-radius: var(--k-radius-pill);
  border: 0; cursor: pointer; text-decoration: none;
  display: inline-block; line-height: 1.1;
  transition: background-color .15s ease, transform .15s ease;
}
.k-btn--primary   { background: var(--k-brick); color: var(--k-cream); }   /* 5.27 */
.k-btn--primary:hover { background: var(--k-brick-deep); }                 /* 6.92 */
.k-btn--kick      { background: var(--k-lime);  color: var(--k-ink);   }   /* 12.75 */
.k-btn--kick:hover{ background: var(--k-lime-deep); }                      /*  9.94 */
.k-btn--ghost     { background: transparent; color: var(--k-brick);
                    box-shadow: inset 0 0 0 2px var(--k-brick); }
.k-btn:focus-visible { outline: 3px solid var(--k-ink); outline-offset: 3px; }

.k-card {
  background: var(--k-cream-deep); border-radius: var(--k-radius-lg);
  padding: var(--k-space-5); border: 1px solid var(--k-line);
}

/* 라임은 글자가 아니라 도형으로만 등장한다 — 이 클래스가 그 유일한 통로다 */
.k-kick-shape { background: var(--k-lime); color: var(--k-ink); }
.k-kick-rule  { height: 6px; background: var(--k-lime); border-radius: var(--k-radius-pill); }