:root {
    --bs-blue: #51459d;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #e83e8c;
    --bs-red: #ff3a6e;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffa21d;
    --bs-green: #24b770;
    --bs-teal: #20c997;
    --bs-cyan: #3ec9d6;
    --bs-white: #ffffff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #51459d;
    --bs-secondary: #6c757d;
    --bs-success: #24b770;
    /*--bs-info: #3ec9d6;*/
    --bs-info: #3ea0d6;
    --bs-warning: #ffa21d;
    --bs-danger: #ff3a6e;
    --bs-light: #f8f9fa;
    --bs-dark: #1c232f;
    --bs-primary-rgb: 81, 69, 157;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 111, 217, 67;
    /*--bs-info-rgb: 62, 201, 214;*/
    --bs-info-rgb: 62, 160, 214;
    --bs-warning-rgb: 255, 162, 29;
    --bs-danger-rgb: 255, 58, 110;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 28, 35, 47;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 41, 50, 64;
    --bs-body-bg-rgb: 248, 249, 253;
    --bs-font-sans-serif: "Open Sans", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #293240;
    --bs-body-bg: #f8f9fd;
}

/* --------------------- common ---------------------------- */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Extralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

html,body {width:100%;}
html {overflow:auto; box-sizing:border-box;}
*, *:before, *:after{box-sizing:inherit;}
*{
    -webkit-text-size-adjust:none;
}
body {word-break:break-all; -ms-word-break:break-all;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,a,blockquote,th,td,input,select,textarea,button {margin:0; padding:0;
    font-family: 'Pretendard'; font-weight: 400; color:#2D3643;}
h1,h2,h3,h4,h5,h6,form,fieldset,legend,p,th,td,input,select,textarea { line-height:1.6;}
fieldset,img {border:0px none; vertical-align:top;}
dl,ul,ol,menu,li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';}
button {border:0 none; background-color:transparent; cursor:pointer;}
body { background:#fff;}
input, select, textarea, button{vertical-align:middle; }
a:link,a:active,a:visited{text-decoration:none;}

table {border-collapse:collapse; border-spacing:0;}
address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:400;}
summary, caption, legend, hr {width:0; height:0; overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;}
caption {position:static;}
.clfix:after {content: "."; display: block; height:0; clear: both; visibility: hidden;}

#wrap{ position: relative; margin:0 auto; width: 100%; max-width: 767px; min-width: 320px; font-family:'Pretendard';}
.inner{width: 100%; margin: 0 auto; max-width: 100%; padding: 0 16px;}

/* ========= 공통 스타일 ========= */
.none { display:none;}
.c_green { color:#24B770 !important;}

textarea,
input[type="text"],
input[type="date"],
input[type="number"]{ padding:16px; outline:0; border:1px solid #EEF1F5; background:#fff; border-radius:16px; font-size:15px; color:#2D3643;}
select { padding:16px; outline:0; border:1px solid #EEF1F5; background:#fff; border-radius:16px; font-size:15px; color:#2D3643; appearance: none;}
textarea::placeholder,
input[type="text"]::placeholder,
input[type="number"]::placeholder { color:#C9D0D9;}
textarea:focus,
input[type="text"]:focus,
input[type="date"]:focus,
input[type="number"]:focus { border-color:#24B770; background:#fff;}
textarea:disabled,
input[type="text"]:disabled,
input[type="date"]:disabled,
input[type="number"]:disabled,
textarea:read-only,
input[type="text"]:read-only,
input[type="date"]:read-only,
input[type="number"]:read-only { color:#2D3643; background-color: #F4F7FA; border-color: #F4F7FA;}
textarea:read-only::placeholder,
input[type="text"]:read-only::placeholder,
input[type="number"]:read-only::placeholder{ color:#C9D0D9; font-weight: 400;}
textarea:read-only:focus,
input[type="text"]:read-only:focus,
input[type="date"]:read-only:focus,
input[type="number"]:read-only:focus{ border-color:#F4F7FA;}
input[type="date"] { position:relative;}
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button { display: none;}
input[type='date']::-webkit-calendar-picker-indicator { position:absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent;}

.profile_img .img_wrap { position:relative; width:100%; padding-bottom: 100%;}
.profile_img .img_wrap img { position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;}

.btn_stl01 { padding:4px 8px; min-width:60px; background:#EEF1F5; border-radius: 8px; font-size:14px; color:#5F6976; font-weight:500; line-height:22px; box-sizing: border-box;}
.btn_stl01.green { background:#24B770; color:#fff;}
.btn_stl01.border_green { background:#fff; border:1px solid #24B770; color:#24B770;}
.btn_stl02 { padding:4px 16px; background:#2D3643; border-radius: 8px; font-size:14px; color:#fff; font-weight:500; line-height:24px; box-sizing: border-box;}

.btn_padding01 {padding-bottom:96px;}
.fix_btn{position:fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width:768px; padding: 16px 0}
.fix_btn.bt0 { bottom:0;}
.message_wrap + .fix_btn { bottom:0px;}
.fix_btn02 {position:fixed; right: 0; bottom: 0; padding: 26px 16px;}
.fix_btn02 .chat_plus { display: flex; align-items: center; justify-content: center; width:80px; height:80px; border-radius: 32px; background:#24B770; backdrop-filter:blur(4px); box-shadow: 0px 0px 24px 0px rgba(72, 188, 139, 0.40);}
.fix_btn02 .chat_plus span { position:relative;}
.fix_btn03 {position:fixed; right: 0; bottom: 0; padding: 82px 16px;}
.fix_btn03 .chat_plus { position: fixed; bottom: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width:60px; height:60px; border-radius: 32px; background:#24B770; backdrop-filter:blur(4px); box-shadow: 0px 0px 24px 0px rgba(72, 188, 139, 0.40);}
.fix_btn03 .chat_plus span { position:relative;}
.bot_btn{display:flex; justify-content: space-between;}
.bot_btn button{text-align: center; height:64px; line-height:64px; border-radius:18px; font-size: 16px; font-weight: 500; background-color: #24B770; color:#fff;}
.bot_btn button.color01{background-color: #2D3643;}
.bot_btn button.color02{background-color: #EBFAF4; color:#24B770;}
.bot_btn01 button{display: block; width: calc((100% - 12px)/2);}
.bot_btn01 .chk_stl01 {display: flex; align-items: center; padding:4px; width: calc((100% - 12px)/2); border-radius: 18px; border: 1px solid #2D3643; background: #EDEFF3;}
.bot_btn02 button{display: block; width: 100%;}
.chk_stl01 input { position: absolute; left:-999999%; opacity:0;}
.chk_stl01 span { display: flex; align-items: center; justify-content: center; flex:1; height:100%; font-size:16px; color:#2D3643; font-weight:500; border-radius: 18px;}
.chk_stl01 input ~ .chk_false { background:#2D3643; color:#fff;}
.chk_stl01 input:checked ~ .chk_true { background:#2D3643; color:#fff;}
.chk_stl01 input:checked ~ .chk_false { background:transparent; color:#2D3643;}

/* ========= 로그인 ========= */
.login_wrap { display: flex; flex-direction:row; align-items: center; padding:24px 16px; min-height:100vh; text-align: center;}
.login_wrap .login_txt p { margin-top:12px; font-size:15px; color:#2D3643; font-weight:700;}
.login_wrap .login_box { width:100%;}
.login_wrap .login_ico { padding:24px 0;}
.login_wrap .input_box input { padding:0 24px; width:100%; height:64px; background:#F4F7FA; outline:0; border: 1px solid transparent; border-radius: 18px; font-size:15px; color:#2D3643;}
.login_wrap .input_box input ~ input { margin-top:16px;}
.login_wrap .input_box input::placeholder { font-size:15px; color:#C9D0D9;}
.login_wrap .input_box input:focus { border-color:#24B770; background:#fff;}
.login_wrap .input_box input:focus::placeholder { color:#2D3643;}
.login_wrap .input_box label { display: block; margin-bottom:8px; font-size:14px; color:#2D3643; font-weight:700; text-align: left;}
.login_wrap .btn_login { margin-top:40px; width:100%; height:64px; border-radius: 18px; background:#24B770; font-size:18px; color:#fff; font-weight:700;}

/* ========= 헤더 ========= */
#header { position: fixed; left:50%; top:0; transform: translateX(-50%); width:100%; max-width: 767px; background:#fff; z-index: 10000;}
#header .top_bar { display:flex; align-items: center; justify-content: space-between; position:relative; padding:10px 0; min-height:44px;}
#header .top_bar.center { justify-content: center; text-align: center;}
#header .top_bar h1 { display: flex; align-items: center; height:100%;}
#header .top_bar h2 { font-size: 18px; font-weight:500;}
#header .top_bar .back_btn a,
#header .top_bar .quick_btn a,
#header .top_bar .quick_btn button { display: flex; align-items: center; justify-content: center; width:24px; height:24px;}
#header .top_bar .back_btn.none,
#header .top_bar .quick_btn.none,
#header .top_bar .tit.none,
#header .top_bar .quick_btn a.none { display: none;}
#header .top_bar .tit { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); font-size:16px; color:#2D3643; font-weight:500; line-height:1; text-align:center;}
#header .top_bar .tit span { display: block; margin-top:4px; font-size:13px; color:#5F6976; font-weight:400;}
#header .top_bar .tit.none + .quick_btn { width:100%;}
#header .top_bar .back_btn { display: flex; align-items: center;}
#header .top_bar .profile_img { overflow: hidden; margin-right:6px; width:40px; border:1px solid #EEF1F5; background:#F4F7FA; border-radius:15px;}
#header .top_bar .chat_top { display: flex; align-items: center; width:calc(100% - 40px);}
#header .top_bar .chat_top a { display: flex; align-items: center; gap:0 16px; width:100%;}
#header .top_bar .profile_group { display: flex; align-items: center; justify-content: center; width:40px; height:40px; border:1px solid #EEF1F5; background:#F4F7FA; border-radius:15px;}
#header .top_bar .profile_group span { font-size:13px; color:#788290; font-weight:700;}
#header .top_bar .user_name { display: block; max-width:calc(60%); font-size:14px; color:#2D3643; font-weight:500; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
#header .top_bar .quick_btn { display: flex; justify-content: flex-end; gap:0 8px;}
#header .bottom_bar .tab_menu { display:flex; margin-top:5px;}
#header .bottom_bar .tab_menu li { padding:0 16px; border-bottom:1px solid transparent; min-height:44px;}
#header .bottom_bar .tab_menu li.active { border-color:#24B770;}
#header .bottom_bar .tab_menu li a { display: flex; align-items: center; padding:8px 0; height:100%; font-size:15px; color:#2D3643; font-weight:500;}
#header .bottom_bar .tab_menu li.active a { color:#24B770;}

#header .filter_wrap { display: flex; align-items: stretch; gap:0 12px; padding:12px 0; position:relative; width:100%;}
#header .filter_wrap .filter_box { display: flex; flex-wrap:wrap; align-items: center; gap:8px; width:calc(100% - 70px);}
#header .filter_wrap .filter_btn_wrap { width:57px;}
#header .filter_wrap .filter_btn_wrap .btn_stl01 { width:100%; height:100%;}
#header .filter_wrap .filter_box .input_box02 select { outline: none; border-color:#F4F7FA; appearance: none; background:#F4F7FA url(../mobile_img/wmp/arrow_down.svg) right 12px center no-repeat; background-size:16px auto; font-size:14px; color:#5F6976;}

/* ========= 메뉴 ========= */
.main_menu { padding:24px 0; max-width: 375px; margin: 0 auto;}
.main_menu .txt_wrap { margin-bottom:65px;}
.main_menu .txt_wrap p { margin-bottom:8px; font-size:24px; color:#2D3643; font-weight:500; line-height:36px;}
.main_menu .txt_wrap p em { color:#24B770; font-weight:500;}
.main_menu .txt_wrap span { font-size:16px; color:#5F6976; font-weight:500;}
.main_menu .menu_list { display:flex; flex-wrap:wrap; gap:40px 0;}
.main_menu .menu_list li { padding:0 17px; width:33.333%;}
.main_menu .menu_list li a { display:flex; flex-direction: column; align-items: center; justify-content: center; gap:16px 0;}
.main_menu .menu_list li strong { font-size:16px; color:#2D3643; font-weight:700;}

.more_wrap { padding:24px 0; margin:0 auto;}
.more_wrap .menu_list { display: flex; flex-wrap: wrap; gap:12px;}
.more_wrap .menu_list li { display: flex; flex-direction: column; align-items: center; justify-content: center; width:calc((100% - 12px)/2); height:120px; text-align: center;}
.more_wrap .menu_list li p { margin-top:12px; font-size:14px; color:#1A212E;}

.board_container .board_top { padding:24px 0; border-bottom: 1px solid #EEF1F5;}
.board_container .board_top.type02 { border-bottom:transparent;}
.board_container .board_top .inner { display: flex; justify-content: space-between; align-items: center;}
.board_container .board_top .sub_tit01 { font-size:16px; color:#2D3643; font-weight:700;}
.board_container .board_top .paging01 { display: flex; align-items: center; gap:0 8px;}
.board_container .board_top .paging01 a { display: flex; align-items:center; padding:4px 16px; min-height:32px; background:#EBFAF4; border-radius: 8px; font-size:15px; color:#24B770; font-weight:500;}
.board_container .board_top .paging01 span { font-size:15px; color:#24B770; font-weight:500;}
.board_container .search_wrap { padding:24px 0;}
.board_container .search_wrap label { font-size:15px; color:#2D3643; font-weight:500;}
.board_container .search_wrap .search_box { display: flex; align-items: stretch; gap:0 12px; margin-top:8px;}
.board_container .search_wrap .search_box input { width:calc(100% - 108px);}
.board_container .search_wrap .search_box button { width:96px; background:#24B770; border-radius:16px; font-size:15px; color:#fff; font-weight:500;}
.board_container .search_wrap .search_box .barcode_input { width:100%;}
.board_container .search_wrap .search_box.type02 .barcode_input { width:calc(100% - 108px);}
.board_container .search_wrap .search_box .barcode_input input { width:100%;}
.board_container .search_wrap .search_box.type03 { flex-wrap:wrap; gap:12px;}
.barcode_input { position:relative;}
.barcode_input a { position:absolute; right:0; top:0; display: flex; align-items: center; justify-content: center; width:56px; height:56px;}
.board_container .search_wrap .search_box + label { display: block; margin-top:16px;}
.board_container .search_wrap + .board_list_wrap.type02 { padding:0;}
.board_list_wrap { padding:24px 0; background:#F4F7FA; min-height:calc(100vh - 282px);}
.input_wrap + .board_list_wrap:not(.type02) { margin-top:24px;}
.input_wrap + .board_list_wrap { min-height:auto;}
.board_list_wrap .board_list li { display:flex; align-items: center; justify-content: space-between; gap:0 16px; padding:16px 20px; background:#fff; border-radius: 16px;}
.board_list_wrap .board_list li ~ li { margin-top:12px;}
.board_list_wrap .board_list li .txt_box { width:calc(100% - 77px);}
.board_list_wrap .board_list li .txt_box p { display: flex; align-items: flex-start; font-size:15px; color:#2D3643; font-weight:700; line-height:1.4;}
.board_list_wrap .board_list li .txt_box p ~ p { margin-top:4px;}
.board_list_wrap .board_list li .txt_box p em { display: block; min-width:max-content; margin-right:8px; font-size:13px; color:#5F6976;}
.board_list_wrap.type02 { background:#fff;}
.board_list_wrap.type03 { padding:0; background:#fff;}
.board_list_wrap .board_list.type02 li { border: 1px solid #EEF1F5;}
.list_btn_wrap { width:57px;}
.list_btn_wrap button ~ button { margin-top:8px;}

/* 입력폼 공통 */
.input_wrap{padding-top:24px}
.input_box{margin-bottom:16px}
.input_box:last-child{margin-bottom: 0;}
.input_box .tit{display:flex; margin-bottom:8px;}
.input_box .tit img{margin-right:4px;}
.input_box .tit em{display: block; font-size: 15px; font-weight: 500; color:#2D3643;}
.input_box .box ~ .box { margin-top:8px;}
.input_box .box01 input,
.input_box .box01 select {width: 100%;}
.input_box .box01 p {padding:16px; width: 100%; height:auto; background:#F4F7FA; border-radius: 16px; word-break: break-all;}
.input_box .box02 {display: flex; align-items: stretch; gap:0 12px;}
.input_box .box02 .barcode_input { width:calc(100% - 108px);}
.input_box .box02 .barcode_input input { width:100%;}
.input_box .box02 input { width:calc(100% - 108px);}
.input_box .box02 button { width:96px; background:#24B770; border-radius:16px; font-size:15px; color:#fff; font-weight:500;}
.input_box .box03{display: flex; justify-content: space-between;}
.input_box .box03 input{width: calc((100% - 24px)/3);}
.input_box .box04 {display: flex; align-items: stretch; gap:0 12px;}
.input_box .box04 input { width:calc(50% - 6px);}
.input_flex { display: flex; gap:16px;}
.input_flex .input_box { flex:1;}
em.reference{font-size: 15px; color:#24B770; font-weight: 400; line-height: 24px;}
.date_box { display: flex; align-items: center; gap:0 8px; width:100%;}
.inp_date { position:relative; width:calc((100% - 8px)/2);}
.inp_date input { position: absolute; left:0; right:0; opacity: 0;}
.inp_date span { display: flex; align-items: center; padding:0 12px; width:100%; height: 30px; border-radius: 8px; background: #F4F7FA url(../mobile_img/wmp/arrow_down.svg) right 16px center no-repeat; font-size:14px; color:#5F6976; background-size:16px auto;}
.inp_date input::-webkit-calendar-picker-indicator { width:100%; height:100%;}
.input_box02 { width:100%;}
.input_box02 input { padding:0 12px; width:100%; height:30px; border-radius: 8px; font-size:14px;}
.input_box02.flex { display: flex; align-items: center; gap:8px;}
.input_box02.flex input,
.input_box02.flex select {padding:0 12px; width:calc((100% - 8px)/2); height:30px; border-radius: 8px; font-size:14px;}
.input_box03{display: flex; justify-content: space-between;}
.input_box03 .box_wrap{width: calc((100% - 24px)/3);}
.input_box04{display: flex; justify-content: space-between;}
.input_box04 .box_wrap{width: calc((100% - 24px)/2);}
/* ========= 팝업 ========= */
.pop_layer { display: none; position: fixed; left:50%; top:0; bottom:0; z-index: 10001; transform: translateX(-50%); width:100%; max-width: 767px; height:100vh; background: rgba(34, 42, 62, 0.50);}
.pop_layer .pop_con { position:absolute; left:0; right:0; bottom:0; max-height:80vh; padding:16px; border-radius: 16px 16px 0px 0px; background:#fff;}
.pop_layer .pop_con .pop_inner { padding:16px;}
.pop_layer .pop_txt { min-height:238px;}
.pop_layer .pop_txt p { font-size:22px; color:#2D3643; font-weight:700;}
.pop_layer .pop_txt p span { color:#24B770;}
.pop_layer .pop_tit { display: flex; align-items: center; justify-content: space-between;}
.pop_layer .pop_tit h3 { font-size:22px; color:#2D3643; font-weight:700;}
.pop_layer .pop_mid { max-height:208px;}

.chat_wrap { padding:24px 0;}
.chat_wrap .chat_list {}
.chat_wrap .chat_list li { padding:16px 0;}
.chat_wrap .chat_list li a { display:flex; align-items: flex-start; gap:0 16px;}
.chat_wrap .chat_list li .profile_img { overflow: hidden; width:64px; border:1px solid #EEF1F5; background:#F4F7FA; border-radius:20px;}
.chat_wrap .chat_list li .profile_group { display: flex; align-items: center; justify-content: center; width:64px; height:64px; border:1px solid #EEF1F5; background:#F4F7FA; border-radius:20px;}
.chat_wrap .chat_list li .profile_group span { font-size:16px; color:#788290; font-weight:700;}
.chat_wrap .chat_list li .chat_txt01 { width:calc(100% - 151px);}
.chat_wrap .chat_list li .chat_txt01 strong {overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: block; font-size:15px; color:#2D3643; font-weight:500; line-height:1; word-break: break-all;}
.chat_wrap .chat_list li .chat_txt01 p { overflow:hidden; white-space:normal; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;
    margin-top:4px; width:100%; height:36px; font-size:13px; color:#788290; line-height:1.4;}
.chat_wrap .chat_list li .chat_txt02 { width:80px; text-align:right;}
.chat_wrap .chat_list li .chat_txt02 span { font-size:12px; color:#C9D0D9;}
.chat_wrap .chat_list li .chat_txt02 .num { display: inline-block; margin-top:4px; padding:0 8px; line-height:24px; border-radius: 8px; background: #2D3643; font-size:13px; color:#fff; font-weight:700;}

.message_wrap { overflow-y:scroll; padding:24px 0; height:calc(100vh - 150px); border:1px solid #EEF1F5; border-left:0; border-right:0;}
.message_wrap .incoming { display:flex; flex-wrap:wrap; align-items: flex-start; gap:0 12px;}
.message_wrap .outgoing { display:flex; justify-content: flex-end; flex-wrap:wrap; align-items: flex-start;}
.message_wrap .incoming .profile_img { overflow: hidden; width:32px; border:1px solid #EEF1F5; background:#F4F7FA; border-radius:12px;}
.message_wrap .message ~ .message { margin-top:32px;}
.message_wrap .message .txt_wrap { position:relative; }
.message_wrap .message .txt_wrap .profile_name { display: block; margin-bottom:8px; font-size:13px; color:#788290;}
.message_wrap .message .txt_wrap a { color: #24b770;}
.message_wrap .message .txt_box { display: flex; align-items: flex-end; padding:12px 16px; margin-top:8px; border-radius:16px;}
.message_wrap .message .txt_box ~ .txt_box { margin-top:8px;}
.message_wrap .message .txt_box p { font-size:13px; color:#2D3643; line-height: 1.4;}
.message_wrap .incoming .txt_wrap { padding-right:60px;}
.message_wrap .incoming .txt_box { background:#EBFAF4;}
.message_wrap .incoming .file-thumb-grid { justify-content: start;}
.message_wrap .outgoing .txt_wrap { padding-left:60px;}
.message_wrap .outgoing .txt_box { background:#F4F7FA;}
.message_wrap .outgoing .file-thumb-grid { justify-content: end;}
.message_wrap .outgoing,.message_wrap .incoming { margin-bottom: 24px;}
.message_wrap .message .m_time { position:absolute; bottom:0; font-size:12px; color:#C9D0D9;}
.message_wrap .incoming .m_time { right:0;}
.message_wrap .outgoing .m_time { left:0;}
.system_message_wrapper {
    text-align: center;
}
.system_message {
    display: inline-block;
    background-color: #5a6268;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    max-width: 80%;
    word-break: break-word;
    text-align: center;
    margin: 10px auto;
    line-height: 1.4;
}
/*.system_message span { display: inline-block; padding:4px 0; min-width:160px; border-radius: 26px; background: #5F6976; font-size:13px; color:#fff; font-weight:500; line-height:1.4;}*/
.message_input { display:flex; align-items: center;}
.message_input .btn_file {}
.message_input .btn_file input { position:absolute; left:-9999%;}
.message_input .btn_file span { display: block; width:56px; height:56px; border:1px solid #EEF1F5; border-radius:16px; background:#fff url(../mobile_img/ico_file.svg) center no-repeat;}
.message_input input[type="text"] { margin:0 12px 0 8px; width:calc(100% - 132px);}
.message_input button { width:56px; height:56px; border-radius:16px; background:#24B770;}

.tab_select { display:flex; align-items: center; gap:0 8px;}
.tab_select button { display: block; padding:0 16px; border:1px solid #EEF1F5; border-radius:8px; background:#fff; font-size:15px; color:#C9D0D9; font-weight:500; line-height:32px;}
.tab_select button.active { border-color:#24B770; background:#EBFAF4; color:#24B770;}

/* WMP */
#contents.quick_contents { padding-bottom: 72px;}
#contents.quick_contents .fix_btn02 {padding:24px 16px; bottom:72px;}

.mob_intro { display: flex; align-items: center; justify-content: center; width:100%; height:100dvh; background:#24B770; text-align: center;}
.mob_intro p { width:100%; margin-top:20px; font-size:20px; color:#fff; font-weight:500; line-height:1.4;}

.main .con { padding:16px 0;}
.main_tit { display: flex; align-items: center; justify-content: space-between;}
.main_tit h2 { font-size:16px; font-weight:700;}
.main_tit img { width:20px;}
.con_data_list { display: flex; align-items: stretch; gap:8px; margin-top:12px;}
.con_data_list li { flex:1; padding:12px 16px; min-height:80px; border-radius: 12px; border: 1px solid #E6EAEF; background: #fff;}
.con_data_list li span { font-size:14px; color:#5F6976; font-weight:500;}
.con_data_list li strong { display: block; margin-top:8px; font-size:16px; font-weight:700; text-align: right;}
.con_data_list li.rate { border-color: #2D3643; background: #2D3643;}
.con_data_list li.rate span,
.con_data_list li.rate strong { color:#fff;}
.con_data_list li.rate .rate_up span { padding-left:28px; background:url(../mobile_img/wmp/ico_up.svg) left center no-repeat; background-size:24px auto;}
.con_data_list li.rate .rate_down span { padding-left:28px; background:url(../mobile_img/wmp/ico_down.svg) left center no-repeat; background-size:24px auto;}

#quick_menu { position:fixed; left:0; right:0; bottom:0; margin:0 auto; max-width:768px;}
#quick_menu .quick_list { display: flex; border-top: 1px solid #E6EAEF; background: #fff;}
#quick_menu .quick_list li { flex:1; display: flex; justify-content: center; padding:20px 0; min-height:71px;}
#quick_menu.type01 .quick_list li img:not(.on) { filter:grayscale(1);}
#quick_menu .quick_list li img { height:20px;}
#quick_menu .quick_list li img.on { display: none;}
#quick_menu .quick_list li.active img { display: none;}
#quick_menu .quick_list li.active img.on { display: block;}

/*스크롤*/
.scroll { overflow:auto;}
.scroll::-webkit-scrollbar { width: 4px; height:4px;}
.scroll::-webkit-scrollbar-thumb { background-color: #ACB2BA;}
.scroll::-webkit-scrollbar-track { background-color: transparent;}

/*페이징*/
.paging_wrap { padding:24px 0 60px; text-align:center;}
.paging_wrap .paging { display: inline-flex; align-items: center; gap:0 8px;}
.paging_wrap .paging li { width:40px; height:40px;}
.paging_wrap .paging li.arrow { display: flex; align-items: center; justify-content: center;}
.paging_wrap .paging li a { display: flex; align-items: center; justify-content: center;}
.paging_wrap .paging li:not(.arrow) a { width:100%; height:100%; border-radius: 50%; background: #E6EAEF; font-size:14px; color:#5F6976; font-weight:500;}
.paging_wrap .paging li:not(.arrow).active a { background:#24B770; color:#fff;}

/*리스트*/
.list_type01 li { padding:16px 0; background:#fff; border-bottom: 1px solid #E6EAEF;}
.list_type01 li .txt_box p { font-size:15px; color:#2D3643; font-weight:700; line-height: 1.4;}
.list_type01 li .txt_box p ~ p {margin-top:4px;}
.list_type01 li .txt_box p em,
.list_type01 .input_box02 em { margin-right:8px; font-size:13px; color:#5F6976;}
.list_type01 .input_box02.flex input { width:133px;}

.list_type02 { display: flex; flex-wrap:wrap; align-items: center;}
.list_type02 li { display: flex; align-items: center; gap:0 8px; padding:16px 0; width:50%; border-bottom: 1px solid #E6EAEF;}
.list_type02 li span { font-size:13px; color:#5F6976;}
.list_type02 li strong { font-size:15px; color:#2D3643; font-weight:700;}
.list_type02 li:nth-last-child(2),
.list_type02 li:last-child { border-bottom:0;}

.tbl_wrap { overflow: hidden; border-radius: 16px; border: 1px solid #E6EAEF; background: #fff;}
.tbl_wrap .tbl { width:100%; border-collapse: collapse; border-spacing: 0;}
.tbl_wrap .tbl th { padding:12px 8px; background:#2D3643; font-size:15px; color:#fff; font-weight:500;}
.tbl_wrap .tbl td { padding:12px 8px; background:#fff; border:1px solid #E6EAEF;  font-size:14px; color:#2D3643; text-align: center;}
.tbl_wrap .tbl tr td:first-child { border-left:0;}
.tbl_wrap .tbl tr td:last-child { border-right:0;}
.tbl_wrap .tbl tr:last-child td { border-bottom:0;}
.tbl_wrap .tbl tr.total td { color:#24B770; font-weight:700;}

.board_list_wrap .search_user_check li { position:relative; padding:0;}
.board_list_wrap .search_user_check li label { width:100%; height:100%;}
.board_list_wrap .search_user_check li .box { display: flex; align-items: center; gap: 0 12px; padding:16px 20px; border-radius: 8px; background:url(../new_admin_img/ico_chat01.png) right 20px center no-repeat;}
.board_list_wrap .search_user_check li input:checked ~ .box { background-color:#E5F9EF; background-image: url(../new_admin_img/ico_chat01_on.png);}
.board_list_wrap .search_user_check li .box .p_img { width:40px;}
.board_list_wrap .search_user_check li .box .p_name { font-size:15px; color:#2D3643;}

.alert-wrap { position: fixed; display: none; width: 100%; left: 0; bottom: 72px; padding: 15px; background-color: #f14d30; transition: transform 0.5s ease-out, opacity 0.5s ease-out; transform: translateY(100%); /* 초기 위치를 아래로 설정 */ opacity: 0; /* 초기 투명도 0 */}
.alert-wrap.show {display: block; /* 표시 */transform: translateY(0); /* 원래 위치로 이동 */opacity: 1; /* 투명도 100% */}
.alert-wrap.alert-success {background-color: #67ca63;}
.alert-wrap.alert-error {background-color: #f14d30;}
.alert-wrap.alert-info {background-color: #2e9dff;}

.text-danger {--bs-text-opacity: 1; color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;}

/* 확인 팝업 창*/
.custom-confirm-overlay {position: fixed; inset: 0; background: rgba(34,42,62,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center;}
.custom-confirm-box {background: #fff; border-radius: 8px; padding: 24px; width: 300px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; font-family: 'Pretendard', sans-serif;}
.custom-confirm-box p {margin: 0 0 16px; font-size: 16px; color: #293240;}
.custom-confirm-box .buttons {display: flex; gap: 12px;}
.custom-confirm-box .buttons button {flex: 1; height: 40px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer;}
.custom-confirm-box .btn-ok {background: #24b770; color: #fff;}
.custom-confirm-box .btn-cancel {background: #e0e0e0; color: #293240;}


/* 아이콘 스타일 */
.icon-btn { width: 24px; height: 24px; display: block; object-fit: contain;}
/* 툴팁 포함 버튼 스타일 */
.action-btn-with-tooltip { position: relative; background: none; border: none; padding: 0; display: flex; align-items: center; justify-content: center;}
/* 툴팁 스타일 */
.action-btn-with-tooltip .custom-tooltip { position: absolute; top: 110%; left: 50%; transform: translateX(-50%); background-color: #333; color: white; padding: 6px 10px; border-radius: 6px; white-space: nowrap; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; z-index: 100;}
.action-btn-with-tooltip:hover .custom-tooltip { opacity: 1;}

.system_msg {
    width: 100%; /* 부모 너비 채우기 */
    display: flex;
    justify-content: center; /* 내부 요소 가운데 정렬 */
    margin: 10px 0;
}

.system_msg .system_txt {
    background-color: #dee2e6;
    color: #495057;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 12px;
    max-width: 70%;
    text-align: center;
}

.system_msg .time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}



/* 채팅 내 썸네일 미리보기용 */
.file-thumb-name { margin-top: 4px; font-size: 11px; word-break: break-word; white-space: normal; line-height: 1.2; text-align: center; }
.file-thumb-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; width: 80px; cursor: pointer; background-color: #f9f9f9; border-radius: 6px; border: 1px solid #e0e0e0; padding: 8px;}
.file-thumb-grid { display: grid; grid-template-columns: repeat(2, 80px); gap: 8px; margin-top: 8px; }
.file-thumb { display: flex; align-items: center; justify-content: center; background: #f9f9f9; padding: 6px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; width: 40px; height: 40px; position: relative;}
.file-thumb img { width: 100%; height: 100%; object-fit: contain;}
.file-thumb .more-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); color: white; font-weight: bold; font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: 4px;}

/*채팅 유저이름*/
.ellipsis-text { display: inline-block; max-width: 500px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle;}

/*공통 모달*/
.custom-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);}
.custom-modal-content { background-color: #fff; margin: 10% auto; padding: 20px; width: 400px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.custom-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.modal-title { font-weight: bold; font-size: 18px;}
.close-modal-btn { background: none; border: none; font-size: 20px; cursor: pointer; }
.custom-modal-body { max-height: 300px; overflow-y: auto;}

/*채팅방 유저목록 모달*/
.chat-room-user-list { list-style: none; padding: 0; margin: 0;}
.chat-room-user-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #eee; font-size: 14px;}
.chat-room-user-list li button { background-color: #dc3545; color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;}
.chat-room-user-list li button:hover { background-color: #c82333;}

/* 파일 리스트 모달 */
#file_modal { display: none; }
.custom-modal-content { background: white; padding: 20px; border-radius: 8px; max-width: 500px; width: 100%; box-sizing: border-box;}
.custom-modal-header { display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 16px; margin-bottom: 12px; border-bottom: 1px solid #ccc; padding-bottom: 8px;}
#close_file_btn { font-size: 24px; cursor: pointer; background: none; border: none; color: #999; }
#close_file_btn:hover { color: #333; }
#file_modal_container { max-height: 500px; overflow-y: auto; padding: 16px; }
.file-modal-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; overflow-x: hidden; width: 100%; box-sizing: border-box;}
.file-modal-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; max-width: 100%;}
.file-modal-item img.file-thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid #ccc; border-radius: 8px;}
.file-modal-item .file-name { margin-top: 6px; font-size: 12px; text-align: center; word-break: break-word; overflow-wrap: break-word; width: 100%;}

/* 채팅 아이콘 */
.chat_action_buttons { display: flex; align-items: center; gap: 2px; }
.icon-btn { width: 24px; height: 24px; display: block; object-fit: contain; }
.ellipsis-text { display: inline-block; max-width: 500px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle;}

/* 사용자 초대 모달 */
#chat_user.custom-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;}
/* 모달 콘텐츠 박스 */
#chat_user .custom-modal-content { width: 92%; max-width: 400px; background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,0.2);}
/* 모달 헤더 */
#chat_user .custom-modal-header { padding: 16px; border-bottom: 1px solid #eee; position: relative;}
#chat_user .modal-title { font-size: 18px; font-weight: bold; display: inline-block;}
#chat_user .close-modal-btn { position: absolute; top: 14px; right: 16px; font-size: 22px; background: none; border: none; cursor: pointer; color: #999;}
/* 검색 영역 */
.pop_search { display: flex; align-items: center;}
.pop_search input[type="search"] { flex: 1; padding: 8px 12px; font-size: 14px; border: 1px solid #ccc; border-radius: 8px;}
.pop_search button { background: none; border: none; margin-left: 6px; cursor: pointer;}
.pop_search button img { width: 20px; height: 20px;}
/* 선택된 사용자 태그 */
.selected_users_wrap {margin-top: 12px; flex-wrap: wrap; display: flex; gap: 8px; padding: 0 4px; max-height: 70px; overflow-y: auto;}
/* 선택된 사용자 태그 박스 */
.selected_user_tag { background: #F0F2F5; color: #333; border: 1px solid #dcdcdc;}
.selected_user_tag { background: #E6EAEF; padding: 5px 10px; border-radius: 20px; font-size: 13px; display: flex; align-items: center; color: #333; max-width: 48%;/* 모바일 한 줄 최대 너비 제한 */ white-space: nowrap;/* 줄바꿈 방지 */ overflow: hidden;/* 넘치는 텍스트 숨김 */ text-overflow: ellipsis;/* 말줄임표 */}
/* 태그 내부의 이름만 처리하려면 span 분리해서 여기에 적용 */
.selected_user_tag span {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;max-width: 100%;}
/* x 버튼 */
.selected_user_tag button { margin-left: 6px; background: none; border: none; font-size: 14px;cursor: pointer;color: #666;flex-shrink: 0;}
/* 유저 리스트 */
#user_chat_list_container { max-height: 300px; overflow-y: auto; padding: 12px 16px;}
/* 유저 리스트 내부 스타일 (li 등은 JS 렌더링 대상) */
#user_chat_list_container ul { list-style: none; padding: 0; margin: 0;}
#user_chat_list_container li { display: flex; align-items: center; padding: 10px 8px; border-bottom: 1px solid #f0f0f0; font-size: 14px;cursor: pointer;}
#user_chat_list_container li .box { display: flex; align-items: center; gap: 10px;}
#user_chat_list_container .p_img .img_wrap img { width: 36px; height: 36px; border-radius: 50%;}
#user_chat_list_container .p_name { font-size: 14px; color: #333;}
/* 하단 버튼 */
.pop_mid { padding: 16px; border-top: 1px solid #eee; display: flex; justify-content: space-between; gap: 10px;}
.pop_mid .btn { flex: 1; padding: 10px; font-size: 14px; border-radius: 8px; border: none; cursor: pointer;}
.pop_mid .btn02 { background-color: #f2f2f2;}
.pop_mid .btn02:last-child { background-color: #FFD500; font-weight: bold;}
/* 리스트 항목 공통 스타일 */
.search_user_check_li { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; border-radius: 12px; margin: 6px 10px; transition: background-color 0.2s ease;}
/* 선택된 항목만 연한 배경 강조 */
.search_user_check_li.selected {background-color: #e8f9f1; /* 연한 연두 배경 */}
/* 프로필 이미지 */
.search_user_check_li .img_wrap img { width: 36px; height: 36px; border-radius: 50%;}
/* 사용자 이름 */
.search_user_check_li .p_name { margin-left: 12px; font-size: 15px; color: #222;}



/*사용자 검색 CSS*/
.board_list.type02 li.selected {
    background-color: #e8f9f1;
    border: 1px solid #b2e3cb;
    border-radius: 12px;
}

/* 모바일 사용자 검색 팝업 레이아웃 정리 */
/* 리스트 한 줄 레이아웃 */
.search_user_check .search_user_check_li .box {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 텍스트 영역: 위에 이름줄, 아래에 거래처명 */
.search_user_check .search_user_check_li .p_text {
    display: flex;
    flex-direction: column;
    min-width: 0; /* 스크롤 계산을 위해 */
}

/* 1줄: 이름 + first_name (가로 스크롤 허용) */
.search_user_check .search_user_check_li .p_name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;        /* 한 줄 유지 */
    overflow-x: auto;           /* 길면 가로 스크롤 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 이름 줄 스크롤바 살짝만 */
.search_user_check .search_user_check_li .p_name::-webkit-scrollbar {
    height: 3px;
}
.search_user_check .search_user_check_li .p_name::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #ccc;
}

/* first_name 스타일 */
.search_user_check .search_user_check_li .p_en_name {
    margin-left: 4px;
    font-size: 12px;
    color: #999;
}

/* 2줄: 거래처명 */
.search_user_check .search_user_check_li .p_sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: #666;
}

/* 거래처명이 너무 길 때는 기본 줄바꿈만 허용 (필요하면 여기도 가로 스크롤로 바꿔도 됨) */
.search_user_check .search_user_check_li .p_account_code {
    word-break: break-all;
}

.message .txt_box {
    word-break: break-all;
    white-space: pre-wrap;  /* \n 도 살리고, 연속 공백도 그대로 표시 */
}