/* 공통 */
.project_wrap { width:100%; min-width:1024px; height:100vh; margin:0 auto; display:flex; }
.button_box { display:flex; gap:10px; }
button { min-width:100px; height:40px; padding:0 15px; border:1px solid #ddd; border-radius:5px; background:#fff; }
button:hover { background:#f9f9f9; }
button.main { border:0; color:#fff; background:#4F46E5; }
button.main:hover { background:#4338CA; }
button.low { height:36px; }
button.barcodeScan { background:#000; color:#fff; }
.dropdown { display:inline-block; }
.dropdown button { min-width:140px; height:36px; padding:0 10px; text-align:left; font-size:14px; font-weight:400; border:1px solid #ddd; border-radius:5px; display:flex; align-items:center; justify-content:space-between; background:none; }
.dropdown .dropdown-menu { width:100%; min-width:auto; padding:0; overflow:auto; max-height:277px; }
.dropdown .dropdown-menu li a { color:#475569; }
.dropdown .dropdown-menu li .dropdown_list { width:100%; padding:10px; border-radius:5px; display:flex; align-items:center; cursor:pointer; }
.dropdown .dropdown-menu li .dropdown_list:hover { font-weight:500; background:#eaeef3; }
.check_box { position:relative; }
.check_box input { display:none; }
.check_box label::after { content:''; display:block; width:15px; height:15px; border:1px solid #acb4bc; border-radius:3px; position:absolute; top:50%; left:0; transform:translateY(-50%); background:#fff; }
.check_box input:checked + label::after { border:0; background:#4F46E5; }
.check_box input:checked + label::before { content:''; display:block; width:5px; height:7px; border-bottom:2px solid #fff; border-right:2px solid #fff; position:absolute; top:9px; left:5px; transform:translateY(-50%) rotate(45deg); z-index:1; }
.red_color { color:#EF4444!important; }
/*pagination*/
.table_btm nav { text-align:center; flex:1 1 auto; display:inline-block; }
.pagination { margin:25px 0 0 0; }
.pagination>li>a, .pagination>li>span { border-radius:5px; color:inherit; border:0; background-color:#fff; }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {background-color:#4F46E5; border-color:#4F46E5;}
.pagination>li>a:hover, .pagination>li>span:hover { color:#4F46E5; background:#EEF2FF; }

/* aside */
aside { width:230px; height:100%; padding:0 20px; border-right:1px solid #e2e8f0; }
/* 요금제 배지를 헤더로 옮긴 뒤로 이 줄에는 로고만 남는다 → 아래 메뉴와 같은 왼쪽 기준선에 맞춘다
   (접힌 사이드바는 .small 규칙에서 다시 가운데 정렬한다) */
aside .top_box { height:60px; display:flex; align-items:center; justify-content:flex-start; gap:5px; }
/* 로고 = 심볼(logo.svg) + 워드마크. 워드마크는 Inven=#4F46E5 / Pro=#06B6D4 두 가지 색으로 나뉜다 */
aside .top_box .logo { font-size:19px; font-weight:800; letter-spacing:-.5px; text-decoration:none; color:inherit; display:flex; align-items:center; gap:7px; white-space:nowrap; }
aside .top_box .logo:focus, aside .top_box .logo:active { outline:none !important; box-shadow:none !important; text-decoration:none; color:inherit; }
aside .top_box .logo img { display:block; width:26px; height:26px; flex-shrink:0; }
aside .top_box .logo em { font-style:normal; color:#4F46E5; }
aside .top_box .logo em span { color:#06B6D4; }
aside nav { height:calc(100% - 60px); /*margin-top:20px;*/ overflow-y:auto; -ms-overflow-style:none; }
aside nav::-webkit-scrollbar{ display:none; }
aside nav ul li { margin-top:6px; }
aside nav ul li span { color:#9ba9bd; }
aside nav ul li:first-child { margin:0; }
aside nav ul li button.sub_btn { width:100%; height:40px; padding:0 15px; line-height:40px; border:0; display:flex; align-items:center; justify-content:space-between; background:none; }
aside nav ul li button.sub_btn .icon_box { width:22px; height:22px; display:inline-block; }
aside nav ul li button.sub_btn .icon_box svg { fill:#9ba9bd; vertical-align:top; }
aside nav ul li button.sub_btn.active .icon_box svg { fill:#4F46E5; }
aside nav ul li button.sub_btn:hover .icon_box svg { fill:#4F46E5; }
aside nav ul li.active button.sub_btn .icon_box svg { fill:#4F46E5; }
aside nav ul li.active button.sub_btn { background:#EEF2FF; }
aside nav ul li.active button.sub_btn span { color:#4F46E5; font-weight:700; }
aside nav ul li button.sub_btn.open .arrow { background-position:-25px 0; }
aside nav ul li button.sub_btn.open:hover .arrow { background-position:-25px -25px; }
aside nav ul li.active button.sub_btn .arrow { background-position:0 -25px; }
aside nav ul li.active button.sub_btn:hover .arrow { background-position:0 -25px; }
aside nav ul li.active button.sub_btn.open .arrow { background-position:-25px -25px; }
aside nav ul li.active button.sub_btn.open:hover .arrow { background-position:-25px -25px; }
aside nav ul li button.sub_btn div { display:flex; align-items:center; gap:10px; font-weight:400; }
aside nav ul li button.sub_btn .arrow { width:25px; height:25px; display:inline-block; background:url('/image/aside.svg')no-repeat 0 0; }
aside nav ul li button.sub_btn:hover .arrow { background-position:0 -25px; }
aside nav ul li button.sub_btn:hover span { color:#4F46E5; }
aside nav ul li a { width:100%; height:40px; padding:0 15px; line-height:40px; border-radius:10px; display:flex; align-items:center; gap:10px; }
aside nav ul li a .icon_box { width:22px; height:22px; display:inline-block; }
aside nav ul li a .icon_box svg { fill:#9ba9bd; vertical-align:top; }
aside nav ul li a:hover .icon_box svg { fill:#4F46E5; }
aside nav ul li.active a .icon_box svg { fill:#4F46E5; }
aside nav ul li a:hover span { color:#4F46E5; }
aside nav ul li.active > a { background:#EEF2FF; }
aside nav ul li.active > a .text_box { color:#4F46E5; font-weight:700; }
aside nav ul li ul { display:none; }
aside nav ul li.active ul.in { display:block; }
aside nav ul li ul li { padding-left:32px; }
aside nav ul li ul li.active > a { background:none; }
aside nav ul li ul li:first-child { margin-top:6px; }
aside nav ul li button.open + ul { display:block; }
aside nav ul li button.open img { transform:rotate(-90deg); }
aside.small { width:62px; padding:0 10px; }
aside.small .top_box { justify-content:center; }
/* 접힌 사이드바에서는 워드마크를 감추고 심볼만 남긴다 */
aside.small .top_box .logo em { display:none; }
aside.small .top_box .logo img { width:30px; height:30px; }
aside.small .top_box .toggle_btn img { transform:rotate(0); }
aside.small nav ul li button.sub_btn { padding:0 10px; }
aside.small nav ul li a { padding:0 10px; }
aside.small nav ul li a .text_box { display:none; }
aside.small nav ul li div .text_box { display:none; }
aside.small nav ul li button.sub_btn .arrow { display:none; }
aside.small nav ul li button.sub_btn img { display:none; }
aside.small ~ main { width:calc(100% - 61px); }
.menu_badge_beta { display:inline-block; font-size:10px; font-weight:700; color:#fff !important; background:#4F46E5; border-radius:4px; padding:1px 5px; line-height:16px; vertical-align:middle; margin-left:6px; }
aside.small .menu_badge_beta { display:none; }

/* main */
main { width:calc(100% - 230px); height:100%; position:relative; }
.use_product { display:flex; gap:10px; flex:1 1 auto; justify-content:center; }
.use_product li:not(.fare) { padding:0 10px; line-height:28px; color:#4F46E5; font-weight:700; border-radius:5px; /*background:#EEF2FF;*/ }
.use_product li.member { color:#EF4444; background:#FEE2E2; }
.use_product li.fare button { min-width:auto; height:40px; padding:0 10px; font-weight:500; display:flex; align-items:center; }
.use_product li.fare button span { width:25px; height:25px; margin-right:3px; display:inline-block; background:url('/image/iconBox.svg')no-repeat -25px -25px; }
.use_product li em { padding:3px 5px; margin-left:5px; border:1px solid #4F46E5; border-radius:3px; font-size:12px; font-weight:400; color:#fff; background:#4F46E5; }
.use_product li a span { text-decoration:underline; }
main .top_box { height:60px; padding:0 20px; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
main .top_box .toggle_btn { min-width:auto; height:auto; padding:0; border:1px solid #e2e8f0; border-radius:5px; background:#fff; }
main .top_box .toggle_btn img { transform:rotate(180deg); }
main .top_box .toggle_btn.small img { transform:rotate(0deg); }
main .top_box div { display:flex; gap:10px; align-items:center; }
main .top_box div ul.right_btn { display:flex; align-items:center; gap:10px; }
/* 요금제 버튼 (사이드바 로고 옆 배지를 옮겨온 것). 누르면 요금제 화면으로 간다.
   ⚠ 전역 `button { min-width:100px; height:40px; }` 규칙이 있으므로 둘 다 명시해야 한다 */
main .top_box div ul.right_btn li .plan_btn { height:34px; min-width:auto; padding:0 5px 0 10px; border:1px solid #e2e8f0; border-radius:7px; background:#fff; display:flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer; transition:background .15s, border-color .15s; }
main .top_box div ul.right_btn li .plan_btn:hover { background:#f8fafc; border-color:#cbd5e1; }
main .top_box div ul.right_btn li .plan_btn .plan_label { font-size:12.5px; font-weight:500; color:#64748b; }
main .top_box div ul.right_btn li .plan_btn .plan_grade { padding:2px 8px; border-radius:5px; font-size:12px; font-weight:700; color:#64748b; background:#f1f5f9; }
/* 등급별 색 — 등급은 F(프리)·P(프로) 두 개뿐이다. Free 는 .upgrade 모양으로 따로 처리한다 */
main .top_box div ul.right_btn li .plan_btn .plan_grade.pro { color:#B45309; background:#FEF3C7; }

/* Free 전용 — 업그레이드 유도 모양. JS 가 등급을 받은 뒤 .upgrade 를 붙인다.
   ('요금제' 라벨을 감추고 등급명 + 업그레이드 태그만 남긴다) */
main .top_box div ul.right_btn li .plan_btn .plan_up { display:none; }
main .top_box div ul.right_btn li .plan_btn.upgrade { padding:0 5px 0 12px; border-color:transparent; background:#EEF2FF; }
main .top_box div ul.right_btn li .plan_btn.upgrade:hover { background:#E0E7FF; border-color:transparent; }
main .top_box div ul.right_btn li .plan_btn.upgrade .plan_label { display:none; }
main .top_box div ul.right_btn li .plan_btn.upgrade .plan_grade { padding:0; background:none; color:#4F46E5; font-size:13px; font-weight:800; }
main .top_box div ul.right_btn li .plan_btn.upgrade .plan_up { display:inline-block; padding:3px 8px; border-radius:6px; font-style:normal; font-size:11.5px; font-weight:700; color:#fff; background:#4F46E5; }

/* 프로필 드롭다운의 요금제 줄 (헤더 버튼과 같은 곳으로 이동한다) */
/* 요금제 아이콘 — 계정관리·로그아웃은 스프라이트(myIcon.svg)를 쓰지만 거기에 결제 아이콘이 없어
   별도 파일을 쓴다. background-size 를 재지정하지 않으면 스프라이트용 44px 이 남아 아이콘이 잘린다 */
main .top_box .dropdown .dropdown-menu li.plan a span { background-image:url('/image/payment.svg'); background-size:20px; background-position:center; }
main .top_box .dropdown .dropdown-menu li.plan a em { margin-left:auto; padding:2px 7px; border-radius:5px; font-style:normal; font-size:11.5px; font-weight:700; color:#64748b; background:#f1f5f9; }
main .top_box .dropdown .dropdown-menu li.plan a em.pro { color:#B45309; background:#FEF3C7; }

main .top_box div ul.right_btn li .guide_btn { height:34px; min-width:auto; padding:0 10px; border:none; border-radius:7px; background:#f1f5f9; color:#64748b; font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; transition:background .15s,color .15s; }
main .top_box div ul.right_btn li .guide_btn:hover { background:#EEF2FF; color:#4F46E5; }
main .top_box div ul.right_btn li .guide_btn .guide_icon { width:16px; height:16px; flex-shrink:0; display:flex; background:url('/image/book.svg') center/contain no-repeat; filter:invert(42%) sepia(10%) saturate(600%) hue-rotate(180deg); transition:filter .15s; }
main .top_box div ul.right_btn li .guide_btn:hover .guide_icon { filter:invert(27%) sepia(89%) saturate(1800%) hue-rotate(245deg) brightness(90%); }
main .top_box div ul.right_btn li .guide_btn span { line-height:1; }
main .top_box div ul.right_btn li .mobile_app_btn { height:34px; min-width:auto; padding:0 10px; border:none; border-radius:7px; background:#f1f5f9; color:#64748b; font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; transition:background .15s,color .15s; }
main .top_box div ul.right_btn li .mobile_app_btn:hover { background:#EEF2FF; color:#4F46E5; }
main .top_box div ul.right_btn li .mobile_app_btn .mobile_app_icon { width:16px; height:16px; flex-shrink:0; display:flex; background:url('/image/smartphone.svg') center/contain no-repeat; filter:invert(42%) sepia(10%) saturate(600%) hue-rotate(180deg); transition:filter .15s; }
main .top_box div ul.right_btn li .mobile_app_btn:hover .mobile_app_icon { filter:invert(27%) sepia(89%) saturate(1800%) hue-rotate(245deg) brightness(90%); }
main .top_box div ul.right_btn li .mobile_app_btn span { line-height:1; }
main .top_box div ul.right_btn li .client_shop_btn { height:34px; min-width:auto; padding:0 10px; border:0; border-radius:7px; background:#4F46E5; color:#fff; font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; transition:background .15s; }
main .top_box div ul.right_btn li .client_shop_btn:hover { background:#4338CA; }
main .top_box div ul.right_btn li .client_shop_btn .client_shop_icon { width:16px; height:16px; flex-shrink:0; display:flex; background:url('/image/storefront.svg') center/contain no-repeat; filter:brightness(0) invert(1); }
main .top_box div ul.right_btn li .client_shop_btn span { line-height:1; color:#fff; }
main .top_box div ul.right_btn li .remote_btn { display:flex; align-items:center; }
main .top_box div ul.right_btn li .remote_btn span { width:23px; height:23px; margin-right:3px; display:inline-block; background:url('/image/remote.svg'); background-size:23px; }
main .top_box div ul.right_btn li .apply_btn { display:flex; align-items:center; }
main .top_box div ul.right_btn li .apply_btn span { width:23px; height:23px; margin-right:3px; display:inline-block; background:url('/image/iconBox.svg') no-repeat 0 -25px; }
main .top_box div ul.right_btn li .feedback_btn { display:flex; align-items:center; }
main .top_box div ul.right_btn li .feedback_btn span { width:23px; height:23px; margin-right:3px; display:inline-block; background:url('/image/iconBox.svg') no-repeat 0 -25px; }
main .top_box div ul.right_btn li .feedback_btn2 { display:flex; align-items:center; }
main .top_box div ul.right_btn li .feedback_btn2 span { width:23px; height:23px; margin-right:3px; display:inline-block; background:url('/image/iconBox.svg') no-repeat -75px -50px; }
main .top_box div ul.right_btn li .notifi_btn { width:25px; min-width:auto; height:25px; padding:0; border:0; position:relative; background:url('/image/iconBox.svg')no-repeat -50px -25px; }
main .top_box div ul.right_btn li .notifi_btn.on::after { content:''; display:block; width:5px; height:5px; border-radius:999px; position:absolute; top:0; right:0; background:#ef4444; }
/* 프로필 버튼 = 아바타 + 이름 + 화살표.
   아바타만 있을 때는 눌러야 하는 것인지 알기 어려웠고, 로그인한 사람 이름도 헤더에 없었다.
   ⚠ 전역 `button { min-width:100px; height:40px; }` 때문에 두 값을 반드시 명시한다 */
main .top_box .dropdown button.profile_btn { width:auto; min-width:0; height:36px; padding:3px 9px 3px 3px; border:1px solid #e2e8f0; border-radius:999px; background:#fff; display:flex; align-items:center; gap:7px; overflow:visible; transition:background .15s, border-color .15s; }
main .top_box .dropdown button.profile_btn:hover { background:#f8fafc; border-color:#cbd5e1; }
main .top_box .dropdown button.profile_btn img { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
main .top_box .dropdown button.profile_btn .profile_name { margin:0; font-size:13px; font-weight:600; color:#334155; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
main .top_box .dropdown button.profile_btn .profile_arrow { width:0; height:0; flex-shrink:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #94a3b8; }
main .top_box .dropdown.open button.profile_btn .profile_arrow { border-top:0; border-bottom:5px solid #94a3b8; }

/* max-height:none — 전역 `.dropdown .dropdown-menu { max-height:277px; overflow:auto }` 때문에
   바로가기 3개를 옮겨온 뒤 내용(297px)이 275px 에 갇혀 메뉴 안에 스크롤바가 생겼다.
   이 메뉴는 항목이 고정이라 스크롤이 필요 없다. */
main .top_box .dropdown .dropdown-menu { min-width:226px; left:auto; right:0; padding:6px; border-radius:12px; max-height:none; overflow:visible; }
/* 드롭다운 안의 바로가기 묶음 (헤더에서 옮겨온 버튼 3종) */
main .top_box .dropdown .dropdown-menu li.menu_head { padding:7px 10px 5px; font-size:11px; font-weight:700; color:#94a3b8; }
main .top_box .dropdown .dropdown-menu li.menu_divider { height:1px; margin:5px 0; background:#e2e8f0; }
main .top_box .dropdown .dropdown-menu li.shortcut a { gap:9px; }
main .top_box .dropdown .dropdown-menu li.shortcut a i { width:17px; height:17px; flex-shrink:0; display:inline-block; background-position:center; background-size:contain; background-repeat:no-repeat; filter:invert(42%) sepia(10%) saturate(600%) hue-rotate(180deg); }
main .top_box .dropdown .dropdown-menu li.shortcut a .client_shop_icon { background-image:url('/image/storefront.svg'); }
main .top_box .dropdown .dropdown-menu li.shortcut a .mobile_app_icon { background-image:url('/image/smartphone.svg'); }
main .top_box .dropdown .dropdown-menu li.shortcut a .guide_icon { background-image:url('/image/book.svg'); }
/* ⚠ 사용안함 — 이름을 프로필 버튼(.profile_btn)에 노출하면서 드롭다운의 사용자 행을 제거했다 */
main .top_box .dropdown .dropdown-menu li.user { padding:0 10px; margin:10px 0; line-height:30px; font-weight:500; display:flex; align-items:center; gap:10px; }
main .top_box .dropdown .dropdown-menu li.user div { width:35px; height:35px; border-radius:999px; overflow:auto; }
main .top_box .dropdown .dropdown-menu li.user div img { width:100%; height:100%; object-fit:cover; }
main .top_box .dropdown .dropdown-menu li a span { width:22px; height:22px; margin-right:5px; display:inline-block; background:url('/image/myIcon.svg')no-repeat; background-size:44px; }
main .top_box .dropdown .dropdown-menu li.account a span { background-position:-22px 0; }
main .btm_box { height:calc(100% - 60px); padding:20px; overflow:auto; background:#f1f5f9; position:relative; }
main .btm_box .title { margin-bottom:30px; font-size:18px; font-weight:700; }
main .btm_box h3 { font-size:20px; font-weight:700; }
main .btm_box p.sub { width:100%; margin-top:5px; font-size:14px; color:#64748B; display:block; word-break:keep-all; }
main .btm_box .back_btn { height:auto; padding:0; margin-bottom:20px; border:0; display:flex; align-items:center; }
main .btm_box .back_btn img { transform:rotate(180deg); }
main .btm_box .back_btn:hover { background:none; }
main .btm_box > div { height:calc(100% - 42px); margin-top:20px; padding:20px; border-radius:5px; box-shadow:0 2px 5px rgba(0,0,0,0.06); background:#fff; }
main .btm_box .table_wrap { overflow-x:auto; overflow-y:hidden; }
main .btm_box .table_box { padding:0;  gap:20px; box-shadow:none; background:none; }
main .btm_box .table_box .label { padding:15px 20px; font-size:15px; font-weight:600; }
main .btm_box .table_box .button_box { padding:10px 0; justify-content:flex-end; }
main .btm_box .table_box table { table-layout:fixed; }
main .btm_box .table_box table tr { height:40px; border-top:1px solid #e2e8f0; }
main .btm_box .table_box table tr:first-child { border:0; }
main .btm_box .table_box table tr:last-child { border-bottom:1px solid #e2e8f0; }
main .btm_box .table_box table tr th { padding:0 10px; font-weight:500; color:#64748b; position:sticky; top:0; background:#f1f5f9; z-index:1; }
main .btm_box .table_box table tr th:first-child { padding-left:20px; }
main .btm_box .table_box table tr th:last-child { padding-right:20px; }
main .btm_box .table_box table tr td { padding:0 10px; }
main .btm_box .table_box table tr td:first-child { padding-left:20px; }
main .btm_box .table_box table tr td:last-child { padding-right:20px; }
main .btm_box .table_box table tr td p { width:100%; }
main .btm_box .table_box table tr td p.overflow { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
main .btm_box .table_box table tr td a { width:100%; color:#0257AC; }
main .btm_box .table_box table tr td a:hover { text-decoration:underline; }
main .btm_box .table_box table tr td .no_cont { width:100%; max-width:none; padding:80px 0; font-weight:500; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
main .btm_box .table_box table tr td .photo { width:30px; height:30px; border-radius:5px; background:#ddd; overflow:hidden; }
main .btm_box .table_box table tr td .photo img { width:100%; height:100%; object-fit:cover; }
main .btm_box .table_box table tr td .delete_btn { min-width:auto; width:22px; height:22px; padding:0; border:0; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#D9D9D9; }
main .btm_box .table_box table tr td .delete_btn span { width:18px; height:18px; display:inline-block; background:url('/image/iconBox.svg')no-repeat 0 -36px; background-size:72px; }
main .btm_box .table_box .table_btm { display:flex; justify-content:flex-end; align-items:center; position:relative; }
main .btm_box .table_box .table_btm .button_box { position:absolute; top:0; right:0; }
main .btm_box .basic .table_box { height:calc(100% - 36px); }
main .btm_box .basic .table_box .table_wrap { height:calc(100% - 56px); border-bottom:1px solid #e2e8f0; border-top:1px solid #e2e8f0; overflow:auto; }
main .btm_box ul.info_list { width:50%; }
main .btm_box ul.info_list li { margin-bottom:25px; }
main .btm_box ul.info_list li:last-child { margin-bottom:0; }
main .btm_box ul.info_list li > div { display:flex; }
main .btm_box ul.info_list li .label { margin-bottom:8px; font-weight:500; text-align:left; display:block; }
main .btm_box ul.info_list li label { width:100%; font-weight:500; position:relative; display:block; }
main .btm_box ul.info_list li input:not([type='checkbox']) { width:100%; height:40px; padding:0 10px; border:1px solid #ddd; border-radius:5px; }
main .btm_box ul.info_list li input[type='password'] { width:calc(100% - 115px); }
main .btm_box ul.info_list li button { height:40px; margin-left:10px; padding:0; }
main .btm_box .main_button_box { height:auto; min-height:auto; padding:0 20px 0 0; display:flex; justify-content:flex-start; gap:10px; box-shadow:none; background:none; }
main .btm_box .search_box { position:relative; }
main .btm_box .search_box input { width:100%; height:36px; padding:0 10px 0 35px; border:1px solid #ddd; border-radius:5px; }
main .btm_box .search_box button { min-width:auto; height:auto; border:0; padding:0; position:absolute; top:50%; left:10px; transform:translateY(-50%); }
main .btm_box .search_box button img { width:20px; }
main .btm_box .calendar_box { display:flex; align-items:center; gap:5px; }
main .btm_box .calendar_box .date_box { width:140px; height:36px; border:1px solid #ddd; border-radius:5px; position:relative; }
main .btm_box .calendar_box .date_box input { width:100%; height:100%; padding:0 10px 0 35px; color:#1E293B; border:0; box-shadow:none; background:none; }
main .btm_box .calendar_box .date_box button { min-width:auto; height:auto; padding:0; border:0; position:absolute; top:50%; left:10px; transform:translateY(-50%); }
main .btm_box .calendar_box .date_box button img { width:20px; }
.datepicker table tr td.active.active { background:#4338CA !important; }
main .btm_box .filter_box { display:flex; flex-wrap:wrap; gap:10px; }
main .btm_box .filter_box .search_box input { width:200px; }
main .btm_box .filter_box .button_box button { height:36px; }
main .btm_box .filter_box .label { margin-bottom:8px; font-weight:500; text-align:left; display:block; }




/***** 시작 가이드 ******/
main .top_box div ul.right_btn li .start_guide_btn { height:34px; min-width:auto; padding:0 10px; border:none; border-radius:7px; background:#f1f5f9; color:#64748b; font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; }
main .top_box div ul.right_btn li .start_guide_btn:hover { background:#EEF2FF; color:#4F46E5; }
main .top_box div ul.right_btn li .start_guide_btn img { width:15px; height:15px; flex-shrink:0; display:flex; filter:invert(42%) sepia(10%) saturate(600%) hue-rotate(180deg); transition:filter .15s; }
main .top_box div ul.right_btn li .start_guide_btn:hover img { filter:invert(27%) sepia(89%) saturate(1800%) hue-rotate(245deg) brightness(90%); }
main .top_box div ul.right_btn li .start_guide_btn span { line-height:1; }

/****** 배너 ******/
.banner { width:100%; height:40px!important; display:flex; justify-content:center; align-items:flex-end; gap:20px; background:#a855f7!important; position:absolute; top:60px; right:0; z-index:1; }
.banner > p { line-height:40px; color:#fff; font-weight:700; }
.banner > img { width:65px; }
.banner > button.close_btn { min-width:auto; height:24px; padding:0; border:0; position:absolute; top:50%; right:20px; transform:translateY(-50%); background:none; }
.banner .button_box { height:40px; display:flex; align-items:center; gap:10px; }
.banner .button_box a { display:inline-block; }
.banner .button_box a img { width:90px; }


/* popover 관련 */
.tooltipOpen { border:1px solid #4F46E5; border-radius:5px; animation:borderBlink 1s linear infinite; }
.tippy-content { min-width:200px; padding:0 !important; }
.tippy-content .tooltip_cont { display:flex; flex-direction:column; align-items:flex-end; }
.tippy-content .title { width:100%; padding:10px; margin:0 !important; font-size:14px !important; border-bottom:1px solid #ddd; }
.tippy-content .content { width:100%; padding:10px; }
.tippy-content button { min-width:0 !important; height:25px !important; margin:0 10px 10px 0 !important; padding:0 10px !important; border:1px solid #ddd !important; font-size:12px !important; position:initial !important; transform:none!important; }
@keyframes borderBlink {
  0%   { border-color: #4F46E5; }
  50%  { border-color: transparent; }
  100% { border-color: #4F46E5; }
}

@media only screen and (max-width:1040px){
    main .btm_box .filter_box .button_box button { width:90px; min-width:90px; }
}  

@media only screen and (max-width:1024px){
    button { height:34px; }
    button.low { height:34px; }
    .dropdown button { min-width:130px; height:34px; }
    .dropdown .dropdown-menu { max-height:145px; }
    .pagination { margin-top:20px; }
    main .btm_box h3 { font-size:18px; line-height:20px; }
    main .btm_box .search_box input { height:34px; }
    aside .top_box .logo { font-size:20px; }
    aside { width:200px; }
    main { width:calc(100% - 200px); }
    main .btm_box > div { height:calc(100% - 40px); }
    main .btm_box ul.info_list { width:100%; }
    main .btm_box ul.info_list li input:not([type='checkbox']) { height:34px; }
    main .btm_box ul.info_list li button { height:34px; }
    main .btm_box .basic .table_box { height:calc(100% - 34px); }
    main .btm_box .basic .table_box .table_wrap { height:calc(100% - 54px); }
    main .btm_box .filter_box .search_box input { width:190px; }
    main .btm_box .filter_box .button_box button { width:90px; min-width:90px; height:34px; }
    main .btm_box .calendar_box .date_box { width:130px; height:34px; }
}