/* 지역담당자 연락처 표 — [pb_franchise_regional_manager_table].
   디자인 ground truth: issues/3874-1/(style.css 레이아웃 + 02_style-gen.css node 단위 paint).
   여기서는 node(data-node-id) 단위 paint 를 클래스(역할) 단위로 통합해 동적 렌더에 맞춘다.
   브랜드 폰트 PBGothicOTFRg 는 테마 전역(font-pbgothic.css)에서 로드 — 별도 @font-face 불필요. */

/* === scope: .wvu7txmr === */
.wvu7txmr {
  --tok-navy: #062f78;
  --tok-body: #1a1a1a;
  --tok-headbg: #f5f6f7;
  --tok-line: #cccccc;        /* 행 가로선 */
  --tok-line-group: #747474;  /* 그룹 경계(데스크톱) */
  --tok-line-thick: #b4c0d6;  /* 테이블 바닥 */
  --tok-col: rgba(0,0,0,0.2);  /* 데스크톱 칼럼 세로선 #000 @0.2 (모바일 --tok-vline과 동일) */
  --tok-vline: rgba(0,0,0,0.2);/* 모바일 칼럼 세로선 #000 @0.2 */
  --mh: 36px;                 /* 데스크톱 행 min-height 기본 */
}
/* 리셋은 자손(*)만 — 루트(.wvu7txmr)는 별도(중앙정렬 보존) */
.wvu7txmr * { box-sizing: border-box; margin: 0; padding: 0; }
.wvu7txmr { box-sizing: border-box; width: 100%;
  font-family: 'PBGothic','Apple SD Gothic Neo','Malgun Gothic',sans-serif; color: var(--tok-body); }

/* 콘텐츠 컨테이너 — 폭은 브레이크포인트별(모바일 360 / 데스크톱 1336) 캡, 중앙정렬 */
.wvu7txmr .scope-wrap { width: 100%; margin: 0 auto; }

/* =========================================================================
   모바일 — 컴팩트 3칼럼 테이블 (< 1360px). 디자이너 SVG(regional-manager-mobile.svg) ground truth.
   구조: 그룹마다 독립 테이블 섹션 — navy 라벨 바(bar1) → 칼럼헤더 바(bar2) → 본문.
   본문 행: [col A 담당자(rowspan 수직중앙) | col B 지역 | col C 상세지역(centered, wrap)].
   ========================================================================= */
@media (max-width: 1359.98px) {
  .wvu7txmr .scope-wrap { max-width: 360px; }
  .wvu7txmr .rm { width: 100%; }
  .wvu7txmr .rm-head { display: none; }            /* 데스크톱 칼럼헤더 — 모바일 숨김 */
  .wvu7txmr .rm-thick-bottom { border-bottom: 0; } /* .rm 자체 바닥 없음 — 섹션(.rm-group)별 #b4c0d6 */

  /* 각 그룹 = 독립 테이블 섹션 */
  .wvu7txmr .rm-group { display: block; border-bottom: 1px solid var(--tok-line-thick); } /* #b4c0d6 바닥 */
  .wvu7txmr .rm-group + .rm-group { margin-top: 36px; }  /* 섹션 간격 (SVG ~36px) */

  /* bar1 — 그룹 라벨 (서울/수도권, 지방) */
  .wvu7txmr .rm-glabel { display: flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 3px 6px; background: var(--tok-headbg);
    border-top: 1px solid var(--tok-navy);            /* navy 상단 rule */
    color: var(--tok-navy); font-size: 9px; line-height: 1.3; letter-spacing: -0.03em;
    font-weight: 400; text-align: center; }
  .wvu7txmr .rm-glabel br { display: none; }          /* "서울/수도권" 한 줄 (데스크톱만 2줄) */

  /* bar2 — 칼럼 헤더 (col A 담당자/연락처 | 병합 col B+C 지역) */
  .wvu7txmr .rm-mhead { display: flex; align-items: stretch; min-height: 32px;
    background: var(--tok-headbg); border-top: 1px solid var(--tok-vline);  /* bar1|bar2 구분 */
    color: var(--tok-navy); font-size: 9px; letter-spacing: -0.03em; font-weight: 400; }
  .wvu7txmr .rm-mh-c { display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; line-height: 1.18; padding: 3px 4px; }
  .wvu7txmr .rm-mh-mgr { flex: 0 0 36.71%; border-right: 1px solid var(--tok-vline); } /* col A|B 세로선 */
  .wvu7txmr .rm-mh-region { flex: 1 1 auto; min-width: 0; }                            /* 병합 col B+C */

  /* 본문 */
  .wvu7txmr .rm-gbody { display: block; }
  .wvu7txmr .rm-mgr { display: flex; flex-direction: row; align-items: stretch; }
  .wvu7txmr .rm-mgr + .rm-mgr { border-top: 1px solid var(--tok-line); } /* 매니저 경계(전폭) #ccc */

  /* col A — 담당자 블록 (rowspan: 매니저 전 행에 걸쳐 수직중앙) */
  .wvu7txmr .rm-minfo { flex: 0 0 36.71%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 5px 4px; gap: 1px; border-right: 1px solid var(--tok-vline); } /* col A|B 세로선 */
  .wvu7txmr .rm-minfo .rm-c { display: block; }
  .wvu7txmr .rm-minfo .rm-t { display: block; font-size: 9px; line-height: 1.22;
    letter-spacing: -0.03em; color: var(--tok-body); }

  /* col B + col C */
  .wvu7txmr .rm-mregions { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  /* 도 행은 매니저 블록 높이를 채운다(flex-grow) — 단일-도 매니저에서 col B|C 세로선이 블록 바닥까지 닿게. */
  .wvu7txmr .rm-region { display: flex; flex-direction: row; align-items: stretch; min-height: 30px; flex: 1 0 auto; }
  .wvu7txmr .rm-region + .rm-region { border-top: 1px solid var(--tok-line); } /* 도 경계(col B+C만) #ccc */

  /* col B — 지역(province). SVG ground truth: col B 폭 = region row 의 32.45%. */
  .wvu7txmr .rm-c-region { flex: 0 0 32.45%; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 5px 2px; border-right: 1px solid var(--tok-vline); } /* col B|C 세로선 */
  .wvu7txmr .rm-c-region .rm-t { display: block; font-size: 9px; line-height: 1.22;
    letter-spacing: -0.03em; color: var(--tok-body); font-weight: 400; }

  /* col C — 상세지역(district list, centered). */
  .wvu7txmr .rm-c-detail { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; padding: 5px 5px; }
  .wvu7txmr .rm-c-detail .rm-d { display: block; font-size: 8.1px; line-height: 1.36;
    letter-spacing: -0.03em; color: var(--tok-body); }
}

/* =========================================================================
   데스크톱 테이블 (≥1360px) — 5칼럼 중첩 flex (rowspan = align stretch + 셀 내부 수직중앙).
   콘텐츠폭 1295px = 113/110/252/110/710 (소스 x경계 일치).
   ========================================================================= */
@media (min-width: 1360px) {
  .wvu7txmr .scope-wrap { max-width: 1336px; border-top: 3px solid #062F78; }
  .wvu7txmr .rm { width: 1295px; max-width: 100%; margin: 0 auto; }
  .wvu7txmr .rm-thick-bottom { border-bottom: 3px solid var(--tok-line-thick); }
  .wvu7txmr .rm-mhead { display: none; }   /* 데스크톱은 글로벌 .rm-head 사용 */

  /* flex 방향 */
  .wvu7txmr .rm-head,
  .wvu7txmr .rm-group,
  .wvu7txmr .rm-mgr,
  .wvu7txmr .rm-region,
  .wvu7txmr .rm-minfo { display: flex; flex-direction: row; align-items: stretch; }
  .wvu7txmr .rm-gbody,
  .wvu7txmr .rm-mregions { display: flex; flex-direction: column; }

  /* 그룹/매니저 컨테이너 데스크톱 스타일 */
  .wvu7txmr .rm-group { margin-bottom: 0; border: 0; }
  .wvu7txmr .rm-mgr + .rm-mgr,
  .wvu7txmr .rm-region + .rm-region { border-top: 0; }
  .wvu7txmr .rm-glabel { background: transparent; border-bottom: 0; font-weight: 400; padding: 0; }
  .wvu7txmr .rm-minfo { flex-wrap: nowrap; gap: 0; padding: 0; background: transparent; }
  .wvu7txmr .rm-region { padding: 0; gap: 0; }

  /* 칼럼 폭 (고정 px) */
  .wvu7txmr .rm-c-gubun, .wvu7txmr .rm-glabel { flex: 0 0 113px; width: 113px; }
  .wvu7txmr .rm-c-mgr     { flex: 0 0 110px; width: 110px; }
  .wvu7txmr .rm-c-contact { flex: 0 0 252px; width: 252px; }
  .wvu7txmr .rm-c-region  { flex: 0 0 110px; width: 110px; font-weight: 400; }
  .wvu7txmr .rm-c-regionhead,
  .wvu7txmr .rm-c-detail  { flex: 1 1 auto; min-width: 0; }
  .wvu7txmr .rm-gbody     { flex: 1 1 auto; min-width: 0; }
  .wvu7txmr .rm-minfo     { flex: 0 0 362px; width: 362px; }
  .wvu7txmr .rm-mregions  { flex: 1 1 auto; min-width: 0; }

  /* 헤더 행 — 소스 band 높이 + 배경 #f5f6f7 */
  .wvu7txmr .rm-head   { min-height: 77px; background: var(--tok-headbg); }
  .wvu7txmr .rm-region { min-height: var(--mh); }

  /* 셀 — 내부 콘텐츠 수직중앙 (병합셀 rowspan 효과). */
  .wvu7txmr .rm-c { display: flex; flex-direction: column; justify-content: center; padding: 0 6px; }
  .wvu7txmr .rm-c-detail { padding: 0 8px; }
  .wvu7txmr .rm-d { display: block; }

  /* 가로 구분선 (소스 stroke) */
  .wvu7txmr .rm-region--div { border-bottom: 1px solid var(--tok-line); }
  .wvu7txmr .rm-mgr--div    { border-bottom: 1px solid var(--tok-line); }
  .wvu7txmr .rm-group--div  { border-bottom: 1px solid var(--tok-line-group); }

  /* 세로 칼럼 구분선 #000@0.2 1px — SVG full-height x(table-local) 113/223/475/585.
     flex:1 컨테이너(gbody·mregions)의 세로선은 box-shadow inset(레이아웃 폭 비소비)로 그린다. */
  .wvu7txmr .rm-head .rm-c-mgr        { border-left: 1px solid var(--tok-col); }   /* 헤더 113 */
  .wvu7txmr .rm-gbody                 { box-shadow: inset 1px 0 0 var(--tok-col); }/* 본문 113 (비소비) */
  .wvu7txmr .rm-c-contact             { border-left: 1px solid var(--tok-col); }   /* 223 (헤더·본문) */
  .wvu7txmr .rm-head .rm-c-regionhead { border-left: 1px solid var(--tok-col); }   /* 헤더 475 */
  .wvu7txmr .rm-mregions              { box-shadow: inset 1px 0 0 var(--tok-col); }/* 본문 475 (비소비) */
  .wvu7txmr .rm-c-detail              { border-left: 1px solid var(--tok-col); }   /* 585 (본문 province|detail) */

  /* ----- paint(시각층) — issues/3874-1/02_style-gen.css 의 node 단위 값을 역할 단위로 통합 ----- */
  /* 헤더(구분/담당자/연락처/지역) + 그룹 라벨 = navy 23px */
  .wvu7txmr .rm-head .rm-t,
  .wvu7txmr .rm-glabel .rm-t {
    color: var(--tok-navy); font-size: 23px; line-height: 1.3; letter-spacing: -0.69px; text-align: center;
  }
  /* 본문 담당자명 / 시·도 / 상세지역 = body 19px */
  .wvu7txmr .rm-c-mgr .rm-t,
  .wvu7txmr .rm-c-region .rm-t,
  .wvu7txmr .rm-c-detail .rm-d {
    color: var(--tok-body); font-size: 19px; line-height: 35px; letter-spacing: -1.52px; text-align: center;
  }
  /* 본문 연락처/이메일 = body 19px(좁은 행간) */
  .wvu7txmr .rm-c-contact .rm-t {
    color: var(--tok-body); font-size: 19px; line-height: 22px; letter-spacing: -0.57px; text-align: center;
  }
}