/* =====================================================================
   KREAM 스킨 공용 — 색 토큰과 워드마크(SECUPORTAL) 글자 스타일.
   포털(kream.css)·장고 관리 화면(kream-admin.css)·두 로그인 화면이 함께 쓴다(request.pf_skin == "kream"일 때만 로드).
   값의 출처는 kream.css 머리 주석(kream.co.kr 실측, 2026-10-03).
   ===================================================================== */

:root[data-skin=kream] {
    --k-ink: #222222;
    --k-ink-2: #4e4e4e;
    --k-sub: #909090;
    --k-faint: #a7a7a7;
    --k-line-m: #d3d3d3;
    --k-line: #ebebeb;
    --k-line-x: #f0f0f0;
    --k-fill: #f4f4f4;
    --k-fill-2: #fafafa;
    --k-red: #ef6253;
    --k-red-text: #e5432f;      /* 작은 글자용 — #f15746보다 한 단계 짙게(흰 바탕 대비 확보) */
    --k-green: #41b979;
    --k-green-text: #1f8f57;
    --k-blue: #1155e0;
    --k-max: 1280px;             /* 머리·본문 공통 최대폭(KREAM 1200 + 데이터 표 여유) */
    --k-gutter: max(40px, calc((100% - var(--k-max)) / 2));
    --k-head: 84px;              /* 상단 링크 줄 28 + 로고 줄 56 */
    --k-tabs: 48px;

    /* 포털 토큰을 흑백으로 재정의 — 화면 대부분은 이것만으로 바뀐다 */
    --bm-primary: #222222;
    --bm-primary-hover: #000000;
    --bm-primary-light: #4e4e4e;
    --bm-blue-10: #f4f4f4;
    --bm-blue-20: #ebebeb;
    --bm-navy-900: #222222;
    --bm-navy-800: #222222;
    --bm-sky: #4e4e4e;
    --bm-mist: #fafafa;
    --bm-bg: #ffffff;
    --bm-surface: #ffffff;
    --bm-surface-sub: #fafafa;
    --bm-surface-2: #f4f4f4;
    --bm-border: #ebebeb;
    --bm-border-strong: #d3d3d3;
    --bm-text: #222222;
    --bm-text-sub: #4e4e4e;
    --bm-text-faint: #8a8a8a;
    --bm-placeholder: #a7a7a7;
    --bm-hover: rgba(0, 0, 0, 0.03);
    --bm-success-bg: #effaf4;
    --bm-success: #1f8f57;
    --bm-success-bd: #bfe8d2;
    --bm-warning-bg: #fff6ea;
    --bm-warning: #b85e00;
    --bm-warning-bd: #ffd9a8;
    --bm-danger-bg: #fef1ef;
    --bm-danger: #e5432f;
    --bm-danger-bd: #f8c3bc;
    --bm-info-bg: #eff4fe;
    --bm-info: #1155e0;
    --bm-info-bd: #cddcfb;
    --bm-sky-bg: #f4f4f4;
    --bm-sky-fg: #222222;
    --bm-sky-bd: #d3d3d3;
    --bm-yellow-bg: #fff8e6;
    --bm-yellow-fg: #8a6116;
    --sec-info-fg: #1155e0; --sec-info-bg: #eff4fe;
    --sec-ok-fg: #1f8f57; --sec-ok-bd: #bfe8d2; --sec-ok-bg: #effaf4;
    --bm-radius: 12px;
    --bm-radius-sm: 10px;
    --bm-shadow: none;
}

/* 워드마크 — 굵은 기울임 산세리프(KREAM 로고의 인상만 빌린다, 글자는 포털 이름 SECUPORTAL) */
[data-skin=kream] .k-logo { font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: -0.045em;
    color: var(--k-ink); text-decoration: none; line-height: 1; padding-right: 2px; }
[data-skin=kream] .k-logo:hover { text-decoration: none; }
[data-skin=kream] .k-logo-sub { font-size: 13px; font-weight: 600; color: var(--k-sub); letter-spacing: -0.01em; }

/* ===== 배지 — 작은 네모 태그(KREAM '단독'·'무료배송' 태그 결) ===== */
[data-skin=kream] .badge { border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 600; border: 0;
    background: var(--k-fill); color: var(--k-ink-2); }
[data-skin=kream] .badge.info, [data-skin=kream] .badge.st-SUBMITTED, [data-skin=kream] .badge.st-TEAM_LEADER_PENDING,
[data-skin=kream] .badge.cm-type-REGULAR { background: var(--bm-info-bg); color: var(--k-blue); }
[data-skin=kream] .badge.progress, [data-skin=kream] .badge.st-PROCESSING_PENDING, [data-skin=kream] .badge.st-PROCESSED
  { background: var(--k-ink); color: #fff; }
[data-skin=kream] .badge.success, [data-skin=kream] .badge.st-COMPLETED, [data-skin=kream] .badge.pe-JOINER,
[data-skin=kream] .badge.pci-DONE, [data-skin=kream] .badge.isms-DONE { background: var(--bm-success-bg); color: var(--k-green-text); }
[data-skin=kream] .badge.warning, [data-skin=kream] .badge.st-SYSTEM_OWNER_PENDING, [data-skin=kream] .badge.st-SECURITY_REVIEW_PENDING,
[data-skin=kream] .badge.st-NEED_MORE_INFO, [data-skin=kream] .badge.pe-MOVER, [data-skin=kream] .badge.pci-PENDING,
[data-skin=kream] .badge.isms-DOING, [data-skin=kream] .badge.cm-type-ADHOC { background: var(--bm-warning-bg); color: var(--bm-warning); }
[data-skin=kream] .badge.danger, [data-skin=kream] .badge.st-REJECTED, [data-skin=kream] .badge.st-REVOKED,
[data-skin=kream] .badge.pe-LEAVER { background: var(--bm-danger-bg); color: var(--k-red-text); }
[data-skin=kream] .kind-pill { background: var(--k-fill); color: var(--k-ink); border-radius: 4px; }