/* 공통 스타일 */
/*적용 **********************************/
.container .btn {
    text-decoration: none; /* a 태그 등에 적용 시 밑줄 제거 용도 */
    /* 최소 높이: Material Design 권장 높이 36dp.
       실제 터치 영역은 48dp 정도 확보하는 게 좋아요. */
    min-height: 36px;
    padding: 6px 16px; /* 가로 padding 여백 */

    /* 4dp 정도의 라운딩을 권장하기도 해요. */
    border: none;
    border-radius: 4px;

    /* 브랜드나 앱의 Primary Color를 사용 */
    background-color: #6200ee; /* Material Design 보라 계열 예시 */

    color: #ffffff;/* 기본적으로 텍스트는 흰색으로 가정 */
    vertical-align: middle;
    /* 버튼 안의 텍스트 가독성을 위해 폰트 크기 설정 */
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    /* 버튼을 모던하게 보이도록 약간의 그림자 효과 */
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;

    /* 사용자가 버튼을 누르기 편하도록 영역을 조금 넓게 잡는 것도 좋아요 */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* 단추가 수평으로 줄어서 텍스트가 짤리는 일이 없도록 min-width도 고려 */
    min-width: 64px;
}

/* Hover, Focus, Active 상태를 적절히 스타일링(시인성 강화, 접근성 개선) */
.container .btn:hover {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    background-color: #3700b3;
}

.container .btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(98, 0, 238, 0.3);
}

.container .btn:active {
    background-color: #3700b3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
}

/* 비활성화(Disabled) 상태 */
.container .btn:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
}

/***********************************/
/* 하늘색 버튼 (Sky Blue 계열) */
.container .btn-skyblue {
    background-color: #81d4fa; /* 밝은 하늘색 */
    color: #000; /* 밝은 배경에는 검정 텍스트가 대비가 좋음 */
}

.container .btn-skyblue:hover {
    background-color: #4fc3f7; /* 조금 더 짙은 톤 */
}

.container .btn-skyblue:active {
    background-color: #29b6f6;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/***********************************/
/* 연한 파랑색 버튼 (Light Blue 계열, Material Design) */
.container .btn-lightblue {
    background-color: #03a9f4; /* MD Light Blue 기본 색상 */
    color: #fff;
}

.container .btn-lightblue:hover {
    background-color: #0288d1; /* 살짝 어둡게 */
}

.container .btn-lightblue:active {
    background-color: #0277bd;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/***********************************/
/* Primary: 브랜드 대표색, 일반적으로 메인 버튼 */
.container .btn-primary {
    background-color: #3700b3;
}

.container .btn-primary:hover {
    background-color: #3700b3;
}

.container .btn-primary:active {
    background-color: #3700b3;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/***********************************/
/* Secondary: 서브 버튼 혹은 서브 기능을 나타낼 때 */
.container .btn-secondary {
    background-color: #018786; /* Material Design 틸(Teal) 계열 예시 */
}

.container .btn-secondary:hover {
    background-color: #026e6f;
}

.container .btn-secondary:active {
    background-color: #026e6f;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/***********************************/
/* Success: 주로 성공, 확인, 완료 의미를 표시 */
.container .btn-success {
    background-color: #4caf50;
}

.container .btn-success:hover {
    background-color: #388e3c;
}

.container .btn-success:active {
    background-color: #388e3c;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/***********************************/
/* Warning: 경고, 주의 등 표시 */
.container .btn-warning {
    background-color: #ffc107;
    color: #000; /* 노란색 배경이면 검정 텍스트가 명도 대비가 좋아요. */
}

.container .btn-warning:hover {
    background-color: #ffb300;
}

.container .btn-warning:active {
    background-color: #ffb300;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/***********************************/
/* Danger: 오류, 취소, 위험 등 표시 */
.container .btn-danger {
    background-color: #f44336;
}

.container .btn-danger:hover {
    background-color: #d32f2f;
}

.container .btn-danger:active {
    background-color: #d32f2f;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}