/*******************************************************************************
 * /app2/assets/css/compat.css
 * 기존 painker 페이지의 CSS 클래스를 matchpro 디자인에 매핑
 * → 복잡한 페이지(applyPost, bidPost, join, chatRoom 등)를
 *   최소 수정으로 새 레이아웃에 통합
 ******************************************************************************/

/* ── 기존 wrapper 무효화 (top.php가 이미 처리) ── */
.loader-wrap{display:none!important}
#main{all:unset}
.wrapper2{display:none!important}
header.main-header{display:none!important}
#wrapper{margin-top:0!important;padding-top:0!important;padding-bottom:0!important}

/* ── PC GNB 관련: 기존 nav 숨김 ── */
.nav-bar-wrap2{display:none!important}

/* ── 기존 레이아웃 → 플랫 ── */
.content{width:100%;max-width:var(--content-max,640px);margin:0 auto;padding:0}
.gray-bg{background:transparent!important}
.main-dashboard-sec{padding:0!important}
.main-dashboard-sec .container{max-width:100%!important;padding:0!important;width:100%!important}

/* 사이드 메뉴 숨김 (하단 네비로 대체) */
.col-md-3,
.mob-nav-content-btn,
.fixed-bar#dash_menu,
.back-tofilters{display:none!important}

/* 메인 컨텐츠 풀 width */
.col-md-9{width:100%!important;float:none!important;padding:0 16px!important;min-height:auto!important}

/* ── 기존 카드/박스 → matchpro 스타일 ── */
.profile-edit-container,
.block_box{
    background:var(--bg-primary)!important;
    border-radius:var(--radius-lg)!important;
    padding:16px!important;
    margin-bottom:16px!important;
    box-shadow:var(--shadow-card)!important;
    border:none!important;
}

/* ── 기존 타이틀 ── */
.dashboard-title{
    padding:16px 0 8px!important;
    margin:0!important;
    border:none!important;
}
.dashboard-title h3{
    font-size:17px!important;
    font-weight:800!important;
    color:var(--text-primary)!important;
    letter-spacing:-0.02em!important;
}
.dt-inbox{border-bottom:none!important}

/* ── 폼 요소 ── */
.custom-form label{
    display:block!important;
    font-size:14px!important;
    font-weight:700!important;
    margin-bottom:6px!important;
    color:var(--text-primary)!important;
}
.custom-form input[type="text"],
.custom-form input[type="password"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form input[type="number"],
.custom-form input[type="date"],
.custom-form textarea,
.custom-form select{
    width:100%!important;
    padding:12px 16px!important;
    font-size:15px!important;
    background:var(--bg-primary)!important;
    border:1.5px solid var(--border)!important;
    border-radius:var(--radius-md)!important;
    color:var(--text-primary)!important;
    outline:none!important;
    transition:all 0.25s ease!important;
    -webkit-appearance:none!important;
    box-shadow:none!important;
    text-shadow:none!important;
    background-image:none!important;
}
.custom-form input:focus,
.custom-form textarea:focus,
.custom-form select:focus{
    border-color:var(--primary)!important;
    box-shadow:0 0 0 4px var(--primary-glow)!important;
}
.custom-form input::placeholder,
.custom-form textarea::placeholder{
    color:var(--text-disabled)!important;
}

/* ── 체크박스/라디오 (filter-tags) ── */
.filter-tags{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.filter-tags li{list-style:none!important;margin:0!important;float:none!important}
.filter-tags input[type="checkbox"],
.filter-tags input[type="radio"]{
    position:absolute!important;opacity:0!important;width:0!important;height:0!important;
}
.filter-tags label{
    display:inline-flex!important;align-items:center!important;
    padding:8px 16px!important;
    font-size:13px!important;font-weight:500!important;
    color:var(--text-secondary)!important;
    background:var(--bg-primary)!important;
    border:1.5px solid var(--border)!important;
    border-radius:var(--radius-full)!important;
    cursor:pointer!important;
    transition:all 0.25s ease!important;
    float:none!important;
    position:static!important;
    top:auto!important;
    width:auto!important;
}
.filter-tags input:checked + label{
    background:var(--primary)!important;
    color:white!important;
    border-color:var(--primary)!important;
    box-shadow:0 2px 8px rgba(24,168,241,0.25)!important;
}
.filter-tags label:hover{
    border-color:var(--primary)!important;
    color:var(--primary)!important;
}
.ds-tg{margin:0!important;padding:0!important}

/* ── 기존 버튼 ── */
.contract-button{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;
    padding:15px 28px!important;
    font-size:15px!important;font-weight:700!important;
    background:var(--primary)!important;color:white!important;
    border:none!important;border-radius:var(--radius-lg)!important;
    cursor:pointer!important;
    transition:all 0.25s ease!important;
    box-shadow:0 1px 3px rgba(24,168,241,0.25)!important;
    text-shadow:none!important;
    background-image:none!important;
}
.contract-button:hover{
    background:var(--primary-hover)!important;
    box-shadow:0 4px 14px rgba(24,168,241,0.3)!important;
    transform:translateY(-1px)!important;
}
.contract-button2{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    padding:12px 20px!important;
    font-size:14px!important;font-weight:700!important;
    background:var(--bg-tertiary)!important;color:var(--text-secondary)!important;
    border:1.5px solid var(--border)!important;border-radius:var(--radius-md)!important;
    cursor:pointer!important;
    transition:all 0.25s ease!important;
    text-shadow:none!important;
    background-image:none!important;
    width:48%!important;
}
.contract-button2:hover{
    border-color:var(--primary)!important;
    color:var(--primary)!important;
    background:var(--primary-light)!important;
}

/* ── 이미지 업로드 영역 ── */
.fuzone{
    border:2px dashed var(--border)!important;
    border-radius:var(--radius-lg)!important;
    padding:20px!important;
    text-align:center!important;
    cursor:pointer!important;
    transition:all 0.25s ease!important;
    background:var(--bg-secondary)!important;
}
.fuzone:hover{
    border-color:var(--primary)!important;
    background:var(--primary-light)!important;
}
.fu-text{color:var(--text-tertiary)!important;font-size:13px!important}

/* ── select (nice-select 오버라이드) ── */
.nice-select{
    display:none!important;
}
select{
    display:block!important;
    width:100%!important;
    padding:12px 16px!important;
    font-size:15px!important;
    background:var(--bg-primary)!important;
    border:1.5px solid var(--border)!important;
    border-radius:var(--radius-md)!important;
    color:var(--text-primary)!important;
    outline:none!important;
    -webkit-appearance:none!important;
    appearance:none!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 01.708 0L8 8.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:right 16px center!important;
    padding-right:42px!important;
}
/* pk-form-select는 새 디자인 페이지용 → width:auto 허용 */
select.pk-form-select{
    width:auto!important;
    display:inline-block!important;
}

/* ── 로딩 스피너 (기존) ── */
#loadingSpinner{
    background-color:rgba(0,0,0,0.3)!important;
}
#loadingSpinner .spinner{
    border:4px solid var(--border)!important;
    border-top-color:var(--primary)!important;
    width:44px!important;height:44px!important;
}

/* ── row/col 그리드 (간이) ── */
.row{display:flex!important;flex-wrap:wrap!important;gap:12px!important;margin:0!important}
.row::before,.row::after{display:none!important}
.col-md-4{flex:1 1 calc(33.33% - 12px)!important;max-width:calc(33.33% - 12px)!important;padding:0!important;float:none!important}
.col-md-6{flex:1 1 calc(50% - 6px)!important;max-width:calc(50% - 6px)!important;padding:0!important;float:none!important}
.col-md-12{flex:1 1 100%!important;max-width:100%!important;padding:0!important;float:none!important}
@media(max-width:600px){
    .col-md-4,.col-md-6{flex:1 1 100%!important;max-width:100%!important}
}

/* ── 기존 유효성 에러 ── */
.region-error{color:var(--danger)!important;font-size:13px!important}
.is-invalid{border-color:var(--danger)!important;background:var(--danger-light)!important}

/* ── table (테이블 스타일) ── */
.table{width:100%!important;border-collapse:collapse!important}
.table th{
    font-weight:600!important;color:var(--text-secondary)!important;
    padding:10px 12px!important;text-align:left!important;font-size:13px!important;
    background:var(--bg-secondary)!important;border:1px solid var(--border-light)!important;
}
.table td{
    padding:10px 12px!important;font-size:14px!important;font-weight:500!important;
    color:var(--text-primary)!important;border:1px solid var(--border-light)!important;
}

/* ── 하단 네비 (기존 nav-bar-wrap2 숨김) ── */
.nav-bar-wrap2{display:none!important}

/* ── 기존 limit-box, clearfix ── */
.limit-box{display:none!important}
.fl-wrap{float:none!important}
.fl-wrap::after{display:none!important}
.clearfix{display:none!important}

/* ── 기타 (기존 이미지 스타일) ── */
.photo-preview img{border-radius:var(--radius-md)!important}
.photo-preview .remove-btn{
    background:var(--danger)!important;border-radius:50%!important;
    width:24px!important;height:24px!important;
}

/* ═══════════════════════════════════════
   추가 호환성 규칙 (setting, ticketList, join, memberEdit2 등)
   ═══════════════════════════════════════ */

/* ── button-group (탭 스타일 버튼) ── */
.button-group{
    display:flex!important;gap:8px!important;margin-bottom:16px!important;
    padding:0!important;
}
.button-group .button{
    flex:1!important;padding:12px 8px!important;border-radius:var(--radius-md)!important;
    border:1.5px solid var(--border)!important;background:var(--bg-primary)!important;
    text-align:center!important;cursor:pointer!important;font-size:13px!important;
    font-weight:600!important;color:var(--text-secondary)!important;
    transition:all 0.25s ease!important;
    box-shadow:none!important;text-shadow:none!important;background-image:none!important;
}
.button-group .button:hover{
    border-color:var(--primary)!important;color:var(--primary)!important;
}
.button-group .button.active{
    background:var(--primary)!important;color:white!important;
    border-color:var(--primary)!important;
    box-shadow:0 2px 8px rgba(24,168,241,0.25)!important;
}

/* ── ticket/promo 관련 ── */
.ticket-page *,
.promo-card *{
    box-shadow:none!important;text-shadow:none!important;
    background-image:none!important;
}
.ticket-page{font-size:14px!important;color:var(--text-primary)!important;}

.promo-card{
    background:var(--bg-primary)!important;border-radius:var(--radius-lg)!important;
    padding:16px!important;box-shadow:var(--shadow-card)!important;
}
.promo-stage{
    display:inline-block!important;padding:2px 10px!important;
    border-radius:var(--radius-full)!important;font-weight:700!important;
    font-size:12px!important;color:white!important;
}
.promo-stage.free{background:var(--success)!important}
.promo-stage.discount{background:#2563eb!important}
.promo-stage.normal{background:var(--danger)!important}
.promo-current{
    display:flex!important;align-items:center!important;
    background:var(--warning-light)!important;border:1px solid #FDE68A!important;
    border-radius:var(--radius-md)!important;padding:10px 12px!important;
    margin-top:12px!important;font-weight:600!important;font-size:13px!important;
}

/* ── 페이지 내 inline <style> 버튼 오버라이드 ── */
.btn.primary{
    background:var(--primary)!important;color:white!important;
    border:none!important;border-radius:var(--radius-md)!important;
}
.chat-button{
    background:var(--primary)!important;
    box-shadow:0 4px 12px rgba(24,168,241,0.3)!important;
}

/* ── 기존 job-card (구형 applyList 등에 남아있을 수 있음) ── */
.job-card{
    background:var(--bg-primary)!important;border-radius:var(--radius-lg)!important;
    padding:16px!important;margin-bottom:12px!important;
    box-shadow:var(--shadow-card)!important;
}
.job-header{display:flex!important;align-items:center!important;margin-bottom:12px!important}
.company-logo{
    width:42px!important;height:42px!important;border-radius:var(--radius-md)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    color:white!important;font-weight:700!important;margin-right:10px!important;
    background:var(--primary)!important;
    box-shadow:none!important;text-shadow:none!important;background-image:none!important;
}
.company-logo img{border-radius:var(--radius-md)!important}
.job-title{font-size:16px!important;font-weight:700!important;color:var(--text-primary)!important}
.company-name{font-size:13px!important;color:var(--text-tertiary)!important}
.job-info{font-size:14px!important;color:var(--text-secondary)!important;margin-bottom:8px!important}
.job-info i{color:var(--text-disabled)!important;margin-right:8px!important}
.job-tags{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:10px 0!important}
.tag{
    display:inline-block!important;background:var(--bg-tertiary)!important;
    border-radius:var(--radius-full)!important;padding:4px 12px!important;
    font-size:12px!important;color:var(--text-secondary)!important;
    box-shadow:none!important;text-shadow:none!important;background-image:none!important;
    border:none!important;
}
.job-actions{
    display:flex!important;border-top:1px solid var(--border-light)!important;
    margin-top:12px!important;padding-top:12px!important;
}
.action-button{
    flex:1!important;text-align:center!important;padding:8px!important;
    font-size:14px!important;cursor:pointer!important;border:none!important;
    background:none!important;color:var(--text-secondary)!important;
    box-shadow:none!important;text-shadow:none!important;background-image:none!important;
}
.action-button:first-child{border-right:1px solid var(--border-light)!important}
.action-button.view-button,.action-button.view-btn{
    color:var(--primary)!important;font-weight:600!important;
}
.unread-dot{
    width:8px!important;height:8px!important;border-radius:50%!important;
    background:var(--danger)!important;display:inline-block!important;
}

/* ── 기존 카드 내 received-count / time-ago ── */
.received-count{color:var(--success)!important;font-weight:600!important;font-size:13px!important}
.time-ago{color:var(--text-disabled)!important;font-size:13px!important}

/* ── swiper / hero slider 영역(index 이전 코드) 숨김 ── */
.hero-slider_wrap,.hero-slider,.listing-slider-wrap{display:none!important}
.slw-sec .section-title{padding:16px!important}
.slw-sec .section-title h2{font-size:18px!important;font-weight:800!important;color:var(--text-primary)!important}

/* ── 기존 booking-list / booking-details ── */
.booking-list{padding:0!important;margin:0!important}
.booking-list-message{padding:0!important;margin:0!important}
.booking-list-message-text h4{font-size:14px!important;font-weight:600!important}
.booking-details{font-size:13px!important;color:var(--text-secondary)!important;margin-bottom:4px!important}
.booking-title{font-weight:600!important;color:var(--text-tertiary)!important}

/* ── 기존 table (simplified) ── */
table.table-bordered{border:1px solid var(--border-light)!important}
table.table-bordered th,table.table-bordered td{border:1px solid var(--border-light)!important}

/* ── 유효성 관련 추가 ── */
.file-size-info{font-size:12px!important;color:var(--text-tertiary)!important}

/* ── 기존 online/live badge ── */
.online-badge{
    background:var(--danger)!important;color:white!important;font-size:11px!important;
    padding:2px 6px!important;border-radius:var(--radius-full)!important;
}
.live-badge{
    background:var(--success)!important;color:white!important;font-size:11px!important;
    padding:2px 6px!important;border-radius:var(--radius-full)!important;
}

/* ── Font Awesome 아이콘 색상 보정 ── */
.fal,.fas,.far,.fa{color:inherit!important}

/* ── profile / card (일반 구조) ── */
.card{
    background:var(--bg-primary)!important;border-radius:var(--radius-lg)!important;
    padding:16px!important;margin-bottom:12px!important;
    box-shadow:var(--shadow-card)!important;border:none!important;
    text-align:left!important;
}
.profile{display:flex!important;align-items:center!important;margin-bottom:10px!important}
.profile-img{
    width:48px!important;height:48px!important;border-radius:var(--radius-md)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    overflow:hidden!important;flex-shrink:0!important;margin-right:12px!important;
    background:var(--primary-light)!important;
}
.profile-img img{width:100%!important;border-radius:var(--radius-md)!important}
.profile-name{font-size:15px!important;font-weight:700!important;color:var(--text-primary)!important;display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
.profile-detail{font-size:13px!important;color:var(--text-tertiary)!important}
.post-content{font-size:14px!important;color:var(--text-secondary)!important;line-height:1.5!important}
.post-time{font-size:12px!important;color:var(--text-disabled)!important}
.post-price{font-size:14px!important;font-weight:700!important;color:var(--primary)!important}

/* ── search-bar (chatList 등 기존 검색바) ── */
.search-bar{
    display:flex!important;align-items:center!important;
    background:var(--bg-tertiary)!important;border-radius:var(--radius-full)!important;
    padding:0 16px!important;height:46px!important;
    border:1.5px solid transparent!important;
    margin-bottom:16px!important;
}
.search-bar:focus-within{
    background:var(--bg-primary)!important;
    border-color:var(--primary)!important;
    box-shadow:0 0 0 4px var(--primary-glow)!important;
}
.search-bar input{
    flex:1!important;border:none!important;background:transparent!important;
    font-size:15px!important;outline:none!important;height:100%!important;
    padding:0!important;
}
.search-bar i{color:var(--text-disabled)!important;margin-right:10px!important}

/* ── #loadingSpinner 기존 스피너 연동 ── */
#loadingSpinner{
    display:none;position:fixed!important;z-index:999999!important;
    top:0!important;left:0!important;width:100%!important;height:100%!important;
    background:rgba(0,0,0,0.3)!important;
    align-items:center!important;justify-content:center!important;
}
#loadingSpinner .spinner{
    border:4px solid var(--border)!important;
    border-top-color:var(--primary)!important;
    width:44px!important;height:44px!important;
    border-radius:50%!important;
    animation:pk-spin 0.8s linear infinite!important;
}

/* ── 모바일 반응형 보강 ── */
@media(max-width:600px){
    .button-group{flex-wrap:wrap!important;}
    .button-group .button{min-width:0!important;font-size:12px!important;padding:10px 6px!important;}
}