*{box-sizing:border-box}

html,body{
    margin:0;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#fff7ef;
    font-family:'Noto Sans Thai','Noto Sans KR',Arial,sans-serif;
    color:#111827;
}

a{color:inherit;text-decoration:none}

/* 기본 레이아웃 */
.job-page{
    min-height:100vh;
    padding:24px 0 92px;
}

.job-wrap{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:0 18px;
}

/* 상단 */
.job-top{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.job-home-btn{
    display:none !important;
}

.job-title-main{
    margin:0;
    font-size:34px;
    font-weight:900;
    line-height:1.15;
    letter-spacing:-.8px;
}

.job-write-btn,
.job-black-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:46px;
    padding:0 22px;
    background:#ff7a00;
    color:#fff;
    border:0;
    border-radius:16px;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

/* 탭 */
.job-tabs{
    display:flex;
    gap:8px;
    margin:18px 0;
    overflow-x:auto;
    padding-bottom:2px;
}

.job-tabs a{
    flex-shrink:0;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid #f0dfd1;
    background:#fff;
    font-weight:900;
    color:#5b4636;
}

.job-tabs a.active{
    background:#ff6a00;
    color:#fff;
    border-color:#ff6a00;
}

/* 목록 */
.job-list{
    display:grid;
    gap:14px;
}

.job-card{
    display:flex;
    align-items:center;
    gap:16px;
    min-height:112px;
    background:#fff;
    border:1px solid #f0dfd1;
    border-radius:26px;
    padding:15px 18px;
    box-shadow:0 12px 28px rgba(0,0,0,.045);
    transition:.22s;
}

.job-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(255,106,0,.13);
    border-color:#ffc48d;
}

.job-thumb{
    width:82px;
    height:82px;
    flex:0 0 82px;
    border-radius:20px;
    overflow:hidden;
    background:#fff1df;
}

.job-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.job-info{
    flex:1;
    min-width:0;
}

.job-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
}

.job-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.job-badge.hire{background:#e8f2ff;color:#1264c8}
.job-badge.seek{background:#fff0e5;color:#d85b00}

.job-views,
.job-date{
    color:#374151;
    font-size:12px;
    font-weight:800;
}

.job-item-title{
    margin:5px 0 7px;
    font-size:21px;
    font-weight:900;
    letter-spacing:-.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.job-meta{
    color:#374151;
    font-size:14px;
    font-weight:800;
}

.job-empty{
    background:#fff;
    border:1px solid #f0dfd1;
    border-radius:24px;
    padding:28px;
    text-align:center;
    color:#777;
    font-weight:800;
}

/* 상세 */
.job-back{
    display:inline-flex;
    margin-bottom:14px;
    font-size:15px;
    font-weight:900;
    color:#5b4636;
}

.job-view-card,
.job-form-card{
    width:100%;
    background:#fff;
    border:1px solid #f0dfd1;
    border-radius:30px;
    padding:22px;
    box-shadow:0 14px 34px rgba(0,0,0,.055);
    overflow:hidden;
}

.job-hero-img{
    width:100%;
    height:300px;
    border-radius:24px;
    overflow:hidden;
    background:#fff1df url('/localmarket/assets/img/job_default_person.png') center center no-repeat;
    background-size:120px;
    margin-bottom:20px;
}

.job-hero-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.job-detail-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    border-bottom:1px solid #f3e4d7;
    padding-bottom:18px;
}

.job-detail-title{
    margin:8px 0 0;
    font-size:32px;
    line-height:1.3;
    letter-spacing:-1px;
    font-weight:900;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.job-view-count{
    flex-shrink:0;
    background:#fff7ed;
    color:#374151;
    border:1px solid #ffe2c2;
    border-radius:999px;
    padding:10px 14px;
    font-size:13px;
    font-weight:900;
}

.job-meta-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:18px;
}

.job-meta-box{
    min-width:0;
    background:#fffaf5;
    border:1px solid #f3e4d7;
    border-radius:18px;
    padding:15px;
}

.job-meta-box span{
    display:block;
    color:#374151;
    font-size:13px;
    font-weight:900;
    margin-bottom:7px;
}

.job-meta-box b{
    display:block;
    color:#111827;
    font-size:15px;
    font-weight:900;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.job-detail-content{
    min-height:170px;
    margin-top:16px;
    padding:20px 2px;
    white-space:pre-wrap;
    word-break:break-word;
    overflow-wrap:anywhere;
    line-height:1.7;
    font-size:16px;
    font-weight:650;
    color:#333;
}

.job-contact-box{
    width:100%;
    margin-top:8px;
    background:#fff7ed;
    border:1px solid #ffe2c2;
    border-radius:20px;
    padding:16px 18px;
    font-size:16px;
    font-weight:900;
    display:flex;
    align-items:center;
    gap:8px;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.job-contact-box span{
    color:#111827;
    font-weight:900;
}

.job-action-row{
    width:100%;
    display:grid;
    grid-template-columns:1fr 120px;
    gap:10px;
    margin-top:20px;
}

.job-chat-btn,
.job-list-btn{
    min-width:0;
    width:100%;
    height:52px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:900;
}

.job-chat-btn{
    background:linear-gradient(135deg,#ff8a00,#ff5a00);
    color:#fff;
    box-shadow:0 12px 24px rgba(255,106,0,.22);
}

.job-list-btn{
    border:1px solid #ead8c8;
    background:#fff;
    color:#333;
}

.job-owner-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:14px;
}

.job-owner-actions a{
    height:42px;
    border-radius:999px;
    background:#fafafa;
    border:1px solid #eee;
    color:#666;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

/* 입력 */
.job-label{
    display:block;
    font-weight:900;
    margin:14px 0 7px;
    color:#333;
}

.job-input,
.job-select,
.job-textarea{
    width:100%;
    border:1px solid #ead8c8;
    background:#fff;
    border-radius:16px;
    padding:14px;
    font-size:15px;
    font-weight:800;
    margin-bottom:12px;
    outline:none;
}

.job-textarea{
    min-height:160px;
    resize:vertical;
}

.job-submit{
    display:block;
    width:100%;
    max-width:500px;
    height:52px;
    margin:18px auto 0;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#ff8a00,#ff5a00);
    color:#fff;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
}

.job-error{
    background:#ffecec;
    color:#d10000;
    padding:12px 14px;
    border-radius:14px;
    margin-bottom:14px;
    font-weight:900;
}

/* 채팅 */
.chat-wrap{
    width:min(1120px, calc(100% - 32px));
    margin:24px auto 20px;
    background:#fffaf5;
    border:1px solid #f0dfd1;
    border-radius:30px;
    padding:18px;
    box-shadow:0 14px 34px rgba(0,0,0,.055);
}

.chat-job-head{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border:1px solid #f3e4d7;
    border-radius:22px;
    padding:12px;
    margin-bottom:14px;
}

.chat-job-img{
    width:64px;
    height:64px;
    flex:0 0 64px;
    border-radius:18px;
    overflow:hidden;
    background:#fff1df;
}

.chat-job-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.chat-job-info{
    flex:1;
    min-width:0;
}

.chat-job-label{
    font-size:13px;
    font-weight:900;
    color:#ff6a00;
    margin-bottom:4px;
}

.chat-job-head h2{
    margin:0;
    font-size:20px;
    font-weight:900;
    letter-spacing:-.5px;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.chat-job-users{
    margin-top:5px;
    font-size:13px;
    font-weight:800;
    color:#6b7280;
}

.chat-job-actions{
    margin-top:8px;
    display:flex;
    gap:8px;
}

.chat-job-actions a{
    height:28px;
    padding:0 11px;
    border-radius:999px;
    background:#fff7ed;
    border:1px solid #ffd6b0;
    color:#ff5a00;
    font-size:12px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.chat-box{
    width:100%;
    height:520px;
    overflow-y:auto;
    background:#fffaf5;
    border:1px solid #f3e4d7;
    border-radius:24px;
    padding:18px;
    margin-bottom:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.msg{
    display:block;
    width:fit-content;
    max-width:70%;
    padding:12px 15px;
    margin:0;
    border-radius:20px;
    background:#fff;
    border:1px solid #ead8c8;
    box-shadow:0 8px 18px rgba(0,0,0,.05);
    font-weight:800;
    line-height:1.45;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.msg small{
    display:block;
    margin-top:5px;
    color:#9ca3af;
    font-size:11px;
}

.mine,
.msg.mine{
    align-self:flex-end;
    background:#ff6a00;
    color:#fff;
    border-color:#ff6a00;
    border-bottom-right-radius:6px;
}

.msg:not(.mine){
    align-self:flex-start;
    border-bottom-left-radius:6px;
}

.mine small{color:rgba(255,255,255,.75)}

.chat-form{
    display:grid;
    grid-template-columns:1fr 120px;
    gap:10px;
    margin:0;
}

.chat-form textarea{
    width:100%;
    height:70px;
    border:1px solid #ead8c8;
    border-radius:20px;
    padding:15px;
    font-size:16px;
    resize:none;
    outline:none;
}

.chat-form button{
    width:120px;
    height:70px;
    border:0;
    border-radius:20px;
    background:#ff6a00;
    color:#fff;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
}

/* 하단 메뉴 */
.job-bottom-space{
    display:none;
}

.bottom-nav,
.job-bottom-nav{
    position:fixed;
    left:50%;
    right:auto;
    bottom:0;
    transform:translateX(-50%);
    width:min(1120px, calc(100% - 40px));
    height:68px;
    min-height:68px;
    background:#fff;
    border:1px solid #eee;
    border-bottom:0;
    border-radius:24px 24px 0 0;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    z-index:99999;
    box-shadow:0 -8px 24px rgba(0,0,0,.08);
    overflow:hidden;
    padding:0;
}

.bottom-nav a,
.job-bottom-nav a{
    height:68px;
    min-height:68px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:0;
    color:#999;
    font-size:12px;
    font-weight:900;
    line-height:1.1;
    text-align:center;
}

.bottom-nav a span,
.bottom-nav .ico,
.job-bottom-nav a span,
.job-bottom-nav .ico{
    font-size:21px;
    line-height:1;
    margin:0;
}

.bottom-nav a.active,
.job-bottom-nav a.active{
    color:#ff7a00;
}

/* 모바일 */
@media(max-width:768px){

    body{
        font-size:14px;
    }

    .job-page{
        padding:10px 10px 78px;
    }

    .job-wrap{
        width:100%;
        max-width:100%;
        padding:0;
    }

    .job-top{
        margin-bottom:14px;
        align-items:center;
    }

    .job-title-main{
        font-size:24px;
    }

    .job-write-btn,
    .job-black-btn{
        height:40px;
        padding:0 14px;
        border-radius:14px;
        font-size:13px;
    }

    .job-tabs{
        margin:14px 0;
    }

    .job-tabs a{
        padding:9px 13px;
        font-size:13px;
    }

    .job-card{
        min-height:92px;
        padding:11px;
        border-radius:20px;
        gap:10px;
    }

    .job-thumb{
        width:66px;
        height:66px;
        flex-basis:66px;
        border-radius:16px;
    }

    .job-badge{
        padding:4px 8px;
        font-size:11px;
    }

    .job-item-title{
        font-size:16px;
        margin:4px 0 5px;
    }

    .job-meta{
        font-size:12px;
    }

    .job-date,
    .job-views{
        font-size:11px;
    }

    .job-back{
        margin-bottom:10px;
        font-size:14px;
    }

    .job-view-card,
    .job-form-card{
        border-radius:20px;
        padding:12px;
    }

    .job-hero-img{
        height:180px;
        border-radius:18px;
        margin-bottom:14px;
    }

    .job-detail-head{
        display:block;
        padding-bottom:14px;
    }

    .job-detail-title{
        font-size:22px;
        line-height:1.28;
        letter-spacing:-.5px;
    }

    .job-view-count{
        display:inline-flex;
        margin-top:10px;
        padding:8px 12px;
        font-size:12px;
    }

    .job-meta-grid{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
        margin-top:14px;
    }

    .job-meta-box{
        padding:10px;
        border-radius:14px;
    }

    .job-meta-box span{
        font-size:12px;
        margin-bottom:5px;
    }

    .job-meta-box b{
        font-size:14px;
    }

    .job-detail-content{
        min-height:120px;
        margin-top:12px;
        padding:14px 0;
        font-size:14px;
        line-height:1.55;
    }

    .job-contact-box{
        padding:12px 14px;
        border-radius:16px;
        font-size:15px;
        display:block;
    }

    .job-action-row{
        grid-template-columns:1fr 92px;
        gap:8px;
        margin-top:14px;
    }

    .job-chat-btn,
    .job-list-btn{
        height:46px;
        font-size:14px;
    }

    .job-owner-actions a{
        height:40px;
        font-size:13px;
    }

    .job-input,
    .job-select,
    .job-textarea{
        padding:12px;
        border-radius:14px;
        font-size:14px;
    }

    .job-textarea{
        min-height:130px;
    }

    .job-submit{
        height:48px;
        font-size:15px;
    }

    .chat-wrap{
        width:100%;
        margin:8px 0 0;
        padding:12px;
        border-radius:20px;
    }

    .chat-job-head{
        padding:10px;
        gap:10px;
        border-radius:18px;
        margin-bottom:10px;
    }

    .chat-job-img{
        width:50px;
        height:50px;
        flex-basis:50px;
        border-radius:14px;
    }

    .chat-job-label{
        font-size:12px;
    }

    .chat-job-head h2{
        font-size:16px;
        line-height:1.25;
    }

    .chat-job-users{
        font-size:12px;
    }

    .chat-job-actions a{
        height:26px;
        padding:0 9px;
        font-size:11px;
    }

    .chat-box{
        height:calc(100vh - 300px);
        min-height:240px;
        padding:12px;
        border-radius:18px;
        margin-bottom:8px;
    }

    .msg{
        max-width:82%;
        padding:10px 12px;
        border-radius:16px;
        font-size:14px;
    }

    .chat-form{
        grid-template-columns:1fr 82px;
        gap:8px;
    }

    .chat-form textarea{
        height:56px;
        border-radius:16px;
        padding:12px;
        font-size:14px;
    }

    .chat-form button{
        width:82px;
        height:56px;
        border-radius:16px;
        font-size:14px;
    }

    .bottom-nav,
    .job-bottom-nav{
        left:0;
        right:0;
        bottom:0;
        transform:none;
        width:100%;
        max-width:100%;
        height:66px;
        min-height:66px;
        border-radius:0;
    }

    .bottom-nav a,
    .job-bottom-nav a{
        height:66px;
        min-height:66px;
        font-size:11px;
        gap:3px;
    }

    .bottom-nav a span,
    .bottom-nav .ico,
    .job-bottom-nav a span,
    .job-bottom-nav .ico{
        font-size:20px;
    }
}
.job-detail-content{
    min-height:auto !important;
    margin:12px 0 18px !important;
    padding:0 2px !important;
    line-height:1.45 !important;
    font-size:16px;
}
/* ==========================
   PC에서는 하단메뉴 제거
========================== */
@media(min-width:769px){

    .bottom-nav,
    .job-bottom-nav{
        display:none !important;
    }

    .job-page{
        padding-bottom:20px !important;
    }
}

/* ==========================
   모바일만 하단메뉴
========================== */
@media(max-width:768px){

    .bottom-nav,
    .job-bottom-nav{
        display:grid !important;
    }

}
/* job_view.php - PC 하단 메뉴 숨김 */
@media(min-width:769px){

    .bottom-nav,
    .job-bottom-nav{
        display:none !important;
        height:0 !important;
        overflow:hidden !important;
    }

    .job-page{
        padding-bottom:30px !important;
    }
}

/* 모바일에서만 하단 메뉴 표시 */
@media(max-width:768px){

    .bottom-nav,
    .job-bottom-nav{
        display:grid !important;
    }

    .job-page{
        padding-bottom:78px !important;
    }
}
@media(max-width:768px){

    .logo-text-sub,
    .logo-sub,
    .market-sub{
        display:none !important;
    }

}
/* 모바일 jobs / chat 폭 최종 */
@media(max-width:768px){

    .job-page,
    .chat-page{
        width:100% !important;
        max-width:100% !important;
        padding:10px 10px 78px !important;
    }

    .job-wrap,
    .chat-wrap{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding:0 !important;
    }

    .market-header,
    .job-view-card,
    .job-form-card,
    .chat-wrap{
        width:100% !important;
        max-width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}