/* General Styles */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Header height adjustment */
}

/* Typography */
p {
  text-indent: 0;
  line-height: 1.8;
}

/* Figure (Table/Image) Caption and Source Styling */
figure figcaption.tit {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px; /* Space between title and table/image */
}

figure figcaption.tit em { /* For "표 1", "그림 1" part */
  font-style: normal;
  display: inline-block;
  background-color: #2D4A6B;
  color: #ffffff;
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  margin-right: 8px;
  border-radius: 6px;
  vertical-align: middle;
  line-height: 1.6;
}

/* ─── 반응형 테이블 ───────────────────────────────────── */
figure .table-responsive {
  margin-top: 0;
  margin-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
}

/* ─── 테이블 기본 셀 ──────────────────────────────────── */
.axil-post-details table th,
.axil-post-details table td {
  font-size: 14px !important;
  padding: 10px 14px !important;
  line-height: 1.6 !important;
  color: #2D3A46 !important;
  vertical-align: middle !important;
}

/* ─── 테이블 헤더 음영 효과 ───────────────────────────── */
.axil-post-details table thead th {
  background-color: #4A6D9A !important;
  color: #F0F2F5 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  border-color: #3D5C7E !important;
}

/* ─── 짝수 행 배경 (가독성) ───────────────────────────── */
.axil-post-details table tbody tr:nth-child(even) td {
  background-color: #F0F2F5 !important;
}

/* ─── 호버 효과 ────────────────────────────────────────── */
.axil-post-details table tbody tr:hover td {
  background-color: #E4E8EE !important;
}

figure .txt { /* For source text below tables/images: "출처", "자료" */
  font-size: 0.75em; /* Smallest text on the page */
  color: var(--sg-navy);
  text-align: center; /* Centered source text */
  margin-top: 10px;
  display: block; /* Ensures it takes its own line if not already */
}

/* ─────────────────────────────────────────────────────────
   Mobile-specific styles (max-width: 767px)
   figure 캡션 / con_img 간격 모두 이 @media 안에 포함
───────────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {
  figure figcaption.tit {
    margin-bottom: 20px !important; /* Increased space between title and image on mobile */
    padding: 15px 10px !important; /* Add padding for better visual breathing room */
    line-height: 1.6; /* Better line spacing */
    text-align: center !important; /* Ensure center alignment */
    display: block !important;
  }

  /* Make em tag display on new line in mobile - match PC style */
  figure figcaption.tit em,
  .con_img .tit em {
    display: block !important; /* Block to force new line and center alignment */
    font-style: normal !important;
    height: 36px !important; /* Same as PC */
    line-height: 36px !important; /* Same as PC */
    padding: 0 12px !important; /* Same as PC */
    background-color: var(--sg-navy) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    margin: 0 auto 12px auto !important; /* Center horizontally with bottom margin */
    width: fit-content !important; /* Only as wide as content */
    width: -moz-fit-content !important; /* Firefox support */
  }

  figure .txt {
    margin-top: 15px !important; /* Increased space between image and source text on mobile */
    padding-top: 5px !important; /* Additional padding for better visual separation */
    line-height: 1.5;
  }

  /* Ensure adequate spacing for con_img wrapper on mobile */
  .con_img {
    padding: 25px 15px !important; /* Adjusted padding for mobile */
    margin-bottom: 20px;
  }

  .con_img .img {
    margin-top: 20px !important; /* More space between caption and image */
    margin-bottom: 10px !important; /* Add some bottom margin */
  }
} /* end @media 767px */

/* Footnote Styling */
.footnote-link {
  text-decoration: none;
  color: var(--sg-navy);
  vertical-align: super; /* Superscript for footnote markers */
  font-size: smaller;   /* Smaller font for footnote markers */
}

.footnote-section-box {
  border: 1px solid #C8D9EF;
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #F5F9FE;
}

.footnote-section-box h4 { /* Title within footnote box, e.g., "각주" */
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 10px;
  margin-left: 0;
}

.footnote-section-box ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}

.footnote-section-box li {
  font-size: 13px;
  margin-bottom: 8px;
  padding-top: 0;
  margin-top: 0;
  margin-left: 0;
  line-height: 1.6;
  color: #666666;
}

/* Legacy .table-caption-box styles */
.table-caption-box {
  border: 1px solid var(--sg-border-lt);
  padding: 10px;
  margin-bottom: 5px;
  background-color: #EEF4FB;
  text-align: center;
}

.table-caption-box .caption-title {
  font-weight: bold;
  font-size: 0.9em;
  display: block;
  margin-bottom: 5px;
}

.table-caption-box .caption-source {
  font-size: 0.8em;
  color: var(--sg-navy);
  display: block;
}

/* Table Scroll Wrapper for Mobile */
.table-wrapper-scroll {
  position: relative;
  width: 100%;
}

.scroll-hint {
  display: none;
  text-align: center;
  font-size: 0.85em;
  color: var(--sg-mist);
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────
   Mobile styles for table scrolling (max-width: 991px)
   .scroll-hint 표시 / @keyframes pulse / ::after 그림자
   모두 이 @media 안에 포함
───────────────────────────────────────────────────────── */
@media only screen and (max-width: 991px) {
  .table-wrapper-scroll {
    position: relative;
    margin: 0 -15px; /* Extend to screen edges */
    padding: 0;
    width: calc(100% + 30px); /* Account for negative margins */
  }

  .table-wrapper-scroll .table-responsive {
    position: relative; /* For absolute positioned ::after */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    border-left: 3px solid var(--sg-navy);
    border-right: 3px solid var(--sg-navy);
    padding: 0 5px;
    margin: 0;
  }

  /* Force table to maintain minimum width for scrolling */
  .table-wrapper-scroll .table-responsive table {
    min-width: 1400px;
    width: 1400px;
    table-layout: fixed;
  }

  /* Ensure table cells don't shrink */
  .table-wrapper-scroll .table-responsive table td {
    white-space: normal;
    width: 25%;
    padding: 12px 8px;
  }

  /* First column (category column) - fixed narrower width */
  .table-wrapper-scroll .table-responsive table td:first-child {
    width: 15%;
    min-width: 100px;
  }

  /* Ensure images scale properly within cells */
  .table-wrapper-scroll .table-responsive table td img {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 200px;
    object-fit: cover;
  }

  .scroll-hint {
    display: block;
    animation: pulse 2s infinite;
  }

  /* Pulse animation to draw attention */
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  /* Add shadow gradient to indicate more content on the right */
  .table-wrapper-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, rgba(255,255,255,0.95), transparent);
    pointer-events: none;
    z-index: 10;
  }

  /* Remove shadow when scrolled to the end */
  .table-wrapper-scroll.scrolled-end::after {
    display: none;
  }
} /* end @media 991px */

/* ─────────────────────────────────────────────────────────
   요약문 Highlight Box — 디자인 가이드 적용
───────────────────────────────────────────────────────── */
.summation {
  border-left: 3px solid var(--sg-navy);
  background: #F5F9FE;
  padding: 24px 28px;
  margin-bottom: 52px;
}
.summation h4 {
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--sg-navy) !important;
  margin: 0 0 14px 0 !important;
}
.summation > div {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* ─────────────────────────────────────────────────────────
   Article Headings — 디자인 가이드 적용 (위계 정리)
───────────────────────────────────────────────────────── */
.axil-post-details h2 {
  font-family: 'Noto Serif KR', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: #1A2E44;
  line-height: 1.4;
  margin: 52px 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #1A2E44;
}
.axil-post-details .report-paper-title {
  font-family: 'Noto Serif KR', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: #1A2E44;
  line-height: 1.4;
  margin: 0 0 8px;
  border-bottom: none;
  padding-bottom: 0;
}
.axil-post-details h3 {
  font-size: 22px;
  font-weight: 600;
  color: #2D3A46;
  margin: 40px 0 16px;
  padding-left: 12px;
  border-left: 3px solid #C8D0DA;
  line-height: 1.4;
}
.axil-post-details h4 {
  font-size: 19px;
  font-weight: 600;
  color: #2D3A46;
  margin: 28px 0 12px;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────
   본문 단락 및 강조 텍스트 — 글자 크기 위계 정리
───────────────────────────────────────────────────────── */
.axil-post-details p {
  font-size: 17px;
  line-height: 1.8;
  color: #2D3A46;
  margin: 0 0 16px;
}

.axil-post-details strong {
  font-size: inherit;
  font-weight: 600;
  color: #1A2E44;
}

/* .axil-post-details p 이후 선언 → specificity + 순서 모두 우선 */
.axil-post-details .summation p {
  font-size: 15px;
  line-height: 1.6;
  color: #2b3d4d;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────
   저자 라인
───────────────────────────────────────────────────────── */
.report-author {
  font-size: 16px;
  color: #9ba8b5;
  letter-spacing: 0.02em;
  margin: 0 0 40px !important;
}

/* ─────────────────────────────────────────────────────────
   Article Nav Buttons 레이아웃
───────────────────────────────────────────────────────── */
.article-nav-buttons {
  margin-top: 60px;
  border-top: 1px solid #C8D0DA;
  padding-top: 32px;
}

.btn-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.btn-row--nav .btn--prev { flex: 1; }
.btn-row--nav .btn--next { flex: 1; text-align: right; }
.btn-row--nav .btn--next a { float: right; }

/* 이전/다음 기사 CSS 화살표 아이콘 */
.btn-arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.btn-arrow--left {
  transform: rotate(-135deg);
  margin-right: 6px;
}
.btn-arrow--right {
  transform: rotate(45deg);
  margin-left: 6px;
}

.btn-row--dl .btn2 { flex: 1; }

@media only screen and (max-width: 767px) {
  .btn-row {
    flex-direction: column;
    gap: 8px;
  }
  .btn-row--nav .btn--next a { float: none; }
}

/* ─────────────────────────────────────────────────────────
   Article Nav Buttons — 디자인 가이드 적용
   (style.css의 btn1/btn2를 override)
───────────────────────────────────────────────────────── */

/* 이전/다음 기사 버튼 — 보조적 역할, 중립 회청 스타일 */
.axil-post-details .btn1 a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  line-height: 1.4;
  padding: 13px 24px;
  background: transparent;
  color: #5A6A80;
  border: 2px solid #B8C4D4;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  transition: all 0.2s;
  transform: none;
}
.axil-post-details .btn1 a:hover {
  background: #f0f4f8;
  color: #2D4A6E;
  border-color: #8A9FBA;
  transform: none;
}

/* PDF 다운로드 버튼 — 주요 액션, 파란 강조 스타일 */
.axil-post-details .btn2 a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  line-height: 1.4;
  padding: 13px 24px;
  background: #0052CC;
  color: #ffffff;
  border: 2px solid #0052CC;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  transition: all 0.2s;
  transform: none;
}
.axil-post-details .btn2 a:hover {
  background: #0043A6;
  color: #ffffff;
  border-color: #0043A6;
  transform: none;
}

/* 통합본 PDF 버튼 — 노란 강조 유지 */
.axil-post-details .btn-row--dl .btn2:last-child a {
  background: #F59E0B;
  border-color: #D97706;
  color: #1C1917;
}
.axil-post-details .btn-row--dl .btn2:last-child a:hover {
  background: #D97706;
  border-color: #B45309;
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────
   참고문헌 / 각주
───────────────────────────────────────────────────────── */
.axil-single-widget li,
.axil-single-widget li a {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #666666 !important;
}
.axil-single-widget li a:hover {
  color: #2563EB !important;
}
.footnote-section-box a:hover {
  color: #2563EB !important;
}

/* ─────────────────────────────────────────────────────────
   배너 텍스트 영역 — PC (≥992px)
   .post-content : 좌우 14% padding (≈201.6px)
   .title / .info : style.css의 padding-right: 10% 리셋
   .info          : 1% 추가 margin (요약문만 소폭 더 좁힘)
───────────────────────────────────────────────────────── */
@media only screen and (min-width: 992px) {
  .banner-single-post.post-formate.post-standard .post-content {
    padding-left: 14% !important;
    padding-right: 14% !important;
  }
  .banner-single-post.post-formate.post-standard .post-content .title,
  .banner-single-post.post-formate.post-standard .post-content .info {
    padding-right: 0 !important;
  }
  .banner-single-post.post-formate.post-standard .post-content .info {
    margin-left: 1% !important;
    margin-right: 1% !important;
    line-height: 1.65 !important;
  }
}

/* ─────────────────────────────────────────────────────────
   sub 히어로 — ISSUE REPORT 라벨 (호버 효과 없음)
───────────────────────────────────────────────────────── */
.banner-single-post .post-cat-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #ffffff;
  cursor: default;
  /* 글래스모피즘 뱃지 */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  padding: 4px 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ─────────────────────────────────────────────────────────
   각주 — URL 있는 링크 앞 외부링크 아이콘
───────────────────────────────────────────────────────── */
.axil-post-details .footnote-section-box li a[target="_blank"]::before {
  content: '↗';
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--sg-navy);
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1;
}