/**
 * 서브페이지 공통 스타일
 * 2025-01-11: 모든 서브페이지에서 사용하는 컴포넌트 스타일
 * 2025-01-19: 정보 테이블 (.info-table) 추가
 *
 * 컴포넌트 목록:
 * - 탭 네비게이션 (.sub-tabs, .sub-tab, .sub-tabs-img)
 * - 이미지 갤러리 (.sub-gallery)
 * - 타임라인/연혁 (.sub-divider)
 * - 정관/회칙 (.sub-bylaws)
 * - 정보 테이블 (.info-table)
 * - 콘텐츠 컨테이너 (.sub-content)
 */

/* ========================================
   탭 네비게이션 (밑줄 스타일)
   2026-01-20: 박스 → 밑줄 형식, 좌측 정렬
   ======================================== */
.sub-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-4, 24px);
  justify-content: flex-start;
  border-bottom: 1px solid var(--border-light, #e2e2e2);
}

.sub-tab {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-small, 15px);
  font-weight: var(--weight-body, 400);
  color: var(--text-gray, #666);
  text-decoration: none;
}

.sub-tab:hover {
  color: var(--accent-tertiary, #294579);
}

.sub-tab.active {
  color: var(--accent-tertiary, #294579);
  font-weight: var(--weight-h3, 600);
  border-bottom-color: var(--accent-tertiary, #294579);
}

/* 2026-01-20: 탭 모바일 드롭다운 (3개 이상일 때) */

/* 드롭다운 토글 버튼 - 기본 숨김 */
.sub-tabs-toggle {
  display: none;
}

/* 드롭다운 리스트 래퍼 - 기본 상태 (PC) */
.sub-tabs-list {
  display: contents;
}

.sub-tabs.dropdown-mode {
  position: relative;
  flex-direction: column;
  border-bottom: none;
}

.sub-tabs.dropdown-mode .sub-tabs-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light, #e2e2e2);
  border-radius: 0;
  cursor: pointer;
  font-size: var(--font-small, 15px);
  font-weight: var(--weight-h3, 600);
  color: var(--accent-tertiary, #294579);
}

.sub-tabs.dropdown-mode .sub-tabs-toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-gray, #666);
  border-bottom: 2px solid var(--text-gray, #666);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-left: 12px;
  flex-shrink: 0;
}

.sub-tabs.dropdown-mode.open .sub-tabs-toggle::after {
  transform: rotate(-135deg);
}

.sub-tabs.dropdown-mode .sub-tabs-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--bg-white, #fff);
  border: 1px solid var(--border-light, #e2e2e2);
  border-radius: 4px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.sub-tabs.dropdown-mode.open .sub-tabs-list {
  display: block;
}

/* 드롭다운 모드 탭 스타일 초기화 */
.sub-tabs.dropdown-mode .sub-tab {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin: 0;
  border: none !important;
  border-radius: 0;
  text-align: left;
  background: transparent;
}

.sub-tabs.dropdown-mode .sub-tab:hover {
  background: var(--bg-gray-light, #fafafa);
}

.sub-tabs.dropdown-mode .sub-tab.active {
  background: var(--bg-gray-light, #fafafa);
  font-weight: var(--weight-h3, 600);
}

/* ========================================
   탭 네비게이션 (이미지 버튼 스타일)
   ======================================== */
.sub-tabs-img {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-6, var(--spacing-3xl, 48px));
  border-bottom: 2px solid var(--color-border, #e5e7eb);
}

.sub-tab-img {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  opacity: 0.7;
}

.sub-tab-img:hover {
  opacity: 1;
}

.sub-tab-img.active {
  opacity: 1;
}

.sub-tab-img img {
  display: block;
  height: 40px;
  width: auto;
}

.sub-tab-img .tab-on {
  display: none;
}

.sub-tab-img .tab-off {
  display: block;
}

.sub-tab-img.active .tab-on {
  display: block;
}

.sub-tab-img.active .tab-off {
  display: none;
}

/* ========================================
   탭 콘텐츠
   2025-01-11: 기존 HTML 클래스 패턴 지원
   ======================================== */
.sub-tab-content,
.greeting-content,
.history-content,
.conference-content {
  display: none;
}

.sub-tab-content.active,
.greeting-content.active,
.history-content.active,
.conference-content.active {
  display: block;
}

.sub-tab-content img,
.greeting-content img,
.history-content img,
.conference-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

/* 탭 네비게이션 - 기존 HTML 클래스 패턴 지원 */
.greeting-tabs,
.history-tabs,
.conference-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-6, var(--spacing-3xl, 48px));
  border-bottom: 2px solid var(--color-border, #e5e7eb);
}

.greeting-tab,
.history-tab,
.conference-tab {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  opacity: 0.7;
}

.greeting-tab:hover,
.history-tab:hover,
.conference-tab:hover {
  opacity: 1;
}

.greeting-tab.active,
.history-tab.active,
.conference-tab.active {
  opacity: 1;
}

.greeting-tab img,
.history-tab img,
.conference-tab img {
  display: block;
  height: 40px;
  width: auto;
}

/* ========================================
   이미지 갤러리/리스트
   ======================================== */
.sub-gallery {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sub-gallery img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

.sub-gallery-item {
  margin-bottom: 0;
}

/* 이미지 그리드 (3열)
   2026-01-20: 명예의전당 등 인물/기업 카드 그리드 */
.sub-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: var(--spacing-3xl, 48px);
}

.sub-image-grid a {
  display: block;
  text-decoration: none;
}

.sub-image-grid img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

.sub-image-grid img:hover {
  opacity: 0.85;
}

/* 이미지 그리드 반응형 */
@media (max-width: 768px) {
  .sub-image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .sub-image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.sub-gallery-intro {
  margin-bottom: var(--spacing-lg, 24px);
}

/* ========================================
   타임라인/연혁 구분선
   ======================================== */
.sub-divider {
  height: 1px;
  background: url('/images/board/board_dotline.gif') repeat-x;
  margin: 10px 0;
}

/* ========================================
   정관/회칙 테이블 스타일
   ======================================== */
.sub-bylaws {
  font-family: var(--font-family);
  color: var(--text-primary);
  line-height: var(--line-body, 1.6);
}

.sub-bylaws .main-title {
  font-size: var(--font-h1, 28px);
  font-weight: var(--weight-h1, 700);
  line-height: var(--line-h1, 1.3);
  color: #4276bb;
}

.sub-bylaws .sub-title {
  font-size: var(--font-h3, 20px);
  font-weight: var(--weight-h3, 600);
  line-height: var(--line-h3, 1.4);
}

.sub-bylaws .chapter-title {
  font-size: var(--font-h3, 20px);
  font-weight: var(--weight-h3, 600);
  line-height: var(--line-h3, 1.4);
  color: #4276bb;
  padding-top: 40px;
  padding-bottom: 20px;
  display: inline-block;
}

.sub-bylaws .article-title,
.sub-bylaws b {
  font-size: var(--font-body, 16px);
  font-weight: 700;
  line-height: var(--line-body, 1.6);
}

.sub-bylaws td {
  font-size: var(--font-body, 16px);
  line-height: var(--line-body, 1.6);
}

.sub-bylaws-history {
  font-size: var(--font-small, 14px);
  line-height: var(--line-small, 1.5);
}

/* ========================================
   정보 테이블 (.info-table)
   2025-01-19: 서브페이지 공통 테이블 스타일
   - 학회 소개, 조직도, 연락처 등에 사용
   ======================================== */
.info-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white, #fff);
  border-top: 2px solid var(--accent-tertiary, #294579);
  margin-bottom: var(--spacing-md, 10px);
}

.info-table th,
.info-table td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-light, #ddd);
  font-size: var(--font-small, 16px);
  line-height: var(--line-body, 1.6);
  vertical-align: middle;
}

.info-table th {
  background: var(--bg-gray-light, #fafafa);
  color: var(--accent-tertiary, #294579);
  font-weight: var(--weight-h3, 600);
  text-align: center;
  /* 2026-01-19: width 고정 제거 - 내용에 맞게 자동 조절 */
  /* 필요시 HTML에서 style="width: 150px" 또는 클래스로 지정 */
  white-space: nowrap;
}

.info-table td {
  color: var(--text-primary, #333);
  /* 2026-01-19: 기본 좌측 정렬, 필요시 HTML에서 text-align: center 지정 */
}

.info-table td a {
  color: var(--accent-tertiary, #294579);
  text-decoration: none;
}

.info-table td a:hover {
  text-decoration: underline;
}

.info-table td ol,
.info-table td ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.info-table td ol li,
.info-table td ul li {
  margin-bottom: 5px;
}

.info-table td ol li:last-child,
.info-table td ul li:last-child {
  margin-bottom: 0;
}

/* 정보 테이블 - 반응형 */
@media (max-width: 768px) {
  .info-table th {
    width: 100px;
    padding: 12px 15px;
    font-size: var(--font-small, 14px);
  }
  .info-table td {
    padding: 12px 15px;
    font-size: var(--font-small, 14px);
  }
}

/* ========================================
   콘텐츠 컨테이너
   ======================================== */
.sub-content {
  margin-bottom: var(--space-6, var(--spacing-3xl, 48px));
}

.sub-content-padded {
  padding: 20px;
}

/* 2026-01-19: 섹션 제목 스타일 */
.sub-content h3 {
  font-size: var(--font-h3, 24px);
  font-weight: var(--weight-h3, 600);
  line-height: var(--line-h3, 1.4);
  color: var(--accent-tertiary, #294579);
  margin-top: var(--spacing-3xl, 48px);
  margin-bottom: var(--spacing-md, 16px);
}

.sub-content h3:first-child {
  margin-top: 0;
}

/* 2026-01-20: 콘텐츠 내 이미지 기본 스타일 */
.sub-content img {
  max-width: 100%;
  height: auto;
  margin: var(--spacing-md, 16px) 0;
}

/* ========================================
   일정표 섹션
   2026-01-20: 일정표 각 세션 구분을 위한 래퍼
   ======================================== */
.schedule-section {
  margin-bottom: var(--spacing-3xl, 48px);
}

.schedule-section:last-child {
  margin-bottom: 0;
}

/* ========================================
   리스트 스타일
   2025-01-19: 서브페이지 콘텐츠 내 리스트
   ======================================== */
.sub-content ul,
.sub-content ol {
  margin: 0 0 var(--spacing-md, 16px) 0;
  padding-left: var(--spacing-lg, 24px);
}

.sub-content ul {
  list-style: disc;
}

.sub-content ol {
  list-style: decimal;
}

.sub-content li {
  margin-bottom: var(--spacing-xs, 4px);
  line-height: var(--line-body, 1.6);
}

.sub-content li:last-child {
  margin-bottom: 0;
}

/* 번호 없는 리스트 - 텍스트에 이미 번호/기호가 있을 때 사용 */
.sub-content ul.sub-list-plain,
.sub-content ol.sub-list-plain,
.sub-list-plain {
  list-style: none;
  padding-left: 20px;
}

/* ========================================
   강조 박스
   2025-01-19: 알림, 안내, 주의 등
   ======================================== */
.sub-box {
  padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
  margin-bottom: var(--spacing-md, 16px);
  border-radius: var(--radius-md, 4px);
  background: var(--bg-gray-light, #fafafa);
  border: 1px solid var(--border-light, #e2e2e2);
}

.sub-box-info {
  background: #e8f4fc;
  border-color: #b8daef;
}

.sub-box-notice {
  background: #fff8e6;
  border-color: #ffe4a0;
}

.sub-box-important {
  background: #fef2f2;
  border-color: #fecaca;
}

/* ========================================
   구분선
   ======================================== */
.sub-hr {
  border: none;
  border-top: 1px solid var(--border-light, #e2e2e2);
  margin: var(--spacing-lg, 24px) 0;
}

.sub-hr-thick {
  border-top-width: 2px;
  border-color: var(--accent-tertiary, #294579);
}

/* ========================================
   다운로드 버튼
   2026-01-20: 파일 다운로드용 버튼 스타일
   ======================================== */
.sub-download-btn {
  display: inline-block;
  padding: 16px 32px;
  background: var(--accent-tertiary, #294579);
  color: var(--bg-white, #fff);
  font-size: var(--font-body, 16px);
  font-weight: var(--weight-h3, 600);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sub-download-btn:hover {
  background: #3a5a8a;
  color: var(--bg-white, #fff);
  text-decoration: none;
}

/* 다운로드 버튼 컨테이너 (중앙 정렬용) */
.sub-download-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: var(--spacing-3xl, 48px) 0;
}

/* ========================================
   하단 여백
   ======================================== */
.sub-bottom-space {
  height: 50px;
}

.sub-bottom-space-lg {
  height: 70px;
}