/* =========================
   공통 (라이트 모드 기본)
   ========================= */
.bg-gradient-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* 게시글 본문 영역 (detail 화면) */
.km-prose {
    line-height: 1.75;
    font-size: 1.05rem;
    color: #222; /* 라이트 기본 텍스트 */
}

.km-prose h1,
.km-prose h2,
.km-prose h3 {
    margin-top: 1.2em;
    margin-bottom: .6em;
    font-weight: 700;
    color: inherit;
}

.km-prose p {
    margin: 0.6em 0;
}

/* 구분선 */
.km-divider {
    height: 2px;
    background: linear-gradient(
            to right,
            transparent,
            rgba(0, 0, 0, .1),
            transparent
    );
}

/* 댓글 아바타 */
.km-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(180deg, #e0e7ff, #ede9fe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #3730a3;
    flex-shrink: 0;
}

/* 입력창 (댓글 작성, 폼 화면 등) */
.km-input {
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    color: #222;
}

.km-input::placeholder {
    color: #9ca3af;
}

/* 미세 그림자 */
.shadow-sm-sm {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* 게시글 카드/리스트 카드 공통 스타일용 (list.html에서 article.km-card 등) */
.km-card {
    border-radius: 1rem;
}

/* 뱃지 톤 (list.html에서 카테고리 badge) */
.km-badge-soft {
    background-color: rgba(37, 99, 235, .08); /* 파란빛 연한 백그라운드 */
    color: #2563eb;
    font-weight: 500;
    padding: .4em .6em;
    font-size: .8rem;
}


/* =========================
   다크 모드
   (html 또는 body, 둘 중 어디에 data-theme="dark"가 붙든
    후손만 따라오면 동작하도록 [data-theme="dark"] ... 로 셀렉터 작성)
   ========================= */

/* 전체 배경/기본 텍스트 톤 */
[data-theme="dark"] body {
    background-color: #0f0f10 !important;
    color: #f8f9fa !important;
}

/* 글 본문 (게시글 내용) */
[data-theme="dark"] .km-prose {
    color: #f8f9fa !important;
}

[data-theme="dark"] .km-prose h1,
[data-theme="dark"] .km-prose h2,
[data-theme="dark"] .km-prose h3 {
    color: #ffffff !important;
}

/* detail.html 안 컨테이너들:
   article.bg-white, section.bg-light, 댓글 카드(div.bg-white), footer.bg-white
   전부 어두운 바탕 + 밝은 글씨로 강제 */
[data-theme="dark"] article.bg-white,
[data-theme="dark"] section.bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .card,
[data-theme="dark"] .km-card {
    background-color: #1e1e1e !important;
    color: #f8f9fa !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* list.html에서 제목 링크가 link-dark 인 경우 대비 */
[data-theme="dark"] a.link-dark,
[data-theme="dark"] .link-dark {
    color: #f8f9fa !important;
}

[data-theme="dark"] a.link-dark:hover,
[data-theme="dark"] .link-dark:hover {
    color: #ffffff !important;
}

/* 목록의 meta 텍스트들 (작성자, 날짜, 조회수 등) */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] .text-body-tertiary,
[data-theme="dark"] .small,
[data-theme="dark"] small {
    color: #adb5bd !important;
}

/* Bootstrap이 라이트 기준으로 강하게 박아둔 애들 */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black,
[data-theme="dark"] .text-body {
    color: #f8f9fa !important;
}

/* pagination, badge 등 안 읽히는 테두리/라인 */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 구분선 밝은 버전 */
[data-theme="dark"] .km-divider {
    background: linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, .25),
            transparent
    ) !important;
}

/* 입력창 (댓글 작성 textarea, form 화면 input/select/textarea 전부 km-input 클래스) */
[data-theme="dark"] .km-input,
[data-theme="dark"] .form-control.km-input,
[data-theme="dark"] .form-select.km-input {
    background-color: #1e1e1e !important;
    color: #f8f9fa !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .km-input::placeholder,
[data-theme="dark"] .form-control.km-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* 뱃지 톤 다크모드 보정 (카테고리 표시) */
[data-theme="dark"] .km-badge-soft {
    background-color: rgba(124, 58, 237, .18); /* 보라빛 살짝 투명 */
    color: #c7a4ff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

/* 페이지네이션 버튼 색 보정 (텍스트가 회색으로 죽는 경우 방지) */
[data-theme="dark"] .pagination .page-link {
    background-color: #1e1e1e;
    color: #f8f9fa;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    color: #6c757d !important; /* 비활성은 좀 더 흐리게 */
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #2563eb;
    color: #fff !important;
    border-color: #2563eb;
}

/* form.html 내부 editor 박스도 다크에서 너무 하얗지 않게 */
[data-theme="dark"] .toastui-editor-defaultUI {
    background-color: #1e1e1e !important;
    color: #f8f9fa !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .toastui-editor-defaultUI * {
    color: #f8f9fa !important;
}

/* ===== 환전 위젯 다크모드 보정 ===== */
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .form-label.small.text-secondary {
    color: #f8f9fa !important; /* 라벨 '대상 통화' 글자 하얗게 */
}

[data-theme="dark"] .bg-body-tertiary,
[data-theme="dark"] .form-control.bg-body-tertiary {
    background-color: #1e1e1e !important; /* 어두운 카드 배경 */
    color: #f8f9fa !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 뱃지 */
[data-theme="dark"] .badge.text-bg-primary-subtle {
    background-color: rgba(124, 58, 237, .22) !important; /* 은은한 보라/네온톤 */
    color: #f8f9fa !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    font-weight: 500;
    border-radius: .5rem;
}

/* 혹시 text-dark가 박혀있는 경우(여기 있음) 강제 밝게 돌리기 */
[data-theme="dark"] .badge.text-bg-primary-subtle.text-dark,
[data-theme="dark"] .text-dark {
    color: #f8f9fa !important;
}

/* 기본(라이트 모드) 채팅 버블 */
.bubble {
    padding: 12px 14px;
    border-radius: 12px;
    margin: 8px 0;
    white-space: pre-wrap;
    max-width: 80%;
    font-size: .95rem;
    line-height: 1.5;
}

.me {
    background: #eef;
    border: 1px solid #ccd;
    color: #222;
    align-self: flex-end;
}

.ai {
    background: #f6f6f6;
    border: 1px solid #ddd;
    color: #222;
    align-self: flex-start;
}

/* 다크 모드 전용 채팅 버블 */
[data-theme="dark"] #log {
    color: #f8f9fa; /* 기본 텍스트 밝기 */
}

[data-theme="dark"] .bubble.me {
    background: #2a2f6a; /* 진한 남보라 톤 */
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff !important; /* 확실한 대비 */
}

[data-theme="dark"] .bubble.ai {
    background: #1e1e1e; /* 카드랑 통일 */
    border: 1px solid rgba(255, 255, 255, .25);
    color: #f8f9fa !important;
}

/* textarea, 버튼 이미 km-input/btn-primary라 글로벌 다크 규칙이 어느 정도 먹긴 할텐데
   혹시 km-input 다크 규칙 안 타는 경우 대비용 */
[data-theme="dark"] #prompt.form-control.km-input {
    background-color: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    color: #f8f9fa !important;
}

[data-theme="dark"] #prompt.form-control.km-input::placeholder {
    color: rgba(255, 255, 255, .4) !important;
}

/* log 영역이 flex가 아니면 채팅 말풍선 좌우 정렬이 한 줄로 내려오는데,
   나중에 정렬하고 싶으면 이렇게 주면 더 예뻐짐 */
#log {
    display: flex;
    flex-direction: column;
}

.bubble.me {
    align-self: flex-end;
    text-align: right;
}

.bubble.ai {
    align-self: flex-start;
    text-align: left;
}

[data-theme="dark"] .btn-outline-dark {
    color: #f8f9fa !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .btn-outline-dark:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* 공통 (라이트/다크 둘 다 보기 좋게) */
.km-btn-copy {
    /* 라이트 모드용 강제: 진한 글자/테두리 */
    color: #212529 !important;
    border-color: #212529 !important;
    font-weight: 500;
}

.km-btn-copy:hover {
    background-color: #212529 !important;
    color: #fff !important;
    border-color: #212529 !important;
}

/* 다크 모드에서는 밝은 톤으로 오버라이드 */
[data-theme="dark"] .km-btn-copy {
    color: #f8f9fa !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .km-btn-copy:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.bg-gradient-primary .km-badge-soft {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.km-calendar-card {
    background: #f9fafb;
}

/* FullCalendar 전체 폰트/사이즈 */
.fc {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.85rem;
}

/* 헤더 툴바 */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1rem;
}

.fc .fc-toolbar-title {
    font-size: 1.05rem;
    font-weight: 700;
}

/* prev / next / 오늘 버튼 */
.fc .fc-button {
    border-radius: 999px;
    border: none;
    padding: 4px 10px;
    font-size: 0.75rem;
}

.fc .fc-button-primary {
    background-color: #e9f2ff;
    color: #0d6efd;
}

.fc .fc-button-primary:not(:disabled):hover {
    background-color: #0d6efd;
    color: #fff;
}

/* 요일 헤더 */
.fc .fc-col-header-cell-cushion {
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

/* 테이블 라인 */
.fc-theme-standard td,
.fc-theme-standard th {
    border-color: #e5e7eb;
}

/* 날짜 셀 배경 */
.fc .fc-daygrid-day {
    background-color: #ffffff;
}

/* 오늘 날짜 배경 살짝 강조 */
.fc .fc-daygrid-day.fc-day-today {
    background: #eff6ff;
}

/* 날짜 숫자 (JS에서 넣은 .km-day-number) */
.fc .km-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 999px;
    margin: 4px;
    color: #111827;
}

/* 오늘 날짜 숫자 강조 */
.fc .fc-day-today .km-day-number {
    background: #0d6efd;
    color: #fff;
}

/* 이벤트 pill 스타일 */
.fc .km-calendar-event {
    border-radius: 999px;
    padding: 2px 8px;
    margin-top: 2px;
    font-size: 0.7rem;
    background: #e3f2fd;
}

/* 주말 배경 살짝 다르게 (선택) */
.fc .fc-day-sun,
.fc .fc-day-sat {
    background-color: #fafafa;
}