@charset "utf-8";
/* ==================================================================================
   [마사지스타] 채용공고 목록 디자인 시스템  (2026-07-18)

   ※ 이 파일은 기존 cdn.tailwindcss.com (브라우저 실시간 컴파일 버전) 을 대체합니다.
     Tailwind CDN 은 운영 사이트에서 쓰면 안 되는 개발용 빌드로,
     매 접속마다 400KB 이상의 JS 를 받아 브라우저에서 CSS 를 만들어내기 때문에
     화면 깜빡임(FOUC)과 속도 저하를 일으킵니다. → 실제 CSS 로 전환.

   ※ 클래스 접두사 rj- : 다른 스킨/테마와 절대 충돌하지 않게 격리
================================================================================== */

.rj{
    --rj-ink:      #111827;
    --rj-ink2:     #4b5563;
    --rj-ink3:     #98a1b0;
    --rj-line:     #e9ebf0;
    --rj-line2:    #f2f4f8;
    --rj-card:     #ffffff;
    --rj-accent:   #6d28d9;
    --rj-accent2:  #8b5cf6;
    --rj-pay:      #0f9d58;
    --rj-radius:   14px;
    --rj-shadow:   0 1px 2px rgba(16,24,40,.04), 0 6px 18px -10px rgba(16,24,40,.16);
    --rj-shadow-h: 0 16px 34px -14px rgba(16,24,40,.28), 0 4px 10px -6px rgba(16,24,40,.10);
    font-size: 14px;
    color: var(--rj-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- 목록 헤더 */
.rj-head{
    display:grid;
    grid-template-columns: 168px 84px minmax(0,1fr) 132px 116px;
    align-items:center;
    gap:14px;
    padding:11px 18px;
    margin-bottom:10px;
    background:linear-gradient(180deg,#fbfcfe,#f5f7fb);
    border:1px solid var(--rj-line);
    border-radius:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.2px;
    color:#6b7280;
}
.rj-head span{ display:block; }
.rj-head .c-pay,
.rj-head .c-state{ text-align:center; }

/* ---------------------------------------------------------------- 목록 본체 */
.rj-list{ display:flex; flex-direction:column; gap:8px; }

/* ---------------------------------------------------------------- 카드 */
.rj-card{
    position:relative;
    display:grid;
    grid-template-columns: 168px 84px minmax(0,1fr) 132px 116px;
    align-items:center;
    gap:14px;
    padding:12px 18px;
    background:var(--rj-card);
    border:1px solid var(--rj-line);
    border-radius:var(--rj-radius);
    box-shadow:var(--rj-shadow);
    transition:transform .2s cubic-bezier(.2,.8,.2,1),
               box-shadow .22s ease, border-color .2s ease;
    overflow:hidden;
}
/* 등급 컬러 바 (왼쪽) */
.rj-card::before{
    content:'';
    position:absolute; left:0; top:0; bottom:0;
    width:4px;
    background:linear-gradient(180deg, var(--rj-accent), var(--rj-accent2));
    opacity:.9;
}
.rj-card:hover{
    transform:translateY(-2px);
    border-color:#dcd7f5;
    box-shadow:var(--rj-shadow-h);
}

/* 등급별 색상 ------------------------------------------------------------- */
.rj-card.tier-signboard  { --rj-accent:#1d4ed8; --rj-accent2:#60a5fa; }
.rj-card.tier-tricolor,
.rj-card.tier-threecolor { --rj-accent:#7e22ce; --rj-accent2:#c084fc; }
.rj-card.tier-oneline    { --rj-accent:#047857; --rj-accent2:#34d399; }
.rj-card.tier-premium,
.rj-card.tier-scroll     { --rj-accent:#6d28d9; --rj-accent2:#a78bfa; }
.rj-card.tier-free       { --rj-accent:#cbd2dd; --rj-accent2:#e2e6ee; }
.rj-card.tier-free::before{ opacity:.6; }

/* 공지 */
.rj-card.notice-card{
    --rj-accent:#dc2626; --rj-accent2:#f87171;
    background:linear-gradient(180deg,#fffbfb,#fff);
    border-color:#fbdada;
}

/* 썸네일이 있는 카드는 맨 왼쪽에 썸네일 칸을 하나 더 둔다
   (썸네일이 한 줄을 통째로 차지해 오른쪽이 비는 문제 해결) */
.rj-card.has-thumb{
    grid-template-columns: 200px 150px 74px minmax(0,1fr) 120px 108px;
}

/* ---------------------------------------------------------------- 썸네일 */
.rj-thumb{
    margin:0;
    line-height:0;
}
.rj-thumb img{
    display:block;
    width:200px;          /* 수정 전 크기 유지 */
    height:80px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid rgba(17,24,39,.08);
    box-shadow:0 8px 20px -12px rgba(16,24,40,.5);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.rj-card:hover .rj-thumb img{ transform:scale(1.015); }

/* ---------------------------------------------------------------- 1) 업체명 */
.rj-shop{ min-width:0; }
.rj-shop .nm{
    display:inline-block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:middle;
    font-size:14.5px;
    letter-spacing:-.3px;
}
.rj-badge{
    display:inline-block;
    margin-top:4px;
    padding:2px 8px;
    border-radius:999px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.3px;
    line-height:1.5;
    color:#fff;
    background:linear-gradient(135deg, var(--rj-accent), var(--rj-accent2));
}
.rj-card.tier-free .rj-badge{ color:#6b7280; background:#f1f3f7; border:1px solid #e5e8ef; }
.rj-card.notice-card .rj-badge{ background:linear-gradient(135deg,#dc2626,#f87171); }

/* ---------------------------------------------------------------- 2) 지역 */
.rj-region{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:0;
    max-width:100%;
    padding:5px 10px;
    border-radius:8px;
    background:#f4f6fa;
    border:1px solid #e6e9f0;
    font-size:12.5px;
    font-weight:700;
    color:#4b5563;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.rj-region.is-empty{ background:transparent; border-color:transparent; color:#c3c9d4; }

/* ---------------------------------------------------------------- 3) 제목+메타 */
.rj-main{ min-width:0; }
.rj-title{
    display:block;
    font-size:15px;
    font-weight:700;
    letter-spacing:-.3px;
    color:#1f2937;
    text-decoration:none;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:color .18s ease;
}
.rj-title:hover{ color:var(--rj-accent); text-decoration:underline; }
.rj-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    margin-top:5px;
}
.rj-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    border-radius:6px;
    background:#f7f8fb;
    border:1px solid #eceef4;
    font-size:11.5px;
    font-weight:700;
    color:#6b7280;
    white-space:nowrap;
}
.rj-chip.cat  { background:#eef2ff; border-color:#dbe2ff; color:#4338ca; }
.rj-chip.sex  { background:#fdf2f8; border-color:#fbd8ea; color:#be1d63; }
.rj-chip.sex.m{ background:#eff6ff; border-color:#d3e4fd; color:#1d4ed8; }
.rj-chip.age  { background:#f5f3ff; border-color:#e5deff; color:#6d28d9; }
.rj-chip.opt  { background:#ecfdf5; border-color:#c9f0dd; color:#047857; }

/* ---------------------------------------------------------------- 4) 급여 */
.rj-pay{
    text-align:center;
    min-width:0;
}
.rj-pay .v{
    display:block;
    font-size:14.5px;
    font-weight:900;
    letter-spacing:-.4px;
    color:var(--rj-pay);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.rj-pay .k{
    display:block;
    font-size:10.5px;
    font-weight:700;
    color:var(--rj-ink3);
    margin-bottom:1px;
}
.rj-pay.is-empty .v{ color:#c3c9d4; font-weight:700; font-size:13px; }

/* ---------------------------------------------------------------- 5) 상태/타이머 */
.rj-state{ text-align:center; min-width:0; }
.jump-timer-wrapper svg{ display:none !important; }   /* 원형 그래프 미사용(기존 동작 유지) */
.timer-text{
    position:static !important;
    transform:none !important;
    text-align:center;
}
.timer-text .time{
    display:block;
    font-size:14.5px;
    font-weight:900;
    letter-spacing:-.3px;
    color:#2563eb;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
}
.timer-text .label{
    display:block;
    font-size:10.5px;
    font-weight:700;
    color:var(--rj-ink3);
    margin-top:1px;
}
.rj-state .st{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:800;
    white-space:nowrap;
}
.rj-state .st.notice { background:#fee2e2; color:#b91c1c; }
.rj-state .st.renew  { background:#dbeafe; color:#1d4ed8; }
.rj-state .st.normal { background:#f3f4f6; color:#9aa2b1; }
.rj-state .sub{ display:block; font-size:10.5px; color:var(--rj-ink3); margin-top:2px; }
/* 타이머 종료 후 JS 가 넣는 박스 */
.rj-timer-done{
    display:flex; align-items:center; justify-content:center;
    min-height:38px; font-size:12px; font-weight:700; color:var(--rj-ink3);
}

/* ---------------------------------------------------------------- 빈 목록 */
.rj-empty{
    text-align:center;
    padding:64px 20px;
    background:var(--rj-card);
    border:1px dashed #dfe3ea;
    border-radius:var(--rj-radius);
}
.rj-empty .ic{ font-size:42px; display:block; margin-bottom:12px; opacity:.55; }
.rj-empty .t{ font-size:16px; font-weight:800; color:#4b5563; margin-bottom:6px; }
.rj-empty .d{ font-size:13px; color:var(--rj-ink3); line-height:1.7; }

/* ==================================================================================
   반응형 — 태블릿
================================================================================== */
@media (max-width: 1100px){
    .rj-head,
    .rj-card{ grid-template-columns: 140px 72px minmax(0,1fr) 108px 96px; gap:10px; padding-left:14px; padding-right:14px; }
    .rj-card.has-thumb{ grid-template-columns: 180px 124px 66px minmax(0,1fr) 100px 92px; }
    .rj-thumb img{ width:180px; }
    .rj-title{ font-size:14.5px; }
}

/* ==================================================================================
   반응형 — 모바일 (카드형으로 전환)
================================================================================== */
@media (max-width: 780px){
    .rj-head{ display:none; }
    .rj-list{ gap:10px; }

    .rj-card{
        display:block;
        padding:14px 15px 13px 18px;
        border-radius:13px;
    }
    .rj-thumb{ margin:0 0 11px; }
    /* 모바일에서도 썸네일 크기는 수정 전(200x80) 그대로 유지 */
    .rj-thumb img{ width:200px; height:80px; max-width:100%; }

    /* 업체명 + 지역을 한 줄로 */
    .rj-shop{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:7px;
        margin-bottom:7px;
    }
    .rj-shop .nm{ max-width:calc(100% - 90px); font-size:14px; }
    .rj-badge{ margin-top:0; }

    .rj-region{
        padding:3px 8px;
        font-size:11.5px;
        border-radius:6px;
    }
    .rj-region.is-empty{ display:none; }

    .rj-title{ white-space:normal; font-size:15px; line-height:1.45; }
    .rj-meta{ margin-top:8px; }

    /* 급여·상태를 하단 바로 */
    .rj-foot{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin-top:11px;
        padding-top:10px;
        border-top:1px dashed var(--rj-line2);
    }
    .rj-pay{ text-align:left; }
    .rj-pay .k{ display:inline; margin-right:5px; }
    .rj-pay .v{ display:inline; font-size:15px; }
    .rj-state{ text-align:right; flex-shrink:0; }
    .timer-text{ text-align:right; }
    .timer-text .time{ font-size:13.5px; }
}

@media (max-width: 400px){
    .rj-card{ padding:12px 12px 11px 16px; }
    .rj-title{ font-size:14.5px; }
    .rj-chip{ font-size:11px; padding:2px 6px; }
}

/* 데스크톱에서는 모바일 전용 래퍼가 레이아웃에 영향 주지 않도록 */
@media (min-width: 781px){
    .rj-foot{ display:contents; }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce){
    .rj-card, .rj-card:hover, .rj-thumb img{
        transition:none !important; transform:none !important;
    }
}