/* File: app/assets/css/style.css */

/* =========================================
   1. CSS 변수 설정 (BMW 스타일: Premium & Technical)
   ========================================= */
:root {
    /* 라이트 모드: 메탈릭 실버 & 화이트 (깨끗하고 기술적인 느낌) */
    --bg-gradient-start: #f4f6f8;
    --bg-gradient-end: #e1e4e8; /* 은은한 알루미늄 느낌 */
    
    --card-bg: #ffffff;
    --card-border: #e0e0e0; /* 얇고 날카로운 테두리 */
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 절제된 그림자 */
    
    --text-main: #1a1a1a; /* 거의 완전한 검정 */
    --text-sub: #5f6368;  /* 쿨 그레이 */
    
    --container-bg: #f8f9fa; /* 밝은 회색 컨테이너 */
    
    /* BMW 포인트 컬러 (절제된 사용) */
    --brand-black: #000000;
    --brand-blue: #0653b6; /* BMW Official Blue에 가까운 색 */
    --brand-red: #e10000;  /* 경고/삭제용 */
    
    --btn-bg: #1a1a1a;     /* 기본 버튼: 블랙 */
    --btn-text: #ffffff;
    --btn-hover-bg: #000000;
}

/* 다크 모드: 매트 블랙 & 카본 그레이 (운전석 대시보드 느낌) */
.dark-mode {
    --bg-gradient-start: #121212;
    --bg-gradient-end: #1c1c1c; /* 깊이감 있는 블랙 */
    
    --card-bg: #1e1e1e;         /* 매트한 다크 그레이 */
    --card-border: #333333;     /* 묵직한 테두리 */
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    
    --text-main: #ffffff;
    --text-sub: #a0a0a0;        /* 메탈릭한 실버 텍스트 */
    
    --container-bg: #252525;
    
    --brand-blue: #4e9af1;      /* 다크모드에서 시인성 좋은 블루 */
    --brand-red: #ff4d4d;
    
    --btn-bg: #ffffff;          /* 다크모드 버튼: 화이트 (대비 강조) */
    --btn-text: #000000;
    --btn-hover-bg: #e0e0e0;
}

/* =========================================
   2. 기본 레이아웃 및 배경
   ========================================= */
body {
    background: linear-gradient(to bottom, var(--bg-gradient-start), var(--bg-gradient-end));
    color: var(--text-main);
    min-height: 100vh;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: background 0.3s ease, color 0.3s ease;
    background-attachment: fixed;
    letter-spacing: -0.02em; /* 세련된 자간 */
}

/* =========================================
   3. Tailwind 클래스 스타일 재정의 (BMW 룩)
   ========================================= */

/* 카드 디자인: 날렵하고 단단한 느낌 */
.bg-white {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-main) !important;
    box-shadow: var(--card-shadow) !important;
    border-radius: 4px !important; /* 둥글기 최소화 (샤프함 강조) */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 마우스 올렸을 때 살짝 떠오르는 효과 */
.bg-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--brand-blue) !important; /* 호버 시 미세한 블루 라인 */
}

/* 내부 컨테이너 (그릴 패턴 느낌의 단순화) */
.bg-gray-50, .hover\:bg-gray-50:hover {
    background-color: var(--container-bg) !important;
    border: 1px solid transparent !important;
    color: var(--text-main) !important;
    border-radius: 4px !important;
}

/* 텍스트 색상 */
.text-gray-800, .text-gray-700 { color: var(--text-main) !important; font-weight: 600 !important; }
.text-gray-600, .text-gray-500, .text-gray-400 { color: var(--text-sub) !important; }

/* 구분선 */
.border-gray-200, .border-gray-300, .border-b, .border-t, .border-l {
    border-color: var(--card-border) !important;
}

/* 입력 폼: 직관적이고 깔끔하게 */
input, textarea, select {
    background-color: var(--container-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 2px !important; /* 각진 모서리 */
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem;
    transition: all 0.2s;
}

input:focus, textarea:focus {
    border-color: var(--brand-blue) !important;
    box-shadow: none !important; /* 글로우 효과 제거, 깔끔한 라인만 유지 */
    background-color: var(--card-bg) !important;
}

/* =========================================
   4. 버튼 스타일 (핵심: 스타일리쉬한 블랙 & 화이트)
   ========================================= */

/* 1) 일반 버튼 (전송, 추가 등) */
button[type="submit"], .bg-blue-500 {
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-radius: 2px !important;
    font-weight: 700 !important;
    text-transform: uppercase; /* 대문자로 강인한 느낌 */
    letter-spacing: 0.05em;
    font-size: 0.85rem !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

button[type="submit"]:hover, .bg-blue-500:hover {
    background-color: var(--btn-hover-bg) !important;
    /* 호버 시 하단에 BMW M 스타일 블루 바 */
    border-bottom: 3px solid var(--brand-blue) !important; 
    padding-bottom: calc(0.75rem - 3px) !important; /* 높이 유지 */
}

/* 2) 빠른 링크 버튼 (스타일리쉬한 뱃지 스타일) */
.quick-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 140px; 
    height: 48px; 
    padding: 0 1rem;
    border-radius: 0 !important; /* 완전 사각형 or 아주 약간만 */
    /* 그라데이션 대신 솔리드한 블랙/다크그레이 */
    background-color: #2c2c2c; 
    color: white !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    word-break: keep-all;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* 빠른 링크 왼쪽 색상 띠 (BMW 삼선 느낌의 포인트) */
.quick-link-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--brand-blue);
    transition: width 0.2s ease;
}

.quick-link-btn:hover {
    background-color: #000000;
}

.quick-link-btn:hover::before {
    width: 100%; /* 호버 시 파란색 배경이 덮이는 효과 */
    opacity: 0.1; /* 은은하게 */
}

.quick-link-btn.two-line {
    font-size: 0.8rem;
}

/* 관리자 페이지 탭 버튼 */
.tab-link {
    border-radius: 0 !important;
    border-bottom: 2px solid transparent;
    color: var(--text-sub) !important;
}
.tab-link.active {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border-bottom: 2px solid var(--brand-blue) !important;
    box-shadow: none !important;
}

/* =========================================
   5. 기타 컴포넌트
   ========================================= */

/* 삭제 버튼 (경고색) */
.text-red-600, .text-red-500 {
    color: var(--brand-red) !important;
    font-weight: bold;
}

/* 링크 텍스트 (블루 포인트) */
a.text-blue-500 {
    color: var(--brand-blue) !important;
    text-decoration: none;
    font-weight: 600;
}
a.text-blue-500:hover {
    text-decoration: underline;
}

/* 이미지 미리보기 및 삭제 */
.image-preview-wrapper {
    position: relative;
    display: inline-block;
}
.remove-image-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--brand-red);
    color: white;
    border: 2px solid var(--card-bg);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}
.remove-image-btn:hover {
    transform: rotate(90deg);
}

/* 다크 모드 토글 스위치 (심플하고 모던하게) */
.theme-switch-wrapper { display: flex; align-items: center; }
.theme-switch { display: inline-block; height: 24px; position: relative; width: 44px; }
.theme-switch input { display: none; }
.slider { 
    background-color: #cfcfcf; 
    bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; 
    transition: .4s; 
    border-radius: 0; /* 각지게 */
}
.slider:before { 
    background-color: #fff; 
    bottom: 2px; content: ""; height: 20px; left: 2px; position: absolute; 
    transition: .4s; width: 20px; 
    border-radius: 0; /* 각지게 */
}
input:checked + .slider { background-color: var(--brand-blue); }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 34px; } /* 둥근 옵션이 필요할 경우 유지 */
.slider.round:before { border-radius: 50%; }

/* 메모 썸네일 */
.memo-thumbnail {
    border: 1px solid var(--card-border);
    border-radius: 2px !important;
}

/* 정보 카드 */
.info-card h3 {
    border-bottom: 2px solid var(--brand-blue) !important; /* 제목 아래 파란 줄 */
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: inline-block;
    width: 100%;
}