/* ==========================================================
   물타세 브랜드 테마
   - 부트스트랩 기본 색상(primary/success/warning 등) 대신
     사이트 고유 팔레트를 별도 유틸리티 클래스로 관리합니다.
   - 기존 페이지의 btn-outline-primary 등은 점진적으로
     아래 btn-brand / btn-outline-brand 로 교체해나갑니다.
   ========================================================== */

:root {
    --brand-navy: #16324F;       /* 헤더/푸터 다크 톤 */
    --brand-navy-dark: #0E1F33;  /* 네이비 hover/active */
    --brand-teal: #0E9594;       /* 메인 포인트 컬러 */
    --brand-teal-dark: #0B726E;  /* 틸 hover/active */
    --brand-teal-rgb: 14, 149, 148;
    --brand-amber: #F2A93B;      /* 강조/경고용 포인트 (가끔만 사용) */
    --brand-bg: #F7F9FB;         /* 페이지 배경 */
    --brand-text-muted: #5B6B7A;
}

/* ---------- 레이아웃 공통 (기존 layout.html 인라인 style 이관) ---------- */
body {
    word-break: keep-all;
    -webkit-tap-highlight-color: transparent;
    padding-top: 75px;
    background-color: var(--brand-bg) !important;
}

input, select, textarea {
    font-size: 16px !important;
}

.navbar-collapse {
    background-color: var(--brand-navy-dark);
    padding: 15px;
    border-radius: 1rem;
    margin-top: 10px;
}

@media (max-width: 576px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .navbar .btn-sm.rounded-pill {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

    .navbar-brand {
        font-size: 1.1rem;
    }

    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .btn-group > .btn {
        border-radius: 0.5rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .input-group-text {
        font-size: 0.9rem !important;
        padding: 0 10px !important;
    }

    body {
        padding-top: 65px;
    }
}

@media (max-width: 768px) {
    .card-body {
        padding: 1.25rem !important;
    }
}

@media (min-width: 992px) {
    .navbar-collapse {
        background-color: transparent;
        padding: 0;
        margin-top: 0;
    }
}

.navbar-toggler {
    padding: 8px 10px;
    border: none;
}

.hover-bg-opacity-20:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px);
}

/* ---------- 버튼 ---------- */
.btn-brand {
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
    color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-teal-dark);
    border-color: var(--brand-teal-dark);
    color: #fff;
}

.btn-outline-brand {
    color: var(--brand-teal);
    border-color: var(--brand-teal);
    background-color: transparent;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
    color: #fff;
}

/* KRW/COIN, 월/분기/연 같은 btn-check 라디오 토글 버튼의 선택(checked) 상태.
   부트스트랩은 이 규칙을 .btn-outline-primary 등 자체 클래스에만 정의해두기 때문에,
   커스텀 클래스로 바꾸면 별도로 지정해줘야 선택 시 색이 채워집니다. */
.btn-check:checked + .btn-outline-brand,
.btn-check:active + .btn-outline-brand,
.btn-outline-brand:active,
.btn-outline-brand.active {
    color: #fff;
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
}

/* ---------- 텍스트/배경/테두리 유틸리티 ---------- */
.text-brand {
    color: var(--brand-teal) !important;
}

.bg-brand {
    background-color: var(--brand-teal) !important;
}

.border-brand {
    border-color: var(--brand-teal) !important;
}

.bg-brand-navy {
    background-color: var(--brand-navy) !important;
}

.bg-brand-subtle {
    background-color: rgba(var(--brand-teal-rgb), 0.08) !important;
}

.badge-brand {
    background-color: rgba(var(--brand-teal-rgb), 0.12);
    color: var(--brand-teal-dark);
}

/* ---------- 네비게이션 바 ---------- */
.navbar .btn-outline-light:hover {
    border-color: var(--brand-teal) !important;
    background-color: rgba(var(--brand-teal-rgb), 0.15) !important;
}

/* ---------- 푸터 ---------- */
footer a:hover {
    color: var(--brand-teal) !important;
}