@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500&display=swap');
/* =========================================================================
 * member.css — 구성원 스킨 디자인 (피그마 5296:2634 목록 / 5559:1793 상세)
 *   (기본 게시판 폼/읽기 스타일은 style.css, 여기서는 구성원 디자인만)
 * ========================================================================= */

/* 게시판 기본 컨테이너 타이틀 숨김(서브비주얼로 대체) — 이 스킨에서만 로드 */
#container_title { display: none; }

.members { position: relative; padding: 120px 0 160px; }
.members .mb_inner { width: 100%; max-width: 1700px; margin: 0 auto; }
.members :where(p, span, strong, a, li) { word-break: keep-all; overflow-wrap: break-word; }

/* ---- 상단: Total / 버튼 / 검색 ---- */
.mb_top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.mb_total { display: flex; align-items: center; gap: 11px; }
.mb_total_en { font-family: 'SIMPLECANDY', 'Times New Roman', serif; font-size: 22px; line-height: 1; color: #2b2b2b; }
.mb_total_num { display: inline-flex; align-items: center; justify-content: center; padding: 5px 20px; background: #e6e6e6; font-family: 'UnShinmun', serif; font-size: 16px; color: #2b2b2b; line-height: 1; }
.mb_util { display: flex; align-items: flex-end; gap: 16px; }

/* 게시판 버튼(사이트 톤 통일) */
.mb_toolbar { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.mb_toolbar > li { position: relative; }
.mb_btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid #cfd6da; border-radius: 8px; background: #fff; color: #3a4650; font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer; }
.mb_btn i { font-size: 14px; }
.mb_btn:hover { border-color: #7894a8; color: #20262b; text-decoration: none; }
.mb_chkall { gap: 8px; cursor: pointer; }
.mb_chkall input { width: 16px; height: 16px; margin: 0; accent-color: #7894a8; cursor: pointer; }
.mb_btn_solid { background: #2f3a42; border-color: #2f3a42; color: #fff; }
.mb_btn_solid:hover { background: #20262b; border-color: #20262b; color: #fff; }
.mb_btn_line { background: #fff; }
.mb_more_menu { display: none; position: absolute; top: 46px; right: 0; z-index: 30; margin: 0; padding: 6px; list-style: none; min-width: 130px; background: #fff; border: 1px solid #dfe3e6; border-radius: 8px; box-shadow: 0 6px 20px rgba(39,56,69,.12); }
.mb_more_menu li button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; background: none; color: #4a5560; font-size: 14px; text-align: left; cursor: pointer; border-radius: 6px; }
.mb_more_menu li button:hover { background: #f2f5f6; color: #20262b; }

/* 검색 */
.mb_search { position: relative; width: 337px; max-width: 40vw; border-bottom: 1px solid #919191; }
.mb_search_input { width: 100%; height: 50px; padding: 0 44px 0 15px; border: 0; background: transparent; font-size: 16px; color: #333; }
.mb_search_input::placeholder { color: #8d8d8d; }
.mb_search_btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: transparent; color: #555; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* ---- 카드 그리드 ---- */
.mb_grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.mb_item { position: relative; min-width: 0; }
.mb_chk { position: absolute; top: 12px; left: 12px; z-index: 3; }
.mb_card { position: relative; display: block; overflow: hidden; aspect-ratio: 409 / 440; border-radius: 15px; background: linear-gradient(180deg, rgba(222,222,222,1) 0%, rgba(120,131,138,1) 100%); cursor: pointer; }
.mb_card:hover { text-decoration: none; }
/*.mb_card:hover .mb_photo img { transform: scale(1.03); }*/
.mb_photo { position: absolute; inset: 0; }
/* 시안: 인물 사진을 카드 높이에 맞춰(약 95%) 하단 정렬·가로 중앙, 원본 비율 유지 */
.mb_photo img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: auto; height: 95%; max-width: 100%; object-fit: contain; object-position: bottom center; transition: transform .4s ease; }
.mb_card:hover .mb_photo img { transform: translateX(-50%) ; }
.mb_noimg { position: absolute; inset: 0; }
.mb_card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(20,26,30,0) 0%, rgba(20,26,30,.55) 100%); pointer-events: none; }
.mb_meta { position: absolute; left: 33px; right: 20px; bottom: 28px; z-index: 1; color: #fff; letter-spacing: -0.7px; }
.mb_role { display: block; font-size: 20px; line-height: 1.2; margin-bottom: 4px; }
.mb_name { font-size: 32px; line-height: 1.2; font-weight: 400; }
.mb_name strong { font-weight: 700; }

.mb_empty, .mb_noresult { padding: 80px 0; text-align: center; color: #777; font-size: 18px; }
.mb_paging { margin-top: 40px; text-align: center; }

/* ---- 상세 카드(모달/뷰 공용) — 시안 5559:1793 ---- */
.mb_dlg_card { position: relative; overflow: hidden; background: #fff; border-radius: 0px; height: min(820px, 86vh); }
/* 배경 로고 워터마크(법무법인 그날) */
.mb_dlg_wm { position: absolute; left: 19%; top: 27%; width: 62%; max-width: 886px; aspect-ratio: 886 / 247; background: url(./img/wm-logo.png) no-repeat center / contain; opacity: .09; pointer-events: none; z-index: 0; }
.mb_dlg_info { position: absolute; left: 6%; right: 45%; top: 87px; bottom: 132px; z-index: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* 모달 스크롤바 숨김(스크롤 기능은 유지) */
.mb_dlg_info, .mb_dlg_card { scrollbar-width: none; -ms-overflow-style: none; }
.mb_dlg_info::-webkit-scrollbar, .mb_dlg_card::-webkit-scrollbar { width: 0; height: 0; display: none; }
.mb_sec { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 30px; }
.mb_sec:last-child { margin-bottom: 0; }
.mb_sec_label { flex: 0 0 150px; padding: 4px 0; font-size: 18px; font-weight: 600; color: #111; letter-spacing: -0.36px; line-height: 1.2; }
.mb_sec_body { flex: 1 1 auto; min-width: 0; }
.mb_sec_body p { margin: 0; font-size: 18px; line-height: 1.5; color: #111; letter-spacing: -0.36px; }
.mb_sec_body .mb_gap { height: 16px; }   /* 내용에 넣은 빈 줄 → 간격 유지 */
.mb_dlg_photo { position: absolute; right: 6.8%; top: 51px; bottom: 102px; width: 50%;  z-index: 1; }
.mb_dlg_photo img { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom right; }
.mb_dlg_bar { position: absolute; left: 0; right: 0; bottom: 0; height: 102px; display: flex; align-items: center; gap: 24px; padding: 0 83px; z-index: 2; border-top-left-radius: 40px; background: linear-gradient(90deg, #20262b 0%, #4c5d6a 50%, #7894a8 100%); }
.mb_dlg_name { flex: 1 1 auto; color: #fff; font-weight: 400; letter-spacing: -0.7px; white-space: nowrap; }
.mb_dlg_name .nm { font-size: 32px; font-weight: 700; }
.mb_dlg_name .ro { font-size: 24px; padding-left:5px}
.mb_dlg_tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.mb_dlg_tag i { width: 7px; height: 7px; background: rgba(255,255,255,.5); flex: 0 0 auto; }
.mb_dlg_tag span { font-family: 'Noto Serif KR', serif; font-size: 24px; line-height: 1.2; letter-spacing: -0.48px; }

/* ---- 모달 ---- */
.mb_modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 30px 20px; }
.mb_modal[hidden] { display: none; }
.mb_dim { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mb_dialog { position: relative; width: 100%; max-width: 1400px; display: flex; flex-direction: column; align-items: center; }
.mb_dialog_body { width: 100%; }
.mb_close { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 50px; margin: 30px auto 0; padding: 8px 26px 8px 15px; border: 1px solid #fff; border-radius: 50px; background: transparent; color: #fff; font-size: 20px; letter-spacing: -0.2px; cursor: pointer; }
.mb_close svg { width: 28px; height: 28px; }
.mb_close:hover { background: rgba(255,255,255,.12); }
body.mb_lock { overflow: hidden; }

/* ---- 뷰(상세 페이지) ---- */
.mb_view { background: none; }
.mb_view .mb_view_card { max-width: 1400px; margin: 0 auto; }
.mb_view .mb_dlg_card { box-shadow: 0 10px 40px rgba(39,56,69,.10); }
.mb_view_btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px auto 0; }
.mb_view_nb { max-width: 1000px; margin: 30px auto 0; padding: 0; list-style: none; border-top: 1px solid #e5e8ea; }
.mb_view_nb li { display: flex; gap: 14px; padding: 14px 6px; border-bottom: 1px solid #eef0f1; }
.mb_view_nb .nb_tit { color: #8b959c; min-width: 60px; }
.mb_view_nb a { color: #333; }

/* ---- 쓰기(관리자) ---- */
#bo_w { width: 100%; max-width: 1700px; margin: 0 auto; padding: 140px 20px 100px; box-sizing: border-box; }
#bo_w .bo_w_tit > label[for="wr_1"], #bo_w .bo_w_tit > label[for="wr_2"] { display: block; margin: 0 0 5px; font-weight: bold; color: #3a4650; }
.mb_write_guide { margin: 0 0 8px; padding: 12px 15px; background: #f5f7f8; border: 1px solid #e2e7ea; border-radius: 6px; color: #555; font-size: 13px; line-height: 1.6; }
.mb_write_guide code { display: block; margin-top: 6px; padding: 8px 10px; background: #fff; border: 1px solid #e2e7ea; border-radius: 4px; color: #2f3a42; font-size: 12px; }
#bo_w .btn_confirm { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
#bo_w .btn_confirm .btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; min-width: 130px; padding: 0 28px; border-radius: 8px; font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; box-sizing: border-box; }
#bo_w .btn_submit { background: #2f3a42; border: 1px solid #2f3a42; color: #fff; }
#bo_w .btn_submit:hover { background: #20262b; border-color: #20262b; }
#bo_w .btn_cancel { background: #fff; border: 1px solid #cfd6da; color: #3a4650; text-decoration: none; }
#bo_w .btn_cancel:hover { border-color: #7894a8; color: #20262b; text-decoration: none; }

/* ============================ 반응형 ============================ */


@media (max-width: 1740px) {
    .members .mb_inner { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 1440px) {
    .mb_grid { gap: 18px; }
    .mb_meta { left: 26px; bottom: 24px; }
    .mb_name { font-size: 28px; }
    .mb_role { font-size: 18px; }
}
@media (max-width: 1200px) {
    /* 모달 정보/사진 간격 확보 */
    .mb_dlg_info { left: 5%; right: 42%; top: 60px; bottom: 122px; }
    .mb_dlg_name .nm { font-size: 28px; }
    .mb_dlg_name .ro { font-size: 20px; }
    .mb_dlg_tag span { font-size: 20px; }
    .mb_dlg_bar { padding: 0 40px; gap: 16px; }
}
@media (max-width: 1024px) {
    .members { padding: 80px 0 120px; }
    .mb_grid { grid-template-columns: repeat(3, 1fr); }
    /* 모달: 세로 스택 (사진 → 바 → 본문 순) */
    .mb_dlg_card { display: flex; flex-direction: column; height: auto; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius:10px;}
    .mb_dlg_wm { display: none; }
    .mb_dlg_photo { position: static; order: 1; width: 100%; max-width: none; top: auto; right: auto; height: 320px; background: linear-gradient(180deg, #dedede 0%, #9ea4a8 55%, #78838a 100%); }
    .mb_dlg_photo img { position: static; display: block; width: 100%; height: 100%; margin: 0 auto; object-position: bottom center;         padding-top: 20px;}
    .mb_dlg_bar { position: static; order: 2; height: auto; border-top-left-radius: 0; padding: 10px 24px; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; }
    /* 이름/한줄소개 각각 전체 폭으로 줄바꿈 (넘침 방지) */
    .mb_dlg_name, .mb_dlg_tag { flex: 1 1 100%; min-width: 0; white-space: normal; }
    .mb_dlg_tag { align-items: flex-start; }
    .mb_dlg_tag i { margin-top: 9px; }
    .mb_dlg_tag span { white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
    .mb_dlg_info { position: static; order: 3; inset: auto; padding: 20px; overflow: visible; }
}
@media (max-width: 768px) {
    .mb_top { flex-wrap: wrap; }
    .mb_util { width: 100%; flex-wrap: wrap; }
    .mb_search { width: 100%; max-width: none; }
    .mb_grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .mb_meta { left: 18px; bottom: 18px; }
    .mb_name { font-size: 24px; }
    .mb_role { font-size: 16px; }
    /* 모달 폰트 축소 */
    .mb_sec_label { flex-basis: 110px; font-size: 16px; }
    /* 모바일: 본문 각 줄 앞 도트 + 줄바꿈 시 윗줄 글자에 맞춰 들여쓰기 */
    .mb_sec_body p { position: relative; padding-left: 12px; font-size: 16px; }
    .mb_sec_body p::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 3px; height: 3px; border-radius: 50%; background: #111; }
    .mb_sec_body .mb_gap { padding-left: 0; }
    .mb_sec_body .mb_gap::before { content: none; }
    .mb_dlg_name .nm { font-size: 24px; }
    .mb_dlg_name .ro { font-size: 18px; }
    .mb_dlg_tag span { font-size: 18px; }
    .mb_close { font-size: 18px; height: 46px; }
}
@media (max-width: 486px) {
    .members { padding: 60px 0 90px; }
    .mb_total_en { font-size: 20px; }
    .mb_name { font-size: 20px; }
    .mb_role { font-size: 14px; }
    .mb_search_input { height: 44px; font-size: 14px; }
    /* 모달 폰트 한 단계 더 축소 + 라벨 세로 스택 */
    .mb_dlg_photo { height: 260px; }
    .mb_sec { flex-direction: column; gap: 4px; margin-bottom: 22px; }
    .mb_sec_label { flex-basis: auto; font-size: 15px; }
    .mb_sec_body p { font-size: 14px; }
    .mb_dlg_name { white-space: normal; }
    .mb_dlg_name .nm { font-size: 20px; }
    .mb_dlg_name .ro { font-size: 15px; }
    .mb_dlg_tag span { font-size: 14px; }
    .mb_close { font-size: 12px; height: 30px;     margin:15px auto 0;}
	.mb_close svg {width:18px; height:18px}
	.mb_dlg_card {max-height:85vh}
}
@media (max-width: 380px) { .mb_grid { grid-template-columns: 1fr; } }

/* 게시판 콘텐츠 좌우 여백: 1760px 이하부터 20px (inner 최대너비 1700 + 여백 확보) */
@media (max-width: 1760px) {
    .inner { padding-left: 20px; padding-right: 20px; }
}