/* ================================
   공통: About Page 기본 설정
================================ */
.page-about {
  background: #ffffff;
  font-family: "Noto Sans KR", sans-serif;
}

/* 메인에서 쓰던 클래스 – 필요 시 사용 */
.nav--transparent {
  background: rgba(0, 0, 0, var(--nav-alpha));
}

/* ================================
   Tabs
================================ */
.about-tabs {
  margin-top: 120px;
}

.tabs-inner {
  display: flex;
  gap: 30px;
  padding-left: 180px;
}

.about-tab {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 6px;
  cursor: pointer;
  color: #777;
  border-bottom: 2px solid transparent;
}

.about-tab.active {
  color: #000;
  border-bottom: 2px solid #000;
}

/* ================================
   Section 공통 레이아웃
================================ */
.about-section {
  display: none;
  padding: 40px 180px 120px;   /* 좌우 180px 기준 */
}

.about-section.active {
  display: block;
}

.section-title {
  font-size: 36px;
  margin-top: 20px;
  font-weight: 600;
}

/* ================================
   조직도 섹션
================================ */
.org-img-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  box-sizing: border-box;
}

.org-img {
  max-width: 1100px;
  display: block;
  width: auto;
}

/* ================================
   연혁 및 수상내역 섹션
================================ */

/* 왼쪽 제목 / 오른쪽 내용 2단 그리드 */
.history-container {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr); /* 왼쪽 제목 / 오른쪽 박스 */
  column-gap: 80px;
  box-sizing: border-box;
  margin-top: 25px;
}

/* 왼쪽 큰 제목 */
.history-left {
  text-align: left;
}

.history-title {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
}

/* 오른쪽 전체 박스 위치 (기존 구조 유지) */
.history-right {
  margin-top: 100px;     /* 왼쪽 큰 제목보다 아래에서 시작 */
  margin-left: 230px;    /* 오른쪽으로 이동 */
  display: flex;
  flex-direction: column;
  gap: 60px;             /* 블록 사이 간격 (선 중앙 위치 계산에 사용) */
}

/* 각 블록: 제목 + 내용 */
.history-block {
  display: grid;
  grid-template-columns: 130px auto;  /* 왼쪽 소제목 / 오른쪽 리스트 */
  column-gap: 40px;
  align-items: flex-start;
  position: relative;                 /* ::after 선 위치 기준 */
  padding-top: 10px;                  /* 블록 내부 위 여백 조금 */
}

/* 블록 사이 중앙선 (위 블록과 아래 블록 사이의 정중앙에 위치) */
.history-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;          /* gap: 60px → 그 절반인 30px 지점에 선 */
  height: 1px;
  background: #ddd;
}

/* 마지막 블록은 선 제거 */
.history-block:last-child::after {
  display: none;
}

/* 소제목(지원사업 / 해외활동 / 수상기록 / 국내활동) */
.history-label {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

/* 오른쪽 리스트 – 제목보다 살짝 아래에서 시작 */
.history-list {
  margin-top: 20px;      /* 제목과 리스트 사이 간격 */
  list-style: none;
  padding: 0;
  font-size: 16px;
  line-height: 2.15;
}

.history-list li + li {
  margin-top: 2px;
}

.long{
    line-height: 1.4;
}

/* ================================
   조직도(텍스트형) 새 스타일
================================ */

.org-text {
  margin-top: 20px;
  max-width: 1200px;
  color: #222;
}

.org-subtitle {
  font-size: 24px;
  font-weight: 700;
  margin: 60px 0 20px;
}

.org-paragraph {
  font-size: 17px;
  line-height: 1.9;
  margin-bottom: 26px;
}

.org-list {
  margin: 20px 0 40px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.8;
}

.org-list li {
  margin-bottom: 8px;
}

/* =====================================
   조직 소개 섹션 (연혁 섹션과 동일 레이아웃)
===================================== */

.org-container {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr); /* 좌측 제목 300px / 우측 내용 */
  column-gap: 80px;
  margin-top: 25px;
  box-sizing: border-box;
}

/* 왼쪽 제목 영역 */
.org-left {
  text-align: left;
}

.org-title {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
}

/* 오른쪽 본문 */
.org-right {
  margin-top: 60px;
  margin-left: 0px;   /* ← 좌측 정렬 */
  display: flex;
  flex-direction: column;
  gap: 70px;
  max-width: 1900px;   /* 텍스트 폭 제한 */
}

/* 개별 블록 (연혁의 history-block과 유사 구조) */
.org-block {
  position: relative;
  padding-top: 10px;
}

/* 블록 제목 */
.org-label {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px;
}

/* 본문 텍스트 */
.org-text {
  font-size: 18px;
  line-height: 1.9;
  margin-bottom: 16px;
  color: #333;
}

/* 리스트 */
.org-list {
  padding-left: 18px;
  margin-top: 10px;
  font-size: 16px;
}

.org-list li {
  margin-bottom: 6px;
  line-height: 1.7;
}

/* 연혁처럼 아래 구분선이 필요하다면 (옵션)
.org-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  height: 1px;
  background: #ddd;
}
*/

/* =========================================
   Partner / Supporters Strip (푸터 위)
========================================= */

.partner-strip {
  width: 100%;
  background: #e1e1e1;          /* 연한 물색 */
  padding: 32px 0;
  border-top: 1px solid #d6edf9;
  border-bottom: 1px solid #d6edf9;
  box-sizing: border-box;
}

.partner-inner {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  padding: 0 180px;
  box-sizing: border-box;
}

.partner-label {
  margin: 0 0 18px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a7fa2;
}

/* 트랙: 2세트가 가로로 이어진 상태 */
.partner-track {
  display: flex;
  gap: 80px;
  width: max-content;
  align-items: center;

  /* ✅ 전체 길이의 절반(-50%)까지만 이동 */
  animation: partner-scroll 30s linear infinite;
}

/* 로고 */
.partner-logo {
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ✅ 0%와 100% 시점의 화면이 완전히 동일하도록 설정 */
@keyframes partner-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* 반응형 */
@media (max-width: 1280px) {
  .partner-inner {
    padding: 0 60px;
  }
}

@media (max-width: 960px) {
  .partner-inner {
    padding: 0 32px;
  }
  .partner-track {
    gap: 48px;
    animation-duration: 20s;
  }
  .partner-logo {
    height: 48px;
  }
}

@media (max-width: 640px) {
  .partner-inner {
    padding: 0 20px;
  }
  .partner-track {
    gap: 32px;
    animation-duration: 16s;
  }
  .partner-logo {
    height: 38px;
  }
}