@import url("../Font/font.css");

/* 전역 Pretendard 폰트 강제 적용 (UI 컴포넌트 및 폼 요소 포함) */
body, input, select, textarea, button, table, th, td, a, span, p, div, h1, h2, h3, h4, h5, h6 {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif !important;
}

/* 웹 아이콘 폰트가 전역 폰트 강제 적용으로 인해 깨지는 현상 방지 */
.material-symbols-outlined,
.material-symbols-outlined::after,
.material-symbols-outlined::before,
.material-icons,
.material-icons::after,
.material-icons::before {
    font-family: 'Material Symbols Outlined', 'Material Icons' !important;
}

/* select 태그 디자인 개편 */
select.select_box {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111c2d'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 40px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
select.select_box:hover {
    border-color: #006397;
    background-color: #e8eeff;
}
select.select_box:focus {
    border-color: #006397;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(0, 99, 151, 0.15);
    outline: none;
}
select.select_box.dim {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    cursor: default !important;
    opacity: 0.9 !important;
    pointer-events: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 36px !important;
}
select.select_box option {
    background-color: #ffffff;
    color: #111c2d;
    font-size: 14px;
    padding: 12px 16px;
}

:root {
    /* 1. 배경색 및 메시 그라디언트 설정 */
    --bg-mesh-color: #f6f8ff;
    --bg-mesh-gradient: radial-gradient(at 0% 0%, hsla(202, 100%, 88%, 1) 0%, transparent 50%), 
                        radial-gradient(at 100% 100%, hsla(210, 85%, 82%, 1) 0%, transparent 50%);

    /* 2. 대시보드 및 공통 카드 그림자 */
    --card-shadow: 0px 6px 24px rgba(17, 28, 45, 0.08);

    /* 3. 대시보드 최근 시공요청서 카드 배경색 */
    --recent-work-card-bg: rgb(240, 248, 255);
    --recent-work-card-hover-bg: rgb(225, 239, 255);

    /* 4. 기본 레이아웃 여백 및 패딩 */
    --dashboard-padding-y: 8px; /* pt-xs */
    --dashboard-padding-x: 8px; /* px-xs */
    --dashboard-padding-bottom: 24px; /* pb-md */

    /* 5. 대시보드 파란색 계열 심볼 색상 */
    --primary-symbol-color: rgb(26, 93, 202);

    /* 6. Form Input & Combobox 일괄 관리용 테마 변수 */
    --form-control-bg: #ffffff; /* 하얀색 */
    --form-control-border: 1px solid #cbd5e1; /* 연한 회색 */
    --form-control-border-radius: 8px; /* 둥근 8px */
    --form-control-padding-y: 12px;
    --form-control-padding-x: 16px;
    --form-control-font-size: 14px;
    --form-control-text-color: #0f172a; /* text-slate-900 */
    --form-control-focus-border: 1px solid rgb(26, 93, 202); /* 흔들림 방지를 위해 1px 테두리 유지 */
    --form-control-dim-bg: #f8fafc; /* bg-slate-50 */
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 메시 그라디언트 배경 공통 클래스 */
/* background-attachment: fixed는 스크롤마다 배경을 다시 그려야 해서(특히 PC 마우스휠) 스크롤 버벅임을 유발하므로 scroll로 변경 */
.bg-mesh {
    background-color: var(--bg-mesh-color) !important;
    background-image: var(--bg-mesh-gradient) !important;
    background-attachment: scroll !important;
    min-height: 100vh;
    min-height: 100dvh;
}

/* 소프트 카드 그림자 공통 클래스 */
.soft-card-shadow {
    box-shadow: var(--card-shadow) !important;
}

/* 글래스 헤더 공통 클래스 */
.glass-header {
    backdrop-filter: blur(8px) !important;
    background: rgba(249, 249, 255, 0.8) !important;
}

/* ==========================================
   전역 Form Controls (Input & Select) 일괄 관리 규칙
   ========================================== */
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea {
    background-color: var(--form-control-bg) !important;
    border: var(--form-control-border) !important;
    border-radius: var(--form-control-border-radius) !important;
    padding-top: var(--form-control-padding-y) !important;
    padding-bottom: var(--form-control-padding-y) !important;
    padding-left: var(--form-control-padding-x) !important;
    padding-right: var(--form-control-padding-x) !important;
    font-size: var(--form-control-font-size) !important;
    color: var(--form-control-text-color) !important;
    font-family: 'Pretendard', sans-serif !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
    border: var(--form-control-focus-border) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(26, 93, 202, 0.15) !important; /* 물리적 크기 변경 대신 그림자로 포커스 링 처리 */
}

/* 비활성화 및 딤(dim) 처리 전역 스타일 (input, textarea, 콤보박스 공통 적용 - 자물쇠 심볼 및 회색 배경) */
input[type="text"][disabled],
input[type="password"][disabled],
input[type="tel"][disabled],
input[type="number"][disabled],
textarea[disabled],
input[type="text"].dim,
input[type="password"].dim,
input[type="tel"].dim,
input[type="number"].dim,
textarea.dim,
.select_box .tab_tit.dim,
.select_box .tab_tit[disabled] {
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    cursor: not-allowed !important;
    opacity: 0.9 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 36px !important;
}

/* 커스텀 콤보박스 (.select_box .tab_tit) 스타일 일괄 제어 */
.select_box .tab_tit {
    width: 100% !important;
    background-color: var(--form-control-bg) !important;
    border: var(--form-control-border) !important;
    border-radius: var(--form-control-border-radius) !important;
    height: 46px !important;
    line-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: var(--form-control-padding-x) !important;
    padding-right: 40px !important; /* 화살표 백그라운드 영역 고정 */
    font-size: var(--form-control-font-size) !important;
    color: var(--form-control-text-color) !important;
    font-family: 'Pretendard', sans-serif !important;
    cursor: pointer !important;
    display: block !important; /* ellipsis 말줄임 활성화 목적 */
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111c2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
}

.select_box .tab_tit:hover {
    border-color: #006397 !important;
    background-color: #e8eeff !important;
}

/* 열렸을 때 (on 상태) */
.select_box .tab_tit.on {
    border: var(--form-control-focus-border) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(26, 93, 202, 0.15) !important;
}

/* 중복 정의 제거 (상단 공통 딤 비활성 선언부에서 통합 처리됨) */

/* 최근 시공요청서 카드 공통 클래스 (라인 구분형 리스트 스타일로 변경) */
.recent-work-card {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    min-width: unset !important;
    transition: background-color 0.2s ease !important;
}
.recent-work-card:hover {
    background-color: #f8fafc !important; /* bg-slate-50 */
    box-shadow: none !important;
    transform: none !important;
}

/* 진행상태 타입별 배경 및 테두리 초기화 (라인 구분형 스타일 준수) */
.recent-work-card[data-status-type] {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}
.recent-work-card[data-status-type]:hover {
    background-color: #f8fafc !important;
    border: none !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* 반응형 시공요청서 그리드 -> 세로 1열 리스트 flex 구조로 변경 */
.recent-work-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
}

.recent-work-grid-empty {
    display: block !important;
}

/* 파란색 계열 심볼 색상 클래스 */
.text-primary-symbol {
    color: var(--primary-symbol-color) !important;
}
.text-primary-symbol-muted {
    color: var(--primary-symbol-color) !important;
    opacity: 0.7;
}

/* 콤보박스 디자인 개편 */
.select_box {
    position: relative;
    width: 100%;
}
/* 중복 .tab_tit 구형 정의 제거 (상단 공통 폼 컨트롤 테마 선언에서 일괄 처리) */
/* .combo-dd-list: main.js가 스크롤 팝업 안의 드롭다운을 <body>로 옮길(portalize) 때 붙이는 마커 클래스.
   .select_box ul은 조상 관계(.select_box 안에 있어야 함) 기반 선택자라 body로 옮겨지면 전혀 매칭되지
   않아 스타일과 기본 display:none이 통째로 사라진다 — 그래서 조상 관계와 무관하게 항상 매칭되도록
   모든 규칙에 .combo-dd-list를 나란히 추가한다. */
.select_box ul,
.combo-dd-list {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 6px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #bfc7d2;
    border-radius: 12px;
    box-shadow: 0px 8px 30px rgba(17, 28, 45, 0.08);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    padding: 6px;
    display: none;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge/IE */
}
.select_box ul::-webkit-scrollbar,
.combo-dd-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge Chromium */
}
.select_box ul li,
.combo-dd-list li {
    list-style: none;
    position: relative;
    padding-bottom: 3px;
    margin-bottom: 3px;
}
.select_box ul li:last-child,
.combo-dd-list li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}
.select_box ul li:not(:last-child)::after,
.combo-dd-list li:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    border-bottom: 1px dashed #cbd5e1;
}
/* JS로 특정 li를 숨겼는데(예: 시공 패키지 16코드) 그 li가 구조상 :last-child라서, 바로 위(현재 화면에 보이는
   마지막) li에는 여전히 위 규칙의 구분선이 남는 경우를 위한 예외 처리. 해당 li에 이 클래스를 붙이면 된다. */
.select_box ul li.no-divider::after,
.combo-dd-list li.no-divider::after {
    display: none;
}
.select_box ul li a,
.combo-dd-list li a {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    color: #3f4850;
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s ease;
}
.select_box ul li a:hover,
.combo-dd-list li a:hover {
    background-color: rgba(0, 99, 151, 0.05);
    color: #006397;
}
.select_box ul li a.selected,
.combo-dd-list li a.selected {
    background-color: rgba(0, 99, 151, 0.08);
    color: #006397;
    font-weight: 600;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006397' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

/* input & textarea 디자인 개편 (combo.png 적용) */
input[type="text"], input[type="password"], textarea {
    border: 1px solid #bfc7d2;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: #111c2d;
    background-color: #f0f3ff;
    transition: all 0.2s ease;
    outline: none;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    border-color: #006397;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(0, 99, 151, 0.15);
}

/* 심볼릭 아이콘이 있는 인풋 필드 클래스 구분 */
input.input-icon-left {
    padding-left: 48px !important;
}
input.input-icon-both {
    padding-left: 48px !important;
    padding-right: 48px !important;
}
input[type="text"].dim, input[type="password"].dim, textarea.dim,
input[type="text"]:disabled, input[type="password"]:disabled, textarea:disabled {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    cursor: default !important;
    opacity: 0.9 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 36px !important;
}

/* 커스텀 콤보박스(.select_box .tab_tit)가 dim 상태일 때 마우스오버 시 not-allowed 커서가 뜨던 것을 기본 커서로 되돌림
   (위쪽 input[type=text].dim 등은 이미 같은 방식으로 default로 재정의돼 있는데 .tab_tit.dim만 빠져 있었음) */
.select_box .tab_tit.dim,
.select_box .tab_tit[disabled] {
    cursor: default !important;
}

/* 달력 컴포넌트가 dim 상태일 때 달력 아이콘 위치 보정 (자물쇠와 겹치지 않게) */
.relative:has(input.hd_search.dim) span.material-symbols-outlined {
    right: 36px !important;
    color: #64748b !important;
    opacity: 0.8 !important;
}

/* 라디오 및 체크박스 비활성(dim) 스타일 */
input[type="radio"].dim,
input[type="checkbox"].dim,
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    cursor: default !important;
    opacity: 0.9 !important;
}

/* 비활성(dim/disabled) 상태에서 선택된(checked) 라디오 및 체크박스 가독성 극대화 */
input[type="radio"].dim:checked,
input[type="checkbox"].dim:checked,
input[type="radio"]:disabled:checked,
input[type="checkbox"]:disabled:checked {
    background-color: #006397 !important; /* Primary Blue 색상 유지 */
    border-color: #004b73 !important;
    color: #ffffff !important; /* 체크/라디오 안쪽 기호를 흰색으로 선명하게 */
    opacity: 0.95 !important; /* 투명도를 거의 주지 않아 선명함 확보 */
}

/* datepicker 테마 보정 및 깨짐 방지 (Tailwind Preflight 호환) */
#ui-datepicker-div {
    display: none;
}
.ui-datepicker {
    background: #ffffff !important;
    border: 1px solid #bfc7d2 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(17, 28, 45, 0.08) !important;
    padding: 16px !important;
    font-family: 'Pretendard', sans-serif !important;
    z-index: 2000 !important;
    width: 290px !important;
    box-sizing: border-box !important;
}
.ui-datepicker table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 8px 0 0 0 !important;
}
.ui-datepicker th {
    padding: 6px 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
    border: none !important;
    color: #3f4850 !important;
    font-size: 12px !important;
}
.ui-datepicker td {
    padding: 3px !important;
    text-align: center !important;
    border: none !important;
}
.ui-datepicker td span, 
.ui-datepicker td a {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-decoration: none !important;
    text-align: center !important;
    border-radius: 8px !important;
    color: #111c2d !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}
/* 토요일(첫 행 마지막 열) 연한 파란 배경 + 파란 글씨 */
.ui-datepicker th:last-child,
.ui-datepicker-calendar td:last-child span,
.ui-datepicker-calendar td:last-child a {
    color: #006397 !important;
}
.ui-datepicker-calendar td:last-child a:not(.ui-state-active) {
    background: rgba(0, 99, 151, 0.08) !important;
}

/* 일요일(첫 행 첫 열) 연한 빨간 배경 + 빨간 글씨 */
.ui-datepicker th:first-child,
.ui-datepicker-calendar td:first-child span,
.ui-datepicker-calendar td:first-child a {
    color: #dc2626 !important;
}
.ui-datepicker-calendar td:first-child a:not(.ui-state-active) {
    background: rgba(220, 38, 38, 0.08) !important;
}

/* hover 상태보다 선택(active) 상태가 항상 우선 표시되도록 순서 배치 */
.ui-datepicker-calendar td a.ui-state-hover {
    background: rgba(0, 99, 151, 0.08) !important;
    color: #006397 !important;
}
.ui-datepicker-calendar td a.ui-state-active {
    background: #006397 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}
.ui-datepicker-header {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    color: #111c2d !important;
    padding: 0 !important;
}
.ui-datepicker-title {
    text-align: center !important;
    line-height: 32px !important;
    font-size: 15px !important;
    color: #111c2d !important;
    font-weight: 700 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 32px !important;
}
/* 데이트피커 연/월: 사이트 공통 콤보박스(.select_box) 디자인을 컴팩트 사이즈로 적용 */
.ui-datepicker-header .select_box {
    position: relative !important;
    width: auto !important;
    flex-shrink: 0 !important;
}
.ui-datepicker-header .select_box .tab_tit {
    width: auto !important;
    height: 28px !important;
    line-height: 26px !important;
    padding: 0 26px 0 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background-size: 12px !important;
    background-position: right 8px center !important;
}
.ui-datepicker-header .select_box ul {
    width: max-content !important;
    min-width: 100% !important;
    max-height: 160px !important;
}
.ui-datepicker-header .select_box ul li a {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    padding: 4px 12px !important;
}
.ui-datepicker-header .select_box ul li a.selected {
    padding: 4px 30px 4px 12px !important;
    background-size: 13px !important;
    background-position: right 10px center !important;
}
.dp-year-combo .tab_tit {
    min-width: 90px !important;
}
.dp-month-combo .tab_tit {
    min-width: 75px !important;
}
.ui-datepicker-prev, .ui-datepicker-next {
    position: absolute !important;
    top: 0 !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease !important;
}
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
    background-color: rgba(0, 99, 151, 0.05) !important;
}
.ui-datepicker-prev { left: 0px !important; }
.ui-datepicker-next { right: 0px !important; }
.ui-datepicker-prev span, .ui-datepicker-next span {
    display: none !important;
}
.ui-datepicker-prev::after {
    content: "chevron_left";
    font-family: "Material Symbols Outlined" !important;
    font-size: 20px !important;
    color: #3f4850 !important;
    font-weight: normal !important;
}
.ui-datepicker-next::after {
    content: "chevron_right";
    font-family: "Material Symbols Outlined" !important;
    font-size: 20px !important;
    color: #3f4850 !important;
    font-weight: normal !important;
}

/* jquery-ui 가 자동 삽입하는 달력 버튼 숨김 (중복 생성 방지) */
.ui-datepicker-trigger {
    display: none !important;
}

/* ==========================================================================
   아웃라인 모던 버튼 스타일 공통 클래스 정의 (DESIGN.md 규격 준수 - 시안 3)
   ========================================================================== */
/* 버튼 텍스트 드래그(길게 누르기 등) 시 선택되지 않도록 전 화면 공통 적용 */
button,
.btn-modern {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.btn-modern.hidden {
    display: none !important;
}

.btn-modern {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important; /* label-md 규격 */
    border-radius: 8px !important; /* rounded-lg */
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0px 1px 2px rgba(17, 28, 45, 0.05) !important;
    border-style: solid !important;
    box-sizing: border-box !important;
}

/* active 조작 피드백 (98% 축소 마이크로 애니메이션) */
.btn-modern:active:not(:disabled) {
    transform: scale(0.98) !important;
}

/* 1. Primary Button (주요 조작) - 로열 블루 테마 */
.btn-modern-primary {
    background-color: #ffffff !important;
    border: 1px solid #1A5DCA !important;
    color: #1A5DCA !important;
}
.btn-modern-primary:hover:not(:disabled) {
    background-color: rgba(26, 93, 202, 0.08) !important;
}
.btn-modern-primary:active:not(:disabled) {
    background-color: #1A5DCA !important;
    color: #ffffff !important;
}

/* 2. Secondary Button (보조 조작) - 슬레이트 블루 테마 */
.btn-modern-secondary {
    background-color: #ffffff !important;
    border: 1px solid #3B639B !important;
    color: #3B639B !important;
}
.btn-modern-secondary:hover:not(:disabled) {
    background-color: rgba(59, 99, 155, 0.08) !important;
}
.btn-modern-secondary:active:not(:disabled) {
    background-color: rgba(59, 99, 155, 0.15) !important;
    color: #3B639B !important;
}

/* 3. Tertiary Button (일반/취소) - 중립 회색/먹색 테마 */
.btn-modern-tertiary {
    background-color: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
}
.btn-modern-tertiary:hover:not(:disabled) {
    background-color: #F1F5F9 !important;
}
.btn-modern-tertiary:active:not(:disabled) {
    background-color: #E2E8F0 !important;
    color: #475569 !important;
}

/* 4. Danger Button (삭제/위험) - 경고 에러 레드 테마 */
.btn-modern-danger {
    background-color: #ffffff !important;
    border: 1px solid #DC2626 !important;
    color: #DC2626 !important;
}
.btn-modern-danger:hover:not(:disabled) {
    background-color: rgba(220, 38, 38, 0.08) !important;
}
.btn-modern-danger:active:not(:disabled) {
    background-color: #DC2626 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   상시 활성(Active/Filled) 상태 디자인 클래스 정의 (요청서 하단 액션 버튼 강조용)
   ========================================================================== */
.btn-modern-primary-active {
    background-color: #4285F4 !important; /* 더 부드럽고 연한 구글 블루 */
    border: 1px solid #4285F4 !important;
    color: #ffffff !important;
}
.btn-modern-primary-active:hover:not(:disabled) {
    background-color: #3367D6 !important; /* 호버 시 약간 짙어짐 */
}

.btn-modern-secondary-active {
    background-color: rgba(59, 99, 155, 0.10) !important; /* 15% -> 10%로 연하게 */
    border: 1px solid #3B639B !important;
    color: #3B639B !important;
}
.btn-modern-secondary-active:hover:not(:disabled) {
    background-color: rgba(59, 99, 155, 0.18) !important;
}

.btn-modern-danger-active {
    background-color: #EF4444 !important; /* 더 부드럽고 연한 레드 */
    border: 1px solid #EF4444 !important;
    color: #ffffff !important;
}
.btn-modern-danger-active:hover:not(:disabled) {
    background-color: #DC2626 !important; /* 호버 시 약간 짙어짐 */
}

/* 비활성 (Disabled) 공통 처리 */
.btn-modern:disabled {
    opacity: 0.5 !important;
    cursor: default !important;
    pointer-events: none !important;
}
.btn-modern-primary:disabled,
.btn-modern-secondary:disabled {
    background-color: #ffffff !important;
    border-color: #E2E8F0 !important;
    color: #94A3B8 !important;
}
.btn-modern-tertiary:disabled {
    background-color: #ffffff !important;
    border-color: #F1F5F9 !important;
    color: #CBD5E1 !important;
}
.btn-modern-danger:disabled {
    background-color: #ffffff !important;
    border-color: #FEE2E2 !important;
    color: #FCA5A5 !important;
}