@charset "utf-8";

/* 입력 박스 텍스트 필드에서 한글 입력 모드 활성화 */
.write-box input[type="text"]:not(#od_hp):not(#od_pay) {ime-mode:active}

/* =============================== 메인 목록 */
#job{max-width:var(--main-size);width:100%;margin:0 auto;padding:40px 0 80px}

/* 공지 롤링 */
#job .notice-roll{display:flex;align-items:center;gap:20px;margin-top:70px;padding:18px 20px;border:1px solid #E5E7EB;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
#job .notice-label{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;border-radius:100px;background:#EFF6FF;color:var(--primary,#1E56F0);font-size:20px;font-weight:700}
#job .notice-list{flex:1;min-width:0;height:24px;margin:0;overflow:hidden}
#job .notice-list ul{margin:0;padding:0;list-style:none}
#job .notice-list li{height:24px;display:flex;align-items:center}
#job .notice-list li a{width:100%}
#job .notice-list li a p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#job .notice-list a{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600;line-height:1.2;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#job .notice-list a svg{flex-shrink:0;width:20px;height:20px;stroke:#94A3B8}

/* 상단 */
#job .btn-admin{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:16px}
#job .btn-admin a{padding:5px 12px;border-radius:5px;font-size:14px;font-weight:600;border:1px solid #EF4444;color:#EF4444;background:#FEF2F2}
#job .job-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 5px;margin-bottom:26px}
#job .job-total{margin:0;font-size:17px;font-weight:600;color:#1e293b;line-height:1.4}
#job .job-open{font-size:14px;font-weight:600}
#job .job-open label{display:flex;align-items:center;gap:7px;cursor:pointer}
#job .job-open label input[type="checkbox"] + .check-custom{display:flex;align-items:center;justify-content:center;width:18px;aspect-ratio:1;border-radius:4px;border:1px solid #cbd5e1;background-color:rgba(255,255,255,0.5);transform:translateZ(0);will-change:transform}
#job .job-open label input[type="checkbox"] + .check-custom svg{width:14px;height:14px;stroke-width:3px;stroke:#fff;opacity:0;visibility:hidden}
#job .job-open label input[type="checkbox"]:checked + .check-custom{background-color:var(--primary);border-color:var(--primary)}
#job .job-open label input[type="checkbox"]:checked + .check-custom svg{opacity:1;visibility:visible}

/* 목록 */
#job .job-list{display:flex;flex-direction:column;gap:23px;margin-bottom:90px}
#job .job-item{position:relative;border:1px solid #E5E7EB;border-left:6px solid var(--primary);border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s}
#job .job-item:hover{box-shadow:0 6px 18px rgba(30,86,240,.1);transform:translateY(-1px)}

#job .job-item.state-interview{border-left-color:#EF4444}
#job .job-item.state-close{border-left-color:#D1D5DB;background:#F9FAFB;opacity:.55}
#job .job-item.state-close:hover{box-shadow:none;transform:none}
#job .job-item.state-cancel{border-left-color:#111827;opacity:.45}
#job .job-link{display:flex;align-items:stretch;gap:33px;padding:30px 0 30px 30px;color:inherit;text-decoration:none}

#job .job-main{flex:1;min-width:0}
#job .job-link .mo-date-new .job-new{display:none}
#job .job-head{display:flex;align-items:center;justify-content:space-between;gap:12px 10px;margin-bottom:20px}
#job .job-head .fl-l{display:flex;gap:10px}
#job .job-tags{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
#job .job-tags li, #job .job-new{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border-radius:6px}
#job .job-tags li:not(.job-badge,.job-new){background:#F3F4F6;color:#334155;font-size:20px;font-weight:600;line-height:1}
#job .job-new{background:linear-gradient(110deg, #2d6bff, #4f5dff, #a03dff, #4f5dff, #2d6bff);background-size:300% 100%;animation:newBg 6s ease-in-out infinite;color:#fff;font-size:19px;font-weight:700}
#job .job-date{flex-shrink:0;color:#94A3B8;font-size:15px;display:flex;align-items:center;gap:6px}
#job .job-tags li.job-badge{border-radius:100px;font-size:20px;font-weight:700}
/* 상태 구분 */
#job .badge-interview{display:flex;align-items:center;gap:3px;height:36px;padding:0 12px;border:1px solid #EF4444;color:#EF4444;background:#FEF2F2}
#job .badge-interview .ic-interview{display:flex;align-items:center;gap:3px}
#job .badge-interview .ic-interview > *{width:4px;aspect-ratio:1;border-radius:50px;background-color:#ef4646;animation:dotFlow 1.5s ease-in-out infinite}
#job .badge-interview .ic-interview .point{order:-1}
#job .badge-interview .ic-interview::before, #job .badge-interview .ic-interview::after{content:"";width:4px;aspect-ratio:1;border-radius:50px;background-color:#ef4646;animation:dotFlow 1.7s ease-in-out infinite}
#job .badge-interview .ic-interview::before{animation-delay:.25s}
#job .badge-interview .ic-interview::after{animation-delay:.5s}
#job .badge-close{border:1px solid #CBD5E1;color:#475569;background:#F1F5F9}
#job .badge-cancel{border:1px solid #111827;color:#111827;background:#fff}
#job .badge-applied{border:1px solid var(--primary,#1E56F0);color:var(--primary,#1E56F0);background:#EFF6FF}
@keyframes newBg{0%, 100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes dotFlow{0%, 100%{opacity:.25}40%{opacity:1}}
#job .job-title{font-size:22px;font-weight:700;line-height:1.5;color:#0F172A;word-break:break-all}
#job .job-info{margin:0;font-size:15px;color:#4B5563;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#job .job-pay{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:200px;width:100%;border-left:1px solid #e0e0e0}
#job .pay-label{font-size:15px;font-weight:600;color:#0f172a}
#job .pay-amount{padding:8px 0;font-size:26px;font-weight:700;line-height:1;color:var(--primary)}
#job .state-close .pay-amount{color:#9CA3AF}
#job .pay-etc{font-size:22px;color:#64748b;font-weight:500}
#job .job-empty{padding:60px 0;border:1px dashed #D1D5DB;border-radius:12px;text-align:center;color:#6B7280}

/* 페이지네이션 */
#job .pg_wrap{clear:none;float:unset;display:flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(0,0,0,0.05);width:max-content;margin:0 auto;background-color:#fff}
#job .pg_wrap .pg{display:flex;gap:6px}
#job .pg_wrap .pg > *{cursor:pointer}
#job .pg_wrap .pg_page, #job .pg_wrap .pg_current{display:flex;align-items:center;justify-content:center;min-width:36px;height:auto;aspect-ratio:1;line-height:1;padding:0;border-radius:8px;background-color:transparent;color:#334155;border:none;font-size:15px;font-weight:600}
#job .pg_wrap .pg_current{background-color:var(--primary);color:#fff;font-weight:700}
#job .pg_wrap .pg_start{background:url(./btn--pg-first.svg) no-repeat 50% 50%}
#job .pg_wrap .pg_end{background:url(./btn--pg-end.svg) no-repeat 50% 50%}
#job .pg_wrap .pg_next{background:url(./btn--pg-next.svg) no-repeat 50% 50%}
#job .pg_wrap .pg_prev{background:url(./btn--pg-prev.svg) no-repeat 50% 50%}
 
/* 검색설정 */
#filter{position:absolute;top:var(--hd-height);left:0;z-index:50;width:100%;padding:42px 20px 50px;background:#fff;border-top:1px solid #E5E7EB;max-height:0;opacity:0;visibility:hidden;transition:max-height .35s ease, padding .35s ease, opacity .35s ease, visibility 0s linear .35s}
#filter.is-open{max-height:calc(100vh - var(--hd-height));box-shadow:0 0 0 1px rgba(15, 23, 42, 0.04), 0 25px 50px -12px rgba(15, 23, 42, 0.18);opacity:1;visibility:visible;transition:max-height .35s ease, padding .35s ease, opacity .35s ease, visibility 0s}
#filter form{max-width:var(--main-size);width:100%;margin:0 auto;opacity:0;visibility:hidden;transition:opacity .25s ease, visibility 0s linear .25s}
#filter.is-open form{opacity:1;visibility:visible;transition:opacity .25s ease .1s, visibility 0s}

#filter .filter-head{position:relative;margin-bottom:44px}
#filter .filter-title{padding-bottom:12px;font-size:28px;font-weight:700}
#filter .filter-desc{display:flex;align-items:center;gap:8px;color:#64748B;font-size:16px;font-weight:500}
#filter .filter-desc span{padding:5px 10px;background-color:#eff6ff;border:1px solid rgba(191,219,254,0.7);border-radius:100px;font-size:14px;font-weight:700;color:var(--primary);line-height:1}
#filter .filter-close{position:absolute;top:0;right:0;border:0;background:none;color:#94A3B8;cursor:pointer}
#filter .filter-row{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #EBEFF3}
#filter .filter-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
#filter .filter-name{flex:none;width:137px;font-size:17px;font-weight:700;color:#1e293b}
#filter .chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
#filter .chip-list input{position:absolute;opacity:0;pointer-events:none}
#filter .chip-list label{position:relative;display:inline-flex;align-items:center;padding:10px 16px;border:1px solid #E5E7EB;border-radius:100px;font-size:15px;font-weight:500;color:#334155;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer}
#filter .chip-list label .check-custom{display:flex;align-items:center;justify-content:center;width:0;margin-right:0;overflow:hidden;transition:width 0.2s}
#filter .chip-list label .check-custom svg{width:16px;height:16px;stroke:var(--primary)}
#filter .chip-list label:has(input:checked) .check-custom{width:16px;margin-right:8px}

#filter .chip-list .chk-box{flex:none;position:relative;width:18px;height:18px;border:1px solid #D1D5DB;border-radius:4px;background:#fff;transition:background .2s,border-color .2s}
#filter .chip-list .chk-box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .2s}
#filter .chip-list input:checked ~ .chk-box{border-color:var(--primary,#1E56F0);background:var(--primary,#1E56F0)}
#filter .chip-list input:checked ~ .chk-box::after{opacity:1}
#filter .chip-list label:has(input:checked){color:var(--primary,#1E56F0);font-weight:700}
#filter .chip-list input:focus-visible ~ .chk-box{outline:2px solid var(--primary,#1E56F0);outline-offset:2px}
#filter .chip-list label:has(input:checked){border-color:var(--primary,#1E56F0);background:#EFF6FF}
#filter .filter-btns{display:flex;justify-content:center;gap:15px;margin-top:56px}
#filter .filter-btns button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:48px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;font-weight:600;font-size:15px;color:#334155;cursor:pointer}
#filter .filter-btns button svg{width:15px;height:15px;stroke:#94A3B8}
#filter .filter-btns button.btn-reset{max-width:103px}
#filter .filter-btns .btn-save{max-width:95px;border-color:var(--primary,#1E56F0);background:var(--primary,#1E56F0);color:#fff}

/* 모달 공통 (상세 / 신청완료 / 휴대폰 인증) */
body.is-modal{overflow:hidden}
#certModal{z-index:310;background-color:transparent}
#certModal .modal-box{padding:40px 30px}
#applyDone{z-index:320}
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal .modal-dim{position:absolute;inset:0;background:rgba(0,0,0,.67)}
.modal .modal-box{position:relative;width:100%;max-width:var(--main-size);padding-bottom:40px;border-radius:16px;background:#fff}
.modal-done .modal-box,.modal-cert .modal-box{max-width:380px;text-align:center}
.modal .modal-close{all:unset;z-index:1;position:absolute;top:7px;right:15px;color:#fff;cursor:pointer}
.modal .modal-close svg{width:20px;height:20px}
.modal .done-title{display:block;margin:10px 0 8px;font-size:20px}
.modal .done-desc{margin:0 0 20px;color:#6B7280}
.modal .btn-ok,.modal .btn-confirm,.modal .btn-apply{display:flex;align-items:center;justify-content:center;max-width:180px;width:100%;height:54px;padding:0 20px;border:1px solid #1B2A47;border-radius:10px;background:#1B2A47;color:#fff;font-size:17px;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.modal .btn-list{transition:all 0.3s ease}
.modal .btn-apply:hover{background-color:var(--primary);border-color:var(--primary)}
.modal .btn-list:hover{border-color:#1B2A47}
.modal .btn-ok{width:100%}
.modal .btn-list,.modal .btn-resend{height:54px;padding:0 20px;border:1px solid #CBD5E1;border-radius:10px;background:#fff;font-weight:700;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,0.05);font-size:17px;font-weight:600;color:#334155}
 
/* 메인 일자리 상세보기 모달 */
#jobModal .view-inner{max-height:75vh;padding:0 40px;margin-top:36px;overflow-y:auto}
#jobModal .view-inner.is-scroll{padding-bottom:35px}
#jobModal .modal-box{overflow:hidden;max-height:none}
#jobModal .modal-box::before{z-index:1;position:absolute;content:'';top:0;left:0;width:100%;height:36px;background:linear-gradient(to right,#1e56f0,#1f3f8c)}
#jobModal .modal-box .modal-body{position:relative}
#jobModal .modal-box .view-head{padding:43px 0 15px;margin-bottom:34px}
#jobModal .modal-box .view-head .btn-box{display: flex;align-items: center;justify-content: space-between;}
#jobModal .modal-box .view-foot{position:relative}
#jobModal .modal-box:has(.is-scroll) .view-foot::after{position:absolute;content:'';top:-50px;left:0;width:100%;height:50px;background:linear-gradient(to top,#fff,rgba(255,255,255,0))}

/* 20261104 모달 > 뷰페이지 수정 */
#jobModal.is-page{position:static;z-index:auto;padding:0}
#jobModal.is-page .modal-box{max-height:none;border-top:2px solid #1f3f8c;border-radius:0;padding-bottom: 0;}
#jobModal.is-page .modal-box::before{display:none}
#jobModal.is-page .view-inner{max-height:none;overflow:visible;margin-top:0;padding:0 0 34px}
#jobModal.is-page .modal-close{position:static;max-width:100px;margin:0 auto;box-sizing:border-box;background-color:var(--primary);color:#fff;border-color:transparent}
/* 상세 보기 */
#jobModal.is-page .modal-box .view-head{padding:30px 0 25px;margin-bottom:30px}
#jobModal.is-page .modal-box .view-foot{padding:0}
#jobModal.is-page .modal-box .modal-body{padding-bottom:60px}
.view .view-head{position:relative;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid #E5E7EB}
.view .view-state{display:inline-block;padding:6px 10px;border-radius:6px;background:#EFF6FF;color:var(--primary);font-size:14px;font-weight:700;border:1px solid rgba(191,219,254,0.8)}
.view .view-title{padding-top:10px;font-size:26px;line-height:1.3;font-weight:700;color:#0f172a;word-break:break-all !important}
.view .view-info{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-bottom:34px;padding:28px 20px 20px;border:1px solid #E5E7EB;border-radius:12px;background:#F9FAFB}
.view .info-row{display:flex;align-items:flex-start;gap:16px}
.view .info-row.row-pay{align-items:center}
.view .info-row dt{flex-shrink:0;display:flex;align-items:center;gap:8px;width:112px;color:var(--primary);font-size:17px;font-weight:600}
.view .info-row dt::before{content:'';width:6px;aspect-ratio:1;border-radius:50px;background-color:var(--primary)}
.view .info-row dd{margin:0;font-size:17px;font-weight:500;color:#0f172a}
.view .row-content{grid-column:1 / -1}
.view .row-content dd{font-weight:400;color:#334155}
.view .row-content img{width:100%}
#jobModal .modal-box .row-pay dt::before{background-color:#2563EB}
#jobModal .modal-box .row-pay dd{display:flex;align-items:center;gap:6px;font-weight:700;font-size:18px;color:#1d4ed8}
#jobModal .modal-box .row-pay dd strong{font-weight:700}
#jobModal .modal-box .row-pay dd .pay-type{padding:4px 8px;border-radius:4px;background-color:#DBEAFE;color:#1E40AF;font-size:15px;font-weight:600}

/* 면접신청 */
.view .apply{position:relative;padding:40px 30px 28px;border:2px solid var(--primary,#1E56F0);border-radius:16px;box-shadow:0 8px 10px -6px rgba(59, 130, 246, 0.05), 0 20px 25px -5px rgba(59, 130, 246, 0.05)}
.view .apply-title{position:absolute;top:-16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:10px 24px;border-radius:100px;background:linear-gradient(110deg, #2d6bff, #4f5dff, #a03dff, #4f5dff, #2d6bff);background-size:300% 100%;animation:newBg 6s ease-in-out infinite;color:#fff;font-size:16px;white-space:nowrap}
.view .apply-title span{font-size:13px}
.view .apply .apply-msg{font-size:17px;line-height:1.5;color:#64748b;text-align:center;padding-bottom:14px}
.view .apply .apply-msg + .apply-btns{  display:flex;justify-content:center}
.view .apply .apply-msg + .apply-btns .btn-list{height:48px;padding:0 40px}
@keyframes applyBlink{0%, 100%{color:rgba(255,255,255,1)} 50%{color:rgba(255,255,255,.6)}}
.view .apply-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.view .field label{display:flex;gap:3px;margin-bottom:6px;font-size:15px;font-weight:700;color:#334155}
.view .field input{width:100%;height:50px;padding:12px;border:1px solid #CBD5E1;background-color:#F8FAFC;border-radius:10px;box-sizing:border-box;font-size:17px;color:#334155;font-weight:400;outline:none}
.view .field input::placeholder{color:#94a3b8;font-weight:400}
.view .field input:focus{border:1px solid#cbd5e1 !important;box-shadow:none !important}
.view .rq{color:#F43F5E}
.view .agree{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:16px;font-size:13px}
.view .agree label{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#334155;transition:all 0.2s}
.view .agree label b{font-weight:700;color:#1D4ED8}
.view .agree label p{word-break:keep-all !important}
.view .agree label .check-custom{display:flex;align-items:center;justify-content:center;width:16px;height:16px;overflow:hidden;border-radius:4px;background-color:#fff;border:1px solid #D1D5DB}
.view .agree label .check-custom svg{width:14px;height:14px;stroke:#fff;stroke-width:3px;opacity:0;visibility:hidden}
.view .agree label:has(input:checked) .check-custom{background-color:var(--primary);border-color:var(--primary)}
.view .agree label:has(input:checked) .check-custom svg{opacity:1;visibility:visible}

.view .btn-terms{all:unset;font-size:13px;color:#94A3B8;text-decoration:underline;cursor:pointer}
.view .apply-btns{display:flex;justify-content:center}
.view .apply-btns.col-1{display:flex;justify-content:center}
.view .view-foot{display:flex;justify-content:space-between;padding:24px 40px 0;font-size:14px;font-weight:700}
.view .view-admin{display:flex;justify-content:center;gap:8px;}
.view .view-admin a,.view .view-admin button{padding:6px 18px;border:1px solid #D1D5DB;border-radius:6px;background:#fff;font-size:14px;color:#111;text-decoration:none;cursor:pointer}

/* 휴대폰 인증 */
.modal-cert form{width:100%}
.modal-cert .cert-desc strong{font-size:16px;color:var(--primary)}
.modal-cert .field{position:relative;margin-bottom:16px}
.modal-cert .field label{display:none}
.modal-cert input{width:100%;height:48px;padding:0 60px 0 12px;border:1px solid #D1D5DB;border-radius:8px;box-sizing:border-box;font-size:16px}
.modal-cert input:focus{outline:none;border:1px solid #D1D5DB !important;box-shadow:none !important}
.modal-cert .cert-timer{position:absolute;top:50%;right:14px;transform:translateY(-50%);color:#EF4444;font-size:14px}
.modal-cert .cert-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* 반응형 [s] */
@media (max-width:1600px){
/* 검색설정 */
#filter .filter-head{margin-bottom:35px}
#filter .filter-row{margin-bottom:20px;padding-bottom:20px}
#filter .filter-btns{margin-top:45px}
/* 목록 */
#job .job-tags, #job .job-head .fl-l{gap:6px}
#job .job-tags li, #job .job-new{font-size:18px !important}
#job .job-title{font-size:20px}
#job .pay-etc{font-size:20px}
}
@media (max-width:1400px){
/* 검색설정 */
#filter{padding:32px 30px 42px}   
#filter form{max-width:none}
#filter .filter-title{padding-bottom:6px;font-size:26px}
#filter .filter-head{margin-bottom:28px}
#filter .filter-name{width:124px}
#filter .filter-row{margin-bottom:15px;padding-bottom:15px}
#filter .filter-btns{margin-top:38px}

/* 목록 */
#job{max-width:none;padding:40px 20px 80px}
#job .job-list{gap:16px}
#job .job-tags li, #job .job-new{font-size:17px !important}
#job .job-badge{font-size:17px}
#job .job-title{font-size:19px}
#job .pay-etc{font-size:19px}
#job .job-date svg{width:20px;height:20px}
#job .job-head{margin-bottom:15px}
#job .pay-etc{font-size:18px}

/* 공지사항 */
#job .notice-list a{font-size:18px}
#job .notice-label{font-size:18px}
/* 보기view */
#jobModal .modal-box .view-head{margin-bottom:22px;padding:35px 0 15px}
.view .view-title{font-size:24px}
.view .info-row dd{font-size:16px}
.view .field input{font-size:16px}
.view .info-row dt{width:100px;font-size:16px}
.view .agree label{font-size:15px} 
}
@media (max-width:1200px){
/* 목록 */
#job .job-tags li, #job .job-new{font-size:16px !important}
#job .job-badge{font-size:16px}
#job .job-tags li, #job .job-new{height:32px}
#job .job-list{margin-bottom:60px}

/* 공지사항 */
#job .notice-list a{font-size:17px}
#job .notice-label{font-size:17px}

/* 261104 모달 > 상세보기 구조 수정 */
#jobModal.is-page{padding:0 20px}
#jobModal.is-page .modal-box .view-head{padding:25px 0 20px;margin-bottom: 22px;}
#jobModal.is-page .modal-box .modal-body{padding-bottom:40px}
}
@media (max-width:1024px){
/* 검색설정 */
#filter{position:fixed;top:0;max-height:none;height:0;padding: 0;transition:height .35s ease, opacity .35s ease, visibility 0s linear .35s}
#filter.is-open{max-height:none;height:100vh;transition:height .35s ease, opacity .35s ease, visibility 0s}
#filter form{max-height:95vh;overflow-y:auto;padding:34px 20px;transition:opacity .35s ease, visibility 0s linear .35s}
#filter.is-open form{transition:opacity .35s ease .1s, visibility 0s}
#filter .scroll-box{position:relative}
#filter .filter-head{margin-bottom:22px}
#filter .filter-title{font-size:24px}
#filter .filter-desc{flex-wrap:wrap;font-size:15px}
#filter .filter-desc span{padding:5px 7px;font-size:13px}
#filter .filter-name{width:95px;font-size:16px}
#filter .filter-btns button{max-width:140px !important}

/* 목록 */
#job{padding:20px 20px 80px}
#job .main-btn-wrap{display:flex;align-items:center;justify-content:space-between;gap: 10px;flex-wrap:wrap;margin-bottom:26px}
#job .btn-admin{margin-bottom:0}
#job .job-top{margin-bottom:16px}

#job .job-head{flex-wrap:wrap-reverse}
#job .job-date{font-size:14px}
#job .job-date svg{width:17px;height:17px}
#job .job-title{font-size:18px}
#job .pay-etc{font-size:16px}
#job .job-pay{max-width:180px}
#job .pay-amount{font-size:24px}

/* 공지사항 */
#job .notice-roll{gap:12px}
#job .notice-label{font-size:16px}
#job .notice-label img{width:18px}
#job .notice-list a{font-size:16px}

/* 보기view */
#jobModal .view-inner{padding:0 24px}
#jobModal .modal-box .view-head{padding:22px 0 15px}
#jobModal .modal-box .row-pay dd{font-size:16px}
#jobModal .modal-box .row-pay dd .pay-type{font-size:14px}
.modal .btn-ok, .modal .btn-confirm, .modal .btn-apply{height:50px;font-size:16px}
.view .view-foot{padding:24px 24px 0}
.view .view-title{font-size:22px}
.view .view-info{gap:26px}
.view .agree label{font-size:14px}
.view .apply-title{font-size:15px}
.view .apply{padding:40px 24px 28px}
.view .apply-fields{margin-bottom:14px}

/* 20261104 모달 > 뷰페이지 수정 */
#jobModal.is-page .modal-box .view-head{padding:20px 0 15px;margin-bottom:15px}
}

/* 모바일 */
@media (max-width:768px){
/* 검색설정 */
#filter .filter-row{flex-direction:column;align-items:flex-start;gap:12px}
#filter .filter-title{padding-bottom:4px;font-size:22px}
#filter .chip-list{gap:6px 4px}
#filter .scroll-box::before{position:absolute;top:0;left:0;width:100%;height:40px;content:'';background:linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0))}
#filter .scroll-box::after{position:absolute;bottom:0;left:0;width:100%;height:40px;content:'';background:linear-gradient(to top, rgba(255,255,255,0.7), rgba(255,255,255,0))}

#job .job-link{flex-direction:column;gap:7px;padding:20px 15px}
#job .job-tags li, #job .job-new{height:28px;padding:0 8px}
#job .mo-date-new{display:flex;align-items:center;gap:8px}
#job .job-head{margin-bottom:10px}

#job .job-badge{font-size:14px}
#job .job-title{font-size:17px}
#job .job-pay{flex-direction:row;justify-content:flex-start;gap:6px;width:100%;max-width:none;padding:12px 0 0;border-left:0;border-top:1px solid #E5E7EB}
#job .pay-amount{padding:0;font-size:22px}
#job .pay-etc{font-size:15px}
#job .job-top{margin-bottom:14px}
#job .job-total{font-size:16px}
#job .job-list{gap: 10px;margin-bottom:50px}
.view .view-info,.view .apply-fields{grid-template-columns:1fr}

/* 목록 */
#job .btn-admin{gap: 6px;}
#job .btn-admin a{padding:5px 8px}
#job .job-open label{font-size:16px}
#job .notice-roll{margin-top:50px;padding:14px}
#job .notice-label{font-size:15px}
#job .notice-list a{font-size:15px}
#job{padding:20px 15px 60px}
#jobModal .modal-box{max-height:90vh}
#jobModal .modal-box .view-head{padding:15px 0 12px;margin-bottom:12px}
#jobModal .view-inner{padding:0 15px;}
.view .field input{border-radius:6px}
.view .view-state{padding: 4px 8px;font-size:13px}
.view .view-admin{gap:4px}
.view .view-admin a, .view .view-admin button{padding:4px 8px;font-size:13px}
.view .view-title{padding-top: 8px;font-size:20px}
.view .view-info{gap:16px;padding:15px 15px 20px;margin-bottom:25px}
.view .info-row dt::before{width:4px}
.modal .btn-ok, .modal .btn-confirm, .modal .btn-apply{max-width:170px;height:47px}
.modal .modal-box{padding-bottom:15px}

/* 20261104 모달 > 뷰페이지 수정 */
#jobModal.is-page{padding:0 15px}
#jobModal.is-page .modal-close{max-width:85px;height: 45px;font-size:15px}
.view .apply{padding:40px 15px 28px}
}
@media (max-width:480px){
/* 검색설정 */
#filter .filter-head{padding-right:30px}
#filter .filter-title{padding-bottom:5px;font-size:20px}
#filter .filter-name{font-size:15px}
#filter .chip-list label{padding:8px 15px;font-size:14px}

/* 목록 */
#job .job-item{border-radius:10px}
#job .job-head{margin-bottom:10px;gap:8px 10px}
#job .job-title{font-size:16px}
#job .job-link{gap:10px}
#job .job-link .mo-date-new .job-new{display:flex;font-size: 13px !important;height: 25px;padding: 0 6px;}
#job .job-date{color:#334155;font-size:15px}
#job .job-tags li.job-new{display:none}

#job .job-list{margin-bottom:30px}
#job .pg_wrap{border-radius:10px}
#job .pg_wrap .pg_page, #job .pg_wrap .pg_current{min-width:32px;border-radius:5px}

/* 공지사항 */
#job .notice-roll{margin-top:36px;border-radius:10px}
#job .notice-label{padding:0;background-color:none}
#job .notice-label span{display:none}

/* 보기view */
.view .view-title{font-size:18px}
.view .info-row{flex-direction:column;gap:8px}
.view .info-row.row-pay{align-items:flex-start}
.view .agree{flex-direction:column;align-items:flex-start}
.view .btn-terms{padding-left:24px}
#jobModal .modal-box .row-pay dd{font-size:15px}
#jobModal .modal-box .row-pay dd .pay-type{font-size:13px}
#jobModal .modal-box .view-foot{flex-direction:column;gap:3px;}
#jobModal .view-inner{max-height:65vh}
#jobModal .view-inner.is-scroll{padding-bottom:25px}
}
/* 반응형 [e] */