/* ===== 버튼 ===== */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 0;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.2!important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
    user-select: none !important;
}

.btn:active {
    /* 색상은 color.css에서 관리 */
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 버튼 사이즈 */
.btn-sm {
    min-height: 32px;
    font-size: 0.95rem;
    padding: 0 12px;
    border-radius: 0px !important;
}

.btn-lg {
    min-height: 48px;
    font-size: 1.1rem;
    padding: 0 28px;
}

/* 버튼 모양 */
.btn-round {
    border-radius: 9999px !important;
}

.btn-outline {
    background: transparent;
    border:  var(--border-color) 1.5px solid;
}

.btn-outline:hover,
.btn-outline:focus-visible {
    background-color: #f1f3f4;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
    box-shadow: none !important;
    outline: none !important;
}

.btn-white {
    width: 20%;
    min-width: 120px;
    height: 6vh;
    border: 1px solid #1D1D1D;
    color: #1D1D1D;
    background: #fff;
}

.btn-white:hover {
    background: #f3f4f6;
    transition: background 0.3s ease;
}

.btn-dark {
    width: 20%;
    min-width: 120px;
    height: 6vh;
    color: #fff;
    background: #1D1D1D;
}

.btn-dark:hover {
    background: #333333;
    transition: background 0.3s ease;
}

.save-btn {
    min-width: 90px !important;
    min-height: 46px !important;
    max-width: 90px !important;
    max-height: 46px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    padding: 0 15px !important;
}

.remove-btn {
    min-width: 90px !important;
    min-height: 46px !important;
    max-width: 90px !important;
    max-height: 46px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    padding: 0 15px !important;
    border: 1px solid #E53754 !important;
    color: #E53754;
}

.remove-btn:hover {
    background: #F9D6DD;
}

.cancel-btn {
    min-width: 90px !important;
    min-height: 46px !important;
    max-width: 90px !important;
    max-height: 46px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    padding: 0 15px !important;
    border: 1px solid #DEDEDE !important;
    color: #878787;
}

.cancel-btn:hover {
    background: #F5F5F5;
}

.profile-change-btn {
    background: #6ABBE7 0% 0% no-repeat padding-box;
    box-shadow: 0px 8px 12px #6ABBE773;
    border-radius: 16px !important;
    min-width: 185px !important;
    min-height: 52px !important;
    color: #FFFFFF;
}

.profile-change-btn:hover {
    background: #4A8BD1;
    box-shadow: 0px 8px 12px #4A8BD173;
    cursor: pointer;
    color: #FFFFFF;
}

.menu-btn:hover {
    background: #DEF3FF;
    border-radius: 16px;
    color: #2C73DE;
    cursor: pointer;
    text-decoration: none;
}

.menu-active {
    background: #DEF3FF;
    border-radius: 16px;
    font-weight: 600;
}

.menu-active p {
    color: #2C73DE;
}

.secession-btn:hover {
    background: #F9D6DD;
    border-radius: 16px;
    cursor: pointer;
    text-decoration: none;
}

.secession-active {
    background: #F9D6DD;
    border-radius: 16px;
}

.custom-arrow-btn {
    width: 28px;
    height: 22px;
    padding: 0;
    margin: 0 2px;
    color: #666;
    font-size: 18px;
    line-height: 1;
    border: none;
    background: none;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.custom-arrow-btn:hover {
    color: #222;
    background: none;
}

.btn-blue {
    background: #1D9DFF;
    min-height: 52px !important;
    max-height: 52px;
    border-radius: 14px !important;
    color: white;
}

.btn-blue:hover {
    cursor: pointer;
    background: #0d8de1;
}

.btn-green {
    background: #2DBB9E;
    border-radius: 14px !important;
    color: white;
    min-height: 50px !important;
    padding: 0 !important;
}

.btn-green:hover {
    cursor: pointer;
    background: #249d85;
}

.btn-yellow {
    background: #E9C54D;
    border-radius: 14px !important;
    color: white;
    min-height: 50px !important;
    padding: 0 !important;
}

.btn-yellow:hover {
    cursor: pointer;
    background: #c9a43e;
}

.btn-gray {
    background: #BFBFBF;
    border-radius: 14px !important;
    color: white;
    min-height: 50px !important;
    padding: 0 !important;
}

.btn-gray:hover {
    cursor: pointer;
    background: #a6a6a6;
}

.btn-light-white {
    background: #F7F7F8;
    border-radius: 16px !important;
    color: #878787;
    font-weight: 600 !important;
}

.btn-pure-white {
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 16px !important;
    color: #1D1D1D;
    font-weight: 600 !important;
}

.btn-pure-white:hover {
    cursor: pointer;
    background: #F5F5F5;
}

.btn-light-white:hover {
    cursor: pointer;
    background: #EDEDED;
}

.dark-blue-active {
    background: #6ABBE7 0% 0% no-repeat padding-box;
    box-shadow: 0px 8px 12px #6ABBE773;
    color: #FFFFFF;
}

.dark-blue-active:hover {
    background: #4A8BD1;
    box-shadow: 0px 8px 12px #4A8BD173;
    cursor: pointer;
    color: #FFFFFF !important;
}

.profile-change-btn p, .dark-blue-active p, .btn-green p, .btn-yellow p, .btn-gray p {
    color: #FFFFFF !important;
}

.purple-btn {
    background: #667EEA 0% 0% no-repeat padding-box;
    box-shadow: 0px 8px 12px #667EEA29;
    border-radius: 14px;
}

.purple-btn:hover {
    background: #5A67D8;
    box-shadow: 0px 8px 12px #5A67D829;
    cursor: pointer;
}

.light-gray-btn {
    background: #F5F7FA 0% 0% no-repeat padding-box;
    border: 1px solid #E8EAED;
    border-radius: 14px;
    color: #878787;
}

.light-gray-btn:hover {
    background: #EDEEF0;
    cursor: pointer;
}

.purple-active {
    background: #667EEA 0% 0% no-repeat padding-box;
    box-shadow: 0px 8px 12px #667EEA29;
    border-radius: 14px;
    color: #FFFFFF;
}

.purple-active:hover {
    background: #5A67D8;
    box-shadow: 0px 8px 12px #5A67D829;
    cursor: pointer;
    color: #FFFFFF;
}

.min-btn {
    min-width: 180px;
    min-height: 52px;
}