/* =========================================================
   Common Button System
   - 실제 사이트용 공용 버튼 CSS
   - 예시 CSS의 색상 구조를 ui-btn 구조에 맞게 변환
   - Color tokens:
     --c    : 기본 색상
     --ch   : hover 색상
     --ca   : active 색상
     --rgb  : rgb alpha 계산용
   - Families:
     Firm / Quiet / Status Dot / Workflow / Console
========================================================= */

:root {
    --ui-btn-radius-sm: 7px;
    --ui-btn-radius-md: 8px;
    --ui-btn-radius-lg: 10px;
    --ui-btn-radius-pill: 999px;

    --ui-btn-default-border: #cbd5e1;
    --ui-btn-muted-border: #d8e0eb;
    --ui-btn-neutral-text: #334155;
    --ui-btn-console-text: #1e293b;

    --ui-btn-transition:
            background-color 0.16s ease,
            border-color 0.16s ease,
            color 0.16s ease,
            box-shadow 0.16s ease,
            transform 0.08s ease,
            filter 0.16s ease;
}

/* =========================================================
   Base
========================================================= */

.ui-btn {
    /*
     * 예시파일과 같은 원본 색상 변수
     * inline style="--c:...; --rgb:..." 도 그대로 동작하게 하기 위함
     */
    --c: #0f766e;
    --ch: #0d6b64;
    --ca: #0b5d57;
    --rgb: 15 118 110;

    /*
     * 사이트 내부용 alias
     * 아래 family 클래스에서는 ui-btn 이름을 사용
     */
    --ui-btn-c: var(--c);
    --ui-btn-ch: var(--ch);
    --ui-btn-ca: var(--ca);
    --ui-btn-rgb: var(--rgb);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-width: 62px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--ui-btn-radius-md);
    background: #ffffff;
    color: var(--ui-btn-neutral-text);

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;

    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    word-break: keep-all;
    vertical-align: middle;
    box-sizing: border-box;

    transition: var(--ui-btn-transition);
    text-decoration: none;
}

.ui-btn > * {
    position: relative;
    z-index: 1;
}

.ui-btn:hover,
.ui-btn:focus {
    text-decoration: none;
}

.ui-btn:focus-visible {
    box-shadow: 0 0 0 3px rgb(var(--ui-btn-rgb) / 0.16);
}

.ui-btn:disabled,
.ui-btn.disabled,
.ui-btn[aria-disabled="true"] {
    opacity: 0.52;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.ui-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* =========================================================
   Ripple
   - custom-button.js가 .ui-btn-ripple span을 생성
========================================================= */

.ui-btn-ripple {
    position: absolute;
    z-index: 0;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%) scale(0);
    animation: ui-btn-ripple 0.48s ease-out;
    pointer-events: none;
}

.ui-btn-firm-outline .ui-btn-ripple,
.ui-btn-quiet-outline .ui-btn-ripple,
.ui-btn-status-outline .ui-btn-ripple,
.ui-btn-workflow-outline .ui-btn-ripple,
.ui-btn-console-outline .ui-btn-ripple {
    background: rgb(var(--ui-btn-rgb) / 0.16);
}

@keyframes ui-btn-ripple {
    to {
        transform: translate(-50%, -50%) scale(18);
        opacity: 0;
    }
}

/* =========================================================
   Color Variants
   - 색상 클래스는 원본 색상만 정의
   - 각 디자인 family가 색상을 다르게 해석
========================================================= */

.ui-btn-primary {
    --c: #0f766e;
    --ch: #0d6b64;
    --ca: #0b5d57;
    --rgb: 15 118 110;
}

.ui-btn-secondary,
.ui-btn-navy {
    --c: #1e3a8a;
    --ch: #1d4ed8;
    --ca: #1e40af;
    --rgb: 30 58 138;
}

.ui-btn-success {
    --c: #15803d;
    --ch: #166534;
    --ca: #14532d;
    --rgb: 21 128 61;
}

.ui-btn-info {
    --c: #0369a1;
    --ch: #075985;
    --ca: #0c4a6e;
    --rgb: 3 105 161;
}

.ui-btn-warning {
    --c: #b45309;
    --ch: #92400e;
    --ca: #78350f;
    --rgb: 180 83 9;
}

.ui-btn-danger {
    --c: #dc2626;
    --ch: #b91c1c;
    --ca: #991b1b;
    --rgb: 220 38 38;
}

.ui-btn-neutral {
    --c: #475569;
    --ch: #334155;
    --ca: #1e293b;
    --rgb: 71 85 105;
}

.ui-btn-dark {
    --c: #111827;
    --ch: #020617;
    --ca: #000000;
    --rgb: 17 24 39;
}

/* =========================================================
   01. Firm Compact
   - 기본 대표 액션
   - 작성 / 등록 / 저장 / 선택 적용
========================================================= */

.ui-btn-firm {
    border-color: var(--ui-btn-c);
    background: var(--ui-btn-c);
    color: #ffffff;
}

.ui-btn-firm:hover {
    border-color: var(--ui-btn-ch);
    background: var(--ui-btn-ch);
    color: #ffffff;
    box-shadow: 0 7px 15px rgb(var(--ui-btn-rgb) / 0.16);
}

.ui-btn-firm:active,
.ui-btn-firm.is-active {
    border-color: var(--ui-btn-ca);
    background: var(--ui-btn-ca);
    color: #ffffff;
    transform: translateY(1px);
    box-shadow: none;
}

.ui-btn-firm-outline {
    border-color: var(--ui-btn-default-border);
    background: #ffffff;
    color: var(--ui-btn-c);
}

.ui-btn-firm-outline:hover {
    border-color: var(--ui-btn-c);
    background: rgb(var(--ui-btn-rgb) / 0.07);
    color: var(--ui-btn-c);
}

.ui-btn-firm-outline:active,
.ui-btn-firm-outline.is-active {
    border-color: var(--ui-btn-c);
    background: rgb(var(--ui-btn-rgb) / 0.12);
    color: var(--ui-btn-ca);
    transform: translateY(1px);
}

/* =========================================================
   05. Quiet Surface
   - 연한 면으로 구분하는 보조 액션
   - 닫기 / 취소 / 선택 / 검색 / 필터
========================================================= */

.ui-btn-quiet,
.ui-btn-quiet-outline {
    border-radius: var(--ui-btn-radius-lg);
}

.ui-btn-quiet {
    border-color: rgb(var(--ui-btn-rgb) / 0.18);
    background: rgb(var(--ui-btn-rgb) / 0.10);
    color: var(--ui-btn-c);
}

.ui-btn-quiet:hover {
    border-color: rgb(var(--ui-btn-rgb) / 0.25);
    background: rgb(var(--ui-btn-rgb) / 0.15);
    color: var(--ui-btn-c);
    box-shadow: 0 6px 16px rgb(var(--ui-btn-rgb) / 0.08);
}

.ui-btn-quiet:active,
.ui-btn-quiet.is-active {
    border-color: rgb(var(--ui-btn-rgb) / 0.25);
    background: rgb(var(--ui-btn-rgb) / 0.20);
    color: var(--ui-btn-ca);
    transform: translateY(1px);
    box-shadow: none;
}

.ui-btn-quiet-outline {
    border-color: var(--ui-btn-muted-border);
    background: #ffffff;
    color: var(--ui-btn-neutral-text);
}

.ui-btn-quiet-outline:hover {
    border-color: rgb(var(--ui-btn-rgb) / 0.30);
    background: rgb(var(--ui-btn-rgb) / 0.06);
    color: var(--ui-btn-c);
}

.ui-btn-quiet-outline:active,
.ui-btn-quiet-outline.is-active {
    border-color: rgb(var(--ui-btn-rgb) / 0.30);
    background: rgb(var(--ui-btn-rgb) / 0.11);
    color: var(--ui-btn-ca);
    transform: translateY(1px);
    box-shadow: none;
}

/* =========================================================
   07. Status Dot
   - 상태 변경 / 결재 처리 / 회의록 상태 액션
========================================================= */

.ui-btn-status,
.ui-btn-status-outline {
    justify-content: flex-start;
    padding-left: 11px;
    border-radius: 9px;
}

.ui-btn-status::before,
.ui-btn-status-outline::before {
    content: "";
    position: relative;
    z-index: 1;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 3px rgb(var(--ui-btn-rgb) / 0.12);
}

.ui-btn-status {
    border-color: var(--ui-btn-c);
    background: var(--ui-btn-c);
    color: #ffffff;
}

.ui-btn-status::before {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.ui-btn-status:hover {
    border-color: var(--ui-btn-ch);
    background: var(--ui-btn-ch);
    color: #ffffff;
    box-shadow: 0 7px 16px rgb(var(--ui-btn-rgb) / 0.14);
}

.ui-btn-status:active,
.ui-btn-status.is-active {
    border-color: var(--ui-btn-ca);
    background: var(--ui-btn-ca);
    color: #ffffff;
    transform: translateY(1px);
    box-shadow: none;
}

.ui-btn-status-outline {
    border-color: #d5dde8;
    background: #ffffff;
    color: var(--ui-btn-c);
}

.ui-btn-status-outline:hover {
    border-color: rgb(var(--ui-btn-rgb) / 0.60);
    background: rgb(var(--ui-btn-rgb) / 0.06);
    color: var(--ui-btn-c);
}

.ui-btn-status-outline:active,
.ui-btn-status-outline.is-active {
    border-color: rgb(var(--ui-btn-rgb) / 0.60);
    background: rgb(var(--ui-btn-rgb) / 0.11);
    color: var(--ui-btn-ca);
    transform: translateY(1px);
}

/* =========================================================
   09. Rounded Workflow
   - 업무 흐름 액션
   - 내보내기 / 불러오기 / 결재요청 / 재상신 / 다음 단계
========================================================= */

.ui-btn-workflow,
.ui-btn-workflow-outline {
    border-radius: var(--ui-btn-radius-pill);
    padding-left: 15px;
    padding-right: 15px;
}

.ui-btn-workflow {
    border-color: var(--ui-btn-c);
    background: var(--ui-btn-c);
    color: #ffffff;
}

.ui-btn-workflow:hover {
    border-color: var(--ui-btn-ch);
    background: var(--ui-btn-ch);
    color: #ffffff;
    box-shadow: 0 8px 18px rgb(var(--ui-btn-rgb) / 0.16);
}

.ui-btn-workflow:active,
.ui-btn-workflow.is-active {
    border-color: var(--ui-btn-ca);
    background: var(--ui-btn-ca);
    color: #ffffff;
    transform: scale(0.98);
    box-shadow: none;
}

.ui-btn-workflow-outline {
    border-color: rgb(var(--ui-btn-rgb) / 0.45);
    background: #ffffff;
    color: var(--ui-btn-c);
}

.ui-btn-workflow-outline:hover {
    border-color: var(--ui-btn-c);
    background: rgb(var(--ui-btn-rgb) / 0.08);
    color: var(--ui-btn-c);
}

.ui-btn-workflow-outline:active,
.ui-btn-workflow-outline.is-active {
    border-color: var(--ui-btn-c);
    background: rgb(var(--ui-btn-rgb) / 0.14);
    color: var(--ui-btn-ca);
    transform: scale(0.98);
}

/* =========================================================
   10. System Console
   - 예시파일 System Console을 실제 ui-btn 구조로 변환
   - hover outline이 핵심
   - 실제 사이트에서는 active/focus 상태에도 outline을 유지해야 함
========================================================= */

.ui-btn-console,
.ui-btn-console-outline {
    height: 34px;
    border-radius: 6px;
    letter-spacing: 0.01em;
}

/* Filled 기본 */
.ui-btn-console {
    border-color: var(--ui-btn-ca);
    background: var(--ui-btn-c);
    color: #ffffff;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Filled hover / focus-hover */
.ui-btn.ui-btn-console:hover,
.ui-btn.ui-btn-console:focus:hover,
.ui-btn.ui-btn-console:focus-visible,
.ui-btn.ui-btn-console.active:hover,
.ui-btn.ui-btn-console.is-active:hover {
    border-color: var(--ui-btn-ca);
    background: var(--ui-btn-ch);
    color: #ffffff;
    outline: 2px solid rgb(var(--ui-btn-rgb) / 0.14);
    outline-offset: 1px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Filled active */
.ui-btn.ui-btn-console:active,
.ui-btn.ui-btn-console:hover:active,
.ui-btn.ui-btn-console:focus:active,
.ui-btn.ui-btn-console:focus-visible:active,
.ui-btn.ui-btn-console.active:hover:active,
.ui-btn.ui-btn-console.is-active:hover:active {
    border-color: var(--ui-btn-ca);
    background: var(--ui-btn-ca);
    color: #ffffff;
    transform: translateY(1px);
    outline: 2px solid rgb(var(--ui-btn-rgb) / 0.14);
    outline-offset: 1px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.18);
}

/* Outline 기본 */
.ui-btn-console-outline {
    border-color: #b9c4d2;
    background: #ffffff;
    color: #1e293b;
}

/* Outline hover / focus-hover */
.ui-btn.ui-btn-console-outline:hover,
.ui-btn.ui-btn-console-outline:focus:hover,
.ui-btn.ui-btn-console-outline:focus-visible,
.ui-btn.ui-btn-console-outline.active:hover,
.ui-btn.ui-btn-console-outline.is-active:hover {
    border-color: var(--ui-btn-c);
    background: #ffffff;
    color: var(--ui-btn-c);
    outline: 2px solid rgb(var(--ui-btn-rgb) / 0.08);
    outline-offset: 1px;
    box-shadow: none;
}

/* Outline active */
.ui-btn.ui-btn-console-outline:active,
.ui-btn.ui-btn-console-outline:hover:active,
.ui-btn.ui-btn-console-outline:focus:active,
.ui-btn.ui-btn-console-outline:focus-visible:active,
.ui-btn.ui-btn-console-outline.active:hover:active,
.ui-btn.ui-btn-console-outline.is-active:hover:active {
    border-color: var(--ui-btn-c);
    background: rgb(var(--ui-btn-rgb) / 0.09);
    color: var(--ui-btn-c);
    transform: translateY(1px);
    outline: 2px solid rgb(var(--ui-btn-rgb) / 0.08);
    outline-offset: 1px;
    box-shadow: none;
}

/*
 * 실제 사이트 보완
 * - 예시에는 focus 처리가 없지만, 실제 버튼은 클릭 후 focus가 남을 수 있음
 * - hover 동작을 방해하지 않도록 focus-visible만 최소 적용
 */
.ui-btn-console:focus-visible {
    outline: 2px solid rgb(var(--ui-btn-rgb) / 0.14);
    outline-offset: 1px;
    box-shadow: none;
}

.ui-btn-console-outline:focus-visible {
    border-color: var(--ui-btn-c);
    color: var(--ui-btn-c);
    outline: 2px solid rgb(var(--ui-btn-rgb) / 0.08);
    outline-offset: 1px;
    box-shadow: none;
}

/*
 * popup/toggle에서 .active 클래스를 쓰는 경우를 위한 최소 보정
 * - .active 상태 자체에는 outline을 주지 않음
 * - hover 중일 때만 예시처럼 outline 표시
 */
.ui-btn-console.active:hover {
    background: var(--ui-btn-ch);
    color: #ffffff;
    outline: 2px solid rgb(var(--ui-btn-rgb) / 0.14);
    outline-offset: 1px;
}

.ui-btn-console-outline.active:hover {
    border-color: var(--ui-btn-c);
    background: #ffffff;
    color: var(--ui-btn-c);
    outline: 2px solid rgb(var(--ui-btn-rgb) / 0.08);
    outline-offset: 1px;
}

/* =========================================================
   Utility
========================================================= */

.ui-btn .btn-label,
.ui-btn .btn-code {
    position: relative;
    z-index: 1;
}

.ui-btn .btn-code {
    opacity: 0.74;
    font-size: 10.5px;
    font-weight: 700;
}

.ui-btn-no-min {
    min-width: 0;
}

.ui-btn-nowrap {
    white-space: nowrap;
}

/* =========================================================
   Size Variants
========================================================= */
.ui-btn-lg {
    min-width: 82px;
    height: 42px;
    padding: 0 16px;
    border-radius: var(--ui-btn-radius-lg);
    font-size: 14px;
    gap: 7px;
}

.ui-btn-md {
    min-width: 68px;
    height: 37px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 13px;
}

.ui-btn-sm {
    min-width: 58px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--ui-btn-radius-md);
    font-size: 12px;
}

.ui-btn-xs {
    min-width: 48px;
    height: 27px;
    padding: 0 9px;
    border-radius: var(--ui-btn-radius-sm);
    font-size: 11px;
    gap: 4px;
}

.ui-btn-block {
    width: 100%;
}

.ui-btn-icon {
    min-width: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    /* 아이콘 버튼은 정사각 고정 크기다.
       flex 컨테이너(테이블 액션 셀 등) 안에서 좁아지면 찌그러지므로 축소를 막는다. */
    flex-shrink: 0;
}

.ui-btn-icon.ui-btn-xs {
    width: 28px;
    height: 28px;
}

.ui-btn-icon.ui-btn-sm {
    width: 32px;
    height: 32px;
}

.ui-btn-icon.ui-btn-md {
    width: 36px;
    height: 36px;
}

.ui-btn-icon.ui-btn-lg {
    width: 42px;
    height: 42px;
}