/* =========================================================================
   국방 무인이동체 사이버보안 검증작업 관리 프로그램 — style.css (정리본)
   - Tailwind CDN과 함께 사용 (빌드 없음)
   - 중복/충돌 제거, 명명 정비, 시각 톤 개선
   ------------------------------------------------------------------------- */

/* ========== 1) CSS 변수(테마) ============================================ */
:root{
  /* 포인트 & 상태 */
  --accent:      #2563eb;
  --accent-600:  #2563eb;
  --accent-700:  #1d4ed8;
  --accent-50:   #eff6ff;
  --ok-50:       #ecfdf5;
  --ok-700:      #047857;
  --bad-50:      #fef2f2;
  --bad-700:     #b91c1c;

  /* 텍스트/배경/테두리 */
  --ink:   #0f172a;
  --muted: #6b7280;
  --card:  #ffffff;
  --border:#e5e7eb;
}

/* ========== 2) 베이스 ==================================================== */
html, body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI Variable Display", "Segoe UI",
               Helvetica, "Apple Color Emoji", Arial, sans-serif,
               "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--ink);
  background: #fafafa; /* 페이지 톤 업 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== 모바일 제한 설정 ============================================== */
/* 화면 너비 고정 - 모바일에서도 PC 크기 유지 */
body {
  min-width: 1200px; /* 최소 너비 설정 */
  overflow-x: auto;  /* 가로 스크롤 허용 */
}

/* 인쇄 미리보기 페이지에서는 min-width 제한 제거 */
body.print-preview-page {
  min-width: auto;
  overflow-x: visible;
}

/* Tailwind 반응형 클래스 무력화 - 모든 화면 크기에서 고정 레이아웃 유지 */
/* sm, md, lg, xl 브레이크포인트 무시하고 항상 최대 크기로 고정 */
@media (max-width: 640px) {
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:flex-col { flex-direction: row !important; }
  .sm\:grid-cols-1 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .sm\:col-span-1 { grid-column: span 1 / span 1 !important; }
  .sm\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .sm\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .sm\:col-span-4 { grid-column: span 4 / span 4 !important; }
  .sm\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .sm\:col-span-12 { grid-column: span 12 / span 12 !important; }
  .sm\:text-sm { font-size: 1rem !important; }
  .sm\:text-lg { font-size: 1.125rem !important; }
  .sm\:text-xl { font-size: 1.25rem !important; }
  .sm\:text-2xl { font-size: 1.5rem !important; }
  .sm\:p-2 { padding: 1rem !important; }
  .sm\:p-4 { padding: 1.5rem !important; }
  .sm\:p-6 { padding: 2rem !important; }
  .sm\:px-2 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .sm\:px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .sm\:px-6 { padding-left: 2rem !important; padding-right: 2rem !important; }
  .sm\:py-2 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .sm\:py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .sm\:py-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .sm\:m-2 { margin: 1rem !important; }
  .sm\:m-4 { margin: 1.5rem !important; }
  .sm\:mx-auto { margin-left: auto !important; margin-right: auto !important; }
  .sm\:my-auto { margin-top: auto !important; margin-bottom: auto !important; }
  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem !important; }
  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem !important; }
  .sm\:space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; }
  .sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
  .sm\:gap-2 { gap: 0.5rem !important; }
  .sm\:gap-4 { gap: 1rem !important; }
  .sm\:gap-6 { gap: 1.5rem !important; }
  .sm\:w-full { width: 100% !important; }
  .sm\:w-1\/2 { width: 50% !important; }
  .sm\:w-1\/3 { width: 33.333333% !important; }
  .sm\:w-2\/3 { width: 66.666667% !important; }
  .sm\:w-1\/4 { width: 25% !important; }
  .sm\:w-3\/4 { width: 75% !important; }
  .sm\:max-w-sm { max-width: 24rem !important; }
  .sm\:max-w-md { max-width: 28rem !important; }
  .sm\:max-w-lg { max-width: 32rem !important; }
  .sm\:max-w-xl { max-width: 36rem !important; }
  .sm\:max-w-2xl { max-width: 42rem !important; }
  .sm\:max-w-4xl { max-width: 56rem !important; }
  .sm\:max-w-6xl { max-width: 72rem !important; }
  .sm\:hidden { display: block !important; }
  .sm\:block { display: block !important; }
  .sm\:flex { display: flex !important; }
  .sm\:grid { display: grid !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:items-start { align-items: flex-start !important; }
  .sm\:items-end { align-items: flex-end !important; }
  .sm\:justify-center { justify-content: center !important; }
  .sm\:justify-between { justify-content: space-between !important; }
  .sm\:justify-start { justify-content: flex-start !important; }
  .sm\:justify-end { justify-content: flex-end !important; }
}

@media (max-width: 768px) {
  .md\:flex-row { flex-direction: row !important; }
  .md\:flex-col { flex-direction: row !important; }
  .md\:grid-cols-1 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .md\:col-span-1 { grid-column: span 1 / span 1 !important; }
  .md\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .md\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .md\:col-span-4 { grid-column: span 4 / span 4 !important; }
  .md\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .md\:col-span-12 { grid-column: span 12 / span 12 !important; }
  .md\:text-sm { font-size: 1rem !important; }
  .md\:text-lg { font-size: 1.125rem !important; }
  .md\:text-xl { font-size: 1.25rem !important; }
  .md\:text-2xl { font-size: 1.5rem !important; }
  .md\:p-2 { padding: 1rem !important; }
  .md\:p-4 { padding: 1.5rem !important; }
  .md\:p-6 { padding: 2rem !important; }
  .md\:px-2 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .md\:px-4 { padding-left: 1.5rem !important; padding-right: 2rem !important; }
  .md\:px-6 { padding-left: 2rem !important; padding-right: 2rem !important; }
  .md\:py-2 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .md\:py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .md\:py-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .md\:m-2 { margin: 1rem !important; }
  .md\:m-4 { margin: 1.5rem !important; }
  .md\:mx-auto { margin-left: auto !important; margin-right: auto !important; }
  .md\:my-auto { margin-top: auto !important; margin-bottom: auto !important; }
  .md\:space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem !important; }
  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem !important; }
  .md\:space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; }
  .md\:space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
  .md\:gap-2 { gap: 0.5rem !important; }
  .md\:gap-4 { gap: 1rem !important; }
  .md\:gap-6 { gap: 1.5rem !important; }
  .md\:w-full { width: 100% !important; }
  .md\:w-1\/2 { width: 50% !important; }
  .md\:w-1\/3 { width: 33.333333% !important; }
  .md\:w-2\/3 { width: 66.666667% !important; }
  .md\:w-1\/4 { width: 25% !important; }
  .md\:w-3\/4 { width: 75% !important; }
  .md\:max-w-sm { max-width: 24rem !important; }
  .md\:max-w-md { max-width: 28rem !important; }
  .md\:max-w-lg { max-width: 32rem !important; }
  .md\:max-w-xl { max-width: 36rem !important; }
  .md\:max-w-2xl { max-width: 42rem !important; }
  .md\:max-w-4xl { max-width: 56rem !important; }
  .md\:max-w-6xl { max-width: 72rem !important; }
  .md\:hidden { display: block !important; }
  .md\:block { display: block !important; }
  .md\:flex { display: flex !important; }
  .md\:grid { display: grid !important; }
  .md\:items-center { align-items: center !important; }
  .md\:items-start { align-items: flex-start !important; }
  .md\:items-end { align-items: flex-end !important; }
  .md\:justify-center { justify-content: center !important; }
  .md\:justify-between { justify-content: space-between !important; }
  .md\:justify-start { justify-content: flex-start !important; }
  .md\:justify-end { justify-content: flex-end !important; }
}

@media (max-width: 1024px) {
  .lg\:flex-row { flex-direction: row !important; }
  .lg\:flex-col { flex-direction: row !important; }
  .lg\:grid-cols-1 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .lg\:col-span-1 { grid-column: span 1 / span 1 !important; }
  .lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .lg\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .lg\:col-span-4 { grid-column: span 4 / span 4 !important; }
  .lg\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .lg\:col-span-12 { grid-column: span 12 / span 12 !important; }
  .lg\:text-sm { font-size: 1rem !important; }
  .lg\:text-lg { font-size: 1.125rem !important; }
  .lg\:text-xl { font-size: 1.25rem !important; }
  .lg\:text-2xl { font-size: 1.5rem !important; }
  .lg\:p-2 { padding: 1rem !important; }
  .lg\:p-4 { padding: 1.5rem !important; }
  .lg\:p-6 { padding: 2rem !important; }
  .lg\:px-2 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .lg\:px-4 { padding-left: 1.5rem !important; padding-right: 2rem !important; }
  .lg\:px-6 { padding-left: 2rem !important; padding-right: 2rem !important; }
  .lg\:py-2 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .lg\:py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .lg\:py-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .lg\:m-2 { margin: 1rem !important; }
  .lg\:m-4 { margin: 1.5rem !important; }
  .lg\:mx-auto { margin-left: auto !important; margin-right: auto !important; }
  .lg\:my-auto { margin-top: auto !important; margin-bottom: auto !important; }
  .lg\:space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem !important; }
  .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem !important; }
  .lg\:space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; }
  .lg\:space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
  .lg\:gap-2 { gap: 0.5rem !important; }
  .lg\:gap-4 { gap: 1rem !important; }
  .lg\:gap-6 { gap: 1.5rem !important; }
  .lg\:w-full { width: 100% !important; }
  .lg\:w-1\/2 { width: 50% !important; }
  .lg\:w-1\/3 { width: 33.333333% !important; }
  .lg\:w-2\/3 { width: 66.666667% !important; }
  .lg\:w-1\/4 { width: 25% !important; }
  .lg\:w-3\/4 { width: 75% !important; }
  .lg\:max-w-sm { max-width: 24rem !important; }
  .lg\:max-w-md { max-width: 28rem !important; }
  .lg\:max-w-lg { max-width: 32rem !important; }
  .lg\:max-w-xl { max-width: 36rem !important; }
  .lg\:max-w-2xl { max-width: 42rem !important; }
  .lg\:max-w-4xl { max-width: 56rem !important; }
  .lg\:max-w-6xl { max-width: 72rem !important; }
  .lg\:hidden { display: block !important; }
  .lg\:block { display: block !important; }
  .lg\:flex { display: flex !important; }
  .lg\:grid { display: grid !important; }
  .lg\:items-center { align-items: center !important; }
  .lg\:items-start { align-items: flex-start !important; }
  .lg\:items-end { align-items: flex-end !important; }
  .lg\:justify-center { justify-content: center !important; }
  .lg\:justify-between { justify-content: space-between !important; }
  .lg\:justify-start { justify-content: flex-start !important; }
  .lg\:justify-end { justify-content: flex-end !important; }
}

@media (max-width: 1280px) {
  .xl\:flex-row { flex-direction: row !important; }
  .xl\:flex-col { flex-direction: row !important; }
  .xl\:grid-cols-1 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .xl\:col-span-1 { grid-column: span 1 / span 1 !important; }
  .xl\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .xl\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .xl\:col-span-4 { grid-column: span 4 / span 4 !important; }
  .xl\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .xl\:col-span-12 { grid-column: span 12 / span 12 !important; }
  .xl\:text-sm { font-size: 1rem !important; }
  .xl\:text-lg { font-size: 1.125rem !important; }
  .xl\:text-xl { font-size: 1.25rem !important; }
  .xl\:text-2xl { font-size: 1.5rem !important; }
  .xl\:p-2 { padding: 1rem !important; }
  .xl\:p-4 { padding: 1.5rem !important; }
  .xl\:p-6 { padding: 2rem !important; }
  .xl\:px-2 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .xl\:px-4 { padding-left: 1.5rem !important; padding-right: 2rem !important; }
  .xl\:px-6 { padding-left: 2rem !important; padding-right: 2rem !important; }
  .xl\:py-2 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .xl\:py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .xl\:py-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .xl\:m-2 { margin: 1rem !important; }
  .xl\:m-4 { margin: 1.5rem !important; }
  .xl\:mx-auto { margin-left: auto !important; margin-right: auto !important; }
  .xl\:my-auto { margin-top: auto !important; margin-bottom: auto !important; }
  .xl\:space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem !important; }
  .xl\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem !important; }
  .xl\:space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; }
  .xl\:space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
  .xl\:gap-2 { gap: 0.5rem !important; }
  .xl\:gap-4 { gap: 1rem !important; }
  .xl\:gap-6 { gap: 1.5rem !important; }
  .xl\:w-full { width: 100% !important; }
  .xl\:w-1\/2 { width: 50% !important; }
  .xl\:w-1\/3 { width: 33.333333% !important; }
  .xl\:w-2\/3 { width: 66.666667% !important; }
  .xl\:w-1\/4 { width: 25% !important; }
  .xl\:w-3\/4 { width: 75% !important; }
  .xl\:max-w-sm { max-width: 24rem !important; }
  .xl\:max-w-md { max-width: 28rem !important; }
  .xl\:max-w-lg { max-width: 32rem !important; }
  .xl\:max-w-xl { max-width: 36rem !important; }
  .xl\:max-w-2xl { max-width: 42rem !important; }
  .xl\:max-w-4xl { max-width: 56rem !important; }
  .xl\:max-w-6xl { max-width: 72rem !important; }
  .xl\:hidden { display: block !important; }
  .xl\:block { display: block !important; }
  .xl\:flex { display: flex !important; }
  .xl\:grid { display: grid !important; }
  .xl\:items-center { align-items: center !important; }
  .xl\:items-start { align-items: flex-start !important; }
  .xl\:items-end { align-items: flex-end !important; }
  .xl\:justify-center { justify-content: center !important; }
  .xl\:justify-between { justify-content: space-between !important; }
  .xl\:justify-start { justify-content: flex-start !important; }
  .xl\:justify-end { justify-content: flex-end !important; }
}

/* 모바일 감지 및 안내 화면 */
.mobile-warning {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 프로그램과 동일한 배경 설정 */
  background-image: url('bg_base.png');
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
  z-index: 9999;
  color: #374151; /* 어두운 텍스트 */
  text-align: center;
  padding: 1rem; /* 좌우 패딩 축소 */
  box-sizing: border-box;
}

/* 모바일 안내 화면에도 좌우 배경 이미지 추가 */
.mobile-warning::before,
.mobile-warning::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(22vw, 360px);
  pointer-events: none;
  z-index: 10000;
  background-repeat: repeat-y;
  background-size: auto;
  background-position: center top;
  background-attachment: fixed;
  opacity: 1;
}

/* 왼쪽 사이드 배경 */
.mobile-warning::before {
  left: 0;
  background-image: url('bg_left.png');
  background-position: left top;
}

/* 오른쪽 사이드 배경 */
.mobile-warning::after {
  right: 0;
  background-image: url('bg_right.png');
  background-position: right top;
}

.mobile-warning-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px; /* 박스 너비 증가 */
  width: 90%; /* 화면 너비의 90% 사용 */
  background: rgba(255, 255, 255, 0.9); /* 반투명 흰색 배경 */
  border-radius: 16px; /* 둥근 모서리 */
  padding: 3rem 2rem; /* 내부 패딩 증가 */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 미세한 테두리 */
  z-index: 10001; /* 좌우 배경보다 위에 표시 */
}

.mobile-warning p {
  font-size: 1.125rem; /* 텍스트 크기 증가 */
  line-height: 1.6;
  margin-bottom: 1rem; /* 하단 마진 추가 */
  color: #4b5563; /* 중간 톤 색상 */
  text-align: center;
}

.mobile-warning-bold {
  font-size: 1.125rem;
  font-weight: 700; /* 굵은 글씨 */
  line-height: 1.6;
  margin-bottom: 1rem; /* 하단 마진 */
  color: #1f2937; /* 더 진한 색상 */
  text-align: center;
}

.mobile-warning-icon {
  margin-bottom: 2rem; /* 로고 하단 마진 증가 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-warning-icon .logo {
  width: auto;
  height: 36px; /* 로고 높이 36px로 설정 */
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); /* 로고 그림자 */
}

.mobile-warning-footer {
  margin-top: 3rem; /* 상단 마진 증가 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-warning-footer .footer-logo {
  width: auto;
  height: 43px; /* footer 로고 높이 43px로 설정 */
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); /* footer 로고 그림자 */
}

/* 모바일에서만 경고 화면 표시 */
@media (max-width: 768px) {
  .mobile-warning {
    display: block;
  }
  
  /* 모바일에서 본문 숨김 */
  body > *:not(.mobile-warning) {
    display: none;
  }
  
  /* 인쇄 미리보기 페이지에서는 모바일 모드 예외 처리 */
  body.print-preview-page .mobile-warning {
    display: none !important;
  }
  
  body.print-preview-page > *:not(.mobile-warning) {
    display: block !important;
  }
  
  body.print-preview-page main {
    display: block !important;
  }
}

/* 유틸 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* 인터랙션 기본 전환 (무분별한 * 셀렉터 대신 핵심 요소만) */
.button, .chip, .ui-card, .table-clean tr, a, button, details>summary {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .02s ease;
}

/* ===================== 페이지 배경 (전체) ===================== */
/* bg_base.png를 반복 무늬로 사용(투명 PNG 가정) */
html, body {
  background-image: url('bg_base.png');
  background-repeat: repeat;            /* 패턴이면 repeat, 사진이면 no-repeat로 바꿔도 됨 */
  background-attachment: fixed;         /* 패럴랙스 느낌 없이 고정 */
  background-size: auto;                /* 패턴이면 auto, 사진이면 cover/contain 고려 */
}

/* ===================== 좌/우 장식 이미지 (세로 반복 버전) ===================== */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(22vw, 360px);
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat-y;           /* ← 세로로만 반복 */
  background-size: auto;                 /* ← 원본 크기 유지 */
  background-position: center top;       /* ← 세로 반복의 기준점 */
  background-attachment: fixed;
  opacity: 1;
}

/* 왼쪽 사이드 배경 */
body::before {
  left: 0;
  background-image: url('bg_left.png');
  background-position: left top;         /* ← 좌측 정렬 */
}

/* 오른쪽 사이드 배경 */
body::after {
  right: 0;
  background-image: url('bg_right.png');
  background-position: right top;        /* ← 우측 정렬 */
}

/* 간격 조정: 이미지 사이 여백 추가 (선택) */
body::before,
body::after {
  background-origin: content-box;
  background-clip: content-box;
  padding-top: 40px;                     /* ↑ 이미지 사이 여백 높이 */
  background-repeat: repeat-y;
}

/* 좁은 화면에서도 배경 이미지 유지 (PC 전용이므로) */
/* @media (max-width: 1024px) {
  body::before, body::after { display: none; }
} */

/* ===================== 메인 콘텐츠 반투명 카드 ===================== */
/* 모든 페이지의 <main>에 반투명 화이트 박스 적용 */
main {
  position: relative;
  z-index: 1;                           /* 좌우 장식 위로 */
  background: rgba(255, 255, 255, 0.85);/* 흰색 + 투명도 15% (= 불투명도 85%) */
  /* 만약 "불투명도 15%"를 원하셨다면 0.15로 조절하세요. */
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(2,6,23,.06);
}

/* 메인 여백을 살짝 키워 장식과 겹치지 않게 */
@media (min-width: 1025px) {
  main {
    margin-left: min(24vw, 380px);
    margin-right: min(24vw, 380px);
  }
}

/* 좁은 화면에선 기본 레이아웃 유지 */
@media (max-width: 1024px) {
  main {
    margin-left: auto;
    margin-right: auto;
  }
}

.logo{
  width: auto;
  height: 36px;
  display: block;
}

/* ========== 3) 배지/모노스페이스 ======================================== */
.code-badge{
  font-family: Consolas, "Courier New", monospace;
  font-weight: 600;
  letter-spacing: .4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 0 0 auto;
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  transition: all 0.15s ease;
}
.code-badge:hover {
  background: #bfdbfe;
  border-color: #60a5fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}

/* 코드/JSON 공통 폰트 */
.json-pre, pre.code, code, kbd, samp {
  font-family: Consolas, "SFMono-Regular", Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.65;
}

/* ========== 4) 버튼 컴포넌트 ============================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:.75rem; padding:.625rem .9rem; font-weight:600;
  border:1px solid var(--border); background:#fff; color:#111827;
}
.btn:hover{ background:#f8fafc; }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* 변형 */
.btn-primary{ background:var(--accent-600); color:#fff; border-color:transparent; }
.btn-primary:hover{ filter:brightness(.98); }
.btn-ghost{ background:transparent; border-color:transparent; color:#111827; }
.btn-outline{ background:#fff; color:var(--accent-600); border-color:var(--accent-600); box-shadow: inset 0 0 0 1px var(--accent-600); }
.btn-danger{ background:#fff; color:#ef4444; border-color:#ef4444; box-shadow: inset 0 0 0 1px #ef4444; }

/* XS 변형 */
.btn.btn-xs { font-size:11px; padding:2px 8px; border:1px solid #d4d8e0; border-radius:6px; }
.btn.btn-xs:hover { background:#f4f6f9; }
.btn[aria-pressed="true"] { background:#eef2f7; }

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.625rem .95rem;
  border-radius:.75rem;
  font-weight:600;
  font-size:.9375rem;
  border:1px solid var(--border);
  background:#fff;
  color:#111827;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .02s ease;
}
.button:hover{ background:#f8fafc; }
.button:active{ transform: translateY(1px); }
.button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.button:disabled,
.button[disabled]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

.button.is-full{ width:100%; }
.button.is-sm{ padding:.5rem .75rem; font-size:.8125rem; border-radius:.65rem; }
.button.is-xs{ padding:.375rem .5rem; font-size:.75rem; border-radius:.5rem; }
.button.is-pill{ border-radius:9999px; }
.button.is-icon{
  padding:.45rem;
  border-radius:.65rem;
  gap:.25rem;
}
.button.is-icon i,
.button.is-icon svg{
  pointer-events:none;
}
 
.button.is-primary{
  background:var(--accent-600);
  color:#fff;
  border-color:transparent;
}
.button.is-primary:hover{ filter:brightness(.98); }
.button.is-primary:focus-visible{ box-shadow:0 0 0 3px var(--accent-50); }

.button.is-secondary{
  background:#f3f4f6;
  color:#374151;
  border-color:#d1d5db;
}
.button.is-secondary:hover{ background:#e5e7eb; }
.button.is-secondary:focus-visible{ box-shadow:0 0 0 3px rgba(148,163,184,0.35); }

.button.is-success{
  background:#16a34a;
  color:#fff;
  border-color:#15803d;
}
.button.is-success:hover{ background:#15803d; }
.button.is-success:focus-visible{ box-shadow:0 0 0 3px rgba(34,197,94,0.35); }

.button.is-danger{
  background:#ef4444;
  color:#fff;
  border-color:#dc2626;
}
.button.is-danger:hover{ background:#dc2626; }
.button.is-danger:focus-visible{ box-shadow:0 0 0 3px rgba(248,113,113,0.4); }

.button.is-ghost{
  background:transparent;
  border-color:transparent;
  color:#111827;
}
.button.is-ghost:hover{ background:#f8fafc; }

.button.is-outline-primary{
  background:#fff;
  color:var(--accent-600);
  border-color:var(--accent-600);
  box-shadow:inset 0 0 0 1px var(--accent-600);
}
.button.is-outline-primary:hover{ background:var(--accent-50); }
.button.is-outline-primary:focus-visible{ box-shadow:0 0 0 3px var(--accent-50); }

.button.is-outline-neutral{
  background:#fff;
  color:#374151;
  border-color:#d1d5db;
  box-shadow:inset 0 0 0 1px #d1d5db;
}
.button.is-outline-neutral:hover{ background:#f8fafc; }
.button.is-outline-neutral:focus-visible{ box-shadow:0 0 0 3px rgba(148,163,184,0.35); }

.role-select{
  appearance:none;
  border:1px solid #d1d5db;
  border-radius:9999px;
  background:#f3f4f6;
  color:#111827;
  padding:.3rem .85rem;
  padding-right:2.2rem;
  line-height:1.2;
  font-weight:600;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23637492'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right .6rem center;
  background-size:.75rem;
}
.role-select:hover{
  background:#e5e7eb;
  border-color:#cbd5f5;
}
.role-select:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.2);
  background:#dbeafe;
}
.role-select.is-disabled{
  background:#f5f6f8;
  color:#9ca3af;
  cursor:not-allowed;
}

.button.is-outline-warning{
  background:#fff;
  color:#b45309;
  border-color:#facc15;
  box-shadow:inset 0 0 0 1px #facc15;
}
.button.is-outline-warning:hover{ background:#fef3c7; }
.button.is-outline-warning:focus-visible{ box-shadow:0 0 0 3px rgba(250,204,21,0.35); }

.button.is-soft-neutral{
  background:#f3f4f6;
  color:#374151;
  border-color:#e5e7eb;
}
.button.is-soft-neutral:hover{ background:#e5e7eb; }
.button.is-soft-neutral:focus-visible{ box-shadow:0 0 0 3px rgba(148,163,184,0.35); }

.button.is-soft-warning{
  background:#fef3c7;
  color:#b45309;
  border-color:#fde68a;
}
.button.is-soft-warning:hover{ background:#fde68a; }
.button.is-soft-warning:focus-visible{ box-shadow:0 0 0 3px rgba(251,191,36,0.35); }

.button.is-soft-danger{
  background:#fee2e2;
  color:#b91c1c;
  border-color:#fecaca;
}
.button.is-soft-danger:hover{ background:#fecaca; }
.button.is-soft-danger:focus-visible{ box-shadow:0 0 0 3px rgba(248,113,113,0.35); }

.button.is-soft-info{
  background:#dbeafe;
  color:#1d4ed8;
  border-color:#bfdbfe;
}
.button.is-soft-info:hover{ background:#bfdbfe; }
.button.is-soft-info:focus-visible{ box-shadow:0 0 0 3px rgba(191,219,254,0.5); }

.button.is-link{
  background:transparent;
  border-color:transparent;
  color:var(--accent-600);
  padding:0;
}
.button.is-link:hover{
  text-decoration:underline;
  background:transparent;
}

/* Tailwind 기본 '검은 버튼' 강제 환치 → 포인트 컬러 */
.bg-neutral-900.text-white,
[class~="bg-neutral-900"][class~="text-white"],
.bg-black.text-white,
[class~="bg-black"][class~="text-white"]{
  background-color: var(--accent-600) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.bg-neutral-900.text-white:hover,
.bg-black.text-white:hover{ filter: brightness(0.98); }
.bg-neutral-900.text-white:active,
.bg-black.text-white:active{ transform: translateY(0.5px); }
.bg-neutral-900.text-white:focus-visible,
.bg-black.text-white:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--accent-50);
}

/* 삭제/위험 버튼(Tailwind 계열) */
.bg-red-600.text-white:hover { background-color: #dc2626 !important; }
.bg-red-600.text-white:focus-visible { box-shadow: 0 0 0 3px #fee2e2; }

/* ========== 5) 칩(필터 태그) ============================================== */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .7rem; border-radius:9999px;
  border:1px solid var(--border); background:#f4f4f5; color:#374151; font-weight:600;
}
.chip:hover{ background:#eeeeef; }
.chip.is-active{
  background:#eef2ff; color:var(--accent-600); border-color:#c7d2fe;
}

/* 레거시 filter-btn 호환(선택) */
.filter-btn {
  background: #fff;
  border-color: var(--border);
  color: #374151;
}
.filter-btn:hover { background: #f8fafc; border-color: #93c5fd; }
.filter-btn.active {
  background: var(--accent-600);
  border-color: var(--accent-700);
  color: #fff;
  font-weight: 600;
}

/* 검증 결과 관리 필터 버튼 */
.filter-btn-results {
  background: #fff;
  border-color: var(--border);
  color: #374151;
}
.filter-btn-results:hover { background: #f8fafc; border-color: #93c5fd; }
.filter-btn-results.active {
  background: var(--accent-600);
  border-color: var(--accent-700);
  color: #fff;
  font-weight: 600;
}

/* ========== 6) 카드/테이블/탭 ============================================ */
.ui-card{
  background:#fff; border:1px solid var(--border);
  border-radius:1rem; box-shadow:0 2px 20px rgba(0,0,0,.04);
}
.card, .border.rounded.bg-white, .border.rounded.p-3.bg-white {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.card:hover, .border.rounded.bg-white:hover, .border.rounded.p-3.bg-white:hover {
  box-shadow: 0 6px 20px rgba(2,6,23,.06);
  transform: translateY(-1px);
}
.card:focus-within, .border.rounded.bg-white:focus-within, .border.rounded.p-3.bg-white:focus-within {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--accent-50);
}

/* 표 */
.table-clean{ border:1px solid var(--border); border-radius:.75rem; overflow:hidden; }
.table-clean thead th{ background:#f8fafc; color:#334155; font-weight:700; }
.table-clean tr + tr td{ border-top:1px solid var(--border); }
table.w-full tbody tr:hover { background: #f8fafc; }

/* 탭/링크 */
a, .tab-link { color: inherit; }
.tab-link { border-bottom: 2px solid transparent; }
.tab-link:hover { color: var(--accent-700); border-color: var(--accent-50); }
.tab-link.active, .tab-link[aria-current="page"] {
  color: var(--accent-700);
  border-color: var(--accent-600);
  font-weight: 600;
}

/* 사이드바 현재 위치 강조 */
aside nav a:hover { background: #f8fafc; }
aside nav a.bg-neutral-900.text-white { background: var(--accent-600) !important; }
aside nav a.bg-neutral-900.text-white:hover { background: var(--accent-700) !important; }

/* ========== 7) JSON 카드/뷰(다크) ======================================== */
.json-card {
  border: 1px solid #e6e9ef;
  background: #fbfcfe;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.06);
  overflow: hidden;
}
.json-card__hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  border-bottom: 1px solid #eef2f7;
}
.json-card__title { display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:#111827; }
.json-badge { display:inline-block; padding:2px 6px; border-radius:6px; background:#0ea5e9; color:#fff; font-weight:700; font-size:11px; letter-spacing:.4px; }
.json-toolbar { display:inline-flex; gap:6px; }

/* 컨테이너가 캔버스가 되도록 */
.json-card__body {
  max-height: 420px;
  overflow: auto;
  background: #0b1020;     /* 다크 코드 캔버스 */
  padding: 14px 16px;
  border-top: 1px solid #0f1222;
}

/* pre는 내용만 표시 (투명) */
.json-pre {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #e6edf3;
  white-space: pre;
  tab-size: 2;
}
.json-pre[data-wrap="true"] {
  white-space: pre-wrap;
  word-break: break-word;
}

/* 하이라이트 색 */
.json-pretty .j-key    { color:#79c0ff; }
.json-pretty .j-string { color:#a5d6c5; }
.json-pretty .j-number { color:#f2cc60; }
.json-pretty .j-bool   { color:#d2a8ff; font-weight:600; }
.json-pretty .j-null   { color:#9ca3af; font-style:italic; }
.json-pretty .j-punct  { color:#cdd9e5; }

/* 줄번호 */
.line-numbers { counter-reset: ln; }
.line-numbers .ln { display:block; position:relative; padding-left:44px; }
.line-numbers .ln::before {
  counter-increment: ln; content: counter(ln);
  position:absolute; left:10px; width:28px; text-align:right;
  color:#94a3b8; opacity:.75;
}

/* ========== 8) 접근성 ===================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--accent-50), 0 0 0 1px var(--accent-600);
  border-radius: .375rem;
}

/* ========== 9) 다운로드 카드/토글 몰입감 =================================== */
#tab-downloads .border.rounded.p-3.bg-white:hover {
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary:hover { color: var(--accent-700); }
details > summary::-webkit-details-marker { display: none; }

/* ===================== 푸터 스타일 ===================== */
/* Footer: 좌 로고 · 우 텍스트 */
/* 공통 컨테이너 폭(헤더/메인/푸터 통일) */
.shell {
  max-width: 72rem;           /* ≈ Tailwind max-w-6xl */
  margin: 0 auto;
  padding: 0 1rem;
}

/* Footer: 배경/라인 제거, 그리드 정렬 */
.site-footer{
  position: relative;
  z-index: 2;
  background: transparent;    /* 반투명 배경 제거 */
  border-top: none;           /* 라인 제거 */
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}
.site-footer .footer-inner{
  display: grid;
  grid-template-columns: auto 1fr; /* 좌: 로고, 우: 텍스트 */
  align-items: center;
  gap: 1rem 1.25rem;
}
.footer-logo{
  width: auto;               /* 542x86의 50% */
  height: 43px;
  display: block;
}
.footer-text{
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.45;
  text-align: right;
}

/* 모바일에선 수직 스택 */
@media (max-width: 640px){
  .site-footer .footer-inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-text{ text-align: center; }
}

/* ===================== 중첩 main 전용(관리 화면) ===================== */
/* 바깥 <main>은 그대로 두고, 그 안쪽 <main>만 2열 레이아웃 적용 */
/* ===================== 1) nested main(= main 안의 main)만 카드화/패딩 ===================== */
main main{
  margin: 0;
}

/* 버튼/라벨 세로깨짐 방지 + 고정폭(w-*) 무력화(안쪽만) */
main main .button,
main main button,
main main label{
  white-space:nowrap;
  word-break:keep-all;
}
main main .button{ width:auto !important; }  /* w-10 등 강제폭 무시 */

/* 테이블 가독성 & 가로 스크롤 허용(좁을 때 깨짐 방지) */
main main .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
main main table th,
main main table td{ padding:.5rem .75rem; vertical-align:middle; }
main main select, 
main main input[type="file"]{ max-width:100%; }

/* (선택) 좌측 사이드 같은 보조영역 최소폭만 확보 */
main main aside{ min-width:240px; }
@media (max-width:1024px){ main main aside{ min-width:0; } }

/* ========== 검증 포털 legacy layout bridge =================================== */
.container-xxl {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.container-p-y {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.flex-grow-1 {
  flex-grow: 1;
}

.dt-button-tailwind {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  background-color: #2563eb;
  border: none;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.dt-button-tailwind:hover,
.dt-button-tailwind:focus {
  background-color: #1d4ed8;
  box-shadow: 0 12px 32px rgba(29, 78, 216, 0.28);
  color: #ffffff;
}

.dt-button-tailwind:active {
  background-color: #1e40af;
  box-shadow: 0 8px 20px rgba(30, 64, 175, 0.25);
}

@media (min-width: 1024px) {
  [data-detail-root] [data-field="product_payload"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-admin-detail-root] [data-field="product_payload"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===================== 출력(인쇄) 전용 스타일 ===================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  html,
  body {
    font-size: 0.9rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body::before,
  body::after {
    display: block !important;
  }

  body > .mobile-warning,
  body > .mobile-warning::before,
  body > .mobile-warning::after,
  body > .min-h-screen > header,
  body > .min-h-screen > footer,
  body > .min-h-screen > .site-footer,
  #toast-container,
  #modal-overlay {
    display: none !important;
  }

  main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    border: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.92) !important;
  }

  main .max-w-6xl {
    max-width: 170mm !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 8mm !important;
  }

  .md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  aside {
    display: none !important;
  }

  .md\:col-span-3 {
    grid-column: span 1 / span 1 !important;
  }

  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.25rem !important;
  }

  [data-detail-root],
  [data-admin-detail-root] {
    font-size: 0.9rem;
  }

  [data-detail-root] h1,
  [data-admin-detail-root] h1 {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  [data-detail-root] h2,
  [data-admin-detail-root] h2 {
    font-size: 1.125rem !important;
  }

  [data-detail-root] h3,
  [data-admin-detail-root] h3 {
    font-size: 1rem !important;
  }

  [data-detail-root] h1 + p,
  [data-admin-detail-root] h1 + p {
    display: none !important;
  }

  [data-detail-root] .px-6,
  [data-admin-detail-root] .px-6 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  [data-detail-root] .py-6,
  [data-admin-detail-root] .py-6 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  [data-detail-root] .py-5,
  [data-admin-detail-root] .py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  [data-detail-root] .px-4,
  [data-admin-detail-root] .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  [data-detail-root] .py-4,
  [data-admin-detail-root] .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  [data-detail-root] section,
  [data-admin-detail-root] section {
    border-radius: 12px !important;
  }

  [data-detail-root] [data-field="product_payload"],
  [data-admin-detail-root] [data-field="product_payload"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-admin-detail-root] [data-field="product_payload"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  [data-detail-root] [data-print-hidden="true"],
  [data-admin-detail-root] [data-print-hidden="true"] {
    display: none !important;
  }
}