/* ============================================================
   신규 컴포넌트 스타일 (핸드오프 §8-2) — 제안 상태.
   전부 역할 별칭(--k-page --k-surface --k-text --k-accent …)만 참조한다.
   포커스 링은 3px solid var(--k-ink) + offset 고정 — 브랜드 확정 규칙.
   ============================================================ */
a { color: var(--k-accent); }
a:hover { color: var(--k-accent-hover); }
.k-btn:disabled { opacity: 0.5; pointer-events: none; } /* 제안 */

.k-input, .k-select {
  font-family: var(--k-font-body); font-size: var(--k-step-0); color: var(--k-text);
  background: var(--k-page); border: 1px solid var(--k-line);
  border-radius: var(--k-radius-md); padding: 0.55em 1em; line-height: 1.3;
}
.k-input::placeholder { color: var(--k-text-muted); }
.k-select { appearance: auto; }
.k-input:focus-visible, .k-select:focus-visible, .k-checkbox:focus-visible, .k-btn:focus-visible {
  outline: 3px solid var(--k-ink); outline-offset: 3px;
}

.k-checkbox {
  appearance: none; width: 22px; height: 22px; margin: 0;
  border: 2px solid var(--k-text); border-radius: var(--k-radius-sm);
  background: var(--k-page); cursor: pointer; display: inline-grid; place-content: center;
}
.k-checkbox:checked { background: var(--k-accent); border-color: var(--k-accent); }
.k-checkbox:checked::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 3px solid var(--k-cream); border-bottom: 3px solid var(--k-cream);
  transform: rotate(-45deg);
}

.k-badge {
  display: inline-block; font-family: var(--k-font-brand); font-weight: 700;
  font-size: var(--k-step--1); padding: 0.25em 0.9em; border-radius: var(--k-radius-pill);
}
.k-badge--brick   { background: var(--k-accent); color: var(--k-cream); }  /* 5.27 */
.k-badge--kick    { background: var(--k-kick); color: var(--k-ink); }      /* 12.75 — 라임 면+잉크 글자 */
.k-badge--outline { color: var(--k-accent); box-shadow: inset 0 0 0 2px var(--k-accent); }

.k-tag {
  display: inline-block; font-family: var(--k-font-body); font-weight: 600;
  font-size: var(--k-step--1); color: var(--k-text); background: var(--k-surface);
  padding: 0.3em 0.9em; border-radius: var(--k-radius-pill); border: 1px solid var(--k-line);
}

.k-nav {
  display: flex; align-items: center; gap: var(--k-space-5);
  padding: var(--k-space-3) var(--k-space-5); background: var(--k-page);
  border-bottom: 1px solid var(--k-line); font-family: var(--k-font-body);
}
.k-nav a { color: var(--k-text); text-decoration: none; font-weight: 600; }
.k-nav a:hover { color: var(--k-accent); }