@charset "utf-8";

/* =============================================================================================
   보안 전용 통합 기술 지원 테마 레이아웃 (모바일 카드 전환 및 고밀도 반응형 버전)
============================================================================================= */
:root {
  --primary: #0f172a;
  --secondary: #475569;
  --accent: #0284c7;
  --border: #e2e8f0;
  --bg-light: #f8fafc;
  --point: #e11d48;
}

/* 글로벌 가변 박스 모델 선언 */
.sup-board-wrap, .sup-form-wrap { box-sizing:border-box; }
.sup-board-wrap *, .sup-form-wrap * { box-sizing:border-box; }

/* ---------------------------------------------------------------------------------------------
   1. LIST & BOARD STRUCTURE (DESKTOP DEFAULT)
--------------------------------------------------------------------------------------------- */
.sup-board-wrap { max-width:1200px; margin:40px auto; padding:0 20px; font-family:'Pretendard',sans-serif; }
.sup-board-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:14px; color:var(--secondary); gap:10px; }
.sup-board-top strong { color:var(--primary); font-weight:700; }

.sup-table { width:100%; border-collapse:collapse; border-top:2px solid var(--primary); font-size:14px; }
.sup-table th { background:var(--bg-light); color:var(--primary); font-weight:600; padding:14px 8px; border-bottom:1px solid var(--border); }
.sup-table td { padding:14px 8px; border-bottom:1px solid var(--border); text-align:center; color:#334155; }
.sup-table tr:hover td { background-color:#f1f5f9; }

.text-left-link { text-align:left !important; padding-left:16px !important; }
.text-left-link a { color:#1e293b; text-decoration:none; display:inline-flex; align-items:center; gap:6px; word-break:break-all; }
.text-left-link a:hover { color:var(--accent); text-decoration:underline; }

/* 데이터 식별 뱃지 컴포넌트 */
.badge-type { display:inline-block; padding:4px 10px; border-radius:4px; font-size:12px; font-weight:600; white-space:nowrap; }
.badge-type.t1 { background:#e0f2fe; color:#0369a1; }
.badge-type.t2 { background:#fee2e2; color:#b91c1c; }
.badge-type.t3 { background:#fef3c7; color:#b45309; }
.badge-type.t4 { background:#dcfce7; color:#15803d; }

.status-badge { display:inline-block; padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:500; white-space:nowrap; }
.status-badge.s1 { background:#64748b; color:#fff; }
.status-badge.s2 { background:#f59e0b; color:#fff; }
.status-badge.s3 { background:#10b981; color:#fff; }

/* 터치 최적화 페이지네이션 */
.sup-pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:30px; flex-wrap:wrap; }
.sup-pagination a, .sup-pagination strong { display:inline-flex; width:36px; height:36px; justify-content:center; align-items:center; border:1px solid var(--border); border-radius:6px; text-decoration:none; color:var(--secondary); font-size:14px; min-width:36px; }
.sup-pagination a:hover { background:var(--bg-light); border-color:var(--secondary); }
.sup-pagination strong.active { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }

/* ---------------------------------------------------------------------------------------------
   2. INPUT FORM STRUCTURE (DESKTOP DEFAULT)
--------------------------------------------------------------------------------------------- */
.sup-form-wrap { max-width:800px; margin:40px auto; padding:30px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.05); }
.sup-form-title { font-size:22px; font-weight:700; color:var(--primary); margin-bottom:24px; padding-bottom:12px; border-bottom:2px solid var(--primary); }
.form-group-row { display:flex; margin-bottom:20px; align-items:center; }
.form-group-row.vertical { flex-direction:column; align-items:flex-start; }
.form-label { width:160px; font-size:14px; font-weight:600; color:var(--primary); flex-shrink:0; }
.form-group-row.vertical .form-label { margin-bottom:8px; width:100%; }
.form-control-field { flex:1; width:100%; }

.form-input, .form-select, .form-textarea { width:100%; max-width:100% !important; padding:10px 14px; border:1px solid var(--border); border-radius:6px; font-size:14px; color:var(--primary); background-color:#fff; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(2,132,199,0.1); }
.form-textarea { height:160px; resize:vertical; }

.btn-area { display:flex; gap:10px; margin-top:30px; }
.btn-area.right { justify-content:flex-end; }
.btn-sup { display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; font-size:14px; font-weight:600; border-radius:6px; text-decoration:none; cursor:pointer; border:none; transition:background 0.2s; flex:1; max-width:100%; text-align:center; }
.btn-sup-primary { background:var(--primary); color:#fff; }
.btn-sup-primary:hover { background:#1e293b; }
.btn-sup-secondary { background:var(--bg-light); color:var(--secondary); border:1px solid var(--border); }
.btn-sup-secondary:hover { background:#e2e8f0; }

/* ---------------------------------------------------------------------------------------------
   3. MOBILE RESPONSIVE MEDIA QUERIES (TABLET & SMARTPHONE BREAKPOINT)
--------------------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* 구조적 마진 스케일 다운 */
  .sup-board-wrap { margin:20px auto; padding:0 12px; }
  .sup-board-top { flex-direction:column; align-items:flex-start; gap:6px; }
  
  /* 레거시 테이블 붕괴 -> 모바일 전용 양측 정렬 카드 피드로 재조립 */
  .sup-table, 
  .sup-table thead, 
  .sup-table tbody, 
  .sup-table th, 
  .sup-table td, 
  .sup-table tr { display:block; width:100%; }
  .sup-table thead { display:none; }
  
  .sup-table tr { border:1px solid var(--border); border-radius:8px; margin-bottom:16px; padding:12px 16px; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.02); }
  .sup-table tr:hover td { background-color:transparent; }
  
  .sup-table td { text-align:right !important; padding:8px 0; border:none; border-bottom:1px dashed #f1f5f9; font-size:13px; display:flex; justify-content:space-between; align-items:center; }
  .sup-table td:last-child { border-bottom:none; }
  
  /* 태그 내부 data-label 바인딩 동적 출력 */
  .sup-table td::before { content:attr(data-label); font-weight:700; color:var(--secondary); text-align:left; }
  
  /* 모바일 리스트 내 제목 가독성 보정 스키마 */
  .sup-table td.text-left-link { padding-left:0 !important; display:flex; flex-direction:row; justify-content:space-between; align-items:center; text-align:right !important; }
  .sup-table td.text-left-link a { max-width:70%; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1e293b; }
  
  /* 등록 폼 레이아웃 상하 정렬 스위칭 */
  .sup-form-wrap { margin:20px auto; padding:20px 16px; border-radius:8px; }
  .sup-form-title { font-size:18px; margin-bottom:18px; padding-bottom:10px; }
  .form-group-row { flex-direction:column; align-items:flex-start; margin-bottom:16px; }
  .form-label { width:100%; margin-bottom:6px; font-size:13px; }
  
  .btn-area { margin-top:24px; gap:8px; }
  .btn-sup { padding:12px 16px; font-size:13px; }
}

@media screen and (max-width: 480px) {
  /* 320px~480px 초소형 기기 최적화 가이드 */
  .sup-pagination a, .sup-pagination strong { width:32px; height:32px; font-size:12px; min-width:32px; }
  
  /* 사용성 증대를 위한 모바일 하단 버튼 인터페이스 스택 전환 (실행 버튼이 상단 노출) */
  .btn-area { flex-direction:column-reverse; }
  .btn-sup { width:100%; }
}