/* ===================================================================
   modern.css — 레거시 테이블 레이아웃을 대체하는 현대화 공통 스타일
   (시맨틱 마크업 + Flexbox/Grid. 색/폰트는 기존 디자인 클래스 유지)
   =================================================================== */

/* 페이지 컨테이너 */
.wrap { width: 1280px; max-width: 100%; margin: 0 auto; padding: 20px 12px 48px; box-sizing: border-box; }
.wrap-wide { width: 1300px; max-width: 100%; margin: 0 auto; padding: 20px 10px 48px; box-sizing: border-box; }
.panel { padding-top: 10px; }

/* 페이지 타이틀 */
.page-title { padding: 4px 6px 16px; }

/* 라벨-값 폼 (구 20%/80% td 레이아웃 대체) */
.form-table { width: 100%; border-top: 1px solid #3d4852; }
.form-row { display: flex; align-items: stretch; border-bottom: 1px solid #3d4852; }
.form-row .fl { flex: 0 0 20%; min-height: 45px; display: flex; align-items: center; justify-content: center; background: #1c2435; padding: 10px; box-sizing: border-box; text-align: center; }
.form-row .fv { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; box-sizing: border-box; }

/* 금액 선택 버튼 그리드 */
.money-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.money-grid > * { min-width: 70px; text-align: center; }

/* 안내 박스 구분선 */
.hr-dark { height: 1px; background: #000; }
.hr-line { height: 1px; background: #404f64; }

/* 데이터 테이블 (게시판/내역 등 실제 표) */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th { background: #1c2435; color: #fff; font-weight: 700; padding: 10px 6px; text-align: center; font-size: 13px; border-bottom: 1px solid #3d4852; }
.data-table tbody td { padding: 10px 6px; text-align: center; border-bottom: 1px solid #3d4852; vertical-align: middle; }
.data-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.data-table .t-left { text-align: left; }
.data-table .empty td { padding: 34px 0; text-align: center; color: #888; }

/* 액션(제출) 영역 */
.actions { text-align: center; padding: 26px 0; }
.btn-lg { font-size: 18px; padding: 12px 40px; }

/* 상태 뱃지 */
.badge { display: inline-block; padding: 2px 10px; border-radius: 3px; font-size: 12px; font-weight: 700; }

/* 유틸 */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap8 { gap: 8px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }

/* 메인 이미지 */
.hero { text-align: center; padding: 0; }
.hero img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* 반응형 */
@media (max-width: 1320px) {
  .wrap, .wrap-wide { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 768px) {
  .wrap, .wrap-wide { padding: 10px 8px 32px; }
  .page-title { font-size: 15px; padding: 2px 4px 12px; }

  /* 라벨-값 폼 → 세로 스택 */
  .form-row { flex-direction: column; }
  .form-row .fl { flex-basis: auto; min-height: 0; padding: 8px 10px; justify-content: flex-start; text-align: left; }
  .form-row .fv { padding: 10px; }
  .cs-two, .cs-form .fl-narrow { flex-basis: auto; }
  .money-grid > * { min-width: calc(33.33% - 6px); flex: 1; }
  .input_cash, .cs-input { width: 100% !important; box-sizing: border-box; }

  /* 데이터 테이블 축소 */
  .data-table { font-size: 12px; }
  .data-table thead th, .data-table tbody td { padding: 7px 3px; }
  .actions { padding: 18px 0; }
  .actions .btn-lg, .btn-lg { font-size: 15px; padding: 10px 22px; }

  /* 탭 버튼 줄바꿈 */
  .tabs, .top_title { flex-wrap: wrap; }

  /* 로그인/회원가입 폼(common.1.2.css 고정폭 오버라이드) */
  .layer { padding: 0 10px; box-sizing: border-box; }
  .loginform-wrap, .authform-wrap, .joinform-wrap,
  .loginform-container, .authform-container, .joinform-container {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  }
  .joinform li, .loginform li, .authform li { display: flex; flex-direction: column; align-items: flex-start; }
  .joinform li input, .joinform li select, .loginform li input, .authform li input { width: 100% !important; box-sizing: border-box; }
  .joinform li .hint, .joinform li span[style] { margin-left: 0 !important; }
}