@charset "utf-8";

/* 갤러리 목록 */
/* ==================================================
   마켓/중고거래 전용 리스트 스타일 (mk_ 접두사)
   타 게시판 스킨과의 충돌을 방지합니다.
================================================== */
.mk_gallery_wrap {/* overflow:hidden; */}
.mk_gallery_wrap #mk_allchk { margin-bottom:10px; }

.mk_list_ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;margin: 0;padding: 0;list-style: none;}
.mk_list_li {position: relative;width: 100%;margin: 0;box-sizing: border-box; }
.mk_list_li input[type="checkbox"] {position: absolute;top: 10px;left: 10px;width:15px;height:15px;z-index: 1;}
.mk_list_li.mk_now .mk_list_con { border-color:#ff3061; box-shadow:0 0 5px rgba(255, 48, 97, 0.3); }

.mk_list_con {position:relative;height: 100%;margin:0;padding:0;border:1px solid #e1e1e1;background:#fff;/* border-radius:8px; */overflow:hidden;transition:all 0.2s ease-in-out;}
.mk_list_con:hover { border-color:#bbb; box-shadow:0 4px 10px rgba(0,0,0,0.1); }

/* 이미지 영역 */
.mk_img_link { display:block; overflow:hidden; width:100%; }
.mk_img_link img { display:block; width:100%; height:auto; transition:transform 0.3s ease; }
.mk_list_con:hover .mk_img_link img { transform:scale(1.03); }

/* 하단 정보 영역 */
.mk_list_info {cursor:pointer;padding: 10px 15px 5px;background:#fff;position:relative;z-index:2;border-top:1px solid #f2f2f2;}
.mk_list_info_inner .mk_subject { font-weight:bold; color:#222; margin:0 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk_price {/* font-size: 14px; *//* font-weight:bold; */color:#ff3061;margin:5px 0 !important;}
.mk_author {text-overflow:ellipsis;}

/* 상태 뱃지 (마켓) */
.mk_status_mark {position:absolute;top: 5px;left: 5px;padding:4px 10px;color:#fff;font-size:12px;font-weight:bold;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,0.2);}
.mk_bg_sell { background-color:#2196F3; } /* 판매중 */
.mk_bg_ing { background-color:#FF9800; } /* 예약중 */
.mk_bg_done { background-color:#9e9e9e; } /* 판매완료 */

/* 퀵 액션 버튼 */
.mk_action_btns {display:flex;padding: 0 10px 10px;}
.mk_btn_buy {height: 35px;line-height: 34px;flex:1;background: #689F38;color:#fff;transition:background 0.2s;}
.mk_btn_buy:hover { background:#222; }
.mk_btn_cancel { flex:1; padding:8px 0; font-size:13px; font-weight:bold; background:#e8180c; color:#fff; border-radius:4px; border:none; cursor:pointer; transition:background 0.2s; }
.mk_btn_cancel:hover { background:#c11108; }

/* ========================================================================
   개인거래 마켓 스킨 UI 추가 스타일
   ======================================================================== */

/* 1. 레이아웃 및 공통 스타일 */
.market_wrapper {
    font-family: 'Noto Sans KR', sans-serif; /* 그누보드 기본 폰트와 매칭 */
    color: #444;
}

.market_wrapper a {
    text-decoration: none;
    color: inherit;
}

.split {
    color: #eee;
    margin: 0 10px;
}
/* 2. 상단 정보 및 통계 바 (Seller Stats) */

#sell_box {display: flex;align-items: center;justify-content: space-between;}
#sell_box .sell_info {
    display: flex;
    gap: 10px;
}
#sell_box .sell_info div {}
.stats_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fbfbfc;
    border-top: 1px solid #eee;
    border-radius: 0 0 8px 8px;
}

.stats_item {
    font-size: 13px;
    color: #666;
}

.stats_item strong {
    font-size: 15px;
    font-weight: 700;
}

.stats_item .num_cnt { color: #ff3061; } /* 누적 판매건수색 */
.stats_item .num_money { color: #2196F3; } /* 누적 판매금액색 */

/* 3. 테이블 상태 태그 (Trade Status) */
.status_tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: #fff;
}

.status_ready { background-color: #f39c12; }   /* 준비중 (오렌지) */
.status_ship { background-color: #3498db; }    /* 배송중 (파랑) */
.status_confirm { background-color: #27ae60; } /* 구매확정 (초록) */
.status_cancel { background-color: #c0392b; }  /* 취소 (레드) */

/* 4. 공통 버튼 디자인 */
.btn_market {
    display: inline-block;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease;
}

.btn_market:hover { opacity: 0.9; }

/* 버튼 색상 정의 */
.btn_bgr { background-color: #e74c3c; color: #fff; } /* 취소/위험 */
.btn_bgg { background-color: #2ecc71; color: #fff; } /* 구매확정/성공 */
.btn_bgb { background-color: #3498db; color: #fff; } /* 정산요청/관리 */

/* 5. 테이블 내부 폼 디자인 (판매자 관리) */
.fstatus_form {
    display: flex;
    gap: 3px;
    align-items: center;
    margin: 0;
}

.fstatus_select, .fstatus_input {
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px;
    padding: 2px 4px;
    color: #555;
    outline: none;
}

.fstatus_select:focus, .fstatus_input:focus {
    border-color: #a5a5a5;
}

.fstatus_select {
    width: 65px;
    background-color: #fff;
}

.fstatus_input {
    width: 75px;
}

/* 6. 정산요청 모달 양식 (SettleModal) */
/*#settleModal_wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}*/

#settleModal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 9999;
}
#settleModal .settleModal_in{
   position:absolute; 
   top:30%; left:50%; 
   transform:translate(-50%, -50%); 
   background:#fff; 
   padding:25px; 
   border-radius:8px; 
   width:350px; 
   box-shadow:0 4px 10px rgba(0,0,0,0.2);
}


#settleModal h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 1px solid #f2f2f2;
}

.modal_form_group {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.modal_form_group label {
    display: inline-block;
    width: 90px;
    font-weight: 600;
    font-size: 14px;
    color: #555;
}

.modal_frm_input {
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 13px;
    outline: none;
}

.modal_frm_input:focus {
    border-color: #2196F3;
}

.modal_frm_input.num_input {
    text-align: right;
}

.modal_btn_wrap {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.mk_notice_table { width:100%; border-collapse:collapse; margin-bottom:20px; border-top:2px solid #444; }
.mk_notice_table td {padding: 12px 5px;border-bottom:1px solid #e9e9e9;text-align:center;}
.mk_notice_table .td_chk { width:30px; } /* 체크박스 열 너비 */
.mk_notice_table .td_notice {width: 40px;}
.mk_notice_table .td_subject { text-align:left; }
.mk_notice_table .td_subject a { color:#222; font-weight:bold; text-decoration:none; }
.mk_notice_table .td_subject a:hover { text-decoration:underline; }
.mk_notice_table .td_name {width: 100px;}
.mk_notice_table .td_date {width:100px;font-size: 12px;letter-spacing: -1px;}

.market_wrapper .tbl_head01 table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e9e9e9;
}

.market_wrapper .tbl_head01 th {
    background-color: #f7f8fa;
    color: #555;
    font-weight: 600;
    border-bottom: 1px solid #ededed;
}

.market_wrapper .tbl_head01 td {
    border-bottom: 1px solid #f1f1f1;
    color: #666;
}

.market_wrapper .tbl_head01 tr:last-child td {
    border-bottom: none;
}

/* 이미지 영역 꽉 채우기 및 비율 유지 */
.mk_list_con .mk_img_link {
   display: block;
   width: 100%;
   aspect-ratio: 4 / 3; /* 이미지 비율 고정 (원하는 비율로 조정 가능) */
   overflow: hidden;
   background: #f7f7f7;
}
.mk_list_con .mk_img_link img,
.mk_list_con .mk_img_link .no_image {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover; /* 이미지가 박스에 꽉 차도록 크롭 */
}
.s_box.top.store {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 부모 화면이 800px 이하일때 2개, 480px 이하일때 1개로 변환하며 꽉 채움 */
@media (max-width: 660px) {
.s_box.top.store {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-direction: column;
}
.s_box.top.store>.store_btn {display: flex;width: 100%;gap: 5px;}
.s_box.top.store>.store_btn>button {width: 50%;}

#sell_box {}
#sell_box .sell_info {
	display: flex;
	margin-bottom: 10px;
	flex-direction: column;
	align-content: flex-start;
}
#sell_box .sell_info div {}
#sell_box button {}
}
@media (max-width: 600px) {
}
@media (max-width: 520px) {
	.mk_list_ul {grid-template-columns: repeat(3, 1fr);gap:5px;}
}
@media (max-width: 420px) {
	.mk_list_ul {grid-template-columns: repeat(2, 1fr);gap:3px;}
}