ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}



.item_wrap {width:100%; margin-top:30px; border-top: 1px solid #333; font-size:13pt;}
.item_wrap ul {}
.item_wrap ul > li { position:relative; display: block; overflow: hidden; padding: 0 0 2px 0; border-bottom:1px solid #eee; align-items:center;}
.item_wrap ul > li.dis_flex {display:flex;}
.item_wrap ul > li .item_num {float:left; width:10%;padding:5px; text-align:center;margin: -26px 0 0 0;}
.item_wrap ul > li .item_right_wrap {width:100%;}
.item_wrap ul > li .item_menu {float:none; width:100%; padding:4px 4px 4px 4px;}
.item_wrap ul > li .item_menu.mh {min-height:68px;}

.item_wrap ul > li .item_photo {float:left; width:120px; margin: 2px 10px 2px 0;}
.item_wrap ul > li .item_photo img {max-width:100%; }

.item_wrap ul > li .item_right_alone {width:100%; text-align: right;}
.item_wrap ul > li .item_right_alone .item_price {color:#24cb03}
.item_wrap ul > li .item_right_alone .item_option {float:right; width:100px;}

.item_wrap ul > li .item_right_bottom {width:100%; text-align: right; padding: 0 0 4px 0;}
.item_wrap ul > li .item_right_bottom .item_price {display:inline-block; padding:0 10px 0 0; text-align:right; color:#24cb03;}
.item_wrap ul > li .item_right_bottom .item_option {float:right; width:100px; text-align:center; padding:0px;}


.item_wrap ul > li.item_category {
    position: relative;
    display: flex !important; 
    padding: 5px 10px;
    background: #f3f3f3;
    font-weight: bold;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    align-items: center; 
}
.item_wrap ul > li.item_category .icon{vertical-align:unset;}
.item_wrap ul > li.item_category .plus { width:20px; margin: -7px 0 0 0;}
.item_wrap ul > li.item_category .category_name { width:83%; text-align:left; }


#order_list_wrap {width:100%; display:none; margin-top:30px;}
#order_list_wrap > table {width:100%; border: 0px;}
#order_list_wrap > table > tbody > tr {border: 2px solid #f3f3f3;}
#order_list_wrap .order_item_seq {font-size: 0.9em;width:5%;padding:15px 8px;}
#order_list_wrap .order_item_name {font-size: 0.8em;}
#order_list_wrap .order_item_price {width:35%;text-align:right;}
#order_list_wrap .order_item_del {width:10%;text-align:right;padding-right:5px;}

#card_method {padding: 10px 0 20px 0;}
#card_method > label {margin: 0px 20px 20px 0px;}
.modal-guide {
	padding: 0 0 20px 20px;
    color: #f26b27;
    font-size: 14px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader_bg { background-color: rgba(0, 0, 0, 0.5); display: -webkit-box; overflow-x: hidden; overflow-y: auto; position: fixed; top: 0; right: 0;
    bottom: 0; left: 0; z-index: 1050; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0;}

.loader {position: absolute;left: 50%;top: 50%;margin: -20px 0 0 -20px;border: 12px solid #f3f3f3;border-radius: 50%;border-top: 12px solid #3498db;
    width: 40px; height: 40px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}


.input-number { 
	float:right; 
	position: relative; 
	display: table; 
	border-collapse: separate; 
	max-width:105px; 
	min-width:105px;
	padding-left: 5px;
}
.input-number-btn { position: relative; white-space: nowrap; width: 1%; display: table-cell;}
.btn-miplus {display: inline-block;
    margin-bottom: 1px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    background-image: none;
	color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    white-space: nowrap;
	height: 23px;
    padding: 0px 7px;
    line-height: 1.428571429;
    border-radius: 4px;	
}

.input-number-btn .mr-11 { margin-right: -1px; border-bottom-right-radius: 0;  border-top-right-radius: 0;}
.input-number-btn .ml-11 { margin-left: -1px; border-bottom-left-radius: 0;    border-top-left-radius: 0;}

.glyphicon {
    position: relative;
    top: -2px;
    display: inline-block;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-minus:before { content: "\2212";}
.glyphicon-plus:before { content: "\2b";}

.input-miplus {
    vertical-align: top;
    width: 100%;
    height: 17.5pt;
    padding: 2px 0 0 0;
    text-align:center;
    text-align-last: center;
    font-size: 15px;
    font-weight: bold;
    font-size: 15px;
    line-height: 1.428571429;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0px;
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background: none;
}


/* 최근 검색어 스타일 */
#search_keyword_list {
    margin-top: 15px;
    min-height: 200px;
}

.search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0; /* 상하 간격 조정 */
}

.keyword {
    text-align: left;
    flex: 1;
    font-size: 16px;
}

.remove-btn {
    cursor: pointer;
    font-weight:bold;
    color: gray; /* X 버튼 색상 */
    font-size: 16px;
    padding-left: 15px; /* 우측 X 버튼과 검색어 사이 간격 */
}

.remove-btn:hover {
    color: #ff6666; /* X 버튼 hover 효과 */
}



.input-container {
    position: relative;
    width: 80%;
}

#pop_search_text {
    width: 100%;
    padding-right: 30px; /* X 버튼 공간 확보 */
}

.clear-btn {
	font-weight: bold;
    position: absolute;
    right: 10px;
    top: 48%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #999;
    background-color: #e0e0e0; /* 동그라미 배경 색상 */
    border-radius: 50%; /* 원형으로 만들기 */
    width: 24px;
    height: 24px;
    line-height: 21px; /* 버튼 내부의 X를 수직 중앙에 맞춤 */
    text-align: center;
    display: none;
}

.clear-btn:hover {
    color: #333;
    background-color: #ccc; /* hover 시 배경색 변경 */
}

.low_stock {
	color: red;
    padding: 6px 0px 0px 4px;
    font-size: 17px;
    font-weight: bold;
}
.low_stock.active {
	display: block;
}
.low_stock.inactive {
	display: none;
}
.stock_clock {
	height:22px;
	padding:0px 6px 4px 0px
} 

/* 준비중/마감 메시지 잘림(… 표시) 방지 */
.event-subtitle,
.event-error-box,
.event-error-title,
.event-error-msg {
  white-space: normal !important;     /* nowrap 해제 */
  overflow: visible !important;       /* hidden 해제 */
  text-overflow: clip !important;     /* ellipsis 해제 */
  height: auto !important;
  max-height: none !important;
}

/* 한글 줄바꿈 자연스럽게 */
.event-error-title,
.event-error-msg {
  word-break: keep-all;
  overflow-wrap: anywhere;            /* 긴 문자열도 줄바꿈 */
}

.submit-btn.active {
	color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.submit-btn.inactive {
	color: #fff;
    background-color: #ced4da;
    border-color: #ccc;
}

.agreement_item {
	padding: 10px 0 12px 12px;
}
