/* ============================================================
   Clevi.App.Server 사용자 API 콘솔 공용 디자인 시스템 (clv-*)
   ------------------------------------------------------------
   Clevi.App.Client 의 Cloud 콘솔(cloud-shared.css) 과 같은 구조를
   서버 전용 접두사로 옮긴 것. 화면 구성 요소가 1:1 로 대응하므로
   한쪽을 고치면 다른 쪽도 같은 이름의 규칙을 찾으면 된다.

     .cloud-page          ->  .clv-page
     .cloud-page-header   ->  .clv-page-head
     .cloud-section       ->  .clv-section
     .cloud-metric-card   ->  .clv-metric
     .cloud-table         ->  .clv-table
     .cloud-status-pill   ->  .clv-pill
     .cloud-empty-state   ->  .clv-empty
     .cloud-feedback      ->  .clv-feedback

   색상은 테마 토큰(--clc-* / --clv-*)만 사용한다. 로우 컬러 금지.
   ============================================================ */

/* ── 시맨틱 토큰 ──
   --clc-assign-* 계열은 다크에서 반전되고, --clc-base-* 는 반전되지
   않는다. 콘솔은 반드시 반전되는 쪽만 사용한다. */
:root {
    --console-surface:        var(--clc-assign-base, #fff);
    --console-surface-sunken: var(--clc-assign-base-50, #f7f8fa);
    --console-surface-raised: var(--clc-assign-base-100, #eef1f5);
    --console-text:           var(--clv-text-primary, #1b1d20);
    --console-text-secondary: var(--clv-text-secondary, #5c6672);
    --console-text-muted:     var(--clv-text-tertiary, #8a949f);
    --console-border:         var(--clc-assign-base-200, #e3e7ee);
    --console-border-soft:    var(--clc-assign-base-100, #eef1f5);
    --console-accent:         var(--clc-primary, #6b45ee);
    --console-accent-soft:    var(--clc-primary-lighter, #efeafd);
    --console-accent-strong:  var(--clc-primary-dark, #5636c4);
    --console-on-accent:      var(--clc-on-primary, #fff);

    /* 상태 색 — --clc-*-lighter / --clc-*-dark 쌍은 다크에서 반전되지 않아
       (예: success-dark 는 두 테마 모두 #3e9108) 배지 글자가 묻힌다.
       그래서 배경은 색상의 알파 워시로, 글자는 색상 + --clv-text-primary 혼합으로 만든다.
       --clv-text-primary 는 테마에 따라 반전되므로 잉크가 항상 바탕과 반대로 간다. */
    --console-wash-success: color-mix(in srgb, var(--clc-success) 16%, transparent);
    --console-wash-danger:  color-mix(in srgb, var(--clc-danger) 16%, transparent);
    --console-wash-warning: color-mix(in srgb, var(--clc-warning) 18%, transparent);
    --console-wash-info:    color-mix(in srgb, var(--clc-info) 18%, transparent);
    --console-wash-neutral: color-mix(in srgb, var(--clv-text-primary) 8%, transparent);

    --console-ink-success: color-mix(in srgb, var(--clc-success) 45%, var(--clv-text-primary));
    --console-ink-danger:  color-mix(in srgb, var(--clc-danger) 45%, var(--clv-text-primary));
    --console-ink-warning: color-mix(in srgb, var(--clc-warning) 40%, var(--clv-text-primary));
    --console-ink-info:    color-mix(in srgb, var(--clc-info) 45%, var(--clv-text-primary));

    --console-radius-sm: 8px;
    --console-radius:    12px;
    --console-radius-lg: 16px;

    --console-gap:       16px;
    --console-page-max:  1280px;
}

/* ============================================================
   페이지 골격
   ============================================================ */
.clv-page {
    max-width: var(--console-page-max);
    margin: 0 auto;
    padding: 28px 24px 72px;
    display: flex;
    flex-direction: column;
    gap: var(--console-gap);
    color: var(--console-text);
    min-width: 0;
}

.clv-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.clv-page-head-titles {
    min-width: 0;
}

.clv-eyebrow {
    margin: 0 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--console-accent);
}

.clv-page-head h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--console-text);
}

.clv-page-head p {
    margin: 6px 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--console-text-secondary);
}

.clv-page-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   섹션 카드
   ============================================================ */
.clv-section {
    background: var(--console-surface);
    border: 1px solid var(--console-border);
    border-radius: var(--console-radius);
    padding: 18px 20px;
    min-width: 0;
}

.clv-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.clv-section-head h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--console-text);
}

.clv-section-head .clv-section-sub {
    margin: 4px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--console-text-secondary);
}

.clv-section-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.clv-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--console-gap);
}

.clv-section-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--console-gap);
}

/* ============================================================
   지표 카드
   ============================================================ */
.clv-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.clv-metric {
    position: relative;
    overflow: hidden;
    background: var(--console-surface);
    border: 1px solid var(--console-border);
    border-radius: var(--console-radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.clv-metric-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--console-text-secondary);
}

.clv-metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--console-text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.clv-metric-foot {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--console-text-muted);
}

/* 액센트 강조 지표(크레딧 등) */
.clv-metric-accent {
    border-color: color-mix(in srgb, var(--console-accent) 35%, var(--console-border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--console-accent) 6%, var(--console-surface)),
        var(--console-surface) 70%);
}

.clv-metric-accent .clv-metric-value {
    color: var(--console-accent-strong);
}

/* ============================================================
   표
   ============================================================ */
.clv-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.clv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.clv-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--console-border);
    color: var(--console-text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.clv-table td {
    padding: 12px;
    border-bottom: 1px solid var(--console-border-soft);
    color: var(--console-text);
    vertical-align: middle;
}

.clv-table tbody tr:last-child td {
    border-bottom: 0;
}

.clv-table tbody tr:hover {
    background: var(--console-surface-sunken);
}

.clv-table .clv-num,
.clv-table th.clv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.clv-table .clv-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.clv-table .clv-cell-actions > * + * {
    margin-left: 6px;
}

.clv-row-muted td {
    color: var(--console-text-muted);
}

.clv-cell-strong {
    font-weight: 600;
}

.clv-cell-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    color: var(--console-text-muted);
}

/* ============================================================
   상태 배지
   ============================================================ */
.clv-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.clv-pill.success { background: var(--console-wash-success); color: var(--console-ink-success); }
.clv-pill.error   { background: var(--console-wash-danger);  color: var(--console-ink-danger); }
.clv-pill.warning { background: var(--console-wash-warning); color: var(--console-ink-warning); }
.clv-pill.info    { background: var(--console-wash-info);    color: var(--console-ink-info); }
.clv-pill.accent  { background: var(--console-accent-soft);  color: var(--console-accent-strong); }
.clv-pill.neutral { background: var(--console-wash-neutral); color: var(--console-text-secondary); }

.clv-pill-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ============================================================
   사용 한도 미터
   ============================================================ */
.clv-meter-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clv-meter-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.clv-meter-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.clv-meter-name {
    font-size: 0.88rem;
    font-weight: 600;
}

.clv-meter-count {
    font-size: 0.82rem;
    color: var(--console-text-secondary);
    font-variant-numeric: tabular-nums;
}

.clv-meter-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--console-surface-raised);
    overflow: hidden;
}

.clv-meter-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
    background: var(--console-accent);
}

.clv-meter-fill.warn   { background: var(--clc-warning); }
.clv-meter-fill.danger { background: var(--clc-danger); }

.clv-meter-foot {
    font-size: 0.74rem;
    color: var(--console-text-muted);
}

/* ============================================================
   설명 목록(키-값)
   ============================================================ */
.clv-kv {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.clv-kv > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--console-border-soft);
}

.clv-kv > div:last-child {
    border-bottom: 0;
}

.clv-kv dt {
    font-size: 0.85rem;
    color: var(--console-text-secondary);
}

.clv-kv dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ============================================================
   목록 행(정책, 애플리케이션 등)
   ============================================================ */
.clv-rows {
    display: flex;
    flex-direction: column;
}

.clv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid var(--console-border-soft);
}

.clv-row:first-child { padding-top: 0; }
.clv-row:last-child { padding-bottom: 0; border-bottom: 0; }

.clv-row-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.clv-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    font-weight: 600;
}

.clv-row-sub {
    font-size: 0.79rem;
    color: var(--console-text-muted);
}

.clv-row-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   코드 / 모노스페이스
   ============================================================ */
.clv-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.clv-code {
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--console-radius-sm);
    border: 1px solid var(--console-border-soft);
    background: var(--console-surface-sunken);
    color: var(--console-text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
}

.clv-copy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.clv-copy-row > code,
.clv-copy-value {
    flex: 1 1 240px;
    min-width: 0;
    padding: 9px 12px;
    border-radius: var(--console-radius-sm);
    border: 1px solid var(--console-border-soft);
    background: var(--console-surface-sunken);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

/* ============================================================
   폼 필드
   ============================================================ */
.clv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.clv-field > label,
.clv-field-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--console-text-secondary);
}

.clv-field-hint {
    font-size: 0.77rem;
    line-height: 1.5;
    color: var(--console-text-muted);
}

.clv-field-hint a {
    color: var(--console-accent-strong);
    font-weight: 600;
}

.clv-field-optional {
    margin-left: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--console-text-muted);
}

.clv-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.clv-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.clv-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}

/* 여러 섹션을 세로로 쌓는 서브뷰(생성/편집 폼 등) */
.clv-page-stack {
    display: flex;
    flex-direction: column;
    gap: var(--console-gap);
}

.clv-checks {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.clv-checks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--console-text);
    cursor: pointer;
}

/* 되돌릴 수 없는 조작을 모으는 구역 */
.clv-danger-zone {
    border-color: color-mix(in srgb, var(--clc-danger) 32%, var(--console-border));
}

.clv-danger-zone .clv-row-title {
    color: var(--console-ink-danger);
}

/* 셀렉트/인풋 원시 요소 — Clevi* 컴포넌트를 못 쓰는 자리에만 사용 */
.clv-input,
.clv-select {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--console-border);
    border-radius: var(--console-radius-sm);
    background: var(--console-surface);
    color: var(--console-text);
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clv-input:focus,
.clv-select:focus {
    outline: none;
    border-color: var(--console-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--console-accent) 18%, transparent);
}

.clv-select-inline {
    width: auto;
    min-width: 180px;
}

.clv-workspace-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clv-workspace-picker-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--console-text-secondary);
    white-space: nowrap;
}

/* ============================================================
   피드백 배너 / 비밀값 표시
   ============================================================ */
.clv-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: var(--console-radius-sm);
    font-size: 0.88rem;
    line-height: 1.55;
}

.clv-feedback.error {
    background: var(--console-wash-danger);
    border: 1px solid color-mix(in srgb, var(--clc-danger) 38%, transparent);
    color: var(--console-ink-danger);
}

.clv-feedback.warning {
    background: var(--console-wash-warning);
    border: 1px solid color-mix(in srgb, var(--clc-warning) 42%, transparent);
    color: var(--console-ink-warning);
}

.clv-feedback.info {
    background: var(--console-wash-info);
    border: 1px solid color-mix(in srgb, var(--clc-info) 42%, transparent);
    color: var(--console-ink-info);
}

.clv-feedback.success {
    background: var(--console-wash-success);
    border: 1px solid color-mix(in srgb, var(--clc-success) 38%, transparent);
    color: var(--console-ink-success);
}

.clv-secret {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--console-radius);
    border: 1px solid color-mix(in srgb, var(--console-accent) 40%, var(--console-border));
    background: var(--console-accent-soft);
}

.clv-secret strong {
    font-size: 0.9rem;
    color: var(--console-accent-strong);
}

.clv-secret .clv-copy-value {
    background: var(--console-surface);
    border-color: color-mix(in srgb, var(--console-accent) 30%, var(--console-border));
}

.clv-secret-note {
    font-size: 0.78rem;
    color: var(--console-text-secondary);
}

/* ============================================================
   빈 상태 / 로딩 / 안내
   ============================================================ */
.clv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
    text-align: center;
    border: 1px dashed var(--console-border);
    border-radius: var(--console-radius);
    background: var(--console-surface);
}

.clv-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--console-accent-soft);
    color: var(--console-accent-strong);
    font-size: 1.15rem;
    line-height: 1;
}

.clv-empty strong {
    font-size: 1rem;
    font-weight: 700;
}

.clv-empty p {
    margin: 0;
    max-width: 46ch;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--console-text-secondary);
}

.clv-empty-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

/* 섹션 안쪽의 가벼운 빈 상태 */
.clv-empty-inline {
    padding: 26px 16px;
    border: 0;
    background: transparent;
}

.clv-skeletons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clv-hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--console-text-secondary);
}

.clv-hint code {
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--console-surface-raised);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8rem;
}

.clv-hint a {
    color: var(--console-accent-strong);
    font-weight: 600;
}

/* ============================================================
   시작 안내 스텝
   ============================================================ */
.clv-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    counter-reset: clv-step;
}

.clv-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--console-border-soft);
    border-radius: var(--console-radius-sm);
    background: var(--console-surface-sunken);
}

.clv-step::before {
    counter-increment: clv-step;
    content: counter(clv-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--console-accent);
    color: var(--console-on-accent);
    font-size: 0.78rem;
    font-weight: 700;
}

.clv-step strong {
    font-size: 0.9rem;
    font-weight: 700;
}

.clv-step span {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--console-text-secondary);
}

/* ============================================================
   링크 카드
   ============================================================ */
.clv-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.clv-link-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--console-border);
    border-radius: var(--console-radius);
    background: var(--console-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.clv-link-card:hover {
    border-color: color-mix(in srgb, var(--console-accent) 45%, var(--console-border));
    background: var(--console-surface-sunken);
    text-decoration: none;
    transform: translateY(-1px);
}

.clv-link-card:focus-visible {
    outline: 2px solid var(--console-accent);
    outline-offset: 2px;
}

.clv-link-card strong {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--console-text);
}

.clv-link-card span {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--console-text-secondary);
}

/* ============================================================
   탭
   ============================================================ */
.clv-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--console-border);
    overflow-x: auto;
}

.clv-tab {
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--console-text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.clv-tab:hover { color: var(--console-text); }

.clv-tab.active {
    color: var(--console-accent-strong);
    border-bottom-color: var(--console-accent);
}

/* ============================================================
   툴바(기간 선택 등)
   ============================================================ */
.clv-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.clv-segment {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--console-border);
    border-radius: 999px;
    background: var(--console-surface-sunken);
}

.clv-segment button {
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--console-text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.clv-segment button:hover { color: var(--console-text); }

.clv-segment button.active {
    background: var(--console-surface);
    color: var(--console-accent-strong);
    box-shadow: var(--clc-shadow-layer0);
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1020px) {
    .clv-section-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .clv-page {
        padding: 18px 14px 64px;
    }

    .clv-page-head h1 {
        font-size: 1.3rem;
    }

    .clv-page-head-actions {
        width: 100%;
    }

    .clv-section {
        padding: 16px;
    }

    .clv-table-scroll .clv-table {
        min-width: 640px;
    }

    .clv-kv dd {
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clv-link-card,
    .clv-meter-fill,
    .clv-tab,
    .clv-segment button {
        transition: none;
    }

    .clv-link-card:hover {
        transform: none;
    }
}