@charset "utf-8";
/* ============================================================
   비즈매칭 모듈 전용 CSS  (결정 ⑩ · C안)
   ------------------------------------------------------------
   · cmn/layout.css 에는 비즈매칭 규칙을 한 줄도 넣지 않는다.
   · 클래스는 전부 bm_ 접두 → 사이트 CSS 와 충돌 없음.
   · 반응형 미디어쿼리는 이 파일 하단에 해상도별로 통합 작성한다.
     (PC = min-width:1270px / 모바일 = max-width:1270px — 사이트 기준과 동일)
   · 사이트 테마 의존 값은 아래 :root 변수에만 모아 둔다.
     → 다른 사이트로 이식할 때 이 블록만 고치면 톤이 맞는다.

   구성
     1. 토큰          2. 공통(탭·패널·버튼·칩·뱃지)
     3. 디렉토리      4. 기업 상세
     5. 신청 모달     6. 예약 그리드(룸×시간)
     7. 미디어쿼리 — PC / 모바일
   ============================================================ */


/* ===== 1. 토큰 ===== */
:root{
    --bm-main:   #00a9d1;   /* 브랜드 메인 (사이트 기준색) */
    --bm-main-d: #0088a8;   /* 메인 진한색 (hover·강조) */
    --bm-busy:   #c0392b;   /* 선점(블락) */
    --bm-busy-bg:#fae9e7;
    --bm-mine:   #0a8582;   /* 내 신청 */
    --bm-mine-bg:#e4f3f2;
    --bm-off:    #f4f6f8;   /* 비활성 배경 */
    --bm-line:   #d5d8de;   /* 기본 보더 */
    --bm-line-l: #e9ecf1;   /* 옅은 보더 */
    --bm-text:   #333333;   /* 본문 글자 */
    --bm-sub:    #888888;   /* 보조 글자 */
    --bm-font:   14px;      /* 기준 글자크기 */
}


/* ===== 2. 공통 ===== */
.bm_sec{ color: var(--bm-text); }

/* 상단 탭 (사이트 reg_tabs 와 같은 톤의 모듈 전용 클래스) */
.bm_tabs{ list-style: none; padding: 0; margin: 0 0 -1px 0; display: flex; gap: 4px; }
.bm_tabs .bm_tab{ padding: 12px 34px; background: #2a2a2a; color: #aaa; font-size: 16px; font-weight: 700; border-radius: 6px 6px 0 0; }
.bm_tabs .bm_tab.on{ background: var(--bm-main); color: #fff; }
.bm_tabs .bm_tab a{ color: inherit; text-decoration: none; display: block; }

.bm_panel{ background: #f5f5f5; border-radius: 0 6px 6px 6px; padding: 36px 40px; }

.bm_actions{ margin-top: 28px; text-align: center; }

/* 버튼 */
.bm_btn{ display: inline-block; min-width: 130px; height: 48px; line-height: 48px; padding: 0 24px;
         border: 0; border-radius: 8px; text-align: center; font-size: 15px; font-weight: 700;
         color: #fff; background: var(--bm-main); cursor: pointer; text-decoration: none; }
.bm_btn:hover{ background: var(--bm-main-d); color: #fff; }
.bm_btn--meeting{ background: var(--bm-main); }
.bm_btn--ghost{ background: #eef0f3; color: #555; }
.bm_btn--ghost:hover{ background: #e2e5ea; color: #333; }

/* 칩 */
.bm_chip{ display: inline-block; margin: 0 4px 4px 0; padding: 3px 10px; border-radius: 20px; font-size: 12px; line-height: 1.4; }
.bm_chip--ind{ background: #e8f6f6; color: #0a8582; }
.bm_chip--tech{ background: #eef1f6; color: #556; }

/* 상태 뱃지 */
.bm_badge{ display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.bm_badge--wait{ background: #fff6da; color: #a9791a; }
.bm_badge--accept{ background: #e8f1ff; color: #2b5fc4; }
.bm_badge--confirm{ background: #e4f3f2; color: #0a8582; }
.bm_badge--reject{ background: #fae9e7; color: #c0392b; }
.bm_badge--cancel{ background: #eef0f3; color: #777; }

.bm_empty{ grid-column: 1 / -1; padding: 60px 0; text-align: center; color: #999; font-size: 16px; }


/* ===== 3. 디렉토리 ===== */
.bm_search{ margin: 0 0 18px; }
.bm_search_row{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bm_search_sel,
.bm_search_kw{ height: 44px; border: 1px solid var(--bm-line); border-radius: 8px; padding: 0 14px; font-size: 15px; background: #fff; color: #222; }
.bm_search_sel{ min-width: 170px; }
.bm_search_kw{ flex: 0 1 25%; min-width: 200px; }
.bm_search_btn{ height: 44px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--bm-main); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.bm_search_reset{ height: 44px; line-height: 44px; padding: 0 16px; border-radius: 8px; background: #eef0f3; color: #555; font-size: 14px; text-decoration: none; }

.bm_result_cnt{ margin: 4px 0 16px; font-size: 15px; color: #555; }
.bm_result_cnt strong{ color: var(--bm-main); }

.bm_cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.bm_card{ display: flex; flex-direction: column; border: 1px solid var(--bm-line-l); border-radius: 12px;
          overflow: hidden; background: #fff; text-decoration: none; color: inherit;
          transition: box-shadow .15s, transform .15s; }
.bm_card:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.10); transform: translateY(-2px); }
.bm_card_logo{ height: 130px; display: flex; align-items: center; justify-content: center; background: #f7f8fa; padding: 14px; }
.bm_card_logo img{ height: 72px; width: auto; max-width: 100%; object-fit: contain; }
.bm_card_logo_txt{ font-size: 17px; font-weight: 700; color: #444; text-align: center; word-break: keep-all; }
.bm_card_body{ padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.bm_card_type{ display: inline-block; width: fit-content; padding: 2px 10px; border-radius: 20px; background: #fff6da; color: #a9791a; font-size: 12px; font-weight: 700; }
.bm_card_name{ margin: 0; font-size: 17px; font-weight: 700; color: #1a1a1a; line-height: 1.35; word-break: keep-all; }
.bm_card_name_en{ margin: 0; font-size: 14px; color: var(--bm-sub); }
.bm_card_chips{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }


/* ===== 4. 기업 상세 ===== */
.bm_vhead{ display: flex; align-items: center; gap: 22px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #eceef2; }
.bm_vlogo{ flex: 0 0 140px; height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; padding: 12px; }
.bm_vlogo img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.bm_vtitle{ flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bm_vname{ margin: 0; font-size: 24px; font-weight: 800; color: #141414; word-break: keep-all; }
.bm_vname_en{ margin: 0; font-size: 15px; color: var(--bm-sub); }
.bm_vactions{ display: flex; gap: 10px; }
.bm_vnote{ align-self: center; font-size: 14px; color: var(--bm-sub); }

.bm_table{ width: 100%; border-collapse: collapse; background: #fff; color: var(--bm-text); border: 1px solid #e5e5e5; }
.bm_table tr + tr{ border-top: 1px solid #ececec; }
.bm_table th,
.bm_table td{ padding: 18px 20px; font-size: 15px; line-height: 1.6; text-align: left; vertical-align: middle; }
.bm_table th{ width: 140px; color: var(--bm-sub); font-weight: 600; white-space: nowrap; }
.bm_table td{ color: #222; padding-left: 4px; padding-right: 44px; word-break: break-all; }
.bm_table a{ color: var(--bm-main); text-decoration: underline; }
.bm_long{ line-height: 1.7; }


/* ===== 5. 신청 모달 ===== */
.bm_modal{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
           background: rgba(0,0,0,.5); display: flex; justify-content: center; align-items: center;
           z-index: 10002; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.bm_modal.show{ opacity: 1; pointer-events: auto; }
.bm_modal_box{ background: #fff; border-radius: 10px; width: 94%; max-width: 1080px; max-height: 88vh;
               display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; }
.bm_modal_head{ display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #e5e5e5; }
.bm_modal_head h3{ margin: 0; font-size: 18px; font-weight: 700; }
.bm_modal_co{ font-size: 22px; font-weight: 800; }
.bm_modal_sub{ font-size: 15px; font-weight: 500; color: #9aa0a8; }
.bm_modal_close{ border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #555; }
.bm_modal_body{ padding: 20px 24px 24px; overflow-y: auto; font-size: var(--bm-font); line-height: 1.7; color: var(--bm-text); text-align: left; }
.bm_modal_actions{ margin-top: 26px; display: flex; justify-content: center; gap: 10px; }

.bm_step{ margin: 26px 0 12px; font-size: 15px; font-weight: 700; color: #222; }
.bm_step:first-child{ margin-top: 2px; }
.bm_step_no{ display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 20px; background: var(--bm-main); color: #fff; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.bm_req{ margin-left: 6px; padding: 1px 8px; border-radius: 20px; background: #fae9e7; color: #c0392b; font-size: 12px; font-weight: 700; }
.bm_opt{ margin-left: 6px; padding: 1px 8px; border-radius: 20px; background: #eef0f3; color: #777; font-size: 12px; font-weight: 700; }

.bm_ta{ width: 100%; height: 120px; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--bm-line);
        border-radius: 8px; font-size: 14px; line-height: 1.6; resize: vertical; }
.bm_cnt{ margin: 6px 0 0; text-align: right; font-size: 14px; color: var(--bm-sub); }
.bm_file{ display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--bm-line); border-radius: 8px; background: #fff; font-size: 14px; }
.bm_help{ margin: 8px 0 0; font-size: 14px; color: var(--bm-sub); }


/* ===== 5-2. 미팅 신청 STEP (날짜 / 시간 / 룸번호 선택) ===== */
.bm_modal_box--apply{ max-width: 760px; }

.bm_stp{ margin: 26px 0 12px; font-size: 17px; font-weight: 700; color: #111; }
.bm_stp:first-child{ margin-top: 0; }
.bm_stp b{ font-weight: 700; }

/* 범례 — 나의 신청 / 타 기업 신청 */
.bm_lgs{ margin: -4px 0 10px; font-size: 14px; color: #666; }
.bm_lg{ display: inline-flex; align-items: center; margin-right: 18px; }
.bm_lg img{ height: 16px; width: auto; margin-right: 6px; }

.bm_opts{ display: flex; flex-wrap: wrap; gap: 10px; }
.bm_pick{ position: relative; flex: 0 0 auto; min-width: 96px; padding: 12px 14px; box-sizing: border-box;
          border: 1px solid #9aa0a8; border-radius: 6px; background: #fff; color: #222;
          font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center;
          cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.bm_pick:hover{ border-color: var(--bm-main); color: var(--bm-main); }
.bm_pick{ white-space: nowrap; }
#bm_opt_date .bm_pick{ min-width: 150px; }

/* 선택됨 */
.bm_pick.on{ background: #c86fd4; border-color: #b455c4; color: #fff; }
.bm_pick.on:hover{ background: #bb5fc9; color: #fff; }

/* 비활성 — 이미 예약(busy · 타 기업) / 내 신청(mine) */
.bm_pick--busy{ background: #e9ebee; border-color: #c9ced5; color: #8b9199; cursor: not-allowed; }
.bm_pick--busy:hover{ background: #e9ebee; border-color: #c9ced5; color: #8b9199; }
.bm_pick--mine{ background: var(--bm-mine-bg); border-color: var(--bm-mine); color: var(--bm-mine); cursor: not-allowed; }
.bm_pick--mine:hover{ background: var(--bm-mine-bg); border-color: var(--bm-mine); color: var(--bm-mine); }

/* 상태 뱃지 아이콘 (버튼 우측 상단) — 시간·룸 공통 */
.bm_pick_ic{ position: absolute; top: -8px; right: -8px; width: 24px; height: 22px;
             padding: 3px; box-sizing: border-box; border: 1px solid #d6dae0; border-radius: 6px;
             background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }


/* ===== 6. 예약 그리드 ===== */
/* 날짜 탭 */
.bm_datetabs{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bm_datetab{ padding: 10px 22px; border: 1px solid var(--bm-line); border-radius: 8px; background: #fff;
             color: #555; font-size: 14px; font-weight: 700; cursor: pointer; }
.bm_datetab.on{ border-color: var(--bm-main); background: var(--bm-main); color: #fff; }

/* 그리드 — 가로 스크롤 컨테이너 (본문은 절대 좌우로 밀리지 않는다) */
.bm_gridwrap{ overflow-x: auto; border: 1px solid var(--bm-line); border-radius: 8px; background: #fff; }
.bm_grid{ border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; }
.bm_grid th,
.bm_grid td{ padding: 0; border-right: 1px solid var(--bm-line-l); border-bottom: 1px solid var(--bm-line-l); text-align: center; }
.bm_grid thead th{ height: 38px; background: var(--bm-off); color: #444; font-size: 14px; font-weight: 700; white-space: nowrap; }
.bm_grid tbody tr:last-child th,
.bm_grid tbody tr:last-child td{ border-bottom: 0; }
.bm_grid th:last-child,
.bm_grid td:last-child{ border-right: 0; }

/* 시간 열 — 가로 스크롤 시 고정 */
.bm_grid .bm_gt{ position: sticky; left: 0; z-index: 2; width: 108px; min-width: 108px;
                 background: var(--bm-off); color: #555; font-size: 14px; font-weight: 700; white-space: nowrap; padding: 0 8px; }
.bm_grid thead .bm_gt{ z-index: 3; }

/* 칸 */
.bm_cell{ display: block; width: 100%; min-width: 42px; height: 34px; line-height: 34px;
          border: 0; background: #fff; font-size: 14px; font-weight: 700; color: transparent; cursor: default; padding: 0; }
.bm_cell--free{ cursor: pointer; }
.bm_cell--free:hover{ background: #e6f6fb; }
.bm_cell--pick{ background: var(--bm-main); color: #fff; cursor: pointer; }
.bm_cell--busy{ background: var(--bm-busy-bg); color: var(--bm-busy); }
.bm_cell--mine{ background: var(--bm-mine-bg); color: var(--bm-mine); }

/* 범례 */
.bm_legend{ list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 12px 0 0; padding: 0; font-size: 14px; color: #555; }
.bm_legend li{ display: flex; align-items: center; gap: 6px; }
.bm_legend .bm_cell{ display: inline-block; width: 26px; min-width: 26px; height: 22px; line-height: 22px;
                     border: 1px solid var(--bm-line-l); border-radius: 3px; font-size: 14px; }
.bm_legend_note{ color: var(--bm-sub); font-size: 14px; }

/* 선택 현황 */
.bm_picks{ margin-top: 14px; padding: 14px 16px; background: var(--bm-off); border-radius: 8px; }
.bm_picks_label{ display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #444; }
.bm_picks_list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bm_picks_list li{ display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: #fff;
                   border: 1px solid var(--bm-line); border-radius: 20px; font-size: 14px; }
.bm_picks_none{ border: 0 !important; background: none !important; padding: 0 !important; color: var(--bm-sub); }
.bm_picks_txt{ font-weight: 700; color: #333; }
.bm_picks_del{ border: 0; background: #eef0f3; color: #666; border-radius: 20px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.bm_picks_del:hover{ background: #e2e5ea; }


/* ===== 6-2. 마이페이지 embed (받은 미팅 / MY 미팅신청) ===== */
.bm_embed{ color: var(--bm-text); }
.bm_embed_title{ margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--bm-main); }
.bm_embed_note{ margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: #666; }
.bm_embed_none{ padding: 40px 0; text-align: center; color: #999; font-size: 15px; }
.bm_embed_none .bm_sbtn{ margin-left: 10px; }
.bm_embed_act{ margin-top: 12px; text-align: right; }

.bm_tblwrap{ overflow-x: auto; }
.bm_list{ width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e5e5; }
.bm_list th,
.bm_list td{ padding: 12px 14px; font-size: 14px; line-height: 1.5; text-align: left; vertical-align: middle; border-bottom: 1px solid #ececec; }
.bm_list thead th{ background: var(--bm-off); color: #555; font-weight: 600; white-space: nowrap; }
.bm_list tbody tr:last-child td{ border-bottom: 0; }
.bm_list_name{ font-weight: 700; color: #222; text-decoration: none; }
a.bm_list_name{ color: var(--bm-main); text-decoration: underline; }
.bm_list_sub{ display: block; margin-top: 3px; color: var(--bm-sub); font-size: 14px; }
/* 미팅 일정 — 날짜 / 시간을 각각 한 줄로 */
.bm_sl{ display: block; white-space: nowrap; }
/* 상태 — 예약확정(관리자 지정)일 때만 룸번호까지 박스로 */
.bm_stat_ok{ display: inline-block; padding: 8px 16px; border-radius: 20px;
             background: #e4f5e4; color: #2a7a3f; font-size: 14px; font-weight: 700;
             line-height: 1.5; text-align: center; white-space: nowrap; }
.bm_stat_ok b{ display: block; font-weight: 700; }
.bm_list_msg{ max-width: 260px; color: #555; }

.bm_sbtn{ display: inline-block; padding: 6px 14px; border: 1px solid var(--bm-line); border-radius: 6px;
          background: #fff; color: #555; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.bm_sbtn:hover{ background: var(--bm-off); color: #333; }
.bm_sbtn--on{ border-color: var(--bm-main); background: var(--bm-main); color: #fff; }
.bm_sbtn--on:hover{ background: var(--bm-main-d); color: #fff; }

.bm_table--modal th{ width: 116px; }
.bm_table--modal th,
.bm_table--modal td{ padding: 12px 14px; font-size: 14px; }
.bm_card_img{ max-width: 100%; width: 360px; border: 1px solid var(--bm-line); border-radius: 6px; }
/* 받은 메시지 상세 모달의 명함만 60% 크기로 (비율 유지 — 세로도 60%) */
#bm_msgr_modal .bm_card_img{ width: 216px; }


/* ===== 6-4. 메시지('채팅') — 전송 모달 / 마이페이지 (embed/chat_modal.inc · mypage_msg_*.inc) ===== */
.bm_modal_co--lg{ font-size: 30px; }

.bm_notice{ margin: 0 0 20px; padding: 18px 20px; list-style: none;
            background: var(--bm-off); border: 1px solid var(--bm-line); border-radius: 8px; }
.bm_notice li{ position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 16px; line-height: 1.6; color: #444; }
.bm_notice li:last-child{ margin-bottom: 0; }
.bm_notice li:before{ content: '※'; position: absolute; left: 0; top: 0; color: #888; }
.bm_notice li.bm_notice_btn{ padding-left: 0; margin-top: 14px; }
.bm_notice li.bm_notice_btn:before{ content: none; }
.bm_guide_btn{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 5px;
               background: #4a4a4a; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
.bm_guide_btn img{ height: 16px; width: auto; }
.bm_guide_btn:hover{ background: #2f2f2f; color: #fff; }

/* 섹션 제목 — 알약 없이 검은 볼드 텍스트 */
.bm_step--plain .bm_step_no{ margin: 0; padding: 0; border-radius: 0;
                             background: none; color: #111; font-size: 16px; vertical-align: baseline; }

/* 신청 양식 — 이름/소속·직함, 연락처/이메일 2열 + 미팅목적·명함 전체폭 */
.bm_form td{ padding-right: 14px; }
.bm_form .bm_ta{ height: 140px; }
.bm_form .bm_cnt{ margin-bottom: 0; }

.bm_filebox{ display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.bm_filebtn{ flex: 0 0 auto; padding: 10px 18px; border: 1px solid var(--bm-main); border-radius: 6px;
             background: #fff; color: var(--bm-main); font-size: 14px; font-weight: 700; cursor: pointer; }
.bm_filebtn:hover{ background: var(--bm-main); color: #fff; }
.bm_file_hidden{ position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bm_filename{ min-width: 0; color: #666; font-size: 14px; word-break: break-all; }

.bm_list_cut{ max-width: 320px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 보낸 메시지 모달 — 첫 행 오른쪽에 읽음·답변 알약 */
.bm_ms_badges{ width: 1%; padding-right: 20px !important; text-align: right; white-space: nowrap; }
.bm_ms_badges .bm_badge{ margin-left: 6px; }
.bm_ms_badges .bm_list_sub{ display: inline-block; margin: 0 0 0 6px; }


/* ===== 6-3. 공개 신청현황판 (embed/status_board.inc) ===== */
.bm_board{ color: var(--bm-text); }
.bm_board_title{ margin: 0 0 22px; padding: 26px 30px; border-radius: 999px; text-align: center;
                 background: linear-gradient(90deg, #00c2c7 0%, #4a7bd4 35%, #a45cc8 65%, #ef4a86 100%);
                 color: #fff; font-size: 32px; font-weight: 800; letter-spacing: 1px; }

.bm_board_wrap{ overflow-x: auto; }
.bm_board_tbl{ width: 100%; border-collapse: separate; border-spacing: 8px; table-layout: fixed; }
.bm_board_col1{ width: 160px; }
.bm_board_tbl th,
.bm_board_tbl td{ padding: 0; vertical-align: middle; }
.bm_board_tbl thead th{ height: 54px; border: 1px solid var(--bm-line); border-radius: 6px;
                        background: #fff; color: #333; font-size: 19px; font-weight: 700; }
.bm_board_tbl tbody th{ height: 108px; border: 1px solid var(--bm-line-l); border-radius: 6px;
                        background: #fff; color: #555; font-size: 17px; font-weight: 500; white-space: nowrap; }

/* 예약현황 박스 (칸) */
.bm_bcell{ display: block; width: 100%; height: 126px; box-sizing: border-box; padding: 18px 10px;
           border: 0; border-radius: 6px; background: #4a90d9; color: #fff; cursor: pointer;
           font-family: inherit; text-align: center; transition: background .2s ease; }
.bm_bcell:hover{ background: #3a7fc4; }
.bm_bcell--none{ background: #aab3bf; }
.bm_bcell--none:hover{ background: #99a3b0; }
.bm_bcell_t{ display: block; font-size: 15px; font-weight: 400; line-height: 1.2; }
.bm_bcell_n{ display: block; margin-top: 7px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.bm_bcell_more{ display: inline-block; margin-top: 11px; padding: 6px 16px; border-radius: 20px;
                background: #2b3446; color: #fff; font-size: 13px; font-weight: 600; }

/* 모달 — 제목 (날짜 / 시간 / '예약 현황' 사이 간격) */
.bm_modal_box--board{ max-width: 720px; }
.bm_board_ttl_t{ margin-left: 16px; }
.bm_board_ttl_sub{ margin-left: 18px; }

/* 모달 — 룸 색상 범례 */
/* 라벨(왼쪽 고정) + 룸 목록(오른쪽에서 줄바꿈) — 목록을 별도 컨테이너로 두어
   둘째 줄부터도 첫 줄 첫 룸과 시작선이 정확히 맞는다 (픽셀 들여쓰기 값 불필요) */
.bm_blegend{ display: flex; align-items: flex-start; padding: 12px 14px;
             border: 1px solid var(--bm-line-l); border-radius: 6px; background: #fafbfc; }
.bm_blegend_l{ flex: 0 0 auto; margin-right: 16px; line-height: 2; font-size: 14px; font-weight: 700; color: #333; }
.bm_blegend_list{ flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.bm_brc{ display: inline-flex; align-items: center; line-height: 2;
         font-size: 14px; color: #555; white-space: nowrap; }
.bm_brc i{ display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; }

/* 모달 — 날짜·시간별 패널 (기본 숨김, JS 가 선택한 것만 표시) */
.bm_bpanel{ display: none; margin-top: 18px; }
.bm_bempty{ margin: 0; padding: 40px 0; text-align: center; color: #999; font-size: 15px; }
.bm_brow{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bm_broom{ flex: 0 0 96px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: #333; }
.bm_broom i{ display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; }
.bm_bpair{ flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; }
.bm_bparty{ flex: 1 1 0; min-width: 0; padding: 10px 12px; border-radius: 4px;
            color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ===== 7. 미디어쿼리 ===== */

/* ----- PC ----- */
@media (min-width: 1270px){
    .bm_cards{ grid-template-columns: repeat(5, 1fr); }
    .bm_grid{ min-width: 100%; }
}

/* ----- 모바일 ----- */
@media all and (max-width: 1270px){
    .bm_tabs .bm_tab{ padding: 11px 18px; font-size: 14px; }
    .bm_panel{ padding: 20px 16px; }

    .bm_search_row{ gap: 6px; }
    .bm_search_sel{ min-width: 0; flex: 1 1 48%; }
    .bm_search_kw{ flex: 1 1 100%; min-width: 0; }
    .bm_search_btn{ flex: 1 1 60%; }
    .bm_search_reset{ flex: 1 1 30%; text-align: center; }

    .bm_cards{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bm_card_logo{ height: 110px; }
    .bm_card_logo img{ height: 60px; }
    .bm_card_name{ font-size: 15px; }

    .bm_vhead{ flex-direction: column; align-items: flex-start; gap: 16px; }
    .bm_vlogo{ flex: 0 0 auto; width: 100%; height: 140px; }
    .bm_vname{ font-size: 20px; }
    .bm_vactions{ width: 100%; }
    .bm_vactions .bm_btn{ flex: 1; min-width: 0; }

    .bm_table th,
    .bm_table td{ padding: 14px 12px; font-size: 14px; }
    .bm_table th{ width: 96px; }
    .bm_table td{ padding-right: 12px; }

    .bm_modal_box{ width: 96%; max-height: 92vh; }
    .bm_modal_head{ padding: 14px 16px; }
    .bm_modal_co{ font-size: 17px; }
    .bm_modal_sub{ font-size: 14px; }
    .bm_modal_body{ padding: 16px; }
    .bm_modal_actions .bm_btn{ flex: 1; min-width: 0; }

    .bm_datetab{ flex: 1 1 auto; padding: 10px 12px; font-size: 14px; }
    .bm_grid{ min-width: 660px; }
    .bm_grid .bm_gt{ width: 100px; min-width: 100px; font-size: 14px; padding: 0 4px; }
    .bm_cell{ min-width: 40px; height: 32px; line-height: 32px; }
    .bm_legend{ gap: 6px 12px; font-size: 14px; }
    .bm_legend_note{ flex: 1 1 100%; }
    .bm_ta{ height: 100px; }

    .bm_embed_title{ font-size: 17px; }
    .bm_list{ min-width: 620px; }
    .bm_list th,
    .bm_list td{ padding: 10px 8px; font-size: 14px; }
    .bm_list_msg{ max-width: 160px; }
    .bm_sbtn{ padding: 5px 10px; font-size: 14px; }
    .bm_table--modal th{ width: 88px; }
    .bm_card_img{ width: 100%; }
    #bm_msgr_modal .bm_card_img{ width: 60%; }

    /* 메시지('채팅') */
    .bm_modal_co--lg{ font-size: 21px; }
    .bm_notice{ padding: 14px 15px; }
    .bm_notice li{ font-size: 15px; padding-left: 18px; }
    .bm_guide_btn{ font-size: 15px; }
    .bm_filebox{ flex-direction: column; align-items: flex-start; gap: 8px; }
    .bm_filebtn{ width: 100%; }
    .bm_list_cut{ max-width: 160px; }

    /* 미팅 신청 STEP — 버튼이 줄바꿈되도록 폭만 줄인다 */
    .bm_stp{ margin: 20px 0 10px; font-size: 15px; }
    .bm_opts{ gap: 7px; }
    .bm_pick{ min-width: 0; flex: 1 0 auto; padding: 10px 10px; font-size: 14px; }
    #bm_opt_date .bm_pick{ flex: 1 1 30%; min-width: 0; padding: 10px 4px; font-size: 13px; }
    #bm_opt_time .bm_pick{ flex: 1 1 21%; }
    #bm_opt_room .bm_pick{ flex: 1 1 28%; }

    /* 신청 양식 — 모바일은 2열이 좁아 항목마다 줄바꿈 */
    .bm_form th, .bm_form td{ display: block; width: auto; }
    .bm_form th{ padding-bottom: 0; }
    .bm_form td{ padding-top: 6px; padding-right: 12px; }
    .bm_form .bm_ta{ height: 120px; }

    /* 공개 신청현황판 — 표는 가로 스크롤, 칸은 조금 작게 */
    .bm_board_title{ margin-bottom: 18px; padding: 18px 20px; font-size: 23px; }
    .bm_board_tbl{ min-width: 620px; border-spacing: 6px; }
    .bm_board_col1{ width: 112px; }
    .bm_board_tbl thead th{ height: 46px; font-size: 16px; }
    .bm_board_tbl tbody th{ height: 114px; font-size: 14px; }
    .bm_bcell{ height: 114px; padding: 15px 8px; }
    .bm_bcell_t{ font-size: 14px; }
    .bm_bcell_n{ font-size: 16px; }
    .bm_bcell_more{ margin-top: 9px; padding: 5px 13px; font-size: 12px; }

    .bm_board_ttl_t{ margin-left: 10px; }
    .bm_board_ttl_sub{ margin-left: 12px; }
    .bm_blegend{ padding: 10px 12px; }
    .bm_blegend_l{ margin-right: 10px; }
    .bm_blegend_list{ gap: 0 12px; }
    .bm_brow{ flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
    .bm_broom{ flex: 0 0 auto; }
    .bm_bpair{ width: 100%; gap: 8px; }
    .bm_bparty{ padding: 9px 10px; font-size: 14px; }
}