/* ============================================================
   영업일지 시스템 공통 테마
   - 모든 화면의 배경을 view_partner.php 와 동일하게 통일
   - 버튼 색을 3가지 역할로 정리 (주 액션 / 보조 / 삭제)

   이 파일은 각 페이지의 개별 <style> 보다 우선해야 하므로
   역할이 겹치는 속성에만 !important 를 씁니다.
   ============================================================ */

:root {
    --brand:        #00d2d3;   /* 강조색 – 라벨·테두리·아이콘 등 "글자/선" 용도 */

    /* 채움 버튼 배경.
       밝은 #00d2d3 위에 흰 글씨는 대비가 1.9:1 밖에 안 나와 읽기 어렵습니다.
       같은 청록 계열을 조금 진하게 써서 흰 글씨로 4.8:1 을 확보했습니다. */
    --brand-btn:       #0b8285;
    --brand-btn-hover: #0d9a9d;
    --brand-ink:       #ffffff;   /* 채움 버튼 위 글자색 */

    --danger:       #eb4d4b;   /* 삭제 / 재설정 */
    --danger-hover: #d63a38;

    --glass:        rgba(255, 255, 255, 0.12);
    --glass-hover:  rgba(255, 255, 255, 0.22);
    --glass-line:   rgba(255, 255, 255, 0.25);

    --radius:       10px;
}

/* ------------------------------------------------------------
   1) 배경 통일
   기존에는 일부 화면만 배경 영상(main_bg.mp4, 18MB)을 틀고
   나머지는 정지 이미지를 써서 화면마다 분위기가 달랐습니다.
   전부 정지 이미지로 맞추고, 영상은 표시하지 않습니다.
   ------------------------------------------------------------ */
html { min-height: 100%; }

body {
    background: url('/res/main_bg.png') no-repeat center center fixed !important;
    background-size: cover !important;
    background-color: #0d47a1 !important;   /* 이미지 로드 전/여백 대비 */
}

/* 배경 영상 제거 (18MB 다운로드도 함께 사라져 로딩이 빨라집니다) */
.video-background { display: none !important; }

/* body 배경으로 일원화했으므로 별도 배경 레이어는 숨김 */
.background-image-wrap { display: none !important; }

/* ------------------------------------------------------------
   2) 버튼 공통 형태
   ------------------------------------------------------------ */
.btn-submit, .btn-reg, .btn-update, .btn-save, .submit-btn,
.btn-search, .search-btn, .btn-add, .btn-primary,
.btn-action, .btn-detail, .btn-view-more, .btn-file-select,
.btn-zip, .btn-ghost,
.btn-del, .btn-danger {
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    text-decoration: none;
    line-height: 1.2;
}

/* ---------- 주 액션 : 청록 채움 ----------
   저장 / 등록 / 검색 / 로그인처럼 그 화면의 핵심 동작 */
.btn-submit, .btn-reg, .btn-update, .btn-save, .submit-btn,
.btn-search, .search-btn, .btn-add, .btn-primary {
    background: var(--brand-btn) !important;
    background-image: none !important;   /* 기존 그라데이션 제거 */
    color: var(--brand-ink) !important;
    border: none !important;
}
.btn-submit:hover, .btn-reg:hover, .btn-update:hover, .btn-save:hover,
.submit-btn:hover, .btn-search:hover, .search-btn:hover,
.btn-add:hover, .btn-primary:hover {
    background: var(--brand-btn-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(11, 130, 133, 0.4);
}

/* 검색 중 표시 – 자동완성이 서버를 조회하는 동안 테두리로 알려줍니다 */
input.ui-autocomplete-loading {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 211, 0.18) !important;
}

/* ---------- 보조 : 반투명 유리 ----------
   상세보기 / 목록이동 / 파일선택 / 주소검색처럼 부수적인 동작 */
.btn-action, .btn-detail, .btn-view-more, .btn-file-select,
.btn-zip, .btn-ghost {
    background: var(--glass) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid var(--glass-line) !important;
}
.btn-action:hover, .btn-detail:hover, .btn-view-more:hover,
.btn-file-select:hover, .btn-zip:hover, .btn-ghost:hover {
    background: var(--glass-hover) !important;
    transform: translateY(-1px);
}

/* ---------- 삭제 : 빨강 ----------
   되돌릴 수 없는 동작에만 사용 */
.btn-del, .btn-danger, .pw-form button {
    background: var(--danger) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
}
.btn-del:hover, .btn-danger:hover, .pw-form button:hover {
    background: var(--danger-hover) !important;
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   3) 상단바(GNB) 버튼 – 배경 위에서 잘 읽히도록 통일
   ------------------------------------------------------------ */
.back-btn, .btn-logout {
    background: var(--glass) !important;
    border: 1px solid var(--glass-line) !important;
    color: #fff !important;
    border-radius: var(--radius) !important;
}
.back-btn:hover { background: var(--glass-hover) !important; }
.btn-logout:hover {
    background: rgba(235, 77, 75, 0.45) !important;
    border-color: var(--danger) !important;
}

/* 비밀번호 변경 – 상단바에서 청록 계열 아웃라인으로 구분 */
.btn-pw {
    background: rgba(0, 210, 211, 0.14) !important;
    border: 1px solid rgba(0, 210, 211, 0.45) !important;
    color: var(--brand) !important;
    border-radius: var(--radius) !important;
}
.btn-pw:hover {
    background: rgba(0, 210, 211, 0.3) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------
   4) 구분 배지 색 정리 (병원 / 대리점)
   ------------------------------------------------------------ */
.badge-hospital { background: #4834d4 !important; }
.badge-agency   { background: #0e8f6f !important; }

/* ------------------------------------------------------------
   5) 입력 요소 통일 (input / select / textarea)

   화면마다 어떤 칸은 어둡고 어떤 칸은 밝아서 따로 놀았습니다.
   전부 같은 어두운 유리 느낌으로 맞춥니다.
   체크박스·라디오·파일은 각 화면의 커스텀 디자인을 살리려고 제외합니다.
   ------------------------------------------------------------ */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
    background: rgba(0, 0, 0, 0.28) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--radius) !important;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
    border-color: var(--brand) !important;
    background: rgba(0, 0, 0, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 211, 0.18) !important;
}

::placeholder { color: rgba(255, 255, 255, 0.42) !important; opacity: 1; }

/* 펼친 select 목록이 OS 기본 회색으로 튀지 않도록 */
select option {
    background: #12233f;
    color: #ffffff;
}

/* 읽기 전용 정보 표시 칸 (.info-field)
   - 편집 불가라는 건 드러내되, 글자는 읽을 수 있어야 합니다.
     기존에는 글자색이 rgba(255,255,255,0.2) 라 사실상 보이지 않았습니다. */
input.info-field,
textarea.info-field,
select.info-field {
    background: rgba(255, 255, 255, 0.07) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    border: 1px dashed rgba(255, 255, 255, 0.28) !important;
    cursor: default;
}
input.info-field:focus,
textarea.info-field:focus {
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

/* ------------------------------------------------------------
   7) 카드 / 패널 통일

   화면마다 폼을 감싸는 카드 배경이 제각각이었습니다.
   (0.03 / 0.05 / 0.08 / 0.1 의 반투명 흰색 + 거의 불투명한 검정 rgba(15,25,45,0.9))
   두 단계로만 정리합니다.
     - 큰 카드(폼 전체를 감싸는 상자)      : 0.08
     - 작은 패널(검색바·표·목록 항목 등)   : 0.05
   레이아웃(padding·width·위치)은 건드리지 않고 색만 맞춥니다.
   ------------------------------------------------------------ */

/* 큰 카드 */
.form-container,
.edit-form-card,
.login-box,
.pw-box,
.info-box {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
}

/* 작은 패널 */
.search-section,
.filter-bar,
.list-table,
.inquiry-table,
.u-table,
.log-item,
.partner-accordion {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
}
.log-item.active { background: rgba(255, 255, 255, 0.09) !important; }

/* 표 머리글 – 화면마다 다른 강조색을 하나로 */
.list-table th,
.inquiry-table th,
.u-table th {
    background: rgba(0, 210, 211, 0.14) !important;
    color: var(--brand) !important;
}

/* 방문 히스토리 사이드바(VNB) – 혼자 회색 계열이라 떠 보이던 것 정리 */
.vnb-main {
    background: rgba(13, 32, 60, 0.94) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.vnb-item {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.vnb-item:hover { background: rgba(0, 210, 211, 0.12) !important; border-color: var(--brand) !important; }
.vnb-item.current { background: rgba(0, 210, 211, 0.16) !important; border-left: 3px solid var(--brand) !important; }

/* ------------------------------------------------------------
   8) 라벨 색 통일
   #00d2d3 / #00e5ff / rgba(255,255,255,0.6) 로 갈라져 있던 것을 하나로.
   라디오·체크박스용 라벨은 알약형 커스텀 디자인이라 제외합니다.
   ------------------------------------------------------------ */
.form-container label,
.edit-form-card label,
.login-box label,
.pw-box label,
.form-row > label,
.form-group > label {
    color: var(--brand) !important;
}
.radio-label,
.checkbox-item,
.filter-group label,
.status-filter-group label,
.btn-file-select {
    color: inherit !important;
}
.btn-file-select { color: #fff !important; }

/* ------------------------------------------------------------
   6) 달력(jQuery UI Datepicker) – 기본 흰색 테마가 화면과 겉돌아 어둡게 맞춤
   ------------------------------------------------------------ */
.ui-datepicker {
    background: #12233f !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}
.ui-datepicker .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    color: var(--brand) !important;
    font-weight: 700;
}
.ui-datepicker th { color: rgba(255, 255, 255, 0.55) !important; }
.ui-datepicker td a,
.ui-datepicker td span {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 6px !important;
}
.ui-datepicker td a:hover { background: rgba(0, 210, 211, 0.35) !important; }
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
    background: var(--brand) !important;
    color: var(--brand-ink) !important;
    font-weight: 700;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
}