.design-system-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-4);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-sizing: border-box;
}

.design-system-btn:disabled {
    cursor: not-allowed;
}

.design-system-btn.variant-naver {
    background-color: #00DE5A;
    border: 1px solid #00DE5A;
    color: var(--Base-Common-white);
    width: 100%;
}

.design-system-btn.size-xl { height: var(--px-52); padding: 0 var(--px-16); min-width: 86px;}
.design-system-btn.size-xl .btn-icon { font-size: var(--px-24); }
.design-system-btn.icon-only.size-xl .btn-icon { font-size: var(--px-24); }

.design-system-btn.size-l  { height: var(--px-48); padding: 0 var(--px-16); min-width: 86px;}
.design-system-btn.size-l .btn-icon { font-size: var(--px-24); }
.design-system-btn.icon-only.size-l .btn-icon { font-size: var(--px-22); }

.design-system-btn.size-m  { height: var(--px-38); padding: 0 var(--px-10); min-width: 67px;}
.design-system-btn.size-m .btn-icon { font-size: var(--px-16); }
.design-system-btn.icon-only.size-m .btn-icon { font-size: var(--px-18); }

.design-system-btn.size-s  { height: var(--px-32); padding: 0 var(--px-8); min-width: 56px;}
.design-system-btn.size-s .btn-icon { font-size: var(--px-16); }
.design-system-btn.icon-only.size-s .btn-icon { font-size: var(--px-16); }

.design-system-btn.radius-8   { border-radius: 8px; }
.design-system-btn.radius-8.size-m,
.design-system-btn.radius-8.size-s { 
    border-radius: 4px; 
}
.design-system-btn.radius-100 { border-radius: 100px;}
.design-system-btn.radius-2   { border-radius: 2px;}

.design-system-btn.icon-only {
    padding: 0;
    width: var(--btn-height);
}

.design-system-btn.variant-fill {
    background-color: var(--color-main);
    color: var(--Base-Common-white);
}
.design-system-btn.variant-fill .btn-icon {
    color: var(--Base-Common-white);
}
.design-system-btn.variant-fill-press {
    background-color: var(--Base-Basic-gray-basic-gray-700);
    color: var(--Base-Common-white);
}
.design-system-btn.variant-fill-press .btn-icon {
    color: var(--Base-Common-white);
}
.design-system-btn.variant-fill-inactive {
    background-color: var(--Components-basic-gray-color-background-color-bg-border);
    color: var(--Base-Common-white);
}
.design-system-btn.variant-fill-inactive .btn-icon {
    color: var(--Base-Common-white);
}
.design-system-btn.variant-weak-fill {
    background-color: var(--Base-Basic-gray-basic-gray-300);
    color: var(--Components-basic-gray-color-text-color-text-strong);
}
.design-system-btn.variant-weak-fill .btn-icon {
    color: var(--Components-basic-gray-color-text-color-text-strong);
}
.design-system-btn.variant-stroke {
    background-color: var(--Components-basic-gray-color-background-color-bg-white);
    color: var(--Components-basic-gray-color-text-color-text-strong);
    border: 1px solid var(--Components-basic-gray-color-border-color-border-secondary);
}
.design-system-btn.variant-stroke .btn-icon {
    color: var(--Components-basic-gray-color-text-color-text-strong);
}
.design-system-btn.variant-stroke-press {
    background-color: var(--Components-basic-gray-color-background-color-bg-border);
    color: var(--Components-basic-gray-color-text-color-text-strong);
    border: 1px solid var(--Components-basic-gray-color-border-color-border-secondary);
}
.design-system-btn.variant-stroke-press .btn-icon {
    color: var(--Components-basic-gray-color-text-color-text-strong);
}
.design-system-btn.variant-stroke-inactive {
    background-color: var(--Components-basic-gray-color-background-color-bg-white);
    color: var(--Base-Basic-gray-basic-gray-250);
    border: 1px solid var(--Components-basic-gray-color-border-color-border-tertiary);
}
.design-system-btn.variant-stroke-inactive .btn-icon {
    color: var(--Base-Basic-gray-basic-gray-250);
}
.design-system-btn.variant-light {
    background-color: var(--Components-basic-gray-color-background-color-bg-white);
    color: var(--Components-basic-gray-color-text-color-text-strong);
}
.design-system-btn.variant-light .btn-icon {
    color: var(--Components-basic-gray-color-text-color-text-strong);
}
.design-system-btn.variant-weak-light {
    background: var(--Base-Opacity-White-opacity-white-35);
    color: var(--Base-Common-white);
}
.design-system-btn.variant-weak-light .btn-icon {
    color: var(--Base-Common-white);
}
.design-system-btn.variant-danger {
    background-color: var(--Base-Opacity-White-opacity-white-35);
    color: var(--Base-Common-white);
}
.design-system-btn.variant-danger .btn-icon {
    color: var(--Base-Common-white);
}
.design-system-btn.variant-danger-press {
    background-color: var(--Base-Red-red-700);
    color: var(--Base-Common-white);
}
.design-system-btn.variant-danger-press .btn-icon {
    color: var(--Base-Common-white);
}
.design-system-btn.variant-weak-danger {
    background-color: var(--Components-Warning-colors-warning-background);
    color: var(--Components-Warning-colors-warning-text);
}
.design-system-btn.variant-weak-danger .btn-icon {
    color: var(--Components-Warning-colors-warning-text);
}
.design-system-btn.variant-weak-danger {
    background-color: var(--Components-basic-gray-color-background-color-bg-white);
    color: var(--Components-Warning-colors-warning-text);
    border: 1px solid var(--Components-Warning-colors-warning-text);
}
.design-system-btn.variant-weak-danger .btn-icon {
    color: var(--Components-Warning-colors-warning-text);
}
.design-system-btn.variant-stroke-danger {
    background-color: var(--Components-basic-gray-color-background-color-bg-white);
    color: var(--Components-Warning-colors-warning-text);
    border: 1px solid var(--Components-Warning-colors-warning-text);
}
.design-system-btn.variant-stroke-danger-press {
    background-color: var(--Components-Warning-colors-warning-background);
    color: var(--Components-Warning-colors-warning-text);
    border: 1px solid var(--Components-Warning-colors-warning-text);
}
.design-system-btn.variant-stroke-danger-press .btn-icon {
    color: var(--Components-Warning-colors-warning-text);
}