/* Bootstrap 위에 얹는 "최소 전역 규칙"만 둔다 */

/* ── 브랜드 토큰 ─────────────────────────────────────────────────
   대표색과 그 근거는 docs/features/brand.md 가 정본이다.
   ⚠️ 부트스트랩을 CDN 컴파일본으로 받으므로(base.html) --bs-primary 만으로는
   .btn-primary · .table-primary 가 안 바뀐다 — 그 규칙들이 파랑을 리터럴로 물고 있다.
   아래 파생색은 부트스트랩이 대표색에서 뽑는 비율(어둡게 15/20/25%,
   흰색에 섞기 50/60/80%)을 그대로 적용한 값이라 기본 테마와 같은 모양이 나온다.
   ⚠️ 부트스트랩 버전을 올리면 아래 선택자 목록을 실제 CSS와 다시 대조할 것. */
:root {
    --bn-primary:            #1B5FA8;
    --bn-primary-rgb:        27, 95, 168;
    --bn-primary-hover:      #17518F;   /* 15% 어둡게 — 버튼에 마우스를 올렸을 때 */
    --bn-primary-active:     #164C86;   /* 20% — 버튼을 누른 동안 · 링크 hover */
    --bn-primary-active-bd:  #14477E;   /* 25% — 누른 버튼의 테두리 */
    --bn-primary-ring-rgb:   61, 119, 181;  /* 15% 밝게 — 채운 버튼의 포커스 링 */
    --bn-primary-soft:       #8DAFD4;   /* 50% 밝게 — 입력칸 포커스 테두리 */
    --bn-primary-softer:     #A4BFDC;   /* 60% — border-primary-subtle */
    --bn-primary-tint:       #D1DFEE;   /* 80% — 재무제표 합계 행 바탕 */
    --bn-primary-tint-bd:    #A7B2BE;   /* 합계 행의 테두리 */
    --bn-primary-tint-hover: #C1CEDC;   /* 합계 행에 마우스를 올렸을 때 */

    /* 변수로 도는 것들은 여기서 끝난다
       (.text-primary · .text-bg-primary · .border-primary-subtle · 링크) */
    --bs-primary:               var(--bn-primary);
    --bs-primary-rgb:           var(--bn-primary-rgb);
    --bs-primary-border-subtle: var(--bn-primary-softer);
    --bs-link-color:            var(--bn-primary);
    --bs-link-color-rgb:        var(--bn-primary-rgb);
    --bs-link-hover-color:      var(--bn-primary-active);
}

/* 리터럴이 박혀 있어 따로 덮어야 하는 것들 */
.btn-primary {
    --bs-btn-bg:                    var(--bn-primary);
    --bs-btn-border-color:          var(--bn-primary);
    --bs-btn-hover-bg:              var(--bn-primary-hover);
    --bs-btn-hover-border-color:    var(--bn-primary-active);
    --bs-btn-active-bg:             var(--bn-primary-active);
    --bs-btn-active-border-color:   var(--bn-primary-active-bd);
    --bs-btn-disabled-bg:           var(--bn-primary);
    --bs-btn-disabled-border-color: var(--bn-primary);
    --bs-btn-focus-shadow-rgb:      var(--bn-primary-ring-rgb);
}

.btn-outline-primary {
    --bs-btn-color:                 var(--bn-primary);
    --bs-btn-border-color:          var(--bn-primary);
    --bs-btn-hover-bg:              var(--bn-primary);
    --bs-btn-hover-border-color:    var(--bn-primary);
    --bs-btn-active-bg:             var(--bn-primary);
    --bs-btn-active-border-color:   var(--bn-primary);
    --bs-btn-disabled-color:        var(--bn-primary);
    --bs-btn-disabled-border-color: var(--bn-primary);
    --bs-btn-focus-shadow-rgb:      var(--bn-primary-rgb);
}

/* 재무제표 합계 행. 표에 table-hover 가 걸려 있어 hover 색까지 덮는다
   (줄무늬·table-active 는 이 저장소가 안 쓰므로 두지 않는다) */
.table-primary {
    --bs-table-bg:           var(--bn-primary-tint);
    --bs-table-border-color: var(--bn-primary-tint-bd);
    --bs-table-hover-bg:     var(--bn-primary-tint-hover);
}

/* 예산 진행 막대. 색 없는 기본 막대가 대표색이다(초과=빨강, 수익=초록은 따로 붙는다) */
.progress {
    --bs-progress-bar-bg: var(--bn-primary);
}

/* 입력칸에 커서가 갔을 때의 테두리와 링 */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bn-primary-soft);
    box-shadow: 0 0 0 0.25rem rgba(var(--bn-primary-rgb), 0.25);
}

/* 체크된 체크박스·라디오·스위치 */
.form-check-input:checked {
    background-color: var(--bn-primary);
    border-color: var(--bn-primary);
}

/* 스위치의 손잡이. ⚠️ url() 안에는 변수를 못 쓴다 — 여기만 값을 직접 적으며,
   --bn-primary-soft 와 같은 색이어야 한다(%23 은 # 이다) */
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238DAFD4'/%3e%3c/svg%3e");
}

/* 사이드바 메뉴에 키보드로 왔을 때의 링 */
.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--bn-primary-rgb), 0.25);
}

/* 사이드바 닫기(×) 버튼의 포커스 링 */
.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(var(--bn-primary-rgb), 0.25);
}

/* 아이콘/로고 같은 아주 공통적인 것만 */
.contact-icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

/* 일정 달력 칸의 일정 제목 (Bootstrap엔 화면 폭에 따라 달라지는 글자 크기 유틸이 없다)
   좁은 화면에선 칸 폭이 50px 남짓이라 기본 글자로는 두 자밖에 안 보인다 — 제목만 줄여
   서너 자가 보이게 한다. 열은 요일 7개로 고정이라 칸을 넓힐 방법은 없다. */
.calendar-event-title {
    font-size: 0.65rem;
    line-height: 1.25;
}

/* 여러 날 일정의 띠. 크기·글자는 .calendar-event-title과 같이 써서 맞추고(둘의 높이가
   1px이라도 다르면 층이 어긋난다) 여기선 색과 모서리만 정한다. 모서리 죽이기는
   Bootstrap의 rounded-start-0/rounded-end-0이 한다.
   ⚠️ 파랑을 쓰지 말 것 — 토요일 숫자와 오늘 배지가 이미 그 색이라 "무슨 뜻인 색"이 셋이 된다.
   일정별 색은 여전히 없다(결정 4). */
.calendar-bar {
    background-color: #e9ecef;
}

/* 그 층이 빈 칸의 자리지킴이. 투명하지만 자리는 그대로 차지한다 —
   지우면 아래 띠가 위로 올라와 띠가 계단처럼 꺾인다. */
.calendar-bar-empty {
    background-color: transparent;
}

/* 달력 칸 최소 높이 — 지우면 주마다 칸 높이가 들쭉날쭉해진다.
   일정이 없는 칸은 날짜 숫자 한 줄(약 29px)뿐이고 3개인 칸은 네 줄(70~100px)이라,
   받쳐주는 값이 없으면 한 달 안에서 주마다 키가 다르다. 옛 모바일 레이아웃이
   빈 칸에  를 넣어 받치던 자리이며, 그리드를 한 벌로 합칠 때 그게 없어졌다.
   칸을 누르는 자리이기도 하므로 td가 아니라 앵커에 준다(높이가 곧 터치 영역).
   값은 "빈 칸과 꽉 찬 칸의 차이가 눈에 덜 띄는 선"과 "6주가 한 화면을 넘겨
   스크롤이 길어지지 않는 선"의 타협이다 — 숫자 하나만 조절하면 된다. */
.calendar-day {
    min-height: 3.5rem;
}

@media (min-width: 768px) {
    .calendar-event-title {
        font-size: 0.875rem;
    }

    /* 넓은 화면은 제목 글자가 커서(0.875rem) 꽉 찬 칸이 80px을 넘는다 */
    .calendar-day {
        min-height: 4.5rem;
    }
}

/* 소셜 로그인 버튼 (Google/Kakao 브랜드 색 — Bootstrap 미제공, 전역 유지)
   provider_list.html 스니펫이 login/signup/socialaccount 페이지에서 공유 */
.social-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    box-sizing: border-box;
}

.social-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Google 버튼 */
.google-btn {
    background: #ffffff;
    color: #3c4043 !important;    /* Google standard gray */
    border: 1px solid #dadce0;
}
.google-btn:hover {
    background: #f7f7f7;
}

/* Kakao 버튼 */
.kakao-btn {
    background: #FEE500;
    color: #1a1a1a !important;    /* Kakao black */
    border: none;
}
.kakao-btn:hover {
    background: #f2d600;
}

/* 예산 모드 '기타' 펼치기 토글 — 부트스트랩이 갱신하는 aria-expanded 만으로 방향을 뒤집는다. */
.budget-other-toggle::after { content: " \25BE"; }              /* ▾ */
.budget-other-toggle[aria-expanded="true"]::after { content: " \25B4"; }  /* ▴ */

/* 분개 미리보기 — 증감 칸을 바꾸면 차·대변이 뒤집히는 것을 봐야 한다.
   폰에서는 금액 칸 위에 칸이 여럿 쌓여 있어 스크롤로는 표와 금액 칸을 함께 보이게
   할 수 없다(앱은 이 표가 스크롤 밖에 있어 이미 그렇다).
   ⚠️ top:0 으로 하지 말 것 — navbar 가 sticky-top 이라 표가 그 뒤로 숨는다.
   z-index 는 아래에서 올라오는 폼 칸(특히 열린 select 목록)에 안 가릴 만큼만 주고,
   navbar(1020)보다는 낮게 둔다 — 표는 navbar 아래로 지나가야 한다. */
.journal-preview-card {
    position: sticky;
    top: 3.5rem;
    z-index: 1;
}

/* 분개표 두 줄과 아래 문장 둘을 잇는 번호 ①②. 글자는 마크업의 data-no 가 갖는다
   (표 쪽 span 은 늘 비어 있고 JS 의 setText 가 계정명 span 만 건드린다).
   ⚠️ 두 규칙이 갈린 이유: 표의 번호는 표의 틀이라 계정을 안 골라도 보여야 하고,
      문장의 번호는 그 문장이 있을 때만 보여야 한다 — 상대계정을 고르기 전에는
      둘째 문장이 아예 없는 것이 이 화면의 정상 상태다. */
.jv-mark::before { content: attr(data-no) " "; }
.jv-numbered:not(:empty)::before { content: attr(data-no) " "; }

/* 꼬리표 배지 — 없을 땐 자리를 잡지 않는다(배지는 padding 이 있어 비어도 알약이 남는다).
   ⚠️ 빈 자리를 미리 잡아 두지 말 것: 이 카드가 sticky 라 한 줄 커지면 아래 입력 칸이
      전부 밀리는데, 밀림은 거래당 한 번이고 빈 줄은 입력 내내 폰 화면을 먹는다. */
.journal-badge:empty { display: none; }