/*
 * klon-ui.css -- klon.kr 디자인 기준 공통 CSS (2026.10.20 신설, 디자인 기준 파트)
 *
 * 정본 문서: docs/guide/design.md (4절 기준값과 부품, 6절 Bootstrap 색 연결 표)
 * 값을 바꿀 때는 정본 문서를 먼저 고치고 이 파일을 맞춘다.
 *
 * 구성
 *   A. 기준값   : :root 와 .klon-dark 의 --klon- 변수 (이 변수는 어디서나 읽을 수 있다)
 *   B. 부품 6가지: klon-btn, klon-card, klon-badge, klon-empty, klon-dialog, klon-toast
 *   C. Bootstrap 덮어쓰기 층 : btn, btn-outline, badge, text, bg, alert 의 색만 기준값에 연결
 *
 * 중요: B 와 C 의 모든 규칙은 klon-ui 표시가 붙은 바깥 상자 안에서만 동작한다.
 *       klon-ui 가 없는 화면(회원 랜딩 매장 등)은 한 줄도 바뀌지 않는다.
 *       C 는 색만 바꾸고 크기, 여백, 모서리, 글꼴은 건드리지 않는다.
 * 이 파일은 crm/_head.php 와 theme/klon_skin_2/head.sub.php 두 곳에서 불러온다.
 */

/* ===== A. 기준값 + B. 부품 6가지 (정본 문서 4절 그대로) ===== */

:root {
  /* 바탕·면·선 — 10-20 「바탕이 칙칙」 → 흰 바탕, 회색에서 갈색기를 뺐다 */
  --klon-bg:        #ffffff;   /* 페이지 바탕(흰색) */
  --klon-surface:   #ffffff;   /* 카드 — 바탕과 같은 흰색, 선으로만 구분 */
  --klon-surface-2: #f7f8f6;   /* 연한 면: 입력칸, 표 머리줄 */
  --klon-border:    #e3e6df;   /* 선 */
  /* 글자 */
  --klon-text:      #1d2219;   /* 제목, 이름 */
  --klon-text-2:    #3d4541;   /* 본문 */
  --klon-text-3:    #6b736f;   /* 보조 정보 */
  --klon-text-4:    #8a918d;   /* 흐린 정보(시각, 빈 화면) */
  /* 녹색 = 로고 연두. 연두 위 흰 글자는 안 읽혀서(대비 2.1) 버튼 면(brand)과 글자 녹색(primary)을 나눈다 */
  --klon-brand:          #96c121;  /* 주요 버튼 면·탭 밑줄·진행 막대 — 로고 색 */
  --klon-brand-on:       #1a2608;  /* 로고 연두 위 글자 */
  --klon-primary:        #4d7c0f;  /* 글자·링크·배지 녹색 (흰 바탕 대비 5.0) */
  --klon-primary-on:     #ffffff;
  --klon-primary-soft:   #eaf5d3;  /* 연두 연한 면 */
  --klon-primary-border: #cfe5a1;
  /* 오렌지 = 로고 연두와 어울리는 선명한 오렌지. 면은 선명하게, 글자는 한 단계 짙게 */
  --klon-accent-fill:    #ff8c1a;  /* 오렌지 면(사업일기 쓰기·알림 점) */
  --klon-accent-fill-on: #2a1300;
  --klon-accent:         #e8590c;  /* 오렌지 글자·배지 */
  --klon-accent-on:      #ffffff;
  --klon-accent-soft:    #fff0e0;
  --klon-accent-border:  #ffc078;
  /* 상태색 */
  --klon-warning:      #b45309;  --klon-warning-soft: #fff7dc;
  --klon-danger:       #e03131;  --klon-danger-soft:  #fff0f0;
  --klon-info:         #1c7ed6;  --klon-info-soft:    #e7f3ff;
  --klon-neutral:      #5b635f;  --klon-neutral-soft: #f1f3ef;
  /* 글자 크기 — em, 1em = 12px. ★ 부품의 바깥 요소에만 붙인다(안쪽은 물려받음) */
  --klon-fs-xs:   .8333em;  /* 10px 배지 */
  --klon-fs-sm:   .9167em;  /* 11px 표, 메타 (지금 주문장부 표와 같음) */
  --klon-fs-md:   1em;      /* 12px 버튼, 입력칸 */
  --klon-fs-base: 1.0833em; /* 13px 카드·화면 글자 */
  --klon-fs-read: 1.1667em; /* 14px 읽는 글 본문 — 피드 글·게시판 글보기 (10-18 확정값 유지, 10-20 대표님 「일단 14」) */
  --klon-fs-lg:   1.1667em; /* 14px 카드 제목 */
  --klon-fs-xl:   1.3333em; /* 16px 화면 제목 */
  --klon-fs-2xl:  1.6667em; /* 20px 큰 제목 */
  --klon-lh-body: 1.5;      /* 화면 글자 행간 */
  --klon-lh-read: 1.55;     /* 읽는 글 본문 행간 (10-18 확정) */
  --klon-lh-tight: 1.35;    /* 제목 행간 */
  /* 여백 (px) */
  --klon-space-1: 4px;  --klon-space-2: 8px;  --klon-space-3: 12px; --klon-space-4: 16px;
  --klon-space-5: 20px; --klon-space-6: 24px; --klon-space-8: 32px;
  /* 모서리 */
  --klon-radius-sm: 3px;    /* 배지, 표 안 작은 요소 */
  --klon-radius-md: 4px;    /* 버튼, 입력칸, 토스트 */
  --klon-radius-lg: 6px;    /* 카드 */
  --klon-radius-xl: 8px;    /* 큰 카드, 확인창 */
  --klon-radius-pill: 999px;
  /* 그림자 */
  --klon-shadow-sm:  none;                             /* 카드 — 선으로만 구분 (지금 CRM 과 같음) */
  --klon-shadow-md:  0 1px 3px rgba(0,0,0,.06);        /* 큰 카드 */
  --klon-shadow-pop: 0 10px 24px rgba(0,0,0,.12);      /* 메뉴, 확인창, 토스트 */
}
/* 다크 — 지금 마이페이지·베이스캠프·포인트에 있는 다크 값 그대로. 바깥 상자에 klon-dark 를 붙이면 바뀐다 */
.klon-dark {
  /* 10-20 새 색에 맞춘 다크 — 바탕은 갈색기 없는 짙은 회녹, 연두·오렌지는 어두운 바탕에서 읽히게 한 단계 밝게 */
  --klon-bg: #151714; --klon-surface: #1d201b; --klon-surface-2: #23271f; --klon-border: #30352c;
  --klon-text: #f1f3ee; --klon-text-2: #c9cdc4; --klon-text-3: #9aa094; --klon-text-4: #767c71;
  --klon-brand: #a6d13a; --klon-brand-on: #1a2608;
  --klon-primary: #b5dc5a; --klon-primary-on: #1a2608; --klon-primary-soft: #242c18; --klon-primary-border: #3d4f1f;
  --klon-accent-fill: #ff8c1a; --klon-accent-fill-on: #2a1300;
  --klon-accent: #ffa04d; --klon-accent-on: #2a1300; --klon-accent-soft: #2b1d0f; --klon-accent-border: #6b3d12;
  --klon-warning: #e0b23d; --klon-warning-soft: #2a2515;
  --klon-danger: #ff6b6b;  --klon-danger-soft: #2c1a1a;
  --klon-info: #74b4ff;    --klon-info-soft: #16243a;
  --klon-neutral: #b0b5ab; --klon-neutral-soft: #2a2e26;
  --klon-shadow-sm: none; --klon-shadow-md: 0 1px 3px rgba(0,0,0,.4);
}

.klon-ui .klon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--klon-fs-md); font-weight: 600; line-height: 1.3; font-family: inherit;
  padding: 0 10px; height: 26px; border-radius: var(--klon-radius-md); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.klon-ui .klon-btn--primary { background: var(--klon-brand); color: var(--klon-brand-on); }
.klon-ui .klon-btn--line    { background: var(--klon-surface); color: var(--klon-text-2); border-color: var(--klon-border); }
.klon-ui .klon-btn--ghost   { background: transparent; color: var(--klon-text-3); }
.klon-ui .klon-btn--danger  { background: var(--klon-surface); color: var(--klon-danger); border-color: var(--klon-danger-soft); }
.klon-ui .klon-btn--sm      { font-size: var(--klon-fs-sm); padding: 0 8px; height: 22px; border-radius: var(--klon-radius-sm); }
.klon-ui .klon-btn--pill    { border-radius: var(--klon-radius-pill); }
.klon-ui .klon-btn:hover    { filter: brightness(.96); }
.klon-ui .klon-btn:focus-visible { outline: 2px solid var(--klon-primary); outline-offset: 2px; }

.klon-ui .klon-card {
  background: var(--klon-surface); border: 1px solid var(--klon-border);
  border-radius: var(--klon-radius-lg); box-shadow: var(--klon-shadow-sm); padding: var(--klon-space-3);
  color: var(--klon-text-2); font-size: var(--klon-fs-base); line-height: var(--klon-lh-body);
}
.klon-ui .klon-card-title { font-size: 1.0769em; font-weight: 700; color: var(--klon-text); margin: 0 0 4px; line-height: var(--klon-lh-tight); }  /* 13px 안의 14px = 비율 1.0769 */
.klon-ui .klon-card-meta  { font-size: .8462em; color: var(--klon-text-4); }  /* 13px 안의 11px */
.klon-ui .klon-read { font-size: var(--klon-fs-read); line-height: var(--klon-lh-read); }  /* 읽는 글 본문 — 글 카드·글 보기 바깥 상자에 붙인다 */

.klon-ui .klon-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--klon-fs-xs); font-weight: 600;
  padding: 0 6px; line-height: 1.6; border-radius: var(--klon-radius-sm); border: 1px solid transparent; white-space: nowrap;
}
.klon-ui .klon-badge--green  { color: var(--klon-primary); background: var(--klon-primary-soft); border-color: var(--klon-primary-border); }
.klon-ui .klon-badge--orange { color: var(--klon-accent);  background: var(--klon-accent-soft);  border-color: var(--klon-accent-border); }
.klon-ui .klon-badge--gray   { color: var(--klon-neutral); background: var(--klon-neutral-soft); }
.klon-ui .klon-badge--red    { color: var(--klon-danger);  background: var(--klon-danger-soft); }
.klon-ui .klon-badge--blue   { color: var(--klon-info);    background: var(--klon-info-soft); }
.klon-ui .klon-badge--square { border-radius: var(--klon-radius-sm); }   /* 표 안에서 좁게 쓸 때 */
/* 고객상태 5종 — 모두 같은 방식(테두리 없는 연한 면), 색으로만 구별 (10-20 대표님) */
.klon-ui .klon-cs { border-color: transparent; }
.klon-ui .klon-cs--dangol { color: var(--klon-primary); background: var(--klon-primary-soft); }
.klon-ui .klon-cs--exp    { color: var(--klon-accent);  background: var(--klon-accent-soft); }
.klon-ui .klon-cs--apply  { color: var(--klon-info);    background: var(--klon-info-soft); }
.klon-ui .klon-cs--visit  { color: var(--klon-text-4);  background: var(--klon-neutral-soft); }
.klon-ui .klon-cs--leave  { color: #383d41; background: #e2e3e5; }   /* 이탈 — 지금 CRM 회색 그대로 */
.klon-dark .klon-ui .klon-cs--leave, .klon-ui.klon-dark .klon-cs--leave, .klon-dark .klon-cs--leave { color: #c9cdc4; background: #3a3f37; }

.klon-ui .klon-empty {
  text-align: center; padding: var(--klon-space-6) var(--klon-space-4);
  color: var(--klon-text-4); font-size: var(--klon-fs-base); line-height: var(--klon-lh-body);
}
.klon-ui .klon-empty i { display: block; font-size: 2em; color: var(--klon-border); margin-bottom: 6px; }
.klon-ui .klon-empty b { display: block; color: var(--klon-text-2); font-weight: 600; }
.klon-ui .klon-empty .klon-btn { margin-top: var(--klon-space-3); font-size: .9231em; }  /* 13px 안의 12px */

.klon-ui .klon-dialog {
  background: var(--klon-surface); border-radius: var(--klon-radius-xl); box-shadow: var(--klon-shadow-pop);
  padding: var(--klon-space-4) var(--klon-space-4) var(--klon-space-3); max-width: 320px;
  font-size: var(--klon-fs-base); color: var(--klon-text-2); line-height: var(--klon-lh-body);
}
.klon-ui .klon-dialog-title { font-size: 1.0769em; font-weight: 700; color: var(--klon-text); margin: 0 0 6px; }
.klon-ui .klon-dialog-acts  { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--klon-space-4); }
.klon-ui .klon-dialog-acts .klon-btn { font-size: .9231em; }  /* 13px 안의 12px */

.klon-ui .klon-toast {
  display: inline-flex; align-items: center; gap: 8px; max-width: 360px;
  padding: 7px 12px; border-radius: var(--klon-radius-md); box-shadow: var(--klon-shadow-pop);
  font-size: var(--klon-fs-md); line-height: 1.5; background: rgba(34,32,28,.94); color: #fff;
}
.klon-ui .klon-toast--success { background: var(--klon-primary); color: var(--klon-primary-on); }
.klon-ui .klon-toast--error   { background: var(--klon-danger); color: #fff; }


/* ===== C. Bootstrap 덮어쓰기 층 (정본 문서 6절 색 연결 표) =====
 * 선택자는 Bootstrap 4.4.1 원본과 같은 모양 앞에 klon-ui 를 붙여 항상 이기게 한다.
 * text 와 bg 는 Bootstrap 이 important 를 쓰므로 여기서도 important 를 쓴다. */

/* --- C-1. 면 버튼 .btn-* --- */
.klon-ui .btn-success { color: var(--klon-brand-on); background-color: var(--klon-brand); border-color: var(--klon-brand); }
.klon-ui .btn-success:hover { color: var(--klon-brand-on); background-color: var(--klon-brand); border-color: var(--klon-brand); filter: brightness(.94); }
.klon-ui .btn-success:focus, .klon-ui .btn-success.focus { color: var(--klon-brand-on); background-color: var(--klon-brand); border-color: var(--klon-brand); box-shadow: 0 0 0 0.2rem rgba(150,193,33,.45); filter: brightness(.94); }
.klon-ui .btn-success.disabled, .klon-ui .btn-success:disabled { color: var(--klon-brand-on); background-color: var(--klon-brand); border-color: var(--klon-brand); }
.klon-ui .btn-success:not(:disabled):not(.disabled):active, .klon-ui .btn-success:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-success.dropdown-toggle { color: var(--klon-brand-on); background-color: var(--klon-brand); border-color: var(--klon-brand); filter: brightness(.88); }
.klon-ui .btn-success:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-success:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(150,193,33,.45); }

.klon-ui .btn-primary { color: #fff; background-color: var(--klon-info); border-color: var(--klon-info); }
.klon-ui .btn-primary:hover { color: #fff; background-color: var(--klon-info); border-color: var(--klon-info); filter: brightness(.94); }
.klon-ui .btn-primary:focus, .klon-ui .btn-primary.focus { color: #fff; background-color: var(--klon-info); border-color: var(--klon-info); box-shadow: 0 0 0 0.2rem rgba(28,126,214,.45); filter: brightness(.94); }
.klon-ui .btn-primary.disabled, .klon-ui .btn-primary:disabled { color: #fff; background-color: var(--klon-info); border-color: var(--klon-info); }
.klon-ui .btn-primary:not(:disabled):not(.disabled):active, .klon-ui .btn-primary:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-primary.dropdown-toggle { color: #fff; background-color: var(--klon-info); border-color: var(--klon-info); filter: brightness(.88); }
.klon-ui .btn-primary:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-primary:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(28,126,214,.45); }

.klon-ui .btn-secondary { color: var(--klon-text-2); background-color: var(--klon-surface); border-color: var(--klon-border); }
.klon-ui .btn-secondary:hover { color: var(--klon-text-2); background-color: var(--klon-surface-2); border-color: var(--klon-border); }
.klon-ui .btn-secondary:focus, .klon-ui .btn-secondary.focus { color: var(--klon-text-2); background-color: var(--klon-surface-2); border-color: var(--klon-border); box-shadow: 0 0 0 0.2rem rgba(107,115,111,.35); }
.klon-ui .btn-secondary.disabled, .klon-ui .btn-secondary:disabled { color: var(--klon-text-2); background-color: var(--klon-surface); border-color: var(--klon-border); }
.klon-ui .btn-secondary:not(:disabled):not(.disabled):active, .klon-ui .btn-secondary:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-secondary.dropdown-toggle { color: var(--klon-text-2); background-color: var(--klon-surface-2); border-color: var(--klon-text-4); }
.klon-ui .btn-secondary:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-secondary:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(107,115,111,.35); }

.klon-ui .btn-info { color: var(--klon-text-2); background-color: var(--klon-surface); border-color: var(--klon-border); }
.klon-ui .btn-info:hover { color: var(--klon-text-2); background-color: var(--klon-surface-2); border-color: var(--klon-border); }
.klon-ui .btn-info:focus, .klon-ui .btn-info.focus { color: var(--klon-text-2); background-color: var(--klon-surface-2); border-color: var(--klon-border); box-shadow: 0 0 0 0.2rem rgba(107,115,111,.35); }
.klon-ui .btn-info.disabled, .klon-ui .btn-info:disabled { color: var(--klon-text-2); background-color: var(--klon-surface); border-color: var(--klon-border); }
.klon-ui .btn-info:not(:disabled):not(.disabled):active, .klon-ui .btn-info:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-info.dropdown-toggle { color: var(--klon-text-2); background-color: var(--klon-surface-2); border-color: var(--klon-text-4); }
.klon-ui .btn-info:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-info:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(107,115,111,.35); }

.klon-ui .btn-warning { color: var(--klon-accent-fill-on); background-color: var(--klon-accent-fill); border-color: var(--klon-accent-fill); }
.klon-ui .btn-warning:hover { color: var(--klon-accent-fill-on); background-color: var(--klon-accent-fill); border-color: var(--klon-accent-fill); filter: brightness(.94); }
.klon-ui .btn-warning:focus, .klon-ui .btn-warning.focus { color: var(--klon-accent-fill-on); background-color: var(--klon-accent-fill); border-color: var(--klon-accent-fill); box-shadow: 0 0 0 0.2rem rgba(255,140,26,.45); filter: brightness(.94); }
.klon-ui .btn-warning.disabled, .klon-ui .btn-warning:disabled { color: var(--klon-accent-fill-on); background-color: var(--klon-accent-fill); border-color: var(--klon-accent-fill); }
.klon-ui .btn-warning:not(:disabled):not(.disabled):active, .klon-ui .btn-warning:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-warning.dropdown-toggle { color: var(--klon-accent-fill-on); background-color: var(--klon-accent-fill); border-color: var(--klon-accent-fill); filter: brightness(.88); }
.klon-ui .btn-warning:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-warning:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255,140,26,.45); }

.klon-ui .btn-danger { color: #fff; background-color: var(--klon-danger); border-color: var(--klon-danger); }
.klon-ui .btn-danger:hover { color: #fff; background-color: var(--klon-danger); border-color: var(--klon-danger); filter: brightness(.94); }
.klon-ui .btn-danger:focus, .klon-ui .btn-danger.focus { color: #fff; background-color: var(--klon-danger); border-color: var(--klon-danger); box-shadow: 0 0 0 0.2rem rgba(224,49,49,.45); filter: brightness(.94); }
.klon-ui .btn-danger.disabled, .klon-ui .btn-danger:disabled { color: #fff; background-color: var(--klon-danger); border-color: var(--klon-danger); }
.klon-ui .btn-danger:not(:disabled):not(.disabled):active, .klon-ui .btn-danger:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-danger.dropdown-toggle { color: #fff; background-color: var(--klon-danger); border-color: var(--klon-danger); filter: brightness(.88); }
.klon-ui .btn-danger:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-danger:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(224,49,49,.45); }

/* --- C-2. 외곽선 버튼 .btn-outline-* : 테두리, 글자가 그 색, 누르거나 올리면 면을 채움 --- */
.klon-ui .btn-outline-success { color: var(--klon-primary); border-color: var(--klon-primary); }
.klon-ui .btn-outline-success:hover { color: var(--klon-primary-on); background-color: var(--klon-primary); border-color: var(--klon-primary); }
.klon-ui .btn-outline-success:focus, .klon-ui .btn-outline-success.focus { box-shadow: 0 0 0 0.2rem rgba(77,124,15,.45); }
.klon-ui .btn-outline-success.disabled, .klon-ui .btn-outline-success:disabled { color: var(--klon-primary); background-color: transparent; }
.klon-ui .btn-outline-success:not(:disabled):not(.disabled):active, .klon-ui .btn-outline-success:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-outline-success.dropdown-toggle { color: var(--klon-primary-on); background-color: var(--klon-primary); border-color: var(--klon-primary); }
.klon-ui .btn-outline-success:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-outline-success:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(77,124,15,.45); }

.klon-ui .btn-outline-primary { color: var(--klon-info); border-color: var(--klon-info); }
.klon-ui .btn-outline-primary:hover { color: #fff; background-color: var(--klon-info); border-color: var(--klon-info); }
.klon-ui .btn-outline-primary:focus, .klon-ui .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(28,126,214,.45); }
.klon-ui .btn-outline-primary.disabled, .klon-ui .btn-outline-primary:disabled { color: var(--klon-info); background-color: transparent; }
.klon-ui .btn-outline-primary:not(:disabled):not(.disabled):active, .klon-ui .btn-outline-primary:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: var(--klon-info); border-color: var(--klon-info); }
.klon-ui .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(28,126,214,.45); }

.klon-ui .btn-outline-secondary { color: var(--klon-text-3); border-color: var(--klon-text-3); }
.klon-ui .btn-outline-secondary:hover { color: #fff; background-color: var(--klon-text-3); border-color: var(--klon-text-3); }
.klon-ui .btn-outline-secondary:focus, .klon-ui .btn-outline-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(107,115,111,.45); }
.klon-ui .btn-outline-secondary.disabled, .klon-ui .btn-outline-secondary:disabled { color: var(--klon-text-3); background-color: transparent; }
.klon-ui .btn-outline-secondary:not(:disabled):not(.disabled):active, .klon-ui .btn-outline-secondary:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-outline-secondary.dropdown-toggle { color: #fff; background-color: var(--klon-text-3); border-color: var(--klon-text-3); }
.klon-ui .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(107,115,111,.45); }

.klon-ui .btn-outline-info { color: var(--klon-info); border-color: var(--klon-info); }
.klon-ui .btn-outline-info:hover { color: #fff; background-color: var(--klon-info); border-color: var(--klon-info); }
.klon-ui .btn-outline-info:focus, .klon-ui .btn-outline-info.focus { box-shadow: 0 0 0 0.2rem rgba(28,126,214,.45); }
.klon-ui .btn-outline-info.disabled, .klon-ui .btn-outline-info:disabled { color: var(--klon-info); background-color: transparent; }
.klon-ui .btn-outline-info:not(:disabled):not(.disabled):active, .klon-ui .btn-outline-info:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-outline-info.dropdown-toggle { color: #fff; background-color: var(--klon-info); border-color: var(--klon-info); }
.klon-ui .btn-outline-info:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-outline-info:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(28,126,214,.45); }

.klon-ui .btn-outline-warning { color: var(--klon-accent); border-color: var(--klon-accent); }
.klon-ui .btn-outline-warning:hover { color: var(--klon-accent-on); background-color: var(--klon-accent); border-color: var(--klon-accent); }
.klon-ui .btn-outline-warning:focus, .klon-ui .btn-outline-warning.focus { box-shadow: 0 0 0 0.2rem rgba(232,89,12,.45); }
.klon-ui .btn-outline-warning.disabled, .klon-ui .btn-outline-warning:disabled { color: var(--klon-accent); background-color: transparent; }
.klon-ui .btn-outline-warning:not(:disabled):not(.disabled):active, .klon-ui .btn-outline-warning:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-outline-warning.dropdown-toggle { color: var(--klon-accent-on); background-color: var(--klon-accent); border-color: var(--klon-accent); }
.klon-ui .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(232,89,12,.45); }

.klon-ui .btn-outline-danger { color: var(--klon-danger); border-color: var(--klon-danger); }
.klon-ui .btn-outline-danger:hover { color: #fff; background-color: var(--klon-danger); border-color: var(--klon-danger); }
.klon-ui .btn-outline-danger:focus, .klon-ui .btn-outline-danger.focus { box-shadow: 0 0 0 0.2rem rgba(224,49,49,.45); }
.klon-ui .btn-outline-danger.disabled, .klon-ui .btn-outline-danger:disabled { color: var(--klon-danger); background-color: transparent; }
.klon-ui .btn-outline-danger:not(:disabled):not(.disabled):active, .klon-ui .btn-outline-danger:not(:disabled):not(.disabled).active,
.klon-ui .show > .btn-outline-danger.dropdown-toggle { color: #fff; background-color: var(--klon-danger); border-color: var(--klon-danger); }
.klon-ui .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .klon-ui .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.klon-ui .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(224,49,49,.45); }

/* --- C-3. 배지 .badge-* : 면 버튼과 같은 짝 --- */
.klon-ui .badge-success { color: var(--klon-brand-on); background-color: var(--klon-brand); }
.klon-ui a.badge-success:hover, .klon-ui a.badge-success:focus { color: var(--klon-brand-on); background-color: var(--klon-brand); filter: brightness(.94); }
.klon-ui a.badge-success:focus, .klon-ui a.badge-success.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(150,193,33,.45); }
.klon-ui .badge-primary { color: #fff; background-color: var(--klon-info); }
.klon-ui a.badge-primary:hover, .klon-ui a.badge-primary:focus { color: #fff; background-color: var(--klon-info); filter: brightness(.94); }
.klon-ui a.badge-primary:focus, .klon-ui a.badge-primary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(28,126,214,.45); }
.klon-ui .badge-secondary { color: var(--klon-text-2); background-color: var(--klon-surface); box-shadow: inset 0 0 0 1px var(--klon-border); }
.klon-ui a.badge-secondary:hover, .klon-ui a.badge-secondary:focus { color: var(--klon-text-2); background-color: var(--klon-surface); filter: brightness(.94); }
.klon-ui a.badge-secondary:focus, .klon-ui a.badge-secondary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(107,115,111,.35); }
.klon-ui .badge-info { color: var(--klon-text-2); background-color: var(--klon-surface); box-shadow: inset 0 0 0 1px var(--klon-border); }
.klon-ui a.badge-info:hover, .klon-ui a.badge-info:focus { color: var(--klon-text-2); background-color: var(--klon-surface); filter: brightness(.94); }
.klon-ui a.badge-info:focus, .klon-ui a.badge-info.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(107,115,111,.35); }
.klon-ui .badge-warning { color: var(--klon-accent-fill-on); background-color: var(--klon-accent-fill); }
.klon-ui a.badge-warning:hover, .klon-ui a.badge-warning:focus { color: var(--klon-accent-fill-on); background-color: var(--klon-accent-fill); filter: brightness(.94); }
.klon-ui a.badge-warning:focus, .klon-ui a.badge-warning.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(255,140,26,.45); }
.klon-ui .badge-danger { color: #fff; background-color: var(--klon-danger); }
.klon-ui a.badge-danger:hover, .klon-ui a.badge-danger:focus { color: #fff; background-color: var(--klon-danger); filter: brightness(.94); }
.klon-ui a.badge-danger:focus, .klon-ui a.badge-danger.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(224,49,49,.45); }

/* --- C-4. 글자색 .text-* (Bootstrap 이 important 를 쓰므로 같이 important) --- */
.klon-ui .text-success { color: var(--klon-primary) !important; }
.klon-ui a.text-success:hover, .klon-ui a.text-success:focus { color: var(--klon-primary) !important; filter: brightness(.85); }
.klon-ui .text-primary { color: var(--klon-info) !important; }
.klon-ui a.text-primary:hover, .klon-ui a.text-primary:focus { color: var(--klon-info) !important; filter: brightness(.85); }
.klon-ui .text-secondary { color: var(--klon-text-3) !important; }
.klon-ui a.text-secondary:hover, .klon-ui a.text-secondary:focus { color: var(--klon-text-3) !important; filter: brightness(.85); }
.klon-ui .text-info { color: var(--klon-info) !important; }
.klon-ui a.text-info:hover, .klon-ui a.text-info:focus { color: var(--klon-info) !important; filter: brightness(.85); }
.klon-ui .text-warning { color: var(--klon-accent) !important; }
.klon-ui a.text-warning:hover, .klon-ui a.text-warning:focus { color: var(--klon-accent) !important; filter: brightness(.85); }
.klon-ui .text-danger { color: var(--klon-danger) !important; }
.klon-ui a.text-danger:hover, .klon-ui a.text-danger:focus { color: var(--klon-danger) !important; filter: brightness(.85); }

/* --- C-5. 배경 .bg-* : 연한 면 (Bootstrap 이 important 를 쓰므로 같이 important) --- */
.klon-ui .bg-success { background-color: var(--klon-primary-soft) !important; }
.klon-ui a.bg-success:hover, .klon-ui a.bg-success:focus,
.klon-ui button.bg-success:hover,
.klon-ui button.bg-success:focus { background-color: var(--klon-primary-soft) !important; filter: brightness(.96); }
.klon-ui .bg-primary { background-color: var(--klon-info-soft) !important; }
.klon-ui a.bg-primary:hover, .klon-ui a.bg-primary:focus,
.klon-ui button.bg-primary:hover,
.klon-ui button.bg-primary:focus { background-color: var(--klon-info-soft) !important; filter: brightness(.96); }
.klon-ui .bg-secondary { background-color: var(--klon-neutral-soft) !important; }
.klon-ui a.bg-secondary:hover, .klon-ui a.bg-secondary:focus,
.klon-ui button.bg-secondary:hover,
.klon-ui button.bg-secondary:focus { background-color: var(--klon-neutral-soft) !important; filter: brightness(.96); }
.klon-ui .bg-info { background-color: var(--klon-info-soft) !important; }
.klon-ui a.bg-info:hover, .klon-ui a.bg-info:focus,
.klon-ui button.bg-info:hover,
.klon-ui button.bg-info:focus { background-color: var(--klon-info-soft) !important; filter: brightness(.96); }
.klon-ui .bg-warning { background-color: var(--klon-accent-soft) !important; }
.klon-ui a.bg-warning:hover, .klon-ui a.bg-warning:focus,
.klon-ui button.bg-warning:hover,
.klon-ui button.bg-warning:focus { background-color: var(--klon-accent-soft) !important; filter: brightness(.96); }
.klon-ui .bg-danger { background-color: var(--klon-danger-soft) !important; }
.klon-ui a.bg-danger:hover, .klon-ui a.bg-danger:focus,
.klon-ui button.bg-danger:hover,
.klon-ui button.bg-danger:focus { background-color: var(--klon-danger-soft) !important; filter: brightness(.96); }

/* --- C-6. 알림 .alert-* : 연한 면 + 글자색 + 테두리 --- */
.klon-ui .alert-success { color: var(--klon-primary); background-color: var(--klon-primary-soft); border-color: var(--klon-primary-border); }
.klon-ui .alert-success hr { border-top-color: var(--klon-primary-border); }
.klon-ui .alert-success .alert-link { color: var(--klon-primary); }
.klon-ui .alert-primary { color: var(--klon-info); background-color: var(--klon-info-soft); border-color: var(--klon-info); }
.klon-ui .alert-primary hr { border-top-color: var(--klon-info); }
.klon-ui .alert-primary .alert-link { color: var(--klon-info); }
.klon-ui .alert-secondary { color: var(--klon-text-3); background-color: var(--klon-neutral-soft); border-color: var(--klon-border); }
.klon-ui .alert-secondary hr { border-top-color: var(--klon-border); }
.klon-ui .alert-secondary .alert-link { color: var(--klon-text-3); }
.klon-ui .alert-info { color: var(--klon-info); background-color: var(--klon-info-soft); border-color: var(--klon-info); }
.klon-ui .alert-info hr { border-top-color: var(--klon-info); }
.klon-ui .alert-info .alert-link { color: var(--klon-info); }
.klon-ui .alert-warning { color: var(--klon-accent); background-color: var(--klon-accent-soft); border-color: var(--klon-accent-border); }
.klon-ui .alert-warning hr { border-top-color: var(--klon-accent-border); }
.klon-ui .alert-warning .alert-link { color: var(--klon-accent); }
.klon-ui .alert-danger { color: var(--klon-danger); background-color: var(--klon-danger-soft); border-color: var(--klon-danger); }
.klon-ui .alert-danger hr { border-top-color: var(--klon-danger); }
.klon-ui .alert-danger .alert-link { color: var(--klon-danger); }