/* ---------------------------------------------------------------------------
 * Form_Top.xfdl 변환본 — 상단 탭바 enhancement + reference fragment 스타일.
 *
 * 원본 Form_Top 의 시각적 요소:
 *   - 60px 높이의 상단바 (stc00 cssclass=top_bg/top_bg_qa/top_bg_test)
 *   - 가운데 Tab 컨트롤 (각 탭에 ×버튼, 우클릭 메뉴)
 *   - 우측 "일괄종료" 버튼
 *   - 우측 환경 표시 (stcServerMode: bold 28px red — visible="false" 기본)
 *
 * gift-was-mvc 의 .pagetab 가 위 1,2,3 항목을 이미 구현했으므로,
 * 본 CSS 는 (a) 우클릭 컨텍스트 메뉴 (#tab-context-menu), (b) 환경 인디케이터 색 강조,
 * (c) form-top reference fragment 의 매핑 표 스타일만 제공한다.
 * --------------------------------------------------------------------------- */

/* (a) 원본 PopupMenu#rmpopup 대응 — Close / Close all but this / Close all */
#tab-context-menu {
  position: fixed;
  display: none;
  z-index: 9999;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #b8c0cf;
  box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.18);
  border-radius: 4px;
  padding: 4px 0;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  font-size: 13px;
}
#tab-context-menu.is-open {
  display: block;
}
#tab-context-menu .ctx-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: #1f2a44;
}
#tab-context-menu .ctx-item:hover {
  background: #eceefa;
}
#tab-context-menu .ctx-divider {
  height: 1px;
  background: #e6e8ec;
  margin: 4px 0;
}

/* (b) 환경 인디케이터 강조 — 원본 stcServerMode (bold 28px red) 의 약식 버전 */
.admin-header .state.env-non-prod {
  color: #d12020;
  font-weight: 700;
  letter-spacing: 1px;
}
.admin-header .state.env-prod {
  display: none;
}

/* (c) form-top reference fragment 의 매핑 표 */
.form-top-fragment {
  padding: 24px;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  color: #1f2a44;
}
.form-top-fragment h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #2c4368;
}
.form-top-fragment p.lead {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: #555;
  line-height: 1.7;
}
.form-top-mapping {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 24px;
}
.form-top-mapping th,
.form-top-mapping td {
  border: 1px solid #d0d4dc;
  padding: 8px 12px;
  vertical-align: top;
}
.form-top-mapping thead th {
  background: #eceefa;
  color: #1f2a44;
  font-weight: 600;
}
.form-top-mapping td code {
  background: #f5f6f8;
  padding: 1px 5px;
  border-radius: 2px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  color: #2c4368;
}
.form-top-fragment .ctx-demo {
  background: #fbfbfc;
  border: 1px dashed #b8c0cf;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: #1f2a44;
}
.form-top-fragment .ctx-demo strong { color: #2c4368; }