@charset "utf-8";

/* ========================================================
   MeifillProduct - Minimal & Simple Multi-Language Style
   ======================================================== */

/* 카테고리 탭 (4열 그리드, 이미지 디자인과 일치) */
#bo_cate { margin: 2.5rem 0 2rem; }
#bo_cate ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 -4px; }
#bo_cate li { width: calc(25% - 8px); margin: 4px; box-sizing: border-box; }
#bo_cate li a { display: flex; align-items: center; justify-content: center;
    height: auto; font-size: 1.15rem; font-weight: 500; padding: 1rem .5rem;
    background-color: #ededed; color: #1a1a1a;
    text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; border-radius: .5rem;
}
#bo_cate li a:hover { background-color: #dedede; }
#bo_cate #bo_cate_on, #bo_cate li.on a {
    background-color: var(--pointcolor) !important; color: #ffffff !important;
}

/* 관리자/사용자 버튼 및 검색/정렬 툴바 */
.bo_toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 8px; flex-wrap: wrap; }
.bo_tools_left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bo_sort_wrap { display: flex; align-items: center; }
.bo_sort_select {
    height: auto;
    padding: 1rem 1.5rem 1rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid #dedede;
    border-radius: .5rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease;
}
.bo_sort_select:hover, .bo_sort_select:focus { border-color: var(--pointcolor); }

.bo_search_box { display: flex; align-items: center; position: relative; }
.bo_search_input {
    height: auto;
    padding: 1rem;
    font-size: 1rem;
    color: #333;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: .5rem;
    outline: none;
    transition: border-color 0.2s ease;
    width: 220px;
    box-sizing: border-box;
}
.bo_search_input:focus { border-color: var(--pointcolor); }
.bo_search_btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}
.bo_search_btn:hover { color: var(--pointcolor); }

.bo_admin_btns { display: flex; align-items: center; gap: 8px; }
.bo_btn { display: inline-flex; align-items: center; justify-content: center;
    height: auto; padding: .75rem 1.25rem; font-size: 1rem; font-weight: 600;
    background: #fff; border: 1px solid #dedede; color: #1a1a1a;
    text-decoration: none; border-radius: .5rem;
    cursor: pointer; transition: all 0.2s;
}
.bo_btn:hover { border-color: var(--pointcolor); }
.bo_btn.btn_primary { background: var(--pointcolor); border-color: var(--pointcolor); color: #fff; }
.bo_btn.btn_primary:hover { background: var(--pointdark); }

/* ========================================================
   1. 상품 목록 (List - No Image, Text Card Grid)
   ======================================================== */
.prod_grid { display: flex; flex-wrap: wrap; margin: 0 -10px; list-style: none; padding: 0; }
.prod_item { width: calc(33.333% - 20px); margin: 10px; box-sizing: border-box; }
.prod_card { display: flex; flex-direction: column; background: #fff;
    border: 1px solid #ededed; padding: 2rem; text-decoration: none;
    color: inherit; transition: border-color 0.2s ease; height: 100%; box-sizing: border-box;
    position: relative; border-radius: .5rem;
}
.prod_card:hover { border-color: var(--pointcolor); }

.prod_card .p_head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.prod_card .p_cate { font-size: 1.15rem; color: var(--pointcolor); font-weight: 600; }
.prod_card .p_badge { font-size: 1rem; color: #666; background: #f0f0f0; padding: .25rem 1rem; }
.prod_card .p_vat_badge { font-size: .85rem; color: #333; background: #f0f0f0; padding: .25rem 1rem; border-radius: .5rem; }

.p_admin_actions { display: flex; gap: 6px; align-items: center; }
.p_act_btn { font-size: .85rem; padding: .25rem 1rem; border: 1px solid #dedede; color: #666; text-decoration: none; border-radius: .5rem; transition: all 0.15s; }
.p_act_btn:hover { color: #1a1a1a; text-decoration: none; }
.prod_card .p_title {
    font-size: 1.25rem; font-weight: 700; line-height: 1.4;
    color: #1a1a1a; margin-bottom: 1rem; word-break: break-word;
}

.p_lang_preview { background: #fafafa; border: 1px solid #ededed; padding: .5rem 1rem; margin-bottom: 1rem; font-size: .85rem; color: #333; border-radius: .5rem; word-break: break-word; }
.p_lang_row { margin-bottom: .25rem; }
.p_lang_row strong { display: inline-block; padding: .25rem .5rem; background-color: var(--pointcolor); color: #fff; line-height: 1; border-radius: .25rem; }

.p_desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    background: #fafbfc;
    border-top: 1px solid #f0f2f5;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: .5rem;
    word-break: break-word;
    overflow-wrap: break-word;
}

.prod_card .p_foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 12px; border-top: 1px solid #f5f6f8; }
.prod_card .p_dc { font-size: 18px; font-weight: 700; color: #e53e3e; }
.prod_card .p_price_wrap { text-align: right; }
.prod_card .p_ori { font-size: 13px; color: #666; text-decoration: line-through; margin-bottom: 2px; }
.prod_card .p_final { font-size: 20px; font-weight: 700; color: var(--subcolor); }
.prod_card .p_final span { font-size: 14px; font-weight: 500; }
.p_admin_vat { font-size: .85rem; color: #aaa; margin-top: 2px; }

.prod_empty, .prod_empty_search { width: 100%; padding: 80px 0; text-align: center; color: #666; font-size: 15px; }
.prod_empty_search { display: none; }

@media (max-width: 991px) {
    #bo_cate li { width: calc(50% - 8px); }
    #bo_cate li a { font-size: 1rem; }
    .prod_item { width: calc(50% - 20px); }
}

@media (max-width: 600px) {
    #bo_cate { margin: 1.5rem 0 1rem; }
    #bo_cate li a { font-size: .9rem; padding: .75rem .25rem; }

    .bo_toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .bo_tools_left { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
    .bo_sort_wrap, .bo_search_box { width: 100%; }
    .bo_sort_select, .bo_search_input { width: 100%; }
    .bo_admin_btns { width: 100%; justify-content: flex-end; }

    .prod_item { width: 100%; margin: 8px 0; }
    .prod_card { padding: 1.25rem; }
    .prod_card .p_title { min-height: auto; font-size: 1.15rem; }

    .w_sec { padding: 1.25rem; }
    .w_lang_toggle { flex-wrap: wrap; }
    .w_lang_btn { width: 100%; justify-content: center; }
    .w_prices_grid { grid-template-columns: 1fr; gap: 10px; }
    .w_col_4, .w_col_3, .w_col_2 { min-width: 100%; }
}

/* ========================================================
   2. 상세 뷰 (View - Text & Consultation Form)
   ======================================================== */
#bo_v { max-width: 960px; margin: 30px auto 60px; padding: 0 15px; }
.v_header {
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 24px;
    margin-bottom: 30px;
}
.v_cate { font-size: 14px; color: var(--pointcolor); font-weight: 600; margin-bottom: 8px; }
.v_title { font-size: 28px; font-weight: 800; line-height: 1.35; margin: 0 0 16px; color: #1a1a1a; }
.v_info { display: flex; justify-content: space-between; font-size: 14px; color: #666; }

.v_content_box {
    background: #fbfbfc;
    border: 1px solid #dedede;
    padding: 24px;
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* 단일 상품 가격 박스 */
.v_item_box {
    background: #fbfbfc;
    border: 1px solid #e5e8ec;
    padding: 24px;
    margin-bottom: 25px;
}
.v_item_box .v_vat_notice {
    text-align: right;
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    margin-bottom: 0;
}

.v_items { list-style: none; padding: 0; margin: 0 0 25px; border: 1px solid #dedede; }
.v_item_li {
    border-bottom: 1px solid #dedede;
    padding: 16px 20px;
    background: #fff;
    transition: background 0.15s;
}
.v_item_li:last-child { border-bottom: none; }
.v_item_li:hover { background: #fafbfc; }
.v_item_li label { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; margin: 0; }
.v_item_left { display: flex; align-items: center; gap: 12px; }
.v_item_left input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pointcolor); cursor: pointer; margin: 0; }
.v_item_name { font-size: 16px; font-weight: 600; color: #222; }
.v_item_right { display: flex; align-items: center; gap: 14px; text-align: right; }
.v_item_dc { font-size: 18px; font-weight: 700; color: #e53e3e; }
.v_item_prices del { display: block; font-size: 12px; color: #666; }
.v_item_prices .cur_price { font-size: 17px; font-weight: 700; color: #1a1a1a; }
.v_vat_notice { text-align: right; font-size: 12px; color: #666; margin-top: -15px; margin-bottom: 30px; }

/* 상담 신청 폼 */
.v_form_wrap {
    border: 1px solid #dedede;
    padding: 26px;
    background: #fff;
    margin-bottom: 40px;
}
.v_form_row { display: flex; gap: 16px; margin-bottom: 16px; }
.v_form_col { flex: 1; }
.v_form_col label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.v_input {
    width: 100%;
    height: 44px;
    border: 1px solid #dedede;
    padding: 0 14px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    border-radius: .5rem;
}
.v_input:focus { border-color: var(--pointcolor); }

.v_agree { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #666; margin-bottom: 20px; cursor: pointer; }
.v_agree input { width: 16px; height: 16px; accent-color: var(--pointcolor); cursor: pointer; margin: 0; }

.v_btn_submit {
    width: 100%;
    height: 52px;
    background: var(--pointcolor);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: .5rem;
}
.v_btn_submit:hover { background: var(--pointdark); }
.v_btn_submit:disabled { background: #ccc; cursor: not-allowed; }

/* 추천 상품 */
.v_recom { margin-top: 40px; border-top: 1px solid #dedede; padding-top: 30px; }
.v_recom_tit { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 24px; color: #222; }

@media (max-width: 768px) {
    .v_title { font-size: 22px; }
    .v_form_row { flex-direction: column; gap: 12px; }
    .v_item_li label { flex-direction: column; align-items: flex-start; gap: 10px; }
    .v_item_right { width: 100%; justify-content: space-between; }
}

/* ========================================================
   3. 글쓰기/수정 (Write Form)
   ======================================================== */
#bo_w { margin: 30px auto; padding: 0 15px; }
.w_sec { background: #fff; padding: 2rem; margin-bottom: 1.5rem; border: 1px solid #dedede;  border-radius: .5rem; }
.w_sec_tit { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #1a1a1a; border-bottom: 1px solid #ededed; padding-bottom: 10px; }

.w_lang_toggle { display: flex; align-items: center; gap: 0 .5rem; margin-bottom: 1rem; }
.w_lang_btn {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .75rem 1.25rem; border: 1px solid #dedede; font-size: 1rem;
    color: #aaa; border-radius: .5rem; cursor: pointer;
}
.w_lang_btn.on { border-color: var(--pointcolor); color: #1a1a1a; }
.w_col_tit { display: inline-block; font-size: 1rem; margin-bottom: .5rem; }
.w_row { margin-bottom: 1rem; }
.w_input {
    width: 100%; height: auto; border: 1px solid #ededed; padding: .75rem;
    font-size: 1rem; border-radius: .5rem; outline: none;
}
.w_textarea {
    width: 100%; min-height: 150px; border: 1px solid #ededed; padding: .75rem;
    font-size: 1rem; border-radius: .5rem; outline: none; resize: none;
}

/* 상품 동적 입력 행 */
.w_item_box { background: #fbfbfc; border: 1px solid #e5e8ec; padding: 16px; margin-bottom: 12px; position: relative; }
.w_item_top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.w_item_num { font-size: 13px; font-weight: 700; color: #555; }
.w_item_del {
    background: none;
    border: 1px solid #dedede;
    color: #e53e3e;
    font-size: 12px;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: .5rem;
}
.w_item_del:hover { background: #fee2e2; border-color: #e53e3e; }

.w_prices_grid { display: grid; grid-template-columns: 1fr 1fr 90px; gap: 10px; align-items: end; }
.w_dc_val { font-size: 15px; font-weight: 700; color: #e53e3e; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #dedede; border-radius: .5rem; }
.w_btn_add {
    width: 100%;
    height: 42px;
    background: #f4f6f8;
    border: 1px dashed #b5bcc5;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: .5rem;
}
.w_help { position: relative; display: inline-block; font-size: .85rem; color: #666; margin: 1rem 0 1.5rem; padding-left: .5rem; }
.w_help::before { position: absolute; content: ''; width: 3px; height: auto; aspect-ratio: 1/1; background-color: var(--pointcolor); top: 50%; left: 0; transform: translateY(-50%); }

/* Inline Style 대체 클래스 */
.w_row_grid { display: flex; flex-wrap: wrap; gap: 15px; }
.w_col_4 { flex: 1; min-width: 180px; }
.w_col_3 { flex: 1; min-width: 200px; }
.w_col_2 { flex: 1; }
.w_btn_wrap { margin-top: 20px; }
.item_name_input { margin-bottom: 6px; }
.req_star { color: #e53e3e; }
.btn_del { color: #e53e3e; }
.lang_hidden { display: none; }
.w_lang_field_group { margin-bottom: 16px; }

.v_btn_group { display: flex; gap: 8px; }
.v_recom_title { min-height: auto; margin-bottom: 10px; }
.list_paging { margin-top: 40px; }

.badge_hide { background: #fee2e2 !important; color: #dc2626 !important; font-weight: 600; }
.card_hidden { opacity: 0.65; border-style: dashed; }
.ml-5 { margin-left: 5px; }

.v_admin_badge { background: #edf2f7 !important; color: #4a5568 !important; }
.v_admin_preview { background: #f8fafc; border: 1px solid #ededed; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #333; }
.v_admin_row { margin-bottom: 3px; }
.v_admin_empty { color: #aaa; display: block; margin: .15rem 0 .5rem; }