/* ============================================================
   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

   재질은 Mist 를 따른다 (Clevi.App.Components/docs/mist-design-language.md).
     · 표면 겉면에 보더를 긋지 않는다. 분리는 ①표면색 차이 ②부드러운 그림자
       ③상단 스펙큘러 세 가지로 만든다(1조).
     · 헤어라인은 표면 '안'의 분리선에만 쓴다 — 행 구분, 내부 구획선(2조).
     · 다크에서 위층은 더 밝다. 깊이를 그림자가 아니라 표면 밝기 단이 진다(3조).
     · 호버는 리프트, 눌림은 안착. 보더 색으로 상태를 말하지 않는다(4조).
     · 선택/강조는 액센트 저채도 표면 워시로 한다. 한쪽 면 레일 금지(5조).
     · 액센트는 완전히 플랫하다. 그라데이션을 쓰지 않는다.
     · 비활성은 잉크 단계를 내려서 만든다. 요소 opacity 로 만들지 않는다.

   /clv 는 surface.css 를 로드하지 않는다. --clv-overlay-* / --clv-chrome-* /
   --clv-field-* / --clv-card-radius 와 .clv-surface-* 유틸리티는 여기서
   정의되지 않아 조용히 사라진다. 그래서 --clc-material-* 를 직접 읽는다.
   --clv-text-* 와 --clc-mist-* 는 테마가 :root 에 공급하므로 안전하다.
   ============================================================ */

/* ── 시맨틱 토큰 ──
   층 위계는 재질이 만든다. 예전에는 표면 3단을 --clc-assign-base / -50 / -100 에
   걸었는데, 다크에서 이 셋이 전부 #383838 이라 카드·안쪽 홈·호버·미터 트랙·
   활성 세그먼트가 문자 그대로 같은 색이었다. 보더만이 유일한 구분선이었으므로
   보더를 지우려면 램프를 함께 고쳐야 했다. 아래가 그 램프다. */
:root {
    /* 표면 — 종이(L2) / 뜬 종이(L2↑) / 필드(L2⁻). 셋 다 반투명이라 뒤의 L0
       캔버스가 있어야 이야기를 한다. */
    --console-surface:        var(--clc-material-paper, rgba(255, 255, 255, 0.82));
    --console-surface-raised: var(--clc-material-paper-raised, rgba(255, 255, 255, 0.94));
    --console-field:          var(--clc-material-field, rgba(20, 16, 40, 0.07));
    --console-field-strong:   var(--clc-material-field-strong, rgba(20, 16, 40, 0.11));

    /* 선과 빛 — 헤어라인은 표면 안쪽 전용, 스펙큘러는 표면 윗변의 빛.
       스펙큘러는 라이트 60% / 다크 8% 라 다크에서는 사실상 일하지 않는다.
       다크의 분리는 위 표면 밝기 단이 진다. */
    --console-hairline:        var(--clc-material-hairline, rgba(22, 18, 38, 0.09));
    --console-hairline-strong: var(--clc-material-hairline-strong, rgba(22, 18, 38, 0.16));
    --console-specular:        var(--clc-material-specular, rgba(255, 255, 255, 0.60));

    /* 깊이 */
    --console-elev-0: var(--clc-material-elevation-0, 0 1px 2px rgba(20, 14, 45, 0.08));
    --console-elev-1: var(--clc-material-elevation-1, 0 1px 2px rgba(20, 14, 45, 0.05), 0 6px 20px rgba(20, 14, 45, 0.07));

    /* 겉면 조립은 여기서 한 번만 한다. 규칙은 조립된 값만 읽는다.
       카드는 elev-1, 컨트롤 높이의 칩은 elev-0, 파인 자리는 스펙큘러만.
       리프트는 한 단 올리는 것이다 — 칩 그림자 -> 카드 그림자. */
    --console-card-shadow: inset 0 1px 0 var(--console-specular), var(--console-elev-1);
    --console-chip-shadow: inset 0 1px 0 var(--console-specular), var(--console-elev-0);
    --console-well-shadow: inset 0 1px 0 var(--console-specular);

    /* 잉크 3단 — 삼차 잉크는 라벨·캡션·비활성 자리다. 본문을 태우지 않는다. */
    --console-text:           var(--clv-text-primary, #1A1922);
    --console-text-secondary: var(--clv-text-secondary, #5C5A68);
    --console-text-muted:     var(--clv-text-tertiary, #8A8894);

    /* 액센트 — 채우는 자리는 --console-accent, 채우지 않는 자리(글자·링크)는
       --console-accent-strong(=Mist 액센트 잉크)를 쓴다.
       워시 혼합비 --clc-shade-wash 는 라이트 13% / 다크 18% 로 지면이 소유한다.
       다크에서 같은 세기로 읽히려면 더 진하게 섞어야 하기 때문이다. */
    --console-accent:        var(--clc-primary, #6B45EE);
    --console-accent-soft:   color-mix(in srgb, var(--clc-primary, #6B45EE) var(--clc-shade-wash, 13%), transparent);
    --console-accent-strong: var(--clc-mist-ink-primary, color-mix(in srgb, var(--clc-primary, #6B45EE) 85%, var(--console-text)));
    --console-on-accent:     var(--clc-on-primary, #FFFFFF);

    /* 포커스 — 조립된 값만 읽는다. 부품(focus-bloom)으로 링을 다시 만들지 않는다.
       0-blur 링은 결국 보더로 읽혀서 언어에서 빠진 표현이다. */
    --console-focus-shadow: var(--clc-mist-focus-shadow, 0 0 12px 2px color-mix(in srgb, var(--console-accent) 26%, transparent));
    --console-focus-wash:   var(--clc-mist-focus-wash, color-mix(in srgb, var(--console-accent) 9%, var(--console-field-strong)));

    /* 상태 색 — 워시 10% / 잉크는 의미색 85% + 본문 잉크 15%.
       두 비율 모두 언어가 정한 눈금이고, 의미색 자체가 지면을 따라 뒤집히므로
       (라이트 진한 색 + 흰 잉크 / 다크 밝은 색 + 진한 잉크) 손으로 섞을 필요가 없다.
       워시는 반투명이라 '표면 위에 얹는' 값이다 — 캔버스 위에 놓이는 배너처럼
       스스로 표면이어야 하는 자리는 워시를 종이에 섞어서 쓴다. */
    --console-wash-success: var(--clc-mist-wash-success, color-mix(in srgb, var(--clc-success) 10%, transparent));
    --console-wash-danger:  var(--clc-mist-wash-danger,  color-mix(in srgb, var(--clc-danger) 10%, transparent));
    --console-wash-warning: var(--clc-mist-wash-warning, color-mix(in srgb, var(--clc-warning) 10%, transparent));
    --console-wash-info:    var(--clc-mist-wash-info,    color-mix(in srgb, var(--clc-info) 10%, transparent));
    --console-wash-neutral: var(--console-field);

    --console-ink-success: var(--clc-mist-ink-success, color-mix(in srgb, var(--clc-success) 85%, var(--console-text)));
    --console-ink-danger:  var(--clc-mist-ink-danger,  color-mix(in srgb, var(--clc-danger) 85%, var(--console-text)));
    --console-ink-warning: var(--clc-mist-ink-warning, color-mix(in srgb, var(--clc-warning) 85%, var(--console-text)));
    --console-ink-info:    var(--clc-mist-ink-info,    color-mix(in srgb, var(--clc-info) 85%, var(--console-text)));

    /* 반경은 테마 사다리를 그대로 따른다 — 자리가 이름이다. */
    --console-radius-sm: var(--clc-mist-radius-field, 10px);
    --console-radius:    var(--clc-mist-radius-surface, 14px);
    --console-radius-lg: var(--clc-mist-radius-dialog, 20px);

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

    /* 호환용 별칭 — 신규 소비 금지. 이름이 '보더'지만 이제 표면 '안'의
       분리선 값이다. 표면 겉면에는 쓰지 않는다(1조). */
    --console-border:         var(--console-hairline-strong);
    --console-border-soft:    var(--console-hairline);
    --console-surface-sunken: var(--console-field);
}

/* ============================================================
   페이지 골격
   ============================================================ */
.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-strong);
}

.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-radius: var(--console-radius);
    box-shadow: var(--console-card-shadow);
    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-radius: var(--console-radius);
    box-shadow: var(--console-card-shadow);
    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);
}

/* 액센트 강조 지표(크레딧 등) — 강조는 보더도 그라데이션도 아니고 저채도 워시다.
   워시를 종이에 섞어서 카드가 재질을 잃지 않게 한다. 혼합비 --clc-shade-wash 는
   라이트 13% / 다크 18% 로 지면을 따라간다. */
.clv-metric-accent {
    background: color-mix(in srgb, var(--console-accent) var(--clc-shade-wash, 13%), var(--console-surface));
}

.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-hairline-strong);
    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-hairline);
    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-field);
}

.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;
}

/* 비활성/만료 행 — 잉크 단계를 내려서 표현한다(요소 opacity 금지). */
.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: var(--clc-mist-radius-pill, 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;
}

/* 트랙은 파인 자리다. 예전 값(--console-surface-raised)은 다크에서 카드와
   같은 색이라 트랙이 통째로 사라져 있었다. */
.clv-meter-bar {
    height: 8px;
    border-radius: var(--clc-mist-radius-pill, 999px);
    background: var(--console-field);
    overflow: hidden;
}

/* 채우는 자리라 의미색 원색을 그대로 쓴다(잉크가 아니다). */
.clv-meter-fill {
    height: 100%;
    border-radius: var(--clc-mist-radius-pill, 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-hairline);
}

.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-hairline);
}

.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);
    background: var(--console-field);
    box-shadow: var(--console-well-shadow);
    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);
    background: var(--console-field);
    box-shadow: var(--console-well-shadow);
    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;
}

/* 되돌릴 수 없는 조작을 모으는 구역 — 강조는 한쪽 면 보더가 아니라 표면 워시와
   잉크가 진다(5조). 종이를 잃지 않도록 워시 10% 를 종이에 섞는다. */
.clv-danger-zone {
    background: color-mix(in srgb, var(--clc-danger) 10%, var(--console-surface));
}

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

/* 셀렉트/인풋 원시 요소 — Clevi* 컴포넌트를 못 쓰는 자리에만 사용.
   입력은 borderless 다. 깊이는 파인 배경이 만들고 호버에서 한 단 더 판다. */
.clv-input,
.clv-select {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border: 0;
    border-radius: var(--console-radius-sm);
    background: var(--console-field);
    box-shadow: var(--console-well-shadow);
    color: var(--console-text);
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.clv-input:hover:not(:disabled),
.clv-select:hover:not(:disabled) {
    background: var(--console-field-strong);
}

/* 포커스는 빛이다 — 자리 워시 + 단색 블룸. 조립된 값을 그대로 읽는다. */
.clv-input:focus,
.clv-select:focus {
    outline: none;
    background: var(--console-focus-wash);
    box-shadow: var(--console-focus-shadow), var(--console-well-shadow);
}

.clv-input:disabled,
.clv-select:disabled {
    color: var(--console-text-muted);
    cursor: not-allowed;
}

.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;
}

/* ============================================================
   피드백 배너 / 비밀값 표시
   ============================================================ */
/* 배너는 캔버스 위에 바로 놓이기도 하므로 스스로 표면이어야 한다.
   그래서 반투명 워시를 그대로 쓰지 않고 종이에 10% 로 섞는다. */
.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);
    box-shadow: var(--console-chip-shadow);
    font-size: 0.88rem;
    line-height: 1.55;
}

.clv-feedback.error {
    background: color-mix(in srgb, var(--clc-danger) 10%, var(--console-surface));
    color: var(--console-ink-danger);
}

.clv-feedback.warning {
    background: color-mix(in srgb, var(--clc-warning) 10%, var(--console-surface));
    color: var(--console-ink-warning);
}

.clv-feedback.info {
    background: color-mix(in srgb, var(--clc-info) 10%, var(--console-surface));
    color: var(--console-ink-info);
}

.clv-feedback.success {
    background: color-mix(in srgb, var(--clc-success) 10%, var(--console-surface));
    color: var(--console-ink-success);
}

/* 발급 직후 한 번만 보이는 값 — 액센트 워시를 종이에 섞은 카드. */
.clv-secret {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--console-radius);
    background: color-mix(in srgb, var(--console-accent) var(--clc-shade-wash, 13%), var(--console-surface));
    box-shadow: var(--console-card-shadow);
}

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

/* 액센트 카드 안에서는 값 상자를 한 단 띄워야 눈에 잡힌다. */
.clv-secret .clv-copy-value {
    background: var(--console-surface-raised);
}

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

/* ============================================================
   빈 상태 / 로딩 / 안내
   ============================================================ */
/* 빈 상태는 섹션 하나를 대신해 캔버스 위에 놓이므로 카드 재질을 그대로 쓴다.
   점선 보더는 1조 위반이라 뺐다. */
.clv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
    text-align: center;
    border-radius: var(--console-radius);
    background: var(--console-surface);
    box-shadow: var(--console-card-shadow);
}

.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;
    background: transparent;
    box-shadow: none;
}

.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: var(--clc-border-radius, 6px);
    background: var(--console-field);
    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-radius: var(--console-radius-sm);
    background: var(--console-field);
    box-shadow: var(--console-well-shadow);
}

.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-radius: var(--console-radius);
    background: var(--console-surface);
    box-shadow: var(--console-chip-shadow);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

/* 호버는 리프트다 — 한 단 뜬 종이 + 넓어진 그림자. 보더 색은 건드리지 않는다. */
.clv-link-card:hover {
    background: var(--console-surface-raised);
    box-shadow: var(--console-card-shadow);
    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;
    overflow-x: auto;
}

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

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

/* 선택 표시는 한 변 레일이 아니라 액센트 저채도 워시다(5조). */
.clv-tab.active {
    background: var(--console-accent-soft);
    color: var(--console-accent-strong);
}

.clv-tab:focus-visible {
    outline: none;
    box-shadow: var(--console-focus-shadow);
}

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

/* 트랙은 파인 자리, 선택된 칸은 그 위에 뜬 종이다. */
.clv-segment {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--clc-mist-radius-pill, 999px);
    background: var(--console-field);
    box-shadow: var(--console-well-shadow);
}

.clv-segment button {
    padding: 6px 14px;
    border: 0;
    border-radius: var(--clc-mist-radius-pill, 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:not(:disabled) { color: var(--console-text); }

.clv-segment button:disabled {
    color: var(--console-text-muted);
    cursor: not-allowed;
}

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

.clv-segment button:focus-visible {
    outline: none;
    box-shadow: var(--console-focus-shadow);
}

/* ============================================================
   반응형
   ============================================================ */
@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,
    .clv-input,
    .clv-select {
        transition: none;
    }

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