/* 기본 스타일 */
body {
  font-family: 'Noto Sans KR', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background-color: #f9f9f9;
  color: #1b263b; /* 블루 톤 텍스트 */
  line-height: 1.65;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity 280ms ease;
}

body.is-loaded { opacity: 1; }

html { scroll-behavior: smooth; }

 /* 네비게이션 스타일 수정 */
#top {
  top: 0;
  left: 0;
  right: 0;
  background: #0b2a5b; /* 푸터 톤과 통일 */
  backdrop-filter: saturate(130%) blur(4px);
  z-index: 1000;
}

h1 {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

.site-title {
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.2px;
}

header {
  background-color: #1a1a1a;
  color: white;
  padding: 0.75rem 1.25rem;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 1.4rem;
  font-family: 'Noto Sans KR', sans-serif;

}

.container {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  margin-top: 20px;
  margin-bottom: 20px;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.container:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.08); transform: translateY(-1px); }

/* 테이블 기본 스타일 (깔끔한 블루톤) */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 20px;
  background: #fff;
  border: 1px solid #d9e2f3;
  border-radius: 10px;
  overflow: hidden;
  table-layout: fixed; /* 컬럼 폭 고정: colgroup 기준 */
}
.table th, .table td {
  border-bottom: 1px solid #e6eef9;
  padding: 16px 18px;
  text-align: left;
  font-size: 0.95rem;
}
.table th {
  background: #eaf2ff;
  color: #0b5bd3;
  font-weight: 800;
  text-align: center;
}
.text-center { text-align: center; }

/* 지브라 + 호버 */
.table tbody tr:nth-child(odd) td { background-color: #fbfdff; }
.table tbody tr:hover td { background-color: #eef5ff; }
.table tbody tr { transition: background-color 140ms ease; }

/* 첫 번째 컬럼은 colgroup에서 관리 */
.term { white-space: nowrap; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; }
.term a { display: inline-block; }

.term a {
  text-decoration: none;
  color: #0b5bd3;
  font-weight: 700;
  transition: color 160ms ease;
}
.term a:hover { color: #093f91; }

.link {
  margin-top: 30px;
  text-align: center;
}
.link a {
  text-decoration: none;
  color: white;
  background-color: #0b5bd3;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 700;
  transition: background-color 180ms ease, transform 180ms ease;
}
.link a.mute {
  background-color: #f0f0f0;
  color: #aaa;
  cursor: default;
  pointer-events: none;
}
.link a:hover { background-color: #0949a8; transform: translateY(-1px); }
/* .term 스타일은 이전에 있었던 중복되거나 불필요한 내용 제거 */

/* 상세 설명 섹션 */
.details {
  display: none; /* 소스 보관 용도 */
}
.details:first-of-type {
    margin-top: 20px;
}
.details h3 {
  margin-top: 40px;
  color: #333;
}
.details img {
  display: block;
  max-width: 100%;
  max-height: 250px; /* 이미지 높이 제한 */
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms ease, transform 280ms ease;
}

/* 모달 기반으로 전환하여 active 상태 사용 안 함 */

footer {
  font-family: 'Noto Sans KR', sans-serif;
  text-align: center;
  padding: 1.25rem;
  margin-top: 40px;
  background: #0b2a5b;
  color: #e9f1ff;
  font-size: 0.95rem;
}
footer a {
    color: #7cc2ff;
    text-decoration: none;
    transition: color 160ms ease;
}
footer a:hover { color: #a7d9ff; }

/* 새로 추가된 버튼 스타일 */
.toggle-details-btn {
  margin-left: 4px;
  padding: 2px 6px;
  background-color: #0b5bd3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.toggle-details-btn:hover {
  background-color: #0949a8;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(11,91,211,0.22);
}

.toggle-details-btn.active-button {
  background-color: #dc3545; /* 숨기기 버튼 색상 */
}

.toggle-details-btn.active-button:hover {
  background-color: #c82333;
}

/* 테이블 인라인 상세 행 */
tr.row-details td {
  background: #f6f9ff;
  border-top: 1px solid #d9e2f3;
  padding: 18px 22px;
}
tr.row-details td h3 { margin-top: 0; color: #0b2a5b; }
tr.row-details td img { max-width: 100%; display: block; margin: 12px 0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }


/* ------------------------------------------- */
/* --- 모바일 반응형 스타일 (핵심) --- */
/* ------------------------------------------- */
@media (max-width: 768px) {
  body {
    padding: 0;
  }
  .term { white-space: normal; gap: 6px; }
  .container {
    padding: 15px;
    margin-top: 0;
    border-radius: 0;
  }

  .container h1 {
    font-size: 1.35rem; /* 모바일에서 제목 크기 줄이기 */
  }

  /* 테이블을 카드 목록 형태로 변환 */
  table thead {
    display: none; /* PC에서 보이던 aot제목 행 숨기기 */
  }
  table, tbody, tr, td {
    display: block; /* 모든 테이블 요소를 블록으로 변경 */
    width: 100%;
  }
  tr {
    margin-bottom: 15px; /* 각 행(이제 카드가 됨) 사이에 여백 주기 */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 180ms ease, transform 180ms ease;
  }
  tr:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.06); transform: translateY(-1px); }
  td {
    text-align: right; /* 값을 오른쪽 정렬 */
    position: relative;
    padding-left: 50%; /* 라벨이 들어갈 공간 확보 */
    border: none;
    border-bottom: 1px solid #eee;
  }
  /* 인라인 상세 행은 카드 내부 본문처럼 표시 */
  tr.row-details { margin-top: -10px; border-top: none; }
  tr.row-details td {
    text-align: left;
    position: static;
    padding: 16px;
    border-bottom: none;
  }
  tr.row-details td::before { content: none; }
  td:last-child {
      border-bottom: none;
  }
  td::before {
    content: attr(data-label); /* data-label 속성값을 가져와 라벨로 사용 */
    position: absolute;
    left: 12px;
    width: calc(50% - 24px);
    text-align: left;
    font-weight: bold;
    color: #333;
  }
  .term a {
      display: inline-block; /* 버튼과 함께 한 줄에 표시되도록 */
      width: auto; /* 너비 자동 조절 */
      margin-right: 5px; /* 버튼과의 간격 */
  }
  /* 모바일에서 버튼 위치 조정을 위한 추가 스타일 */
  .term {
      display: flex; /* 내부 요소를 유연하게 배치 */
      align-items: center; /* 수직 중앙 정렬 */
      justify-content: space-between; /* a 태그와 버튼을 양 끝으로 분리 */
      padding-right: 12px; /* 버튼이 잘리지 않도록 오른쪽 패딩 추가 */
  }
}