/* =========================================================== (주)저스트큐 검역대행 의뢰 시스템 — 플러그인 전용 스타일 /plugin/justq/css/justq.css · 명세서 style.css 기반. 이 플러그인 페이지에서만 로드된다. · 디자이너 작업 영역:다른 경로 CSS는 수정하지 않음. =========================================================== */ @font-face{font-family:'Pretendard';font-weight:900;font-display:swap;src:local('Pretendard Black'),url('/fonts/pretendard/Pretendard-Black.woff2') format('woff2'),url('/fonts/pretendard/Pretendard-Black.woff') format('woff');} @font-face{font-family:'Pretendard';font-weight:800;font-display:swap;src:local('Pretendard ExtraBold'),url('/fonts/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),url('/fonts/pretendard/Pretendard-ExtraBold.woff') format('woff');} @font-face{font-family:'Pretendard';font-weight:700;font-display:swap;src:local('Pretendard Bold'),url('/fonts/pretendard/Pretendard-Bold.woff2') format('woff2'),url('/fonts/pretendard/Pretendard-Bold.woff') format('woff');} @font-face{font-family:'Pretendard';font-weight:600;font-display:swap;src:local('Pretendard SemiBold'),url('/fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2'),url('/fonts/pretendard/Pretendard-SemiBold.woff') format('woff');} @font-face{font-family:'Pretendard';font-weight:500;font-display:swap;src:local('Pretendard Medium'),url('/fonts/pretendard/Pretendard-Medium.woff2') format('woff2'),url('/fonts/pretendard/Pretendard-Medium.woff') format('woff');} @font-face{font-family:'Pretendard';font-weight:400;font-display:swap;src:local('Pretendard Regular'),url('/fonts/pretendard/Pretendard-Regular.woff2') format('woff2'),url('/fonts/pretendard/Pretendard-Regular.woff') format('woff');} @font-face{font-family:'Pretendard';font-weight:300;font-display:swap;src:local('Pretendard Light'),url('/fonts/pretendard/Pretendard-Light.woff2') format('woff2'),url('/fonts/pretendard/Pretendard-Light.woff') format('woff');} @font-face{font-family:'Pretendard';font-weight:200;font-display:swap;src:local('Pretendard ExtraLight'),url('/fonts/pretendard/Pretendard-ExtraLight.woff2') format('woff2'),url('/fonts/pretendard/Pretendard-ExtraLight.woff') format('woff');} @font-face{font-family:'Pretendard';font-weight:100;font-display:swap;src:local('Pretendard Thin'),url('/fonts/pretendard/Pretendard-Thin.woff2') format('woff2'),url('/fonts/pretendard/Pretendard-Thin.woff') format('woff');} :root{ --jq-brand:#a1c12d; --jq-brand-rgb:161,193,45; --jq-brand-dark:#82a01e; --jq-brand-soft:#e7f4ee; --jq-ink:#1c2430; --jq-ink-soft:#555; --jq-line:#e3e8ee; --jq-bg:#f5f5f5; --jq-card:#ffffff; --jq-shadow:2px 2px 5px rgba(0, 0, 0, .05); --bs-font-sans-serif:'Pretendard'; --bs-font-monospace:'Pretendard'; --bs-link-hover-color:#a1c12d; --bs-body-font-family:var(--bs-font-sans-serif); --bs-body-font-size:1rem; --bs-body-font-weight:400; --bs-body-line-height:1.5; --bs-link-color-rgb:0,85,180; --bs-body-color:#555; --bs-btn-padding-y:.25rem; --bs-btn-padding-x:.25rem; --bs-btn-font-size:0.85rem; --bs-border-width:1px; --bs-border-style:solid; --bs-border-color:#dee2e6; --bs-border-color-translucent:rgba(0, 0, 0, 0.175); --bs-border-radius:0.25rem; --bs-border-radius-sm:0.125rem; --bs-border-radius-lg:0.33rem; --bs-border-radius-xl:0.5rem; --bs-border-radius-xxl:0.75rem; --bs-border-radius-pill:50rem; --bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175); --bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-white:#fff; --bs-black:#000; --bs-primary:#a1c12d; --bs-danger:#dc3545; --bs-dark:#212529; --bs-white-rgb:255, 255, 255; --bs-black-rgb:0, 0, 0; --bs-primary-rgb:161, 193, 45; --bs-danger-rgb:220, 53, 69; --bs-dark-rgb:33, 37, 41; --jq-st-red:#e4002b; --jq-st-green:#009f4d; --jq-st-black:#222; --jq-st-navy:#136ad5; --jq-st-gray:#9f9fa3; --jq-st-yellow:#ffcc00; --jq-st-red-rgb:228,0,43; --jq-st-green-rgb:0,159,77; --jq-st-black-rgb:34,34,34; --jq-st-navy-rgb:19,106,213; --jq-st-gray-rgb:159,159,163; --jq-st-yellow-rgb:255,204,0; --bs-btn-primary-border-color:var(--bs-primary); --bs-btn-primary-bg:var(--bs-primary); --bs-btn-primary-color:var(--bs-white); --bs-btn-primary-hover-border-color:rgba(var(--bs-primary-rgb),1); --bs-btn-primary-hover-bg:rgba(var(--bs-primary-rgb),0.8); --bs-btn-primary-hover-color:var(--bs-white); --bs-btn-primary-active-border-color:rgba(var(--bs-primary-rgb),0.9); --bs-btn-primary-active-bg:rgba(var(--bs-primary-rgb),0.8); --bs-btn-primary-active-color:var(--bs-primary); --bs-btn-danger-border-color:var(--bs-danger); --bs-btn-danger-bg:var(--bs-danger); --bs-btn-danger-color:var(--bs-white); --bs-btn-danger-hover-border-color:rgba(var(--bs-danger-rgb),1); --bs-btn-danger-hover-bg:rgba(var(--bs-danger-rgb),0.8); --bs-btn-danger-hover-color:var(--bs-white); --bs-btn-dark-border-color:var(--bs-dark); --bs-btn-dark-bg:var(--bs-dark); --bs-btn-dark-color:var(--bs-white); --bs-btn-dark-hover-border-color:rgba(var(--bs-dark-rgb),1); --bs-btn-dark-hover-bg:rgba(var(--bs-dark-rgb),0.8); --bs-btn-dark-hover-color:var(--bs-white); } @media (min-width:768px){ :root,[data-bs-theme=light]{ --bs-btn-padding-y:.125rem !important; --bs-btn-padding-x:.75rem !important; } } @media (min-width:1025px){ :root,[data-bs-theme=light]{ --bs-btn-padding-y:.25rem !important; --bs-btn-padding-x:1rem !important; } } *,*::before,*::after{box-sizing:border-box;} html{overflow-x:hidden;overflow-y:scroll;width:100%;min-width:100vw;font-family:var(--bs-font-sans-serif);} html::-webkit-scrollbar{width:8px;background-color:#eee;} html::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:8px;} html, h1, h2, h3, h4, h5, h6, form, fieldset, img{margin:0;padding:0;border:0} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section{display:block} legend{position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} ul, dl,dt,dd{margin:0;padding:0;list-style:none} textarea, select,input{font-size:0.9rem} select{margin:0} address,p{margin:0;padding:0;word-break:break-all} hr{display:none} em{font-style:normal} caption{display:none} b, strong{font-weight:bold;} a{text-decoration:none;} a:hover{text-decoration:underline} :focus,:focus-visible,:focus-within{outline:0} ::placeholder{color:#aaa;} input[type=text],input[type=password], textarea{transition:all 0.30s ease-in-out;outline:none;} input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus{} input[type="submit"]{cursor:pointer} .btn,input,select,textarea{ --bs-btn-padding-y:.5rem; --bs-btn-padding-x:.5rem; display:inline-flex; justify-content:center; align-items:center; background-color:var(--bs-white); background-clip:padding-box; border:var(--bs-border-width) solid var(--bs-border-color); border-radius:var(--bs-border-radius-lg); transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; appearance:none; font-family:var(--bs-font-sans-serif); font-size:var(--bs-btn-font-size); font-weight:500; color:var(--bs-body-color); line-height:1; } .btn{justify-content:center;} .btn:focus,input:focus,select:focus,textarea:focus{background-color:var(--bs-white);border-color:#86b7fe;outline:0;box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);} .btn,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{min-height:calc(1rem + calc(var(--bs-btn-padding-y) * 2));padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);} .btn:focus,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus{color:var(--bs-body-color)} select{ --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); width:auto; padding-right:1.5rem; appearance:none; background-color:var(--bs-white); background-image:var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat:no-repeat; background-position:right 0.5rem center; background-size:10px 8px; font-family:var(--bs-font-sans-serif); color:var(--bs-body-color); line-height:1; transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } select:disabled{background-color:var(--bs-secondary-bg);} @media (min-width:768px){ .btn,input,select,textarea{ --bs-btn-padding-y:.5rem; --bs-btn-padding-x:.5rem; } .btn,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{border-radius:var(--bs-border-radius-lg);} select{background-size:12px 10px;} } @media (min-width:1025px){ .btn,input,select,textarea{ --bs-btn-padding-y:.5rem; --bs-btn-padding-x:.5rem; } .btn,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{border-radius:var(--bs-border-radius-lg);} select{background-size:14px 11px;} } @media (min-width:1500px){ select{background-size:16px 12px;} } input[type="file"]{width:auto;border:0;border-radius:0;background-color:none;background-clip:none;transition:none;} input[type="file"]:focus{background-color:none;border-color:#none;outline:0;box-shadow:none;} input[type="date"]{position:relative;min-width:7.5rem;padding-right:1rem;} input[type="date"]::-webkit-datetime-edit{padding:0 !important;} input[type="date"]::-webkit-datetime-edit-text{padding:0 !important;} input[type="date"]::-webkit-clear-button, input[type="date"]::-webkit-inner-spin-button{/*display:none;*/} input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;right:0.25rem;top:0;bottom:0;margin:auto 0} input[type=checkbox],input[type=radio]{display:inline-block;--bs-form-check-bg:var(--bs-body-bg);flex-shrink:0;width:1.125rem;height:1.125rem;vertical-align:top;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;} input[type=checkbox]{border-radius:0.25rem;} input[type=radio]{border-radius:50%;} input[type=checkbox]:active,input[type=radio]:active{filter:brightness(90%);} input[type=checkbox]:focus,input[type=radio]:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);} input[type=checkbox]:checked,input[type=radio]:checked{background-color:#0d6efd;border-color:#0d6efd;} input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");} input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");} input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");} input[type=checkbox]:disabled,input[type=radio]:disabled{pointer-events:none;filter:none;opacity:0.5;} input[type=checkbox][disabled] ~ label,input[type=checkbox]:disabled ~ label,input[type=radio][disabled] ~ label,input[type=radio]:disabled ~ label{cursor:default;opacity:0.5;} textarea{width:100%;} .btn.ghost{background:transparent;} .btn.primary{border-color:var(--bs-btn-primary-bg);background-color:var(--bs-btn-primary-border-color);color:var(--bs-btn-primary-color);} .btn.primary:hover{border-color:var(--bs-btn-primary-hover-border-color);background-color:var(--bs-btn-primary-hover-bg);color:var(--bs-btn-primary-hover-color);} .btn.danger{border-color:var(--bs-btn-danger-bg);background-color:var(--bs-btn-danger-border-color);color:var(--bs-btn-danger-color);} .btn.danger:hover{border-color:var(--bs-btn-danger-hover-border-color);background-color:var(--bs-btn-danger-hover-bg);color:var(--bs-btn-danger-hover-color);} .btn.dark{border-color:var(--bs-btn-dark-bg);background-color:var(--bs-btn-dark-border-color);color:var(--bs-btn-dark-color);} .btn.dark:hover{border-color:var(--bs-btn-dark-hover-border-color);background-color:var(--bs-btn-dark-hover-bg);color:var(--bs-btn-dark-hover-color);} .btn i{margin-right:0.25rem} .btn.btn-lg, .btn-group-lg > .btn{ --bs-btn-padding-y:0.75rem; --bs-btn-padding-x:1.25rem; --bs-btn-font-size:1rem; --bs-border-radius-lg:var(--bs-border-radius-xl); } .btn.btn-sm, .btn-group-sm > .btn{ --bs-btn-padding-y:0.25rem; --bs-btn-padding-x:0.25rem; --bs-btn-font-size:0.85rem; --bs-border-radius-lg:var(--bs-border-radius-sm); } .inner{width:100%;max-width:100vw;padding-right:10px;padding-left:10px} @media (min-width:320px){ .inner{padding-right:20px;padding-left:20px} } @media (min-width:768px){ .inner{padding-right:clamp(20px, 2vw, 30px);padding-left:clamp(20px, 2vw, 30px);} } @media (min-width:1025px){ .inner{padding-right:clamp(30px, 4vw, 50px);padding-left:clamp(30px, 4vw, 50px);} } @media (min-width:1600px){ .inner{max-width:calc(1600px + clamp(40px, 5vw, 80px) * 2);margin:0 auto;padding-right:clamp(40px, 5vw, 80px);padding-left:clamp(40px, 5vw, 80px);} } .inner-5{padding-right:5%;padding-left:5%;} .full-inner{width:100%;max-width:100vw;padding-right:10px;padding-left:10px} @media (min-width:320px){ .full-inner{padding-right:20px;padding-left:20px} } @media (min-width:768px){ .full-inner{padding-right:clamp(20px, 2vw, 30px);padding-left:clamp(20px, 2vw, 30px);} } @media (min-width:1025px){ .full-inner{padding-right:clamp(30px, 4vw, 50px);padding-left:clamp(30px, 4vw, 50px);} } @media (min-width:1600px){ .full-inner{padding-right:clamp(40px, 5vw, 80px);padding-left:clamp(40px, 5vw, 80px);} } .w-100{width:100%} .mb-1{margin-bottom:1rem} .flex-fill{flex:1 1 auto !important;} .flex-row{flex-direction:row !important;} .flex-column{flex-direction:column !important;} .flex-row-reverse{flex-direction:row-reverse !important;} .flex-column-reverse{flex-direction:column-reverse !important;} .flex-grow-0{flex-grow:0 !important;} .flex-grow-1{flex-grow:1 !important;} .flex-shrink-0{flex-shrink:0 !important;} .flex-shrink-1{flex-shrink:1 !important;} .flex-wrap{flex-wrap:wrap !important;} .flex-nowrap{flex-wrap:nowrap !important;} .flex-wrap-reverse{flex-wrap:wrap-reverse !important;} .scroller-y::-webkit-scrollbar{width:6px} .scroller-x::-webkit-scrollbar{height:6px} .scroller::-webkit-scrollbar-thumb{background-color:#ccc} .scroller::-webkit-scrollbar-track{background-color:#eee} .scroller.scroller-x{overflow-x:auto; zoom:1;padding-left:1px} .scroller.scroller-y{overflow-y:auto; zoom:1} .scroller.scroller-x table{min-width:900px} .scrollLock{overflow:hidden !important;touch-action:none !important;} html{font-size:14px} @media (min-width:320px){html{font-size:14px;}} @media (min-width:480px){html{font-size:14px;}} @media (min-width:768px){html{font-size:15px;}} @media (min-width:1025px){html{font-size:15px;}} @media (min-width:1200px){html{font-size:16px;}} @media (min-width:1500px){html{font-size:17px;}} @media (min-width:1600px){html{font-size:18px;}} body{overflow:hidden;font-family:var(--bs-font-sans-serif);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);color:var(--bs-body-color);line-height:var(--bs-body-line-height);letter-spacing:-0.02rem;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);} /* 플러그인 페이지는 .justq-app 안에서만 스타일을 적용해 충돌 방지 */ .justq-app *{box-sizing:border-box;} .justq-app, .justq-app body{margin:0;padding:0;} .justq-app{display:flex;flex-direction:column;position:relative;width:100%;min-height:100vh;background:var(--jq-bg);} .justq-app a{text-decoration:none;} .justq-app button{font-family:inherit;cursor:pointer;} h1{} h2{ --jq-size:1.5rem; --jq-weight:700; --jq-color:#222; font-size:var(--jq-size);font-weight:var(--jq-weight);color:var(--jq-color); } h3{ --jq-size:1.25rem; --jq-weight:700; --jq-color:#222; font-size:var(--jq-size);font-weight:var(--jq-weight);color:var(--jq-color); } h4{ --jq-size:1rem; --jq-weight:700; --jq-color:#a1c12d; margin-bottom:0.5rem;font-size:var(--jq-size);font-weight:var(--jq-weight);color:var(--jq-color); } #gnb_bg{display:none;position:fixed;top:0;left:0;z-index:20;width:100%;height:100%;background-color:rgba(var(--bs-black-rgb),0.8)} .menu-btn{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:3rem;z-index:21;width:3rem;height:3rem;margin-right:1px;padding:0.75rem;border:0;background-color:rgba(var(--bs-black-rgb),0.2);} .menu-btn:hover{background-color:rgba(var(--bs-black-rgb),0.3);} .gnb_close_btn{display:none;justify-content:center;align-items:center;position:fixed;top:0.5rem;left:calc(20% + 0.5rem);z-index:101;width:2rem;height:2rem;padding:0.25rem;border:0;border-radius:50%;background-color:rgba(var(--bs-white-rgb),0.5);} /* ---------- 상단바 ---------- */ .justq-app .header{display:flex;justify-content:space-between;align-items:center;gap:0;position:fixed;top:0;left:0;z-index:20;width:100%;height:3rem;padding:0;background-color:var(--jq-brand);color:var(--bs-white);} .justq-app .header .logo{display:flex;align-items:center;gap:0.5rem;height:100%;padding:0.75rem 1rem;background-color:rgba(var(--bs-black-rgb),0.8);font-weight:800;font-size:1.125rem;color:var(--bs-white);white-space:nowrap;} .justq-app .header .logo a{display:block;color:var(--bs-white)} .justq-app .header .logo .img{display:block;} .justq-app .header .logo .img img{display:block;max-height:1.75rem} .justq-app .header .logo b{border-radius:6px;background-color:var(--bs-white);font-size:0.85rem;color:var(--jq-brand);} .justq-app .header .gnb{display:flex;flex:1;height:100%;} .justq-app .header .gnb ul{display:none;flex-direction:column;position:fixed;top:0;right:0;z-index:100;width:80%;height:100vh;margin:0;padding:3rem 0 0 0;background-color:var(--jq-brand);} .justq-app .header .gnb li{display:flex;width:100%;height:3rem;border-bottom:1px solid rgba(var(--bs-black-rgb),0.1);} .justq-app .header .gnb li:first-child{border-top:1px solid rgba(var(--bs-black-rgb),0.1);} .justq-app .header .gnb a{display:flex;justify-content:center;width:100%;height:100%;align-items:center;padding:0 0.5rem;color:#ffffffcc;font-weight:600;font-size:0.9rem;white-space:nowrap;} .justq-app .header .gnb a:hover{background:rgba(var(--bs-white-rgb),.2);color:var(--bs-white);} .justq-app .header .gnb a.active{background:rgba(var(--bs-black-rgb),.2);color:var(--bs-white);} .justq-app .header .spacer{flex:1;} .justq-app .who{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:#ffffffcc;white-space:nowrap;} .justq-app .who .avatar{display:none;justify-content:center;align-items:center;width:2rem;height:2rem;border-radius:50%;background:#ffffff33;font-weight:700;color:#fff;} .justq-app .who .avatar-txt{display:none} .justq-app .btn-logout{display:flex;justify-content:center;align-items:center;width:3rem;height:3rem;padding:0.75rem;background-color:rgba(var(--bs-black-rgb),0.2);} .justq-app .btn-logout:hover{background-color:rgba(var(--bs-black-rgb),0.3);} @media (min-width:768px){ .justq-app .menu-btn{display:none} .justq-app .header .gnb ul{display:flex;flex-direction:row;position:revert;width:auto;height:100%;padding:0} .justq-app .header .gnb li{width:auto;height:100%;} .justq-app .header .gnb a{width:auto;} .justq-app .who .avatar{display:flex} .justq-app .who .avatar-txt{display:flex} } @media (min-width:1025px){ .justq-app .header .gnb a{padding:0 1rem;} } .justq-app .main{position:relative;z-index:1;width:100%;min-height:100vh;margin:0 auto;padding-top:4rem;padding-bottom:1rem} @media (min-width:768px){ .justq-app .main{padding-top:5rem;padding-bottom:2rem} } @media (min-width:1025px){ .justq-app .main{padding-top:6rem;padding-bottom:3rem} } /* 하단 레이아웃 */ #footer{position:relative;z-index:1;padding-bottom:6rem;border-top:var(--bs-border-width) solid var(--bs-border-color);color:var(--bs-body-color);text-align:left} #footer a{color:var(--bs-body-color)} #footer h1{position:absolute;font-size:0;line-height:0;overflow:hidden} #footer .ft2{display:flex;flex-direction:column;gap:1rem;} #footer #fnb{display:flex;flex-wrap:wrap;gap:0.25rem;padding:1rem 0;} #footer #fnb a{display:flex;align-items:center;height:1rem;font-size:0.8rem} #footer #fnb a+a:before{content:"";display:inline-block;width:1px;height:0.75rem;margin-right:0.25rem;background-color:var(--bs-body-color);} #footer #fnb strong{font-weight:500;color:var(--bs-bgray-150)} #footer #ft_info{display:flex;flex-wrap:wrap;gap:0.125rem;font-size:0.8rem;letter-spacing:0;font-style:normal;} #footer #ft_info span{display:flex;align-items:center;} #footer #ft_info span+span:before{content:"";display:flex;width:1px;height:0.75rem;margin-left:0.25rem;margin-right:0.25rem;background-color:var(--bs-body-color);} #footer #ft_info .ft_add{width:100%} #footer #ft_info .ft_tel:before{display:none} #footer .ft_copy{padding-top:0.75rem;font-size:0.8rem;letter-spacing:0} #footer .ft_sns{display:flex;align-items:center;gap:1rem;margin-top:1rem} #footer .footer-top-site{flex-shrink:0;position:absolute;bottom:2rem;width:200px;} #footer .footer-top-site a{text-decoration:none} #footer .footer-top-site-toggle{ --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); display:flex;justify-content:space-between;align-items:center; width:100%; height:2.5rem; padding:0 1rem; padding-right:1.5rem; border:1px solid #e0e0e0;border-radius:0; background-color:rgba(255, 255, 255, 1); background-color:var(--bs-white); background-image:var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat:no-repeat; background-position:right 0.5rem center; background-size:10px 8px; } #footer .footer-top-site-toggle span{font-size:0.8rem} #footer .footer-top-site-toggle.open + .footer-top-site-list{display:flex;margin-bottom:-2px;border:1px solid #e0e0e0;} #footer .footer-top-site-list{display:none;flex-direction:column;row-gap:0.25rem;position:absolute;bottom:calc(100% + 1px);left:0;padding:1rem 1rem;width:100%;max-height:30rem;overflow-y:auto;background-color:#fff;border-radius:0;} #footer .footer-top-site-list > li > a{font-size:0.8rem;font-weight:500;color:#555;} #footer .footer-top-site-list > li > a:hover{color:#144390;text-decoration:none} @media screen and (min-width:768px){ #footer{padding-bottom:1rem;} #footer .inner{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:1rem} #footer .ft2{align-items:flex-start;} #footer .ft_info_wrap{} #footer #fnb{gap:1rem;} #footer #fnb a+a:before{margin-right:1rem} #footer #ft_info{gap:0.25rem;} #footer #ft_info span+span:before{margin-left:0.5rem;margin-right:0.5rem;} #footer .footer-top-site{position:relative;bottom:-1rem;} #footer .footer-top-site-toggle{background-size:12px 10px;} } @media screen and (min-width:1025px){ #footer #ft_info .ft_add{width:auto} #footer .footer-top-site{width:250px;} #footer .footer-top-site-toggle{background-size:14px 11px;} } @media screen and (min-width:1500px){ #footer .ft_copy{padding-top:0} #footer .footer-top-site-toggle{background-size:16px 12px;} } /* ---------- 공통 컴포넌트 ---------- */ .page-h{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem;margin-bottom:2rem;} .page-h .h2-wrap{} .page-h h2{margin:0;} .page-h .sub{color:var(--jq-ink-soft);font-size:0.85rem;margin-top:2px;} .card{border:1px solid var(--jq-line);background:var(--jq-card);} .card .card-h{padding:14px 18px;border-bottom:1px solid rgba(var(--bs-black-rgb),0.2);display:flex;align-items:center;gap:10px;} .card .card-h h3{margin:0;} .card1{padding:1rem;} .border1{border:1px solid rgba(var(--bs-black-rgb),0.1);} .border2{border:1px solid rgba(var(--bs-black-rgb),0.2);} .card-h+.card1+.card-h{border-top:1px solid rgba(var(--bs-black-rgb),0.1);} /* ---------- 상태/검색 ---------- */ .search-box{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem;margin-bottom:1rem} /* 필터바 */ .filterbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:0.5rem;} .filterbar .btn,.filterbar input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),.filterbar select,.filterbar textarea{width:auto;font-size:0.85rem;} .date-wrap input{max-width:calc((100% - 2rem) / 2)} .chips{display:flex;flex-wrap:wrap;width:100%;border:1px solid var(--jq-line);border-radius:0.25rem;background-color:var(--bs-white);overflow:hidden} .chip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.5rem;width:auto;border:1px solid var(--jq-line);margin-top:-1px;margin-bottom:-1px;margin-left:-1px;padding:0.5rem 0.5rem;background:#fff;font-size:0.8rem;color:var(--jq-ink-soft);white-space:nowrap;} .chip.on{border-color:var(--jq-brand);background:var(--jq-brand);color:var(--bs-white);} .chip.title{border-color:var(--bs-dark);background:var(--bs-dark);color:var(--bs-white);} .chip:last-child{margin-right:-1px} @media (min-width:1280px){ .search-box{flex-direction:row-reverse;flex-wrap:wrap;justify-content:space-between;align-items:center;} } .field-wrap{display:flex;gap:1rem} .field{display:block;} .field > label{display:block;font-weight:700;font-size:0.8rem;color:var(--jq-ink-soft);margin-bottom:0.5rem;} .grid2{display:block;} .grid2 .field+.field{margin-top:1rem} @media (min-width:768px){ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;} .grid2 .field+.field{margin-top:0} .grid2 .field:nth-child(n+3){margin-top:1rem} } @media (min-width:1024px){ .grid2.grid4{grid-template-columns:1fr 1fr 1fr 1fr;} .grid2.grid4 .field:nth-child(n+3){margin-top:0} .grid2.grid4 .field:nth-child(n+5){margin-top:1rem} .grid2.grid5{grid-template-columns:1fr 1fr 1fr 1fr 1fr;} .grid2.grid5 .field:nth-child(n+3){margin-top:0} .grid2.grid5 .field:nth-child(n+6){margin-top:1rem} } .btn-wrap{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;width:100%;padding-top:2rem} .btn-wrap .btn{min-width:5rem} .card .btn-wrap{padding:1rem 0;border-top:1px solid rgba(var(--bs-black-rgb),0.1);} /* ---------- 상태 배지 ---------- */ .justq-app .badge{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:0.8rem;padding:4px 10px;border-radius:999px;white-space:nowrap;} .justq-app .badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;} .justq-app .badge.red {color:var(--jq-st-red); background:#fdeaed;} .justq-app .badge.green{color:var(--jq-st-green);background:#e6f7ee;} .justq-app .badge.black{color:var(--jq-st-black);background:#eceef2;} .justq-app .badge.gray{color:#6b7686;background:#eef1f5;} /* .justq-app .statechip{} .justq-app .statechip.canceled{background:#f1f1f3;color:#8a8f99;} */ .tbl{width:100%;border-collapse:collapse;background-color:#fff} .tbl th, .tbl td{height:3rem;padding:0.25rem 0.5rem;border:1px solid #ddd;vertical-align:middle;white-space:normal;word-break:keep-all;} .tbl th{text-align:center;} .tbl thead th{height:2rem;padding:0.125rem 0.5rem;border:1px solid #777;background-color:var(--jq-st-gray);font-size:0.9rem;font-weight:500;color:#fff} .tbl tbody th{background-color:#f5f5f5;font-weight:700;color:var(--bs-dark)} .tbl tfoot th{border-color:#999;background-color:var(--bs-black);font-weight:700;color:var(--bs-white)} .tbl tfoot td{border-color:#999;background-color:var(--jq-ink-soft);font-weight:700;color:var(--bs-white)} .tbl .row-link{cursor:pointer;} .tbl td.num{text-align:right !important;font-variant-numeric:tabular-nums;} .tbl.td-center tbody td{text-align:center;} .align-left{text-align:left !important;} .align-center{text-align:center !important;} .align-right{text-align:right !important;} /* 밑줄은 컨테이너 inset 그림자로 그려 세로 넘침(스크롤바) 없이 가로 스크롤만 유지. (overflow-x:auto 는 overflow-y 를 auto 로 만들고, 탭의 margin-bottom:-2px 가 2px 세로 넘침→세로 스크롤바를 만들던 문제 해결) */ .section-tabs{position:relative;z-index:1;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;margin:2rem 0 0;border-radius:var(--bs-border-radius-lg);background-color:rgba(var(--bs-black-rgb),0.1)} .section-tabs a{flex:0 0 auto;position:relative;z-index:3;padding:0.5rem 1rem;font-size:0.9rem;color:var(--jq-ink-soft);white-space:nowrap;} .section-tabs a.on{font-weight:700;color:var(--bs-white)} .section-tabs a.on:before{content:"";position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background-color:rgba(var(--bs-primary-rgb),1)} .section-tabs a .cnt{margin-left:0.5rem;padding:0.125rem 0.25rem;border-radius:999px;background:var(--bs-white);font-size:11px;color:var(--jq-ink-soft);} .tab-panel{padding:20px 2px;} /* 파일/사진 */ .justq-app .jq-fileup{ --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .5rem; padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); } .justq-app .filelist{display:flex;flex-direction:column;gap:0.5rem;} .justq-app .fileitem{display:flex;align-items:center;gap:12px;border:1px solid var(--jq-line);border-radius:10px;padding:10px 12px;} .justq-app .fileitem .ico{width:3rem;height:3rem;border-radius:0.5rem;background:var(--jq-brand-soft);color:var(--jq-brand-dark);display:grid;place-items:center;font-weight:800;font-size:0.8rem;} .justq-app .fileitem .fn{font-weight:700;} .justq-app .fileitem .fmeta{color:var(--jq-ink-soft);font-size:0.75rem;} /* 첨부 업로더 (드래그앤드롭 · 누적 추가 · 개별 삭제) */ .justq-app .jq-drop{margin-top:0.5rem;border:2px dashed var(--jq-line);border-radius:var(--bs-border-radius-lg);padding:20px 16px;text-align:center;cursor:pointer;background:var(--jq-brand-soft);color:var(--jq-ink);transition:border-color .15s, background .15s;} .justq-app .jq-drop:hover, .justq-app .jq-drop:focus, .justq-app .jq-drop.dragover{border-color:var(--jq-brand);background:#eaf4ef;outline:none;} .justq-app .jq-drop-ic{font-size:22px;line-height:1;color:var(--jq-brand-dark);margin-bottom:4px;} .justq-app .jq-drop-sub{color:var(--jq-ink-soft);font-size:0.8rem;margin-top:4px;} .justq-app .jq-fileup-list{display:flex;flex-direction:column;gap:8px;} .justq-app .jq-filechip{display:flex;align-items:center;gap:0.5rem;border:1px solid var(--jq-line);border-radius:10px;padding:8px 12px;} .justq-app .jq-filechip:first-child{margin-top:0.5rem} .justq-app .jq-filechip .ico{width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:var(--jq-brand-soft);color:var(--jq-brand-dark);display:grid;place-items:center;font-weight:800;font-size:11px;} .justq-app .jq-filechip .fn{font-weight:700;word-break:break-all;} .justq-app .jq-filechip .fmeta{color:var(--jq-ink-soft);font-size:0.8rem;} .justq-app .jq-filechip .rm{margin-left:auto;flex:0 0 auto;border:1px solid var(--jq-line);background:#fff;color:var(--jq-ink-soft);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:0.9rem;line-height:1;} .justq-app .jq-filechip .rm:hover{border-color:#d6324b;color:#d6324b;} .justq-app .gallery{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px,1fr));gap:12px;} .justq-app .photo-card{margin:0;} .justq-app .photo{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,#dfeee7,#cfe6db);display:grid;place-items:center;color:var(--jq-brand-dark);font-weight:800;position:relative;overflow:hidden;border:1px solid var(--jq-line);} .justq-app .photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;} .justq-app .photo span.cap{position:absolute;bottom:0;left:0;right:0;background:#0008;color:#fff;font-size:11px;font-weight:600;padding:4px 7px;z-index:1;} .justq-app .photo-note{margin-top:6px;font-size:0.8rem;line-height:1.5;color:var(--jq-ink);background:#f6f8fa;border:1px solid var(--jq-line);border-radius:8px;padding:6px 9px;} /* 정산 박스 */ .justq-app .settle-box{border:1px solid var(--jq-line);border-radius:1rem;overflow:hidden;} .justq-app .settle-row{display:flex;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--jq-line);} .justq-app .settle-row:last-child{border-bottom:0;} .justq-app .settle-row.total{background:var(--jq-brand-soft);font-weight:900;font-size:0.9rem;} .justq-app .settle-row .lbl{color:var(--jq-ink-soft);} /* 댓글 타임라인 */ .justq-app .timeline{display:flex;flex-direction:column;gap:1rem;} .justq-app .cmt{display:flex;gap:0.5rem;} .justq-app .cmt-admin{flex-direction:row-reverse;} .justq-app .cmt .av{width:2rem;height:2rem;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;color:#fff;} .justq-app .cmt-admin .av{background:var(--jq-brand);} .justq-app .cmt-member .av{background:#5c6bc0;} .justq-app .cmt .bubble{width:calc(100% - 3rem);padding:9px 13px;border:1px solid var(--jq-line);border-radius:12px;background:#f6f8fa;} .justq-app .cmt-admin .bubble{border-color:rgba(var(--bs-primary-rgb),0.3);background:rgba(var(--bs-primary-rgb),0.1);} .justq-app .cmt .bubble .h{display:flex;justify-content:space-between;font-size:0.8rem;margin-bottom:3px;} .justq-app .cmt .bubble .h b{color:var(--jq-ink);} .justq-app .cmt .bubble .h .time{color:var(--jq-ink-soft);} @media (min-width:768px){ .justq-app .cmt .bubble{width:calc(100% - 10rem);} } @media (min-width:1024px){ .justq-app .cmt .bubble{width:calc(100% - 15rem);} } @media (min-width:1500px){ .justq-app .cmt .bubble{width:calc(100% - 20rem);} } /* admin 인라인 액션 박스 */ .justq-app .admin-inline{background:#fffdf5;border:1px dashed #e6cf8a;border-radius:12px;padding:14px 16px;margin-top:14px;} .justq-app .admin-inline .ah{font-size:0.8rem;font-weight:800;color:#9a7b1f;display:flex;align-items:center;gap:6px;margin-bottom:10px;} /* 알림/안내 */ .note{background:rgba(var(--bs-primary-rgb),0.2);border:1px solid rgba(var(--bs-primary-rgb),0.3);color:var(--bs-dark);padding:10px 14px;border-radius:10px;font-size:0.8rem;} .justq-app .empty{text-align:center;color:var(--jq-ink-soft);padding:30px;font-size:0.85rem;} /* 통계 카드 */ .justq-app .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;} .justq-app .stat{background:#fff;border:1px solid var(--jq-line);border-radius:14px;padding:16px 18px;box-shadow:var(--jq-shadow);} .justq-app .stat .k{color:var(--jq-ink-soft);font-size:0.8rem;font-weight:700;} .justq-app .stat .v{font-size:24px;font-weight:900;margin-top:4px;letter-spacing:-.5px;} .justq-app .stat .v small{font-size:0.85rem;font-weight:700;color:var(--jq-ink-soft);} /* 토스트 */ .justq-app .toast, .toast.justq-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--jq-ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:0.9rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:200;opacity:0;transition:.25s;pointer-events:none;} .justq-app .toast.show, .toast.justq-toast.show{opacity:1;bottom:34px;} .justq-app .breadcrumb{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:0.5rem;margin-bottom:0.5rem;font-size:0.8rem;color:var(--jq-ink-soft);} .justq-app .breadcrumb a{color:var(--jq-ink-soft);} /* 검역 유형 칩 */ .justq-app .typechip{font-size:11px;font-weight:800;padding:3px 9px;border-radius:7px;white-space:nowrap; color:var(--tc, #1f7a5a);background:color-mix(in srgb, var(--tc, #1f7a5a) 12%, #fff); border:1px solid color-mix(in srgb, var(--tc, #1f7a5a) 30%, #fff);} /* 의뢰 제목 색상 */ .justq-app .req-title{font-weight:800;letter-spacing:-.2px;} .justq-app table.tbl .req-title{ } /* B/L 다중 세트 / 정산 항목 편집 그리드 */ .justq-app .bl-head, .justq-app .sett-edit-head{ display:grid;grid-template-columns:1fr 1fr 1fr 60px;gap:8px; font-size:11.5px;font-weight:800;color:var(--jq-ink-soft);padding:0 2px 4px; } .justq-app .sett-edit-head{grid-template-columns:1fr 160px 60px;} .justq-app .bl-row,.justq-app .sett-row-edit{ display:grid;grid-template-columns:1fr 1fr 1fr 60px;gap:8px;margin-bottom:8px;align-items:center; } .justq-app .bl-row input{width:100%} .justq-app .sett-row-edit{grid-template-columns:1fr 160px 60px;} .justq-app .bl-row .input, .justq-app .sett-row-edit .input{margin:0;} .justq-app .bl-row .btn, .justq-app .sett-row-edit .btn{width:100%;justify-content:center;} @media (max-width:767px){ .justq-app .grid2{grid-template-columns:1fr;} .justq-app .stat-grid{grid-template-columns:1fr 1fr;} .justq-app .detail-head .meta{width:100%;} .justq-app .header nav{display:none;} .justq-app .bl-head{display:none;} .justq-app .bl-row{grid-template-columns:1fr 1fr;} .justq-app .bl-row [data-qty]{grid-column:1 / 2;} .justq-app .bl-row [data-rmbl]{grid-column:2 / 3;} .justq-app .sett-edit-head{display:none;} .justq-app .sett-row-edit{grid-template-columns:1fr 1fr;} } /* ---------- 로그인 / 가입신청 카드 (SC-01) ---------- */ .justq-app .login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--jq-brand);padding:20px;} .justq-app .login-card{width:100%;max-width:420px;background:#fff;border-radius:1rem;padding:34px 30px;box-shadow:0 20px 60px rgba(0,0,0,.25);} .justq-app .login-card .brand{text-align:center;margin-bottom:2rem;} .justq-app .login-card .brand .mark{font-size:28px;font-weight:900;color:var(--jq-brand);letter-spacing:-1px;} .justq-app .login-card .brand .desc{color:var(--jq-ink-soft);font-size:0.85rem;margin-top:4px;} .justq-app .login-card .btn,.justq-app .login-card input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){width:100%} .justq-app .login-tabs{display:flex;gap:6px;background:#f0f3f6;padding:4px;border-radius:10px;margin-bottom:18px;} .justq-app .login-tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:7px;font-weight:700;color:var(--jq-ink-soft);} .justq-app .login-tabs button.on{background:#fff;color:var(--jq-brand-dark);box-shadow:var(--jq-shadow);} /* 약관 동의/가입 단계 — justq.css 의 :root 토큰 재사용. 디자이너 공유 css(justq.css)는 수정하지 않음 */ .jq-terms{ border:1px solid var(--jq-line); border-radius:9px; background:#fff; max-height:160px; overflow:auto; padding:10px 12px; font-size:12px; color:var(--jq-ink-soft); line-height:1.55; margin-bottom:8px; } .jq-terms-h{ font-weight:700; font-size:12.5px; color:var(--jq-ink-soft); margin:6px 0 5px; } .jq-agree{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--jq-ink); margin-bottom:12px; cursor:pointer; } .jq-agree input{ width:16px; height:16px; margin-top:1px; accent-color:var(--jq-brand); flex:0 0 auto; } .jq-agree .req{ color:var(--jq-st-red); font-weight:700; } .jq-terms table.jq-priv{ width:100%; border-collapse:collapse; font-size:11.5px; } .jq-terms table.jq-priv th, .jq-terms table.jq-priv td{ border:1px solid var(--jq-line); padding:5px 7px; text-align:left; vertical-align:top; } .jq-terms table.jq-priv th{ background:#fafbfc; color:var(--jq-ink-soft); font-weight:700; white-space:nowrap; } .jq-step-h{ font-weight:800; font-size:13px; color:var(--jq-ink); margin:2px 0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; } .jq-back{ border:0; background:transparent; color:var(--jq-brand-dark); font-size:12px; font-weight:700; cursor:pointer; padding:0; } .jq-pager{display:flex;justify-content:center;gap:0.25rem;margin-top:2rem} .jq-pager .page{display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.25rem;background-color:var(--bs-white);font-size:0.85rem;color:var(--jq-ink-soft);} .jq-pager .page.on{border:var(--bs-border-width) solid rgba(var(--bs-primary-rgb),1);background-color:rgba(var(--bs-primary-rgb),1);color:var(--bs-white)} .jq-pager .page-prev,.jq-pager .page-next{display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.25rem;background-color:var(--bs-white);font-size:1.5rem;color:var(--bs-black)} /*접수*/ .bgcolor-gray{background-color:var(--jq-st-gray)} .tr-gray{} .tr-gray th,.tr-gray td{background-color:rgba(var(--jq-st-yellow-rgb),0.1);color:var(--jq-st-black)} .tr-gray .statechip{border-color:rgba(var(--jq-st-yellow-rgb),1) !important;background-color:rgba(var(--jq-st-yellow-rgb),1) !important;color:var(--bs-white) !important} /*취소*/ .bgcolor-yellow{background-color:var(--jq-st-yellow)} .color-canceled{color:var(--jq-st-gray)} .tr-canceled{} .tr-canceled th,.tr-canceled td{background-color:rgba(var(--jq-st-gray-rgb),0.1);color:var(--jq-st-gray)} .tr-canceled .statechip{border-color:transparent !important;background-color:transparent !important;color:var(--jq-st-gray) !important} /*입항전*/ .bgcolor-red{background-color:var(--jq-st-red)} .tr-red{} .tr-red th,.tr-red td{background-color:rgba(var(--jq-st-red-rgb),0.1);color:var(--jq-st-red)} .tr-red:hover th,.tr-red:hover td{background-color:rgba(var(--jq-st-red-rgb),0.2)} .tr-red .statechip{border-color:rgba(var(--jq-st-red-rgb),1) !important;background-color:rgba(var(--jq-st-red-rgb),1) !important;color:var(--bs-white) !important} /*진행중*/ .bgcolor-green{background-color:var(--jq-st-green)} .tr-green{} .tr-green th,.tr-green td{background-color:var(--bs-white);color:var(--jq-st-green)} .tr-green .statechip{border-color:rgba(var(--jq-st-green-rgb),1) !important;background-color:rgba(var(--jq-st-green-rgb),1) !important;color:var(--bs-white) !important} /*검역완료*/ .bgcolor-black{background-color:var(--jq-st-black)} .tr-black{} .tr-black th,.tr-black td{background-color:rgba(var(--jq-st-gray-rgb),0.1);color:var(--jq-st-black)} .tr-black .statechip{border-color:rgba(var(--jq-st-black-rgb),1) !important;background-color:rgba(var(--jq-st-black-rgb),1) !important;color:var(--bs-white) !important} /*정산완료*/ .bgcolor-navy{background-color:var(--jq-st-navy)} .tr-navy{} .tr-navy th,.tr-navy td{background-color:rgba(var(--jq-st-navy-rgb),0.1);color:var(--jq-st-navy)} .tr-navy .statechip{border-color:rgba(var(--jq-st-navy-rgb),1) !important;background-color:rgba(var(--jq-st-navy-rgb),1) !important;color:var(--bs-white) !important} #requestList .page-h{justify-content:space-between;} #requestList .chip{width:calc((100% + 4px) / 3);} #requestList .chip:nth-child(3n){margin-right:-1px} @media (min-width:481px){ #requestList .chip{width:calc((100% + 5px) / 4);} #requestList .chip:nth-child(3n){margin-right:0} #requestList .chip:nth-child(4n){margin-right:-1px} } @media (min-width:768px){ #requestList .chip{width:calc((100% + 8px) / 7);border-width:1px 1px 0} #requestList .chip:nth-child(4n){margin-right:0} #requestList .chip:nth-child(7n){margin-right:-1px} } @media (min-width:1024px){ #requestList .chips{width:auto} #requestList .chip{width:auto} } #requestList .scroller{border-top:1px solid #777;border-right:1px solid #ddd;} #requestList .tbl{position:relative;border-collapse:separate;border-spacing:0;} #requestList .tbl th,#requestList .tbl td{border-width:0 0 1px 1px;font-size:0.85rem;} #requestList .tbl thead th{border-width:0 0 1px 1px;} #requestList .tbl .col1, #requestList .tbl .col3, #requestList .tbl .col4, #requestList .tbl .col5, #requestList .tbl .col6, #requestList .tbl .col7, #requestList .tbl .col8{color:var(--bs-body-color)} #requestList .tbl .col1{width:4rem} #requestList .tbl .col3{width:8rem;font-size:0.9rem} #requestList .tbl .col4{width:10rem;font-size:0.9rem} #requestList .tbl .col5, #requestList .tbl .col6{width:6rem} #requestList .tbl .col7{width:4.5rem;min-width:4.5rem;} #requestList .tbl .col7 .btn{width:100%} #requestList .tbl .col8{width:6rem;min-width:6rem;} #requestList .tbl .col7{position:sticky;right:0;} #requestList .tbl .col8{position:sticky;right:0;} #requestList .tbl .col2{width:auto;font-size:1rem;font-weight:600} #requestList .tbl .btn,#requestList .tbl input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#requestList .tbl select{background-color:var(--bs-white);font-size:0.8rem} #requestList .tbl tbody tr.tr-canceled th[class^="col"],#requestList .tbl tbody tr.tr-canceled td[class^="col"]{font-size:0.8rem;color:var(--jq-st-gray)} #requestList .tbl tbody tr.tr-black th[class^="col"],#requestList .tbl tbody tr.tr-black td[class^="col"]{font-size:0.8rem;color:var(--jq-st-gray)} #requestList .tbl tbody tr.tr-black th.col2,#requestList .tbl tbody tr.tr-black td.col2{font-size:1rem;color:var(--jq-st-black)} #requestList .tbl thead th[class^="col"]{font-size:0.85rem;color:var(--bs-white)} #requestList .tbl tbody tr.tr-gray th,#requestList .tbl tbody tr.tr-gray td{background-color:#fffae5;} #requestList .tbl tbody tr.tr-canceled th,#requestList .tbl tbody tr.tr-canceled td{background-color:#f5f5f6;} #requestList .tbl tbody tr.tr-black th,#requestList .tbl tbody tr.tr-black td{background-color:#f5f5f6;} #requestList .tbl tbody tr.tr-red th,#requestList .tbl tbody tr.tr-red td{background-color:#fce5e9;} #requestList .tbl tbody tr.tr-green th,#requestList .tbl tbody tr.tr-green td{background-color:#ffffff;} #requestList .tbl tbody tr.tr-navy th,#requestList .tbl tbody tr.tr-navy td{background-color:#e7f0fb;} #requestList .tbl tbody tr:hover th,#requestList .tbl tbody tr:hover td{background-color:#ecf3d5} #requestList .help{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;font-size:0.8rem;} #requestList .help ul{display:flex;flex-wrap:wrap;gap:0.5rem;color:var(--jq-ink-soft);} #requestList .help li{display:flex;align-items:center;gap:0.5rem;} #requestList .help .sw{display:inline-flex;width:1rem;height:1rem;border-radius:3px;} @media (min-width:1024px){ #requestList .help{justify-content:space-between;} } /* ---------- 의뢰 상세 통합뷰 ---------- */ #requestView .requestView1{display:flex;flex-direction:column;flex-wrap:wrap;align-items:flex-start;gap:2rem;} #requestView .requestView1 .content{display:flex;flex-direction:column;gap:0.5rem;flex:1} #requestView .requestView1 .content .statechip{font-size:0.85em} #requestView .requestView1 .content .title{margin-bottom:0.5rem} #requestView .requestView1 .content .stitle{display:flex;gap:1rem;padding:0.25rem;border:1px solid rgba(var(--bs-black-rgb),0.1);border-width:1px 0;font-size:13px;color:rgba(var(--bs-black-rgb),0.5)} #requestView .requestView1 .content .con{padding:2rem 0} #requestView .requestView1 .aside{display:flex;flex-direction:column;gap:1rem;width:100%;} #requestView .requestView1 .aside h3{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-top:1rem;border-top:2px solid rgba(var(--bs-black-rgb),1);} #requestView .requestView1 .aside h3 .btn{color::var(--bs-black)} #requestView .requestView1 .aside .card{border-radius:var(--bs-border-radius-lg);} #requestView .requestView1 .aside .meta-list{display:grid;grid-template-columns:auto 1fr;gap:0.25rem 0.5rem;color:var(--bs-white)} #requestView .requestView1 .aside .meta-list dt{font-size:0.85rem;color:rgba(var(--bs-white-rgb),0.8);} #requestView .requestView1 .aside .meta-list dd{font-size:1rem;font-weight:600;color:var(--bs-white);} #requestView .requestView1 .aside .meta-list dd:before{content:"";display:inline-block;width:1px;height:0.6rem;margin:0 1rem 0 0;background-color:rgba(var(--bs-white-rgb),0.5);} #requestView .requestView1 .status-adm{display:block} #requestView .requestView1 .status-adm form{display:flex;flex-wrap:wrap;justify-content:space-between;} #requestView .requestView1 .status-adm label{width:100%;margin-bottom:0.25rem} #requestView .requestView1 .status-adm select{width:calc(100% - 6rem)} #requestView .requestView1 .status-adm .btn{width:5.5rem} #requestView .requestView1 .status-cancel .btn{width:100%} @media (min-width:768px){ #requestView .card1{padding:2rem} #requestView .requestView1{flex-direction:row} #requestView .requestView1 .aside{width:300px;} #requestView .requestView1 .aside .card1{padding:1rem} } #requestView .requestView2 .section-tabs{margin:0 0 1rem} #requestView .requestView2 h3{margin-bottom:1rem} #requestView .requestView2 .requestView2-1 .filelist{margin-bottom:1rem} #requestView .requestView2 .requestView2-1 .btn-wrap{padding-bottom:0;border-top:0} #requestView .requestView2 .requestView2-2 h4{margin-top:1rem;margin-bottom:0.5rem} #requestView .requestView2 .requestView2-2-2 .tbl{min-width:420px} #requestView .requestView2 .requestView2-2-3 .grid2.grid4 input:not([type=date]){width:100%} #requestView .requestView2 .requestView2-2-3 #jqBlRows .bl-row{margin-bottom:1rem} #requestView .requestView2 .requestView2-2-3 #jqAddBl{width:100%} @media (min-width:768px){ #requestView .requestView2 .requestView2-2-3 #jqAddBl{width:auto} } #requestView .requestView3 .qresult{margin-bottom:1rem;font-size:1rem} #requestView .requestView4 .settle-box{font-size:0.9rem} #requestView .requestView4 .empty{border:1px solid rgba(var(--bs-black-rgb),0.1);border-radius:1rem;} #requestView .requestView5 .comments-form{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(var(--bs-black-rgb),0.1);} #requestView .requestView5 .comments-form input{flex:1;} #requestView .requestView5 .comments-form .btn{width:5rem} #requestForm{} #requestForm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#requestForm select,#requestForm textarea{background-color:rgba(var(--bs-black-rgb),0.03)} #requestForm .note{margin-bottom:1rem;border-radius:0} @media (min-width:768px){ #requestForm .card1{padding:2rem} } @media (min-width:1024px){ #requestForm .field > label{font-size:1rem;} #requestForm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#requestForm select,#requestForm textarea{--bs-btn-padding-y:0.6rem;--bs-btn-padding-x:0.6rem;font-size:0.9rem} } #Billing .note{margin-top:1rem;padding:1rem;border-radius:0;font-size:0.9rem} #Billing .note ul{margin-left:1.5rem;list-style:disc} #Billing .note li+li{margin-top:0.25rem} #companyAdd{} #companyAdd input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#companyAdd select,#companyAdd textarea{background-color:rgba(var(--bs-black-rgb),0.03)} #companyAdd .note{margin-bottom:1rem;border-radius:0} #companyAdd .postcode-wrap{display:inline-flex;gap:0.5rem;} #companyAdd .postcode-wrap [type="text"]{width:7rem} #companyAdd .postcode-wrap .btn{width:6rem} @media (min-width:768px){ #companyAdd .card1{padding:2rem} } @media (min-width:1024px){ #companyAdd .field > label{font-size:1rem;} #companyAdd input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#companyAdd select,#companyAdd textarea{--bs-btn-padding-y:0.6rem;--bs-btn-padding-x:0.6rem;font-size:0.9rem;} #companyAdd input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=date]),#companyAdd select,#companyAdd textarea{width:100%} } #companyEdit{} #companyEdit input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#companyEdit select,#companyEdit textarea{background-color:rgba(var(--bs-black-rgb),0.03)} #companyEdit .note{margin-bottom:1rem;border-radius:0} #companyEdit .postcode-wrap{display:inline-flex;gap:0.5rem;} #companyEdit .postcode-wrap [type="text"]{width:7rem} #companyEdit .postcode-wrap .btn{width:6rem} @media (min-width:768px){ #companyEdit .card1{padding:2rem} } @media (min-width:1024px){ #companyEdit .field > label{font-size:1rem;} #companyEdit .btn,#companyEdit input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#companyEdit select,#companyEdit textarea{--bs-btn-padding-y:0.6rem;--bs-btn-padding-x:0.6rem;font-size:0.9rem;} #companyEdit input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=date]),#companyEdit select,#companyEdit textarea{width:100%} } #companyEdit .companyEdit1 #jqAddr1_c,#companyEdit .companyEdit1 .note{margin-top:0.5rem} #companyEdit .companyEdit2,#companyEdit .companyEdit3,#companyEdit .companyEdit4{margin-top:2rem} #companyEdit .companyEdit4 .grid2 .btn-lg{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;color:var(--bs-black)} #companyEdit .companyEdit4 .grid2 .btn-lg+.btn-lg{margin-top:0.5rem} #companyEdit .companyEdit4 .grid2 .btn-lg .btn.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;border-radius:2rem;font-size:12px;} #companyEdit .companyEdit4 .assign_customer{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(var(--bs-black-rgb),0.1);} #companyEdit .companyEdit4 .assign_customer .field{display:flex;flex-wrap:wrap;align-items:center;gap:1rem} #companyEdit .companyEdit4 .assign_customer label{width:100%;margin-bottom:-0.5rem;} #companyEdit .companyEdit4 .assign_customer select{width:calc(100% - 9rem);max-width:15rem} #companyEdit .companyEdit4 .assign_customer button{width:8rem} @media (min-width:768px){ #companyEdit .companyEdit4 .grid2{gap:1rem} #companyEdit .companyEdit4 .grid2 .btn-lg+.btn-lg{margin-top:0} #companyEdit .companyEdit4 .assign_customer label{width:9rem;margin-bottom:0;} #companyEdit .companyEdit4 .assign_customer select{width:calc(100% - 18rem)} } #companyList .page-h{justify-content:space-between;} #companyList .search-box{width:100%} #companyList .chips-wrap{display:flex;flex-direction:column;flex-wrap:wrap;gap:0.5rem;width:100%} #companyList .search{display:flex;flex-wrap:wrap;gap:0.5rem;width:100%} #companyList .search [type="text"]{width:calc(100% - 4.5rem)} #companyList .search .btn{width:4rem} @media (min-width:481px){ #companyList .chips-wrap{flex-direction:row;width:auto} #companyList .chips{width:auto} #companyList .search{width:14.25rem} } @media (min-width:768px){ #companyList .search-box{flex-direction:row;justify-content:space-between;} } @media (min-width:1024px){ #companyList .chip{padding:0.5rem 0.75rem} #companyList .search{width:24rem} } @media (min-width:1280px){ #companyList .search-box{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;} #companyList .chip{padding:0.5rem 1rem} } #companyList .scroller{border-top:1px solid #777;border-right:1px solid #ddd;} #companyList .tbl{position:relative;border-collapse:separate;border-spacing:0;} #companyList .tbl th,#companyList .tbl td{border-width:0 0 1px 1px;font-size:0.85rem;} #companyList .tbl thead th{border-width:0 0 1px 1px;} #companyList .tbl tbody th,#companyList .tbl tbody td{background-color:#fff} #companyList .tbl tbody tr:hover th,#companyList .tbl tbody tr:hover td{background-color:#ecf3d5} #companyList .tbl .col1{width:auto} #companyList .tbl .col2{width:6rem} #companyList .tbl .col3{width:8rem} #companyList .tbl .col4{width:8rem} #companyList .tbl .col5{width:7rem} #companyList .tbl .col6{width:6rem} #companyList .tbl .col7{position:sticky;right:3.5rem;width:5rem} #companyList .tbl .col8{position:sticky;right:0;width:3.5rem} #companyList .tbl .btn-sm{--bs-btn-padding-y:0.125rem;--bs-btn-padding-x:0.5rem;border-radius:0.5rem;font-size:12px} /* FAQ 아코디언 */ #FAQ{} #FAQ .note{margin-bottom:1rem;border-radius:0} #FAQ .faq-list{display:flex;flex-direction:column;gap:10px;} #FAQ .faq{background-color:#fff;border:1px solid var(--jq-line);border-radius:var(--bs-border-radius-lg);box-shadow:var(--jq-shadow);overflow:hidden;} #FAQ .faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:800;display:flex;align-items:center;gap:10px;} #FAQ .faq summary::-webkit-details-marker{display:none;} #FAQ .faq summary::after{content:'\ea4e';margin-left:auto;color:var(--jq-ink-soft);font-family:remixicon;font-size:18px;transition:.2s;} #FAQ .faq[open] summary::after{transform:rotate(180deg);} #FAQ .faq .qmark{width:24px;height:24px;flex:none;border-radius:7px;background-color:var(--jq-brand);color:#fff;display:grid;place-items:center;font-size:0.8rem;font-weight:900;} #FAQ .faq-a{padding:0 18px 16px 52px;color:var(--jq-ink);font-size:0.9rem;line-height:1.7;} #FAQ .faq summary:hover{background-color:#fafcfb;}