@charset "utf-8";
/* 소방 채용공고 (/jobs) — 2026-08-19 시안(docs/features/work24-jobs/aug-list-*.png)을 커뮤니티 목록 부품 위에 올렸다.
   모든 규칙은 .jb 안에 가둔다. 글자는 px — 휴대폰에서 html 글자 크기가 6.5px 로 줄어 rem 이 어긋난다(front.css 1505행). */
.jb{--jb-orange:var(--point);--jb-blue:#2f6fed;--jb-red:#e5484d;--jb-line:#f0f0f0}

/* 알약 · 요약 띠 */
.jb .jb_kind{margin-top:14px}
/* 알약 줄 오른쪽의 글쓰기 단추 — PC 는 알약과 한 줄, 휴대폰은 가로 꽉 찬 단추 둘 (2026-10-01) */
.jb .jb_kindbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.jb .jb_kindbar .jb_kind{margin-top:0}
.jb .jb_actions{display:flex;gap:8px}
.jb .jb_btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;border-radius:10px;font-size:15px;font-weight:800;white-space:nowrap}
.jb .jb_btn small{font-size:12px;font-weight:600;opacity:.85}
.jb .jb_btn_write{background:var(--jb-orange);color:#fff;box-shadow:0 2px 6px rgba(255,77,0,.25)}
.jb .jb_btn_seek{border:1.5px solid #333;color:#333;background:#fff}
.jb .community_hint{font-size:15px}
.jb .sort_chips a{height:38px;font-size:15px;padding:0 16px}
.jb .jb_summary{margin:12px 0 2px;padding:14px 16px;border:1px solid #ffd9bf;background:#fff8f2;border-radius:12px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:15px;color:#555}
.jb .jb_summary b{color:var(--jb-orange);font-weight:800;margin-right:3px;font-size:17px}
.jb .jb_summary em{margin-left:auto;font-style:normal;font-size:12.5px;color:#9aa2a9}
.jb .jb_label{margin:14px 0 6px;font-size:13.5px;color:#9aa2a9}
.jb .jb_chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.jb .jb_chips li{list-style:none}
.jb .jb_chips a{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px;border:1.5px solid #e5e5e5;border-radius:99px;background:#fff;color:#555;font-size:14px;font-weight:600;white-space:nowrap}
.jb .jb_chips a em{font-style:normal;font-size:12.5px;color:#aaa;font-weight:600}
.jb .jb_chips a.on{border-color:#333;background:#333;color:#fff}
.jb .jb_chips a.on em{color:rgba(255,255,255,.75)}
.jb .jb_roles a.on{border-color:var(--jb-orange);background:var(--jb-orange)}
.jb .jb_sch{margin-top:14px}
.jb .community_sch .sch_box input[type=text]{font-size:16px}

/* 카드 */
.jb .jb_list{margin-top:14px}
.jb .jb_card{display:block}
.jb .jb_top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.jb .jb_tag{display:inline-block;height:23px;padding:0 8px;border-radius:6px;background:#f0f0f0;color:#666;font-size:12.5px;font-weight:800;line-height:23px}
.jb .jb_tag.jb_pin{background:#333;color:#fff}
.jb .jb_list li.jb_pinned>a,.jb .jb_list li.jb_notice>a{background:#fffaf5;border-left:4px solid var(--jb-orange);padding-left:12px}
.jb .jb_tag.r_inspection{background:#fff1e6;color:#e2600a}
.jb .jb_tag.r_construction{background:#fff1e6;color:#e2600a}
.jb .jb_tag.r_safety-manager{background:#e9f0ff;color:var(--jb-blue)}
.jb .jb_tag.r_facility{background:#eaf7ee;color:#1f8a4c}
.jb .jb_tag.r_design{background:#f1ecff;color:#6b3fd9}
.jb .jb_tag.r_etc{background:#f0f0f0;color:#666}
.jb .jb_tag.jb_region{background:#f5f5f5;color:#555;font-weight:600}
.jb .jb_right{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.jb .jb_new{display:inline-block;padding:2px 6px;border-radius:5px;background:linear-gradient(135deg,#ff9a3d,#ff4d00);color:#fff;font-size:11px;font-weight:800;box-shadow:0 1px 3px rgba(255,77,0,.35)}
.jb .jb_dday{font-size:14.5px;font-weight:800;color:#333}
.jb .jb_dday.hot{color:var(--jb-red)}
.jb .jb_dday.soft{color:#9aa2a9;font-weight:600}
.jb .jb_title{margin-top:9px;font-size:17px;font-weight:700;color:#1a1a1a;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.jb .jb_meta,.jb .jb_sub{margin-top:7px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:14px;color:#666;line-height:1.3}
.jb .jb_meta b{color:#222;font-weight:700}
.jb .jb_meta .jb_sal{color:var(--jb-orange);font-weight:800}
.jb .jb_sub{font-size:13.5px;color:#999}
.jb .community_list li{padding:18px 2px}
.jb .dot{width:3px;height:3px;border-radius:50%;background:#ccc;flex:none}
.jb .jb_badge{display:inline-block;height:20px;padding:0 7px;border-radius:5px;font-size:11.5px;font-weight:700;line-height:20px}
.jb .jb_badge.member{border:1px solid #cfe0ff;background:#f3f7ff;color:var(--jb-blue)}
.jb .jb_badge.warn{border:1px solid #f5c2c5;background:#fff5f5;color:var(--jb-red)}
.jb .noPost .jb_link{display:inline-block;margin-top:10px;color:var(--jb-orange);font-weight:700}
.jb .jb_foot{margin-top:18px;padding:14px;border:1px solid var(--jb-line);border-radius:12px;background:#fafafa;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:#555}
.jb .jb_foot a{color:var(--jb-orange);font-weight:700;white-space:nowrap}

@media only screen and (min-width:841px){
    .jb .jb_title{font-size:19px}
    .jb .jb_meta{font-size:15px}
    .jb .jb_sub{font-size:14px}
    .jb .jb_tag{height:24px;line-height:24px;font-size:13px;padding:0 9px}
    .jb .jb_chips a{height:36px;font-size:15px;padding:0 14px}
    .jb .jb_chips a em{font-size:13px}
    .jb .community_list li{padding:20px 2px}
}

/* 상세 — 가독성 시안(docs/features/work24-jobs/3-cmp-detail-*.png, 2026-10-01): 핵심 4칸 → 2열 조건 → 절마다 카드 */
.jb_fixbar{display:none;position:fixed;left:0;right:0;bottom:var(--appnav-h,58px);z-index:90;padding:10px 16px;background:rgba(255,255,255,.96);border-top:1px solid #eee}
.jb_fixbar .jb_go{display:block;width:100%;padding:15px 0;border-radius:12px;background:var(--point);color:#fff;font-size:16.5px;font-weight:800;text-align:center}
.jb .jb_closedbar{margin-top:14px;padding:12px 14px;border-radius:10px;background:#f5f5f5;color:#666;font-size:15px}
.jb .jb_head{margin-top:16px}
.jb .jb_h1{margin-top:12px;font-size:26px;font-weight:800;color:#1a1a1a;line-height:1.3;word-break:keep-all}
.jb .jb_company{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:16px;color:#333}
.jb .jb_company b{font-weight:700;font-size:17px}
.jb .jb_key{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.jb .jb_key div{padding:14px;border:1px solid #eee;border-radius:12px;background:#fafafa}
.jb .jb_key span{display:block;font-size:12.5px;color:#999;margin-bottom:4px}
.jb .jb_key b{display:block;font-size:16px;color:#222;line-height:1.35;word-break:keep-all}
.jb .jb_key .jb_key_sal b,.jb .jb_key div.jb_key_sal b{color:#e2600a}
.jb .jb_basic{margin-top:14px;padding:4px 18px;border:1px solid #eee;border-radius:14px}
.jb .jb_cond{display:grid;grid-template-columns:110px 1fr;gap:0;font-size:15px}
.jb .jb_cond2{grid-template-columns:96px 1fr 96px 1fr}
.jb .jb_cond dt{padding:11px 0;color:#333;font-weight:700;font-size:14.5px;border-bottom:1px dashed #eee}
.jb .jb_cond dd{padding:11px 8px 11px 8px;color:#222;line-height:1.55;word-break:break-all;border-bottom:1px dashed #eee}
.jb .jb_cond dt:nth-last-of-type(1),.jb .jb_cond dd:last-of-type{border-bottom:0}
.jb .jb_cond dd a{color:var(--jb-blue);text-decoration:underline}
.jb .jb_cond dd a[href^="tel:"]{display:inline-block;padding:6px 12px;border:1px solid #cfe0ff;border-radius:8px;background:#f3f7ff;text-decoration:none;font-weight:700}
.jb .jb_sec{margin-top:22px;padding:18px 18px 8px;border:1px solid #eee;border-radius:14px;background:#fff}
.jb .jb_sec h2{font-size:17px;font-weight:800;color:#1a1a1a;margin:0 0 10px;padding-left:12px;border-left:4px solid var(--jb-orange)}
.jb .jb_body{font-size:15.5px;line-height:1.85;color:#333;word-break:break-all;padding-bottom:8px}
.jb .jb_body h4{margin:14px 0 4px;font-size:15px;font-weight:800;color:#1a1a1a}
.jb .jb_body h4:first-child{margin-top:0}
.jb .jb_body ul{margin:0 0 6px;padding-left:18px;list-style:disc}
.jb .jb_body li{margin:2px 0}
.jb .jb_body p{margin:0 0 6px}
.jb .jb_cond dd.jb_body{padding-bottom:11px;font-size:15px;line-height:1.6}
.jb .jb_cond dd.jb_body p,.jb .jb_cond dd.jb_body ul{margin:0}
.jb .jb_apply{margin-top:28px;padding:18px 16px;border:1px solid #ffd9bf;border-radius:14px;background:#fff8f2;text-align:center}
.jb .jb_go{display:block;width:100%;padding:15px 0;border-radius:12px;background:var(--jb-orange);color:#fff;font-size:16.5px;font-weight:800;text-align:center}
.jb .jb_go.soft{background:#333}
.jb .jb_apply_note{margin-top:8px;font-size:13.5px;color:#8a5a00}
.jb .jb_share{margin-top:10px;padding:8px 14px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#555;font-size:13.5px;cursor:pointer}
.jb .jb_related{padding-bottom:16px}
.jb .jb_related ul{list-style:none;margin:0;padding:0;border-top:1px solid #eee}
.jb .jb_related li{border-bottom:1px solid var(--jb-line)}
.jb .jb_related li a{display:flex;align-items:center;gap:8px;padding:12px 2px;font-size:15px;color:#222;min-width:0}
.jb .jb_related li a span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb .jb_related li a em{flex:none;font-style:normal;font-size:13px;color:#999}
.jb .jb_more{display:inline-block;margin-top:10px;color:var(--jb-orange);font-weight:700;font-size:14.5px}
.jb .jb_source{margin-top:30px;padding:14px;border-radius:10px;background:#f7f7f7;font-size:13px;color:#777;line-height:1.6}

/* 구인글 쓰기(/jobs/write) — 2026-10-01 2차 */
.jb .jb_write_lead{margin-top:8px;font-size:15px;color:#666}
.jb .jb_preview{background:#fff8f2;border:1px solid #ffd9bf;color:#8a5a00}
.jb .jb_ok{margin-top:14px;padding:12px 14px;border-radius:10px;background:#eef7ee;border:1px solid #cfe6d2;color:#2b7a3b;font-size:15px;font-weight:700}
.jb .jb_offer_lead{font-size:15px;color:#555;line-height:1.55}
.jb .jb_key .jb_key_wide{grid-column:span 2}
.jb .jb_err{margin-top:14px;padding:12px 14px;border-radius:10px;background:#fff5f5;border:1px solid #f5c2c5;color:var(--jb-red);font-size:15px;font-weight:700}
.jb .jb_form .jb_sec{padding-bottom:18px}
.jb .jb_f{display:block;margin-top:14px}
.jb .jb_f>span,.jb .jb_f label>span{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:#333}
.jb .jb_f em{font-style:normal;font-size:12px;color:var(--jb-orange);margin-left:4px}
.jb .jb_f input[type=text],.jb .jb_f input[type=tel],.jb .jb_f input[type=date],.jb .jb_f select,.jb .jb_f textarea{width:100%;box-sizing:border-box;height:46px;padding:0 12px;border:1.5px solid #ddd;border-radius:10px;background:#fff;font-size:16px;color:#222}
.jb .jb_f textarea{height:auto;padding:12px;line-height:1.6}
.jb .jb_f input:focus,.jb .jb_f select:focus,.jb .jb_f textarea:focus{border-color:var(--jb-orange);outline:0}
.jb .jb_f input:disabled{background:#f3f3f3;color:#aaa}
.jb .jb_f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jb .jb_f2>label{display:block}
.jb .jb_radios{display:flex;flex-wrap:wrap;gap:8px}
.jb .jb_radios label{position:relative}
.jb .jb_radios input{position:absolute;opacity:0;width:0;height:0}
.jb .jb_radios b{display:inline-block;height:38px;padding:0 15px;border:1.5px solid #e5e5e5;border-radius:99px;line-height:36px;font-size:14.5px;font-weight:600;color:#555;cursor:pointer}
.jb .jb_radios input:checked+b{border-color:var(--jb-orange);background:var(--jb-orange);color:#fff}
.jb .jb_radios input:focus-visible+b{outline:2px solid #333}
/* 안내 글 — 13px 회색은 안 읽혔다 (2026-10-01 사용자). 글쓰기 서식의 안내는 15px 상자로 */
.jb .jb_notice_box{margin-top:14px;padding:13px 15px;border-radius:10px;background:#f6f8fb;border:1px solid #e3e9f2;font-size:15px;line-height:1.6;color:#333}
.jb .jb_notice_box a{color:var(--jb-blue);font-weight:700;text-decoration:underline}
.jb .jb_notice_box.warn{background:#fff5f5;border-color:#f5c2c5;color:var(--jb-red);font-weight:700}
.jb .jb_form .jb_guide{margin-top:8px;font-size:14.5px;color:#555;line-height:1.55}
.jb .jb_missing{color:var(--jb-red);font-weight:700}
.jb .jb_hint_s{font-size:13px;font-weight:500;color:#888;margin-left:6px}
.jb .jb_toggle{display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer}
.jb .jb_toggle>span{font-size:14px;font-weight:700;color:#333}
.jb .jb_toggle input{position:absolute;opacity:0;width:0;height:0}
.jb .jb_toggle b{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border:1.5px solid #ddd;border-radius:10px;background:#fff;font-size:16px;font-weight:700;color:#555}
.jb .jb_toggle b i{width:20px;height:20px;border:2px solid #bbb;border-radius:5px;background:#fff;box-sizing:border-box}
.jb .jb_toggle input:checked+b{border-color:var(--jb-orange);background:#fff4ec;color:#e2600a}
.jb .jb_toggle input:checked+b i{border-color:var(--jb-orange);background:var(--jb-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='white' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") center/14px no-repeat}
.jb .jb_toggle input:focus-visible+b{outline:2px solid #333}
.jb .jb_toggle small{font-size:13px;color:#888}
.jb .jb_check{display:flex;align-items:center;gap:8px;align-self:end;height:46px;font-size:15px;color:#333}
.jb .jb_check input{width:20px;height:20px}
.jb .jb_check small{color:#999;font-size:12.5px}
.jb .jb_form .input_guid{margin-top:8px;font-size:13px;color:#888;line-height:1.5}
.jb .jb_form .jb_go{border:0;cursor:pointer}
.jb .jb_mine ul{margin:0;padding:0 0 10px;list-style:none}
.jb .jb_mine li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed #eee;font-size:15px}
.jb .jb_mine li a{color:#222;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb .jb_state{flex:none;font-size:12.5px;padding:3px 8px;border-radius:6px;background:#eef7ee;color:#2b7a3b;font-weight:700}
.jb .jb_state.held{background:#fff8f2;color:#8a5a00}

@media only screen and (max-width:840px){
    .jb_fixbar{display:block}
    .jb .jb_actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .jb .jb_btn{height:46px;justify-content:center;padding:0 10px;font-size:15.5px}
    .jb.jb_detail #contents{padding-bottom:80px}
    .jb .jb_apply .jb_go{display:none}
    /* 쓰기·구직 화면은 아래 고정 단추(jb_fixbar)가 없다 — 단추를 그 자리에 둔다 */
    .jb.jb_write .jb_apply .jb_go,.jb.jb_seeking .jb_apply .jb_go{display:block}
    .jb .jb_h1{font-size:22px}
    .jb .jb_key{grid-template-columns:1fr 1fr}
    .jb .jb_basic{padding:4px 14px}
    .jb .jb_cond,.jb .jb_cond2{grid-template-columns:82px 1fr}
    .jb .jb_sec{padding:14px 14px 4px}
}