@charset "utf-8";
/* ==================================================================================
   [마사지스타] 채용공고 상세 디자인 시스템  (2026-07-18)
   - style.css 뒤에 로드되어 기존 클래스를 그대로 재정의합니다 (구조/기능 변경 없음)
   - 신규 요소만 rv- 접두사 사용
================================================================================== */

/* ⚠ 변수는 :root 에 정의한다.
   이력서 선택 모달(#resume_modal)과 모바일 고정바(.rv-sticky)는
   .recruit-content-area 바깥에 있어서, 여기에만 변수를 두면 그쪽에서 var() 가 무효가 되고
   background 가 통째로 무시돼 '흰 글씨 + 배경없음' 같은 문제가 생긴다. */
:root{
    --rv-ink:    #111827;
    --rv-ink2:   #4b5563;
    --rv-ink3:   #98a1b0;
    --rv-line:   #e9ebf0;
    --rv-line2:  #f3f5f9;
    --rv-acc:    #6d28d9;
    --rv-acc2:   #8b5cf6;
    --rv-accsoft:#f5f3ff;
    --rv-pay:    #0f9d58;
    --rv-radius: 18px;
    --rv-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px -14px rgba(16,24,40,.18);
}
.recruit-content-area{
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 40px;
    color: var(--rv-ink);
    -webkit-font-smoothing: antialiased;
}

/* ==================================================================================
   1. 상단 히어로 (업체명 / 공고제목 / 태그)
================================================================================== */
.recruit-content-area .title-section{
    position: relative;
    overflow: hidden;
    padding: 34px 30px 28px;
    margin-bottom: 22px;
    border: 1px solid var(--rv-line);
    border-radius: 22px;
    background:
        radial-gradient(900px 320px at 8% -30%, rgba(124,58,237,.16), transparent 62%),
        radial-gradient(700px 300px at 92% -10%, rgba(56,132,255,.13), transparent 60%),
        linear-gradient(180deg,#ffffff 0%,#fbfbff 100%);
    box-shadow: var(--rv-shadow);
}
.recruit-content-area .title-section::before{
    content:'';
    position:absolute; left:0; right:0; top:0; height:4px;
    background:linear-gradient(90deg,#7c3aed,#4f46e5,#0ea5e9);
}
.recruit-content-area .title-section h1{
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.28;
    margin: 0 0 8px;
    color: var(--rv-ink);
}
.recruit-content-area .title-section .subtitle{
    font-size: clamp(15px, 1.6vw, 17.5px);
    font-weight: 600;
    line-height: 1.6;
    color: var(--rv-ink2);
    margin: 0 0 16px;
}

/* 태그 */
.recruit-content-area .view-tag-group{
    display: flex; flex-wrap: wrap; gap: 7px;
    margin: 0 0 6px;
}
.recruit-content-area .view-tag-v2{
    display: inline-flex; align-items: center;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--rv-accsoft);
    border: 1px solid #e5deff;
    color: #6d28d9;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    transition: transform .18s ease, background .2s ease;
}
.recruit-content-area .view-tag-v2:hover{ transform: translateY(-2px); background:#ede9fe; }

/* 핵심요약 바 (신규) ------------------------------------------------------- */
.rv-keybar{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 18px 0 4px;
    padding: 16px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--rv-line);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.rv-key{ text-align: center; padding: 4px 6px; min-width: 0; }
.rv-key + .rv-key{ border-left: 1px solid var(--rv-line2); }
.rv-key .k{
    display: block;
    font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
    color: var(--rv-ink3);
    margin-bottom: 5px;
}
.rv-key .v{
    display: block;
    font-size: 16px; font-weight: 900; letter-spacing: -.4px;
    color: var(--rv-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-key.pay .v{ color: var(--rv-pay); font-size: 17.5px; }

/* ==================================================================================
   2. 정보 카드 3종
================================================================================== */
.recruit-content-area .info-cards-section{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.recruit-content-area .info-card{
    background: #fff;
    border: 1px solid var(--rv-line);
    border-radius: var(--rv-radius);
    padding: 20px 20px 18px;
    box-shadow: var(--rv-shadow);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease;
}
.recruit-content-area .info-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -18px rgba(16,24,40,.28);
}
.recruit-content-area .info-card .card-title{
    display: flex; align-items: center; gap: 9px;
    font-size: 15.5px; font-weight: 900; letter-spacing: -.4px;
    color: var(--rv-ink);
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--rv-line2);
}
.recruit-content-area .info-card .card-title i{
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    margin: 0;
    border-radius: 10px;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--rv-acc), var(--rv-acc2));
    box-shadow: 0 8px 16px -9px rgba(109,40,217,.9);
}
.recruit-content-area .info-card.recruitment-info .card-title i{
    background: linear-gradient(135deg,#1d4ed8,#60a5fa);
    box-shadow: 0 8px 16px -9px rgba(29,78,216,.9);
}
.recruit-content-area .info-card.contact-cta .card-title i{
    background: linear-gradient(135deg,#059669,#34d399);
    box-shadow: 0 8px 16px -9px rgba(5,150,105,.9);
}
.recruit-content-area .info-card ul li{
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--rv-line2);
    font-size: 14px;
}
.recruit-content-area .info-card ul li:last-child{ border-bottom: 0; }
.recruit-content-area .info-card ul li strong{
    flex: 0 0 auto;
    color: var(--rv-ink3);
    font-weight: 700;
    font-size: 13px;
    margin: 0;
}
.recruit-content-area .info-card ul li span{
    text-align: right;
    color: var(--rv-ink);
    font-weight: 600;
    word-break: break-all;
}
.recruit-content-area .info-card ul li a{
    color: var(--rv-acc);
    font-weight: 800;
    text-decoration: none;
}
.recruit-content-area .info-card ul li a:hover{ text-decoration: underline; }
/* 급여 줄 강조 */
.recruit-content-area .info-card ul li.is-pay span{ color: var(--rv-pay); font-weight: 900; font-size: 15px; }

/* ==================================================================================
   3. 문의·지원 CTA
================================================================================== */
.recruit-content-area .cta-message{
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    color: #92400e;
}
.recruit-content-area .cta-message b{ color: #78350f; }
.recruit-content-area .contact-buttons-v2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.recruit-content-area .btn-cta{
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.3px;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .22s ease, filter .2s ease;
}
.recruit-content-area .btn-cta i{ margin: 0; font-size: 15px; }
.recruit-content-area .btn-cta:hover{ transform: translateY(-2px); }
.recruit-content-area .call-btn{
    grid-column: 1 / -1;
    background: linear-gradient(135deg,#059669,#10b981);
    color: #fff;
    font-size: 15.5px;
    padding: 15px 12px;
    box-shadow: 0 12px 24px -12px rgba(5,150,105,.95);
}
.recruit-content-area .sms-btn{
    background: #fff; color: #0f766e; border-color: #b9e6dd;
}
.recruit-content-area .sms-btn:hover{ background:#ecfdf5; }
.recruit-content-area .apply-btn{
    background: linear-gradient(135deg,#4f46e5,#7c3aed);
    color: #fff;
    box-shadow: 0 12px 24px -13px rgba(79,70,229,.95);
}
.recruit-content-area .recommend-btn{
    background: #fff; color: #4b5563; border-color: #dfe3ea;
}
.recruit-content-area .recommend-btn:hover{ background:#f7f8fb; }
.recruit-content-area .btn-cta.fav-btn{ background:#fff; color:#e11d48; border:1px solid #fecdd3; }
.recruit-content-area .btn-cta.fav-btn.faved{ background:linear-gradient(135deg,#f43f5e,#e11d48); color:#fff; border-color:transparent; }

/* ==================================================================================
   4. 콘텐츠 박스 (이미지 / 업체소개 / 안내·지도)
================================================================================== */
.recruit-content-area .content-box{
    background: #fff;
    border: 1px solid var(--rv-line);
    border-radius: var(--rv-radius);
    box-shadow: var(--rv-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}
.recruit-content-area .content-box .box-title{
    display: flex; align-items: center; gap: 10px;
    margin: 0;
    padding: 16px 22px;
    font-size: 16px; font-weight: 900; letter-spacing: -.4px;
    color: var(--rv-ink);
    background: linear-gradient(180deg,#fbfcfe,#fff);
    border-bottom: 1px solid var(--rv-line2);
    border-image: none;
}
.recruit-content-area .content-box .box-title i{
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    margin: 0;
    border-radius: 9px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--rv-acc), var(--rv-acc2));
}
.recruit-content-area .box-text-content{ padding: 22px; }

/* 갤러리 */
.recruit-content-area .gallery-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.recruit-content-area .gallery-item{
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    background: #f4f6fa;
    aspect-ratio: 4 / 3;
}
.recruit-content-area .gallery-image{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.recruit-content-area .gallery-item:hover .gallery-image{ transform: scale(1.06); filter: brightness(1.04); }
.recruit-content-area .gallery-item::after{
    content: '\f00e';
    font-family: 'Font Awesome 5 Free'; font-weight: 900;
    position: absolute; right: 10px; bottom: 9px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: rgba(17,24,39,.55);
    color: #fff; font-size: 12px;
    opacity: 0; transform: translateY(6px);
    transition: all .25s ease;
    pointer-events: none;
}
.recruit-content-area .gallery-item:hover::after{ opacity: 1; transform: translateY(0); }
.recruit-content-area .no-gallery-item{
    grid-column: 1 / -1;
    text-align: center;
    padding: 46px 20px;
    border: 1px dashed #dfe3ea;
    border-radius: 13px;
    color: var(--rv-ink3);
    font-size: 14px;
}
.recruit-content-area .no-gallery-item p{ margin: 0; }

/* 업체소개 본문 */
.recruit-content-area .box-text-content img{ max-width: 100%; height: auto; border-radius: 10px; }
.recruit-content-area .box-text-content{ font-size: 15px; line-height: 1.85; color: var(--rv-ink2); }

/* 2단 컬럼 (이용안내 / 지도) */
.recruit-content-area .inner-two-column{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.recruit-content-area .inner-two-column .column{ padding: 22px; min-width: 0; }
.recruit-content-area .inner-two-column .column + .column{ border-left: 1px solid var(--rv-line2); }
.recruit-content-area .inner-title{
    display: flex; align-items: center; gap: 9px;
    font-size: 15.5px; font-weight: 900; letter-spacing: -.4px;
    color: var(--rv-ink);
    margin: 0 0 16px;
}
.recruit-content-area .inner-title i{
    display: inline-grid; place-items: center;
    width: 27px; height: 27px;
    border-radius: 9px; font-size: 12.5px; color: #fff;
    background: linear-gradient(135deg, var(--rv-acc), var(--rv-acc2));
}

/* 이용안내 목록 */
.recruit-content-area .info-icon-list{ list-style: none; padding: 0; margin: 0; }
.recruit-content-area .info-icon-list li{
    display: flex; align-items: flex-start; gap: 11px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--rv-line2);
    font-size: 14px; line-height: 1.6;
    color: var(--rv-ink2);
}
.recruit-content-area .info-icon-list li:last-child{ border-bottom: 0; }
.recruit-content-area .info-icon-list .icon-wrapper{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 26px; height: 26px;
    margin-right: 0;
    border-radius: 9px;
    background: var(--rv-accsoft);
    color: var(--rv-acc);
    font-size: 12px;
}
/* ⚠ style.css 가 .icon-wrapper i 를 흰색으로 지정해 두어서(흰 배경+흰 아이콘=안 보임)
   반드시 여기서 아이콘 색을 다시 지정해야 한다. */
.recruit-content-area .info-icon-list .icon-wrapper i{
    color: var(--rv-acc);
    font-size: 12.5px;
    line-height: 1;
}

/* 지도 */
.recruit-content-area .map-address-info{
    padding: 13px 15px;
    border-radius: 12px;
    background: #f7f8fb;
    border: 1px solid var(--rv-line);
    margin-bottom: 0;
}
.recruit-content-area .map-address{
    margin: 0;
    font-size: 14px; font-weight: 700; line-height: 1.6;
    color: var(--rv-ink);
}
.recruit-content-area .map-directions-inline{
    display: block;
    margin-top: 5px;
    font-size: 13px; font-weight: 500;
    color: var(--rv-ink3);
}
.recruit-content-area #map_wrapper{
    border: 1px solid var(--rv-line) !important;
    border-radius: 13px;
    overflow: hidden;
}
.recruit-content-area #btn_big_map{
    border-radius: 10px !important;
    border: 1px solid var(--rv-line) !important;
    padding: 8px 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 14px -7px rgba(16,24,40,.5) !important;
}

/* ==================================================================================
   5. 하단 버튼
================================================================================== */
.recruit-content-area .view-actions{
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-top: 22px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--rv-line);
    border-radius: var(--rv-radius);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.recruit-content-area .view-actions .left-buttons,
.recruit-content-area .view-actions .right-buttons{ display: flex; gap: 8px; flex-wrap: wrap; }
.recruit-content-area .view-actions .btn{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 18px;
    border-radius: 11px;
    font-size: 14px; font-weight: 800; letter-spacing: -.2px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .2s ease, background .2s ease;
}
.recruit-content-area .view-actions .btn:hover{ transform: translateY(-2px); }
.recruit-content-area .view-actions .btn-primary{
    background: linear-gradient(135deg, var(--rv-acc), var(--rv-acc2));
    color: #fff; border-color: transparent;
    box-shadow: 0 10px 22px -12px rgba(109,40,217,.95);
}
.recruit-content-area .view-actions .btn-secondary{
    background: #fff; color: var(--rv-ink2); border-color: #dfe3ea;
}
.recruit-content-area .view-actions .btn-secondary:hover{ background:#f7f8fb; }

/* ==================================================================================
   6. 모바일 하단 고정 액션바 (신규)
================================================================================== */
.rv-sticky{
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 9980;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--rv-line);
    box-shadow: 0 -8px 24px -14px rgba(16,24,40,.4);
}
.rv-sticky a{
    flex: 1 1 0;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 8px;
    border-radius: 12px;
    font-size: 14.5px; font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
}
.rv-sticky .s-call{ background:linear-gradient(135deg,#059669,#10b981); color:#fff; }
.rv-sticky .s-apply{ background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; }

/* ==================================================================================
   7. 이력서 선택 모달
================================================================================== */
#resume_modal .modal-window{
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 70px -18px rgba(10,14,28,.55);
}
#resume_modal .modal-header{
    padding: 18px 22px;
    border-bottom: 1px solid var(--rv-line2);
    background: linear-gradient(180deg,#fbfbff,#fff);
}
#resume_modal .modal-header h2{ font-size: 17px; font-weight: 900; margin: 0; letter-spacing: -.4px; }
#resume_modal .modal-footer{ padding: 14px 20px; border-top: 1px solid var(--rv-line2); gap: 8px; }
#resume_modal .btn-modal{
    padding: 11px 18px; border-radius: 11px;
    font-size: 14px; font-weight: 800; border: 1px solid transparent; cursor: pointer;
}
#resume_modal .btn-submit{ background: linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; }
#resume_modal .btn-write-resume{ background:#fff; color:#4f46e5; border-color:#d9d5f7; text-decoration:none; }
#resume_modal .btn-cancel{ background:#f3f4f6; color:#4b5563; border-color:#e3e6ec; }

/* ==================================================================================
   8. 반응형
================================================================================== */
@media (max-width: 900px){
    .recruit-content-area .inner-two-column{ grid-template-columns: 1fr; }
    .recruit-content-area .inner-two-column .column + .column{
        border-left: 0;
        border-top: 1px solid var(--rv-line2);
    }
}
@media (max-width: 640px){
    .recruit-content-area{ padding-bottom: 92px; }   /* 하단 고정바 공간 */
    .recruit-content-area .title-section{ padding: 24px 18px 20px; border-radius: 17px; }
    .recruit-content-area .info-cards-section{ grid-template-columns: 1fr; gap: 12px; }
    .recruit-content-area .info-card{ padding: 17px 16px 15px; border-radius: 15px; }
    .recruit-content-area .content-box{ border-radius: 15px; }
    .recruit-content-area .content-box .box-title{ padding: 14px 16px; font-size: 15px; }
    .recruit-content-area .box-text-content{ padding: 16px; }
    .recruit-content-area .inner-two-column .column{ padding: 16px; }
    .recruit-content-area .gallery-container{ grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 9px; }
    .recruit-content-area #map{ height: 260px !important; }
    .recruit-content-area .view-actions{ padding: 13px 14px; }
    .recruit-content-area .view-actions .btn{ padding: 10px 14px; font-size: 13.5px; }
    .rv-keybar{ grid-template-columns: 1fr 1fr; padding: 13px; gap: 8px; }
    .rv-key + .rv-key{ border-left: 0; }
    .rv-key{ padding: 7px 4px; background:#fafbfd; border-radius:10px; }
    .rv-sticky{ display: flex; }
}

@media (prefers-reduced-motion: reduce){
    .recruit-content-area *{ transition: none !important; animation: none !important; }
    .recruit-content-area .info-card:hover,
    .recruit-content-area .btn-cta:hover{ transform: none !important; }
}